/* ================================================================
 * Лендинг хакатона emma 2026 — styles.css
 *
 * Структура:
 *   1. :root — токены DS (dark by default, light через [data-theme="light"])
 *   2. Reset / base — нормализация и стандартные стили
 *   3. Утилиты — .container, .visually-hidden и т.п.
 *   4. Секции по блокам — маркеры "start:" и "end:" в комментариях
 *   5. Responsive — мобильно-first медиа-запросы
 *
 * Источник правды по токенам — tokens.md.
 * Изменения значений токенов (а не блочных стилей) — синхронно править в обоих файлах.
 * ================================================================ */

/* ================================================================
 * 1. Токены — :root
 * ================================================================ */

:root {
  /* ============================================================
   * Layer 1 — Палитра (primitives)
   * Hue scale + lightness percent. Имена не знают о ролях — нейтральные
   * по hue (ink/warm/blue/magenta) с числовым lightness (большая цифра = темнее).
   * Семантика ниже ссылается сюда через var(). Light-тема переопределяет
   * ТОЛЬКО Layer 1 (см. ниже). Архитектурный референс — платформенная DS emma
   * (`/Users/nick/Documents/emma/bff/static/design-system/tokens.css`).
   * ============================================================ */

  /* Ink scale — нейтральные тёмные тона (фон страницы, карточки, панели в dark теме).
     04 = lightest (ink-04 единственный светлый — process panel), 100 = darkest. */
  --ink-04: #eff2f5;
  --ink-85: #161619;
  --ink-90: #101012;
  --ink-95: #0e0e10;
  --ink-100: #0a0a0b;

  /* Warm scale — тёплая бежевая шкала (текст-foregrounds).
     04 = darkest warm, 95 = lightest warm. */
  --warm-04: #1a1916;
  --warm-95: #e8e6df;

  /* White — литерал, для текста на цветных CTA (всегда белый, независимо от темы). */
  --white: #ffffff;

  /* Blue scale — emma brand accent.
     60 = основной яркий accent (декоративные места), 75 = WCAG AA-pass dark variant
     для фонов CTA под белым текстом (контраст 5.60:1 vs white). */
  --blue-60: #1f80ff;
  --blue-75: #1864ce;

  /* Magenta scale — secondary accent (Showcases). */
  --magenta-60: #ec36ff;

  /* RGB-тройки — для rgba() в семантике. Парные к hex-значениям выше. */
  --ink-100-rgb: 10, 10, 11;
  --warm-95-rgb: 232, 230, 223;
  --blue-60-rgb: 31, 128, 255;

  /* ============================================================
   * Layer 1 — Шкалы spacing / font-size / radius (primitives)
   * Числовые имена. Семантика ниже (Layer 2) ссылается через var().
   * ============================================================ */

  /* Spacing scale — 4-pt базис, дополнительные шаги для тонкой типографики
     и mono-блоков (2/6/10/14/18). --space-12 = 28px добавлен под фактически
     используемые card-insets. */
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 6px;
  --space-4: 8px;
  --space-5: 10px;
  --space-6: 12px;
  --space-7: 14px;
  --space-8: 16px;
  --space-9: 18px;
  --space-10: 20px;
  --space-11: 24px;
  --space-12: 28px;
  --space-13: 32px;
  --space-14: 36px;
  --space-15: 40px;
  --space-16: 44px;
  --space-17: 48px;
  --space-18: 56px;
  --space-19: 64px;
  --space-20: 80px;
  --space-21: 96px;
  --space-22: 128px;

  /* Font-size scale — modular 10-step шкала для display + body + mono.
     Густые шаги в body-зоне (11/12/14/16/18) — каждый пиксель видно в mono-метках
     и параграфах. Редкие шаги в display-зоне (24/32/48/64/96) — display-вытяжки.
     Усмотрение: 16px зарезервирован под form-input (anti iOS-zoom). */
  --text-1: 11px;     /* mono-caps tiny — footer terminal labels */
  --text-2: 12px;     /* mono-caps general — track tags, badges, terminal */
  --text-3: 14px;     /* body — стандартный параграф */
  --text-4: 16px;     /* large body, input, CTA — anti iOS-zoom для форм */
  --text-5: 18px;     /* lg body — hero sub */
  --text-6: 24px;     /* h3 — process cards, judges, displays */
  --text-7: 32px;     /* h2 — section headers */
  --text-8: 48px;     /* h1 small / display-md */
  --text-9: 64px;     /* h1 hero side-by-side */
  --text-10: 96px;    /* hero stacked / display-xl */

  /* Radius scale — от 2px (badge) до 9999px (full pill). */
  --radius-1: 2px;
  --radius-2: 3px;
  --radius-3: 4px;
  --radius-4: 8px;
  --radius-5: 10px;
  --radius-6: 12px;
  --radius-7: 9999px;

  /* ============================================================
   * Layer 2 — Семантика (roles)
   * Никаких литералов. Только ссылки в Layer 1.
   * ============================================================ */

  /* Цвета — фоны */
  --color-bg-page: var(--ink-100);
  --color-bg-elevated: var(--ink-90);
  --color-bg-subtle: var(--ink-95);
  --color-bg-track-stack: var(--ink-85);
  --color-bg-process-section: var(--ink-04);
  --color-bg-nav: rgba(var(--ink-100-rgb), 0.78);
  --color-bg-cta-primary: var(--blue-75);
  --color-bg-overlay-soft: rgba(255, 255, 255, 0.04);

  /* Цвета — текст */
  --color-text-primary: var(--warm-95);
  --color-text-soft: rgba(var(--warm-95-rgb), 0.62);
  --color-text-dim: rgba(var(--warm-95-rgb), 0.42);
  --color-text-on-cta: var(--white);
  --color-text-on-process: var(--warm-04);

  /* Цвета — акценты и брэнд */
  --color-accent-primary: var(--blue-60);
  --color-accent-secondary: var(--magenta-60);

  /* Цвета — границы */
  --color-border-subtle: rgba(var(--warm-95-rgb), 0.10);

  /* Spacing — блочные */
  --space-page-x: var(--space-10);                 /* 20 */
  --space-section-y: var(--space-17);              /* 48 */
  --space-section-y-tight: var(--space-13);        /* 32 */

  /* Spacing — card insets */
  --space-card-inset-sm: var(--space-9) var(--space-10);    /* 18 20 */
  --space-card-inset-md: var(--space-10) var(--space-10);   /* 20 20 (был 20 22, 22→20) */
  --space-card-inset-lg: var(--space-11) var(--space-12);   /* 24 28 */
  --space-card-inset-xl: var(--space-12) var(--space-11);   /* 28 24 (был 28 26, 26→24) */
  --space-card-inset-cta: var(--space-13) var(--space-11);  /* 32 24 (mobile baseline) */
  --space-prompt-inline: var(--space-4) var(--space-5);     /* 8 10 */

  /* Spacing — value tiles (Hardware/Prizes grid-полосы) */
  --space-tile-inset: var(--space-10) var(--space-9);          /* 20 18 (mobile baseline) */
  --space-tile-inset-accent: var(--space-11) var(--space-10);  /* 24 20 (был 24 22, 22→20; mobile baseline) */

  /* Spacing — button */
  --space-button-xs: var(--space-3) var(--space-7);            /* 6 14 (был 7 14, 7→6) */
  --space-button-md: var(--space-7) var(--space-10);           /* 14 20 (был 13 22, 13→14, 22→20) */
  --space-button-md-alt: var(--space-7) var(--space-11);       /* 14 24 (был 14 26, 26→24) */
  --space-button-lg: var(--space-8) var(--space-12);           /* 16 28 (mobile baseline) */

  /* Nav */
  --space-nav-y: var(--space-7);                   /* 14 */
  --space-nav-links-gap: var(--space-9);           /* 18 */

  /* Hero / terminal (mobile baseline) */
  --space-hero-pt: var(--space-15);                /* 40 */
  --space-hero-pb: var(--space-11);                /* 24 */
  --space-terminal-bar: var(--space-5) var(--space-6);    /* 10 12 */
  --space-terminal-body: var(--space-7) var(--space-6);   /* 14 12 (mobile baseline) */
  --size-traffic-light: var(--space-5);            /* 10 */
  --size-accent-rule: var(--space-1);              /* 2 */
  --size-accent-rule-strong: 3px;
    /* 3px — accepted deviation от шкалы spacing (P1 эталон вертикальной полоски карточки трека).
       Намеренно 3px, не 2/4 — снап ломал бы визуальный вес. */

  /* Иконки и декоративные элементы блоков */
  --size-icon-md: var(--space-9);                  /* 18 — chevron-иконки в Tracks details (Judged on / Examples) */
  --size-logo-nav: var(--space-9);                 /* 18 — высота логотипа в nav (mobile baseline; tablet+ 22) */
  --size-logo-nav-md: 22px;
    /* 22px — accepted deviation от шкалы spacing (нет 22 в --space-N).
       Финал-размер логотипа в nav на ≥768. Снап 20/24 ломал бы визуальный вес. */
  --size-cursor-w: var(--space-4);                 /* 8 — ширина мигающего курсора в hero terminal */
  --size-cursor-h: var(--space-7);                 /* 14 — высота мигающего курсора в hero terminal */
  --size-tile-min: var(--space-22);                /* 128 — min-height value tile (mobile baseline; desktop --size-tile-min-lg) */
  --size-tile-min-lg: 180px;
    /* 180px — accepted deviation от шкалы spacing (нет 180 в --space-N — между 128 и нет следующего).
       Min-height value tile на ≥1024. Снап вниз на 128 ломал бы grid-полосу 4×tile визуально. */
  --size-textarea-min: var(--space-20);            /* 80 — min-height apply textarea (был 76, snap 76→80) */

  /* Timeline */
  --size-timeline-dot: 9px;
    /* 9px — accepted deviation от шкалы (декоративный dot-индикатор строки timeline,
       9px дотягивается визуально до mono-13px текста рядом, 8/10 ломают баланс). */
  --space-timeline-rail-x: var(--space-11);        /* 24 */
  --space-timeline-row-y: var(--space-7);          /* 14 */

  /* Tracks (детали карточек треков) */
  --space-tracks-desc-max: 760px;
    /* max-width текстового блока — не часть spacing-шкалы (контейнер). */
  --space-tracks-num-col: var(--space-15);         /* 40 */
  --radius-prompt-tail: var(--radius-3);           /* 4 */

  /* Stack gaps */
  --space-stack-tight: var(--space-4);             /* 8 */
  --space-stack-snug: var(--space-7);              /* 14 */
  --space-stack-md: var(--space-10);               /* 20 (был 22, 22→20) */
  --space-stack-lg: var(--space-13);               /* 32 */
  --space-stack-xl: var(--space-17);               /* 48 */

  /* Grid gaps */
  --space-grid-tight: var(--space-7);              /* 14 */
  --space-grid-md: var(--space-11);                /* 24 */
  --space-grid-lg: var(--space-11);                /* 24 (mobile baseline) */
  --space-grid-xl: var(--space-13);                /* 32 (mobile baseline) */

  /* Контент-контейнеры — max-width, не часть spacing-шкалы (выходят за 128px). */
  --space-container-max: 1120px;
  --space-container-hero: 920px;
  --space-container-form: 720px;
  --space-container-narrow: 540px;

  /* Радиусы */
  --radius-button: var(--radius-3);                /* 4 */
  --radius-card: var(--radius-4);                  /* 8 */
  --radius-card-lg: var(--radius-5);               /* 10 */
  --radius-card-cta: var(--radius-6);              /* 12 */
  --radius-badge: var(--radius-2);                 /* 3 */
  --radius-pill: var(--radius-7);                  /* 9999 (full pill, было 99) */

  /* Тени */
  --shadow-card-elevated: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 30px 60px -20px rgba(0, 0, 0, 0.5);
  --backdrop-blur-nav: blur(12px);

  /* Типографика — семейства */
  --font-display: 'Onest', system-ui, sans-serif;
  --font-body: 'Onest', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Типографика — размеры (mobile baseline)
     Шкала унифицирована до 10 значений (--text-1..10). Snap-правило: ближайшее
     значение, тай → вниз. Экзотические литералы (13/15/17/20/34/38/56/72) убраны. */
  --font-size-h1-hero: var(--text-7);              /* 32 (был 34, snap 34→32) */
  --font-size-h1-hero-stacked: var(--text-7);      /* 32 (был 34, 34→32) */
  --font-size-h2-section: var(--text-6);           /* 24 */
  --font-size-h2-section-large: var(--text-6);     /* 24 */
  --font-size-h2-inline: var(--text-7);            /* 32 (был 34, 34→32) */
  --font-size-track-name: var(--text-6);           /* 24 */
  --font-size-display-md: var(--text-5);           /* 18 (был 20, 20→18) */
  --font-size-cta-card: var(--text-6);             /* 24 */
  --font-size-body-lg: var(--text-4);              /* 16 (был 15, 15→16 — читаемее) */
  --font-size-card-title: var(--text-4);           /* 16 (был 15, 15→16) */
  --font-size-body: var(--text-3);                 /* 14 */
  --font-size-body-sm: var(--text-3);              /* 14 */
  --font-size-meta: var(--text-3);                 /* 14 (был 13, 13→14 — читаемее в mono) */
  --font-size-meta-sm: var(--text-2);              /* 12 */
  --font-size-mono-tag: var(--text-1);             /* 11 */
  --font-size-mono-tiny: var(--text-1);            /* 11 */
  --font-size-terminal: var(--text-2);             /* 12 (mobile baseline) */
  --font-size-terminal-table: var(--text-1);       /* 11 (mobile baseline) */
  --font-size-tile-big: var(--text-7);             /* 32 (mobile baseline) */
  --font-size-tile-big-accent: var(--text-7);      /* 32 (был 38, snap 38→32; mobile baseline) */

  /* Типографика — веса и интерлиньяж */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;

  --line-height-headline: 1.05;
  --line-height-snug: 1.1;
  --line-height-tight: 1.25;
  --line-height-body: 1.55;
  --line-height-body-loose: 1.65;
  --line-height-mono-block: 1.7;

  --letter-spacing-headline: -0.03em;
  --letter-spacing-h2: -0.02em;
  --letter-spacing-display: -0.01em;
  --letter-spacing-mono-caps-sm: 0.04em;
  --letter-spacing-mono-caps-md: 0.08em;
  --letter-spacing-mono-caps-lg: 0.10em;
  --letter-spacing-mono-caps-xl: 0.12em;

  /* Z-индексы */
  --z-hero-bg: 0;
  --z-hero-content: 1;
  --z-section-overlay: 2;
  --z-nav: 10;

  /* Формы (Apply) — семантика поверх Layer 1 */
  --color-input-bg: var(--ink-95);
  --color-input-border: rgba(var(--warm-95-rgb), 0.10);
  --color-input-focus-ring: rgba(var(--blue-60-rgb), 0.28);
  --font-size-input: var(--text-4);                /* 16 (фиксированно — iOS Safari prevent zoom) */
  --space-form-field-y: var(--space-5);            /* 10 */
  --space-form-stack-y: var(--space-10);           /* 20 (был 22, 22→20) */

  /* Анимации */
  --duration-nav-reveal: 0.28s;
  --duration-blink: 1.05s;
  --duration-hover: 0.15s;
  --duration-reveal: 0.6s;

  --easing-out: ease-out;
  --easing-default: ease;
}

