/* =============================================================================
   «Перепутье» — общий слой стилей. ЕДИНСТВЕННЫЙ источник токенов на весь сайт.

   Подключают обе половины сайта:
   · Next-страницы — <link> в src/app/layout.tsx (Tailwind в tailwind.config.ts
     ссылается на эти же переменные, своих значений цвета не держит);
   · статические виджеты — <link> в <head> каждого public/widgets/*.html.

   Раньше каждый виджет нёс свою копию :root, @font-face, body, шапки и подвала.
   Копии разошлись: на Next-страницах текст был серебром, в виджетах — костью,
   кегли разъехались на 27 значений, трекинг кикера — на 22. Больше копий нет:
   правка цвета, кегля или скругления делается здесь и одна на всех.

   Канон — бизнес/ассеты/brand-kit.md. При расхождении выигрывает бренд-кит.
============================================================================= */

/* --- Шрифты -----------------------------------------------------------------
   Заголовки — Old Standard TT (Алексей Крюков): возрождение русской наборной
   антиквы начала XX века, кириллица родная, а не досаженная. Текст — PT Serif.
   Обе гарнитуры лежат у нас, Google Fonts сайт не грузит.
--------------------------------------------------------------------------- */
@font-face{font-family:"Old Standard";src:url("/fonts/old-standard-cyrillic-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0400-04FF}
@font-face{font-family:"Old Standard";src:url("/fonts/old-standard-latin-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+2013-2014,U+2018-201F,U+2020-2022,U+2026,U+2039-203A}
@font-face{font-family:"Old Standard";src:url("/fonts/old-standard-cyrillic-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap;unicode-range:U+0400-04FF}
@font-face{font-family:"Old Standard";src:url("/fonts/old-standard-latin-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+2013-2014,U+2018-201F,U+2020-2022,U+2026,U+2039-203A}
@font-face{font-family:"Old Standard";src:url("/fonts/old-standard-cyrillic-400-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap;unicode-range:U+0400-04FF}
@font-face{font-family:"Old Standard";src:url("/fonts/old-standard-latin-400-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+2013-2014,U+2018-201F,U+2020-2022,U+2026,U+2039-203A}

@font-face{font-family:"PT Serif";src:url("/fonts/pt-serif-cyrillic-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0400-04FF}
@font-face{font-family:"PT Serif";src:url("/fonts/pt-serif-latin-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+2013-2014,U+2018-201F,U+2020-2022,U+2026,U+2039-203A}
@font-face{font-family:"PT Serif";src:url("/fonts/pt-serif-cyrillic-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap;unicode-range:U+0400-04FF}
@font-face{font-family:"PT Serif";src:url("/fonts/pt-serif-latin-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+2013-2014,U+2018-201F,U+2020-2022,U+2026,U+2039-203A}

:root{
  /* --- Цвет ---------------------------------------------------------------
     Четыре краски бренд-кита и ничего больше. Киноварь — ЕДИНСТВЕННЫЙ цветной
     тон на сайте, и он не бывает цветом текста: только заливка одного знака,
     волосяная линия или ромб на линейке. Осветлённой киновари (#E07A62) больше
     нет — осветление красного уводило его в терракоту, а терракота на тёплом
     нейтрале — чужая, узнаваемая пара, не наша.
     Текст на графите — серебро. Кость — бумага и знак, но не буквы.

     Служебный серый поднят с #6E757F до #868D98 (01.09.2026). Прежний давал
     на графите контраст 3,3 : 1 при норме 4,5 — а им набран весь тихий слой:
     подписи дверей на главной, ссылки разделов, подвал, кикеры и заметки
     виджетов. Тише основного текста он остался, пропадать на ноутбуке при
     дневном свете перестал.

     Бумага. Тёмная лавка выдаёт человеку на руки лист — приём родился в игре
     и оттуда же расползся семью необъявленными хексами. Теперь это токены, и
     светлая поверхность у сайта одна на всех.
  --------------------------------------------------------------------------- */
  --pp-graphite:#20232A;   /* фон страницы */
  --pp-surface:#262A32;    /* редкая поднятая поверхность */
  --pp-surface-2:#2C3039;  /* она же при наведении */
  --pp-line:#333842;       /* волосяная линия */
  --pp-line-2:#4A5059;     /* линия при наведении */
  --pp-silver:#C7CCD1;     /* основной текст */
  --pp-silver-dim:#99A0A8; /* второстепенный текст */
  --pp-dim:#868D98;        /* служебные подписи */
  --pp-bone:#E8E4D8;       /* бумага, знак, инверсия кнопки */
  --pp-cinnabar:#A33524;   /* одна тёплая нить. Дозированно */

  --pp-paper:#D9D4C7;      /* лист, выданный на руки */
  --pp-paper-hi:#E6E1D4;   /* верх листа, куда падает свет */
  --pp-paper-lo:#CFC9B9;   /* нижний край листа */
  --pp-paper-line:#B9B3A4; /* линия на бумаге */
  --pp-paper-line-2:#8A7F6B; /* она же при наведении, и кикер на бумаге */
  --pp-ink:#272A30;        /* буквы на бумаге */
  --pp-ink-2:#4A4740;      /* второй план на бумаге */
  --pp-ink-dim:#5C584F;    /* служебное на бумаге */
  --pp-sanguine:#8A5A2B;   /* киноварь, выцветшая на бумаге */

  /* --- Кегли --------------------------------------------------------------
     Одна шкала на весь сайт, шаг ≈1,26. Промежуточных и полупиксельных кеглей
     не бывает: если размер не из этого списка, он подобран на глаз.
  --------------------------------------------------------------------------- */
  --t-2xs:11px;           /* только плотные сетки и подписи внутри SVG */
  --t-xs:13px;
  --t-s:15px;
  --t-m:17px;
  --t-l:21px;
  --t-xl:27px;
  --t-2xl:34px;
  --t-hero:clamp(38px,5.2vw,56px);

  /* --- Прочее -------------------------------------------------------------
     Скругления нет. Сайт про чтение и печатную страницу; 6px по всем углам
     читались как административная панель. Круглым остаётся только круглое.
  --------------------------------------------------------------------------- */
  --pp-r:0;
  --pp-w-text:680px;       /* мера строки — около 68 знаков */
  --pp-w-note:640px;       /* второй план: лид, заметка, подпись */
  --pp-w-page:1020px;      /* рамка обычной страницы */
  --pp-w-wide:1180px;      /* только схемы во всю ширину: два древа */
  --pp-track:.14em;        /* единственный трекинг прописных */
  --pp-track-tight:-.012em;/* поджатие крупного кегля: Old Standard на 34+ px
                              без него расползается */

  --pp-font-display:"Old Standard",Georgia,"Times New Roman",serif;
  --pp-font-body:"PT Serif",Georgia,"Times New Roman",serif;
}

/* --- Основа --------------------------------------------------------------- */
/* Сброс — только для статических виджетов: у них нет Tailwind preflight.
   Признак — класс `pp` на <html>. На Next-страницах сброс делает Tailwind.
   Обёртка :where() обнуляет вес селектора: иначе сброс оказывается
   специфичнее авторских правил ниже и съедает у них поля и отступы. */
:where(html.pp) *{box-sizing:border-box;margin:0;padding:0}

/* Селектор из двух элементов, а не `body`: так правило надёжно перевешивает
   и Tailwind preflight, и globals.css, в каком бы порядке их ни склеили. */
html body{
  background:var(--pp-graphite);
  color:var(--pp-silver);
  font-family:var(--pp-font-body);
  font-size:var(--t-m);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

::selection{background:var(--pp-cinnabar);color:var(--pp-bone)}

/* --- Набор ----------------------------------------------------------------
   Четыре вещи, которых сайту не хватало, чтобы текст был набран, а не залит.
   Все правила обёрнуты в :where() — вес нулевой, любое правило страницы или
   виджета их перебивает без !important.

   1. Заголовок не бросает одно слово на последнюю строку (balance), абзац не
      оставляет висячего слова (pretty).
   2. Крупный кегль поджат. Old Standard рисовался под металл: на 34 и больше
      пикселей его апроши на экране расходятся.
   3. Переносы — только на узком экране. На 680 пикселях рваный край читается
      как рваный край; на 360, где в строку входит сорок знаков, он становится
      лестницей. Слово `hyphens` работает по атрибуту lang, он у нас проставлен.
   4. Цифры, которые меняются на месте (счёт до затмений, фаза Луны, цена шага
      в игре), набираются моноширинными — иначе строка дёргается при смене.
--------------------------------------------------------------------------- */
:where(h1,h2,h3,.pp-display){text-wrap:balance}
:where(p,li,dd,figcaption,blockquote){text-wrap:pretty}
:where(h1,h2,.pp-display){letter-spacing:var(--pp-track-tight)}
@media (max-width:640px){
  :where(p,li,dd,figcaption,blockquote){hyphens:auto;-webkit-hyphens:auto}
}
.pp-nums{font-variant-numeric:tabular-nums}

/* --- Тон картинок ---------------------------------------------------------
   Единственные изображения сайта — сканы колоды 1909 года и гравюры богов.
   Хромолитография в полном цвете на графите звучит громче всего, что есть на
   странице: жёлтый и голубой Уэйта спорят с костью и серебром напрямую.
   Раньше тон подбирался в каждом виджете свой — как есть на /den и /drevo,
   grayscale(1) на клипот, лёгкая сепия у богов. Теперь он один и объявлен
   здесь; тень считается от того же тона, а не отдельным правилом.

   Полный цвет остаётся ровно одному месту — карте дня, когда её открыли:
   там он событие, а не фон (класс `pp-img-full`).
--------------------------------------------------------------------------- */
:root{
  --pp-img:grayscale(.62) sepia(.16) contrast(1.04) brightness(.94);
  --pp-img-shadow:grayscale(1) contrast(1.06) brightness(.7);
}
.pp-img{filter:var(--pp-img)}
.pp-img-shadow{filter:var(--pp-img-shadow)}
.pp-img-full{filter:none}

::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:var(--pp-graphite)}
::-webkit-scrollbar-thumb{background:var(--pp-line)}
::-webkit-scrollbar-thumb:hover{background:var(--pp-line-2)}

:focus-visible{outline:2px solid var(--pp-bone);outline-offset:2px}

/* Кнопки виджетов. Браузер даёт <button> светлую заливку и свой шрифт — на
   тёмной странице это белые прямоугольники. Вес селектора нулевой, поэтому
   любое правило самой страницы это перебивает. */
:where(html.pp) button{background:none;color:inherit;font:inherit;border:0;cursor:pointer}
:where(html.pp) a{text-decoration:none}

/* Кикер — один на весь сайт: наборная антиква, прописные, один трекинг.
   До этого одна и та же надпись была набрана семью разными способами. */
.pp-kicker{
  font-family:var(--pp-font-display);
  font-size:var(--t-xs);
  text-transform:uppercase;
  letter-spacing:var(--pp-track);
  color:var(--pp-dim);
  margin-bottom:10px;
}

/* --- Буквица --------------------------------------------------------------
   Открывает длинный текст: лендинг, страница книги, честная рамка. Признак
   книги, а не лендинга. Ставится вручную классом на первый абзац.
--------------------------------------------------------------------------- */
.pp-bukvitsa::first-letter{
  float:left;
  font-family:var(--pp-font-display);
  font-weight:400;
  font-size:3.4em;
  line-height:.82;
  margin:.08em .1em 0 0;
  color:var(--pp-bone);
}

/* --- Ссылки и кнопки ------------------------------------------------------
   Один приём наведения на весь сайт: меняется линия, ничего не заливается.
   Исключение — главная кнопка, которая при наведении выворачивается: так
   ведёт себя оттиск, а не веб-контрол.
--------------------------------------------------------------------------- */
a{color:inherit}
.pp-btn{
  display:inline-block;
  font-family:var(--pp-font-display);
  font-size:var(--t-m);
  letter-spacing:.02em;
  color:var(--pp-bone);
  background:none;
  border:1px solid var(--pp-silver);
  border-radius:var(--pp-r);
  padding:13px 30px;
  cursor:pointer;
  transition:background .2s,color .2s,border-color .2s;
}
.pp-btn:hover{background:var(--pp-bone);color:var(--pp-graphite);border-color:var(--pp-bone)}

.pp-btn-quiet{
  display:inline-block;
  font:inherit;font-size:var(--t-xs);
  color:var(--pp-silver-dim);
  background:none;
  border:1px solid var(--pp-line);
  border-radius:var(--pp-r);
  padding:7px 14px;
  cursor:pointer;
  transition:color .2s,border-color .2s;
}
.pp-btn-quiet:hover{color:var(--pp-bone);border-color:var(--pp-line-2)}

/* --- Лампа ----------------------------------------------------------------
   Не «свечение» из стоп-листа, а свет источника в комнате: направленный,
   тусклый, за содержимым. Ставится на страницу, где лампа есть по смыслу.
--------------------------------------------------------------------------- */
.pp-lamp{position:relative;isolation:isolate}
.pp-lamp::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  left:-30%;right:-30%;top:-90px;height:480px;
  background:radial-gradient(46% 62% at 50% 16%,rgba(163,53,36,.13),rgba(163,53,36,0) 72%);
}

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