/* ── ССЫЛКА К СОДЕРЖИМОМУ ───────────────────────────────────────
       Для тех, кто ходит с клавиатуры: не проходить шапку каждый раз. */
    .skip {
      position: absolute; left: -9999px; top: 0; z-index: 400;
      background: var(--ink); color: var(--paper); font-size: 0.875rem; font-weight: 600;
      padding: 12px 20px; text-decoration: none;
    }
    .skip:focus { left: 0; }

/* ═══════════════════════════════════════════════════════════════════
   AI-НАСТАВНИЧЕСТВО · журнальный разворот
   Display — Prata (дидон, кириллица). Врезки и подписи — Bona Nova
   Italic. Текст и интерфейс — Golos Text.
   ═══════════════════════════════════════════════════════════════════ */

@font-face { font-family: 'Golos Text'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('fonts/golos-text-cyrillic.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Golos Text'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('fonts/golos-text-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122; }
@font-face { font-family: 'Prata'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/prata-cyrillic.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Prata'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/prata-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122; }
@font-face { font-family: 'Bona Nova'; font-style: italic; font-weight: 400; font-display: swap; src: url('fonts/bonanova-italic-cyrillic.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Bona Nova'; font-style: italic; font-weight: 400; font-display: swap; src: url('fonts/bonanova-italic-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122; }
@font-face { font-family: 'Bona Nova'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/bonanova-cyrillic.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Bona Nova'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/bonanova-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122; }

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

:root {
  /* бумага и чернила: нейтрали подкрашены в тёплый, как газетный офсет */
  --paper:    oklch(97.6% 0.008 85);
  --paper-2:  oklch(94.6% 0.013 85);
  --paper-3:  oklch(91.5% 0.016 82);
  --ink:      oklch(21% 0.016 62);
  --ink-soft: oklch(33% 0.013 62);
  --muted:    oklch(52% 0.011 62);
  --faint:    oklch(67% 0.010 62);
  --rule:     oklch(21% 0.016 62 / .16);
  --rule-soft:oklch(21% 0.016 62 / .09);
  /* единственный акцент: типографская киноварь */
  --red:      oklch(55% 0.185 32);
  --red-deep: oklch(47% 0.165 32);

  --font-display: 'Prata', 'Times New Roman', serif;
  --font-note: 'Bona Nova', 'Georgia', serif;
  --font-body: 'Golos Text', 'Segoe UI', sans-serif;

  --space-2xs: 4px;  --space-xs: 8px;  --space-sm: 12px; --space-md: 16px;
  --space-lg: 24px;  --space-xl: 32px; --space-2xl: 48px; --space-3xl: 64px;
  --space-4xl: 96px;

  --page: 1600px;
  --rail: 240px;
  --gutter: clamp(20px, 4vw, 76px);

  --ease: cubic-bezier(.2, .7, .3, 1);
}

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

/* Газетная бумага: тайл 512×512, наложение multiply поверх цвета бумаги.
   Белые пиксели текстуры не меняют ничего, тёмные дают зерно и волокна.
   Полосы со своим фоном подмешивают ту же текстуру через background-blend-mode. */
body {
  background-color: var(--paper);
  background-image: url('paper-grain.png');
  background-repeat: repeat;
  background-blend-mode: multiply;
  color: var(--ink-soft);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* длинные русские слова в узких колонках распирали сетку при крупном тексте */
  overflow-wrap: break-word;
}

::selection { background: var(--red); color: var(--paper); }

h1, h2, h3 { font-family: var(--font-display); font-weight: 400; color: var(--ink); letter-spacing: -0.015em; line-height: 1.02; }

a { color: inherit; }

img, video { display: block; max-width: 100%; }

/* ── ТИПОГРАФИЧЕСКИЕ ПРИМИТИВЫ ─────────────────────────────────── */

.kicker {
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--muted);
}
.kicker-red { color: var(--red-deep); }

.note { font-family: var(--font-note); font-style: italic; }

.lead {
  font-family: var(--font-note); font-style: italic;
  font-size: clamp(1.125rem, 1.6vw, 1.5rem); line-height: 1.5;
  color: var(--ink-soft); max-width: 46ch;
}

.rule { height: 1px; background: var(--rule); border: 0; }
.rule-thick { height: 2px; background: var(--ink); border: 0; }

/* ── КАРКАС СТРАНИЦЫ: основная колонка + поле для врезок ───────── */

.wrap { max-width: var(--page); margin: 0 auto; padding-inline: var(--gutter); }

.spread {
  max-width: var(--page); margin: 0 auto; padding-inline: var(--gutter);
  display: grid; grid-template-columns: var(--rail) minmax(0, 1fr);
  column-gap: clamp(24px, 3.5vw, 56px);
}
.spread > .col { grid-column: 2; min-width: 0; }
.spread > .marg { grid-column: 1; }

/* врезка на полях: то, что в журнале пишут сбоку от текста */
.marg {
  font-family: var(--font-note); font-style: italic;
  font-size: 0.9375rem; line-height: 1.45; color: var(--muted);
  padding-top: var(--space-sm); border-top: 1px solid var(--ink);
  align-self: start;
}
.marg b { font-style: normal; font-family: var(--font-body); font-weight: 600; color: var(--ink); display: block; font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: var(--space-xs); }

@media (max-width: 1080px) {
  .spread { grid-template-columns: minmax(0, 1fr); }
  .spread > .col, .spread > .marg { grid-column: 1; }
  .marg { max-width: 34ch; margin-bottom: var(--space-lg); }
}

/* ── ШАПКА ──────────────────────────────────────────────────────── */

.masthead {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in oklch, var(--paper) 88%, transparent);
  backdrop-filter: blur(12px) saturate(1.2);
  border-bottom: 1px solid var(--rule);
}
.masthead-in {
  max-width: var(--page); margin: 0 auto; padding: 0 var(--gutter);
  height: 60px; display: flex; align-items: center; gap: var(--space-lg);
}
.masthead img { height: 30px; width: auto; }
.masthead-issue {
  font-family: var(--font-note); font-style: italic; color: var(--muted);
  font-size: 0.8125rem; margin-inline-end: auto;
  padding-inline-start: var(--space-lg); border-inline-start: 1px solid var(--rule);
  align-self: stretch; display: flex; align-items: center;
}
.masthead-back { font-size: 0.8125rem; color: var(--muted); text-decoration: none; transition: color .2s var(--ease); }
.masthead-back:hover { color: var(--ink); }
.masthead-cta {
  font-size: 0.8125rem; font-weight: 600; text-decoration: none; color: var(--ink);
  padding-bottom: 2px; border-bottom: 2px solid var(--red);
  transition: color .2s var(--ease);
}
.masthead-cta:hover { color: var(--red-deep); }
@media (max-width: 720px) { .masthead-issue { display: none; } .masthead-in { gap: var(--space-md); } .masthead-back { margin-inline-end: auto; } }

/* ── ПЕРВЫЙ ЭКРАН: РАЗВОРОТ ─────────────────────────────────────── */

.opener {
  border-bottom: 2px solid var(--ink);
  overflow: hidden;
}
/* фото уходит в левый край листа, текст держится сетки страницы */
.opener-in {
  display: grid; grid-template-columns: minmax(300px, 38vw) minmax(0, 1fr);
  align-items: stretch;
}

/* портрет: печатное фото, уходит в край листа */
.portrait {
  position: relative; align-self: stretch;
  min-height: clamp(420px, 62vh, 660px);
  background: transparent; overflow: visible;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding-inline-start: var(--gutter);
}
.portrait img {
  width: 100%; height: auto; max-height: 100%; object-fit: contain; object-position: bottom;
  align-self: flex-end;
  /* краска ложится на ту же бумагу: multiply пускает зерно сквозь фигуру */
  filter: grayscale(1) contrast(1.06);
  mix-blend-mode: multiply;
}
/* тёплая печатная тонировка вместо холодного ч/б */
.portrait-unused-after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: oklch(38% 0.05 58); mix-blend-mode: color; opacity: .55;
}
/* растр: едва заметная типографская сетка точек */
.portrait-unused-before {
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background-image: radial-gradient(oklch(21% 0.016 62 / .55) 0.5px, transparent 0.6px);
  background-size: 3px 3px; opacity: .22; mix-blend-mode: multiply;
}
/* полоса печати под подписью: без неё курсив тонет в белой рубашке */
.portrait-scrim { display: none; }
.portrait-scrim-unused {
  position: absolute; inset-inline: 0; bottom: 0; height: 46%; z-index: 2; pointer-events: none;
  background: linear-gradient(to top, oklch(18% 0.02 60 / .92) 0%, oklch(18% 0.02 60 / .7) 38%, transparent 100%);
}
.portrait-cap {
  order: -1; margin-bottom: var(--space-md);
  font-family: var(--font-note); font-style: italic; font-size: 0.8125rem; line-height: 1.5;
  color: var(--muted); max-width: 34ch;
  padding-top: var(--space-sm); border-top: 1px solid var(--ink);
}
.portrait-cap b { font-style: normal; font-weight: 600; font-family: var(--font-body); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); display: block; margin-bottom: 2px; }

/* текстовая половина разворота */
.opener-text {
  padding: clamp(32px, 5vw, 72px) var(--gutter) clamp(28px, 4vw, 56px) clamp(28px, 4.5vw, 72px);
  display: flex; flex-direction: column; justify-content: center; gap: var(--space-lg);
}
.opener-text > * { max-width: 780px; }
.dateline { display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap; }
.dateline::after { content: ''; flex: 1; height: 1px; background: var(--rule); min-width: 24px; }

.opener h1 {
  font-size: clamp(2.5rem, 6vw, 6rem);
  line-height: 0.98; letter-spacing: -0.022em;
  max-width: 16ch;
}
.opener h1 em {
  font-family: var(--font-note); font-style: italic;
  letter-spacing: -0.01em; color: var(--red-deep);
}

.opener-deck { display: flex; flex-direction: column; gap: var(--space-md); }

.opener-meta {
  display: flex; align-items: baseline; gap: var(--space-lg) var(--space-xl); flex-wrap: wrap;
  padding-top: var(--space-md); border-top: 1px solid var(--rule);
}
.meta-item { display: flex; flex-direction: column; gap: 2px; }
.meta-val { font-family: var(--font-display); font-size: 1.375rem; color: var(--ink); line-height: 1; }
.meta-lab { font-size: 0.75rem; color: var(--muted); }

.opener-actions { display: flex; align-items: center; gap: var(--space-lg); flex-wrap: wrap; }

.btn {
  display: inline-flex; align-items: center; gap: var(--space-xs);
  background: var(--ink); color: var(--paper);
  font-size: 0.875rem; font-weight: 600; letter-spacing: 0.01em;
  padding: 13px 26px; border: 1px solid var(--ink); border-radius: 0;
  text-decoration: none; cursor: pointer;
  transition: background .22s var(--ease), color .22s var(--ease);
}
.btn:hover { background: var(--red-deep); border-color: var(--red-deep); }
.btn svg { width: 15px; height: 15px; }

/* Главное действие. Единственное место, где акцент из пометки становится
   плашкой: первый экран, хитовая ступень, финал. Больше нигде. */
.btn--go { background: var(--red-deep); border-color: var(--red-deep); color: var(--paper); }
.btn--go:hover { background: var(--ink); border-color: var(--ink); }

.btn-text {
  font-size: 0.875rem; font-weight: 500; color: var(--ink);
  text-decoration: none; padding-bottom: 3px;
  border-bottom: 1px solid var(--rule);
  transition: border-color .22s var(--ease), color .22s var(--ease);
}
.btn-text:hover { border-bottom-color: var(--ink); }

@media (max-width: 900px) {
  .opener-in { grid-template-columns: minmax(0, 1fr); }
  /* высота задаётся явно: без неё img height:100% не разрешается
     и фото ложится в свои пропорции на всю высоту экрана */
  /* Кадр не режем: лицо тут работает сильнее любой экономии высоты.
     Подпись уходит из-под фото на бумагу, иначе она закрывает подбородок. */
  .portrait { min-height: 0; height: auto; padding-inline: var(--gutter); }
  .portrait img { height: auto; max-height: clamp(300px, 42vh, 380px); }
  .portrait-scrim { display: none; }
.portrait-scrim-unused { display: none; }
  .portrait-cap {
    position: static; max-width: none; color: var(--muted);
    padding: var(--space-sm) var(--gutter) 0;
  }
  .portrait-cap b { color: var(--ink); }
  .opener-text { padding: var(--space-lg) var(--gutter) var(--space-2xl); gap: var(--space-md); }
  /* место для кнопки выигрываем порядком, а не обрезкой: на телефоне
     действие идёт сразу после лида, цифры уходят под него */
  .opener-deck { order: 1; }
  .opener-actions { order: 2; }
  .opener-meta { order: 3; }
}

/* ── ПОЛОСЫ И ЗАГОЛОВКИ СЕКЦИЙ ──────────────────────────────────── */

.band { padding-block: clamp(56px, 8vw, 104px); }
.band--tint {
  background-color: var(--paper-2);
  background-image: url('paper-grain.png');
  background-repeat: repeat;
  background-blend-mode: multiply;
  border-block: 1px solid var(--rule);
}
.band--ink { background: var(--ink); color: oklch(88% 0.012 85); position: relative; }
/* на залитых краской полосах бумага проступает иначе: multiply по чёрному
   не даёт ничего, поэтому светлое зерно с низкой прозрачностью */
.band--ink::before, .colophon::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: url('paper-grain.png') repeat;
  mix-blend-mode: screen; opacity: .06;
}
.band--ink > *, .colophon > * { position: relative; z-index: 1; }
.band--ink h2, .band--ink h3 { color: var(--paper); }
.band--ink .kicker { color: oklch(72% 0.02 70); }
.band--ink .rule { background: oklch(92% 0.01 85 / .18); }

.band-head { display: flex; flex-direction: column; gap: var(--space-sm); margin-bottom: clamp(32px, 4vw, 56px); }
.band-head h2 { font-size: clamp(1.9rem, 3.6vw, 3.5rem); max-width: 20ch; }
.band-head .lead { margin-top: var(--space-2xs); }

/* ── ЗАЯВЛЕНИЕ: НЕ КУРС ─────────────────────────────────────────── */

.statement {
  font-family: var(--font-display); font-size: clamp(1.5rem, 3vw, 2.5rem);
  line-height: 1.16; letter-spacing: -0.015em; color: var(--ink); max-width: 24ch;
}
.statement em { font-family: var(--font-note); font-style: italic; color: var(--red-deep); }

.duo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 64px); margin-top: clamp(32px, 4vw, 48px); }
.duo-col { display: flex; flex-direction: column; gap: var(--space-md); }
.duo-col + .duo-col { padding-inline-start: clamp(28px, 4vw, 64px); border-inline-start: 1px solid var(--rule); }
.duo-list { list-style: none; display: flex; flex-direction: column; }
.duo-list li { padding-block: var(--space-sm); border-top: 1px solid var(--rule-soft); font-size: 0.9375rem; line-height: 1.55; }
.duo-list li:first-child { border-top: 0; }
.duo--no .duo-list li { color: var(--muted); }
.duo--yes .duo-list li { color: var(--ink-soft); }
.duo--yes .duo-list li { padding-inline-start: 18px; position: relative; }
.duo--yes .duo-list li::before {
  content: ''; position: absolute; left: 0; top: 21px; width: 8px; height: 1px; background: var(--red);
}
.duo-note { font-family: var(--font-note); font-style: italic; color: var(--muted); font-size: 0.875rem; }
@media (max-width: 820px) {
  .duo { grid-template-columns: 1fr; gap: var(--space-xl); }
  .duo-col + .duo-col { padding-inline-start: 0; border-inline-start: 0; border-top: 1px solid var(--rule); padding-top: var(--space-xl); }
}

/* ── ДОКАЗАТЕЛЬСТВО: РЕАЛЬНЫЙ АРТЕФАКТ С ВЫНОСКАМИ ──────────────── */

.proof { position: relative; }
.proof-frame {
  position: relative; border: 1px solid var(--rule); background: var(--paper);
  overflow: hidden;
}
.proof-frame img { width: 100%; height: auto; filter: saturate(.82) contrast(1.02); }
.callout {
  position: absolute; z-index: 3; display: flex; align-items: flex-start; gap: var(--space-xs);
  max-width: 220px;
}
.callout-dot {
  flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%;
  background: var(--red); color: var(--paper);
  font-family: var(--font-display); font-size: 0.75rem;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 4px color-mix(in oklch, var(--paper) 70%, transparent);
}
.callout-txt {
  font-family: var(--font-note); font-style: italic; font-size: 0.8125rem; line-height: 1.4;
  color: var(--ink); background: color-mix(in oklch, var(--paper) 88%, transparent);
  padding: 4px 8px;
}
.proof-cap {
  display: flex; gap: var(--space-md); margin-top: var(--space-md);
  font-family: var(--font-note); font-style: italic; font-size: 0.8125rem; color: var(--muted);
}
.proof-cap span:first-child { color: var(--ink); white-space: nowrap; }
.proof-hint { display: none; }
@media (max-width: 900px) {
  .callout { display: none; }
  /* на узком экране схема нечитаема: показываем её крупно с прокруткой */
  .proof-frame { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .proof-frame img { width: 820px; max-width: none; }
  .proof-cap { flex-direction: column; gap: var(--space-2xs); }
  .proof-hint { display: block; font-size: 0.75rem; color: var(--muted); margin-top: var(--space-xs); }
}

/* ── ОГЛАВЛЕНИЕ ЛИНЕЙКИ ─────────────────────────────────────────────
   Тот, кто пришёл сканировать, а не читать, должен увидеть все четыре
   ступени с ценами за три секунды. Ниже лестница даёт подробности.
   ─────────────────────────────────────────────────────────────────── */
.index { border-top: 2px solid var(--ink); margin-bottom: clamp(32px, 4vw, 52px); }
.index-row {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: baseline; gap: var(--space-sm) var(--space-md);
  padding-block: var(--space-sm);
  border-bottom: 1px solid var(--rule);
  text-decoration: none; color: inherit;
  transition: background .2s var(--ease), padding-inline .2s var(--ease);
}
.index-row:hover { background: color-mix(in oklch, var(--paper-2) 75%, transparent); padding-inline: var(--space-xs); }
.index-n { font-family: var(--font-display); font-size: 1rem; color: var(--muted); }
.index-row:hover .index-n { color: var(--red); }
.index-name { font-size: 0.9375rem; font-weight: 600; color: var(--ink); }
.index-name i { font-family: var(--font-note); font-weight: 400; font-style: italic; color: var(--muted); }
.index-name i::before { content: ' · '; color: var(--faint); }
.index-p { font-family: var(--font-display); font-size: 1rem; color: var(--ink); white-space: nowrap; }
.index-p small { font-size: .62em; color: var(--muted); }
.index-row.is-pick .index-n { color: var(--red); }
@media (max-width: 620px) {
  .index-row { grid-template-columns: 34px minmax(0, 1fr); row-gap: 2px; }
  .index-p { grid-column: 2; }
  .index-name i { display: block; }
  .index-name i::before { content: none; }
}

/* ── СТУПЕНИ: ЛЕСТНИЦА ВМЕСТО СЕТКИ КАРТОЧЕК ───────────────────── */

.ladder { border-top: 2px solid var(--ink); }

.tier {
  scroll-margin-top: 80px;   /* переход из оглавления не должен уезжать под шапку */
  display: grid; grid-template-columns: 96px minmax(0, 1fr) 240px;
  gap: clamp(20px, 3vw, 44px);
  padding-block: clamp(28px, 3.4vw, 44px);
  border-bottom: 1px solid var(--rule);
  transition: background .3s var(--ease);
}
.tier:hover { background: color-mix(in oklch, var(--paper-2) 60%, transparent); }
.tier--pick, .tier--pick:hover {
  background-color: var(--paper-2);
  background-image: url('paper-grain.png');
  background-repeat: repeat;
  background-blend-mode: multiply;
}

.tier-num {
  font-family: var(--font-display); font-size: clamp(2.5rem, 4.4vw, 4rem);
  /* не --faint: на крупном тексте нужен контраст не ниже 3:1, светлее не берём */
  line-height: .8; color: oklch(60% 0.013 62); letter-spacing: -0.03em;
}
.tier--pick .tier-num { color: var(--red); }

.tier-main { display: flex; flex-direction: column; gap: var(--space-sm); min-width: 0; }
.tier-name { font-family: var(--font-display); font-size: clamp(1.25rem, 2vw, 1.625rem); color: var(--ink); line-height: 1.1; }
.tier-pick-mark {
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--red-deep); display: inline-flex; align-items: center; gap: 6px;
}
.tier-pick-mark::before { content: ''; width: 18px; height: 1px; background: var(--red); }
.tier-target { font-family: var(--font-note); font-style: italic; color: var(--muted); font-size: 0.9375rem; max-width: 52ch; }
.tier-facts { display: flex; gap: var(--space-md); flex-wrap: wrap; font-size: 0.8125rem; color: var(--muted); }
.tier-facts span { display: inline-flex; align-items: center; gap: 6px; }
.tier-facts span::before { content: ''; width: 4px; height: 4px; background: var(--faint); border-radius: 50%; }

.tier-list { list-style: none; columns: 2; column-gap: var(--space-xl); margin-top: var(--space-2xs); }
.tier-list li {
  break-inside: avoid; font-size: 0.9375rem; line-height: 1.5; color: var(--ink-soft);
  padding-block: 5px; padding-inline-start: 16px; position: relative;
}
.tier-list li::before { content: ''; position: absolute; left: 0; top: 13px; width: 7px; height: 1px; background: var(--red); }
/* уточнение под пунктом: отдельной строкой, иначе сливается с ним */
.tier-list li b {
  display: block; margin-top: 3px; font-family: var(--font-note); font-style: italic;
  font-weight: 400; font-size: 0.8125rem; color: var(--red-deep);
}
@media (max-width: 700px) { .tier-list { columns: 1; } }

.tier-more { font-size: 0.8125rem; color: var(--muted); cursor: pointer; }
.tier-more summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; padding-block: 4px; border-bottom: 1px solid var(--rule); width: fit-content; }
.tier-more summary::-webkit-details-marker { display: none; }
.tier-more summary::after { content: '+'; font-family: var(--font-display); color: var(--red); }
.tier-more[open] summary::after { content: '–'; }
.tier-more ul { list-style: none; margin-top: var(--space-sm); display: flex; flex-direction: column; gap: 6px; }
.tier-more li { padding-inline-start: 14px; position: relative; line-height: 1.5; }
.tier-more li::before { content: '·'; position: absolute; left: 4px; color: var(--faint); }

