/* ══════════════════════════════════════════════════════════════════════════
   Frankenplatz — СТАТЬЯ. Единственный слой стилей для страниц блога.

   Страница статьи подключает ровно три файла и больше ничего:
     ../styles.css            — токены и base
     ../site/chrome.css       — шапка и подвал сайта (канонический источник)
     ../site/article.css      — этот файл

   Лендинговые стили (kit.css, experiments.css, polish.css, market-blocks.css,
   align-left.css) статья НЕ подключает. Там одни и те же классы описаны
   по 3–6 раз и перебивают друг друга — из-за этого правки в статьях
   «то работают, то нет», а блоки налезают друг на друга.

   Здесь у каждого правила один хозяин.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Оболочка и сетка ────────────────────────────────────────────────
   Две колонки на CSS Grid. Оглавление — настоящая колонка, а не абсолютно
   спозиционированный блок, поэтому наехать на текст оно не может в принципе.
   minmax(0,1fr) у колонки текста — защита от «распирания»: длинное слово,
   широкая таблица или код больше не растягивают вёрстку.                    */

.fpa{
  /* геометрия — правится только здесь.
     Полоса и боковые поля повторяют шапку сайта (site/chrome.css:
     padding:16px max(26px,(100% - 1240px)/2)) — поэтому левый край статьи
     совпадает с логотипом, а правый — с кнопкой «Купить билет».          */
  --fpa-band:    1240px;   /* полоса сайта                                 */
  --fpa-gutter:  26px;     /* минимальные поля, слева = справа             */
  --fpa-text:    818px;    /* колонка текста — 8 из 12 сеточных            */
  --fpa-toc:     252px;    /* колонка оглавления                           */
  --fpa-gap:     48px;     /* минимальный зазор текст ↔ оглавление         */
  --fpa-measure: 62ch;     /* мера строки внутри колонки                   */
  --fpa-flow:    22px;     /* базовый вертикальный ритм                    */

  position: relative;
  z-index: 1;
  box-sizing: border-box;
  width: 100%;
  padding-inline: max(var(--fpa-gutter), (100% - var(--fpa-band)) / 2);
  padding-block: clamp(24px, 3vw, 40px) clamp(56px, 7vw, 104px);

  display: grid;
  grid-template-columns: minmax(0, var(--fpa-text)) var(--fpa-toc);
  grid-template-areas:
    "head toc"
    "body toc"
    "foot toc";
  justify-content: space-between;
  column-gap: var(--fpa-gap);
  align-items: start;

  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.62;
  color: var(--text);
}


.fpa *{ min-width: 0; }
.fpa *, .fpa *::before, .fpa *::after{ box-sizing: border-box; }

.fpa__head{ grid-area: head; }
.fpa__body{ grid-area: body; padding-top: 30px; }
.fpa__foot{ grid-area: foot; }
.fpa__toc { grid-area: toc;  }

/* Блоки статьи занимают всю колонку .fpa__body (780px) — мера строки уже задана
   шириной колонки, второе сужение (62ch) делало плашки и списки уже текста. */
.fpa__body > :where(p, ul, ol, h2, h3, h4, blockquote, .a-note){
  max-width: none;
}

/* ── 2. Защита от переполнения ──────────────────────────────────────────── */

