/* Типографика сайта (12.11): Tenor Sans — заголовки/«лицо», Jost — весь остальной текст. Шрифты самохостятся (assets/fonts/*.woff2, OFL).
   Заголовки — «написаны акварелью»: ОДИН цвет (чернильный #232A3D на светлых кадрах, жемчужный #F4EFE3 на тёмных), фактура = неравномерная плотность
   пигмента (карта assets/ui/wc_ink_*.webp через background-clip:text), пигмент гуще у кромки + живой неровный край (SVG-фильтры #wc-edge-d/#wc-edge-l в index.html).
   Подключается после main.css и переопределяет переменные/размеры; в main.css — только то, что иначе никак. */
@font-face { font-family: 'Tenor Sans'; src: url('../assets/fonts/TenorSans.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Jost'; src: url('../assets/fonts/Jost.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }

:root {
  --display: 'Tenor Sans', 'Jost', system-ui, sans-serif;
  --sans: 'Jost', system-ui, sans-serif;
  --wc-d: #232A3D;
  --wc-l: #F4EFE3;
  --wc-map: url('../assets/ui/wc_ink_d.webp');
}
html, body { font-family: var(--sans); }
button, input { font-family: inherit; }

/* ---- роли ---- */
.brand { font-family: var(--display); font-weight: 400; font-size: 0.92rem; letter-spacing: 0.2em; text-transform: uppercase; }
.eyebrow { font-weight: 500; letter-spacing: 0.22em; text-shadow: 0 0 6px rgba(255, 255, 255, 0.5), 0 0 1px rgba(255, 255, 255, 0.6); } /* узкий ореол по буквам: широкое свечение 32px читалось бледной полосой на тёмном фоне */
body.mode-hub[data-st="islam"] .eyebrow { text-shadow: none; }
.sub { font-size: 1.1rem; font-weight: 400; line-height: 1.5; letter-spacing: 0.005em; }
.btn { font-weight: 500; letter-spacing: 0.14em; }
.dot, .ghost, .quiet, .lang-btn { font-weight: 400; }
.support h2, .scene-head h2, .credits h3, .tier h3 { font-family: var(--display); font-weight: 400; letter-spacing: 0; }
.support h2 { line-height: 1.1; }
.tier h3 { font-size: 1.5rem; }
.chapter h3 { font-family: var(--display); font-weight: 400; letter-spacing: 0; }
.support-text, .chapter-body, .tier-d, .credits p { font-weight: 400; line-height: 1.6; }

/* ---- «акварельные» заголовки: хаб (h1), этапы пути (.jr-h), фраза-суть (.jr-phrase); .wc-ink — для любого другого ---- */
.hub-info h1, .jr-h, .jr-phrase, .wc-ink {
  font-family: var(--display); font-weight: 400;
  color: var(--wc-d);
  -webkit-text-fill-color: transparent; color: transparent;
  background-image: var(--wc-map); background-size: 512px 512px; background-repeat: repeat;
  -webkit-background-clip: text; background-clip: text;
  filter: url(#wc-edge-d);
  text-shadow: none;
  animation: wc-drift 52s linear infinite;
}
/* тёмные кадры: Ислам в хабе, ночные этапы пути (там текст уже светлый) */
body.mode-hub[data-st="islam"] .hub-info h1, .jr-p.ink-l .jr-h, .jr-p.ink-l .jr-phrase {
  --wc-map: url('../assets/ui/wc_ink_l.webp'); color: var(--wc-l); filter: url(#wc-edge-l);
}
.jr-in > .jr-h, .jr-in > .jr-phrase { text-shadow: none; }
@keyframes wc-drift { to { background-position: 512px 256px; } }

/* размеры: Tenor крупнее по рисунку, чем Inter 600 — заголовок станции и этапов под него */
.hub-info h1 { margin: 0 0 18px; font-size: clamp(3rem, 8vw, 6rem); line-height: 1.02; letter-spacing: calc(-0.005em + (1 - var(--k, 1)) * 0.015em); white-space: nowrap; width: max-content; max-width: none; padding-right: 0.06em;
  filter: url(#wc-edge-d) blur(calc((1 - var(--k, 1)) * 6px)); /* проявляется на «мокрой бумаге»: blur 6->0 и letter-spacing 0.01->0em вместе со скроллом (k от hub.js) */ }
body.mode-hub[data-st="islam"] .hub-info h1 { filter: url(#wc-edge-l) blur(calc((1 - var(--k, 1)) * 6px)); }
.jr-h { font-size: clamp(2rem, 3.8vw, 3.2rem); line-height: 1.1; letter-spacing: -0.005em; font-weight: 400; }
.jr-phrase { font-size: clamp(1.7rem, 3.3vw, 2.7rem); line-height: 1.2; letter-spacing: -0.005em; font-weight: 400; }
.jr-t { font-size: 1.1rem; line-height: 1.55; }
.jr-idea h3 { font-family: var(--display); font-weight: 400; font-size: 1.05rem; letter-spacing: 0.01em; }
.jr-idea p { font-size: 0.92rem; }

/* узкий экран (portrait): «Христианство» (12 букв) должно помещаться в 390 px */
@media (max-aspect-ratio: 19/20) {
  .hub-info h1 { font-size: clamp(2rem, 11.4vw, 4.6rem); margin-bottom: 12px; }
  .sub { font-size: 1.02rem; line-height: 1.48; max-width: 36ch; }
  .jr-h { font-size: clamp(1.7rem, 8vw, 2.4rem); }
}

@media (prefers-reduced-motion: reduce) {
  .hub-info h1, .jr-h, .jr-phrase, .wc-ink { animation: none; }
}

/* Христианство, широкий экран: текстовый блок ниже и шире, чтобы заголовок не лежал на аббатстве (остров занимает левую часть кадра до ~59% высоты) */
@media (min-aspect-ratio: 6/5) {
  body.mode-hub[data-st="christianity"] .hub-info { bottom: clamp(24px, 3.4vh, 36px); width: min(41rem, 50vw); }
  body.mode-hub[data-st="christianity"] .hub-info .eyebrow { color: rgba(26, 29, 36, 0.92); text-shadow: 0 0 8px rgba(255, 255, 255, 0.75), 0 0 2px rgba(255, 255, 255, 0.7); } /* подпись стоит у кромки воды под островом: плотнее, чтобы читалась */
  body.mode-hub[data-st="christianity"] .hub-info .sub { max-width: none; width: auto; }
  body.mode-hub[data-st="christianity"] .hub-info h1 { margin-bottom: 10px; }
}