/* Антенка: основа оформления. Идея: переносной приёмник 60-х. Алюминиевая панель, эмаль цвета морской волны,
   тёмное стекло шкалы с янтарными надписями, красная стрелка настройки, зелёный «магический глаз».
   Шрифты свои (public/fonts, OFL): Alumni Sans для заголовков и шкалы, Geologica для текста, Handjet для табло. */

@font-face { font-family: "Alumni Sans"; src: url("/fonts/alumnisans.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Geologica"; src: url("/fonts/geologica.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Handjet"; src: url("/fonts/handjet.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --alu: #E2E7E3;        /* фон страницы: шлифованный алюминий */
  --alu-2: #D2D9D4;      /* утопленные места панели */
  --plate: #F1F4F1;      /* приподнятые пластины */
  --ink: #0F2A27;        /* текст, гравюры */
  --ink-2: #4B605B;      /* второстепенный текст */
  --line: #B9C3BD;       /* разделители, рамки */
  --enamel: #0E5C58;     /* эмаль корпуса, ссылки */
  --enamel-2: #0A4744;
  --glass: #0A1715;      /* стекло шкалы */
  --glass-2: #12241F;
  --amber: #FFB23F;      /* надписи на шкале */
  --needle: #E5432C;     /* стрелка, главное действие */
  --needle-2: #B9301D;
  --eye: #3FD98A;        /* «магический глаз»: всё в порядке */
  --warn: #C8641B;

  --f-display: "Alumni Sans", "Arial Narrow", sans-serif;
  --f-text: "Geologica", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-led: "Handjet", "Alumni Sans", monospace;
  --f-code: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --r-plate: 22px;  --r-key: 7px;  --r-chip: 999px;
  --w: 1240px;      --gut: clamp(16px, 4vw, 40px);
  --shadow-plate: 0 1px 0 #fff inset, 0 -1px 0 rgba(15,42,39,.08) inset, 0 18px 40px -24px rgba(15,42,39,.45);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --alu: #0C1513; --alu-2: #08100E; --plate: #13211E; --ink: #E4ECE7; --ink-2: #93A8A2; --line: #26403A;
    --enamel: #3BA79D; --enamel-2: #2B8A81; --glass: #040A09; --glass-2: #0B1714; --needle: #FF5A40; --needle-2: #E5432C;
    --shadow-plate: 0 1px 0 rgba(255,255,255,.05) inset, 0 18px 40px -24px rgba(0,0,0,.8);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --alu: #0C1513; --alu-2: #08100E; --plate: #13211E; --ink: #E4ECE7; --ink-2: #93A8A2; --line: #26403A;
  --enamel: #3BA79D; --enamel-2: #2B8A81; --glass: #040A09; --glass-2: #0B1714; --needle: #FF5A40; --needle-2: #E5432C;
  --shadow-plate: 0 1px 0 rgba(255,255,255,.05) inset, 0 18px 40px -24px rgba(0,0,0,.8);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--alu); color: var(--ink);
  font: 400 17px/1.55 var(--f-text); font-variation-settings: "SHRP" 0;
  /* лёгкая шлифовка алюминия */
  background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 3px);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--enamel); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--enamel-2); }
:focus-visible { outline: 3px solid var(--needle); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--amber); color: #1a1205; }

h1, h2, h3 { font-family: var(--f-display); font-weight: 800; line-height: .92; letter-spacing: -.005em; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(56px, 9.2vw, 128px); }
h2 { font-size: clamp(42px, 5.6vw, 76px); }
h3 { font-size: clamp(28px, 2.6vw, 36px); line-height: 1; }
p { margin: 0 0 1em; max-width: 64ch; }
.lead { font-size: clamp(18px, 1.6vw, 21px); line-height: 1.5; color: var(--ink-2); max-width: 46ch; }
.muted { color: var(--ink-2); }
.wrap { width: min(var(--w), 100% - 2 * var(--gut)); margin-inline: auto; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- кнопки ---------- */
.btn {
  --b: var(--needle); --b2: var(--needle-2); --c: #fff;
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 52px; padding: 0 26px; border: 0; border-radius: 12px; cursor: pointer;
  font: 650 17px/1 var(--f-text); color: var(--c); background: var(--b); text-decoration: none;
  box-shadow: 0 4px 0 var(--b2), 0 10px 22px -12px var(--b2);
  transition: transform .08s ease, box-shadow .08s ease;
}
.btn:hover { color: var(--c); filter: brightness(1.04); }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--b2); }
.btn[disabled] { opacity: .5; cursor: default; }
.btn.secondary { --b: var(--enamel); --b2: var(--enamel-2); }
.btn.ghost { --c: var(--ink); background: transparent; box-shadow: inset 0 0 0 2px var(--line); }
.btn.ghost:active { transform: none; }

/* ---------- шапка ---------- */
.top { position: relative; z-index: 3; }
.top .wrap { display: flex; align-items: center; gap: 28px; min-height: 76px; }
.logo { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; }
.logo svg { width: 38px; height: 38px; }
.logo b { font: 800 32px/1 var(--f-display); letter-spacing: .01em; }
.nav { display: flex; gap: 22px; margin-left: 8px; }
.nav a { color: var(--ink); text-decoration: none; font-weight: 500; }
.nav a:hover { color: var(--enamel); }
.top .acc { margin-left: auto; display: flex; gap: 10px; align-items: center; }
.balance { font: 600 26px/1 var(--f-led); color: var(--ink); text-decoration: none; padding: 6px 12px; border-radius: 10px; background: var(--alu-2); }
@media (max-width: 760px) { .nav { display: none; } .top .wrap { min-height: 64px; } }

/* ---------- гравюры: картинка-маска, цвет задаёт тема ---------- */
.engr { background: var(--ink); -webkit-mask: var(--src) center / contain no-repeat; mask: var(--src) center / contain no-repeat; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }