@font-face{font-family:Michroma;src:url(/fonts/Michroma-Regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Inter;src:url(/fonts/inter-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Inter;src:url(/fonts/inter-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
:root{--midnight:#0A0A0D;--crimson:#FF2D2D;--silver:#D8DCE2;--charcoal:#151519;--muted:#9AA0AA;--line:#2A2A31}
*{box-sizing:border-box}
html{background:var(--midnight);color-scheme:dark}
body{margin:0;background:radial-gradient(900px 500px at 85% 10%,rgba(255,45,45,.14),transparent 70%),var(--midnight);color:var(--silver);font:400 17px/1.6 Inter,system-ui,-apple-system,"Segoe UI",sans-serif;min-height:100vh;display:flex;flex-direction:column;overflow-x:hidden}
a{color:var(--silver);text-decoration-color:rgba(255,45,45,.7);text-underline-offset:3px}
a:hover{color:#fff;text-decoration-color:var(--crimson)}
a:focus-visible{outline:2px solid var(--crimson);outline-offset:3px;border-radius:2px}
.wrap{width:100%;max-width:1180px;margin:0 auto;padding:0 16px}
header{padding:20px 0;border-bottom:1px solid var(--line)}
header .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px}
.logo{display:block;height:auto;width:min(260px,62vw)}
.status{font:400 11px/1 Michroma,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--crimson);border:1px solid rgba(255,45,45,.55);padding:9px 12px;border-radius:999px;white-space:nowrap}
.hero{padding:56px 0 48px}
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.eyebrow{font:400 12px/1.4 Michroma,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin:0 0 18px}
h1{font:400 clamp(21px,4.2vw,46px)/1.18 Michroma,sans-serif;margin:0 0 24px;letter-spacing:.01em;color:#F2F4F7}
h1 span{display:block;overflow-wrap:anywhere}
h1{overflow-wrap:anywhere}
h1 .red{color:var(--crimson)}
.lede{font-size:19px;max-width:34em;margin:0 0 28px}
.art{margin:0;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--charcoal);box-shadow:0 0 60px rgba(255,45,45,.12)}
.art img{display:block;width:100%;height:auto}
section{padding:40px 0;border-top:1px solid var(--line)}
.cards{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.card{background:var(--charcoal);border:1px solid var(--line);border-radius:12px;padding:28px}
h2{font:400 15px/1.4 Michroma,sans-serif;letter-spacing:.1em;text-transform:uppercase;margin:0 0 14px;color:#F2F4F7}
.card p{margin:0 0 12px}.card p:last-child{margin:0}
.btn{display:inline-block;margin-top:6px;padding:12px 20px;border:1px solid var(--crimson);border-radius:8px;color:#fff;text-decoration:none;font-weight:600;background:linear-gradient(#B00016,#6f000f)}
.btn:hover{background:linear-gradient(#d0001c,#8a0013)}
footer{margin-top:auto;border-top:1px solid var(--line);padding:28px 0;color:var(--muted);font-size:14px}
footer .wrap{display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between}
footer p{margin:0}
.nf{text-align:center;padding:96px 0}
.nf .big{font:400 clamp(56px,14vw,120px)/1 Michroma,sans-serif;color:var(--crimson);margin:0 0 16px}
.nf .lede{margin-inline:auto}
.nf img{width:min(180px,50vw);height:auto;margin-bottom:24px}
/* Subtle hero motion (Chris 2026-11-04). CSS only; nothing moves for people who ask for reduced motion. */
.art{position:relative;isolation:isolate}
.status{display:inline-flex;align-items:center;gap:8px}
.status::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--crimson);box-shadow:0 0 8px var(--crimson)}
@media (prefers-reduced-motion:no-preference){
  .eyebrow,.lede,h1 span{opacity:0;transform:translateY(14px);animation:ks-rise .9s cubic-bezier(.2,.7,.2,1) forwards}
  .eyebrow{animation-delay:.05s}
  h1 span:nth-child(1){animation-delay:.2s}
  h1 span:nth-child(2){animation-delay:.38s}
  h1 span:nth-child(3){animation-delay:.56s}
  .lede{animation-delay:.8s}
  h1 .red{animation:ks-rise .9s cubic-bezier(.2,.7,.2,1) .56s forwards,ks-ember 5.5s ease-in-out 1.6s infinite}
  .art{opacity:0;animation:ks-fade 1.2s ease .3s forwards,ks-breathe 7s ease-in-out 1.5s infinite}
  .art img{transform-origin:62% 48%;animation:ks-drift 22s ease-in-out infinite alternate}
  .art::after{content:"";position:absolute;inset:-20% -60%;z-index:1;pointer-events:none;background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.07) 49%,rgba(255,90,90,.10) 51%,transparent 58%);transform:translateX(-60%);animation:ks-sweep 9s ease-in-out 2.2s infinite}
  .status::before{animation:ks-pulse 2.4s ease-in-out infinite}
}
@keyframes ks-rise{to{opacity:1;transform:none}}
@keyframes ks-fade{to{opacity:1}}
@keyframes ks-breathe{0%,100%{box-shadow:0 0 50px rgba(255,45,45,.10)}50%{box-shadow:0 0 90px rgba(255,45,45,.26)}}
@keyframes ks-drift{from{transform:scale(1)}to{transform:scale(1.045)}}
@keyframes ks-sweep{0%{transform:translateX(-60%)}35%,100%{transform:translateX(60%)}}
@keyframes ks-ember{0%,100%{text-shadow:0 0 0 rgba(255,45,45,0)}50%{text-shadow:0 0 18px rgba(255,45,45,.45)}}
@keyframes ks-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}
@media (max-width:900px){.hero .wrap{grid-template-columns:1fr;gap:32px}.hero{padding:40px 0 32px}.cards{grid-template-columns:1fr}}
@media (max-width:480px){body{font-size:16px}.lede{font-size:17px}.status{font-size:9px;padding:7px 9px;letter-spacing:.08em}.eyebrow{font-size:10px;letter-spacing:.1em}.card{padding:22px}}
