@view-transition { navigation: auto; }
/* Shared base for every page except the splash (the splash has its own splash.css) */
:root {
  color-scheme: dark;
  --bg: #0a1320; --ink: #e8f3ff; --dim: #7f93a8; --blue: #3ca0ff; --violet: #a03cff;
  --edge: rgba(150, 200, 255, .16);
  --head: "Barlow Condensed", "Arial Narrow", Impact, sans-serif;
  --mono: "JetBrains Mono", Consolas, monospace;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --pad: clamp(16px, 4vw, 56px);
  font-family: var(--mono); color: var(--ink); background: var(--bg); scroll-behavior: smooth;
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: var(--bg); line-height: 1.55; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--blue); color: #000; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px dashed var(--blue); outline-offset: 3px; }
.skip { position: fixed; z-index: 50; top: 8px; left: 8px; padding: 10px 14px; background: var(--blue); color: #000; transform: translateY(-160%); }
.skip:focus { transform: none; }

body::before, body::after { position: fixed; inset: 0; z-index: 30; content: ""; pointer-events: none; }
body::before { opacity: .14; mix-blend-mode: overlay; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
body::after { background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .16) 0 1px, transparent 1px 3px), radial-gradient(ellipse at center, transparent 60%, rgba(0, 0, 0, .55) 100%); }

