/* ═══════════════════════════════════════════════════════════════════════
   Capaline — страница-заглушка перед запуском.

   НАПРАВЛЕНИЕ. Не «тёмный лендинг с ярким акцентом», а приборная панель
   на борту: тёмная сталь корпуса, латунь разметки, холодная вода. Латунь
   выбрана не для красоты — грузовую марку красят контрастной краской, и
   металл здесь честнее модного оранжевого.

   Смелость потрачена в одном месте: сам прибор в первом экране. Всё
   остальное держится тихо — линейки, спецификация, три шага. Стекло
   применено ровно там, где сквозь него что-то видно: окна показаний
   поверх воды.
   ═════════════════════════════════════════════════════════════════════ */

/* ═══ ТРИ ТЕМЫ, И БАЗОВАЯ — СВЕТЛАЯ ═══════════════════════════════════
   Владелец, 29.08.2026: «тема лендоса слишком тёмная; светлая — базовая,
   потом Dark и Women in Tech, и Women in Tech должна быть продолжением
   светлой, а не тёмной».

   ЧТО ЗДЕСЬ ИЗМЕНИЛОСЬ ПО СУТИ. Раньше в файле стояло правило: «меняются
   ТОЛЬКО переменные», и оно было честным ровно до тех пор, пока обе темы
   были тёмными. Шестьдесят семь цветов при этом лежали в правилах
   мимо переменных — вторичный текст, стекло приборов, тени, дно плиты, —
   и на светлом фоне каждый из них стал бы белым по белому.

   Поэтому сначала все они переехали в переменные, и только потом
   появилась светлая палитра. Правило не ослаблено, а наконец стало
   выполнимым: ни одно правило ниже по-прежнему не переписывается темой.

   ЧТО ЗНАЧАТ ИМЕНА. Они называют РОЛЬ, а не цвет: --paper это «основной
   текст», а не «бумага», и в светлой теме он почти чёрный. Переименовать
   их значило бы тронуть весь файл; называть цветом — врать в каждой
   второй строке.

   ЗАЧЕМ --on-brass. Латунь у нас и фон кнопки, и цвет текста. На тёмной
   теме текст на кнопке тёмный, на светлой — белый. Одна переменная
   вместо двух наборов правил.

   ЧТО ЗДЕСЬ БАЗОВОЕ. Светлая тема стоит в :root без всякого признака:
   человек, впервые открывший сайт, получает её без единой строки
   скрипта. Тёмная и розовая — надстройки по data-theme. */
:root {
  --deep:      #f2f3f0;   /* фон страницы */
  --hull:      #ffffff;   /* плита корпуса */
  --hull-hi:   #fbfcfa;   /* подсветка плиты сверху */
  --brass:     #1d5a4a;   /* НАШ ЗЕЛЁНЫЙ: кнопки, марка, линейки, цифры */
  --brass-dim: #a9c6bc;
  --water:     #cfe4de;   /* спокойная вода */
  --water-hi:  #1f7a6b;
  --over:      #b8493c;   /* перегруз */
  --over-hi:   #93332a;
  --idle:      #a8b4b0;   /* простой: мёртвая вода, не тревога */
  --idle-hi:   #4f5c59;
  --paper:     #16201e;   /* основной текст */
  --mute:      #64716d;
  --line:      #dde2df;

  /* ── Роли, которые раньше стояли числами в правилах ─────────────── */
  --ink2:        #45524e;             /* вторичный текст абзацев */
  --on-brass:    #ffffff;             /* текст на латунной кнопке */
  --brass-hi:    #24705c;             /* зелёный при наведении */
  /* Разметка ТЕМНЕЕ и кнопок, и воды: она лежит поверх зелёной воды, и
     зелёным по зелёному не читается. Тот же род цвета, другая глубина. */
  --mark:        #0a3327;             /* разметка прибора поверх воды */
  --brand-ink:   #1d5a4a;             /* знак Capaline в шапке */
  --brass-wash:  rgba(29,90,74,.10);
  --water-wash:  rgba(31,122,107,.10);
  --over-wash:   rgba(184,73,60,.10);
  --over-glow:   rgba(184,73,60,.45);
  --glow-a:      #e8eeea;             /* свечение фона слева сверху */
  --glow-b:      #eceee9;             /* и справа сверху */
  --pit:         #eef1ee;             /* дно плиты и подложка кадра */
  --well:        #f1f4f1;             /* колодец: поле ввода, полоса */
  --well-hi:     #e8ede9;
  --sheet:       #ffffff;             /* подложка переключателя темы */
  --shadow:      rgba(20,32,30,.18);
  --shadow-hard: rgba(20,32,30,.22);
  --ring:        rgba(255,255,255,.9);
  --paper-72:    rgba(22,32,30,.72);
  --paper-45:    rgba(22,32,30,.5);
  /* ── СТЕКЛО ОКОН ПОКАЗАНИЙ ────────────────────────────────────
     Владелец: «красный сильно заливается, и не видно вообще, что там
     происходит».

     Стекло было прозрачным, и это верно ровно для тёмной темы: там под
     ним тёмная вода, а текст светлый — контраст держится сам. На
     светлых темах текст ТЁМНЫЙ, и сквозь прозрачное стекло он ложился
     на тёмно-зелёную и красную воду: подписи исчезали.

     Поэтому здесь стекло почти непрозрачное — белое над любой водой.
     Размытие и блик остаются, эффект жив; исчезла только просвечивающая
     заливка, из-за которой читать было нечего. */
  --film-hi:      rgba(255,255,255,.93);
  --film-lo:      rgba(255,255,255,.82);
  --film-edge:    rgba(22,32,30,.12);
  --film-edge-hi: rgba(22,32,30,.2);
  --film-top:     rgba(255,255,255,.7);
  --film-top-hi:  rgba(255,255,255,.95);
  --film-dark-hi: rgba(255,255,255,.94);
  --film-dark-lo: rgba(255,255,255,.85);
  /* Шкала прибора: те же четыре смысла, что и в числах. */
  --water-band-hi: rgba(31,122,107,.16);
  --water-band-lo: rgba(31,122,107,.05);
  --water-edge:    rgba(31,122,107,.55);
  --over-edge:     rgba(184,73,60,.6);
  --brass-edge:    rgba(29,90,74,.35);
  --idle-edge:     rgba(79,92,89,.45);

  /* ── ВОДА ПРИБОРА ────────────────────────────────────────────────
     Холст рисует градиент с прозрачностью, поэтому цвет хранится
     тройкой «r, g, b», а не hex. Три зоны — перегруз, норма, простой —
     те же три смысла, что и в остальных числах.

     На светлой теме вода остаётся глубокой: это ВОДА в баке, и белая
     вода на белом фоне перестала бы быть уровнем. Светлеет страница,
     а не жидкость. */
  --wave-over-top:   184, 73, 60;
  --wave-over-bot:   120, 38, 32;
  --wave-over-crest: 235, 152, 132;
  --wave-good-top:   42, 130, 120;
  --wave-good-bot:   18, 74, 70;
  --wave-good-crest: 140, 220, 206;
  --wave-idle-top:   118, 136, 142;
  --wave-idle-bot:   64, 82, 88;
  --wave-idle-crest: 170, 188, 194;

  /* Одно семейство на вывеску и на прозу, разведённые шириной и весом.
     Так делает дизайнер, а не сборщик страниц: связка получается плотной,
     а гуманистический грот, который стоял в тексте, тянул в классику. */
  --sans: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --disp: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --mono: 'Martian Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --pad: clamp(20px, 5vw, 72px);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
/* Вбок страница не ездит никогда. Любой распёртый элемент — это его
   личный скролл внутри своей рамки, а не сдвинутая витрина: сдвинутая
   витрина на телефоне и была главной жалобой владельца. */
html, body { overflow-x: clip; max-width: 100%; }

body {
  margin: 0;
  background: var(--deep);
  color: var(--paper);
  font-family: var(--sans);
  font-variation-settings: 'wdth' 100, 'wght' 380;
  font-size: 17px;
  line-height: 1.62;
  /* Свет сверху-слева, как от палубного прожектора: без него тёмный фон
     читается как выключенный экран, а не как металл. */
  background-image:
    radial-gradient(120% 80% at 12% -10%, var(--glow-a) 0%, transparent 62%),
    radial-gradient(90% 60% at 100% 0%, var(--glow-b) 0%, transparent 55%);
  background-attachment: fixed;
}

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 3px;
}