.fpa :where(p, li, td, th, dt, dd, h1, h2, h3, h4, figcaption, summary){
  overflow-wrap: break-word;
  word-break: normal;
}
.fpa :where(img, video, svg, canvas, iframe){ max-width:100%; height:auto; display:block; }
.fpa pre{ max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.a-scroll{ max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; }

/* ── 3. Вертикальный ритм ───────────────────────────────────────────────── */

.fpa :where(h1, h2, h3, h4, p, ul, ol, figure, blockquote, table, dl){ margin: 0; }
.fpa__body > * + *{ margin-top: var(--fpa-flow); }
.fpa__body > :where(h2) + *{ margin-top: 14px; }
.fpa__body > :where(h3, h4) + *{ margin-top: 10px; }
.fpa__body > h2{ margin-top: clamp(44px, 5vw, 64px); }
.fpa__body > h3{ margin-top: clamp(30px, 3.4vw, 40px); }
.fpa__body > h4{ margin-top: 26px; }
.fpa__body > :first-child{ margin-top: 0; }

/* ── 4. Шапка статьи ────────────────────────────────────────────────────── */

.fpa__back{ display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:var(--fw-semibold); letter-spacing:.01em; color:var(--muted); text-decoration:none; transition:color var(--dur-fast) var(--ease-out); }
.fpa__back::before{ content:"←"; }
.fpa__back:hover{ color:var(--lila-bright); }

.fpa__tag{ display:flex; width:fit-content; align-items:center; gap:8px; margin-top:20px; padding:6px 14px 6px 12px; border:1px solid var(--line); border-radius:999px; background:var(--glass); font-size:14px; font-weight:var(--fw-semibold); letter-spacing:.02em; color:var(--muted); }
.fpa__tag::before{ content:""; width:6px; height:6px; border-radius:2px; background:var(--gold); }

.fpa h1{
  margin-top: 18px;
  max-width: 22ch;
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: clamp(30px, 3.6vw, 46px);
  line-height: 1.12;
  letter-spacing: -.02em;
  color: var(--heading);
  text-wrap: balance;
}
.fpa h1 em{
  font-style: normal;
  background: var(--grad-gold-lila);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.fpa__lede{ margin-top:18px; max-width:60ch; font-size:clamp(18px,1.5vw,20px); line-height:1.55; color:var(--muted); }

.fpa__meta{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; margin-top:24px; padding-top:18px; border-top:1px solid var(--line); font-size:14px; letter-spacing:.01em; color:var(--muted-2); }
.fpa__meta > *{ display:inline-flex; align-items:center; gap:8px; }
.fpa__meta > * + *::before{ content:""; width:3px; height:3px; border-radius:50%; background:currentColor; opacity:.55; }
.fpa__meta strong{ font-weight:var(--fw-bold); letter-spacing:.08em; text-transform:uppercase; color:var(--gold); }

/* ── 5. Текст статьи ────────────────────────────────────────────────────── */

.fpa__body h2{ font-family:var(--font-display); font-weight:var(--fw-bold); font-size:clamp(24px,2.3vw,30px); line-height:1.2; letter-spacing:-.015em; color:var(--heading); text-wrap:balance; scroll-margin-top:calc(var(--nav-h, 64px) + 24px); }
.fpa__body h3{ font-family:var(--font-body); font-weight:var(--fw-bold); font-size:20px; line-height:1.3; color:var(--heading); scroll-margin-top:calc(var(--nav-h, 64px) + 24px); }
.fpa__body h4{ font-family:var(--font-body); font-weight:var(--fw-semibold); font-size:18px; line-height:1.35; letter-spacing:.01em; color:var(--text); }

.fpa__body p{ color:var(--text); }
.fpa__body strong{ font-weight:var(--fw-bold); color:var(--heading); }
.fpa__body em{ font-style:italic; }

.fpa__body a{ color:var(--lila-bright); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.18em; text-decoration-color:color-mix(in srgb, var(--lila-bright) 40%, transparent); transition:color var(--dur-fast) var(--ease-out), text-decoration-color var(--dur-fast) var(--ease-out); }
.fpa__body a:hover{ color:var(--gold-bright); text-decoration-color:currentColor; }

.fpa__body :where(ul, ol){ padding-left:0; list-style:none; }
.fpa__body :where(ul, ol) li{ position:relative; padding-left:26px; }
.fpa__body :where(ul, ol) li + li{ margin-top:10px; }
.fpa__body :where(ul) > li::before{ content:""; position:absolute; left:6px; top:.62em; width:6px; height:6px; border-radius:2px; background:var(--gold); }
.fpa__body :where(ol){ counter-reset: fpa-ol; }
.fpa__body :where(ol) > li{ counter-increment: fpa-ol; }
.fpa__body :where(ol) > li::before{ content:counter(fpa-ol) "."; position:absolute; left:0; top:0; font-variant-numeric:tabular-nums; font-weight:var(--fw-bold); color:var(--gold); }
.fpa__body li > :where(ul, ol){ margin-top:10px; }

.fpa__body code{ padding:2px 6px; border:1px solid var(--line); border-radius:6px; background:rgba(255,255,255,.05); font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:.88em; color:var(--gold-bright); }
.fpa__body pre{ padding:18px 20px; border:1px solid var(--line); border-radius:var(--r-md); background:rgba(0,0,0,.28); }
.fpa__body pre code{ padding:0; border:0; background:none; color:var(--text); }
.fpa__body hr{ margin-block:clamp(36px,4vw,52px); border:0; border-top:1px solid var(--line); }

/* ── 6. Блоки статьи. Их девять, больше выдумывать не нужно. ────────────── */

/* 6.1 Врезка: .a-note (+ --warn, --ok, --lila) */
.a-note{ padding:18px 22px; border-left:3px solid var(--gold); border-radius:0 var(--r-md) var(--r-md) 0; background:linear-gradient(90deg, color-mix(in srgb, var(--gold) 12%, transparent), transparent 70%); font-size:18px; line-height:1.55; color:var(--text); }
.a-note strong{ color:var(--gold-bright); }
.a-note > * + *{ margin-top:10px; }
.a-note--warn{ border-left-color:var(--red); background:linear-gradient(90deg, color-mix(in srgb, var(--red) 12%, transparent), transparent 70%); }
.a-note--warn strong{ color:var(--red); }
.a-note--ok{ border-left-color:var(--green); background:linear-gradient(90deg, color-mix(in srgb, var(--green) 12%, transparent), transparent 70%); }
.a-note--ok strong{ color:var(--green-text); }
.a-note--lila{ border-left-color:var(--lila); background:linear-gradient(90deg, color-mix(in srgb, var(--lila) 14%, transparent), transparent 70%); }
.a-note--lila strong{ color:var(--lila-bright); }

/* 6.2 Карточки: .a-cards > .a-card */
.a-cards{ display:grid; grid-template-columns:repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap:14px; max-width:none; }
.a-cards--2{ grid-template-columns:repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
.a-card{ padding:18px 20px; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--glass); font-size:16px; line-height:1.5; }
.a-card > * + *{ margin-top:8px; }
.a-card__t{ font-weight:var(--fw-bold); font-size:16px; color:var(--heading); }
.a-card--yes{ border-color:color-mix(in srgb, var(--green) 34%, var(--line)); }
.a-card--no { border-color:color-mix(in srgb, var(--red) 34%, var(--line)); }

/* блочные списки не наследуют отбивку обычных списков */
.fpa__body :where(.a-steps, .a-check) > li + li{ margin-top: 0; }

/* 6.3 Шаги: ol.a-steps */
.a-steps{ counter-reset:a-step; display:grid; gap:12px; max-width:none; padding:0; list-style:none; }
.a-steps > li{ counter-increment:a-step; position:relative; padding:16px 20px 16px 60px; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--glass); font-size:16px; line-height:1.5; }
.a-steps > li::before{ content:counter(a-step); position:absolute; left:18px; top:15px; width:28px; height:28px; display:grid; place-items:center; border-radius:9px; background:var(--grad-gold); color:var(--ink-on-gold); font-family:var(--font-display); font-weight:var(--fw-black); font-size:14px; }
.a-steps > li b{ display:block; margin-bottom:4px; color:var(--heading); }

.a-steps > li span{ display:block; }
.a-steps > li > * + *{ margin-top: 4px; }
.a-steps > li i.a-where{ margin-top: 6px; }

/* 6.4 Чек-лист: ul.a-check.
       Внутри может быть настоящий чекбокс — <li><label><input type="checkbox">
       <span>текст</span></label></li>. Тогда рисуем именно его, а не рядом.
       Если чекбокса нет, ставим неинтерактивный квадратик псевдоэлементом.     */
.a-check{ display:grid; gap:10px; max-width:none; padding:0; list-style:none; }
.a-check > li{
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: rgba(255,255,255,.03);
  font-size: 16px;
  line-height: 1.5;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.fpa__body .a-check > li{ padding: 0; }
.fpa__body .a-check > li::before{ content: none; }

/* пункт с настоящим чекбоксом */
.a-check label{
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding: 13px 18px;
  cursor: pointer;
}
.a-check input[type="checkbox"]{
  appearance: none;
  -webkit-appearance: none;
  width: 20px; height: 20px;
  margin: 1px 0 0;
  border: 1.5px solid var(--gold);
  border-radius: 6px;
  background: transparent;
  display: grid;
  place-content: center;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.a-check input[type="checkbox"]::after{
  content: "";
  width: 10px; height: 5px;
  border-left: 2px solid var(--ink-on-gold);
  border-bottom: 2px solid var(--ink-on-gold);
  transform: rotate(-45deg) scale(0);
  transition: transform var(--dur-fast) var(--ease-out);
}
.a-check input[type="checkbox"]:checked{ background: var(--grad-gold); border-color: var(--gold-bright); }
.a-check input[type="checkbox"]:checked::after{ transform: rotate(-45deg) scale(1); }
.a-check li:has(input:checked){ border-color: color-mix(in srgb, var(--gold) 34%, var(--line)); }
.a-check li:has(input:checked) span{ color: var(--muted-2); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--gold) 60%, transparent); }

/* пункт без чекбокса — просто отметка */
.fpa__body .a-check > li:not(:has(label)){ padding: 13px 18px 13px 46px; }
.fpa__body .a-check > li:not(:has(label))::before{
  content: "";
  position: absolute;
  left: 16px; top: 15px;
  width: 18px; height: 18px;
  border: 1.5px solid var(--gold);
  border-radius: 6px;
  background: none;
}

/* счётчик «Отмечено 0 из 7» */
.a-count{ margin-top: 12px; font-size: 14px; color: var(--muted-2); }
.a-count b{ color: var(--gold-bright); font-weight: var(--fw-bold); }

/* 6.5 Таблица: просто table, обёртку .a-scroll ставит article.js */
.fpa__body table{ width:100%; min-width:460px; border-collapse:collapse; font-size:16px; line-height:1.45; }
.fpa__body th, .fpa__body td{ padding:12px 14px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }
.fpa__body thead th{ border-bottom:1px solid var(--line-strong); font-size:12px; font-weight:var(--fw-bold); letter-spacing:.08em; text-transform:uppercase; color:var(--muted-2); white-space:nowrap; }
.fpa__body tbody tr:last-child td{ border-bottom:0; }
.fpa__body tbody tr:hover{ background:rgba(255,255,255,.025); }

/* 6.6 Вопросы: .a-faq > details */
.a-faq{ display:grid; gap:8px; max-width:none; }
.a-faq details{ border:1px solid var(--line); border-radius:var(--r-md); background:var(--glass); overflow:hidden; }
.a-faq summary{ padding:15px 46px 15px 18px; position:relative; cursor:pointer; list-style:none; font-weight:var(--fw-semibold); font-size:16px; line-height:1.45; color:var(--heading); }
.a-faq summary::-webkit-details-marker{ display:none; }
.a-faq summary::after{ content:""; position:absolute; right:20px; top:22px; width:8px; height:8px; border-right:1.5px solid var(--gold); border-bottom:1.5px solid var(--gold); transform:rotate(45deg); transition:transform var(--dur-base) var(--ease-out); }
.a-faq details[open] summary::after{ transform:rotate(225deg); top:25px; }
.a-faq details > :not(summary){ padding:0 18px 16px; font-size:16px; line-height:1.55; color:var(--muted); }

/* 6.7 Цитата: blockquote.a-quote */
.a-quote{ padding-left:22px; border-left:2px solid var(--lila); font-size:18px; line-height:1.55; color:var(--muted); }
.a-quote cite{ display:block; margin-top:10px; font-style:normal; font-size:14px; color:var(--muted-2); }

/* 6.8 Призыв: .a-cta (один на статью) */
.a-cta{ display:flex; flex-wrap:wrap; align-items:center; gap:16px 20px; max-width:none; padding:22px 24px; border:1px solid color-mix(in srgb, var(--gold) 26%, var(--line)); border-radius:var(--r-xl); background:var(--grad-card-gold, var(--glass)); }
.a-cta__t{ flex:1 1 260px; font-size:18px; line-height:1.45; color:var(--heading); }
.a-cta__t span{ display:block; margin-top:4px; font-size:16px; color:var(--muted); }
.fpa__body .a-btn, .a-btn{ display:inline-flex; align-items:center; gap:8px; padding:12px 22px; border:0; border-radius:999px; background:var(--grad-gold); color:var(--ink-on-gold); font-family:var(--font-body); font-weight:var(--fw-bold); font-size:16px; text-decoration:none; white-space:nowrap; cursor:pointer; transition:transform var(--dur-btn) var(--ease-out), box-shadow var(--dur-btn) var(--ease-out); }
.fpa__body .a-btn:hover, .a-btn:hover{ transform:translateY(-1px); box-shadow:var(--shadow-gold-sm); }
.fpa__body .a-btn--ghost, .a-btn--ghost{ background:transparent; border:1px solid var(--line-strong); color:var(--text); }

/* ряд кнопок без карточки */
.a-btns{ display:flex; flex-wrap:wrap; gap:12px; max-width:none; }

/* 6.9 Актуальность: .a-source */
.a-source{ max-width:none; padding:16px 20px; border:1px dashed var(--line-strong); border-radius:var(--r-md); font-size:14px; line-height:1.5; color:var(--muted-2); }
.a-source b{ color:var(--muted); font-weight:var(--fw-semibold); }

/* 6.10 Мелкие акценты внутри текста ────────────────────────────────────── */
.a-num{ font-weight: var(--fw-bold); color: var(--gold-bright); font-variant-numeric: tabular-nums; white-space: nowrap; }
.a-key{ font-weight: var(--fw-bold); color: var(--heading); }
.a-tag{ display:inline-flex; align-items:center; padding:3px 10px; border:1px solid var(--line); border-radius:999px; background:var(--glass); font-size:12px; font-weight:var(--fw-semibold); letter-spacing:.02em; color:var(--muted); }
.a-big{ display:block; margin-bottom:6px; font-family:var(--font-display); font-weight:var(--fw-black); font-size:clamp(24px,2.4vw,30px); line-height:1.1; color:var(--gold-bright); }
.a-where{ display:block; margin-top:8px; font-size:14px; line-height:1.5; color:var(--muted-2); }

/* форма сбора почты внутри статьи */
.a-form{ display:flex; flex-wrap:wrap; gap:10px; max-width:none; margin-top:12px; }
.a-form__input{ flex:1 1 240px; min-width:0; padding:12px 18px; border:1px solid var(--line-strong); border-radius:999px; background:rgba(255,255,255,.05); color:var(--text); font:inherit; font-size:16px; outline:none; }
.a-form__input::placeholder{ color:var(--muted-2); }
.a-form__input:focus{ border-color:var(--gold); }

/* ── 7. Оглавление. Разметку целиком строит article.js из h2. ───────────── */

.fpa__toc{ position:sticky; top:calc(var(--nav-h, 64px) + 22px); align-self:start; max-height:calc(100vh - var(--nav-h, 64px) - 44px); overflow:auto; overscroll-behavior:contain; scrollbar-width:thin; }
.fpa__toc-h{ margin-bottom:12px; font-size:12px; font-weight:var(--fw-bold); letter-spacing:.14em; text-transform:uppercase; color:var(--muted-2); }
.fpa__toc ol{ margin:0; padding:0; list-style:none; }
.fpa__toc li + li{ margin-top:2px; }
.fpa__toc a{ display:block; padding:7px 12px; border-left:2px solid transparent; border-radius:0 8px 8px 0; font-size:14px; line-height:1.35; color:var(--muted-2); text-decoration:none; transition:color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); }
.fpa__toc a:hover{ color:var(--text); background:rgba(255,255,255,.04); }
.fpa__toc a[aria-current="true"]{ color:var(--gold-bright); border-left-color:var(--gold); background:color-mix(in srgb, var(--gold) 8%, transparent); }
.fpa__toc summary{ display:none; }

