/* ─────────────────────────────────────────────────────────────
   silentiagame.com · "Void Signal"
   Colours and type follow the game's UI (Assets/_Silentia/UI/Styles/Tokens.uss).
   No blue, no green. Red is for Krav, danger and the primary action only.
   ───────────────────────────────────────────────────────────── */

@font-face { font-family: "Oswald"; src: url("../fonts/Oswald-Light.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Oswald"; src: url("../fonts/Oswald-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Oswald"; src: url("../fonts/Oswald-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Rijusans"; src: url("../fonts/Rijusans.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Rijusans"; src: url("../fonts/Rijusans-Italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Special Elite"; src: url("../fonts/SpecialElite-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }

:root {
  --si-void: #000000;
  --si-ink: #0C0B0B;
  --si-soot: #171515;
  --si-smoke: #2C2C2C;
  --si-dust: #5A5757;
  --si-ash: #8E8B8B;
  --si-mist: #B3B0B0;
  --si-pulse: #F0F0F0;
  --si-white: #FFFFFF;
  --si-moon: #8E929E;
  --si-vein: #8A0303;
  --si-vein-hot: #C2150C;

  --si-void-a55: rgba(0, 0, 0, 0.55);
  --si-void-a70: rgba(0, 0, 0, 0.70);
  --si-void-a90: rgba(0, 0, 0, 0.90);
  --si-void-a95: rgba(0, 0, 0, 0.95);
  --si-pulse-a08: rgba(240, 240, 240, 0.08);
  --si-pulse-a16: rgba(240, 240, 240, 0.16);
  --si-pulse-a30: rgba(240, 240, 240, 0.30);
  --si-pulse-a45: rgba(240, 240, 240, 0.45);
  --si-vein-a10: rgba(138, 3, 3, 0.10);
  --si-vein-hot-a50: rgba(194, 21, 12, 0.50);

  --font-head: "Oswald", "Arial Narrow", Arial, sans-serif;
  --font-body: "Rijusans", "Segoe UI", Arial, sans-serif;
  --font-note: "Special Elite", "Courier New", monospace;

  --ls-label: 0.2em;
  --ls-wide: 0.3em;
  --ls-title: 0.16em;

  --line: 1px;
  --t: 180ms;
  --t-slow: 260ms;
  --t-sonar: 1000ms;

  --gutter: clamp(16px, 5vw, 64px);
  --wrap: 1200px;
  --topbar-h: 72px;
}

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

html { background: var(--si-void); color-scheme: dark; scroll-behavior: smooth; scroll-padding-top: var(--topbar-h); -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--si-void);
  color: var(--si-mist);
  font: 18px/1.7 var(--font-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3 { margin: 0; font-weight: 300; text-wrap: balance; }
.lead, .closing__line, .hero__tagline { text-wrap: balance; }

::selection { background: var(--si-vein); color: var(--si-pulse); }

:focus-visible { outline: var(--line) solid var(--si-pulse); outline-offset: 4px; }

.skip {
  position: fixed; left: 16px; top: -60px; z-index: 100;
  padding: 10px 16px; background: var(--si-ink); border: var(--line) solid var(--si-smoke);
  font: 400 14px/1 var(--font-head); letter-spacing: var(--ls-label); text-transform: uppercase; text-decoration: none; color: var(--si-pulse);
}
.skip:focus { top: 16px; }

.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }

/* ── Dot + sonar ring (the game's menu bullet; hovering emits a ring) ── */
.dot {
  position: relative; flex-shrink: 0;
  width: 8px; height: 8px; border-radius: 50%;
  border: var(--line) solid var(--si-dust);
  transition: border-color var(--t), background-color var(--t);
}
.dot::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%;
  border: var(--line) solid var(--si-pulse);
  opacity: 0; transform: scale(0.3);
  pointer-events: none;
}
@keyframes sonar { from { opacity: 0.9; transform: scale(0.3); } to { opacity: 0; transform: scale(1); } }

/* ── Labels and titles ── */
.label {
  display: flex; align-items: center; gap: 14px;
  font: 400 13px/1.2 var(--font-head); letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--si-ash);
}
.label .dot { border-color: var(--si-ash); }

h2 {
  margin-top: 18px;
  font: 300 clamp(32px, 4.4vw, 52px)/1.1 var(--font-head); letter-spacing: var(--ls-title); text-transform: uppercase;
  color: var(--si-pulse);
}

/* ── Buttons ── */
.btn {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 14px 8px;
  background: none; border: var(--line) solid transparent; cursor: pointer;
  font: 400 15px/1 var(--font-head); letter-spacing: var(--ls-wide); text-transform: uppercase; white-space: nowrap;
  text-decoration: none; color: var(--si-ash);
  transition: color var(--t), letter-spacing var(--t-slow) ease-out, border-color var(--t), background-color var(--t);
}
.btn:hover, .btn:focus-visible { color: var(--si-pulse); letter-spacing: 0.36em; }
.btn:hover .dot, .btn:focus-visible .dot { border-color: var(--si-pulse); background: var(--si-pulse); }
.btn:hover .dot::after, .btn:focus-visible .dot::after { animation: sonar var(--t-sonar) ease-out 1; }

.btn--primary { padding: 16px 30px; border-color: var(--si-vein); color: var(--si-pulse); }
.btn--primary .dot { border-color: var(--si-vein-hot); }
.btn--primary .dot::after { border-color: var(--si-vein-hot); }
.btn--primary:hover, .btn--primary:focus-visible { border-color: var(--si-vein-hot); background: var(--si-vein-a10); }
.btn--primary:hover .dot, .btn--primary:focus-visible .dot { border-color: var(--si-vein-hot); background: var(--si-vein-hot); }

.btn--small { padding: 10px 16px; font-size: 13px; gap: 10px; }
.btn--small:hover, .btn--small:focus-visible { letter-spacing: 0.33em; }

/* Click ripple: a thin ring where the pointer lands, like a sound in Krav's world. */
.ripple {
  position: fixed; z-index: 90; pointer-events: none;
  width: 90px; height: 90px; margin: -45px 0 0 -45px; border-radius: 50%;
  border: var(--line) solid var(--si-pulse-a45);
  animation: ripple 900ms ease-out forwards;
}
.ripple--vein { border-color: var(--si-vein-hot-a50); }
@keyframes ripple { from { opacity: 1; transform: scale(0.1); } to { opacity: 0; transform: scale(1); } }

/* ── Top bar ── */
.topbar {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  height: var(--topbar-h);
  display: flex; align-items: center; gap: 32px;
  padding: 0 var(--gutter);
  border-bottom: var(--line) solid transparent;
  transition: background-color var(--t-slow), border-color var(--t-slow);
}
.topbar.is-solid { background: var(--si-void-a90); border-bottom-color: var(--si-smoke); backdrop-filter: blur(6px); }
.topbar__logo { flex-shrink: 0; opacity: 0.9; transition: opacity var(--t); }
.topbar__logo:hover { opacity: 1; }
.topbar__logo img { width: 112px; }
.topbar__nav { display: flex; gap: 28px; margin: 0 auto; }
.topbar__nav a {
  font: 400 13px/1 var(--font-head); letter-spacing: var(--ls-label); text-transform: uppercase; text-decoration: none;
  color: var(--si-ash); padding: 8px 0; transition: color var(--t);
}
.topbar__nav a:hover, .topbar__nav a:focus-visible { color: var(--si-pulse); }
.topbar__end { display: flex; align-items: center; gap: 22px; margin-left: auto; }
.topbar__nav + .topbar__end { margin-left: 0; }

.lang { display: flex; align-items: center; gap: 8px; font: 400 13px/1 var(--font-head); letter-spacing: 0.12em; color: var(--si-dust); }
.lang a { text-decoration: none; color: var(--si-dust); padding: 6px 2px; transition: color var(--t); }
.lang a:hover, .lang a:focus-visible { color: var(--si-pulse); }
.lang a[aria-current] { color: var(--si-pulse); }

/* ── Hero ── */
/* On wide screens the text sits in the lower left, like the game's main menu, and the middle of
   the frame belongs to the picture (the survivor walking into the light). */
.hero {
  position: relative; overflow: hidden;
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end;
  padding: calc(var(--topbar-h) + 40px) var(--gutter) clamp(56px, 9vh, 104px);
  text-align: left;
  isolation: isolate;
}
.hero__media { position: absolute; inset: 0; z-index: -3; background: var(--si-void); }
.hero__img { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 50%; }

/* Two drifting layers of tiled noise, the same fog as the game's main menu. Each layer is
   oversized and only its background moves, one full tile per loop, so the seam never shows. */
/* The hero now has real fog in its video; these layers stay for the pages without one (404). */
.fog {
  position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background: url("../img/fog.png") repeat;
}
.fog--a { background-size: 1700px 1700px; opacity: 0.10; animation: fog-a 283s linear infinite; }
.fog--b { background-size: 2800px 2800px; opacity: 0.07; animation: fog-b 800s linear infinite; }
@keyframes fog-a { from { background-position: 0 0; } to { background-position: 1700px 340px; } }
@keyframes fog-b { from { background-position: 0 0; } to { background-position: -2800px 1280px; } }

.hero__shade {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(to right, var(--si-void-a70) 0%, transparent 42%),
    radial-gradient(ellipse 120% 90% at 50% 45%, transparent 45%, var(--si-void-a70) 100%),
    linear-gradient(to bottom, var(--si-void-a55) 0%, transparent 20%, transparent 55%, var(--si-void-a70) 85%, var(--si-void) 100%);
}
.hero > .vtoggle { position: absolute; top: calc(var(--topbar-h) + 16px); right: var(--gutter); opacity: 0.5; }
.hero > .vtoggle:hover, .hero > .vtoggle:focus-visible { opacity: 1; }

.hero__content { display: flex; flex-direction: column; align-items: flex-start; max-width: 620px; }
.hero__logo img { width: clamp(220px, 28vw, 400px); filter: drop-shadow(0 6px 30px var(--si-void-a70)); }
.hero__tagline {
  margin-top: 18px;
  font: 300 clamp(18px, 1.9vw, 24px)/1.45 var(--font-head); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--si-pulse); text-shadow: 0 2px 12px var(--si-void-a70);
}
.status {
  display: flex; align-items: center; gap: 16px; margin-top: 22px;
  font: 400 13px/1 var(--font-head); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--si-ash);
}
.status::before { content: ""; width: 40px; height: var(--line); background: var(--si-smoke); }
.hero__actions { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 16px 28px; margin-top: 36px; margin-left: -8px; }
.hero__actions .btn--primary { margin-left: 8px; }

.hero__social { position: absolute; right: var(--gutter); bottom: 32px; display: flex; gap: 6px; }
.hero__social a, .footer__social a {
  display: grid; place-items: center; width: 40px; height: 40px;
  color: var(--si-ash); transition: color var(--t);
}
.hero__social a:hover, .hero__social a:focus-visible, .footer__social a:hover, .footer__social a:focus-visible { color: var(--si-pulse); }
.hero__social svg, .footer__social svg { width: 18px; height: 18px; }

/* ── Sections ── */
.section { padding: clamp(64px, 8vw, 112px) 0; }
.section__head { margin-bottom: clamp(36px, 5vw, 64px); }
.section__head--row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.section__text { margin-top: 18px; max-width: 560px; color: var(--si-ash); }

/* Divider between sections: a hairline with a small node in the middle that emits one ring
   when it scrolls into view. */
.signal { position: relative; height: 1px; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.signal::before { content: ""; display: block; height: var(--line); background: linear-gradient(to right, transparent, var(--si-smoke) 20%, var(--si-smoke) 80%, transparent); }
.signal span { position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; border: var(--line) solid var(--si-ash); background: var(--si-void); }
.signal span::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 120px; height: 120px; margin: -60px 0 0 -60px;
  border-radius: 50%; border: var(--line) solid var(--si-pulse-a30); opacity: 0; transform: scale(0.05);
}
.signal.is-visible span::after { animation: signal 2200ms ease-out 200ms 1; }
@keyframes signal { 0% { opacity: 1; transform: scale(0.05); } 100% { opacity: 0; transform: scale(1); } }

/* ── Intro ── */
.intro .wrap { max-width: calc(900px + 2 * var(--gutter)); }
.lead {
  margin-top: 28px;
  font: 300 clamp(22px, 2.6vw, 32px)/1.5 var(--font-head); letter-spacing: 0.02em;
  color: var(--si-pulse);
}
.facts { display: flex; flex-wrap: wrap; gap: 10px 0; margin-top: 36px; }
.facts li {
  display: flex; align-items: center;
  font: 400 13px/1 var(--font-head); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--si-ash);
}
.facts li + li::before { content: ""; width: 4px; height: 4px; margin: 0 18px; border-radius: 50%; background: var(--si-dust); }

/* ── Frames (media with the HUD's corner marks) ── */
.frame { --c: var(--si-pulse-a45); position: relative; background: var(--si-ink); }
.frame--vein { --c: var(--si-vein-hot); }
.frame > img, .frame > video { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.frame::after {
  content: ""; position: absolute; inset: -7px; pointer-events: none;
  --l: 16px;
  background:
    linear-gradient(var(--c), var(--c)) left top / var(--l) var(--line) no-repeat,
    linear-gradient(var(--c), var(--c)) left top / var(--line) var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) right top / var(--l) var(--line) no-repeat,
    linear-gradient(var(--c), var(--c)) right top / var(--line) var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) left bottom / var(--l) var(--line) no-repeat,
    linear-gradient(var(--c), var(--c)) left bottom / var(--line) var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) right bottom / var(--l) var(--line) no-repeat,
    linear-gradient(var(--c), var(--c)) right bottom / var(--line) var(--l) no-repeat;
}