/* ── Шапка ─────────────────────────────────────────────────────────── */
/* Закреплена: с любой глубины страницы видно, кто мы и где кнопка.
   Фон полупрозрачный со размытием — контент проходит под ней, как под
   стеклом рубки, а не утыкается в глухую плиту. */
.top {
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px var(--pad);
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--deep) 82%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
}
/* Старым браузерам без размытия — глухой фон: прозрачная шапка поверх
   текста читалась бы как каша из двух строк. */
@supports not (backdrop-filter: blur(1px)) {
  .top { background: var(--deep); }
}
/* ── ЗНАК В ШАПКЕ КРАСИТСЯ ТЕМОЙ, А НЕ ЦВЕТОМ ТЕКСТА ────────────────
   Стоял цвет основного текста: в тёмной теме это давало белый знак и
   выглядело верно, а на светлой и розовой знак стал чёрным. Владелец:
   «на светлой он должен быть зелёным, классическим, а на розовой
   логичнее розовым».

   Он прав по сути: знак — это марка, а не абзац. Своя переменная, и в
   каждой теме она названа явно. */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--brand-ink);
  text-decoration: none;
  font-family: var(--disp);
  font-variation-settings: 'wdth' 108, 'wght' 750;
  font-size: 19px;
  letter-spacing: -.005em;
}
.top-note {
  font-family: var(--mono);
  font-variation-settings: 'wdth' 87.5, 'wght' 400;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--brass);
  border: 1px solid var(--brass-dim);
  border-radius: 999px;
  padding: 4px 10px;
  margin-left: auto;
}

/* ── Кнопки ────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--mono);
  font-variation-settings: 'wdth' 87.5, 'wght' 500;
  font-size: 11.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 11px 18px;
  border: 1px solid var(--brass);
  border-radius: 3px;
  color: var(--deep);
  background: var(--brass);
  cursor: pointer;
  transition: background .16s, color .16s, transform .16s;
}
.btn:hover { background: var(--brass-hi); transform: translateY(-1px); }
.btn-lg { padding: 15px 26px; font-size: 12.5px; }

/* ── Общая сетка секций ────────────────────────────────────────────── */
.hero, .band { padding: 0 var(--pad); }

.h2 {
  font-family: var(--disp);
  font-variation-settings: 'wdth' 118, 'wght' 780;
  font-size: clamp(26px, 3.6vw, 40px);
  line-height: 1.05;
  letter-spacing: -.02em;
  margin: 0 0 28px;
  max-width: 20ch;
}

.eyebrow {
  font-family: var(--mono);
  font-variation-settings: 'wdth' 87.5, 'wght' 400;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--brass);
  margin: 0 0 22px;
}