/* Tablet+ overrides */
@media (min-width: 768px) {
  :root {
    --space-page-x: var(--space-13);                       /* 32 */
    --space-section-y: var(--space-19);                    /* 64 */
    --space-hero-pt: var(--space-18);                      /* 56 */
    --space-hero-pb: var(--space-13);                      /* 32 */
    --space-terminal-body: var(--space-9) var(--space-8);  /* 18 16 */
    --font-size-h1-hero: var(--text-8);                    /* 48 */
    --font-size-h1-hero-stacked: var(--text-8);            /* 48 (был 56, snap 56→48) */
    --font-size-h2-section: var(--text-6);                 /* 24 */
    --font-size-h2-section-large: var(--text-7);           /* 32 */
    --font-size-h2-inline: var(--text-8);                  /* 48 */
    --font-size-track-name: var(--text-7);                 /* 32 */
    --font-size-cta-card: var(--text-7);                   /* 32 */
    --font-size-body-lg: var(--text-4);                    /* 16 */
    --font-size-terminal: var(--text-3);                   /* 14 (был 13, 13→14) */
    --font-size-terminal-table: var(--text-2);             /* 12 */
    --font-size-tile-big: var(--text-7);                   /* 32 (был 34, 34→32) */
    --font-size-tile-big-accent: var(--text-8);            /* 48 */
    --space-tile-inset: var(--space-10) var(--space-10);   /* 20 20 (был 22 20, 22→20) */
    --space-tile-inset-accent: var(--space-12) var(--space-11); /* 28 24 (был 28 26, 26→24) */
  }
}

/* Desktop+ overrides */
@media (min-width: 1024px) {
  :root {
    --space-page-x: var(--space-15);                       /* 40 */
    --space-section-y: var(--space-20);                    /* 80 */
    --space-section-y-tight: var(--space-15);              /* 40 */
    --space-hero-pt: var(--space-19);                      /* 64 (был 68, 68→64) */
    --space-hero-pb: var(--space-15);                      /* 40 */
    --space-card-inset-cta: var(--space-17) var(--space-15); /* 48 40 */
    --space-button-lg: var(--space-9) var(--space-13);     /* 18 32 */
    --space-grid-md: var(--space-11);                      /* 24 */
    --space-grid-lg: var(--space-15);                      /* 40 */
    --space-grid-xl: var(--space-18);                      /* 56 */
    --space-tile-inset: var(--space-11) var(--space-10);   /* 24 20 (был 24 22, 22→20) */
    --space-tile-inset-accent: var(--space-13) var(--space-12); /* 32 28 (был 32 30, 30→28 — tie, snap down) */
    --font-size-h1-hero: var(--text-9);                    /* 64 */
    --font-size-h1-hero-stacked: var(--text-9);            /* 64 (был 72, snap 72→64) */
    --font-size-h2-section: var(--text-7);                 /* 32 */
    --font-size-h2-section-large: var(--text-7);           /* 32 (был 38, 38→32) */
    --font-size-h2-inline: var(--text-8);                  /* 48 (был 56, 56→48) */
    --font-size-track-name: var(--text-7);                 /* 32 (был 34, 34→32) */
    --font-size-display-md: var(--text-6);                 /* 24 */
    --font-size-cta-card: var(--text-7);                   /* 32 (был 34, 34→32) */
    --font-size-tile-big: var(--text-7);                   /* 32 (был 38, 38→32) */
    --font-size-tile-big-accent: var(--text-8);            /* 48 */
    --font-size-body-lg: var(--text-5);                    /* 18 (был 17, 17→18) */
    --font-size-input: var(--text-3);                      /* 14 — desktop only; на tablet/mobile остаётся 16 (anti iOS-zoom) */
    --line-height-headline: 1.02;
  }
}

/* Light theme override — переопределяем ТОЛЬКО Layer 1 (палитру).
   Layer 2 семантика общая для обеих тем — автоматически подтягивает новые primitives.
   В light-теме ink-шкала инвертируется по смыслу: ink-100 (page bg) становится светлым,
   ink-04 (process panel) тоже белый. Имя сохраняется — оно про роль в Layer 2, а не про яркость. */
[data-theme="light"] {
  --ink-100: #fafaf9;
  --ink-95: #f3f1ec;
  --ink-90: #ffffff;
  --ink-85: #ffffff;
  --ink-04: #ffffff;
  --warm-95: #1a1916;

  --ink-100-rgb: 250, 250, 249;
  --warm-95-rgb: 26, 25, 22;

  /* Исключения — token-ы, которые меняются не через палитру (особое поведение в light) */
  --color-bg-overlay-soft: rgba(0, 0, 0, 0.04);
  --color-input-focus-ring: rgba(var(--blue-60-rgb), 0.22);

  /* Shadow-композиция — литералы (не через палитру, см. tokens.md «Тени и blur») */
  --shadow-card-elevated: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 18px 40px -20px rgba(0, 0, 0, 0.18);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-nav-reveal: 0s;
    --duration-blink: 0s;
    --duration-hover: 0s;
    --duration-reveal: 0s;
  }
  *, *::before, *::after {
    animation-duration: 0s !important;
    transition-duration: 0s !important;
  }
}

/* ================================================================
 * 2. Reset / base
 * ================================================================ */

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

html, body { margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
}

body {
  background: var(--color-bg-page);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; }
img, video, svg { display: block; max-width: 100%; }

/* MIFB: balance на заголовках (равные строки, без сирот). Действует только на блоки ≤6 строк (Chromium) — длинные параграфы игнорируют свойство. */
h1, h2, h3 { text-wrap: balance; }

/* ================================================================
 * 3. Утилиты
 * ================================================================ */

.container {
  max-width: var(--space-container-max);
  margin-inline: auto;
  padding-inline: var(--space-page-x);
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* Reveal на блоках — initial state, активируется через .is-visible (см. main.js) */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--duration-reveal) var(--easing-out),
              transform var(--duration-reveal) var(--easing-out);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ================================================================
 * 4. Секции по блокам
 *
 * Каждая секция помечена парными комментариями.
 * В сессии P4 правишь только секцию своего блока — другие не трогаешь.
 * Если для роли нужен новый токен — добавь его в :root выше И в tokens.md.
 * ================================================================ */

/* start: nav */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-nav);
  background: var(--color-bg-nav);
  backdrop-filter: var(--backdrop-blur-nav);
  -webkit-backdrop-filter: var(--backdrop-blur-nav);
  border-bottom: 1px solid var(--color-border-subtle);
  opacity: 0;
  transform: translateY(-100%);
  pointer-events: none;
  transition: opacity var(--duration-nav-reveal) var(--easing-default),
              transform var(--duration-nav-reveal) var(--easing-default);
}

.nav.is-revealed {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.nav__inner {
  max-width: var(--space-container-max);
  margin-inline: auto;
  padding: var(--space-nav-y) var(--space-page-x);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-stack-snug);
}

.nav__logo {
  display: inline-flex;
  align-items: center;
}

.nav__logo img {
  height: var(--size-logo-nav);
  width: auto;
}

.nav__right {
  display: flex;
  align-items: center;
  gap: var(--space-nav-links-gap);
}

.nav__menu {
  display: none;
}

.nav__cta {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--font-size-meta-sm);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-mono-caps-sm);
  text-transform: uppercase;
  color: var(--color-text-on-cta);
  background: var(--color-bg-cta-primary);
  padding: var(--space-button-xs);
  border-radius: var(--radius-button);
  transition: filter var(--duration-hover) var(--easing-default),
              transform var(--duration-hover) var(--easing-default);
}

.nav__cta:hover {
  filter: brightness(1.08);
}

.nav__cta:active {
  transform: scale(0.96);
}

@media (min-width: 768px) {
  .nav__logo img {
    height: var(--size-logo-nav-md);
  }
}

@media (min-width: 1024px) {
  .nav__menu {
    display: inline-flex;
    align-items: center;
    gap: var(--space-nav-links-gap);
  }

  .nav__link {
    font-family: var(--font-mono);
    font-size: var(--font-size-meta-sm);
    color: var(--color-text-soft);
    transition: color var(--duration-hover) var(--easing-default);
  }

  .nav__link:hover {
    color: var(--color-text-primary);
  }
}
/* end: nav */

/* start: hero */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--color-bg-page);
  padding: var(--space-hero-pt) var(--space-page-x) var(--space-section-y);
}

.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  z-index: var(--z-hero-bg);
}

.hero__overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse 70% 60% at center 35%,
    rgba(10, 10, 15, 0.55) 0%,
    rgba(10, 10, 15, 0.25) 55%,
    transparent 100%
  );
  z-index: var(--z-hero-bg);
}

.hero__inner {
  position: relative;
  z-index: var(--z-hero-content);
  max-width: var(--space-container-hero);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.hero__text {
  text-align: center;
}

.hero__logo {
  display: flex;
  justify-content: center;
  margin-bottom: var(--space-stack-lg);
}

.hero__logo img {
  height: var(--space-15); /* 40 */
  width: auto;
  display: block;
}

.hero__pill {
  font-family: var(--font-mono);
  font-size: var(--font-size-mono-tag);
  letter-spacing: var(--letter-spacing-mono-caps-xl);
  text-transform: uppercase;
  color: var(--color-text-soft);
  margin: 0 0 var(--space-stack-md);
}

.hero__pill-date {
  color: var(--color-accent-primary);
}

.hero__title {
  font-family: var(--font-display);
  font-size: var(--font-size-h1-hero);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-headline);
  letter-spacing: var(--letter-spacing-headline);
  color: var(--color-text-primary);
  margin: 0 auto var(--space-stack-md);
  max-width: 880px;
}

