:root { --ink:#0a0d14; --paper:#f2f0e9; --muted:#aeb4ad; --gold:#e8b84b; --line:rgba(232,184,75,.32); --panel:#141b1b; }
* { box-sizing:border-box; }
html { background:var(--ink); }
body { margin:0; background:radial-gradient(circle at 74% -8%,#243b47 0,transparent 37%),var(--ink); color:var(--paper); font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; line-height:1.6; }
a { color:#ffe09a; text-underline-offset:3px; }
.shell { width:min(1080px,calc(100% - 40px)); margin:auto; }
.nav { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:20px 0; font-size:13px; }
.brand { text-decoration:none; letter-spacing:.28em; color:var(--paper); font-weight:500; }
.brand span { color:var(--gold); }
.nav-links { display:flex; flex-wrap:wrap; gap:14px; }
.nav-links a { color:var(--muted); text-decoration:none; }
.hero { padding:76px 0 56px; max-width:820px; }
.eyebrow { color:var(--gold); font-size:11px; letter-spacing:.19em; text-transform:uppercase; }
h1 { margin:15px 0 18px; font-size:clamp(40px,7vw,76px); line-height:1; letter-spacing:-.045em; font-weight:350; }
h2 { margin:0 0 14px; font-size:clamp(25px,3vw,34px); line-height:1.15; font-weight:400; }
h3 { margin:0 0 8px; font-size:18px; font-weight:500; }
p { margin:0 0 15px; color:#d5d8d2; }
.lede { font-size:clamp(18px,2.5vw,25px); color:#e7e8e1; max-width:760px; }
.actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
.button { display:inline-block; border:1px solid var(--line); border-radius:999px; padding:10px 16px; color:var(--paper); text-decoration:none; }
.button.primary { background:var(--gold); border-color:var(--gold); color:#242015; font-weight:650; }
.grid { display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); margin:24px 0 68px; }
.card,.note { padding:22px; border:1px solid rgba(222,229,212,.14); border-radius:16px; background:rgba(255,255,255,.045); }
.card p,.note p { color:#bec4bd; }
.note { border-color:rgba(232,184,75,.35); background:rgba(232,184,75,.07); }
.section { padding:55px 0; border-top:1px solid rgba(222,229,212,.13); }
.section ul,.section ol { padding-left:21px; color:#d5d8d2; }
.section li { margin:8px 0; }
.source { border-left:2px solid var(--gold); padding:8px 0 8px 16px; margin:14px 0; }
.source p { margin:3px 0 0; font-size:14px; }
.footer { padding:30px 0 50px; color:#89938a; font-size:13px; border-top:1px solid rgba(222,229,212,.13); }
.embed-frame { width:100%; aspect-ratio:16/9; border:1px solid var(--line); border-radius:16px; background:#000; }
code { padding:2px 5px; color:#ffe09a; background:#111820; border-radius:4px; }
@media (max-width:640px) { .shell { width:min(100% - 28px,1080px); }.nav { align-items:flex-start; flex-direction:column; }.hero { padding:48px 0 38px; } }