/* ═══════════════════════════════════════════════════════════════
   ЗАПИСКИ: список, рубрика, статья.

   Ни одного своего цвета и ни одной своей гарнитуры: всё через
   токены из tokens.css и роли из base.css. Шапка, подвал, лист
   документа и подпись под ним приходят из общей библиотеки.

   Сетка статьи одна на весь раздел: пять колонок, из которых
   текст занимает среднюю, показ — широкую, а лист во всю ширину —
   крайние. Так проза не расползается, а материал не жмётся
   в колонку текста.
   ═══════════════════════════════════════════════════════════════ */

.art{display:grid;
  grid-template-columns:
    [full-start] minmax(var(--pad),1fr)
    [wide-start] minmax(0,190px)
    [text-start] minmax(0,72ch)
    [text-end] minmax(0,190px)
    [wide-end] minmax(var(--pad),1fr) [full-end];
  row-gap:0}
.art>*{grid-column:text}
.art>.w{grid-column:wide}

/* ── крошки ─────────────────────────────────────────────────── */
/* 🔴 Общее описание крошки живёт в pages.css — одно на весь сайт.
   Здесь только то, чем блог от него отличается: своя колонка в сетке. */
.crumbs{grid-column:full}
.crumbs i{font-style:normal;color:var(--fg3);opacity:.6}
.crumbs span:last-child{color:var(--fg)}

/* ── шапка статьи ───────────────────────────────────────────── */
.art__head{padding-top:var(--s5)}
.art__rub{display:inline-block;font-family:JBM,monospace;font-size:11px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--accent-text);border-bottom:var(--hair) solid currentColor;
  padding-bottom:3px}
.art h1{margin-top:var(--s3);font-size:clamp(30px,4.4vw,54px);line-height:1.02}
.art__sub{margin-top:var(--s4);font-size:19px;line-height:1.5;color:var(--fg2)}
.art__by{margin-top:var(--s4);padding-top:var(--s2);
  border-top:var(--hair) solid var(--rule);display:flex;flex-wrap:wrap;gap:var(--s3)}
.art__by p{font-family:JBM,monospace;font-size:11px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--fg3)}
.art__by b{color:var(--fg);font-weight:400}

/* ── проза ──────────────────────────────────────────────────── */
.p{font-size:17.5px;line-height:1.62;color:var(--fg2);margin-top:var(--s3)}
.p b{color:var(--fg);font-weight:600}
.p a{color:var(--fg);border-bottom:var(--hair) solid var(--accent)}
.p a:hover{color:var(--accent-text)}
.art h2{margin-top:var(--s7);font-size:clamp(24px,2.9vw,34px);line-height:1.06}
.art h3{margin-top:var(--s5);font-size:20px;line-height:1.15;letter-spacing:-.02em}
.art h2+.p,.art h3+.p{margin-top:var(--s3)}
.art .lead{font-size:21px;line-height:1.5;color:var(--fg);margin-top:var(--s4);
  border-left:2px solid var(--accent);padding-left:var(--s3)}
.li{margin-top:var(--s3);list-style:none;border-top:var(--hair) solid var(--rule)}
.li li{padding:12px 0 12px 30px;border-bottom:var(--hair) solid var(--rule);position:relative;
  font-size:17px;line-height:1.55;color:var(--fg2)}
.li li b{color:var(--fg);font-weight:600}
.li li::before{content:counter(li);counter-increment:li;position:absolute;left:0;top:14px;
  font-family:JBM,monospace;font-size:11px;letter-spacing:.1em;color:var(--accent-text)}
.li{counter-reset:li}
.li--plain li::before{content:"—";color:var(--fg3)}

/* таблица в тексте */
.tb{margin-top:var(--s4);width:100%;border-collapse:collapse;font-size:15.5px;
  font-variant-numeric:tabular-nums}