.tier-buy { display: flex; flex-direction: column; gap: var(--space-xs); align-items: flex-start; }
.tier-price { font-family: var(--font-display); font-size: clamp(1.5rem, 2.2vw, 1.875rem); color: var(--ink); line-height: 1; letter-spacing: -0.02em; }
.tier-price small { font-size: 0.5em; color: var(--muted); }
.tier-alt { font-size: 0.75rem; color: var(--muted); line-height: 1.45; }
.tier-buy .btn { margin-top: var(--space-2xs); }
.tier-buy .btn--ghost { background: transparent; color: var(--ink); }
.tier-buy .btn--ghost:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }

@media (max-width: 1000px) {
  .tier { grid-template-columns: 64px minmax(0, 1fr); }
  .tier-buy { grid-column: 2; flex-direction: row; align-items: baseline; gap: var(--space-md); flex-wrap: wrap; }
}

/* результат ступени: врезка на полях лестницы */
.tier-result {
  font-family: var(--font-note); font-style: italic; font-size: 0.875rem; line-height: 1.5;
  color: var(--ink-soft); padding-top: var(--space-sm); border-top: 1px solid var(--rule);
  max-width: 60ch;
}
.tier-result b { font-style: normal; font-family: var(--font-body); font-weight: 600; font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--red-deep); margin-inline-end: var(--space-xs); }