.vtoggle {
  position: absolute; right: 12px; bottom: 12px; z-index: 1;
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--si-void-a55); border: var(--line) solid var(--si-pulse-a30); cursor: pointer;
  opacity: 0.6; transition: opacity var(--t), border-color var(--t);
}
.frame:hover .vtoggle, .vtoggle:focus-visible { opacity: 1; }
.vtoggle:hover { border-color: var(--si-pulse); }
/* Pause: two bars. Play (.is-paused): a triangle. */
.vtoggle span { width: 10px; height: 11px; border-left: 3px solid var(--si-pulse); border-right: 3px solid var(--si-pulse); }
.vtoggle.is-paused span { width: 0; height: 0; margin-left: 3px; border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent var(--si-pulse); }

/* ── Two sides ── */
.sides { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 56px); }
.side { display: flex; flex-direction: column; background: var(--si-ink); border: var(--line) solid var(--si-smoke); }
.side .frame { background: var(--si-void); }
.side .frame::after { display: none; }
.side--krav { border-top-color: var(--si-vein); }
.side__body { padding: clamp(24px, 3vw, 40px); }
.side__meta { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.side__name { font: 400 13px/1 var(--font-head); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--si-ash); }
.side--krav .side__name { color: var(--si-vein-hot); }
.side__count { font: 400 13px/1 var(--font-head); letter-spacing: 0.12em; text-transform: uppercase; color: var(--si-ash); }
.side__title { margin: 16px 0 16px; font: 300 clamp(26px, 2.6vw, 34px)/1.15 var(--font-head); letter-spacing: 0.12em; text-transform: uppercase; color: var(--si-pulse); }

