/* ==========================================================================
   The Body Edit — общий слой: шрифт, токены, базовая типографика, шапка,
   переключатель языка, кнопка, подвал, правовая страница, печать.

   Это всё, что нужно страницам без сцены (/tietosuoja/, /en/privacy/,
   404.html): они подключают ТОЛЬКО этот файл. Главные подключают его первым,
   а следом scene.css и content.css — те два файла содержат только то, что
   есть исключительно на главной. Правило одно: ни одного правила в двух
   файлах. Нужно правилу быть и тут и там — оно живёт здесь.

   Порядок подключения обязателен: base.css первым. Модификаторы .cta в
   content.css (.cta--solid) и страховки .no-js/.no-scene для шапки в
   scene.css рассчитаны на то, что базовые правила уже загружены.
   ========================================================================== */

/* ==========================================================================
   Cormorant Garamond — локально, из assets/fonts. Внешних запросов нет.

   Начерк один, 400: по коду весь сериф идёт на нём, все объявления
   font-weight в проекте — 400. 600 не подключён намеренно.

   Оговорка, которой здесь раньше не было: <strong> в разметке ВСТРЕЧАЕТСЯ —
   по 11 штук на каждой странице политики. Синтетического жирного из этого
   не выходит, и вот почему: .legal__text идёт гротеском (--sans), то есть
   системным стеком, где настоящий bold есть. Cormorant в этих абзацах
   не участвует вовсе. Заголовки, которые идут серифом, <strong> не содержат.
   Появится <strong> внутри серифного текста — вот тогда браузер начнёт
   утолщать начерк сам, и это будет видно.

   unicode-range гейтит загрузку: браузер тянет подмножество, только если
   на странице есть символ из его диапазона. Все семь не-ASCII символов
   нынешних текстов (· Ä ä ö – — €) лежат в latin, поэтому latin-ext
   не скачивается ни разу — он лежит запасом на будущие тексты.

   font-display: swap — до загрузки рисует Georgia из стека ниже,
   невидимого текста не возникает.
   ========================================================================== */

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/cormorant-garamond-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/cormorant-garamond-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
                 U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
                 U+A720-A7FF;
}

:root {
  --gold:   #cdb470;
  --veil:   #06160f;
  --shadow: #09241b;

  /* Осветлённое золото. Только для наведения на единственную залитую кнопку
     (.cta--solid): при hover заливка должна подниматься, а не гаснуть. */
  --gold-hover: #dcc588;

  /* Приглушённое золото. Только для неактивного языка и слэша между
     языками. Именно СПЛОШНОЙ цвет, а не --gold с opacity: прозрачность
     давала 2,98:1 на --shadow (порог AA — 4,5), этот даёт 5,39:1 на токене
     и 5,22:1 на самом светлом замеренном оттенке шапки, при этом заметно
     тише активного золота (8,09). Считано 05.09.2026. */
  --gold-dim: #a0945e;

  /* Канальные версии тех же цветов. Нужны там, где требуется прозрачность:
     через var() в rgba() цвет не подставить, а rgb(var(--x) / a) — можно.
     Держать в паре с --gold, --veil и --shadow выше.

     --gold-rgb появился поздно, и до него золото было выписано числами
     в шестнадцати местах двух файлов: смена --gold перекрасила бы текст
     и оставила бы шестнадцать рамок, подложек и линеек прежними. */
  --gold-rgb:   205 180 112;
  --veil-rgb:   6 22 15;
  --shadow-rgb: 9 36 27;

  --ink: #f2ece1;

  /* ТОЛЬКО для плоских фонов. Над кадрами сцены не применять: это тот же
     средний тон, что провалился на замере контраста поверх фотографии —
     затемнение фона ведёт его К яркости текста, а не от неё.
     Заголовки и акценты остаются --ink и --gold. */
  --ink-body: #d5cdc0;

  /* Отступ для якорных переходов: держит заголовок ниже фиксированной шапки.
     Шапка ~60px, отступ 80px, запас 20px. Один источник на все секции с id —
     при изменении высоты шапки правится здесь. */
  --anchor-offset: 5rem;

  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans:  ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Общий кегль цитат: и подпись в .quote-band, и цитата в MINUSTA.
     Один токен, чтобы они не разъехались при будущих правках. */
  --quote: clamp(1.35rem, 3.2vw, 1.9rem);

  /* Кегль основного текста. Единственный источник: заголовки третьего
     уровня считаются от него как calc(var(--body) * 1.3), поэтому связь
     остаётся явной. До этого один и тот же clamp был выписан трижды. */
  --body: clamp(.98rem, 1.5vw, 1.06rem);
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--shadow);
  color: var(--ink);
  font-family: var(--sans);
  overflow-x: clip;
}

/* ==========================================================================
   Словесный знак: ОДИН класс на оба места — в локапе и в шапке.
   Снаружи задаётся только font-size. Это условие точной посадки, а не
   аккуратность: масштаб полёта считается как ширина_цели / ширина_старта,
   и оба условия ниже ломаются молча, без ошибки в консоли.

   1. Трекинг в em и одинаковый шрифт — иначе ширина текста нелинейна
      по кеглю и отношение ширин перестаёт быть равномерным масштабом.
   2. line-height обязан совпадать. Высота коробки = lh × кегль; при
      scale = F2/F1 старт переходит в lh1 × F2, а цель равна lh2 × F2.
      При lh1 ≠ lh2 глиф уедет по вертикали на (lh1 − lh2) · F2 / 2.
   3. display обязан совпадать. У СТРОЧНОГО элемента высота прямоугольника
      задаётся метриками шрифта, а не line-height, — у inline-block она равна
      lh × кегль. Смешаешь одно с другим, и пропорции коробок разойдутся:
      замерено, промах по вертикали 6.2px при требуемом пикселе.
      Поэтому оба — inline-block.
   ========================================================================== */

.wordmark {
  display: inline-block;
  margin: 0;
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: .16em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Шапка
   На главной полосу ведёт scene.js по треку p 0.18-0.30 (во время интро —
   от p из времени); знак и слово внутри скрыты до подмены на p=0.30 — до
   неё их роль играет локап. На страницах без сцены шапка статична
   (.topbar--static ниже).
   -------------------------------------------------------------------------- */

.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .85rem clamp(1rem, 4vw, 2.5rem);
  border-bottom: 1px solid rgb(var(--gold-rgb) / .12);
  background: rgb(var(--shadow-rgb) / .55);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
          backdrop-filter: blur(14px) saturate(1.1);
  opacity: 0;
  transform: translateY(-100%);
  pointer-events: none;
  /* transition нет: полосу ведёт scene.js покадрово по треку p 0.18-0.30 */
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .topbar { background: rgb(var(--shadow-rgb) / .88); }
}

/* До подмены на p=0.30 знак и слово в шапке скрыты — их роль играет локап.
   visibility, а не только opacity: при opacity:0 ссылка осталась бы в дереве
   доступности и в порядке фокуса, и «Ventell» читался бы дважды. */
.topbar__brand {
  display: flex;
  align-items: center;
  gap: .65rem;
  color: var(--gold);
  text-decoration: none;
  opacity: 0;
  visibility: hidden;
}

.topbar__brand svg {
  display: block;
  height: 24px;
  width: auto;
  fill: currentColor;
}

.topbar__word { font-size: .78rem; }

/* Статичная шапка на внутренних страницах. Базовое состояние .topbar —
   opacity 0 и translateY(-100%): её ведёт scene.js по треку сцены,
   а там, где сцены нет, она так и осталась бы невидимой. */
