/* Hallmark · genre: atmospheric · macrostructure: Stat-Led (первый экран) + Workbench (стенд) + Portfolio Grid (кейсы кадрами) + Photographic (интерлюдии кресла и шара) · theme: custom (DESIGN.md v2 «Ночь», синий шёлк) · enrichment: Tier C still (кадры лампы, кресла, шара) + снимки настоящих страниц (кейсы) · nav: N9 edge-aligned · footer: Ft6 letter close (контакты, кейсы, реквизиты; этап 3–4)
 * Workbench: вместо скриншотов в рамках живые стенды (J12), липкой кнопки нет (карта §6, вопрос 3); главы A/B/C на двух полях (J7)
 * круг D1 29.09: кейсы кадрами 16:10 (лента на телефоне, J11), две фотоинтерлюдии, край кадра это шов (J7), H2 от 40 px на 1440 (J3)
 * круг D3 29.09: кейсы ИИ и рекламы цифрой на стене первого экрана (материал часов, кадр из кэша), пара кейсов на телефоне столбиком
   (лента прятала вторую карточку); цена: ведущий ИИ-помощник двумя ролями, сайт последним; согласие компактно (details)
 * paper oklch(24.7% .026 249) · deep oklch(22% .05 256) · accent brass oklch(78% .11 78) · Unbounded 300/600 + Golos Text 400/600 · axes: dark / geometric-sans / warm
 */
/* Hallmark · pre-emit critique: P5 H4 E4 S5 R4 V4 · этап 1 (каркас и первый экран) */
/* Hallmark · pre-emit critique, круг D1 29.09: P5 H4 E4 S5 R5 V4 · слабое место: кадр протокола ИИ синим по синему
   читается скорее табличкой, чем картинкой (честного кадра помощника нет) */
/* Hallmark · pre-emit critique, круг D3 29.09: P5 H4 E4 S5 R5 V4 · слабое место D1 снято: результат кейса цифрой на стене
   первого экрана, глиф к стене от 4,13:1. Новое слабое место: цена на телефоне 1,77 экрана, второй тяжеловес после стенда
   (J1), а на 1440 правая колонка помощника короче левой. Акцент не тронут: латунь только на .go ниже и на итоге стенда,
   0,82% по всему scope контракта. Числа в 29-d3-sostoyanie.md */

/* Общий слой новой главной. Обоснования здесь одной строкой, развёрнутые: DESIGN.md v2,
   карта 18-karta-obektov-glavnoy.md (строки 0.1–0.7), макет mockups/v4/3-chas/tokens.css. */