.nav { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; height: 64px; padding: 0 var(--pad); background: linear-gradient(#0a1320f2, #0a1320b0); backdrop-filter: blur(10px); border-bottom: 1px solid #ffffff0f; font-size: 10px; letter-spacing: .16em; color: var(--dim); }
.mark { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); font: 800 15px var(--head); letter-spacing: .18em; }
.mark b { display: grid; place-items: center; width: 28px; height: 28px; background: var(--blue); color: #000; font: 700 13px var(--mono); letter-spacing: -.08em; box-shadow: 3px 3px 0 #000, 3px 3px 0 1px #ffffff33; }
.nav__links { display: flex; gap: 22px; }
.nav__links a { padding: 6px 0; border-bottom: 1px solid transparent; transition: color .2s, border-color .2s; }
.nav__links a:hover, .nav__links a[aria-current] { color: var(--ink); border-color: var(--blue); }

.wrap { width: min(1200px, 100% - 2 * var(--pad)); margin-inline: auto; }
.kicker { color: var(--blue); font-size: 10px; letter-spacing: .3em; }
.h-xl { margin: 0; font: 800 clamp(64px, 12vw, 176px)/.8 var(--head); text-transform: uppercase; text-shadow: 3px 3px 0 #000; }
.h-lg { margin: 0; font: 800 clamp(40px, 6vw, 84px)/.88 var(--head); text-transform: uppercase; }
.dek { max-width: 46ch; color: #b4c7da; font-size: 14px; }

.btn { display: inline-flex; align-items: center; gap: 12px; padding: 13px 22px 12px; border: 2px solid #000; background: linear-gradient(180deg, #62b4ff, #2b84df 58%, #1f6fc2); color: #021426; font: 700 12px var(--mono); letter-spacing: .2em; cursor: pointer; box-shadow: inset 0 1px 0 #fff9, inset 0 -3px 0 #0000004a, 5px 5px 0 #000, 5px 5px 0 1px #ffffff26; transition: transform .15s, box-shadow .15s; }
.btn:hover { transform: translate(-1px, -1px); }
.btn:active { transform: translate(3px, 3px); box-shadow: inset 0 1px 0 #fff9, inset 0 -3px 0 #0000004a, 2px 2px 0 #000; }
.btn--ghost { background: #ffffff0a; color: var(--ink); border-color: #ffffff30; box-shadow: 5px 5px 0 #3ca0ff38; }

.glass { border: 1px solid var(--edge); background: linear-gradient(160deg, #78beff1f, #3ca0ff08 60%); backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3); box-shadow: inset 0 1px 0 #ffffff29, inset 0 -1px 0 #0006, 6px 6px 0 #3ca0ff38; }
.led { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #cfe8ff, var(--blue) 55%, #0b3a6a); box-shadow: 0 0 8px #3ca0ffaa; }
.led--live { background: radial-gradient(circle at 35% 30%, #ffd0d0, #ff4d4d 55%, #6a0b0b); box-shadow: 0 0 10px #ff4d4daa; animation: blink 1.4s steps(2) infinite; }
.led--off { background: #1e2a38; box-shadow: none; }
@keyframes blink { 50% { opacity: .3; } }

.foot { display: flex; justify-content: space-between; gap: 12px; padding: 18px var(--pad); border-top: 1px solid #ffffff0f; color: var(--dim); font-size: 10px; letter-spacing: .16em; }
.foot a:hover { color: var(--ink); }
@media (max-width: 640px) { .nav__links { gap: 14px; } .nav .mark span { display: none; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

/* nav: many links, scroll on small screens */
.nav__links { overflow-x: auto; scrollbar-width: none; }
.nav__links a { white-space: nowrap; }
@media (max-width: 900px) { .nav { gap: 14px; } .nav .mark span { display: none; } }

/* article pages */
.page { padding-block: clamp(40px, 7vw, 88px); }
.page__head { display: grid; gap: 18px; margin-bottom: clamp(36px, 6vw, 72px); }
.page__head .h-xl { font-size: clamp(56px, 10vw, 140px); }
.block { padding-block: clamp(32px, 5vw, 56px); border-top: 1px solid #ffffff0f; }
.block > .kicker { display: block; margin-bottom: 14px; }
.block h2 { margin: 0 0 18px; font: 800 clamp(34px, 5vw, 60px)/.92 var(--head); text-transform: uppercase; }
.prose { max-width: 62ch; color: #c4d5e6; font-size: 14.5px; }
.prose p { margin: 0 0 1.1em; }
.prose strong { color: var(--ink); font-weight: 500; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 22px; margin: 0; padding: 0; list-style: none; }
.card { padding: 20px; display: grid; gap: 8px; align-content: start; }
.card small { color: var(--blue); font-size: 10px; letter-spacing: .22em; }
.card h3 { margin: 0; font: 800 28px/1 var(--head); text-transform: uppercase; letter-spacing: .02em; }
.card p { margin: 0; color: #b4c7da; font-size: 13px; }
.hint { color: var(--dim); font-size: 11px; letter-spacing: .12em; }
.redact { background: var(--ink); color: transparent; user-select: none; padding: 0 4px; }
.qa { display: grid; gap: 14px; }
.qa details { padding: 0; }
.qa summary { cursor: pointer; padding: 16px 18px; list-style: none; font: 700 12px var(--mono); letter-spacing: .08em; display: flex; justify-content: space-between; gap: 16px; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: "+"; color: var(--blue); font-size: 18px; line-height: 1; }
.qa details[open] summary::after { content: "–"; }
.qa details p { margin: 0; padding: 0 18px 18px; color: #b4c7da; font-size: 13.5px; max-width: 70ch; }
.qa h3 { margin: 28px 0 0; color: var(--blue); font-size: 10px; letter-spacing: .3em; font-weight: 500; }
@media (max-width: 800px) { .two { grid-template-columns: 1fr; } }

/* the hidden attribute must win over display rules */
[hidden] { display: none !important; }

/* ================= phones & small tablets ================= */
.nav__menu { display: none; align-items: center; gap: 10px; height: 40px; padding: 0 14px; border: 1px solid #ffffff2a; background: #ffffff0a; color: var(--ink); font: 700 10px var(--mono); letter-spacing: .2em; cursor: pointer; }
.nav__menu i { position: relative; width: 16px; height: 2px; background: currentColor; box-shadow: 0 -5px 0 currentColor, 0 5px 0 currentColor; transition: box-shadow .2s, transform .2s; }
.nav__menu[aria-expanded="true"] i { box-shadow: none; transform: rotate(45deg); }
.nav__menu[aria-expanded="true"] i::after { position: absolute; inset: 0; background: currentColor; content: ""; transform: rotate(90deg); }
.sheet { display: none; }

@media (max-width: 900px) {
  .nav { gap: 10px; }
  .nav__links { display: none; }
  .nav__menu { display: inline-flex; }
  .sheet { position: fixed; z-index: 18; top: 64px; left: 0; right: 0; bottom: 0; display: grid; align-content: start; gap: 22px; overflow-y: auto; padding: 18px var(--pad) 48px; background: rgba(10, 19, 32, .97); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); overscroll-behavior: contain; }
  .sheet__title { margin: 0 0 8px; color: var(--blue); font-size: 10px; letter-spacing: .3em; }
  .sheet__link { display: grid; gap: 2px; min-height: 58px; align-content: center; margin-bottom: 10px; padding: 10px 16px; border: 1px solid var(--edge); background: linear-gradient(160deg, #78beff1f, #3ca0ff08 60%); box-shadow: inset 0 1px 0 #ffffff1f, 4px 4px 0 #3ca0ff2b; }
  .sheet__link b { font: 800 28px/1 var(--head); text-transform: uppercase; letter-spacing: .03em; }
  .sheet__link small { color: var(--dim); font-size: 11px; letter-spacing: .06em; }
  .sheet__link[aria-current] { border-left: 4px solid var(--blue); background: linear-gradient(160deg, #3ca0ff33, #3ca0ff0d 60%); }
  html.menu-open { overflow: hidden; }
}

@media (max-width: 700px) {
  :root { --pad: 18px; }
  .nav { height: 60px; }
  .sheet { top: 60px; }
  .onair { min-height: 38px; }
  .foot { flex-wrap: wrap; gap: 4px 16px; justify-content: center; padding-block: 8px; }
  .foot a, .foot button { display: inline-flex; align-items: center; min-height: 40px; }
  .foot > span { order: 3; flex-basis: 100%; text-align: center; opacity: .8; }
  .h-lg { font-size: clamp(34px, 11vw, 48px); }
  .btn { min-height: 46px; }
  .block { padding-block: 28px; }
  .block h2 { font-size: clamp(30px, 9.5vw, 42px); }
  .prose { font-size: 14px; }
  .prose a, .hint a, .support a { display: inline-block; padding: 8px 0; }
  .card { padding: 16px; }
  .qa summary { padding: 18px 16px; min-height: 52px; align-items: center; }
  .page { padding-block: 26px 40px; }
  .page__head { margin-bottom: 26px; }
}