.topbar--static {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.topbar--static .topbar__brand {
  opacity: 1;
  visibility: visible;
}

/* Правая группа: ссылка и кнопка держатся вместе, поэтому space-between
   у шапки разводит знак влево, а их — вправо. Зазор между ними 1.75rem. */
.topbar__nav {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  flex-shrink: 0;   /* при длинных системных шрифтах полоса переполнится
                       наружу, но ссылка и кнопка не наедут друг на друга */
}

/* --------------------------------------------------------------------------
   Переключатель языка. Кегль и трекинг те же, что у .topbar__link, —
   правая группа должна читаться одной строкой, а не тремя разными.
   -------------------------------------------------------------------------- */

.langs {
  display: flex;
  align-items: center;
  gap: .5rem;          /* держит зоны нажатия FI и EN врозь, см. ниже */
  color: var(--gold);
  font-size: .78rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
}

.langs__item {
  position: relative;
  color: inherit;
  text-decoration: none;
}

/* Неактивный язык приглушён, активный — в полную силу. Приглушена именно
   ссылка: у текущего языка ссылки нет вовсе. Приглушение — цветом
   (--gold-dim), не прозрачностью: см. объяснение у токена. */
a.langs__item {
  color: var(--gold-dim);
  transition: color .35s ease;
}

a.langs__item:hover,
a.langs__item:focus-visible { color: var(--gold); }

/* Слэш декоративный (aria-hidden), но тем же цветом, что неактивный
   язык: 2,12:1 от opacity читалось как дефект. */
.langs__sep { color: var(--gold-dim); }

/* Зона нажатия растянута псевдоэлементом, а не паддингом: паддинг развёл бы
   буквы и слэш. При кегле 11px строка «FI» рисуется 11.8×14.7px — это ниже
   минимума 24×24. Замерено: -15px по вертикали и -7px по горизонтали дают
   25.8×44.7, между зонами FI и EN остаётся 6.1px, до кнопки — 9px.
   Зазор .5rem у .langs подобран ровно под это: при меньшем зоны сольются. */
.langs__item::after {
  content: '';
  position: absolute;
  inset: -15px -7px;
}

.langs__item:focus-visible {
  outline: 1px solid var(--gold);
  outline-offset: 6px;
}

/* Узкая ветка: скрыто слово «Ventell» (ссылку .topbar__link на главной
   скрывает scene.css — там она и живёт). Кегль и зазоры ужимаются,
   вертикальный паддинг шапки — тоже, иначе кнопка с зоной нажатия 44px
   раздула бы полосу и якорный отступ --anchor-offset перестал бы её
   перекрывать. */
@media (max-width: 719px) {
  .topbar__word { display: none; }

  .topbar { padding: .5rem clamp(1rem, 4vw, 2.5rem); }

  .topbar__nav { gap: 1rem; }

  .langs,
  .topbar .cta--sm { font-size: 11px; }

  /* 14px по горизонтали задано, по вертикали — подобрано под 44px высоты */
  .topbar .cta--sm { padding: 14px; }
}

/* --------------------------------------------------------------------------
   Кнопка — общая: используется и в шапке, и в блоках после сцены
   -------------------------------------------------------------------------- */

.cta {
  display: inline-block;
  padding: 1.15em 2.6em;
  border: 1px solid var(--gold);
  border-radius: 2px;
  color: var(--gold);
  font-size: .82rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color .35s ease, color .35s ease;
}

.cta--sm { padding: .72em 1.5em; font-size: .68rem; letter-spacing: .16em; }

.cta:hover,
.cta:focus-visible {
  background: var(--gold);
  color: var(--shadow);
}

/* Вторичная: тоньше и мельче главной, не спорит с Varaa aika.
   Стоит ПОСЛЕ .cta — это модификатор к нему. .cta--solid (единственная
   залитая, только на главной) — в content.css. */
.cta--quiet {
  padding: .85em 1.9em;
  font-size: .72rem;
  border-color: rgb(var(--gold-rgb) / .55);
}

.cta--quiet:hover,
.cta--quiet:focus-visible {
  background: rgb(var(--gold-rgb) / .12);
  color: var(--gold);
}

/* prefers-reduced-motion: у кнопки и шапки нет переходов. Остальное
   (блюр сцены, появление блоков) — в scene.css и content.css. */
@media (prefers-reduced-motion: reduce) {
  .cta, .topbar { transition: none; }
}

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

.footer {
  background: var(--shadow);
  border-top: 1px solid rgb(var(--gold-rgb) / .15);
  padding: 4rem 6vw 5rem;
  text-align: center;
}

.footer__mark {
  display: block;
  height: 20px;
  width: auto;
  margin: 0 auto 1.5rem;
  color: var(--gold);
  fill: currentColor;
}

.footer__line {
  margin: 0;
  color: var(--ink-body);
  font-size: .74rem;
  letter-spacing: .1em;
}

/* Ссылка на политику в подвале.
   Зона нажатия растянута псевдоэлементом, как у .langs__item в шапке:
   паддинг увёл бы подчёркивание вниз от текста и разорвал строку подвала.
   Замерено до правки — 110.1×16, ниже минимума 24×24. Растяжка только по
   вертикали: по горизонтали ссылка и так 110px, а слева от неё в той же
   строке стоит разделитель «·», и расширять зону влево незачем. */
.footer__line a {
  position: relative;
  color: var(--ink-body);
  text-decoration: none;
  border-bottom: 1px solid rgb(var(--gold-rgb) / .3);
}

.footer__line a::after {
  content: '';
  position: absolute;
  inset: -6px 0;
}

.footer__line a:hover,
.footer__line a:focus-visible { border-bottom-color: var(--gold); }

/* --------------------------------------------------------------------------
   Правовая страница (/tietosuoja, /en/privacy) и 404
   Без сцены и без data-reveal: юридический текст обязан быть виден сразу
   и попадать на печать независимо от JS.
   -------------------------------------------------------------------------- */

.legal {
  max-width: 42rem;
  margin: 0 auto;
  padding: 16vh 6vw 12vh;
}

.legal__date {
  margin: 0 0 1.5rem;
  color: var(--gold);
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.legal h1 {
  margin: 0 0 3rem;
  color: var(--ink);
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2rem, 6vw, 3rem);
  line-height: 1.15;
  letter-spacing: .01em;
}

.legal h2 {
  margin: 3rem 0 1.2rem;   /* между разделами 3rem */
  color: var(--ink);
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.4rem, 3.4vw, 1.9rem);
  line-height: 1.24;
}

