:root {
  --ink: #0a0a0c; --panel: #131318; --line: #2a2a33; --text: #f2f2f5; --muted: #9a9aa8;
  --accent: #2447e8; --accent-ink: #fff; --tbc: #e8b324;
  --display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --body: "Space Grotesk", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --ink: #f6f6f8; --panel: #fff; --line: #d9d9e0; --text: #0a0a0c; --muted: #5d5d6b; --tbc: #8a6500;
  }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--ink); color: var(--text); font: 16px/1.55 var(--body); }
.top, main, .foot { max-width: 1040px; margin: 0 auto; padding: 0 16px; width: 100%; }
main { display: block; }
.top { padding-top: 40px; padding-bottom: 8px; }
.eyebrow { font: 500 12px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; }
h1 { font: 800 clamp(40px, 9vw, 72px)/.95 var(--display); text-transform: uppercase; margin: 0 0 12px; }
.lede { color: var(--muted); max-width: 52ch; margin: 0 0 24px; }
.card { background: var(--panel); border: 1px solid var(--line); margin: 0 0 28px; display: grid; gap: 0; }
@media (min-width: 820px) { .card { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); } }
.card > * { min-width: 0; }
.media { align-self: start; background: #000; aspect-ratio: 16/9; display: grid; place-items: center; position: relative; }
.media video { width: 100%; max-width: 100%; height: 100%; object-fit: contain; display: block; background: #000; }
.soon { color: var(--muted); font: 500 13px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.body { padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.team { font: 500 12px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 0; }
h2 { font: 800 clamp(30px, 6vw, 44px)/1 var(--display); text-transform: uppercase; margin: 0; }
.status { display: inline-block; font: 500 12px var(--mono); border: 1px solid var(--line); padding: 2px 8px; margin: 0; width: fit-content; }
dl { margin: 0; display: grid; gap: 12px; }
dt { font: 500 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
dd { margin: 2px 0 0; }
.tbc { color: var(--tbc); font-style: italic; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; padding-top: 6px; }
.btn { appearance: none; cursor: pointer; text-decoration: none; font: 600 14px var(--body); color: var(--accent-ink); background: var(--accent); border: 2px solid var(--text); padding: 10px 16px; box-shadow: 4px 4px 0 var(--text); min-height: 44px; display: inline-flex; align-items: center; }
.btn:hover { transform: translate(-1px,-1px); box-shadow: 5px 5px 0 var(--text); }
.btn.alt { background: transparent; color: var(--text); }
.btn:focus-visible { outline: 3px solid var(--tbc); outline-offset: 2px; }
.foot { color: var(--muted); font: 12px var(--mono); padding-bottom: 40px; }
.loading { color: var(--muted); }