/* Сайт Inkling — один файл стилей на весь сайт.
 *
 * Цвета, кегли и отступы не пишутся числами по месту: наверху стоят токены,
 * ниже только var().
 *
 * Белая основа: страница белая, полосы разделов овсяные, охра — только
 * на малых площадях (подсветка термина, чипы, подчёркивание ссылки).
 * Охра как текст запрещена: контраст 1,93 : 1.
 *
 * Ни одного обращения на чужой сервер: шрифты системные с попыткой поднять
 * Fraunces и Inter, если они у человека стоят. Скриптов нет ни одного.
 *
 * Откуда взяты палитра, шкалы и разметка — сказано в описании сборщика.
 * Здесь этих ссылок нет намеренно: файл грузится каждой страницей, а пути
 * к внутренним документам и рабочие заметки на живом сайте читает кто угодно.
 */

:root {
  /* ── палитра, creative-spec §3 ── */
  --ink-bg-page: #FFFFFF;
  --ink-bg-oat: #F7F2E8;
  --ink-bg-sand: #F0E7D6;
  --ink: #1F2733;
  --ink-muted: #4A5666;
  --ink-ochre: #E8A33D;
  --ink-ochre-soft: #F4D9A6;
  --ink-rule: #DDD4C3;

  /* ── кегли: четырнадцать ступеней ── */
  --t-1: 0.75rem;
  --t-2: 0.875rem;
  --t-3: 0.9375rem;
  --t-4: 1rem;
  --t-5: 1.125rem;
  --t-6: 1.25rem;
  --t-7: 1.375rem;
  --t-8: 1.625rem;
  --t-9: 2rem;
  --t-10: 2.625rem;
  --t-11: 3.375rem;

  /* ── интерлиньяж берётся из той же сетки, что и поля ── */
  --l-1: 1rem;
  --l-2: 1.25rem;
  --l-3: 1.5rem;
  --l-4: 1.75rem;
  --l-5: 1.875rem;
  --l-6: 2rem;
  --l-7: 2.5rem;
  --l-8: 3rem;

  /* ── отступы: та же сетка ── */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 2.5rem;
  --s-8: 3.5rem;

  /* значок App Store: 40 px — минимум Apple для экрана; ниже нельзя */
  --store-badge-h: 2.5rem;

  /* логотип: лок-ап 28 px в шапке, 20 px в подвале — размеры из макета;
     зона покоя вокруг — половина высоты, её дают отступы шапки и подвала */
  --logo-h: 1.75rem;
  --logo-h-small: 1.25rem;

  /* высота закреплённой шапки: от неё считается отступ якорей */
  --head-h: 4.5rem;

  /* тень карточки на схеме — единственная тень на сайте */
  --shadow-card: 0 4px 14px rgba(31, 39, 51, 0.08);
  /* тень у края прокручиваемой таблицы: тот же чернильный, что в тени карточки */
  --ink-shadow-edge: rgba(31, 39, 51, 0.16);

  /* схема карточки: расстояние от текста выноски до карточки (линия + зазор) */
  --anat-gap: 5rem;

  /* окно экрана в рамке iPhone — доли от рамки; подставляет сборщик из
     JSON рядом с рамкой, руками здесь ничего не пишется */
  --frame-w: 1350;
  --frame-h: 2760;
  --frame-win-left: 5.333%;
  --frame-win-top: 2.500%;
  --frame-win-width: 89.333%;
  --frame-win-height: 95.000%;
  --frame-win-rx: 15.423%;
  --frame-win-ry: 7.094%;

  /* ── скругления ── */
  --r-1: 4px;
  --r-2: 6px;
  --r-3: 10px;
  --r-4: 14px;
  --r-pill: 999px;

  /* ── сетка ── */
  --col-text: 680px;
  --col-wide: 1080px;

  /* ── подсветка термина охрой ──
     Полоса меряется ОТ БАЗОВОЙ ЛИНИИ, а не от низа строчной коробки:
     низ коробки — это базовая линия плюс выносной элемент шрифта, а он
     у разных гарнитур разный (у системной рубленой 0,21 em, у засечковой
     заголовков 0,36 em). Пока полоса была вставленной тенью снизу коробки
     (`inset 0 -0.4em`), она держалась низа коробки: в реплике сцены
     ложилась под слово правильно, а на кегле термина /app (42 px, засечки)
     уезжала на 15 px ниже базовой линии и читалась отдельной охряной
     лентой. Подчёркивание браузер кладёт от базовой линии и рисует ПОД
     буквой — отсюда одинаковый вид на любом кегле и в любой гарнитуре. */
  --hl-band-offset: -0.34em;   /* верх полосы над базовой линией */
  --hl-band-thickness: 0.40em;

  /* ── декоративная кавычка перед термином (.hl) ── */
  --quote-col: 1.15em;
  --quote-size: 2.2em;
  --quote-top: -0.22em;

  /* ── гарнитуры ── */
  --font-voice: Fraunces, "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-ui: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
             "Helvetica Neue", Arial, sans-serif;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ink-bg-page);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--t-5);
  line-height: var(--l-4);
  font-weight: 400;
  /* Слово длиннее экрана — единственный перелив, который не ловится сито
     по стилям и разметке: связка без пробелов на 375 px давала 915 px.
     Это решение по типографике, а не заплатка: слово, которому не хватает
     строки, рвётся, а не выталкивает тело страницы вбок. Проверка стережёт
     это правило здесь, на body. */
  overflow-wrap: anywhere;
}
/* Письменности без пробелов. Корейский переносится по словам — между
   пробелами (`keep-all`), а не посреди слога; японский — по знакам, со строгими
   правилами кинсоку (знак препинания не начинает строку). Слово длиннее
   строки в обоих рвётся, как везде: `overflow-wrap: anywhere` на body
   наследуется, перелива вбок не бывает. Язык страницы — `<html lang>`. */
