/* Фирменный стиль аквариума — дизайн-система Cherish Days
 * (polaroid-press: docs/design-system.md, src/components/ui/brand.tsx).
 *
 * Плоско, по-журнальному, тепло. Всё стоит прямо на кремовом фоне: ни
 * белых карточек, ни серого, ни теней, ни кружков вокруг значков. Текст —
 * тёмно-зелёные «чернила», оранжевый — действия, линии и редкие акценты.
 * Заголовки — Guyot обычного начертания, подписи — Inter жирными
 * капителями, то, что вводят в поля, — мелкий Inter. Все линии в 1 px.
 * Фото с прямыми углами и без рамок. Подробнее — docs/design.md.
 *
 * Шрифты — те же, что у Cherish Days: Guyot Headline (лицензия Cherish
 * Days, аквариум — её часть; см. assets/fonts/README.md) и Inter. */

@font-face {
  font-family: "Guyot"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/assets/fonts/GuyotHeadline-Regular.woff2) format("woff2");
}
@font-face {
  font-family: "Guyot"; font-style: italic; font-weight: 400; font-display: swap;
  src: url(/assets/fonts/GuyotHeadline-Italic.woff2) format("woff2");
}
@font-face {
  font-family: "Aqua Sans"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/assets/fonts/inter-latin-400-normal.woff2) format("woff2");
}
@font-face {
  font-family: "Aqua Sans"; font-style: normal; font-weight: 700; font-display: swap;
  src: url(/assets/fonts/inter-latin-700-normal.woff2) format("woff2");
}

/* ── цвета ──────────────────────────────────────────────────────────────
   На страницах — только три, всегда сплошные: крем, чернила, оранжевый.
   Внутри инструментов (съёмка, управление, выбор рыбок) — ещё тихие
   смеси чернил в крем, а не холодный серый, плюс белый для бумаги и
   красный для ошибок и удаления. */
:root {
  --cream: #f8f8f0;
  --ink: #0e391f;
  --orange: #ff5500;

  --paper: #ffffff;   /* бумага: листы раскрасок, рисунки рыбок */
  --deep: #082213;    /* чернила на 40% темнее: окно 3D-превью */
  --mist: #eaede3;    /* чернила 6%: тихие заливки, пустые места */
  --line: #dce1d7;    /* чернила 12%: волосяные линии внутри инструментов */
  --stone: #bec8bc;   /* чернила 25%: обводка при наведении */
  --sage: #8fa292;    /* чернила 45%: неактивные значки, не текст */
  --moss: #54725e;    /* чернила 70%: второстепенный текст */
  --red: #c62f1e;     /* ошибки и удаление */

  --serif: "Guyot", Georgia, "Times New Roman", serif;
  --sans: "Aqua Sans", Inter, system-ui, -apple-system, "Segoe UI", sans-serif;

  --gutter: 16px;     /* поля страницы: 16 на телефоне, 32 от планшета */
  --gap: 128px;       /* расстояние между разделами: 128 / 192 / 256 */
}
@media (min-width: 768px) { :root { --gutter: 32px; --gap: 192px; } }
@media (min-width: 1024px) { :root { --gap: 256px; } }

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font: 400 16px/24px var(--sans);
  -webkit-font-smoothing: antialiased;
}
@media (min-width: 768px) { body { font-size: 14px; line-height: 20px; } }

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 1px solid var(--orange); outline-offset: 3px; }
::selection { background: var(--orange); color: var(--cream); }
[hidden] { display: none !important; }

.sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── шрифтовая шкала ────────────────────────────────────────────────────
   Единственные размеры текста. Цвет даёт место, где стиль стоит.
                    телефон   от 768 (→ 1024)
     h1      антиква  36/1.1   58 → 70 /1.05   первый заголовок страницы
     h2      антиква  36/1.1   46 → 58 /1.05   заголовки разделов
     h3      антиква  24/30    22/28           подзаголовки, вопросы, цитаты
     accent  курсив   24/30    22/28           текстовые ссылки, слоганы
     price   антиква  60       70              крупные цифры (номера шагов)
     label   Inter    16/18    16/18           жирные капители: пункты меню
     label-s Inter    12/14    12/14           подписи полей, ключи таблиц
     lead    Inter    18/26    16/24           вводный абзац
     body    Inter    16/24    14/20           описания, ответы
     small   Inter    14/20    12/16           примечания, мелкий шрифт
   Антиква всегда обычного начертания (жирного у шрифта нет), цифры — никогда
   не курсивом. */