/* ── Highlights ── */
.features { display: flex; flex-direction: column; gap: clamp(64px, 9vw, 120px); }
.feature { display: grid; grid-template-columns: 7fr 5fr; align-items: center; gap: clamp(32px, 5vw, 72px); }
.feature:nth-child(even) .frame { order: 2; }
.feature__index { font: 300 15px/1 var(--font-head); letter-spacing: var(--ls-label); color: var(--si-dust); }
.feature__title { margin: 14px 0 18px; font: 300 clamp(26px, 2.8vw, 36px)/1.15 var(--font-head); letter-spacing: 0.12em; text-transform: uppercase; color: var(--si-pulse); }

/* ── Gallery ── */
.gallery { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-flow: dense; gap: 10px; }
/* Two large shots, one on each side, so ten pictures fill four rows without a gap. */
.gallery li:nth-child(1) { grid-column: span 2; grid-row: span 2; }
.gallery li:nth-child(6) { grid-column: 3 / span 2; grid-row: span 2; }
.shot { display: block; position: relative; height: 100%; overflow: hidden; background: var(--si-ink); }
.shot img { width: 100%; height: 100%; aspect-ratio: 16 / 9; object-fit: cover; opacity: 0.82; transition: opacity var(--t-slow), transform 600ms ease-out; }
.shot::after { content: ""; position: absolute; inset: 0; border: var(--line) solid var(--si-smoke); transition: border-color var(--t); pointer-events: none; }
.shot:hover img, .shot:focus-visible img { opacity: 1; transform: scale(1.03); }
.shot:hover::after, .shot:focus-visible::after { border-color: var(--si-pulse-a45); }
.shot:focus-visible { outline-offset: 2px; }

