/* $NIO — "the last broadcast before the timeline ends"
   Archetypes: D (concept/narrative: the site is a dying LIVE broadcast + the hero IS the meme) + B (dark lore dossier).
   Palette: mono black/white + crash red only. */
@font-face{font-family:"Anton";src:url(/fonts/anton-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Plex Mono";src:url(/fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Plex Mono";src:url(/fonts/ibm-plex-mono-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}

:root{
  --black:#050505; --black-2:#0e0e0e; --white:#f2f2f0; --grey:#9a9a96; --line:rgba(242,242,240,.14);
  --red:#e11d2a; --red-deep:#8f0c14;
  --display:"Anton",Impact,"Haettenschweiler","Arial Narrow Bold",sans-serif;
  --mono:"Plex Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  --pad:clamp(18px,4.5vw,96px);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--black);color:var(--white);font:400 clamp(15px,1.05vw,17px)/1.6 var(--mono);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video{display:block;max-width:100%;height:auto}
a{color:inherit}
strong{font-weight:600;color:var(--white)}
.red{color:var(--red)}
.wrap{max-width:1360px;margin-inline:auto;padding-inline:var(--pad)}
.label{font:600 .72rem/1.3 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--grey);margin:0}
h2{font:400 clamp(2.6rem,7.4vw,6.6rem)/.9 var(--display);text-transform:uppercase;letter-spacing:.005em;margin:.35em 0 .4em}
h3{font:400 clamp(1.5rem,2.6vw,2.3rem)/1 var(--display);text-transform:uppercase;margin:.3em 0 .35em}
section{padding-block:clamp(72px,10vw,150px)}
.skip{position:absolute;left:-999px;top:8px;background:var(--white);color:var(--black);padding:.5em 1em;z-index:200}
.skip:focus{left:8px}
:focus-visible{outline:3px solid var(--red);outline-offset:3px}

/* scanlines + grain = broadcast */
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:90;background:repeating-linear-gradient(to bottom,rgba(255,255,255,.025) 0 1px,transparent 1px 3px)}
body::after{content:"";position:fixed;inset:-50%;pointer-events:none;z-index:91;opacity:.09;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence baseFrequency='.85' 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>");animation:grain 1.2s steps(5) infinite}
@keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(-3%,2%)}50%{transform:translate(2%,-3%)}75%{transform:translate(-2%,-1%)}100%{transform:translate(1%,3%)}}

