/* ==========================================================================
   nowthis.ru - Оксана Присяжная
   Один файл. Ноль зависимостей. Ноль внешних запросов.

   Палитра «Оттиск»: отдельных серых цветов НЕТ ни одного.
   Все полутона - чернила с прозрачностью через color-mix.
   Правило с зубами: ниже 62 % - только линии, никогда текст.
   ========================================================================== */

/* ---------------------------------------------------------------- шрифты */
/* Своих шрифтов нет. Системные гарнитуры устройства: на телефоне и маке
   SF Pro, на винде Segoe UI. Ноль загрузки, ноль мигания текста.
   Файлы woff2 с сервера можно удалить, это минус 177 КБ. */

/* ---------------------------------------------------------------- токены */

:root {
  color-scheme: light dark;

  /* Бумага и чернила. Больше базовых цветов нет. */
  --paper: light-dark(#FAFAF8, #0F0F0E);
  --ink:   light-dark(#0E0E0D, #F0EFEA);
  --acc:   light-dark(#8E2F22, #E8734F);

  /* Полутона = чернила с прозрачностью. Отдельных серых не существует. */
  --i92: color-mix(in oklab, var(--ink) 92%, var(--paper));  /* заголовки       15.4:1 */
  --i72: color-mix(in oklab, var(--ink) 72%, var(--paper));  /* мелкий текст     7.7:1 */
  --i62: color-mix(in oklab, var(--ink) 62%, var(--paper));  /* минимум текста   5.3:1 */
  --i38: color-mix(in oklab, var(--ink) 38%, var(--paper));  /* ТОЛЬКО линии          */
  --i20: color-mix(in oklab, var(--ink) 20%, var(--paper));  /* линии                 */
  --i12: color-mix(in oklab, var(--ink) 12%, var(--paper));  /* волосяные, ::target   */
  --i07: color-mix(in oklab, var(--ink)  7%, var(--paper));  /* заливка строки        */

  /* Гарнитуры */
  /* Системные гарнитуры: на айфоне SF Pro, на маке SF Pro, на винде Segoe.
     Ноль загрузки, ноль ожидания, ровно так же сделано у sive.rs.
     Вернуть Literata и Golos - заменить эти три строки обратно. */
  --serif: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Display", "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif;
  --sans:  -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif;
  --mono:  ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* Шкала кеглей - 10 ступеней, ничего вне её */
  --t0: .75rem;    --t1: .8125rem;  --t2: .875rem;  --t3: 1rem;      --t4: 1.125rem;
  --t5: 1.375rem;  --t6: 1.75rem;   --t7: 2.25rem;  --t8: 3rem;      --t9: 4.5rem;

  /* Шкала отступов - 10 ступеней */
  --s0: .25rem; --s1: .5rem; --s2: .75rem; --s3: 1rem; --s4: 1.5rem;
  --s5: 2rem;   --s6: 3rem;  --s7: 4rem;   --s8: 6rem; --s9: 8rem;

  /* Сетка */
  --measure: 34rem;   /* колонка текста */
  --numcol:  5rem;    /* поле номеров и меток слева */
  --notecol: 13rem;   /* поле маргиналий справа */
  --gap:     2rem;
  --pad:     clamp(1.25rem, 7vw, 9rem);

  --fast: 140ms;
}

/* ------------------------------------------------------------------ база */

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

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

body {
  margin: 0;
  padding: 0 var(--pad);
  max-width: 90rem;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t4);
  font-weight: 400;
  line-height: 1.6;
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  hanging-punctuation: first last;
  text-wrap: pretty;
}

/* Табличные цифры - везде, где есть числа. Одна строка, которая
   превращает список в документ. */
time, .num, .mono, table, .stat { font-variant-numeric: tabular-nums; }

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

/* ----------------------------------------------------------------- сетка */
/* ≥64rem: [метки 5rem] [текст 34rem] [маргиналии 13rem]
   Контент прижат влево, воздух справа. Не по центру. */

.row {
  display: grid;
  grid-template-columns: var(--numcol) minmax(0, var(--measure)) minmax(0, var(--notecol));
  column-gap: var(--gap);
  align-items: start;
}
.row > .label { grid-column: 1; }
.row > *      { grid-column: 2; }
.row > .note  { grid-column: 3; }

@media (max-width: 64rem) {
  .row { grid-template-columns: minmax(0, var(--measure)); }
  .row > *, .row > .label, .row > .note { grid-column: 1; }
}

.block { margin: 0 0 var(--s7); }
.block:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------- типографика */

h1, h2, h3 { font-family: var(--serif); font-weight: 600; margin: 0; text-wrap: balance; }

/* Имя - общий элемент перехода между страницами */
.row > .name { grid-column: 2 / -1; }
@media (max-width: 64rem) { .row > .name { grid-column: 1; } }

.name {
  font-size: clamp(2.125rem, 9vw, var(--t9));
  line-height: 1.02;
  letter-spacing: -.022em;
  margin: 0 0 var(--s6);
  view-transition-name: name;
}

.lede {
  font-family: var(--serif);
  font-size: var(--t5);
  line-height: 1.4;
  letter-spacing: -.008em;
  margin: 0 0 var(--s4);
}

p { margin: 0 0 var(--s3); }
p:last-child { margin-bottom: 0; }

.quiet { color: var(--i72); }

/* Метка блока - моноширинная, в левом поле на широких экранах */
.label {
  font-family: var(--mono);
  font-size: var(--t0);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--i72);
  margin: .45rem 0 var(--s2);
  padding: 0;
}
@media (max-width: 64rem) { .label { margin-bottom: var(--s3); } }

/* Маргиналия - даты, сноски, «проверено» */
.note {
  font-family: var(--mono);
  font-size: var(--t0);
  line-height: 1.5;
  color: var(--i72);
  margin: .5rem 0 0;
}

/* ---------------------------------------------------------------- ссылки */

a { color: inherit; }

/* 2. Подчёркивание прорастает от начала слова, а не появляется целиком */
.link {
  position: relative;
  color: var(--acc);
  text-decoration: none;
  padding-bottom: 1px;
}
.link::after {
  content: "";
  position: absolute;
  inset-inline: 0 auto;
  bottom: 0;
  width: 0;
  height: 1px;
  background: currentColor;
  transition: width var(--fast) ease-out;
}
.link:hover::after,
.link:focus-visible::after { width: 100%; }

/* Действие - строка, а не кнопка магазина. 44px по высоте. */
.action {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--sans);
  font-size: var(--t3);
  font-weight: 500;
  color: var(--acc);
  text-decoration: none;
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  position: relative;
}
.action::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: calc(50% - .95em);
  height: 1px;
  background: var(--i20);
  transition: background var(--fast) ease-out;
}
.action:hover::after, .action:focus-visible::after { background: var(--acc); }