.h1, .h2, .h3, .accent, .price { font-family: var(--serif); font-weight: 400; margin: 0; }
.h1 { font-size: 36px; line-height: 1.1; }
.h2 { font-size: 36px; line-height: 1.1; }
.h3 { font-size: 24px; line-height: 30px; letter-spacing: 0.015em; }
.accent { font-size: 24px; line-height: 30px; font-style: italic; }
.price { font-size: 60px; line-height: 1; font-variant-numeric: lining-nums; }
.h1 i, .h2 i, .h3 i { font-style: italic; }
.label, .label-s {
  font-family: var(--sans); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.05em; margin: 0;
}
.label { font-size: 16px; line-height: 18px; }
.label-s { font-size: 12px; line-height: 14px; }
.lead, .body, .small { font-family: var(--sans); font-weight: 400; margin: 0; }
.lead { font-size: 18px; line-height: 26px; }
.body { font-size: 16px; line-height: 24px; }
.small { font-size: 14px; line-height: 20px; }
@media (min-width: 768px) {
  .h1 { font-size: 58px; line-height: 1.05; }
  .h2 { font-size: 46px; line-height: 1.05; }
  .h3, .accent { font-size: 22px; line-height: 28px; }
  .price { font-size: 70px; }
  .lead { font-size: 16px; line-height: 24px; }
  .body { font-size: 14px; line-height: 20px; }
  .small { font-size: 12px; line-height: 16px; }
}
@media (min-width: 1024px) {
  .h1 { font-size: 70px; }
  .h2 { font-size: 58px; }
}
.measure { max-width: 54ch; }
.ink { color: var(--ink); }
.orange { color: var(--orange); }
.moss { color: var(--moss); }
.err-text { color: var(--red); }

/* ── кнопки ─────────────────────────────────────────────────────────────
   Таблетка 44 px, подпись — антиквой 22 px (20 на телефоне) с разрядкой.
   Главная — залитая оранжевым, рядом — оранжевая обводка. При наведении
   заливка уходит в чернила. Выключенная кнопка цвет не теряет. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 44px; padding: 0 24px; margin: 0;
  border: 1px solid var(--orange); border-radius: 999px;
  background: var(--orange); color: var(--cream);
  font: 400 20px/24px var(--serif); letter-spacing: 0.02em;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color .15s, color .15s, border-color .15s;
  -webkit-tap-highlight-color: transparent;
}
@media (min-width: 768px) { .btn { padding: 0 28px; font-size: 22px; } }
.btn:hover { background: var(--ink); border-color: var(--ink); color: var(--cream); }
.btn[disabled], .btn[aria-disabled="true"] { cursor: default; }
.btn[disabled]:hover { background: var(--orange); border-color: var(--orange); }
.btn-block { display: flex; width: 100%; }

.btn-outline { background: transparent; color: var(--orange); }
.btn-outline:hover { background: var(--orange); border-color: var(--orange); color: var(--cream); }
.btn-outline[disabled]:hover { background: transparent; color: var(--orange); }

/* На оранжевой панели: кремовая таблетка с оранжевой подписью и кремовая обводка. */
.btn-cream { background: var(--cream); border-color: var(--cream); color: var(--orange); }
.btn-cream:hover { background: var(--ink); border-color: var(--ink); color: var(--cream); }
.btn-cream-outline { background: transparent; border-color: var(--cream); color: var(--cream); }
.btn-cream-outline:hover { background: var(--cream); border-color: var(--cream); color: var(--orange); }

/* Необратимое: красная обводка. */
.btn-danger { background: transparent; border-color: var(--red); color: var(--red); }
.btn-danger:hover { background: var(--red); border-color: var(--red); color: var(--cream); }

/* Текстовая ссылка: курсив антиквы, оранжевый, подчёркнут. */
.link {
  font: italic 400 24px/30px var(--serif);
  color: var(--orange); text-decoration: underline;
  text-decoration-thickness: 1px; text-underline-offset: 4px;
  background: none; border: 0; padding: 0; cursor: pointer;
  transition: color .15s;
}
@media (min-width: 768px) { .link { font-size: 22px; line-height: 28px; } }
.link:hover { color: var(--ink); }

/* Тихое действие в строке («Убрать», «Печать»): мелкие капители с подчёркиванием. */
.quiet {
  display: inline-block; padding: 0; margin: 0; border: 0; background: none;
  font: 700 12px/14px var(--sans); letter-spacing: 0.05em; text-transform: uppercase;
  color: inherit; text-decoration: underline; text-decoration-thickness: 1px;
  text-underline-offset: 3px; cursor: pointer; transition: color .15s;
}
.quiet:hover { color: var(--orange); }
.quiet.danger { color: var(--red); }

/* ── поля ───────────────────────────────────────────────────────────────
   Одна оранжевая линия в 1 px: ни рамки, ни заливки, ни отступов. Текст —
   мелкий Inter чернилами, слева; название поля — оранжевым плейсхолдером
   или подписью мелкими капителями сверху. */