:lang(ko) { word-break: keep-all; }
/* Корейский: свой шрифтовой стек для заголовков.
   Базовый `--font-voice` (Fraunces, Iowan Old Style, Palatino Linotype,
   Georgia) хангыля не содержит ни в одном шрифте — систему просили о том,
   чего в списке нет, и она подставляла своё. Внутри одного заголовка
   стояли две гарнитуры: «바이브 코딩과 AI 에이전트» — латиница засечковым
   Fraunces, хангыль рубленым запасным, разнобой виден невооружённым глазом.
   Взята одна семья, которая несёт и латиницу, и хангыль, и настоящий
   полужирный на всех трёх системах: Apple SD Gothic Neo (macOS, iOS),
   Noto Sans KR (Android, Linux), Malgun Gothic (Windows). Засечковую
   корейскую пробовали (AppleMyungjo, Batang): полужирного начертания
   у них нет, заголовок выходил светлее, чем на остальных пяти языках.
   Вебшрифт не подключаем: корейский набор — тысячи знаков, даже урезанный
   файл тяжелее всей страницы (бюджет 260 КБ), а внешних запросов у сайта
   ноль. Решение записано в DECISIONS. */
:lang(ko) { --font-voice: "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif; }
:lang(ja) { word-break: normal; line-break: strict; }
/* Японский ЗАГОЛОВОК переносится по границам связок, а не по знакам.
   Перенос по знакам (`normal`, строкой выше) — норма японского АБЗАЦА,
   а в заголовке он резал слово пополам: «通り過ぎた言葉が、わ / かる。»
   на первом экране /ja/app/ и на 1280, и на 375. `auto-phrase` — то самое
   правило CSS: браузер ломает строку по границе связки, а не в произвольном
   месте.

   Замерено на собранном сайте, Chrome 152, все двенадцать японских страниц,
   571 заголовок. С правилом и без него по-разному ложатся 23 заголовка
   на 375 и 13 на 1280 — и лучше стало везде, кроме одного текста. Этот один
   назван: «AIエージェントの朝会：うなずいているうちに過ぎた十の言葉» (заголовок
   карточки разбора, четыре места на сайте). Слово «うなずいている» шире того,
   что осталось от колонки, и рвётся при любом правиле; `auto-phrase` разрыв
   не убирает, а переносит: «…朝会：う / なずいている…» вместо «…うなずいて /
   いる…». Стилями это не чинится — помогли бы заголовок короче или кегль
   мельче, а это правка копирайта и типографики, не этого файла.

   Почему не `keep-all`, как у корейского, — замерено там же и тем же
   способом. `keep-all` запрещает разрыв внутри слова вовсе, и там, где слово
   всё равно не влезает, браузер рвёт аварийно и грубее: «このページはありませ /
   ん», «同期のグループチャッ / ト：…», а «：» уезжает в начало строки. Со связками
   те же места читаются целиком: «このページは / ありません», «同期の /
   グループチャット： / 当落発表の十二語».

   Чего правило не делает: значение знают Chrome и Edge; движок, который его
   не знает, объявление отбрасывает — и остаётся `normal` со строки выше,
   то есть прежнее поведение, не худшее. Проверить это здесь нечем — под рукой
   только Chrome, — поэтому правило и написано так, чтобы отброшенное
   объявление ничего не ломало. Абзацам `auto-phrase` не ставится: сплошной
   японский текст набирается по знакам, и трогать его незачем. Слово шире
   колонки рвётся в любом случае — на body стоит `overflow-wrap: anywhere`
   для всех шести языков, иначе оно вытолкнуло бы страницу. */
:lang(ja) :is(h1, h2, h3) { word-break: auto-phrase; }

.skip { position: absolute; left: -9999px; }
.skip:focus {
  left: var(--s-4);
  top: var(--s-4);
  z-index: 10;
  background: var(--ink);
  color: var(--ink-bg-oat);
  padding: var(--s-2) var(--s-4);
  border-radius: var(--r-2);
}

.wrap {
  max-width: var(--col-wide);
  margin: 0 auto;
  padding: 0 var(--s-5);
}

/* ─── шапка ─── */
/* Закреплена при прокрутке: фон и тонкая линия снизу, чтобы страница
   под ней не просвечивала. Якоря отступают от неё на --head-h (ниже). */
.head {
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: 1px solid var(--ink-rule);
  background: var(--ink-bg-page);
}
.head__row {
  display: flex;
  align-items: center;
  gap: var(--s-6);
  min-height: var(--head-h);
  flex-wrap: wrap;
}
/* Значок App Store справа в шапке — правка владельца. Отступ значка сверху,
   нужный ему в колонке текста, в строке шапки не нужен. */
.head__store { margin-left: auto; line-height: 0; }
.head__store .store--badge { margin-top: 0; }
.head__nav + .head__store, .head__langs + .head__store { margin-left: 0; }
/* Цель перехода по якорю — не под закреплённой шапкой. */
.sect, .term, main { scroll-margin-top: calc(var(--head-h) + var(--s-4)); }
/* Логотип — инлайн-SVG, залит currentColor: цвет берёт у хозяина (--ink).
   line-height: 0 — чтобы строчная коробка не добавляла воздуха под знаком. */
.brand {
  display: inline-flex;
  color: var(--ink);
  box-shadow: none;
  line-height: 0;
}
.brand:hover { background: none; }
.logo { display: block; height: var(--logo-h); width: auto; fill: currentColor; }
.logo--small { height: var(--logo-h-small); }
.head__nav {
  display: flex;
  gap: var(--s-5);
  flex-wrap: wrap;
  margin-left: auto;
  min-width: 0;
}
.head__nav a, .head__langs a {
  color: var(--ink);
  box-shadow: none;
  font-size: var(--t-3);
}
.head__nav a:hover, .head__langs a:hover { box-shadow: inset 0 -2px 0 var(--ink-ochre); }
.head__nav a.is-here { box-shadow: inset 0 -2px 0 var(--ink-ochre); }
/* Переключатель языков — `<details>`: свёрнут — один ярлык текущего языка
   пилюлей, раскрыт — список всех написанных языков под ним, текущий выделен
   охряной чертой, как пункт навигации. Без скриптов: раскрытие — родное
   поведение браузера. Общие правила `details`/`summary` (вопросы FAQ)
   здесь сняты: в шапке ни линии сверху, ни отступов блока. */
.head__langs {
  position: relative;
  margin: 0;
  border: 0;
  padding: 0;
  font-size: var(--t-2);
  color: var(--ink);
}
.head__langs > summary {
  list-style: none;
  font-weight: 500;
  font-size: var(--t-2);
  padding: var(--s-1) var(--s-3);
  border: 1px solid var(--ink-rule);
  border-radius: var(--r-pill);
  line-height: var(--l-2);
}
.head__langs > summary::-webkit-details-marker { display: none; }
.head__langs[open] > summary { border-color: var(--ink); }
.head__langs__list {
  position: absolute;
  right: 0;
  top: calc(100% + var(--s-1));
  z-index: 30;
  margin: 0;
  padding: var(--s-2);
  list-style: none;
  min-width: 6rem;
  background: var(--ink-bg-page);
  border: 1px solid var(--ink-rule);
  border-radius: var(--r-3);
}
.head__langs__list li { margin: 0; }
.head__langs__list a, .head__langs__list b {
  display: block;
  padding: var(--s-1) var(--s-2);
  font-size: var(--t-3);
  font-weight: 400;
  color: var(--ink);
  box-shadow: none;
}
.head__langs__list a:hover { background: var(--ink-bg-oat); box-shadow: none; }
.head__langs__list .is-here { box-shadow: inset 0 -2px 0 var(--ink-ochre); }

/* ─── разделы ─── */
.sect { padding: var(--s-7) 0; }
.sect--band { background: var(--ink-bg-oat); }
/* Раздел с отбивкой: больше воздуха снизу и линия во всю ширину — как
   у подвала. Блок колод на главной стоит перед закрывающим экраном, оба
   на белом, и без линии чипы сливались с афишей (правка владельца). */
.sect--rule { padding-bottom: var(--s-8); border-bottom: 1px solid var(--ink-rule); }
/* Текстовые блоки держат колонку 680 px; сетки, полосы чипов и герой шире
 * по построению — им ширина задаётся именем, а не «*», иначе `.hero`
 * проигрывает по весу селектора и герой ужимается до колонки текста. */
.sect > .wrap > * { max-width: var(--col-text); }
.sect > .wrap > .hero,
.sect > .wrap > .anat,
.sect > .wrap > .bridge-app,
.sect > .wrap > .grid,
.sect > .wrap > .tablewrap,
.sect > .wrap > .chips--strip,
.sect > .wrap > .feats,
.sect > .wrap > .topics,
.sect > .wrap > .figure--wide { max-width: var(--col-wide); }
.sect--wide > .wrap > * { max-width: none; }

h1 {
  font-family: var(--font-voice);
  font-weight: 600;
  font-size: var(--t-10);
  line-height: var(--l-7);
  margin: 0 0 var(--s-4);
  max-width: 18ch;
}
h2 {
  font-family: var(--font-voice);
  font-weight: 600;
  font-size: var(--t-8);
  line-height: var(--l-6);
  margin: 0 0 var(--s-4);
}
h3 {
  font-family: var(--font-voice);
  font-weight: 600;
  font-size: var(--t-6);
  line-height: var(--l-4);
  margin: 0 0 var(--s-2);
}
p { margin: 0 0 var(--s-4); }
p:last-child { margin-bottom: 0; }

a { color: var(--ink); text-decoration: none; box-shadow: inset 0 -2px 0 var(--ink-ochre); }
a:hover { background: var(--ink-ochre-soft); }

.prose, .lead { max-width: var(--col-text); }
.lead { font-size: var(--t-6); line-height: var(--l-6); }
.sub { color: var(--ink-muted); font-size: var(--t-3); line-height: var(--l-4); }
/* ─── герой ─── */
.hero {
  display: grid;
  grid-template-columns: 1.35fr 0.65fr;
  gap: var(--s-7);
  align-items: start;
  max-width: none;
}
.hero__text { max-width: var(--col-text); }
.hero__art .device { margin: 0 auto; }
/* Заголовок занимает всю ширину, иллюстрация начинается на уровне текста
   под ним, а не заголовка (правка владельца на главной; та же сетка
   у шапки и блока письма на «Компаниям»). */
.hero--wide-title { row-gap: var(--s-4); }
/* Заголовок на всю колонку текста, а не в меру 18 знаков (`h1`, выше):
   у первого экрана «Компаниям» заголовок длинный, и мера рвала его на пять
   строк при пустой половине экрана — по-английски тот же блок ложился
   в три. Мера остаётся у коротких заголовков страниц; здесь заголовок
   стоит над всей шириной блока и ведёт себя как она. */
.hero--wide-title > h1, .hero--wide-title > h2 {
  grid-column: 1 / -1;
  margin-bottom: 0;
  max-width: var(--col-text);
}

/* ─── мост к приложению: текст и кадр в рамке ─── */
.bridge-app {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: var(--s-7);
  align-items: center;
}
.bridge-app__text { max-width: var(--col-text); }
.bridge-app .device { justify-self: center; }

/* ─── кадр телефона в рамке iPhone ─── */
/* Так стоит каждый кадр приложения (правка владельца, сентябрь 2026): мост
   и афиша главной, пара кадров в разборе, одиночные на /ru/app/ — одна
   конструкция. Кадр лежит в окне рамки по долям из JSON (подставляет
   сборщик); рамка поверх. Окно прозрачное насквозь до угла корпуса, поэтому
   кадр режется скруглением экрана — иначе его прямые углы вылезли бы за
   корпус. Пропорция рамки — у коробки `device__box`, а не у figure: подпись,
   если есть, стоит под коробкой. */
.device { width: 100%; max-width: 17rem; margin: 0; }
.device__box {
  position: relative;
  aspect-ratio: var(--frame-w) / var(--frame-h);
}
.device__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 0;
  background: none;
  pointer-events: none;
}
.device__shot, .device .shot__pending {
  position: absolute;
  left: var(--frame-win-left);
  top: var(--frame-win-top);
  width: var(--frame-win-width);
  height: var(--frame-win-height);
  border-radius: var(--frame-win-rx) / var(--frame-win-ry);
  object-fit: cover;
  aspect-ratio: auto;
}