/* 4. Фокус, набранный вместе со всем остальным. Не системное кольцо. */
:focus-visible {
  outline: 2px solid var(--acc);
  outline-offset: 3px;
  border-radius: 1px;
}

/* Ссылка «пропустить к содержанию» */
.skip {
  position: absolute;
  left: -9999px;
  background: var(--paper);
  color: var(--acc);
  padding: var(--s2) var(--s3);
  z-index: 10;
}
.skip:focus { left: var(--pad); top: var(--s2); }

/* -------------------------------------------------------------- заголовок */

.top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s2) var(--s5);
  flex-wrap: wrap;
  padding: var(--s5) 0 var(--s7);
}
/* Название сайта слева в шапке, как «Simon Willison's Weblog» */
.vyveska {
  font-family: var(--serif);
  font-size: var(--t5);
  font-weight: 650;
  letter-spacing: -.02em;
  line-height: 1.15;
  color: var(--ink);
  text-decoration: none;
  border: 0;
  min-height: 0;
}
.vyveska:hover { color: var(--acc); }
.top nav { display: flex; align-items: baseline; gap: var(--s4); flex-wrap: wrap; }
.top a {
  font-family: var(--mono);
  font-size: var(--t1);
  color: var(--i72);
  text-decoration: none;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  border-bottom: 1px solid transparent;
  transition: color var(--fast) ease-out, border-color var(--fast) ease-out;
}
.top a:hover, .top a:focus-visible { color: var(--ink); border-bottom-color: var(--acc); }
.top a[aria-current] { color: var(--ink); }