.field {
  display: block; width: 100%; height: 44px; margin: 0; padding: 0;
  border: 0; border-bottom: 1px solid var(--orange); border-radius: 0;
  background: transparent; color: var(--ink); text-align: left;
  font: 400 16px/24px var(--sans);
  -webkit-appearance: none; appearance: none;
}
@media (min-width: 768px) { .field { font-size: 14px; } }
.field::placeholder { color: var(--orange); opacity: 1; }
.field:focus { outline: none; border-bottom-color: var(--ink); }
.field-label { display: block; margin: 0 0 4px; color: var(--ink); }

/* ── шапка ──────────────────────────────────────────────────────────────
   Как у Cherish Days: ссылки по краям Inter 16 оранжевым (наведение —
   чернила), знак посередине, кремовая шапка липнет к верху. */
.site-head {
  position: sticky; top: 0; z-index: 20;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px;
  padding: 16px var(--gutter);
  background: var(--cream);
}
.site-head > :first-child { justify-self: start; }
.site-head > :last-child { justify-self: end; }
.nav-link {
  font: 400 16px/24px var(--sans); color: var(--orange); text-decoration: none; white-space: nowrap;
  background: none; border: 0; padding: 0; cursor: pointer; transition: color .15s;
}
.nav-link:hover { color: var(--ink); }
.nav { display: flex; align-items: center; gap: 24px; }

/* Логотип Cherish Days посередине — как в шапке cherishdays.com.au:
   28 px высотой, 32 от планшета (24 на самых узких телефонах). */
.mark { display: block; line-height: 0; }
.mark img { display: block; width: auto; height: 28px; }
@media (min-width: 768px) { .mark img { height: 32px; } }
@media (max-width: 374px) { .mark img { height: 24px; } }
/* Ссылка, которая дублирует знак (он и так ведёт на главную), на телефоне
   уступает ему место. */
@media (max-width: 479px) { .site-head .hide-phone { display: none; } }
@media (min-width: 768px) {
  .mark .caps { font-size: 22px; }
  .mark i { font-size: 26px; }
}

/* ── бегущая строка ─────────────────────────────────────────────────────
   Оранжевые капители во всю ширину окна плывут влево. При «меньше
   движения» стоят на месте, по центру. */
.ticker { overflow: hidden; width: 100%; }
.ticker-run {
  display: flex; width: max-content; color: var(--orange);
  animation: marquee 40s linear infinite;
}
.ticker-run > span { display: flex; align-items: center; white-space: nowrap; }
.ticker-run b { font-weight: inherit; padding: 0 24px; }
@media (min-width: 768px) { .ticker-run b { padding: 0 32px; } }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .ticker-run { animation: none; width: 100%; justify-content: center; flex-wrap: wrap; }
  .ticker-run .dup { display: none; }
}

/* ── подвал ─────────────────────────────────────────────────────────────
   Курсивный слоган, страницы капителями, оранжевая строка, внизу мелкая
   полоса. */
.site-foot { padding: var(--gap) var(--gutter) 0; }
.foot-grid { display: grid; gap: 56px; text-align: center; justify-items: center; }
@media (min-width: 768px) {
  .foot-grid { grid-template-columns: 1fr 1fr; align-items: start; text-align: left; justify-items: stretch; }
}
.foot-tag { color: var(--ink); font-style: italic; max-width: 12ch; }
.foot-links { display: grid; gap: 20px; justify-items: center; list-style: none; margin: 0; padding: 0; }
.foot-links a { color: var(--ink); text-decoration: none; transition: color .15s; }
.foot-links a:hover { color: var(--orange); }
.foot-slogan { color: var(--orange); margin-top: 40px; text-align: center; }
.foot-bar {
  display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; align-items: center;
  margin-top: 96px; padding: 24px 0;
}
.foot-bar a { color: var(--ink); }
@media (max-width: 767px) { .foot-bar { flex-direction: column; text-align: center; } }

/* ── полоса загрузки ────────────────────────────────────────────────────
   Тихая дорожка, по которой бежит оранжевый отрезок. Без кружков. */
.meter { position: relative; height: 2px; background: var(--mist); overflow: hidden; }
.meter::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 34%;
  background: var(--orange); animation: meter-run 1.3s ease-in-out infinite;
}
@keyframes meter-run { from { transform: translateX(-100%); } to { transform: translateX(300%); } }
@media (prefers-reduced-motion: reduce) { .meter::after { animation-duration: 3s; } }

/* ── страница в меню аквариума ──────────────────────────────────────────
   Съёмка, раскраски и управление открываются ещё и врезкой в панели
   меню: там свои шапка и подвал лишние, а фон даёт сама панель. */
body.embed { background: transparent; }
body.embed .site-head, body.embed .site-foot, body.embed .no-embed { display: none !important; }