/* ── Devlogs ── */
.devlogs { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 36px); }
.devlog a { display: flex; flex-direction: column; height: 100%; text-decoration: none; background: var(--si-ink); border: var(--line) solid var(--si-smoke); transition: border-color var(--t), background-color var(--t); }
.devlog a:hover, .devlog a:focus-visible { border-color: var(--si-dust); background: var(--si-soot); }
.devlog__cover { display: block; overflow: hidden; border-bottom: var(--line) solid var(--si-smoke); }
.devlog__cover img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: transform 600ms ease-out; }
.devlog a:hover .devlog__cover img { transform: scale(1.03); }
.devlog__meta { display: flex; justify-content: space-between; gap: 12px; padding: 20px 22px 0; font: 400 12px/1.2 var(--font-head); letter-spacing: 0.16em; text-transform: uppercase; color: var(--si-ash); }
.devlog__number { color: var(--si-mist); }
.devlog__title { display: block; padding: 12px 22px 24px; font: 300 21px/1.35 var(--font-head); letter-spacing: 0.04em; color: var(--si-pulse); }

/* ── Specs ── */
.specs table { width: 100%; border-collapse: collapse; }
.specs th, .specs td { padding: 16px 20px 16px 0; text-align: left; vertical-align: top; border-bottom: var(--line) solid var(--si-smoke); }
.specs thead th { font: 400 13px/1 var(--font-head); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--si-pulse); padding-bottom: 18px; }
.specs tbody th { width: 22%; font: 400 13px/1.6 var(--font-head); letter-spacing: 0.16em; text-transform: uppercase; color: var(--si-ash); }
.specs td { font-size: 16px; color: var(--si-mist); }
.note { margin-top: 28px; font: 400 16px/1.6 var(--font-note); color: var(--si-ash); }