main { padding-bottom: var(--s9); }

/* --------------------------------------------------------------- записи */

.list { list-style: none; margin: 0; padding: 0; }

.list li { border-top: 1px solid var(--i12); }
.list li:last-child { border-bottom: 1px solid var(--i12); }

/* 3. Строка подсвечивается целиком, а не текст меняет цвет */
.list a {
  display: grid;
  grid-template-columns: 7.5rem 1fr;
  gap: var(--gap);
  align-items: baseline;
  padding: var(--s3) var(--s2) var(--s3) 0;
  text-decoration: none;
  transition: background var(--fast) ease-out;
}
.list a:hover, .list a:focus-visible { background: var(--i07); }
.list time { font-family: var(--mono); font-size: var(--t0); color: var(--i72); }

/* Тема записи. Право - основной кластер, остальное явно помечено.
   Пропорция: право ≥70 %, нейросети ≤20 %, личное ≤10 %. */
.list .tema {
  display: block;
  font-family: var(--mono);
  font-size: var(--t0);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--i62);
  margin-top: .2rem;
}
.list .tema[data-t="нейросети"] { color: var(--acc); }
.list .tema[data-t="личное"]    { color: var(--i62); font-style: italic; }
.list .ttl { font-family: var(--serif); font-size: var(--t4); line-height: 1.3; }
.list a:hover .ttl { color: var(--acc); }

@media (max-width: 34rem) {
  .list a { grid-template-columns: 1fr; gap: var(--s0); }
  body { font-size: var(--t3); }
  .lede { font-size: var(--t4); }
  .name { margin-bottom: var(--s5); }
}

/* ----------------------------------------------------------------- текст */

.prose { font-family: var(--serif); font-size: var(--t4); line-height: 1.7; }
.prose p { margin: 0 0 var(--s4); }
.prose h2 {
  font-family: var(--sans); font-size: var(--t3); font-weight: 650;
  margin: var(--s6) 0 var(--s2);
}
.prose a { color: var(--acc); text-underline-offset: .18em; text-decoration-thickness: 1px; }
.prose ul, .prose ol { margin: 0 0 var(--s4); padding-left: 1.2rem; }
.prose li { margin-bottom: var(--s1); }
.prose li::marker { color: var(--i62); }

/* 6. Подсветка абзаца при переходе по глубокой ссылке.
   Ваш сценарий: ссылка вместо повторения - она должна приземляться видимо. */
::target-text { background: var(--i12); }

/* ----------------------------------------------------------------- фото */

.portrait {
  display: block;
  width: min(100%, 22rem);
  height: auto;
  margin: 0 0 var(--s5);
}

/* -------------------------------------------------- согласие и контакты */
/* Формы на сайте нет. Персональные данные человек называет в переписке,
   а не в поле на странице. Схема: галочка -> открывает кнопки -> мессенджер. */

.consent-check {
  display: flex; align-items: flex-start; gap: .8rem;
  cursor: pointer; max-width: 44ch; padding: .5rem 0; user-select: none;
}
.consent-check input { flex: none; width: 24px; height: 24px; margin: 0; cursor: pointer; accent-color: var(--acc); }
.consent-check span { font-size: var(--t2); line-height: 1.5; color: var(--i72); }
.consent-check a { color: var(--acc); text-underline-offset: .18em; }

.consent-hint { margin-top: .7rem; font-size: var(--t2); max-width: 40ch; color: var(--i72); }
.consent-hint[hidden] { display: none; }
.consent-hint.is-alert { font-weight: 600; color: var(--acc); }
.consent-hint.is-alert::before { content: "! "; }

.acts { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s3); margin-top: var(--s4); }

/* Заблокированное состояние ставит только скрипт.
   pointer-events не гасим: клик обязан дойти до обработчика. */
#contactBtns[data-locked="true"] .contact-link { opacity: .45; }

@media print { .consent-check, .consent-hint { display: none; } }

/* ----------------------------------------------------------------- форма */

.form { max-width: 26rem; }