/* ─── иллюстрации ─── */
figure { margin: 0 0 var(--s-5); }
figure img, figure video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-4);
  background: var(--ink-bg-oat);
}
figcaption {
  color: var(--ink-muted);
  font-size: var(--t-2);
  line-height: var(--l-3);
  margin-top: var(--s-2);
}
.figure--wide { max-width: var(--col-wide); }
.figure--hero { margin-bottom: 0; }
/* Перебивка во всю ширину окна (/ru/app/): раздел без колонки, картинка
   от края до края тела страницы, высота зажата — это пауза, а не экран. */
.sect--bleed { padding: 0; }
.figure--bleed { margin: 0; }
.figure--bleed img {
  width: 100%;
  height: clamp(240px, 36vw, 480px);
  object-fit: cover;
  border-radius: 0;
}

/* ─── чипы ─── */
.chips { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: 0 0 var(--s-4); }
.chips--strip { max-width: none; }
.chip {
  display: inline-block;
  background: var(--ink-ochre-soft);
  color: var(--ink);
  border-radius: var(--r-pill);
  padding: var(--s-1) var(--s-3);
  font-size: var(--t-2);
  line-height: var(--l-2);
  box-shadow: none;
}
.chip:hover { background: var(--ink-ochre); }
.chip--big { font-size: var(--t-3); padding: var(--s-2) var(--s-4); }