.tb th{font-family:JBM,monospace;font-weight:400;font-size:10.5px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--fg3);text-align:left;padding:0 14px 9px 0;
  border-bottom:var(--hair) solid var(--rule2)}
.tb td{padding:11px 14px 11px 0;border-bottom:var(--hair) solid var(--rule);color:var(--fg2);
  vertical-align:top;line-height:1.45}
.tb td:first-child{color:var(--fg);font-weight:600}
.tb caption{caption-side:bottom;margin-top:10px;text-align:left;font-family:JBM,monospace;
  font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--fg3);line-height:1.7}
.tbwrap{overflow-x:auto}

/* ── ПОКАЗ: лист внутри статьи ──────────────────────────────── */
.show{margin-top:var(--s7)}
.show__cap{display:flex;justify-content:space-between;gap:var(--s3);flex-wrap:wrap;
  padding-bottom:var(--s2);border-bottom:var(--hair) solid var(--rule2)}
.show__row{margin-top:var(--s4);display:flex;gap:var(--s5);align-items:flex-start;flex-wrap:wrap}
.show__note{margin-top:var(--s3);font-size:15px;line-height:1.55;color:var(--fg3);max-width:64ch}
.show__note b{color:var(--fg2);font-weight:600}

/* выноски поверх листа: единственное место, где в записках
   появляется скарлет — он метит наши пометки, а не чужой лист */
.bs{--s:var(--sd);flex:none;position:relative;
  width:calc(var(--w) * var(--s) * 1px);height:calc(var(--h) * var(--s) * 1px)}
.anat{position:relative}
  font-family:JBM,monospace;font-weight:600;font-size:11px;display:flex;align-items:center;
  justify-content:center;z-index:3;
  left:calc(var(--x) * var(--s) * 1px);top:calc(var(--y) * var(--s) * 1px)}
.legend{flex:1;min-width:270px;counter-reset:lg;list-style:none}
.legend li{display:grid;grid-template-columns:26px 1fr;gap:0 12px;padding:13px 0;
  border-bottom:var(--hair) solid var(--rule)}
.legend li:first-child{border-top:var(--hair) solid var(--rule2)}
.legend li::before{content:counter(lg);counter-increment:lg;font-family:JBM,monospace;
  font-size:11px;color:var(--accent-text);padding-top:4px}
.legend b{font-size:16px;font-weight:600;color:var(--fg);letter-spacing:-.01em}
.legend p{grid-column:2;margin-top:5px;font-size:15px;line-height:1.5;color:var(--fg2)}

/* два листа рядом: до и после, лист и лист */
.duo{margin-top:var(--s4);display:flex;gap:var(--s5);flex-wrap:wrap;align-items:flex-start}
.duo>div{flex:none}
.duo .u{display:block;margin-bottom:10px}

/* схема на SVG */
.svg{margin-top:var(--s4)}
.svg svg{width:100%;height:auto;display:block}
.svg text{font-family:JBM,monospace;letter-spacing:.09em;text-transform:uppercase}

/* ── названная слабость ─────────────────────────────────────── */
.wrong{margin-top:var(--s7);border:var(--hair) solid var(--rule2);padding:var(--s4)}
.wrong h3{margin-top:0;font-size:19px}
.wrong .p{color:var(--fg2)}

/* ── материал целиком ──────────────────────────────────────── */
.whole{margin-top:var(--s6);padding:var(--s4);background:var(--well)}
.whole .p{margin-top:0}
.whole__a{display:inline-block;margin-top:var(--s3);font-family:JBM,monospace;font-size:12px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--fg);
  border-bottom:2px solid var(--accent);padding-bottom:4px}
.whole__a:hover{color:var(--accent-text)}