.field { margin: 0 0 var(--s3); }
.field label {
  display: block;
  font-family: var(--mono);
  font-size: var(--t0);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--i72);
  margin: 0 0 var(--s1);
}
.field input,
.field textarea {
  width: 100%;
  min-height: 44px;
  padding: .6rem .7rem;
  font: inherit;
  font-size: var(--t3);
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--i38);
  border-radius: 0;
  transition: border-color var(--fast) ease-out;
}
.field textarea { field-sizing: content; min-height: 4.5rem; resize: vertical; line-height: 1.5; }
.field input:hover, .field textarea:hover { border-color: var(--i62); }
.field input:focus-visible, .field textarea:focus-visible { border-color: var(--acc); outline-offset: 1px; }
.field input:user-invalid, .field textarea:user-invalid { border-color: var(--acc); }

.vh {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

::placeholder { color: var(--i62); opacity: 1; }

.hint { font-size: var(--t2); color: var(--i72); margin: calc(var(--s1) * -1) 0 var(--s4); }

.consent {
  display: flex;
  gap: var(--s2);
  align-items: flex-start;
  font-size: var(--t2);
  line-height: 1.5;
  color: var(--i72);
  margin: 0 0 var(--s4);
  cursor: pointer;
}
.consent input { margin: .3rem 0 0; accent-color: var(--acc); flex: none; width: 1rem; height: 1rem; }

.err { display: block; font-size: var(--t2); color: var(--acc); margin: 0 0 var(--s3); }
.err:empty { display: none; }

/* Подписка - одна строка */
.sub { display: flex; gap: var(--s2); flex-wrap: wrap; align-items: flex-end; max-width: 26rem; }
.sub .field { flex: 1 1 14rem; margin: 0; }

/* --------------------------------------------------------------- подвал */

.foot {
  border-top: 1px solid var(--i20);
  padding: var(--s5) 0 var(--s7);
  font-size: var(--t2);
  color: var(--i72);
  line-height: 1.7;
}
.foot p { margin: 0 0 var(--s3); }
.foot a {
  color: var(--i72);
  text-decoration: underline;
  text-decoration-color: var(--i20);
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
  transition: color var(--fast) ease-out, text-decoration-color var(--fast) ease-out;
}
.foot a:hover, .foot a:focus-visible { color: var(--acc); text-decoration-color: var(--acc); }
.foot .req { font-family: var(--mono); font-size: var(--t0); color: var(--i62); }
.foot .projects { display: flex; flex-wrap: wrap; gap: 0 var(--s3); font-family: var(--mono); font-size: var(--t0); }
.foot .projects a { display: inline-flex; align-items: center; min-height: 44px; }

/* Ссылка, стоящая отдельной строкой, а не внутри предложения */
.contacts a { display: inline-flex; align-items: center; min-height: 44px; }

/* ============================================================ интерактив */

/* 1. Имя переезжает между страницами. Cross-document view transitions.
   Chrome с середины 2024, Safari с конца 2024, Firefox частично с начала 2026.
   Где не поддержано - обычный переход, ничего не ломается. */
@view-transition { navigation: auto; }

::view-transition-old(root),
::view-transition-new(root) { animation-duration: 180ms; }

/* 7. Волосяные линии прочерчиваются при входе в кадр.
   Scroll-driven animations: Chrome/Edge полностью, Safari частично,
   Firefox в разработке. Где нет - линия просто стоит на месте. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .rule {
      border: 0;
      height: 1px;
      background: var(--i20);
      margin: var(--s6) 0;
      transform-origin: left center;
      animation: draw linear both;
      animation-timeline: view();
      animation-range: entry 10% entry 60%;
    }
    @keyframes draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  }
}
.rule { border: 0; height: 1px; background: var(--i20); margin: var(--s6) 0; }

/* 5. Одно появление на весь сайт - подтверждение отправки.
   Больше нигде и никогда ничего не появляется. */
.appear { opacity: 1; transition: opacity 200ms ease-out; }
@starting-style { .appear { opacity: 0; } }

/* Выключает всё */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  @view-transition { navigation: none; }
}

/* ----------------------------------------------------------------- печать */