.hero__title-accent {
  color: var(--color-accent-primary);
}

.hero__sub {
  font-size: var(--font-size-body-lg);
  line-height: var(--line-height-body);
  color: var(--color-text-soft);
  margin: 0 auto var(--space-stack-lg);
}

.hero__sub-accent {
  color: var(--color-accent-primary);
}

.hero__ctas {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-stack-snug);
  margin-bottom: var(--space-stack-xl);
}

.hero__cta {
  display: inline-block;
  font-family: var(--font-mono);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-mono-caps-sm);
  text-transform: uppercase;
  border-radius: var(--radius-button);
  text-align: center;
  transition: filter var(--duration-hover) var(--easing-default),
              border-color var(--duration-hover) var(--easing-default),
              color var(--duration-hover) var(--easing-default),
              transform var(--duration-hover) var(--easing-default);
}

.hero__cta--primary:active {
  transform: scale(0.96);
}

.hero__cta--primary {
  background: var(--color-bg-cta-primary);
  color: var(--color-text-on-cta);
  padding: var(--space-button-lg);
  font-size: var(--font-size-body);
  border: 1px solid var(--color-bg-cta-primary);
}

.hero__cta--primary:hover {
  filter: brightness(1.08);
}

.hero__cta--secondary {
  background: transparent;
  color: var(--color-text-soft);
  padding: var(--space-button-md);
  font-size: var(--font-size-body);
  border: none;
  text-decoration: underline dashed var(--color-text-dim);
  text-underline-offset: 4px;
}

.hero__cta--secondary:hover {
  color: var(--color-text-primary);
  text-decoration-color: var(--color-text-primary);
}

.hero__terminal {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-card-elevated);
  width: 100%;
  max-width: 780px;
  margin-inline: auto;
}

.hero__tagline {
  font-family: var(--font-mono);
  font-size: var(--font-size-meta-sm);
  color: var(--color-text-soft);
  letter-spacing: var(--letter-spacing-mono-caps-sm);
  text-align: center;
  margin: var(--space-stack-md) 0 0;
}

.hero__term-bar {
  display: flex;
  align-items: center;
  gap: var(--space-stack-tight);
  padding: var(--space-terminal-bar);
  border-bottom: 1px solid var(--color-border-subtle);
}

.hero__term-dot {
  display: inline-block;
  width: var(--size-traffic-light);
  height: var(--size-traffic-light);
  border-radius: var(--radius-pill);
}

.hero__term-dot--red    { background: #ff5f57; }
.hero__term-dot--yellow { background: #febc2e; }
.hero__term-dot--green  { background: #28c840; }

.hero__term-label {
  font-family: var(--font-mono);
  font-size: var(--font-size-mono-tag);
  color: var(--color-text-dim);
  margin-left: var(--space-stack-tight);
}

.hero__term-body {
  font-family: var(--font-mono);
  font-size: var(--font-size-terminal);
  line-height: var(--line-height-mono-block);
  color: var(--color-text-primary);
  padding: var(--space-terminal-body);
}

.hero__term-prompt,
.hero__term-check,
.hero__term-price {
  color: var(--color-accent-primary);
}

.hero__term-info {
  color: var(--color-text-dim);
}

.hero__term-table-wrap {
  margin: var(--space-stack-tight) 0;
  overflow-x: auto;
}

.hero__term-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-terminal-table);
  font-variant-numeric: tabular-nums;
}

.hero__term-table th {
  font-weight: var(--font-weight-regular);
  text-align: left;
  color: var(--color-text-soft);
  padding: var(--space-2) 0; /* 4 */
}

.hero__term-th-right,
.hero__term-td-right {
  text-align: right;
}

.hero__term-table tbody tr {
  border-top: 1px solid var(--color-border-subtle);
}

.hero__term-table td {
  padding: var(--space-3) 0; /* 6 (был 5, snap 5→6) */
  color: var(--color-text-primary);
  white-space: nowrap;
}

.hero__term-table td:first-child,
.hero__term-table td:nth-child(3) {
  color: var(--color-text-soft);
}

.hero__term-price-best {
  color: var(--color-accent-primary) !important;
}

.hero__term-cursor {
  display: inline-block;
  width: var(--size-cursor-w);
  height: var(--size-cursor-h);
  background: var(--color-accent-primary);
  vertical-align: -2px;
  margin-left: 2px;
  animation: hero-cursor-blink var(--duration-blink) steps(2, start) infinite;
}

@keyframes hero-cursor-blink {
  50% { opacity: 0; }
}

.hero__term-footer {
  display: flex;
  justify-content: space-between;
  padding: var(--space-terminal-bar);
  border-top: 1px solid var(--color-border-subtle);
  font-family: var(--font-mono);
  font-size: var(--font-size-mono-tiny);
  color: var(--color-text-dim);
}

@media (min-width: 768px) {
  .hero__ctas {
    align-items: center;
  }

  .hero__cta--primary,
  .hero__cta--secondary {
    align-self: center;
  }
}

@media (min-width: 1024px) {
  .hero {
    padding-top: var(--space-19);    /* 64 (был 68, snap 68→64) */
    /* padding-bottom наследует базовый --space-section-y (80) для симметричного разрыва Hero → Tracks с border-top */
  }

  .hero__logo {
    margin-bottom: var(--space-14); /* 36 */
  }

  .hero__logo img {
    height: var(--space-15); /* 40 */
  }

  .hero__pill {
    margin-bottom: var(--space-12); /* 28 */
  }

  .hero__title {
    font-size: var(--font-size-h1-hero-stacked);
    margin-bottom: var(--space-10); /* 20 (был 22, snap 22→20) */
  }

  .hero__sub {
    margin-bottom: var(--space-13); /* 32 */
    white-space: nowrap;
  }

  .hero__tagline {
    margin-top: var(--space-12); /* 28 */
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__bg { display: none; }
}
/* end: hero */

/* start: tracks */
.tracks {
  border-top: 1px solid var(--color-border-subtle);
  padding-block: var(--space-section-y);
}

.tracks__tag {
  font-family: var(--font-mono);
  font-size: var(--font-size-mono-tag);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-mono-caps-xl);
  text-transform: uppercase;
  color: var(--color-text-soft);
  margin: 0 0 var(--space-stack-snug);
}

.tracks__title {
  font-family: var(--font-display);
  font-size: var(--font-size-h2-section);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-h2);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-stack-lg);
}

/* Stacked-only layout: одна карточка над другой на всех breakpoints (P1 эталон). */
.tracks__grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-grid-tight);
}

.tracks__card {
  position: relative;
  overflow: hidden;
  background: var(--color-bg-track-stack);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-card-lg);
  padding: var(--space-card-inset-lg);
}

/* Левая вертикальная цветная полоска — на всю высоту карточки, единый акцент Builders/Showcases. */
.tracks__card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--size-accent-rule-strong);
  pointer-events: none;
}

.tracks__card--builders::before {
  background: var(--color-accent-primary);
}

.tracks__card--showcases::before {
  background: var(--color-accent-secondary);
}

/* Header row карточки: TRACK 0X слева вверху, compact meta справа вверху. */
.tracks__card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-stack-md);
  flex-wrap: wrap;
}

.tracks__card-tag {
  font-family: var(--font-mono);
  font-size: var(--font-size-mono-tag);
  letter-spacing: var(--letter-spacing-mono-caps-md);
  text-transform: uppercase;
  color: var(--color-text-soft);
  margin: 0;
}

.tracks__card-meta {
  font-family: var(--font-mono);
  font-size: var(--font-size-mono-tag);
  letter-spacing: var(--letter-spacing-mono-caps-md);
  text-transform: uppercase;
  color: var(--color-text-soft);
  margin: 0;
}

.tracks__card-meta-sep {
  color: var(--color-text-dim);
  margin: 0 var(--space-stack-tight);
}