/* ─── блок термина ─── */
.terms { max-width: var(--col-text); }
.term {
  padding: var(--s-5) 0;
  border-top: 1px solid var(--ink-rule);
}
.term__head, .anat__term {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-3);
}
.term__ru { box-shadow: inset 0 -0.45em 0 var(--ink-ochre-soft); }
.term__en {
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: var(--t-3);
  color: var(--ink-muted);
}
.def { margin-bottom: var(--s-3); }
.live {
  font-style: italic;
  color: var(--ink-muted);
  border-left: 2px solid var(--ink-rule);
  padding-left: var(--s-4);
}
.term__more { text-align: right; font-size: var(--t-3); }

.group {
  margin-top: var(--s-7);
  font-family: var(--font-ui);
  font-size: var(--t-2);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
}
.group--rest { font-style: normal; }

/* ─── кадры телефона ─── */
.shots { display: flex; gap: var(--s-4); flex-wrap: wrap; margin: var(--s-5) 0; }
/* Пара кадров в разборе. Рамка шире экрана на долю окна из JSON рамки,
   поэтому кадр в рамке — 19.5rem: сам экран остаётся прежних ~280 px.
   Пара в колонке 680 умещается (2 × 312 + отступ), на 375 кадры встают
   в столбик, каждый уже колонки (327 px). */
.shots .device { flex: 1 1 15rem; max-width: 19.5rem; }
/* Одиночный кадр прямо в колонке (/ru/app/): правило колонки
   `.sect > .wrap > *` тяжелее по селектору и растягивало кадр телефона
   на всю ширину текста (680px). Кадр — ширины телефона, как в мосте главной. */
.sect > .wrap > .device { max-width: 17rem; }
.shot__pending {
  aspect-ratio: 9 / 19.5;
  border: 2px dashed var(--ink-rule);
  border-radius: var(--r-4);
  background: var(--ink-bg-oat);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  color: var(--ink-muted);
  text-align: center;
  padding: var(--s-4);
}
.shot__pending span { font-size: var(--t-3); }
.shot__pending code { font-size: var(--t-1); word-break: break-all; }

/* ─── сцена ─── */
.scene {
  border-left: 3px solid var(--ink-ochre);
  padding: var(--s-2) 0 var(--s-2) var(--s-5);
  max-width: var(--col-text);
}
.scene__cap {
  font-size: var(--t-2);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
}
.scene__line { margin-bottom: var(--s-3); }
/* Реплика, отвечающая предыдущей: сдвиг и короткая линия слева. Это разметка
   ветки комментариев, а не диалога двух людей. */
.scene__line--reply {
  margin-left: var(--s-5);
  padding-left: var(--s-4);
  border-left: 2px solid var(--ink-rule);
}
.scene__line b { font-weight: 600; }
/* Термин разбора в реплике — охра на слове, как у термина в блоке и на афише:
   носитель ограниченной площади, текст остаётся чернильным. Браузерную
   жёлтую заливку <mark> снимаем. */
.scene__term {
  background-color: transparent;
  color: inherit;
}
/* Подсветка термина охрой — ОДНА на весь сайт: в реплике сцены (мелкий
   кегль) и на первом экране /app (крупный). Один и тот же приём в двух
   местах и должен быть одним правилом: пока их было два, крупный кегль
   разъехался, а мелкий остался как был, и никто этого не увидел, потому
   что рядом они не стоят. Сам приём — подчёркивание охрой: браузер кладёт
   его ОТ БАЗОВОЙ ЛИНИИ и рисует под буквой, поэтому охра стоит под словом
   одинаково и на мелком кегле, и на крупном, и в другой гарнитуре. Числа —
   в токенах `--hl-band-*` наверху файла; там же записано, почему это
   подчёркивание, а не полоса тенью от низа строчной коробки. */