@media print {
  body { padding: 0; font-size: 11pt; color: #000; background: #fff; }
  .top, .skip, .form, .sub, .action { display: none; }
  .row { display: block; }
  a::after { content: " (" attr(href) ")"; font-size: 9pt; }
}

/* ==========================================================================
   ТЕМА: переключатель
   По умолчанию сайт следует настройке системы. Кнопка ставит data-tema
   на <html> и фиксирует color-scheme, после чего все light-dark()
   пересчитываются сами. Ни один токен не дублируется.
   ========================================================================== */

[data-tema="light"] { color-scheme: light; }
[data-tema="dark"]  { color-scheme: dark;  }

/* Тёмная тема: не чёрная, а тёмно-синяя, как на simonwillison.net.
   Чистый чёрный читается как выключенный экран. Акцент в тёмной уведён
   в винный, а не в оранжевый. Светлая тема не меняется: бумага #FAFAF8,
   акцент бордо #8E2F22. */
:root {
  --paper: light-dark(#FAFAF8, #1C1C2A);
  --ink:   light-dark(#0E0E0D, #E9E9F0);
  --acc:   light-dark(#8E2F22, #D9787E);
}

.tema-knopka {
  appearance: none;
  background: none;
  border: 0;
  border-bottom: 1px solid transparent;
  padding: 0 0 .15em;
  margin: 0;
  font: inherit;
  color: var(--i62);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .5em;
  transition: color var(--fast);
}
.tema-knopka::before {
  content: "";
  width: .7em;
  height: .7em;
  border-radius: 50%;
  border: 1px solid currentColor;
  background: linear-gradient(90deg, currentColor 50%, transparent 50%);
}
.tema-knopka[data-sost="dark"]::before  { background: currentColor; }
.tema-knopka[data-sost="light"]::before { background: transparent; }
.tema-knopka:hover, .tema-knopka:focus-visible { color: var(--ink); border-bottom-color: var(--acc); }

/* Секция «Записи» на главной прячется целиком, пока нет ни одной записи.
   Пустой блок читается как заброшенный сайт, а условной вёрстки
   в статике нет. Появляется сама, как только new.py вставит первый <li>. */
/* «Весь архив» показываем только когда записи есть, а строку
   «первая запись скоро» - наоборот. Оба правила смотрят на список. */
main:not(:has(.list li)) .spisok { display: none; }

/* -------------------------------------------------- боковая колонка справа */
/* Последние записи справа, как Highlights на simonwillison.net.
   Прячется целиком, пока записей нет. */
.zametki { grid-column: 3; grid-row: 1; }   /* та же строка сетки, что и текст */
.zametki:not(:has(li)) { display: none; }
.zametki h2 {
  font-family: var(--mono);
  font-size: var(--t0);
  font-weight: 500;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--i62);
  margin: 0 0 var(--s3);
}
.zametki ul { list-style: none; margin: 0; padding: 0; }
.zametki li + li { margin-top: var(--s3); }
.zametki a {
  font-size: var(--t2);
  line-height: 1.35;
  color: var(--i92);
  text-decoration: none;
  border-bottom: 1px solid var(--i20);
}
.zametki a:hover { color: var(--acc); border-bottom-color: var(--acc); }
.zametki time,
.zametki li > span { display: block; font-family: var(--mono); font-size: var(--t0);
  color: var(--i62); margin-top: .2rem; }
@media (max-width: 64rem) {
  .zametki { grid-column: 1; grid-row: auto; margin-top: var(--s6); }
}

/* ------------------------------------------------------------- подписка */
/* Форма одна на весь сайт. Кнопка заперта, пока не отмечено согласие:
   та же логика, что в блоке связи. Разметка и цвета свои, не сервиса,
   поэтому форма не выбивается из типографики. */
.podpiska { margin-top: var(--s4); max-width: 26rem; }
.podpiska .field { margin-bottom: var(--s3); }
.knopka {
  appearance: none;
  font: inherit;
  font-family: var(--sans);
  font-size: var(--t2);
  line-height: 1;
  color: var(--paper);
  background: var(--acc);
  border: 1px solid var(--acc);
  border-radius: 2px;
  padding: .85rem 1.4rem;
  min-height: 44px;
  cursor: pointer;
  margin-top: var(--s3);
  transition: opacity var(--fast), background var(--fast);
}
.knopka:hover { opacity: .88; }
.knopka:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
.podpiska[data-locked="true"] .knopka { opacity: .45; }
/* Поле-ловушка для ботов. Уводим за край экрана, а не прячем display:none:
   часть ботов пропускает скрытые поля, а уехавшее за край - заполняет.
   Из обхода табом поле выключено атрибутом tabindex="-1" в разметке. */
.lovushka { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

#pHint { margin-top: var(--s2); }
#pHint.is-alert { color: var(--acc); }

/* Строка «первая запись скоро» видна только пока записей нет */
.pusto { display: none; }
main:not(:has(.list li)) .pusto { display: block; }

/* Подписка показывается всегда, в том числе на пустом сайте.
   Раньше блок прятался, пока не наберётся три записи: считалось, что просить
   почту раньше первого текста - тяжёлая просьба. Но пустое состояние само
   зовёт подписаться, и пункт «Подписка» стоит в шапке, - обе ссылки вели
   в скрытый блок и не делали ничего. Собирать адреса до первой записи и есть
   сегодняшняя задача сайта, поэтому порог снят (31.07.2026).
   Вернуть прежнее поведение - раскомментировать две строки ниже. */
/* main:not(:has(.list li:nth-child(3))) #podpiska,
   main:not(:has(.list li:nth-child(3))) .rule:has(+ #podpiska) { display: none; } */

/* ------------------------------------------------------- контраст текста */
/* Основной текст и так на максимуме (18.5 к бумаге), его не трогаем.
   Поднимаем мелкий моноширинный с 6.41 до 9.04: двенадцать пикселей
   при 6.41 читаются вяло. Линии не трогаем, они и должны быть бледными. */
.quiet,
.list time,
.consent-check span,
.consent-hint,
.hint,
.field label    { color: var(--i72); }
.zametki h2,
.zametki li > span,
.foot .req,
.label,
.req,
.note           { color: var(--i72); }
::placeholder   { color: var(--i62); opacity: 1; }

/* ------------------------------------------- тёмная тема: ярче полутона */
/* На тёмной бумаге те же проценты смеси дают более вялый результат,
   чем на светлой: глаз иначе воспринимает светлое на тёмном.
   Поэтому в тёмной теме чернила ярче, а полутона подтянуты.
   Два селектора: один для системной тёмной, второй для выбранной кнопкой. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="light"]) {
    --ink: #F7F7FC;
    --i92: color-mix(in oklab, var(--ink) 97%, var(--paper));
    --i72: color-mix(in oklab, var(--ink) 86%, var(--paper));
    --i62: color-mix(in oklab, var(--ink) 78%, var(--paper));
  }
}
:root[data-tema="dark"] {
  --ink: #F7F7FC;
  --i92: color-mix(in oklab, var(--ink) 97%, var(--paper));
  --i72: color-mix(in oklab, var(--ink) 86%, var(--paper));
  --i62: color-mix(in oklab, var(--ink) 78%, var(--paper));
}

.spasibo { margin-top: var(--s4); max-width: 30ch; }
.spasibo::before { content: "✓"; color: var(--acc); margin-right: .5em; font-weight: 600; }


/* ─────────────────────────── Уведомление о cookie
   Метрика не грузится, пока не нажали «Принять». Полоса снизу, поверх всего,
   с отступом под системную панель телефона. Цвета - те же две краски сайта. */
.cookie{position:fixed;inset-inline:0;inset-block-end:0;z-index:80;
  padding:var(--s4) var(--pad) calc(var(--s4) + env(safe-area-inset-bottom,0px));
  background:var(--paper);border-block-start:1px solid var(--i20);
  box-shadow:0 -12px 40px -24px rgb(0 0 0/.45)}
.cookie[hidden]{display:none}
.cookie__box{max-inline-size:64rem;margin-inline:auto;
  display:grid;gap:var(--s2) var(--s5);grid-template-columns:1fr auto;align-items:center}
.cookie__t{grid-column:1;grid-row:1;font-family:var(--sans);color:var(--i92);margin:0}
.cookie__p{grid-column:1;grid-row:2;font-size:var(--t2);color:var(--i72);
  max-inline-size:62ch;margin:0}
.cookie__p a{color:var(--acc)}
.cookie__row{grid-column:2;grid-row:1/3;display:flex;flex-wrap:wrap;gap:var(--s2)}
.cookie__row .knopka{margin:0}
.cookie__row .knopka--tihaya{background:transparent;color:var(--i72);border-color:var(--i38)}
@media (max-width:640px){
  .cookie__box{grid-template-columns:1fr}
  .cookie__t,.cookie__p,.cookie__row{grid-column:1}
  .cookie__row{grid-row:auto}
}
@media print{.cookie{display:none}}

/* ================= ЗАГОЛОВОК ЗАМЕТКИ =================
   Заметка - не статья, поэтому заголовок скромный: 1.375rem против
   .name с его 2.125-4.5rem. Но крупнее текста под ним (1.125rem),
   иначе иерархия переворачивается и заголовок читается как метка.

   Гарнитура текстовая, а не моноширинная: машинка на этом сайте -
   служебный слой (метки, даты, реквизиты), и заголовок к нему
   не относится. Он относится к тексту, который называет.

   Тег остаётся h1 - для поиска важен тег и текст, а не кегль. */
.zametka-zag {
  font-family: var(--serif);
  font-size: var(--t5);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.012em;
  text-wrap: balance;
  max-width: 30ch;
  margin: 0 0 var(--s4);
}
/* Одна служебная строка над заголовком вместо четырёх: серия и дата вместе. */
.zametka-sluzhebnaya {
  font-family: var(--mono);
  font-size: var(--t0);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--i62);
  margin: 0 0 var(--s2);
}

/* Однострочная суть под заголовком в списке рубрики. Человек понимает,
   о чём запись, не открывая её; поисковик видит осмысленный анонс,
   а не голый список ссылок - это и отличает раздел от россыпи.

   grid-column: 2 обязателен. Ссылка - сетка из двух колонок (дата и текст),
   а описание у неё третий ребёнок: без указания колонки оно падает
   в начало следующей строки, то есть под дату, в узкие 7.5rem. */
.list .sut {
  grid-column: 2;
  display: block;
  margin-top: .3rem;
  font-size: var(--t2);
  line-height: 1.45;
  color: var(--i72);
  max-width: 44ch;
}

/* Хлебные крошки. Моноширинные, как весь служебный слой. Разделитель
   рисуется псевдоэлементом, а не символом в разметке: скринридер
   не должен читать «слэш» между пунктами. */
.crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem .5rem;
  list-style: none;
  margin: 0 0 var(--s3);
  padding: 0;
  font-family: var(--mono);
  font-size: var(--t0);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--i62);
}
.crumbs li + li::before { content: "/"; margin-right: .5rem; color: var(--i38); }
.crumbs a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--i20); }
.crumbs a:hover { color: var(--acc); border-bottom-color: currentColor; }
.crumbs [aria-current="page"] { color: var(--i72); }

/* «Читайте также». Внутренние ссылки, подобранные по смыслу, а не по дате:
   короткая заметка в одиночку выглядит для поисковика малоценной, связанная
   с соседями - частью раздела. Единственную внешнюю ссылку последней строкой
   этот блок не заменяет, она остаётся выше. */
.chitayte-takzhe ul { list-style: none; margin: 0; padding: 0; }
.chitayte-takzhe li { margin-bottom: var(--s2); line-height: 1.45; }
.chitayte-takzhe li:last-child { margin-bottom: 0; }

/* Строка кода внутри заметки. Моноширинный - служебный слой сайта,
   команда к нему и относится. Скроллится внутри себя: на телефоне
   длинная строка не должна утаскивать вбок всю страницу. */
.prose .kod {
  margin: 0 0 var(--s4);
  padding: var(--s2) var(--s3);
  overflow-x: auto;
  background: var(--i07);
  border-left: 2px solid var(--i20);
  font-family: var(--mono);
  font-size: var(--t2);
  line-height: 1.5;
  white-space: pre;
}
.prose .kod code { font: inherit; }