/* Inline name + blurb: имя трека и фраза рядом на одной строке (с переносом если узко). */
.tracks__card-name-row {
  display: flex;
  align-items: baseline;
  gap: var(--space-stack-snug);
  flex-wrap: wrap;
  margin: var(--space-stack-tight) 0 0;
}

.tracks__card-name {
  font-family: var(--font-display);
  font-size: var(--font-size-track-name);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-h2);
  color: var(--color-text-primary);
  margin: 0;
}

.tracks__card-blurb {
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  margin: 0;
}

.tracks__card--builders .tracks__card-blurb {
  color: var(--color-accent-primary);
}

.tracks__card--showcases .tracks__card-blurb {
  color: var(--color-accent-secondary);
}

.tracks__card-desc {
  font-size: var(--font-size-body-sm);
  line-height: var(--line-height-body);
  color: var(--color-text-soft);
  margin: var(--space-stack-snug) 0 0;
  max-width: var(--space-tracks-desc-max);
}

/* Раскрывающиеся блоки Judged on / Examples — нативный <details>, без JS. */
.tracks__details {
  margin-top: var(--space-stack-md);
  border-top: 1px solid var(--color-border-subtle);
  padding-top: var(--space-stack-md);
}

.tracks__details-summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-stack-snug);
}

.tracks__details-summary::-webkit-details-marker {
  display: none;
}

.tracks__details-label {
  display: flex;
  align-items: center;
  gap: var(--space-stack-tight);
  font-family: var(--font-mono);
  font-size: var(--font-size-meta);
  letter-spacing: var(--letter-spacing-mono-caps-lg);
  text-transform: uppercase;
}

.tracks__details-icon {
  flex-shrink: 0;
  width: var(--size-icon-md);
  height: var(--size-icon-md);
}

.tracks__card--builders .tracks__details--judged .tracks__details-icon,
.tracks__card--builders .tracks__details--judged .tracks__details-text {
  color: var(--color-accent-primary);
}

.tracks__card--showcases .tracks__details--judged .tracks__details-icon,
.tracks__card--showcases .tracks__details--judged .tracks__details-text {
  color: var(--color-accent-secondary);
}

.tracks__details--examples .tracks__details-icon,
.tracks__details--examples .tracks__details-text {
  color: var(--color-text-primary);
}

.tracks__details-count {
  color: var(--color-text-soft);
  text-transform: none;
  letter-spacing: 0;
}

.tracks__details-chevron {
  font-family: var(--font-mono);
  font-size: var(--font-size-body);
  color: var(--color-text-dim);
  transition: transform var(--duration-reveal) var(--easing-out);
}

.tracks__details[open] .tracks__details-chevron {
  transform: rotate(180deg);
}

/* Список критериев Judged on: 1-кол на mobile, 2x2 grid на ≥768 (как Examples). */
.tracks__criteria {
  list-style: none;
  margin: var(--space-stack-snug) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
}

.tracks__criterion {
  display: grid;
  grid-template-columns: var(--space-tracks-num-col) 1fr;
  gap: var(--space-stack-md);
  padding: var(--space-stack-snug) 0;
  border-top: 1px solid var(--color-border-subtle);
  align-items: baseline;
  min-width: 0;
}

.tracks__criterion-num {
  font-family: var(--font-mono);
  font-size: var(--font-size-meta-sm);
  margin: 0;
}

.tracks__card--builders .tracks__criterion-num {
  color: var(--color-accent-primary);
}

.tracks__card--showcases .tracks__criterion-num {
  color: var(--color-accent-secondary);
}

.tracks__criterion-title {
  font-size: var(--font-size-body-lg);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-h2);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-stack-tight);
}

.tracks__criterion-desc {
  font-size: var(--font-size-body-sm);
  line-height: var(--line-height-body);
  color: var(--color-text-soft);
  margin: 0;
}

.tracks__criterion-required {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--font-size-meta-sm);
  color: var(--color-text-soft);
  margin: var(--space-stack-tight) 0 0;
}

/* Examples grid: 2x2 на десктопе, 1-кол на мобилке. */
.tracks__examples {
  list-style: none;
  margin: var(--space-stack-snug) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
}

.tracks__example {
  padding: var(--space-stack-snug) 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-stack-tight);
  min-width: 0;
  border-top: 1px solid var(--color-border-subtle);
}

.tracks__example-image {
  width: 100%;
  height: auto;
  border-radius: var(--radius-card);
  outline: 1px solid rgba(255, 255, 255, 0.10);
  outline-offset: -1px;
  margin-bottom: var(--space-stack-tight);
  cursor: zoom-in;
  transition: filter var(--duration-hover) var(--easing-default);
}

.tracks__example-image:hover {
  filter: brightness(1.04);
}

[data-theme="light"] .tracks__example-image {
  outline-color: rgba(0, 0, 0, 0.10);
}

.tracks__example-head {
  display: flex;
  align-items: baseline;
  gap: var(--space-stack-tight);
  min-width: 0;
}

.tracks__example-num {
  font-family: var(--font-mono);
  font-size: var(--font-size-mono-tag);
  color: var(--color-text-soft);
  margin: 0;
  flex-shrink: 0;
}

.tracks__example-title {
  font-size: var(--font-size-body-lg);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-h2);
  color: var(--color-text-primary);
  margin: 0;
}

.tracks__example-parens {
  font-family: var(--font-mono);
  font-size: var(--font-size-meta-sm);
  color: var(--color-accent-primary);
  opacity: 0.9;
  margin: 0;
}

.tracks__example-prompt {
  font-family: var(--font-mono);
  font-size: var(--font-size-meta-sm);
  color: var(--color-text-primary);
  background: var(--color-bg-overlay-soft);
  border-left: var(--size-accent-rule) solid var(--color-accent-secondary);
  border-radius: 0 var(--radius-prompt-tail) var(--radius-prompt-tail) 0;
  padding: var(--space-stack-tight) var(--space-stack-snug);
  margin: 0;
}

.tracks__example-prompt-glyph {
  color: var(--color-text-dim);
  margin-right: var(--space-stack-tight);
}

.tracks__example-body {
  font-size: var(--font-size-body-sm);
  line-height: var(--line-height-body-loose);
  color: var(--color-text-soft);
  margin: 0;
}

@media (min-width: 768px) {
  .tracks__criteria,
  .tracks__examples {
    grid-template-columns: 1fr 1fr;
  }

  .tracks__criterion,
  .tracks__example {
    padding: var(--space-stack-md) var(--space-stack-md);
    border-top: none;
  }

  .tracks__criterion:nth-child(odd),
  .tracks__example:nth-child(odd) {
    border-right: 1px solid var(--color-border-subtle);
  }

  .tracks__criterion:nth-child(n+3),
  .tracks__example:nth-child(n+3) {
    border-top: 1px solid var(--color-border-subtle);
  }
}

@media (min-width: 1024px) {
  .tracks__card {
    padding: var(--space-card-inset-xl);
  }
}
/* end: tracks */

/* start: value */
.value {
  border-top: 1px solid var(--color-border-subtle);
  padding-block: var(--space-section-y);
}

.value__tag {
  font-family: var(--font-mono);
  font-size: var(--font-size-mono-tag);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-mono-caps-xl);
  text-transform: uppercase;
  color: var(--color-text-soft);
  margin: 0 0 var(--space-stack-snug);
}

.value__title {
  font-family: var(--font-display);
  font-size: var(--font-size-h2-section);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-h2);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-stack-lg);
}

/* Sub-block (Hardware / Prizes) — каждый = head (label + paragraph) + grid из 4 tile */
.value__group {
  margin-bottom: var(--space-stack-lg);
}

.value__group:last-of-type {
  margin-bottom: 0;
}

.value__group-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-stack-tight);
  margin-bottom: var(--space-stack-snug);
}

.value__group-label {
  font-family: var(--font-mono);
  font-size: var(--font-size-mono-tag);
  letter-spacing: var(--letter-spacing-mono-caps-lg);
  text-transform: uppercase;
  color: var(--color-text-soft);
  margin: 0;
}

.value__group-blurb {
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  color: var(--color-text-soft);
  margin: 0;
}

/* Grid of tiles — base mobile = 1-col stack */
.value__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-grid-tight);
}