.scene__term, .hl > span {
  text-decoration-line: underline;
  text-decoration-color: var(--ink-ochre);
  text-decoration-thickness: var(--hl-band-thickness);
  text-underline-offset: var(--hl-band-offset);
  text-decoration-skip-ink: none;
}
/* Сцена в шапке главной: те же классы сцены, что на разборе, плюс ссылка
   на весь разбор под ней. */
.hero__scene { margin: var(--s-5) 0; }
/* Ссылка на весь разбор — кнопка-призрак (обводка без заливки), а не сноска
   мелким: она зовёт читать дальше, это действие (правка владельца).
   Стили кнопки — ниже, вместе с `.btn`; разметка ссылки не менялась. */
.scene__more { margin: var(--s-4) 0 0; }

/* ─── сетки карточек ─── */
.grid { display: grid; gap: var(--s-5); max-width: var(--col-wide); }
.grid--1 { grid-template-columns: minmax(0, 1fr); max-width: var(--col-text); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.rcard, .dcard {
  display: block;
  box-shadow: none;
  border: 1px solid var(--ink-rule);
  border-radius: var(--r-4);
  padding: var(--s-4);
  background: var(--ink-bg-page);
}
.rcard:hover, .dcard:hover { background: var(--ink-bg-oat); }
.rcard__cover { width: 100%; height: auto; border-radius: var(--r-3); margin-bottom: var(--s-3); }
.rcard__title, .dcard__title { font-size: var(--t-5); }
.rcard__chips, .dcard__chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.rcard__deck, .dcard__count { color: var(--ink-muted); font-size: var(--t-2); margin-bottom: 0; }

.ccard {
  border: 1px solid var(--ink-rule);
  border-radius: var(--r-4);
  padding: var(--s-4);
  background: var(--ink-bg-page);
}
.ccard__icon { display: block; margin-bottom: var(--s-3); }

.form {
  border: 1px solid var(--ink-rule);
  border-radius: var(--r-4);
  padding: var(--s-5);
  background: var(--ink-bg-page);
}

/* ─── разметка карточки по макету ─── */
/* Карточка посередине, выноски по сторонам; линии-указки упираются
   в обводку карточки. Выноска стоит в той же строке сетки, что и часть
   карточки, на которую указывает: карточка отдаёт свои строки общей сетке
   (`subgrid`), и текст любой длины не сдвигает указку с её части. */
.anat {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 25rem) minmax(0, 1fr);
  grid-template-rows: repeat(10, auto);
  column-gap: var(--anat-gap);
  align-items: start;
  max-width: var(--col-wide);
  margin: var(--s-5) auto;
}
.anat__card {
  grid-column: 2;
  grid-row: 1 / span 10;
  display: grid;
  grid-template-rows: subgrid;
  border: 1px solid var(--ink-rule);
  border-radius: var(--r-4);
  background: var(--ink-bg-page);
  box-shadow: var(--shadow-card);
  padding: var(--s-5);
}
.anat__top {
  grid-row: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--s-4);
}
.anat__pill {
  display: inline-block;
  background: var(--ink-bg-sand);
  color: var(--ink-muted);
  border-radius: var(--r-pill);
  padding: var(--s-1) var(--s-3);
  font-size: var(--t-1);
  line-height: var(--l-2);
  font-weight: 500;
}
.anat__audio {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--ink-bg-sand);
  color: var(--ink-muted);
}
.anat__audio svg { width: 1.0625rem; height: 1.0625rem; }
/* метка языка над термином — как в кадре приложения: мелко, капителью, разрядкой */
.anat__lang {
  grid-row: 2;
  font-size: var(--t-1);
  line-height: var(--l-1);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 0 var(--s-1);
}
.anat__term { grid-row: 3; font-size: var(--t-7); line-height: var(--l-6); margin: 0 0 var(--s-2); }
.anat .def { grid-row: 4; font-size: var(--t-3); line-height: var(--l-3); }
.anat .live { grid-row: 5; font-size: var(--t-3); line-height: var(--l-3); margin-bottom: var(--s-4); }
.anat__sep { grid-row: 6; border: 0; border-top: 1px solid var(--ink-rule); margin: 0 0 var(--s-4); }
.anat__lang--en { grid-row: 7; }
.anat__term--en { grid-row: 8; font-size: var(--t-6); line-height: var(--l-5); }
.anat .def--en { grid-row: 9; }
.anat .live--en { grid-row: 10; margin-bottom: 0; }
/* выноски: список отдаёт пункты сетке, каждый пункт — в строке своей части */
.anat__legend { display: contents; margin: 0; padding: 0; list-style: none; }
.anat__label {
  position: relative;
  display: block;
  max-width: 15rem;
  font-weight: 500;
  font-size: var(--t-3);
  line-height: var(--l-3);
  padding-top: var(--s-1);
}
.anat__label::after {
  content: "";
  position: absolute;
  top: calc(var(--s-1) + var(--l-3) / 2);
  width: 4.375rem;
  height: 1px;
  background: var(--ink-rule);
}
.anat__label--term, .anat__label--term-en { grid-column: 1; justify-self: end; text-align: right; }
.anat__label--term::after, .anat__label--term-en::after { right: calc(-1 * var(--anat-gap)); }
.anat__label--audio, .anat__label--definition, .anat__label--example { grid-column: 3; justify-self: start; }
.anat__label--audio::after, .anat__label--definition::after, .anat__label--example::after {
  left: calc(-1 * var(--anat-gap));
}
.anat__label--term { grid-row: 3; }
.anat__label--term-en { grid-row: 8; }
.anat__label--audio { grid-row: 1; padding-top: calc(var(--s-5) + var(--s-1)); }
/* у этой выноски отступ сверху больше (строка с кнопкой начинается под полем
   карточки), и указка считается от него же — иначе она висит над кнопкой */