/* ── Community ── */
.channels { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.channel {
  display: flex; flex-direction: column; gap: 6px; height: 100%;
  padding: 28px 24px; text-decoration: none;
  background: var(--si-ink); border: var(--line) solid var(--si-smoke);
  transition: border-color var(--t), background-color var(--t);
}
.channel svg { width: 26px; height: 26px; margin-bottom: 22px; color: var(--si-ash); transition: color var(--t); }
.channel__name { font: 400 18px/1.2 var(--font-head); letter-spacing: 0.16em; text-transform: uppercase; color: var(--si-pulse); }
.channel__handle { font-size: 15px; color: var(--si-ash); overflow-wrap: anywhere; }
.channel:hover, .channel:focus-visible { border-color: var(--si-dust); background: var(--si-soot); }
.channel:hover svg, .channel:focus-visible svg { color: var(--si-pulse); }

/* ── Closing band ── */
.closing {
  position: relative; overflow: hidden; isolation: isolate;
  padding: clamp(96px, 14vw, 180px) 0;
  text-align: center;
  border-top: var(--line) solid var(--si-smoke);
}
.closing::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: url("../img/fog.png") repeat; background-size: 1700px 1700px; opacity: 0.08;
  animation: fog-a 283s linear infinite;
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 50% 50%, #000 20%, transparent 75%);
          mask-image: radial-gradient(ellipse 70% 80% at 50% 50%, #000 20%, transparent 75%);
}
.closing .wrap { display: flex; flex-direction: column; align-items: center; }
.closing__line {
  max-width: 760px; margin-bottom: 44px;
  font: 300 clamp(26px, 3.4vw, 42px)/1.3 var(--font-head); letter-spacing: 0.1em; text-transform: uppercase; color: var(--si-pulse);
}
.closing__sub { margin-top: 24px; font-size: 16px; color: var(--si-ash); }

/* ── Footer ── */
.footer { padding: 48px 0 40px; border-top: var(--line) solid var(--si-smoke); font-size: 15px; color: var(--si-ash); }
.footer__row { display: flex; align-items: center; justify-content: space-between; gap: 24px 40px; flex-wrap: wrap; }
.footer__name { font: 400 14px/1.4 var(--font-head); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--si-pulse); }
.footer a { text-decoration: none; transition: color var(--t); }
.footer a:hover, .footer a:focus-visible { color: var(--si-pulse); }
.footer__links { display: flex; gap: 28px; font: 400 13px/1 var(--font-head); letter-spacing: var(--ls-label); text-transform: uppercase; }
.footer__social { display: flex; gap: 4px; }
.footer__legal { margin-top: 32px; font-size: 13px; color: var(--si-ash); }