/* ── что дальше: соседние записки ───────────────────────────── */
.near{margin-top:var(--s7);padding-top:var(--s3);border-top:var(--hair) solid var(--rule2)}
.near__l{margin-top:var(--s3);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--s4)}
.near__l a{display:block;border-top:2px solid var(--rule2);padding-top:12px}
.near__l a:hover{border-color:var(--accent)}
.near__l b{display:block;font-family:Unbounded,sans-serif;font-weight:600;font-size:16px;
  line-height:1.15;letter-spacing:-.025em;color:var(--fg)}
.near__l span{display:block;margin-top:9px;font-size:14px;line-height:1.5;color:var(--fg3)}

/* ── СПИСОК И РУБРИКА ───────────────────────────────────────── */
.list{padding:0 var(--pad) var(--s7)}
.list h1{margin-top:var(--s4);font-size:clamp(32px,5vw,64px);line-height:.98;max-width:18ch}
.list__lead{margin-top:var(--s4);font-size:19px;line-height:1.55;color:var(--fg2);max-width:70ch}
.rubs{margin-top:var(--s5);padding-top:var(--s3);border-top:var(--hair) solid var(--rule2);
  display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4)}
.rubs a,.rubs span{font-family:JBM,monospace;font-size:12px;letter-spacing:.12em;
  text-transform:uppercase}
.rubs a{color:var(--fg);border-bottom:2px solid var(--accent);padding-bottom:3px}
.rubs span{color:var(--fg3)}
.rubs em{font-style:normal;opacity:.7}

.cards{margin-top:var(--s6);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--s6) var(--s5)}
.card2{display:block;border-top:2px solid var(--rule2);padding-top:var(--s3)}
.card2:hover{border-color:var(--accent)}
.card2--lead{grid-column:1 / -1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:var(--s5);align-items:start}
.card2__ph{background:var(--well);padding:var(--s4);display:flex;justify-content:center;
  overflow:hidden}
.card2__b{padding-top:2px}
.card2 h2,.card2 h3{margin-top:12px;font-size:23px;line-height:1.08;letter-spacing:-.03em;
  color:var(--fg)}
.card2--lead h2{font-size:clamp(26px,3.2vw,38px);line-height:1.02}
.card2__d{margin-top:12px;font-size:16px;line-height:1.5;color:var(--fg2)}
.card2__show{margin-top:14px;padding-top:10px;border-top:var(--hair) solid var(--rule);
  font-family:JBM,monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent-text)}
.count{margin-top:var(--s5);font-family:JBM,monospace;font-size:11px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--fg3)}

/* выноска на телефоне мельче: поле листа там уже 16 px */

/* ── телефон ────────────────────────────────────────────────── */
@media (max-width:900px){
  .art{grid-template-columns:[full-start] var(--pad) [wide-start text-start] minmax(0,1fr)
    [text-end wide-end] var(--pad) [full-end]}
  .bs{--s:var(--sm)}
  /* 🔴 Разбор встаёт под лист, а не рядом с ним. На 390 px лист
     занимает почти всю ширину, разбор оставался сбоку и вылезал
     за экран на 84 px — страница начинала ездить вбок. */
  .show__row{gap:var(--s4);flex-direction:column}
  .legend{min-width:0;width:100%}
  .duo{flex-direction:column}
  .near__l{grid-template-columns:1fr;gap:var(--s3)}
  .cards{grid-template-columns:1fr;gap:var(--s5)}
  .card2--lead{grid-template-columns:1fr}
  .p{font-size:17px}
  .art h1{font-size:31px}
}

/* ── цитата с обязательной подписью ─────────────────────────── */
.q{margin-top:var(--s5);border-left:2px solid var(--rule2);padding-left:var(--s4)}
.q blockquote{font-family:Unbounded,sans-serif;font-weight:600;font-size:clamp(19px,2.3vw,26px);
  line-height:1.14;letter-spacing:-.03em;color:var(--fg);quotes:"\00ab" "\00bb"}
.q blockquote::before{content:open-quote}
.q blockquote::after{content:close-quote}
.q figcaption{margin-top:var(--s2)}