@font-face{font-family:"Space Grotesk";font-weight:500;font-style:normal;font-display:swap;src:url(/fonts/space-grotesk-500.woff2) format("woff2")}
@font-face{font-family:"Space Grotesk";font-weight:700;font-style:normal;font-display:swap;src:url(/fonts/space-grotesk-700.woff2) format("woff2")}
@font-face{font-family:"Space Mono";font-weight:400;font-style:normal;font-display:swap;src:url(/fonts/space-mono-400.woff2) format("woff2")}
:root{
  --ink:#e9ecf5; --dim:#a9b0c6; --faint:#7d859e; --bg:#04050b; --panel:#0b0e1a; --line:#1d2340;
  --teal:#5fd4e6; --violet:#a58bff;
  --display:"Space Grotesk",system-ui,sans-serif; --mono:"Space Mono",ui-monospace,monospace;
}
*{box-sizing:border-box}
html{background:var(--bg);color:var(--ink);-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--display);font-weight:500;font-size:1.125rem;line-height:1.7}
a{color:var(--teal)}
a:hover{color:#fff}
:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
.skip{position:absolute;left:-9999px;top:0;background:#fff;color:#000;padding:.6rem 1rem;z-index:10}
.skip:focus{left:1rem;top:1rem}
.mono{font-family:var(--mono);font-size:.8rem;letter-spacing:.18em;text-transform:uppercase}

/* top bar */
.bar{position:absolute;top:0;left:0;right:0;z-index:3;display:flex;justify-content:space-between;align-items:center;padding:1.4rem clamp(1.2rem,4vw,3rem)}
.bar a{color:var(--ink);text-decoration:none}
.bar nav a{margin-left:1.6rem;color:var(--dim)}
.bar nav a:hover{color:#fff}
.mark{font-family:var(--display);font-weight:700;letter-spacing:.32em;font-size:.9rem}

/* hero */
.hero{position:relative;min-height:100vh;min-height:100svh;display:grid;place-items:center;overflow:hidden;isolation:isolate}
.hero video,.hero .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at center,rgba(4,5,11,.15) 0%,rgba(4,5,11,.55) 70%,rgba(4,5,11,.9) 100%)}
.hero-in{text-align:center;padding:0 1.2rem;max-width:62rem}
.hero h1{margin:0;font-weight:700;font-size:clamp(2.6rem,9vw,7.5rem);letter-spacing:.08em;line-height:1;text-transform:uppercase}
.hero .lede{margin:1.6rem auto 0;max-width:34rem;color:var(--ink);font-size:clamp(1.05rem,2vw,1.35rem)}
.hero .status{margin-top:2.4rem;color:var(--teal)}
.hero .status span{display:inline-block;width:.55rem;height:.55rem;border-radius:50%;background:var(--teal);margin-right:.7rem;vertical-align:middle;animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.25}50%{opacity:1}}
.vctl{position:absolute;right:clamp(1rem,3vw,2rem);bottom:clamp(1rem,3vw,2rem);z-index:2;background:rgba(4,5,11,.55);color:var(--ink);border:1px solid var(--line);border-radius:999px;padding:.5rem 1rem;font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;cursor:pointer}
.vctl:hover{border-color:var(--teal)}

/* sections */
.wrap{max-width:72rem;margin:0 auto;padding:0 clamp(1.2rem,4vw,3rem)}
.essays{padding:clamp(4rem,9vw,7rem) 0}
.essays h2{font-size:clamp(1.8rem,3.5vw,2.6rem);margin:0 0 2.4rem;letter-spacing:.02em}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(18rem,1fr));gap:1.4rem}
.card{display:block;text-decoration:none;color:var(--ink);background:linear-gradient(160deg,#0e1330 0%,#090b16 60%);border:1px solid var(--line);border-radius:14px;padding:2rem 1.8rem;min-height:15rem;position:relative;overflow:hidden}
.card:hover{border-color:var(--violet);color:#fff}
.card .mono{color:var(--violet)}
.card h3{font-size:1.55rem;line-height:1.25;margin:1rem 0 .8rem}
.card p{color:var(--dim);margin:0;font-size:1.02rem}

/* article */
.ahead{position:relative;padding:clamp(8rem,16vw,12rem) 0 clamp(3rem,6vw,4.5rem);background:#04050b url(/media/space-poster.jpg) center/cover no-repeat;isolation:isolate}
.ahead::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(4,5,11,.35),rgba(4,5,11,.92))}
.ahead h1{font-size:clamp(2.2rem,5.5vw,4.2rem);line-height:1.08;margin:.8rem 0 1.2rem;max-width:52rem}
.ahead .dek{color:var(--dim);max-width:44rem;font-size:1.2rem;margin:0}
.ahead .mono{color:var(--teal)}
.prose{max-width:44rem;margin:0 auto;padding:clamp(3rem,6vw,4.5rem) clamp(1.2rem,4vw,0px) 4rem}
.prose h2{font-size:1.75rem;line-height:1.25;margin:3rem 0 1rem}
.prose p,.prose li{color:#d5d9e6}
.prose blockquote{margin:2rem 0;padding:1.2rem 1.6rem;border-left:3px solid var(--violet);background:var(--panel);border-radius:0 10px 10px 0;font-size:1.25rem;color:var(--ink)}
.facts{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:1.6rem 1.8rem;margin:2.4rem 0;font-size:1.15rem}
.facts h2{margin:0 0 .8rem;font-size:1.25rem}
.facts ul{margin:0;padding-left:1.2rem}
.sources{border-top:1px solid var(--line);margin-top:3.5rem;padding-top:1.5rem;font-size:.98rem}
.sources h2{font-size:1.2rem;margin-top:0}
.sources li{color:var(--dim);margin-bottom:.5rem}
.next{margin-top:3rem}
.next a{font-weight:700}

/* footer */
footer{border-top:1px solid var(--line);padding:2.4rem 0 3rem;color:var(--faint);font-size:.95rem}
footer .wrap{display:flex;flex-wrap:wrap;gap:1rem 2rem;justify-content:space-between;align-items:center}
footer nav a{color:var(--dim);margin-right:1.4rem;text-decoration:none}
footer nav a:hover{color:#fff;text-decoration:underline}

@media (max-width:640px){.bar nav{display:none}.card{min-height:0}}
@media (prefers-reduced-motion:reduce){.hero .status span{animation:none;opacity:1}}
.prose em{font-style:normal;color:var(--ink)}
footer .tm{flex-basis:100%;margin:0;font-size:.82rem;color:var(--faint)}
.ahead .wrap,.prose{box-sizing:content-box;max-width:44rem;padding-left:1.2rem;padding-right:1.2rem}