/* ── Dialogs (trailer, screenshots) ── */
.modal {
  width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0;
  border: 0; background: var(--si-void-a95); color: var(--si-pulse);
  overscroll-behavior: contain;
}
.modal[open] { display: grid; place-items: center; animation: fade-in var(--t-slow) ease-out; }
.modal::backdrop { background: transparent; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.modal__close {
  position: absolute; top: 20px; right: 20px; z-index: 2;
  width: 48px; height: 48px; background: none; border: var(--line) solid var(--si-smoke); cursor: pointer;
  transition: border-color var(--t);
}
.modal__close::before, .modal__close::after { content: ""; position: absolute; left: 50%; top: 50%; width: 18px; height: var(--line); margin-left: -9px; background: var(--si-pulse); transform: rotate(45deg); }
.modal__close::after { transform: rotate(-45deg); }
.modal__close:hover, .modal__close:focus-visible { border-color: var(--si-pulse); }
.modal__video { width: min(92vw, calc(82vh * 16 / 9)); aspect-ratio: 16 / 9; background: var(--si-ink); border: var(--line) solid var(--si-smoke); }
.modal__video iframe { width: 100%; height: 100%; border: 0; display: block; }

.lightbox__figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 0 72px; }
.lightbox__figure img { max-width: min(100%, 1600px); max-height: calc(100vh - 140px); width: auto; height: auto; object-fit: contain; border: var(--line) solid var(--si-smoke); }
.lightbox__figure figcaption { display: flex; gap: 18px; align-items: baseline; font-size: 15px; color: var(--si-ash); text-align: center; }
.lightbox__count { font: 400 13px/1 var(--font-head); letter-spacing: 0.16em; color: var(--si-dust); flex-shrink: 0; }
.lightbox__nav {
  position: absolute; top: 50%; width: 52px; height: 52px; margin-top: -26px;
  background: none; border: var(--line) solid var(--si-smoke); cursor: pointer; transition: border-color var(--t);
}
.lightbox__nav::before { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; border-left: var(--line) solid var(--si-pulse); border-bottom: var(--line) solid var(--si-pulse); }
.lightbox__nav--prev { left: 16px; }
.lightbox__nav--prev::before { margin: -6px 0 0 -3px; transform: rotate(45deg); }
.lightbox__nav--next { right: 16px; }
.lightbox__nav--next::before { margin: -6px 0 0 -9px; transform: rotate(-135deg); }
.lightbox__nav:hover, .lightbox__nav:focus-visible { border-color: var(--si-pulse); }

/* ── Document pages (privacy, press) ── */
.prose { max-width: calc(780px + 2 * var(--gutter)); padding-top: calc(var(--topbar-h) + 56px); padding-bottom: 96px; font-size: 17px; }
.prose h1 { margin: 22px 0 8px; font: 300 clamp(30px, 4vw, 44px)/1.15 var(--font-head); letter-spacing: 0.12em; text-transform: uppercase; color: var(--si-pulse); }
.prose h2 { margin: 44px 0 12px; font: 400 17px/1.3 var(--font-head); letter-spacing: 0.14em; text-transform: uppercase; color: var(--si-pulse); }
.prose p, .prose ul { margin: 0 0 14px; }
.prose ul { padding-left: 22px; list-style: disc; }
.prose li { margin: 4px 0; }
.prose li::marker { color: var(--si-dust); }
.prose a { color: var(--si-pulse); text-decoration-color: var(--si-dust); text-underline-offset: 3px; }
.prose a:hover { text-decoration-color: var(--si-pulse); }
.prose .date { font: 400 15px/1.5 var(--font-note); color: var(--si-ash); margin-bottom: 24px; }
.prose section + section { margin-top: 80px; padding-top: 48px; border-top: var(--line) solid var(--si-smoke); }