/* Шрифты с ₽: блок инженера из 18-sborka-sostoyanie.md дословно, preload только 300-num */
@font-face{
  font-family:"Unbounded";
  src:url("../assets/fonts/noch-unbounded-300-num.woff2") format("woff2");
  font-weight:300; font-style:normal; font-display:swap;
  unicode-range:U+0020, U+0025, U+002B-003A, U+00A0, U+00D7, U+2013, U+20BD, U+2192, U+2212, U+2248;
}
@font-face{
  font-family:"Unbounded";
  src:url("../assets/fonts/noch-unbounded-300-lat.woff2") format("woff2");
  font-weight:300; font-style:normal; font-display:swap;
  unicode-range:U+0021-0024, U+0026-002A, U+003B-007E, U+00A9, U+00AB, U+00B0-00B1, U+00B7, U+00BB, U+2014, U+2018-2019, U+201C-201E, U+2022, U+2026, U+2190-2191, U+2193, U+2264-2265;
}
@font-face{
  font-family:"Unbounded";
  src:url("../assets/fonts/noch-unbounded-300-cyr.woff2") format("woff2");
  font-weight:300; font-style:normal; font-display:swap;
  unicode-range:U+0401, U+0410-044F, U+0451, U+2116;
}
@font-face{
  font-family:"Unbounded";
  src:url("../assets/fonts/noch-unbounded-600.woff2") format("woff2");
  font-weight:600; font-style:normal; font-display:swap;
  unicode-range:U+0020-007E, U+00A0, U+00A9, U+00AB, U+00B0-00B1, U+00B7, U+00BB, U+00D7, U+0401, U+0410-044F, U+0451, U+2013-2014, U+2018-2019, U+201C-201E, U+2022, U+2026, U+20BD, U+2116, U+2190-2193, U+2212, U+2248, U+2264-2265;
}
@font-face{
  font-family:"Golos Text";
  src:url("../assets/fonts/noch-golos-400.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
  unicode-range:U+0020-007E, U+00A0, U+00A9, U+00AB, U+00B0-00B1, U+00B7, U+00BB, U+00D7, U+0401, U+0410-044F, U+0451, U+2009, U+2011, U+2013-2014, U+2018-2019, U+201C-201E, U+2022, U+2026, U+202F, U+20BD, U+2116, U+2190-2193, U+2212, U+2248, U+2264-2265;
}
@font-face{
  font-family:"Golos Text";
  src:url("../assets/fonts/noch-golos-600.woff2") format("woff2");
  font-weight:600; font-style:normal; font-display:swap;
  unicode-range:U+0020-007E, U+00A0, U+00A9, U+00AB, U+00B0-00B1, U+00B7, U+00BB, U+00D7, U+0401, U+0410-044F, U+0451, U+2009, U+2011, U+2013-2014, U+2018-2019, U+201C-201E, U+2022, U+2026, U+202F, U+20BD, U+2116, U+2190-2193, U+2212, U+2248, U+2264-2265;
}

:root {
  /* цвет: шесть смысловых и три тона часов (DESIGN.md «Цвет»), других цветовых токенов нет */
  --night: oklch(24.7% .026 249);   /* тень кадра chas (23,34,45): фон первого экрана у шва фото и кода; поля глав не красит */
  --deep:  oklch(25.5% .05 253);    /* поле глав A и C: насыщенный полуночно-синий; по светлоте в тон стены кадра (20,40,63 против 22,41,61), ориентир DESIGN.md 22% давал плашку под фото */
  --line:  oklch(40% .05 258);      /* волосяные линии только внутри списков (J7) */
  --ink:   oklch(94% .015 85);      /* текст, тёплый белый */
  --dim:   oklch(85% .022 250);     /* второй голос; ниже 80% мелкий текст на кадре падал до 4,36:1 */
  --brass: oklch(78% .11 78);       /* единственный акцент 0,5–3%: главная кнопка, итог стенда, одна метка */
  --metal: oklch(35% .008 268);     /* лицо цифр часов: запечено в карты noch-face-*; цифры кейсов на стене красит напрямую (круг D3) */
  --edge:  oklch(65.4% .019 76);    /* нижний торец цифр: запечён в карты noch-edge-*; у цифр кейсов торец тенью текста */
  --cast:  oklch(63% .04 261);      /* тень цифр на стене, умножается на кадр */

  /* статичное зерно: SVG-шум без запроса. --grain-img для слоя с mix-blend (кадр), --grain-18 уже с альфой .18 для полей */
  --grain-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --grain-18: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E");

  /* гарнитуры: --ff-*, чтобы имя не спорило со шкалой кеглей */
  --ff-display: "Unbounded", "Golos Text", system-ui, sans-serif;
  --ff-body: "Golos Text", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* шкала: 10 мест, карта 0.3. Время (--text-time) и фраза (--fs) считаются от сцены в noch-hero.css.
     Призыв > крупное число > H2 на любой ширине (8.1.1); межстрочный обратен кеглю (B7) */
  --text-h2:    clamp(30px, 1.8vw + 20px, 46px);    /* шапка секции, одна на страницу (J3); 46 px с 1445, к тексту 2,9:1 (было 39 px, ниже порога крупного); вилка сайта 63 px остаётся на ступень крупнее прочих цен */
  --text-call:  clamp(40px, 4vw + 22px, 88px);      /* финальный призыв, крупнее всего ниже первого экрана (J8) */
  --text-num:   clamp(36px, 2.6vw + 26px, 64px);    /* итог стенда и цена, Unbounded 300 (J6, к подписи 14 около 4,6:1) */
  --text-h3:    clamp(19px, .45vw + 17px, 23px);    /* заголовок строки */
  --text-body:  16px;
  --text-small: 14px;                               /* мельче 14 на странице нет */
  --text-name:  17px;
  --text-cap:   15px;

  /* отступы, шаг 4 */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 40px;
  --s8: 64px;
  --gutter: var(--s7);     /* поле страницы на широких; на портрете 20, как у фразы первого экрана */
  --gutter-s: 20px;
  --sec-pad: clamp(56px, 6vw + 34px, 112px);   /* от верха секции до шапки: якорь ставит шапку в 57–112 px от края окна; на телефоне ужат ради кадров (круг D1) */
  --ch-pad:  clamp(72px, 9vw + 30px, 160px);   /* низ главы: шов заметно шире разрыва между секциями (72 к 57 на телефоне, 160 к 112 на 1440) */

  /* форма */
  --r-pill: 999px;
  --peek: 64px;           /* сколько блока 2 видно под первым экраном */

  /* моушен: одна кривая, три длительности (DESIGN.md «Движение») */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --dur-flip: 300ms;
  --dur-ui: 200ms;
  --dur-press: 110ms;
}
@media (max-aspect-ratio: 1/1) {
  :root { --gutter: var(--gutter-s); }
}

*, *::before, *::after { box-sizing: border-box; }
html {
  background: var(--night);
  color: var(--ink);
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
/* плавно только после загрузки (класс ставит noch-hero.js) и только не с клавиатуры: кнопка к работам
   видна переходом, вход по ссылке /#talk с кейса прыгает сразу (без пролёта шести экранов за 1,4 с),
   Tab по ссылкам не тащит страницу анимацией */
@media (prefers-reduced-motion: no-preference) {
  html.is-live:not(:has(:focus-visible)) { scroll-behavior: smooth; }
}
body {
  margin: 0;
  overflow-x: clip;
  font: 400 var(--text-body)/1.5 var(--ff-body);
  -webkit-font-smoothing: antialiased;
}
/* ссылка без своего класса (успех формы, фраза для ника) иначе синяя браузерная на синем */
a { color: inherit; }
.vh {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

/* ─── главная кнопка: латунь, пилюля, стрелка шагает на наведении (B10), отклик на нажатии (B9) ─── */
.go {
  position: relative;
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: var(--s3);
  min-height: 52px;
  padding: 0 var(--s5);
  border-radius: var(--r-pill);
  background: var(--brass);
  color: var(--night);
  box-shadow: 0 0 0 2px var(--night);   /* ободок цвета ночи: на светлом ореоле латунь сливалась со стеной (1,04:1) */
  font: 600 var(--text-body)/1 var(--ff-body);
  text-decoration: none;
  white-space: nowrap;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--dur-ui) var(--ease-out);
}
.go__arr {
  width: 16px;
  height: 16px;
  flex: none;
  transition: transform var(--dur-ui) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .go:hover .go__arr { transform: translateX(3px); }
}
.go:active {
  transform: scale(.97);
  transition-duration: var(--dur-press);
}
/* кольцо двухцветное: светлое на подложке цвета ночи, иначе на верхушке ореола 1,7:1 */
.go:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--night), 0 0 0 6px var(--night);
}