/* вход и апгрейд: строки-объявления */
.classified {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-lg);
  flex-wrap: wrap; padding-block: var(--space-lg); border-bottom: 1px solid var(--rule);
}
.classified:first-child { border-top: 1px solid var(--rule); }
.classified-t { font-size: 0.9375rem; color: var(--ink); max-width: 62ch; }
.classified-t b { font-weight: 600; }
.classified-t i { font-family: var(--font-note); color: var(--muted); }
.classified-p { display: flex; align-items: baseline; gap: var(--space-md); white-space: nowrap; }
.classified-p span { font-family: var(--font-display); font-size: 1.25rem; color: var(--ink); }

/* ── ТАБЛИЦЫ ────────────────────────────────────────────────────── */

.tbl-wrap { overflow-x: auto; border-top: 2px solid var(--ink); }
table.tbl { width: 100%; border-collapse: collapse; min-width: 640px; }
.tbl th, .tbl td { text-align: left; padding: 14px 16px; border-bottom: 1px solid var(--rule-soft); font-size: 0.9375rem; vertical-align: top; }
.tbl thead th { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--rule); }
.tbl thead th.is-pick { color: var(--red-deep); }
.tbl td.is-pick { background: color-mix(in oklch, var(--paper-2) 70%, transparent); }
.tbl tr.grp td { font-family: var(--font-display); font-size: 0.9375rem; color: var(--ink); padding-top: 22px; border-bottom: 1px solid var(--rule); }
.tbl .yes { color: var(--ink); }
.tbl .no { color: var(--faint); }
.tbl td:first-child { color: var(--ink-soft); }

    .tbl tr.sum td { color: var(--ink); font-weight: 600; border-top: 1px solid var(--rule); }
    .tbl tr.sum.deal td:last-child { font-family: var(--font-display); font-weight: 400; color: var(--red-deep); font-size: 0.9375rem; }