.value__tile {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-stack-snug);
  min-height: var(--size-tile-min); /* 128 (был 140, snap 140→128) */
  padding: var(--space-tile-inset);
  background: var(--color-bg-elevated);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border-subtle);
  /* tile = квадратные углы (P1): полосы из 4 tile со слипающимися границами,
     радиус сломал бы шов между accent-tile и соседями. Один tile в столбике на
     mobile тоже остаётся прямоугольным — общий язык секции */
}

.value__tile--accent {
  background: var(--color-accent-primary);
  color: var(--color-bg-page);
  border-color: var(--color-accent-primary);
  padding: var(--space-tile-inset-accent);
}

.value__tile-label {
  font-family: var(--font-mono);
  font-size: var(--font-size-mono-tag);
  letter-spacing: var(--letter-spacing-mono-caps-lg);
  text-transform: uppercase;
  margin: 0;
  opacity: 0.7;
}

.value__tile-big {
  font-family: var(--font-display);
  font-size: var(--font-size-tile-big);
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  letter-spacing: var(--letter-spacing-headline);
  font-variant-numeric: tabular-nums;
  margin: 0;
}

.value__tile--accent .value__tile-big {
  font-size: var(--font-size-tile-big-accent);
}

.value__tile-note {
  font-family: var(--font-mono);
  font-size: var(--font-size-mono-tag);
  margin: 0;
  opacity: 0.7;
}

/* Footer note под Prizes-блоком */
.value__footer-note {
  margin: var(--space-stack-snug) 0 0;
  font-family: var(--font-mono);
  font-size: var(--font-size-mono-tag);
  line-height: var(--line-height-body);
  letter-spacing: var(--letter-spacing-mono-caps-sm);
  color: var(--color-text-soft);
}

.value__footer-note-accent {
  color: var(--color-accent-primary);
}

/* Tablet+ — 2 строки по 2 tile (accent остаётся в верхнем-левом, 1× ширины) */
@media (min-width: 768px) {
  .value__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Desktop+ — две grid-полосы по 4 tile, accent-первая в 2× ширины (P1 композиция) */
@media (min-width: 1024px) {
  .value__group {
    margin-bottom: var(--space-stack-xl);
  }

  .value__group-head {
    margin-bottom: var(--space-stack-snug);
  }

  .value__grid {
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 0;
  }

  /* trick для слипания границ — tile перекрывает соседнюю слева на 1px */
  .value__tile + .value__tile {
    margin-left: -1px;
  }

  .value__tile {
    min-height: var(--size-tile-min-lg);
  }
}
/* end: value */

/* start: timeline */
/* Светлая полная-ширина зона на тёмной странице. Re-scope текстовых
   и border-токенов внутрь .timeline — внешние секции не задеваются. */
.timeline {
  background: var(--color-bg-process-section);
  color: var(--color-text-on-process);
  --color-text-primary: var(--color-text-on-process);
  --color-text-soft: rgba(26, 25, 22, 0.62);
  --color-text-dim: rgba(26, 25, 22, 0.42);
  --color-border-subtle: rgba(26, 25, 22, 0.10);
  --color-bg-overlay-soft: rgba(26, 25, 22, 0.04);
}

.timeline__inner {
  border-top: 1px solid var(--color-border-subtle);
  padding-block: var(--space-section-y);
}

.timeline__tag {
  font-family: var(--font-mono);
  font-size: var(--font-size-mono-tag);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-mono-caps-xl);
  text-transform: uppercase;
  color: var(--color-text-soft);
  margin: 0 0 var(--space-stack-snug);
}

.timeline__title {
  font-family: var(--font-display);
  font-size: var(--font-size-h2-section);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-h2);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-stack-md);
}

/* Process cards (Curation / Credits / Sandbox) — base mobile = 1-col */
.timeline__steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-grid-tight);
  margin-bottom: var(--space-stack-xl);
}

.timeline__step {
  padding: var(--space-6) var(--space-2); /* 12 4 */
}

.timeline__step-icon {
  color: var(--color-accent-primary);
  margin-bottom: var(--space-stack-snug);
}

.timeline__step-title {
  font-family: var(--font-display);
  font-size: var(--font-size-display-md);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-display);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-stack-tight);
}

.timeline__step-body {
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  color: var(--color-text-soft);
  margin: 0;
}

/* Vertical timeline (rows) — base mobile = stack when→what */
.timeline__rows {
  list-style: none;
  margin: 0;
  padding: 0 0 0 var(--space-timeline-rail-x);
  position: relative;
}

/* Вертикальная рейла (1px) идёт через всю высоту списка, центр совпадает с центрами точек */
.timeline__rows::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 6px;
  bottom: 6px;
  width: 1px;
  background: var(--color-border-subtle);
}

.timeline__row {
  position: relative;
  padding: var(--space-timeline-row-y) 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-stack-tight);
  border-bottom: 1px solid var(--color-border-subtle);
  transition: background-color var(--duration-hover) var(--easing-out);
}

.timeline__row:last-child {
  border-bottom: none;
}

.timeline__row:hover {
  background: var(--color-bg-overlay-soft);
}

/* Точка-индикатор. Inactive — fill цветом фона секции, чтобы маскировать рейлу за собой */
.timeline__row::before {
  content: "";
  position: absolute;
  left: -22px;
  top: 18px;
  width: var(--size-timeline-dot);
  height: var(--size-timeline-dot);
  border-radius: var(--radius-pill);
  background: var(--color-bg-process-section);
  border: 1.5px solid var(--color-border-subtle);
}

.timeline__row--live::before,
.timeline__row--deadline::before {
  background: var(--color-accent-primary);
  border-color: var(--color-accent-primary);
}

.timeline__row-when {
  font-family: var(--font-mono);
  font-size: var(--font-size-meta-sm);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-mono-caps-md);
  color: var(--color-text-primary);
}

.timeline__row--deadline .timeline__row-when {
  color: var(--color-accent-primary);
}

.timeline__row-what {
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  color: var(--color-text-primary);
}

.timeline__row--live .timeline__row-what,
.timeline__row--deadline .timeline__row-what {
  color: var(--color-accent-primary);
}

.timeline__row--deadline .timeline__row-what {
  font-weight: var(--font-weight-semibold);
}

.timeline__row-what a {
  color: var(--color-accent-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: var(--font-weight-semibold);
}

/* Tablet+ — process cards 3-в-ряд, timeline when 200px колонка */
@media (min-width: 768px) {
  .timeline__steps {
    grid-template-columns: repeat(3, 1fr);
  }

  .timeline__row {
    grid-template-columns: 200px 1fr;
    gap: var(--space-grid-md);
  }
}

/* Desktop+ — when растягивается до 260px */
@media (min-width: 1024px) {
  .timeline__row {
    grid-template-columns: 260px 1fr;
  }
}
/* end: timeline */

/* start: judges */
.judges {
  padding-block: var(--space-section-y);
}

.judges__tag {
  margin: 0 0 var(--space-stack-snug);
  font-family: var(--font-mono);
  font-size: var(--font-size-mono-tag);
  letter-spacing: var(--letter-spacing-mono-caps-xl);
  text-transform: uppercase;
  color: var(--color-text-soft);
}

.judges__title {
  margin: 0 0 var(--space-stack-md);
  font-family: var(--font-display);
  font-size: var(--font-size-h2-section);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-h2);
  line-height: var(--line-height-tight);
  color: var(--color-text-primary);
}

.judges__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-grid-tight);
}

.judges__card {
  display: flex;
  flex-direction: column;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-card);
  overflow: hidden;
  transition: transform var(--duration-hover) var(--easing-out),
              box-shadow var(--duration-hover) var(--easing-out);
}

.judges__card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card-elevated);
}

.judges__photo {
  position: relative;
  aspect-ratio: 1 / 1;
  border-bottom: 1px solid var(--color-border-subtle);
  overflow: hidden;
}

.judges__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  outline: 1px solid rgba(255, 255, 255, 0.10);
  outline-offset: -1px;
}

[data-theme="light"] .judges__photo img {
  outline-color: rgba(0, 0, 0, 0.10);
}