/* ── Reveal on scroll (added by main.js; without JS everything is simply visible) ── */
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity 900ms ease-out, transform 900ms ease-out; }
.js .reveal.is-visible { opacity: 1; transform: none; }

/* ── Smaller screens ── */
@media (max-width: 1080px) {
  .topbar__nav { display: none; }
  .gallery { grid-template-columns: repeat(3, 1fr); }
  .gallery li:nth-child(1) { grid-column: span 3; grid-row: auto; }
  .gallery li:nth-child(6) { grid-column: auto; grid-row: auto; }
  .channels { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
  .sides { grid-template-columns: 1fr; }
  .feature { grid-template-columns: 1fr; gap: 28px; }
  .feature:nth-child(even) .frame { order: 0; }
  .devlogs { grid-template-columns: 1fr; max-width: 560px; }
  .hero__social { position: static; margin-top: 40px; }
  .hero { align-items: center; justify-content: center; padding-bottom: 48px; text-align: center; }
  .hero__content { margin-top: auto; align-items: center; }
  .hero__actions { justify-content: center; margin-left: 0; }
  .hero__actions .btn--primary { margin-left: 0; }
  .status::after { content: ""; width: 40px; height: var(--line); background: var(--si-smoke); }
}

@media (max-width: 640px) {
  :root { --topbar-h: 60px; }
  body { font-size: 17px; }
  .topbar { gap: 12px; }
  .topbar__logo img { width: 92px; }
  .topbar__end { gap: 14px; }
  .btn--small { padding: 9px 12px; font-size: 12px; letter-spacing: 0.14em; }
  .btn--small:hover, .btn--small:focus-visible { letter-spacing: 0.16em; }
  .btn--small .dot { display: none; }
  .btn { font-size: 14px; letter-spacing: 0.24em; }
  .btn:hover, .btn:focus-visible { letter-spacing: 0.28em; }
  .btn--primary { padding: 15px 22px; }
  .hero__actions { flex-direction: column; gap: 8px; }
  /* On a phone the picture takes the top of the screen and the text sits below it on black,
     so the logo does not cover Krav. */
  .hero__media { bottom: 26%; }
  .hero__img { object-position: 50% 50%; }
  .hero__shade { background: linear-gradient(to bottom, var(--si-void-a55) 0%, transparent 18%, transparent 40%, var(--si-void-a90) 68%, var(--si-void) 74%); }
  .hero__social { display: none; }
  .facts { flex-direction: column; gap: 12px; }
  .facts li + li::before { display: none; }
  .facts li::before { content: ""; width: 4px; height: 4px; margin-right: 14px; border-radius: 50%; background: var(--si-dust); }
  .gallery { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .gallery li:nth-child(1), .gallery li:nth-child(6) { grid-column: span 2; }
  .channels { grid-template-columns: 1fr; }
  .channel { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 16px; padding: 20px; }
  .channel svg { margin: 0; }
  .channel__handle { flex-basis: 100%; padding-left: 42px; }
  /* The spec table turns into one block per row, each value tagged with its column. */
  .specs thead { display: none; }
  .specs tr { display: block; padding: 16px 0; border-bottom: var(--line) solid var(--si-smoke); }
  .specs th, .specs td { display: block; width: auto; padding: 4px 0; border: 0; }
  .specs tbody th { width: auto; margin-bottom: 6px; }
  .specs td { display: grid; grid-template-columns: 112px 1fr; gap: 8px; }
  .specs td::before { content: attr(data-head); padding-top: 4px; font: 400 12px/1 var(--font-head); letter-spacing: 0.14em; text-transform: uppercase; color: var(--si-dust); }
  .lightbox__figure { padding: 0 12px; }
  .lightbox__nav { top: auto; bottom: 20px; margin: 0; }
  .lightbox__figure img { max-height: calc(100vh - 200px); }
  .footer__row { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 340px) {
  .topbar__end .btn { display: none; }
}

/* ── Reduced motion: no drifting, no rings, videos wait for a click ── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: 0ms !important; }
  .js .reveal { opacity: 1; transform: none; }
  .ripple { display: none; }
}