.anat__label--audio::after { top: calc(var(--s-5) + var(--s-1) + var(--l-3) / 2); }
.anat__label--definition { grid-row: 4; }
.anat__label--example { grid-row: 5; }

/* ─── плашка приложения и врезка ─── */
.plaque { display: grid; gap: var(--s-3); justify-items: start; }
.plaque__line { font-family: var(--font-voice); font-size: var(--t-7); margin: 0; }
.callout {
  background: var(--ink-bg-sand);
  border-radius: var(--r-4);
  padding: var(--s-6);
  max-width: var(--col-text);
}
.store { display: inline-block; margin: 0; }
.btn, .scene__more a {
  display: inline-block;
  background: var(--ink);
  color: var(--ink-bg-oat);
  border-radius: var(--r-2);
  padding: var(--s-3) var(--s-5);
  box-shadow: none;
  font-size: var(--t-3);
}
.btn:hover {
  background: var(--ink-muted);
  color: var(--ink-bg-oat);
}
/* Значок App Store — единственная форма перехода в магазин (все),
   артворк Apple как есть: ни фона, ни рамки, ни тени, ничего на наведении
   (правило Apple: не менять, не наклонять, не анимировать). Серая рамка
   внутри файла — часть артворка. Охранное поле — четверть высоты; отступ
   сверху даёт его с запасом, слева его даёт колонка, плашка и врезка. */
.store--badge {
  padding: 0;
  background: none;
  line-height: 0;
  margin-top: var(--s-5);
  /* Подчёркивание ссылок сайта — охряный inset box-shadow у `a` — под значком
     не стоит (владелец увидел линию под значком в шапке и в афише); текстового
     подчёркивания и рамки у якоря тоже нет, и на наведении ничего не появляется. */
  box-shadow: none;
  text-decoration: none;
  border-bottom: 0;
}
.store--badge:hover { background: none; box-shadow: none; }
.store--badge img { display: block; height: var(--store-badge-h); width: auto; }
.btn--ghost, .scene__more a {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
}
.btn--ghost:hover, .scene__more a:hover { background: var(--ink-bg-oat); color: var(--ink); }
.store--off {
  display: block;
  border: 1px dashed var(--ink-rule);
  border-radius: var(--r-3);
  padding: var(--s-4);
  color: var(--ink-muted);
  font-size: var(--t-3);
  max-width: var(--col-text);
}
.store--off b { color: var(--ink); }

.strip {
  font-family: var(--font-voice);
  font-size: var(--t-8);
  line-height: var(--l-6);
}
.hl {
  font-family: var(--font-voice);
  font-weight: 600;
  font-size: var(--t-10);
  line-height: var(--l-7);
  margin-bottom: var(--s-3);
  /* Кавычка стоит в своей колонке слева от термина, а не над ним:
     сверху её ждала строка подзаголовка, и наезд был неизбежен на любом
     кегле. Ширина колонки — та же величина, что смещение кавычки. */
  position: relative;
  padding-left: var(--quote-col);
}
/* Термин вне интерфейса — как цитата в журнале: слева от него большая
   охряная ОТКРЫВАЮЩАЯ кавычка “ шрифтом заголовков (правка владельца,
   сентябрь 2026; до сентябрьской починки здесь стояла „ — нижняя, она
   читается закрывающей, и лежала она поверх первых букв строки над
   термином). Охра из токена, бледная. Колонка своя: наезжать больше не
   на что ни на 1280, ни на 375, ни в одном из шести языков. */
.hl::before {
  content: "\201C";
  position: absolute;
  left: 0;
  top: var(--quote-top);
  width: var(--quote-col);
  font-family: var(--font-voice);
  font-weight: 600;
  font-size: var(--quote-size);
  line-height: 1;
  color: var(--ink-ochre);
  opacity: 0.45;
  pointer-events: none;
}

/* ─── /ru/app/: ряды «что умеет», веер тем, три шага дня ─── */
/* Ряд: текст и кадр в рамке; через ряд — местами. Ряды делит линия, не фон. */
.feats { max-width: var(--col-wide); }
.feat {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: var(--s-7);
  align-items: center;
  padding: var(--s-7) 0;
}
.feat + .feat { border-top: 1px solid var(--ink-rule); }
.feat:first-child { padding-top: 0; }
.feat:last-child { padding-bottom: 0; }
.feat__text { max-width: var(--col-text); }
.feat--flip .feat__text { order: 2; }
.feat .device { justify-self: center; }
/* чип — имя ряда, той же плашкой, что название колоды на схеме карточки */
.feat__chip {
  display: inline-block;
  background: var(--ink-bg-sand);
  color: var(--ink-muted);
  border-radius: var(--r-pill);
  padding: var(--s-1) var(--s-3);
  font-size: var(--t-1);
  line-height: var(--l-2);
  font-weight: 500;
  margin-bottom: var(--s-3);
}
.feat h3 { font-size: var(--t-8); line-height: var(--l-6); margin-bottom: var(--s-3); }
/* Блоки «день» и «полка» стоят сразу за рядами «что умеет» и читаются с ними
   одним разделом (правка владельца): линия сверху вместо отступа между
   разделами, отступы ряда те же. У ряда «полка» заголовок — h2 блока. */
.sect--cont > .wrap {
  border-top: 1px solid var(--ink-rule);
  padding-top: var(--s-7);
}
.sect--cont { padding-top: 0; }
.feat h2 { margin-bottom: var(--s-3); }

/* Темы: текст слева, справа веер карточек — картинка на языке страницы.
   Карточек в веере больше нет ни одной: они были из данных и расходились
   поворотом по номеру, а позиций в стилях было шесть — с пятой открытой
   темой карточек стало десять, и лишние свалились в кучу. Ширину картинка
   берёт от колонки, но не растёт выше своего размера в макетных пикселях. */