.legal h3 {
  margin: 2rem 0 .8rem;
  color: var(--ink);
  font-family: var(--serif);
  font-weight: 400;
  font-size: calc(var(--body) * 1.3);
  line-height: 1.3;
}

/* Класс, а не голый p: см. правило про специфичность в CLAUDE.md */
.legal__text {
  margin: 0 0 1.35rem;
  color: var(--ink-body);
  font-size: var(--body);
  line-height: 1.72;
  /* в юридическом тексте попадаются длинные неразрывные строки —
     адреса почты, ссылки; на 360px они дали бы горизонтальную прокрутку */
  overflow-wrap: break-word;
}

/* Списки как в .koulutus: разделители вместо маркеров, закрыты с обеих сторон */
.legal__list {
  margin: 1.5rem 0;
  padding: 0;
  list-style: none;
  color: var(--ink-body);
  font-size: var(--body);
  line-height: 1.5;
}

.legal__list li {
  padding: .9rem 0;
  border-top: 1px solid rgb(var(--gold-rgb) / .18);
}

.legal__list li:last-child {
  border-bottom: 1px solid rgb(var(--gold-rgb) / .18);
}

.legal a:not(.cta) {
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: .2em;
}

.legal__back { margin-top: 4rem; }

/* --------------------------------------------------------------------------
   Печать
   Сайт тёмный, а браузеры по умолчанию не печатают фоны — светлый текст
   на белой бумаге стал бы невидимым. Поэтому на печати инвертируем:
   иначе «весь текст на бумаге» не выполняется буквально.
   Печать блоков главной (.more) — в content.css.
   -------------------------------------------------------------------------- */

@media print {
  .topbar,
  .legal__back,
  .footer__mark { display: none !important; }

  body { background: #fff !important; color: #000 !important; }

  .legal {
    max-width: none;
    padding: 0;
  }

  /* Сплошным правилом, а не перечислением: при списке селекторов любой
     незанесённый элемент печатался бы светлым по белому. Проверено —
     так и вышло с заглушкой. */
  .legal,
  .legal *,
  .footer__line { color: #000 !important; }

  .legal h2,
  .legal h3 { break-after: avoid; }

  .legal__list li { border-color: #999 !important; }

  .legal a:not(.cta) { color: #000 !important; }

  /* адрес ссылки на бумаге виден, иначе она бессмысленна */
  .legal a:not(.cta)::after { content: " (" attr(href) ")"; font-size: .85em; }

  .footer { border-top-color: #999 !important; padding: 1rem 0 0; }
}