/* ─── главы и швы (J7): поле держит обёртка главы, секции прозрачные. Шов это смена поля,
   линий между блоками нет. Шёлк: поле с --ink на 6% полосой под 115°, справа, под лампой; статично; зерно как на кадре ─── */
.ch {
  --field: var(--deep);
  position: relative;
  padding-bottom: var(--ch-pad);
  background:
    var(--grain-18) 0 0 / 220px 220px,
    linear-gradient(115deg, transparent 20%, color-mix(in oklab, var(--field), var(--ink) 6%) 45%, transparent 70%),
    var(--field);
  background-blend-mode: overlay, normal;
}
/* глава B: тень --deep (14% к чёрному), тот же насыщенный синий на 3,6 пункта темнее; на --night читалась серым антрацитом (решение арт-директора 27.09) */
.ch--b { --field: color-mix(in oklch, var(--deep) 86%, black); }
/* кромка первого экрана ловит свет: волосяная линия только на этом шве (DESIGN.md «Кромка») */
.ch--a { box-shadow: inset 0 1px 0 color-mix(in oklch, var(--ink) 14%, transparent); }
/* глава C (секция связи и подвал, два элемента): то же поле без полосы шёлка, чтобы подвал не резал её */
.ch--c {
  --field: var(--deep);
  background: var(--grain-18) 0 0 / 220px 220px, var(--field);
  background-blend-mode: overlay;
}