/* ── 8. Подвал статьи: «читай дальше» ───────────────────────────────────── */

.fpa__foot{ margin-top:clamp(48px,6vw,76px); padding-top:28px; border-top:1px solid var(--line); }
.fpa__foot-h{ margin-bottom:16px; font-size:12px; font-weight:var(--fw-bold); letter-spacing:.12em; text-transform:uppercase; color:var(--muted-2); }
.a-next{ display:grid; grid-template-columns:repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap:12px; }
.a-next a{ display:block; padding:16px 18px; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--glass); color:var(--heading); font-weight:var(--fw-semibold); font-size:16px; line-height:1.4; text-decoration:none; transition:border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.a-next a:hover{ border-color:var(--line-strong); transform:translateY(-1px); }
.a-next span{ display:block; margin-top:6px; font-weight:var(--fw-regular); font-size:14px; color:var(--muted-2); }

/* ── 9. Адаптив. Одна точка перелома. ───────────────────────────────────── */

@media (max-width: 1080px){
  .fpa{ grid-template-columns:minmax(0,1fr); grid-template-areas:"head" "toc" "body" "foot"; }
  .fpa__toc{ position:static; max-height:none; overflow:visible; margin-top:26px; border:1px solid var(--line); border-radius:var(--r-md); background:var(--glass); }
  .fpa__toc-h{ display:none; }
  .fpa__toc summary{ display:block; padding:14px 18px; cursor:pointer; list-style:none; font-size:12px; font-weight:var(--fw-bold); letter-spacing:.12em; text-transform:uppercase; color:var(--muted-2); }
  .fpa__toc summary::-webkit-details-marker{ display:none; }
  .fpa__toc details[open] summary{ border-bottom:1px solid var(--line); }
  .fpa__toc ol{ padding:8px; }
  .fpa__toc a[aria-current="true"]{ background:transparent; }
}
@media (max-width: 640px){
  .fpa{ font-size:18px; --fpa-flow:20px; }
  .fpa__body > h2{ margin-top:40px; }
  .a-steps > li{ padding:14px 16px 14px 54px; }
  .a-cta{ padding:18px; }
}