/* ── ШАГИ РАБОТЫ ───────────────────────────────────────────────── */

.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); gap: 0; border-top: 1px solid var(--rule); }
.step {
  padding: var(--space-lg) var(--space-lg) var(--space-xl) 0;
  border-top: 2px solid var(--ink); margin-top: -1px;
  display: flex; flex-direction: column; gap: var(--space-xs);
}
.step + .step { padding-inline-start: var(--space-lg); }
.step-n { font-family: var(--font-display); font-size: 0.875rem; color: var(--red); }
.step h3 { font-size: 1.25rem; }
.step p { font-size: 0.9375rem; color: var(--muted); line-height: 1.55; }

/* ── ОТЗЫВЫ ─────────────────────────────────────────────────────── */

.films { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); gap: clamp(16px, 2vw, 28px); }
.film { position: relative; padding: 0; border: 0; background: none; cursor: pointer; font: inherit; text-align: left; display: flex; flex-direction: column; gap: var(--space-sm); }
.film-shot { position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: var(--ink); }
.film-shot video { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); transition: filter .4s var(--ease), transform .5s var(--ease); }
.film:hover .film-shot video { filter: grayscale(0) contrast(1); transform: scale(1.02); }
.film-play {
  position: absolute; left: var(--space-sm); bottom: var(--space-sm);
  width: 38px; height: 38px; border-radius: 50%; background: var(--red); color: var(--paper);
  display: flex; align-items: center; justify-content: center;
  transition: transform .3s var(--ease);
}
.film:hover .film-play { transform: scale(1.08); }
.film-play svg { width: 14px; height: 14px; margin-inline-start: 2px; }
.film-cap { font-family: var(--font-note); font-style: italic; font-size: 0.8125rem; line-height: 1.45; color: var(--muted); }
.film-cap b { font-style: normal; font-family: var(--font-body); font-weight: 600; font-size: 0.875rem; color: var(--ink); display: block; }
.film:focus-visible .film-shot { outline: 2px solid var(--red); outline-offset: 3px; }