.topics {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: var(--s-7);
  align-items: center;
  margin-bottom: var(--s-6);
}
.topics__text { max-width: var(--col-text); }
.topics__all { margin: var(--s-4) 0 0; }
.fan {
  display: block;
  width: 100%;
  max-width: 36rem;     /* картинка нарисована в 581 макетный пиксель — выше не растим */
  height: auto;
  margin: 0 auto;
}

/* ─── списки, вопросы, таблица ─── */
.lines { margin: 0 0 var(--s-4); padding-left: var(--s-5); }
.lines li { margin-bottom: var(--s-3); }

/* Вопросы — списком в одну колонку на ширину колонки текста (правка
   владельца: две колонки сняты). */
.faq { max-width: var(--col-text); }
details {
  border-top: 1px solid var(--ink-rule);
  padding: var(--s-3) 0;
  break-inside: avoid;
}
summary { cursor: pointer; font-weight: 500; }

/* Таблица шире экрана прокручивается внутри себя — это правило сайта
   для широкого содержимого. На 375 прокрутка была, а признака её не было:
   третья колонка обрывалась по краю, и это читалось как обрезка, а не как
   «дальше есть ещё». Признак — тень у того края, за которым спрятано
   содержимое: две подложки прокручиваются ВМЕСТЕ с таблицей (`local`)
   и закрывают собой две неподвижные тени (`scroll`), поэтому у начала
   и у конца тени нет, а посередине есть. Без скриптов: `background-attachment`
   делает это сам. Полосу прокрутки не рисуем — она есть там, где система
   её показывает. */
.tablewrap {
  overflow-x: auto;
  max-width: var(--col-wide);
  background:
    linear-gradient(to right, var(--ink-bg-page), transparent) left center / var(--s-7) 100%,
    linear-gradient(to left, var(--ink-bg-page), transparent) right center / var(--s-7) 100%,
    linear-gradient(to right, var(--ink-shadow-edge), transparent)
      left center / var(--s-4) 100%,
    linear-gradient(to left, var(--ink-shadow-edge), transparent)
      right center / var(--s-4) 100%;
  background-repeat: no-repeat;
  background-attachment: local, local, scroll, scroll;
}
.cmp { border-collapse: collapse; width: 100%; font-size: var(--t-3); }
.cmp th, .cmp td {
  border-bottom: 1px solid var(--ink-rule);
  padding: var(--s-3);
  text-align: left;
  vertical-align: top;
  /* Слово в ячейке не рвётся посередине («приложен-ие» на 375): перенос
     только по пробелам, а таблица шире колонки прокручивается внутри
     `.tablewrap` — это и есть правило сайта для широкого содержимого. */
  overflow-wrap: normal;
}
.cmp thead th { color: var(--ink-muted); font-weight: 500; }

/* ─── сноски на чужие данные («Компаниям») ─── */
/* Маркер в тексте — ссылка-надстрочник; line-height 0, чтобы надстрочник
   не раздвигал строки абзаца. Список внизу страницы — мелким кеглем,
   без маркеров браузера: знак «[1]» пишет копирайт, он же стоит в тексте. */
.fn__ref { font-size: var(--t-1); line-height: 0; vertical-align: super; }
.fn__ref a { box-shadow: none; }
.fn__ref a:hover { box-shadow: inset 0 -2px 0 var(--ink-ochre); }
.fn {
  list-style: none;
  margin: 0;
  padding: var(--s-5) 0 0;
  border-top: 1px solid var(--ink-rule);
  color: var(--ink-muted);
  font-size: var(--t-2);
  line-height: var(--l-3);
}
.fn li { margin-bottom: var(--s-2); scroll-margin-top: calc(var(--head-h) + var(--s-4)); }
.fn__mark { display: inline-block; min-width: 1.75rem; }

/* ─── закрывающий экран главной: афиша во всю ширину и высоту окна ─── */
/* Текст на белом сверху, иллюстрация полосой во всю ширину внизу; кадр
   в рамке и значок стоят справа поверх полосы — там художник оставил
   пустое место. Ширина — от тела страницы, не от окна: `100vw` вместе
   с полосой прокрутки дал бы перелив. */
.sect--closing { padding: 0; }
.closing {
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr;
}
/* Элемент сетки с auto-полями ужимается до содержимого — ширина задана явно,
   чтобы текст стоял у левого края колонки, а не по центру под телефоном. */
.closing__body { width: 100%; padding-top: var(--s-8); padding-bottom: var(--s-6); }
.closing__body > * { max-width: var(--col-text); }
.closing__line { font-family: var(--font-voice); font-size: var(--t-7); line-height: var(--l-6); }
.closing__stage { position: relative; align-self: end; }
.closing__art { display: block; width: 100%; height: auto; }
.closing__cta {
  position: absolute;
  right: 8%;
  bottom: 8%;
  width: 22%;
  display: grid;
  justify-items: center;
}
.closing__cta .device { max-width: none; }

.crumbs, .crumbs__deck { font-size: var(--t-2); color: var(--ink-muted); margin-bottom: var(--s-2); }
.oneline { font-size: var(--t-4); }
.actions { display: flex; gap: var(--s-3); flex-wrap: wrap; }

/* ─── подвал ─── */
.foot {
  border-top: 1px solid var(--ink-rule);
  padding: var(--s-6) 0;
  margin-top: var(--s-8);
}
.foot__logo { margin: 0 0 var(--s-4); color: var(--ink); line-height: 0; }
.foot__nav { display: flex; flex-wrap: wrap; gap: var(--s-5); margin-bottom: var(--s-3); }
.foot__nav a { font-size: var(--t-3); box-shadow: none; color: var(--ink-muted); }
.foot__nav a:hover { color: var(--ink); background: none; box-shadow: inset 0 -2px 0 var(--ink-ochre); }
.foot__line { color: var(--ink-muted); font-size: var(--t-2); margin: 0; }
.foot__legal { color: var(--ink-muted); font-size: var(--t-2); margin: var(--s-2) 0 0; }
.foot__copy { color: var(--ink-muted); font-size: var(--t-2); margin: var(--s-2) 0 0; }