/* ── 10. Печать и доступность ───────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce){ .fpa *{ transition:none !important; } }
.fpa :where(a, summary):focus-visible{ outline:2px solid var(--gold); outline-offset:3px; border-radius:4px; }
@media print{
  .fpa{ grid-template-columns:1fr; grid-template-areas:"head" "body" "foot"; }
  .fpa__toc{ display:none; }
}

/* ── 11. Широкий вариант полосы: страницы-списки (база знаний) ───────────
   Та же полоса и те же поля, что у статьи и шапки, но без колонки
   оглавления — одна колонка во всю ширину.                                */

.fpa--wide{
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "head" "body" "foot";
}
.fpa--wide .fpa__body{ max-width: none; }
.fpa--wide .fpa__body > :where(p, ul, ol, h2, h3, h4, blockquote){ max-width: var(--fpa-measure); } /* только широкий макет без оглавления: там колонка шире меры */
.fpa--wide .fpa__toc{ display: none; }

/* карточки статей в списке */
.a-list{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 14px;
  max-width: none;
}
.a-list a{
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px 24px;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--glass);
  color: var(--text);
  text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.a-list a:hover{ border-color: var(--line-strong); transform: translateY(-2px); }
.a-list__tag{
  font-size: 12px;
  font-weight: var(--fw-bold);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold);
}
.a-list__t{
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 20px;
  line-height: 1.22;
  letter-spacing: -.01em;
  color: var(--heading);
}
.a-list__d{ font-size: 16px; line-height: 1.5; color: var(--muted); }
.a-list__m{ margin-top: auto; padding-top: 6px; font-size: 14px; color: var(--muted-2); }

/* Горизонталь. Статья подключает только styles.css + chrome.css + этот файл,
   без kit.css и polish.css — а подрезают горизонталь именно они, правилом
   `html,body{overflow-x:clip}`. В chrome.css оно стоит только на html, поэтому
   на статьях закрытое мобильное меню (.fp-top__menu уходит за правый край
   на 10px) давало горизонтальную прокрутку на всех ширинах.
   Повторяем то же правило для body, а не прячем симптом у самого меню.
   Таблицы при этом продолжают прокручиваться внутри .a-scroll — там свой
   overflow-x:auto, он не затрагивается. */
body{overflow-x:clip}