/* LIVE chyron */
.chyron{position:sticky;top:0;z-index:60;display:flex;align-items:stretch;height:34px;background:var(--red);color:#fff;font:600 .78rem/34px var(--mono);letter-spacing:.08em;text-transform:uppercase;overflow:hidden;border-bottom:2px solid #000}
.chyron-bug{flex:none;display:flex;align-items:center;gap:.5em;padding:0 .9em;background:#000;color:#fff;font-family:var(--display);font-size:1rem;letter-spacing:.1em}
.chyron-bug i,.face-bug i{width:.55em;height:.55em;border-radius:50%;background:var(--red);animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:.15}}
.chyron-track{display:flex;width:max-content;animation:crawl 40s linear infinite}
.chyron-run{display:flex}
.chyron-run span{padding:0 1.6em;white-space:nowrap;border-right:1px solid rgba(0,0,0,.35)}
.chyron-run b{font-weight:600;background:#000;padding:.1em .4em;margin-left:.4em}
@keyframes crawl{to{transform:translateX(-50%)}}

/* NAV */
.nav{position:sticky;top:34px;z-index:55;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.6rem var(--pad);background:rgba(5,5,5,.86);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav-mark{display:flex;align-items:center;gap:.6rem;text-decoration:none;font:400 1.5rem/1 var(--display);letter-spacing:.04em}
.nav-mark img{width:36px;height:auto;border:2px solid var(--white)}
.nav nav{display:flex;gap:clamp(.8rem,2vw,1.8rem)}
.nav nav a{font:600 .74rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:var(--grey)}
.nav nav a:hover{color:var(--white)}
.nav-cta{display:flex;gap:.5rem}
@media (max-width:900px){.nav nav{display:none}}

/* BUTTONS — hard-edge broadcast slabs */
.btn{display:inline-flex;align-items:center;gap:.5em;padding:.7em 1.15em;font:400 1rem/1 var(--display);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;border:2px solid var(--white);border-radius:0;cursor:pointer;transition:transform .1s,box-shadow .1s,background .2s;user-select:none}
.btn-lg{font-size:clamp(1.15rem,1.8vw,1.5rem);padding:.75em 1.4em}
.btn-red{background:var(--red);color:#fff;border-color:var(--red);box-shadow:5px 5px 0 var(--white)}
.btn-ink{background:var(--white);color:var(--black);box-shadow:5px 5px 0 var(--red)}
.btn-ghost{background:transparent;color:var(--white)}
.btn em{font:600 .62em/1 var(--mono);font-style:normal;letter-spacing:.14em;padding:.35em .5em;border:1px dashed currentColor}
.btn:not(.is-soon):hover{transform:translate(-2px,-2px)}
.btn.is-soon{cursor:not-allowed;opacity:.82;filter:saturate(.8)}
.btn.is-soon:hover{animation:nope .3s}
@keyframes nope{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}

/* HERO — the meme itself */
.hero{position:relative;min-height:calc(100svh - 34px);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:clamp(28px,4vw,56px) var(--pad) clamp(48px,6vw,80px);text-align:center;overflow:hidden;isolation:isolate}
.hero::before{content:"";position:absolute;inset:0;z-index:-2;background:radial-gradient(ellipse 60% 55% at 50% 42%,#262626 0%,var(--black) 70%)}
.hero-crash{position:absolute;inset:8% 0 auto 0;width:100%;height:70%;z-index:-1;opacity:.55}
.hero-crash polyline{fill:none;stroke:var(--red);stroke-width:3;vector-effect:non-scaling-stroke;stroke-dasharray:3200;stroke-dashoffset:3200;animation:draw 3.2s .4s cubic-bezier(.5,0,.3,1) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.hero-title{margin:0;display:grid;justify-items:center;position:relative}
.cap{font:400 clamp(4.6rem,17vw,15.5rem)/.86 var(--display);text-transform:uppercase;color:#fff;letter-spacing:.01em;
  -webkit-text-stroke:clamp(5px,.9vw,14px) #000;paint-order:stroke fill;text-shadow:0 .05em 0 #000,0 0 .3em rgba(0,0,0,.6)}
.cap-top{position:relative;z-index:3;margin-bottom:-.32em}
.cap-bot{position:relative;z-index:3;margin-top:-.3em}
.hero-face{position:relative;z-index:1;width:min(560px,74vw);border:3px solid var(--white);box-shadow:12px 12px 0 var(--red);background:#111;transform:rotate(-1.2deg)}
.hero-face img{width:100%;filter:grayscale(1) contrast(1.18) brightness(1.02)}
.face-bug{position:absolute;bottom:10px;left:10px;display:flex;align-items:center;gap:.45em;background:#000;color:#fff;padding:.3em .6em;font:600 .68rem/1 var(--mono);letter-spacing:.14em;z-index:2}
.face-stamp{position:absolute;right:-14px;bottom:24%;background:var(--red);color:#fff;font:400 clamp(.9rem,1.6vw,1.25rem)/1 var(--display);letter-spacing:.08em;padding:.45em .7em;transform:rotate(6deg);border:2px solid #000;z-index:2}
[data-split]{display:block}
.hero .cap-top{animation:drop .9s cubic-bezier(.2,.9,.2,1) both}
.hero .cap-bot{animation:rise .9s .25s cubic-bezier(.2,.9,.2,1) both}
.hero-face{animation:zoom 1s .05s cubic-bezier(.2,.9,.2,1) both}
@keyframes drop{from{transform:translateY(-40px);opacity:0}}
@keyframes rise{from{transform:translateY(40px);opacity:0}}
@keyframes zoom{from{transform:scale(1.08) rotate(0);opacity:0}}

.lower-third{margin-top:clamp(22px,3vw,40px);display:flex;flex-wrap:wrap;align-items:stretch;justify-content:center;gap:0;border:2px solid var(--white);background:#000;max-width:100%}
.lt-name{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:.55em 1.1em;background:var(--white);color:var(--black);text-align:left}
.lt-ticker{font:400 clamp(1.6rem,3vw,2.4rem)/1 var(--display);letter-spacing:.03em}
.lt-sub{font:600 .66rem/1.2 var(--mono);letter-spacing:.14em;text-transform:uppercase}
.ca{display:flex;align-items:center;gap:.8rem;padding:.4rem .4rem .4rem 1rem}
.ca-tag{font:600 .7rem var(--mono);letter-spacing:.18em;color:var(--red)}
.ca code{font:600 clamp(1rem,1.6vw,1.25rem) var(--mono);letter-spacing:.2em;color:#fff;max-width:52vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ca-copy{font:600 .7rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;background:transparent;color:var(--grey);border:1px dashed var(--grey);padding:.75em 1em;cursor:not-allowed}
.ca-copy:not([disabled]){background:var(--red);color:#fff;border:0;cursor:pointer}
.hero-line{max-width:46ch;margin:1.4rem auto .2rem;color:#d6d6d2}
.hero-cta{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center;margin-top:1.2rem}
.hero-note{margin-top:1.3rem;max-width:60ch}

/* band */
.band{background:var(--white);color:var(--black);border-block:3px solid var(--black);overflow:hidden;transform:rotate(-1.5deg) scale(1.03);margin-block:clamp(-10px,-1vw,-4px)}
.band-track{display:flex;width:max-content;animation:crawl 26s linear infinite reverse}
.band-track span{font:400 clamp(1.6rem,3.4vw,2.8rem)/1.25 var(--display);padding:.15em .55em;white-space:nowrap;text-transform:uppercase}
.band-track span:nth-child(4n+2){color:var(--red)}

/* LORE */
.lore{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(28px,5vw,90px);align-items:start}
.lore-head{position:sticky;top:120px}
.lore-body p{margin:0 0 1.2em;font-size:clamp(1rem,1.25vw,1.15rem)}
.stats{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,1fr);margin:0;border-top:2px solid var(--white)}
.stats div{padding:1.2rem 1rem 0 0;border-right:1px solid var(--line)}
.stats div:last-child{border-right:0}
.stats dt{font:600 .7rem/1.2 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--grey)}
.stats dd{margin:.25em 0 0;font:400 clamp(2.2rem,5vw,4.4rem)/1 var(--display)}
@media (max-width:820px){.lore{grid-template-columns:1fr}.lore-head{position:static}.stats{grid-template-columns:repeat(2,1fr)}.stats div{border-right:0;padding-bottom:1rem}}

/* TIMELINE */
.timeline{background:linear-gradient(180deg,var(--black),#0b0b0b 30%,var(--black));border-top:1px solid var(--line)}
.tl-intro,.rc-intro{max-width:62ch;color:#cfcfcb}
.tl{list-style:none;margin-top:clamp(28px,4vw,56px);position:relative}
.tl::before{content:"";position:absolute;left:calc(var(--pad) + 26px);top:0;bottom:0;width:2px;background:linear-gradient(var(--white),var(--red) 60%,var(--red))}
.tl-act{display:flex;align-items:baseline;gap:1rem;padding:2.2rem 0 1.2rem 72px;position:relative}
.tl-act span{font:600 .74rem var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--red)}
.tl-act strong{font:400 clamp(2rem,4vw,3.4rem)/1 var(--display);text-transform:uppercase}
.tl-act::before{content:"";position:absolute;left:18px;top:2.6rem;width:18px;height:18px;background:var(--red);border:3px solid var(--black);outline:2px solid var(--red)}
.tl-card{display:grid;grid-template-columns:1.05fr .9fr 1fr;gap:clamp(16px,2vw,32px);align-items:start;margin:0 0 clamp(28px,4vw,52px) 72px;padding:clamp(16px,2vw,28px);background:var(--black-2);border:1px solid var(--line);position:relative}
.tl-card::before{content:"";position:absolute;left:-52px;top:32px;width:12px;height:12px;background:var(--white);border-radius:50%}
.tl-num{display:block;font:400 clamp(3rem,5vw,4.6rem)/.85 var(--display);color:transparent;-webkit-text-stroke:1.5px var(--white)}
.tl-meta h3{margin-top:.4em}
.tl-cap{margin:.2em 0 .6em;color:#e6e6e2}
.tl-note{margin:0 0 .8em;color:var(--grey);font-size:.92em}
.tl-stat{color:var(--white)}
.tl-link{display:inline-block;margin-top:.9em;font:600 .74rem var(--mono);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;border-bottom:2px solid var(--red);padding-bottom:2px}
.tl-media{margin:0;border:2px solid var(--white);background:#000;position:relative}
.tl-media video,.tl-media img{width:100%;aspect-ratio:1/1;object-fit:cover}
.tl-media figcaption{position:absolute;left:0;bottom:0;background:#000;padding:.4em .6em;font-size:.6rem}
.tl-embed{min-width:0}
.tl-embed .twitter-tweet{margin:0 auto!important}
blockquote.twitter-tweet{margin:0;padding:1rem;border:1px dashed var(--line);font-size:.9rem;color:var(--grey);background:#000}
blockquote.twitter-tweet p{margin:0 0 .6em}
blockquote.twitter-tweet a{color:var(--white)}
@media (max-width:1100px){.tl-card{grid-template-columns:1fr 1fr}.tl-embed{grid-column:1/-1}}
@media (max-width:680px){.tl::before{left:calc(var(--pad) + 8px)}.tl-act{padding-left:34px}.tl-act::before{left:0}.tl-card{grid-template-columns:1fr;margin-left:34px}.tl-card::before{left:-31px}}

/* RECEIPTS */
.receipts{background:var(--white);color:var(--black)}
.receipts .label{color:#555}
.receipts strong{color:var(--black)}
.receipts .rc-intro{color:#333}
.rc-rail{display:flex;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;padding:1.6rem var(--pad) 1.4rem;scrollbar-width:thin;scrollbar-color:var(--red) transparent}
.rc{flex:0 0 clamp(250px,26vw,330px);scroll-snap-align:start;display:flex;flex-direction:column;gap:.8rem;padding:1.2rem;background:#fff;color:var(--black);text-decoration:none;border:2px solid var(--black);box-shadow:6px 6px 0 var(--black);transition:transform .12s,box-shadow .12s}
.rc:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--red)}
.rc q{font:400 1.35rem/1.08 var(--display);text-transform:uppercase;flex:1;quotes:"\201C" "\201D"}
.rc-by{font:600 .72rem var(--mono);letter-spacing:.06em;color:#444;border-top:1px solid #ccc;padding-top:.6rem}

/* TAPE */
.tape-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(10px,1.4vw,18px);margin-top:2rem}
.tape-item{grid-column:span 2;margin:0;position:relative;border:2px solid var(--white);background:#000;overflow:hidden}
.tape-item.is-big{grid-column:span 3}
.tape-item video,.tape-item img{width:100%;aspect-ratio:1/1;object-fit:cover;filter:grayscale(.15)}
.tape-item.is-big video,.tape-item.is-big img{aspect-ratio:16/11}
.tape-item figcaption{position:absolute;inset:auto 0 0 0;display:flex;flex-wrap:wrap;gap:.2rem .8rem;align-items:baseline;padding:.8rem;background:linear-gradient(transparent,rgba(0,0,0,.9) 45%)}
.tape-item figcaption strong{font:400 1.4rem/1 var(--display);text-transform:uppercase}
.tape-item figcaption span{font:600 .68rem var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#cfcfcb}
.tape-item figcaption a{margin-left:auto;font:600 .68rem var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--red);text-decoration:none}
@media (max-width:760px){.tape-grid{grid-template-columns:1fr 1fr}.tape-item,.tape-item.is-big{grid-column:span 2}.tape-item.is-big video{aspect-ratio:1/1}}

/* VAULT */
.vault-box{position:relative;border:2px dashed var(--grey);padding:clamp(24px,4vw,56px);text-align:center;background:repeating-linear-gradient(45deg,transparent 0 14px,rgba(255,255,255,.02) 14px 28px)}
.vault-box p{max-width:52ch;margin:0 auto;color:#cfcfcb}
.vault-slots{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin:2rem auto 0;max-width:720px}
.vault-slots i{aspect-ratio:1;border:1px solid var(--line);background:#0b0b0b;position:relative}
.vault-slots i::after{content:"✕";position:absolute;inset:0;display:grid;place-items:center;color:#2a2a2a;font:400 1.4rem var(--display)}
.soon-chip{position:absolute;top:-16px;right:24px;background:var(--red);color:#fff;font:400 1.1rem/1 var(--display);letter-spacing:.12em;padding:.4em .8em;text-transform:uppercase;transform:rotate(3deg)}

/* BUY */
.steps{list-style:none;padding:0;margin:2rem 0;display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:2px solid var(--white)}
.steps li{padding:1.4rem 1.2rem 1.2rem 0;border-right:1px solid var(--line)}
.steps li:last-child{border-right:0}
.steps b{font:400 1rem var(--mono);color:var(--red)}
.steps p{margin:0;color:#cfcfcb;font-size:.95em}
.buy .hero-cta{justify-content:flex-start}
@media (max-width:900px){.steps{grid-template-columns:1fr 1fr}.steps li{border-right:0;border-bottom:1px solid var(--line)}}
@media (max-width:520px){.steps{grid-template-columns:1fr}}

/* FAQ */
.faq{max-width:980px}
.faq details{border-top:1px solid var(--line);padding:1.1rem 0}
.faq details:last-of-type{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;font:400 clamp(1.3rem,2.4vw,1.9rem)/1.1 var(--display);text-transform:uppercase;list-style:none;display:flex;justify-content:space-between;gap:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--red)}
.faq details[open] summary::after{content:"−"}
.faq details p{margin:.8rem 0 0;color:#cfcfcb;max-width:70ch}

/* END CARD */
.endcard{text-align:center;padding-block:clamp(80px,12vw,180px);background:radial-gradient(ellipse at center,#1a1a1a,var(--black) 70%);border-top:1px solid var(--line)}
.end-cap{margin:0;font-size:clamp(4rem,15vw,13rem)}
.end-sub{margin-top:1rem}

/* FOOTER */
.foot{border-top:3px solid var(--red);padding-block:clamp(36px,5vw,64px);background:#000}
.foot-grid{display:grid;gap:1.4rem}
.foot-brand{display:flex;align-items:center;gap:1rem}
.foot-brand img{width:64px;border:2px solid var(--white);filter:grayscale(1)}
.foot-brand div{display:flex;flex-direction:column;gap:.3rem}
.foot-brand strong{font:400 1.6rem/1 var(--display);letter-spacing:.03em}
.disclaimer{margin:0;max-width:95ch;color:#b8b8b4;font-size:.86rem;line-height:1.7}
.foot-small{color:#6c6c68}

/* reveal */
[data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
[data-reveal].in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  [data-reveal]{opacity:1;transform:none}
  .hero-crash polyline{stroke-dashoffset:0}
}
.end-banner{width:min(1100px,92vw);margin:0 auto clamp(-40px,-4vw,-20px);border:2px solid var(--white);box-shadow:10px 10px 0 var(--red)}
.end-cap{position:relative;z-index:2}
main{overflow-x:clip}
/* v1 fixes */
.chyron-bug{position:relative;z-index:2;box-shadow:6px 0 0 #000}
.cap{font-size:clamp(4.4rem,min(13vw,19vh),12.5rem)}
.hero-face{width:min(600px,80vw,calc(48vh * 1.63))}
.hero-face img{aspect-ratio:900/553;object-fit:cover}
.lore-head{position:static}
.tape-item.is-big video,.tape-item.is-big img{aspect-ratio:1/1}
.end-banner{margin-bottom:clamp(28px,4vw,48px)}
.end-cap{font-size:clamp(2.8rem,8vw,7rem)}