/* ─── узкий экран ─── */
@media (max-width: 900px) {
  .hero, .anat, .bridge-app, .feat, .topics { grid-template-columns: minmax(0, 1fr); }
  .feat--flip .feat__text { order: 0; }
  /* Веер на узком экране КАДРИРУЕТСЯ, а не ужимается. Ужатый до ширины
     колонки (375 px и уже) он давал бы термин в 12 px — читать нечего.
     Высота задана, `cover` режет края: в кадре остаётся середина веера —
     верхняя карточка с термином и плечи соседних, то же, что оставляли
     прежние стили, оставляя три карточки из шести. Предел ширины держит
     кадрирование горизонтальным: шире 28rem картинка резалась бы сверху
     и снизу, а там кромки карточек. */
  .fan { max-width: 28rem; height: 15rem; object-fit: cover; }
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Схема карточки: карточка целиком, выноски списком под ней. Линий-указок
     на узком экране нет — вместо них номера: у выноски и у той части
     карточки, куда она указывает, номер один. Без него список из пяти слов
     под карточкой не говорил, что чем является. Номер приходит разметкой
     (`data-anat-n`), один и тот же на обе стороны. */
  .anat { grid-template-rows: none; row-gap: var(--s-5); }
  .anat__card [data-anat-n]::after {
    content: attr(data-anat-n);
    display: inline-block;
    margin-left: var(--s-2);
    min-width: 1.25em;
    height: 1.25em;
    border-radius: var(--r-pill);
    background: var(--ink-bg-sand);
    color: var(--ink-muted);
    font-family: var(--font-ui);
    font-size: var(--t-1);
    line-height: 1.25em;
    font-weight: 600;
    text-align: center;
    vertical-align: middle;
  }
  .anat__label::before {
    content: attr(data-anat-n);
    display: inline-block;
    min-width: 1.25em;
    height: 1.25em;
    margin-right: var(--s-2);
    border-radius: var(--r-pill);
    background: var(--ink-bg-sand);
    color: var(--ink-muted);
    font-size: var(--t-1);
    line-height: 1.25em;
    font-weight: 600;
    text-align: center;
  }
  .anat__card { grid-column: 1; grid-row: auto; display: block; }
  .anat__legend { display: block; padding-left: 0; }
  .anat__label {
    grid-column: auto;
    grid-row: auto;
    justify-self: auto;
    text-align: left;
    max-width: none;
    display: block;
    padding-top: 0;
    margin-bottom: var(--s-2);
  }
  .anat__label::after { display: none; }
  .anat__label--audio { padding-top: 0; }
  /* закрывающий экран: кадр и значок между текстом и полосой, не поверх неё */
  .closing__cta { position: static; width: 60%; margin: 0 auto var(--s-6); }
  .closing__cta .device { max-width: 17rem; }
}
@media (max-width: 640px) {
  :root { --head-h: 7rem; }
  body { font-size: var(--t-4); line-height: var(--l-3); }
  /* шапка: имя и значок в первой строке, навигация — второй */
  /* Зазор между именем, переключателем языков и значком — --s-3, а не
     --s-4: корейский значок App Store шире остальных (130 px против 120),
     и при зазоре 16 px строка просила 330 px при колонке 327 — значок падал
     третьей строкой и съедал первый экран. Значок не ужимается: 40 px —
     минимум Apple для экрана. Единственный язык, у которого шапка вела себя
     иначе, чем у пяти других. */
  .head__row { gap: var(--s-3); padding: var(--s-2) var(--s-5); }
  .head__nav { order: 3; }
  .head__store { margin-left: auto; }
  h1 { font-size: var(--t-9); line-height: var(--l-6); }
  h2 { font-size: var(--t-7); line-height: var(--l-5); }
  .lead { font-size: var(--t-5); line-height: var(--l-4); }
  .hl { font-size: var(--t-9); line-height: var(--l-6); }
  .feat h3 { font-size: var(--t-7); line-height: var(--l-5); }
  .grid--2, .grid--3 { grid-template-columns: minmax(0, 1fr); }
  .sect { padding: var(--s-6) 0; }
  .sect--rule { padding-bottom: var(--s-7); }
  /* Навигация — в одну строку на любом телефоне. Четыре пункта на 375 px
     при кегле --t-3 и зазоре --s-4 давали 339 px против 327 колонки:
     «Компаниям» падал на вторую строку и съедал 40 px у первого экрана.
     Кегль --t-2 и зазор --s-3 вмещают все четыре на 375 без прокрутки;
     уже (320) полоса прокручивается внутри себя, пункты не прячутся —
     полосу прокрутки не рисуем, скриптов и «бургера» нет. Поле --s-1 со
     всех сторон — чтобы рамка фокуса не резалась прокруткой: полоса
     с overflow режет всё за своим краем, а браузерная рамка рисуется
     снаружи ссылки. Слева и справа поле компенсируется отрицательными
     полями, чтобы пункты остались на линии колонки; scroll-padding — чтобы
     пункт, к которому подъехала полоса по Tab, встал с тем же отступом. */
  .head__nav {
    gap: var(--s-3);
    margin: 0 calc(-1 * var(--s-1));
    width: calc(100% + 2 * var(--s-1));
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    padding: var(--s-1);
    scroll-padding: var(--s-1);
  }
  .head__nav::-webkit-scrollbar { display: none; }
  .head__nav a { flex: 0 0 auto; font-size: var(--t-2); }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}