.quotes { columns: 3 280px; column-gap: clamp(24px, 3vw, 44px); margin-top: clamp(32px, 4vw, 56px); }
.quote { break-inside: avoid; padding-block: var(--space-lg); border-top: 1px solid var(--rule); }
.quote p { font-family: var(--font-note); font-style: italic; font-size: 0.9375rem; line-height: 1.55; color: var(--ink-soft); }
.quote-by { margin-top: var(--space-sm); font-size: 0.75rem; color: var(--muted); }
.quote-by b { display: block; font-size: 0.8125rem; font-weight: 600; color: var(--ink); font-style: normal; }
.quote-stars { color: var(--red); font-size: 0.75rem; letter-spacing: 0.1em; margin-bottom: var(--space-xs); }

/* модальное окно с видео */
.player { position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center; padding: 64px 20px 24px; background: oklch(18% 0.02 60 / .94); }
.player.is-open { display: flex; }
.player-in { position: relative; width: min(420px, 100%); }
.player-in.is-wide { width: min(900px, 100%); }
.player video { width: 100%; max-height: 76vh; background: #000; }
.player-cap { margin-top: var(--space-sm); font-family: var(--font-note); font-style: italic; color: oklch(80% 0.01 85); font-size: 0.8125rem; }
.player-x { position: absolute; top: -44px; right: 0; width: 34px; height: 34px; background: none; border: 1px solid oklch(90% 0.01 85 / .35); color: var(--paper); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.player-x:hover { background: var(--red); border-color: var(--red); }

/* ── ВОПРОСЫ И ОТВЕТЫ ──────────────────────────────────────────── */

/* сетка, а не колонки: при четырёх вопросах колонки балансируются криво
   и оставляют дыру в первой */
.qa { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); column-gap: clamp(32px, 4vw, 64px); }
.qa-item { padding-block: var(--space-lg); border-top: 1px solid var(--rule); }
.qa-q { font-family: var(--font-display); font-size: 1.1875rem; line-height: 1.25; color: var(--ink); margin-bottom: var(--space-xs); }
.qa-a { font-size: 0.9375rem; line-height: 1.65; color: var(--muted); }
.qa-a strong { color: var(--ink); font-weight: 600; }
.qa-a em { font-family: var(--font-note); }

/* ── ФИНАЛ И ПОДВАЛ ────────────────────────────────────────────── */

.finale { text-align: left; }
.finale h2 { font-size: clamp(2.2rem, 5vw, 4.5rem); max-width: 18ch; margin-block: var(--space-sm) var(--space-lg); }
.finale h2 em { font-family: var(--font-note); font-style: italic; color: oklch(72% 0.14 34); }
.finale-row { display: flex; align-items: center; gap: var(--space-lg); flex-wrap: wrap; margin-top: var(--space-xl); }
.finale .btn { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.finale .btn:hover { background: var(--red); border-color: var(--red); color: var(--paper); }
.finale .btn--go { background: var(--red); border-color: var(--red); color: var(--paper); }
.finale .btn--go:hover { background: var(--paper); border-color: var(--paper); color: var(--ink); }
.finale .btn-text { color: oklch(85% 0.012 85); border-bottom-color: oklch(85% 0.012 85 / .35); }
.finale .btn-text:hover { border-bottom-color: var(--paper); }

.colophon {
  position: relative;
  background: var(--ink); color: oklch(66% 0.012 70); padding-block: var(--space-xl);
  border-top: 1px solid oklch(92% 0.01 85 / .14); font-size: 0.75rem;
}
.colophon-in { display: flex; align-items: center; gap: var(--space-lg); flex-wrap: wrap; }
.colophon img { height: 24px; opacity: .6; }
.colophon a { color: oklch(78% 0.012 70); text-decoration: none; border-bottom: 1px solid transparent; }
.colophon a:hover { border-bottom-color: currentColor; }
.colophon .sep { margin-inline-start: auto; }


    /* ── ТЁМНАЯ ПОЛОСА: полный набор переопределений ────────────────
       Всё, что на бумаге печатается чернилами, здесь должно быть светлым.
       Без этих правил текст сливается с фоном (поймано аудитом). */
    .band--ink p, .band--ink .lead { color: oklch(79% 0.012 80); }
    .band--ink .marg { color: oklch(71% 0.012 75); border-top-color: oklch(92% 0.01 85 / .55); }
    .band--ink .marg b { color: var(--paper); }

    .band--ink .tbl-wrap { border-top-color: var(--paper); }
    .band--ink .tbl thead th { color: oklch(73% 0.02 70); border-bottom-color: oklch(92% 0.01 85 / .28); }
    .band--ink .tbl thead th.is-pick { color: oklch(78% 0.15 34); }
    .band--ink .tbl td { color: oklch(86% 0.012 80); border-bottom-color: oklch(92% 0.01 85 / .13); }
    .band--ink .tbl td:first-child { color: oklch(73% 0.012 75); }
    .band--ink .tbl td.is-pick { background: oklch(92% 0.01 85 / .08); color: var(--paper); }
    .band--ink .tbl tr.grp td { color: var(--paper); border-bottom-color: oklch(92% 0.01 85 / .3); }
    .band--ink .tbl tr.sum td { color: var(--paper); border-top-color: oklch(92% 0.01 85 / .3); }

    .band--ink .tier-result { color: oklch(79% 0.012 80); border-top-color: oklch(92% 0.01 85 / .24); }
    .band--ink .tier-result b { color: oklch(78% 0.15 34); }

    .band--ink .step { border-top-color: var(--paper); }
    .band--ink .step h3 { color: var(--paper); }
    .band--ink .step p { color: oklch(73% 0.012 75); }

    .band--ink .files { border-top-color: var(--paper); }
    .band--ink .file { border-bottom-color: oklch(92% 0.01 85 / .18); }
    .band--ink .file-n { color: oklch(62% 0.012 75); }
    .band--ink .file-was { color: oklch(70% 0.012 75); }
    .band--ink .file-now { color: oklch(86% 0.012 80); }

    .band--ink .qa-item { border-top-color: oklch(92% 0.01 85 / .22); }
    .band--ink .qa-a { color: oklch(73% 0.012 75); }
    .band--ink .qa-a strong { color: var(--paper); }

    .band--ink .roles .role, .band--ink .panel-x { border-top-color: var(--paper); }
    .band--ink .role li, .band--ink .panel-x li { color: oklch(81% 0.012 80); border-top-color: oklch(92% 0.01 85 / .16); }
    .band--ink .role-sub, .band--ink .panel-note { color: oklch(71% 0.012 75); }
    .band--ink .index-row, .band--ink .classified { border-bottom-color: oklch(92% 0.01 85 / .2); }


    /* ── РАЗМЕР ИНТЕРАКТИВНЫХ ЭЛЕМЕНТОВ ─────────────────────────────
       Отдельно стоящие ссылки должны быть не ниже 24px (WCAG 2.5.8).
       Внутритекстовые под исключение попадают и не трогаются. */
    .masthead-back, .masthead-cta, .colophon a, .btn-text, .index-row, .issue-row {
      min-height: 24px; display: inline-flex; align-items: center;
    }
    .index-row, .issue-row { display: flex; }
    .colophon-in a { padding-block: 4px; }
    .cookie button { min-height: 44px; }

    /* тема заявлена явно: сайт светлый, принудительная инверсия ни к чему */
    :root { color-scheme: light; }

    /* ── ПЕЧАТЬ ─────────────────────────────────────────────────────
       Оферту и политику печатают: убираем фон, шапку, подвал и баннер. */
    @media print {
      .masthead, .colophon, .cookie, .player, .toast { display: none !important; }
      body { background: #fff !important; color: #000; }
      .band, .legal { padding-block: 0; }
      .legal { max-width: none; }
      a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; color: #555; }
      .press { -webkit-mask-image: none !important; mask-image: none !important; }
    }


    /* ── ДОКУМЕНТ: благодарственное письмо ──────────────────────────
       Репродукция документа как в журнале: волосяная рамка, подпись
       снизу, оригинал открывается по клику. */
    .letter {
      display: grid; grid-template-columns: minmax(200px, 340px) minmax(min(280px, 100%), 1fr);
      gap: clamp(24px, 3.5vw, 56px); align-items: start;
      padding-top: clamp(28px, 3.5vw, 44px); margin-top: clamp(28px, 3.5vw, 44px);
      border-top: 1px solid var(--rule);
    }
    .letter-shot { display: block; position: relative; border: 1px solid var(--rule); background: var(--white); text-decoration: none; }
    .letter-shot img { width: 100%; height: auto; display: block; }
    .letter-open {
      position: absolute; left: 0; right: 0; bottom: 0;
      background: oklch(21% 0.016 62 / .88); color: var(--paper);
      font-size: 0.75rem; font-weight: 600; text-align: center; padding: 9px 10px;
      opacity: 0; transition: opacity .22s var(--ease);
    }
    .letter-shot:hover .letter-open, .letter-shot:focus-visible .letter-open { opacity: 1; }
    .letter-shot:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
    .letter-body { display: flex; flex-direction: column; gap: var(--space-md); }
    .letter-q {
      font-family: var(--font-note); font-style: italic;
      font-size: clamp(1.0625rem, 1.7vw, 1.375rem); line-height: 1.45; color: var(--ink);
      max-width: 40ch;
    }
    .letter-q::before { content: '«'; color: var(--red); margin-inline-end: 2px; }
    .letter-q::after { content: '»'; color: var(--red); margin-inline-start: 2px; }
    .letter-who { font-size: 0.875rem; line-height: 1.55; color: var(--muted); }
    .letter-who b { display: block; font-weight: 600; color: var(--ink); }
    .letter-meta { font-family: var(--font-note); font-style: italic; font-size: 0.8125rem; color: var(--muted); padding-top: var(--space-sm); border-top: 1px solid var(--rule); }
    @media (max-width: 640px) { .letter { grid-template-columns: minmax(0, 1fr); } .letter-open { opacity: 1; } }

/* ── ПЕЧАТЬ ЗАГОЛОВКОВ ──────────────────────────────────────────────
   Текст прокатывается слева направо, как лист проходит через пресс.
   Маска по живому тексту: он остаётся выделяемым, доступным скринридеру
   и видимым при выключенном JS (класс .press навешивает скрипт).
   ─────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .press {
    /* геометрия маски: при ширине 220% и переходе 48→54% лист на старте
       полностью чист, но краска начинает ложиться сразу, без холостого хода */
    -webkit-mask-image: linear-gradient(90deg, #000 48%, rgba(0,0,0,0) 54%);
            mask-image: linear-gradient(90deg, #000 48%, rgba(0,0,0,0) 54%);
    -webkit-mask-size: 220% 100%;  mask-size: 220% 100%;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: 100% 0; mask-position: 100% 0;
  }
  /* линейно: вал пресса идёт с постоянной скоростью, ускорений у него нет */
  .press.is-printed {
    animation: press-in var(--press, .7s) linear forwards;
  }
  @keyframes press-in {
    from { -webkit-mask-position: 100% 0; mask-position: 100% 0; }
    to   { -webkit-mask-position: 0% 0;   mask-position: 0% 0; }
  }
  /* крупный заголовок прокатывается заметно медленнее: его читают дольше */
  .opener h1.press { --press: 1.1s; }
  .finale h2.press { --press: .85s; }
}

/* ── ЯВЛЕНИЕ ПРИ ЗАГРУЗКЕ ───────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .rise { opacity: 0; transform: translateY(14px); animation: rise .9s var(--ease) forwards; }
  .rise-1 { animation-delay: .06s; } .rise-2 { animation-delay: .14s; }
  .rise-3 { animation-delay: .22s; } .rise-4 { animation-delay: .3s; }
  @keyframes rise { to { opacity: 1; transform: none; } }
  .portrait img { animation: settle 1.4s var(--ease) both; }
  @keyframes settle { from { opacity: 0; transform: scale(1.04); } to { opacity: 1; transform: none; } }
}

    /* ── ПОДВАЛ: РЕКВИЗИТЫ ──────────────────────────────────────────── */
    .colophon-legal { max-width: 52ch; line-height: 1.55; }
    @media (max-width: 860px) { .colophon .sep { margin-inline-start: 0; } }

    /* ── УВЕДОМЛЕНИЕ О COOKIE ───────────────────────────────────────── */
    .cookie {
      position: fixed; left: 0; right: 0; bottom: 0; z-index: 250;
      display: none; align-items: center; gap: var(--space-md) var(--space-lg); flex-wrap: wrap;
      background-color: var(--paper);
      background-image: url('paper-grain.png'); background-repeat: repeat; background-blend-mode: multiply;
      border-top: 2px solid var(--ink);
      padding: var(--space-md) var(--gutter);
      box-shadow: 0 -10px 30px oklch(21% 0.016 62 / .08);
    }
    .cookie.is-on { display: flex; }
    .cookie p { font-size: 0.8125rem; line-height: 1.55; color: var(--ink-soft); max-width: 72ch; }
    .cookie a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--faint); }
    .cookie a:hover { color: var(--red-deep); border-bottom-color: var(--red); }
    .cookie button {
      margin-inline-start: auto; flex-shrink: 0;
      font: inherit; font-size: 0.8125rem; font-weight: 600; cursor: pointer;
      background: var(--ink); color: var(--paper); border: 1px solid var(--ink);
      padding: 9px 22px; transition: background .2s var(--ease), border-color .2s var(--ease);
    }
    .cookie button:hover { background: var(--red-deep); border-color: var(--red-deep); }
    @media (max-width: 620px) { .cookie button { margin-inline-start: 0; width: 100%; } }