/* ─── секция и её шапка: слева по полю страницы, на линии фразы первого экрана.
   :where(section)/:where(h2): у сметы калькулятора свои li.sec и summary.sec__h, стиль страницы их не трогает ─── */
:where(section).sec {
  position: relative;
  padding: var(--sec-pad) var(--gutter) 0;
}
:where(section).sec.ch--c { padding-bottom: var(--sec-pad); }
.sec__head {
  display: grid;
  gap: var(--s4);
  max-width: 44rem;
}
:where(h2).sec__h {
  margin: 0;
  min-width: 0;
  font: 600 var(--text-h2)/1.2 var(--ff-display);
  letter-spacing: -.02em;
  color: var(--ink);
  text-wrap: balance;
  overflow-wrap: anywhere;
}
:where(h2).sec__h--call {
  font-size: var(--text-call);
  line-height: 1.08;
  letter-spacing: -.03em;
}
.sec__h3 {
  margin: 0;
  font: 600 var(--text-h3)/1.3 var(--ff-display);
  letter-spacing: -.01em;
  color: var(--ink);
  text-wrap: balance;
}
.sec__lead {
  margin: 0;
  max-width: 34em;
  color: var(--dim);
  text-wrap: pretty;
}
/* хвост цены без своей H2 (J3): якорь #deny ставит шапку на 32 px от края окна */
.deny {
  margin-top: var(--s8);
  scroll-margin-top: var(--s6);
}

/* ─── 9 · подвал (Ft6): контакты крупнее (J9), кейсы и разборы строкой, реквизиты последней служебной строкой.
   От 64rem две колонки 2:3, как у связи: контакты и подпись слева, кейсы и реквизиты справа ─── */
.end {
  padding: var(--s8) var(--gutter) max(var(--s8), env(safe-area-inset-bottom));
  color: var(--dim);
  font: 400 var(--text-cap)/1.5 var(--ff-body);
}
.end p { margin: 0; }
.end__in {
  display: grid;
  gap: var(--s4);
  max-width: 76rem;
}
@media (min-width: 64rem) {
  .end__in {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    column-gap: var(--s7);
    align-items: start;
  }
  .end__nav, .end__law { grid-column: 2; }
  .end__nav { grid-row: 1; }
  .end .end__sign { grid-column: 1; grid-row: 2; margin-top: 0; }
}
.end__ways {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: var(--s3);
}
.end__ways .end__a { font: 600 var(--text-name)/1.3 var(--ff-body); }
.end__nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s5);
  margin: 0;
  padding: 0;
  list-style: none;
}
.end__law {
  display: grid;
  gap: var(--s1);
}
.end__a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink);
  text-decoration: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--dur-press) var(--ease-out);
}
.end__a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform var(--dur-ui) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .end__a:hover::after { transform: scaleX(1); }
}
.end__a:active { transform: translateY(1px); }
.end__sep { color: var(--dim); }
.end .end__sign {
  margin-top: var(--s3);
  max-width: 34em;
}
/* «Политика обработки персональных данных» 323 px при 15 px: до 360 подвал 14 px (302 px), на 320 ровный перенос */
.end__legal .end__a { text-wrap: balance; }
@media (max-width: 360px) {
  .end { font-size: var(--text-small); }
}
/* телефон: почта и Telegram не влезают в строку (180 + 163 px); колонкой с зазором 8 px, без повисшей точки */
@media (max-width: 30rem) {
  .end__ways { flex-direction: column; align-items: flex-start; row-gap: var(--s2); }
  .end__sep { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .go, .go__arr, .end__a, .end__a::after { transition: none; }
}