.judges__card--tba .judges__photo {
  background: var(--color-bg-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
}

.judges__tba {
  font-family: var(--font-mono);
  font-size: var(--font-size-mono-tag);
  letter-spacing: var(--letter-spacing-mono-caps-md);
  color: var(--color-text-soft);
}

.judges__badge {
  position: absolute;
  top: var(--space-5);  /* 10 */
  left: var(--space-5); /* 10 */
  padding: var(--space-2) var(--space-3); /* 4 6 (был 3 6, snap 3→4) */
  font-family: var(--font-mono);
  font-size: var(--font-size-mono-tiny);
  letter-spacing: var(--letter-spacing-mono-caps-lg);
  text-transform: uppercase;
  color: var(--color-accent-primary);
  border: 1px solid var(--color-accent-primary);
  border-radius: var(--radius-badge);
}

.judges__meta {
  padding: var(--space-card-inset-sm);
  display: flex;
  flex-direction: column;
  gap: var(--space-stack-tight);
  flex-grow: 1;
}

.judges__name {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-display);
  color: var(--color-text-primary);
}

.judges__card--tba .judges__name {
  color: var(--color-text-soft);
}

.judges__role {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--font-size-meta-sm);
  letter-spacing: var(--letter-spacing-mono-caps-sm);
  color: var(--color-text-soft);
}

@media (min-width: 768px) {
  .judges__meta {
    padding: var(--space-card-inset-md);
  }
}

@media (min-width: 1024px) {
  .judges__grid {
    grid-template-columns: repeat(4, 1fr);
  }
  .judges__name {
    font-size: var(--font-size-card-title);
  }
  .judges__role {
    font-size: var(--font-size-body);
  }
}
/* end: judges */

/* start: apply */
.apply {
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--color-border-subtle);
  padding-block: var(--space-section-y);
  isolation: isolate;
}

.apply__bg {
  position: absolute;
  inset: 0;
  background-image: url('./assets/apply-bg.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: -2;
}

.apply__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, var(--color-bg-page) 0%, rgba(10, 10, 11, 0) 22%),
    linear-gradient(0deg,   var(--color-bg-page) 0%, rgba(10, 10, 11, 0) 22%);
  pointer-events: none;
  z-index: -1;
}

.apply__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-stack-xl);
  align-items: start;
}

/* --- intro (left col on desktop) --- */
.apply__tag {
  margin: 0 0 var(--space-stack-snug);
  font-family: var(--font-mono);
  font-size: var(--font-size-mono-tag);
  color: var(--color-text-soft);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-mono-caps-xl);
}

.apply__title {
  margin: 0 0 var(--space-stack-snug);
  font-family: var(--font-display);
  font-size: var(--font-size-h2-section-large);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-h2);
  line-height: var(--line-height-snug);
  color: var(--color-text-primary);
}

.apply__sub {
  margin: 0 0 var(--space-stack-md);
  font-size: var(--font-size-body-lg);
  color: var(--color-text-soft);
  line-height: var(--line-height-body);
}

.apply__flow {
  list-style: none;
  margin: 0;
  padding: var(--space-stack-md) 0 0;
  border-top: 1px solid var(--color-border-subtle);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-stack-snug);
}

.apply__flow-step {
  display: flex;
  align-items: baseline;
  gap: var(--space-stack-snug);
  min-width: 0;
}

.apply__flow-num {
  font-family: var(--font-mono);
  font-size: var(--font-size-meta);
  color: var(--color-accent-primary);
  letter-spacing: var(--letter-spacing-mono-caps-sm);
  flex-shrink: 0;
}

.apply__flow-label {
  font-family: var(--font-mono);
  font-size: var(--font-size-meta);
  color: var(--color-text-primary);
  font-weight: var(--font-weight-medium);
  flex-shrink: 0;
}

.apply__flow-rule {
  flex: 1;
  border-bottom: 1px dashed var(--color-border-subtle);
  transform: translateY(-3px);
  min-width: var(--space-6); /* 12 */
}

.apply__flow-duration {
  font-family: var(--font-mono);
  font-size: var(--font-size-meta);
  color: var(--color-text-soft);
  flex-shrink: 0;
}

/* --- form (right col on desktop) --- */
.apply__form {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-form-stack-y);
  background: var(--color-bg-track-stack);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-card-lg);
  padding: var(--space-card-inset-lg);
  box-shadow: var(--shadow-card-elevated);
}

.apply__tracks {
  margin: 0;
  padding: 0;
  border: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-stack-tight);
}

.apply__track-tab {
  position: relative;
  display: block;
  padding: var(--space-button-md);
  background: transparent;
  border: 1px solid var(--color-input-border);
  border-radius: var(--radius-button);
  text-align: center;
  cursor: pointer;
  color: var(--color-text-primary);
  transition:
    background var(--duration-hover) var(--easing-default),
    border-color var(--duration-hover) var(--easing-default),
    color var(--duration-hover) var(--easing-default);
}

.apply__track-tab input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.apply__track-tab:hover:not(.apply__track-tab--active) {
  background: var(--color-bg-overlay-soft);
  border-color: var(--color-text-soft);
}

.apply__track-tab:focus-within {
  border-color: var(--color-accent-primary);
  box-shadow: 0 0 0 3px var(--color-input-focus-ring);
}

.apply__track-tab--active[data-track="builders"] {
  background: var(--color-bg-cta-primary);
  border-color: var(--color-bg-cta-primary);
  color: var(--color-text-on-cta);
  /* CTA-подобная поверхность: белый текст на синем — используем
     WCAG-pass dark variant emma-blue (как у главной CTA), а не яркий accent */
}

.apply__track-tab--active[data-track="showcases"] {
  background: var(--color-accent-secondary);
  border-color: var(--color-accent-secondary);
  color: var(--color-text-on-cta);
}

.apply__track-name {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--font-size-meta);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-mono-caps-sm);
}

.apply__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-form-field-y);
  min-width: 0;
}

.apply__field--track,
.apply__field--contact {
  gap: var(--space-form-field-y);
}

.apply__pitch {
  margin-top: var(--space-stack-tight);
}

.apply__label {
  font-family: var(--font-mono);
  font-size: var(--font-size-mono-tag);
  font-weight: var(--font-weight-semibold);
  color: var(--color-accent-primary);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-mono-caps-lg);
}

.apply__form input[type="text"],
.apply__form input[type="email"],
.apply__form textarea {
  width: 100%;
  background: var(--color-input-bg);
  border: 1px solid var(--color-input-border);
  border-radius: var(--radius-button);
  padding: var(--space-6) var(--space-7); /* 12 14 (был 11 13, snap 11→12, 13→14) */
  color: var(--color-text-primary);
  font-family: var(--font-mono);
  font-size: var(--font-size-input);
  line-height: var(--line-height-body);
  outline: none;
  transition:
    border-color var(--duration-hover) var(--easing-default),
    box-shadow var(--duration-hover) var(--easing-default);
}

.apply__form textarea {
  resize: vertical;
  min-height: var(--size-textarea-min);
}

.apply__form input::placeholder,
.apply__form textarea::placeholder {
  color: var(--color-text-soft);
}

.apply__form input:focus,
.apply__form textarea:focus {
  border-color: var(--color-accent-primary);
  box-shadow: 0 0 0 3px var(--color-input-focus-ring);
}

.apply__form input:user-invalid,
.apply__form textarea:user-invalid {
  border-color: rgba(255, 120, 120, 0.55);
}

.apply__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-form-stack-y);
}

.apply__submit {
  width: 100%;
  margin-top: var(--space-stack-tight);
  background: var(--color-bg-cta-primary);
  color: var(--color-text-on-cta);
  border: 1px solid var(--color-bg-cta-primary);
  border-radius: var(--radius-button);
  padding: var(--space-button-md);
  font-family: var(--font-mono);
  font-size: var(--font-size-meta);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-mono-caps-sm);
  cursor: pointer;
  transition: filter var(--duration-hover) var(--easing-default),
              transform var(--duration-hover) var(--easing-default);
}

.apply__submit:hover:not(:disabled) {
  filter: brightness(1.08);
}

.apply__submit:active:not(:disabled) {
  transform: scale(0.96);
}

.apply__submit:disabled {
  background: transparent;
  color: var(--color-text-dim);
  border-color: var(--color-border-subtle);
  cursor: not-allowed;
  opacity: 0.6;
}

.apply__submit.is-success {
  background: var(--color-accent-primary);
  border-color: var(--color-accent-primary);
  color: var(--color-text-on-cta);
  cursor: default;
  opacity: 1;
}

.apply__status {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--font-size-meta);
  color: var(--color-text-soft);
  text-align: center;
  min-height: 1em;
}

.apply__status--success { color: var(--color-accent-primary); }
.apply__status--error   { color: #ff8a8a; }

/* Submit + status + legal — единый под-блок с малым gap (8px), отделён от формы её собственным gap (20px) */
.apply__submit-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-stack-tight);
}

.apply__status:empty {
  display: none;
}

.apply__legal {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--font-size-mono-tiny);
  line-height: var(--line-height-body);
  color: var(--color-text-soft);
  text-align: center;
}

.apply__legal a {
  color: var(--color-text-soft);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Tablet+ */
@media (min-width: 768px) {
  .apply__flow {
    grid-template-columns: 1fr 1fr;
    column-gap: var(--space-grid-md);
  }
  .apply__row {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-stack-snug);
  }
  .apply__form {
    padding: var(--space-card-inset-xl);
  }
}

/* Desktop split layout */
@media (min-width: 1024px) {
  .apply__inner {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-grid-xl);
  }
  .apply__flow {
    grid-template-columns: 1fr;
  }
}
/* end: apply */

/* start: faq */
.faq {
  border-top: 1px solid var(--color-border-subtle);
  padding-top: var(--space-section-y);
  padding-bottom: 0;
}

.faq__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-stack-xl);
  align-items: start;
}

.faq__intro {
  min-width: 0;
}

.faq__tag {
  margin: 0 0 var(--space-stack-snug);
  font-family: var(--font-mono);
  font-size: var(--font-size-mono-tag);
  color: var(--color-text-soft);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-mono-caps-xl);
}

.faq__title {
  margin: 0 0 var(--space-stack-snug);
  font-family: var(--font-display);
  font-size: var(--font-size-h2-section);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-h2);
  line-height: var(--line-height-tight);
  color: var(--color-text-primary);
}

.faq__contact {
  margin: 0;
  font-size: var(--font-size-body);
  color: var(--color-text-soft);
  line-height: var(--line-height-body);
}

.faq__email {
  color: var(--color-accent-primary);
  text-decoration: none;
  transition: opacity var(--duration-hover) var(--easing-out);
}

.faq__email:hover {
  text-decoration: underline;
}

.faq__list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--color-border-subtle);
  min-width: 0;
}

.faq__item {
  border-bottom: 1px solid var(--color-border-subtle);
  padding: var(--space-stack-snug) 0;
}

.faq__question {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-stack-snug);
  font-family: var(--font-display);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  line-height: var(--line-height-tight);
}

.faq__question::-webkit-details-marker {
  display: none;
}

.faq__toggle {
  font-family: var(--font-mono);
  font-size: var(--font-size-mono-tag);
  color: var(--color-text-dim);
  flex-shrink: 0;
  transition: transform var(--duration-hover) var(--easing-out),
              color var(--duration-hover) var(--easing-out);
}

.faq__item:hover .faq__toggle {
  color: var(--color-text-soft);
}

.faq__item[open] .faq__toggle {
  transform: rotate(45deg);
}

.faq__answer {
  margin: var(--space-stack-snug) 0 0;
  font-size: var(--font-size-body);
  color: var(--color-text-soft);
  line-height: var(--line-height-body-loose);
}

@keyframes faq-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.faq__item[open] > .faq__answer {
  animation: faq-fade-in 0.2s var(--easing-out);
}

@media (min-width: 768px) {
  .faq__question {
    font-size: var(--font-size-card-title);
  }
}

@media (min-width: 1024px) {
  .faq__inner {
    grid-template-columns: 1fr 1.4fr;
    gap: var(--space-grid-xl);
  }
}
/* end: faq */

/* start: footer-cta */
.footer-cta {
  padding: var(--space-grid-md) 0 var(--space-stack-lg);
}

.footer-cta__card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-stack-snug);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-card-cta);
  padding: var(--space-card-inset-cta);
}

.footer-cta__text {
  min-width: 0;
}

.footer-cta__heading {
  margin: 0 0 var(--space-stack-tight);
  font-family: var(--font-display);
  font-size: var(--font-size-cta-card);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-h2);
  line-height: var(--line-height-tight);
  color: var(--color-text-primary);
  text-align: center;
}

.footer-cta__meta {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--font-size-meta-sm);
  color: var(--color-text-soft);
  text-align: center;
}

.footer-cta__btn {
  display: inline-block;
  width: 100%;
  font-family: var(--font-mono);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-mono-caps-sm);
  text-transform: uppercase;
  color: var(--color-text-on-cta);
  background: var(--color-bg-cta-primary);
  border: 1px solid var(--color-bg-cta-primary);
  border-radius: var(--radius-button);
  padding: var(--space-button-md-alt);
  text-align: center;
  text-decoration: none;
  transition: filter var(--duration-hover) var(--easing-default),
              transform var(--duration-hover) var(--easing-default);
}

.footer-cta__btn:hover {
  filter: brightness(1.08);
}

.footer-cta__btn:active {
  transform: scale(0.96);
}

@media (min-width: 768px) {
  .footer-cta {
    padding: var(--space-stack-lg) 0 var(--space-stack-xl);
  }

  .footer-cta__card {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-grid-md);
  }

  .footer-cta__heading,
  .footer-cta__meta {
    text-align: left;
  }

  .footer-cta__btn {
    width: auto;
  }
}

@media (min-width: 1024px) {
  .footer-cta {
    padding: var(--space-stack-xl) 0 var(--space-stack-xl);
  }
}
/* end: footer-cta */

/* start: footer */
.site-footer {
  border-top: 1px solid var(--color-border-subtle);
}

.site-footer__row {
  display: flex;
  flex-direction: column;
  gap: var(--space-grid-tight);
}

.site-footer__row--nav {
  padding-block: var(--space-grid-md) 0;
}

.site-footer__row--brand {
  padding-block: var(--space-grid-tight) var(--space-grid-md);
}

.site-footer__menu,
.site-footer__legal,
.site-footer__contacts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-nav-links-gap);
  margin: 0;
  padding: 0;
}

.site-footer__brand {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-stack-snug);
}

.site-footer__menu a,
.site-footer__legal a,
.site-footer__link {
  font-family: var(--font-mono);
  font-size: var(--font-size-meta-sm);
  color: var(--color-text-soft);
  text-decoration: none;
  transition: color var(--duration-hover) var(--easing-out);
}

.site-footer__legal a {
  color: var(--color-text-soft);
}

.site-footer__menu a:hover,
.site-footer__legal a:hover,
.site-footer__link:hover {
  color: var(--color-text-primary);
}

.site-footer__logo {
  height: var(--size-logo-nav-md); /* 22 — same role as nav logo on tablet+ */
  width: auto;
}

.site-footer__copy {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--font-size-mono-tag);
  color: var(--color-text-soft);
  line-height: 1.6;
}

.site-footer__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-stack-tight);
}

.site-footer__link svg {
  flex-shrink: 0;
}

@media (min-width: 768px) {
  .site-footer__row {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    row-gap: var(--space-grid-tight);
  }
}

@media (min-width: 1024px) {
  .site-footer__row--nav {
    padding-block: var(--space-section-y-tight) var(--space-grid-md);
  }
  .site-footer__row--brand {
    padding-block: 0 var(--space-section-y-tight);
  }
}
/* end: footer */

/* start: lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-page-x);
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  cursor: zoom-out;
}

.lightbox[hidden] {
  display: none;
}

.lightbox__image {
  max-width: 92vw;
  max-height: 90vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--radius-card);
  outline: 1px solid rgba(255, 255, 255, 0.10);
  outline-offset: -1px;
  cursor: default;
}

.lightbox__close {
  position: absolute;
  top: var(--space-stack-md);
  right: var(--space-stack-md);
  width: var(--space-15);   /* 40 — min hit area */
  height: var(--space-15);
  border: none;
  background: transparent;
  color: var(--color-text-primary);
  font-size: var(--text-7); /* 32 */
  line-height: 1;
  cursor: pointer;
  transition: filter var(--duration-hover) var(--easing-default),
              transform var(--duration-hover) var(--easing-default);
}

.lightbox__close:hover {
  filter: brightness(1.4);
}

.lightbox__close:active {
  transform: scale(0.94);
}

body.lightbox-open {
  overflow: hidden;
}
/* end: lightbox */