/* Car profile pages. Layout language from the October 22, 2026 design reference (dark studio, one raking light,
   editorial splits, caption-panel carousel, underlined headings); fonts and colors are the race page's.
   Shared by every car under /tesla-roadster/cars/<slug>/. Per-car tweaks belong in that page's <style>. */
:root{
  --bg:#0E0D0B; --bg-deep:#070706; --surface:#17150F; --panel:#12110E; --line:#2E2A22; --fg:#F2EDE3; --muted:#A39B8B; --dim:#8A8374;
  --amber:#FFB020; --red:#FF3B4A; --blue:#5CC6FF; --green:#5BE38B;
  --rule:linear-gradient(90deg,rgba(255,176,32,.85),rgba(255,176,32,.25));
  --font-display:'Barlow Condensed','Arial Narrow',Impact,sans-serif;
  --font-body:'Barlow','Helvetica Neue',Arial,sans-serif;
  --font-mono:'Chakra Petch','Courier New',monospace;
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-in-out:cubic-bezier(.77,0,.175,1);
  --gutter:max(16px,env(safe-area-inset-left,0px));
  --max:1200px;
  color-scheme:dark;
}
*{box-sizing:border-box}
/* Smooth from the first paint: WebKit restores the reader's place on reload only when it is. Deep links that the
   webfont swap knocks off target are landed again by the deeplink block in profile.js. */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:72px}
/* Sections focused by an in-page link (profile.js gives them tabindex=-1) don't need a ring around the whole block. */
main[tabindex="-1"]:focus,main [tabindex="-1"]:focus{outline:none}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg-deep);color:var(--fg);font-family:var(--font-body);font-size:16px;line-height:1.6;overflow-x:hidden;overflow-x:clip}
img,svg,video,canvas{display:block;max-width:100%}
img{height:auto}
a{color:var(--fg);text-underline-offset:3px;text-decoration-color:rgba(255,176,32,.6)}
a:hover{text-decoration-color:var(--amber)}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:2px}
.feed a:focus-visible,.vid-play:focus-visible,.vid-track:focus-visible,.tl-scroll:focus-visible,.car-viewport:focus-visible,.feed:focus-visible{outline-offset:-3px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--amber);color:#000;padding:8px 14px;font-weight:600;border-radius:3px}
.skip:focus{top:12px}
h1,h2,h3{text-wrap:balance;margin:0}
p{margin:0}
.shell{width:min(100% - 2*var(--gutter),var(--max));margin-inline:auto}
.narrow{width:min(100% - 2*var(--gutter),780px);margin-inline:auto}
section{position:relative}

/* Type. Section titles follow the reference: sentence case, a thin amber rule the width of the words. */
.eyebrow{font-family:var(--font-mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--amber)}
.title{font-family:var(--font-display);font-weight:600;font-size:clamp(32px,4.2vw,46px);line-height:1.05;letter-spacing:.005em;display:inline-block;padding-bottom:10px;margin-bottom:18px;background:var(--rule) left bottom/100% 1px no-repeat}
.title.sm{font-size:clamp(26px,3vw,34px)}
.lede{font-size:clamp(16px,1.4vw,18px);color:#D9D2C4;max-width:62ch}
.body{color:var(--muted);font-size:15px;line-height:1.7;max-width:64ch}
.body+.body{margin-top:12px}
.body strong{color:var(--fg);font-weight:600}
.label{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;padding:1px 6px;border:1px solid var(--line);border-radius:2px;color:var(--muted);white-space:nowrap;vertical-align:2px}
.label.claimed{color:#E8C68E;border-color:rgba(232,198,142,.35)}
.label.recorded,.label.measured,.label.verified{color:var(--green);border-color:rgba(91,227,139,.35)}
.label.estimate,.label.derived{color:var(--blue);border-color:rgba(92,198,255,.35)}
.label.reported{color:#D9D2C4}
sup a{text-decoration:none;color:var(--amber);font-family:var(--font-mono);font-size:.75em}

/* Buttons: dark fill, hairline border, tracked caps (reference "Reserve now"). */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:44px;padding:0 22px;font-family:var(--font-mono);font-size:13px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:var(--fg);background:rgba(23,21,15,.72);border:1px solid #3A352B;border-radius:2px;cursor:pointer;transition:transform 160ms var(--ease-out),border-color 200ms ease,background-color 200ms ease;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.btn:active{transform:scale(.97)}
.btn.primary{border-color:rgba(255,176,32,.55)}
@media (hover:hover) and (pointer:fine){.btn:hover{border-color:var(--amber);background:rgba(35,31,22,.85)}}
.btn svg{width:16px;height:16px}

/* Reveal on scroll. Marketing page, seen once: a short rise and fade on the strong ease-out. */
.rv{opacity:0;transform:translateY(16px);transition:opacity 500ms var(--ease-out),transform 500ms var(--ease-out);transition-delay:calc(var(--i,0) * 70ms)}
.rv.in{opacity:1;transform:none}
.no-js .rv{opacity:1;transform:none}
.no-js .car-viewport{overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin}
.no-js .car-track{padding-right:var(--gutter)}
.no-js .slide{opacity:1;scroll-snap-align:start}
.no-js [data-replay],.no-js .car-controls,.no-js .live-tabs,.no-js .live-cols,.no-js .live-status,.no-js .vid-nav,.no-js .viewer-views,.no-js .viewer-load,.no-js .sm-live,.no-js .sm-grid{display:none}
.no-js .sm-fallback{display:block}
.no-js .hotspot{pointer-events:none}
.no-js .blink-bar{transform:scaleX(1)}
.no-js .nav{background:rgba(7,7,6,.92)}
@media (prefers-reduced-motion:reduce){.rv{transform:none;transition:opacity 400ms ease}}

/* Nav: wordmark left, links center, actions right; transparent over the hero, solid once scrolled. */
.nav{position:fixed;inset:0 0 auto;z-index:50;height:56px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 var(--gutter);transition:background-color 300ms ease,border-color 300ms ease;border-bottom:1px solid transparent}
.nav.scrolled{background:rgba(7,7,6,.82);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom-color:rgba(46,42,34,.7)}
.brand{display:inline-flex;align-items:center;justify-self:start;padding:6px 4px;border-radius:3px;text-decoration:none;opacity:.92;transition:opacity 200ms ease}
.brand img{height:30px;width:auto}
@media (hover:hover) and (pointer:fine){.brand:hover{opacity:1}}
.nav-links{display:flex;gap:4px;list-style:none;margin:0;padding:0}
.nav-links a{display:block;padding:8px 12px;font-size:13.5px;font-weight:500;text-decoration:none;color:#DCD5C7;border-radius:3px;transition:background-color 200ms ease}
.nav-links a[aria-current="page"]{color:var(--fg);background:rgba(255,255,255,.06)}
@media (hover:hover) and (pointer:fine){.nav-links a:hover{background:rgba(255,255,255,.08)}}
.nav-actions{justify-self:end;display:flex;gap:6px;align-items:center}
.icon-btn{width:40px;height:40px;display:grid;place-items:center;border-radius:50%;border:0;background:transparent;color:var(--fg);cursor:pointer;transition:background-color 200ms ease,transform 160ms var(--ease-out)}
.icon-btn:active{transform:scale(.96)}
.icon-btn svg{width:20px;height:20px}
@media (hover:hover) and (pointer:fine){.icon-btn:hover{background:rgba(255,255,255,.08)}}
@media (max-width:860px){.nav{grid-template-columns:1fr auto}.nav>nav{display:none}}

/* Hero: black studio, the car lit from one raking beam, wordmark left. */
.hero{min-height:max(620px,100svh);display:grid;align-items:center;overflow:hidden;isolation:isolate;background:var(--bg-deep)}
.hero-media{position:absolute;inset:0;z-index:-2}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:72% 50%}
.hero-media::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,7,6,.92) 0%,rgba(7,7,6,.55) 34%,rgba(7,7,6,0) 60%),linear-gradient(0deg,var(--bg-deep) 0%,rgba(7,7,6,0) 26%)}
.beam{position:absolute;z-index:-1;left:-12%;bottom:6%;width:78%;height:120px;transform:rotate(-24deg);transform-origin:left center;background:linear-gradient(90deg,rgba(242,237,227,.0),rgba(242,237,227,.42) 28%,rgba(242,237,227,.16) 78%,rgba(242,237,227,0));filter:blur(20px);mix-blend-mode:screen;opacity:0;animation:beam-in 1600ms var(--ease-out) 300ms forwards;pointer-events:none}
@keyframes beam-in{to{opacity:1}}
.hero-copy{display:grid;gap:22px;justify-items:start;padding-top:56px;max-width:560px}
.wordmark{width:min(78vw,430px);height:auto;filter:drop-shadow(0 4px 18px rgba(0,0,0,.6))}
.wordmark-wrap{position:relative;display:inline-block;overflow:hidden}
/* Text wordmark for cars without a supplied logo: brushed-gold lettering with one glint, like the reference badge. */
.wordmark-text{display:inline-block;font-family:var(--font-display);font-weight:800;font-style:italic;font-size:clamp(54px,9vw,104px);line-height:.9;letter-spacing:.06em;text-transform:uppercase;
  background:linear-gradient(100deg,#8C6A3A 0%,#E8C68E 22%,#FFF1D6 34%,#C99B5A 48%,#F2D9A8 62%,#9A7442 80%,#E3BE84 100%) 0 0/250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 4px 16px rgba(0,0,0,.6));animation:sheen 1600ms var(--ease-in-out) 900ms both}
.wordmark-text small{display:block;font-size:.34em;letter-spacing:.32em;font-style:normal;margin-top:.25em}
@keyframes sheen{from{background-position:100% 0}to{background-position:0 0}}
@media (prefers-reduced-motion:reduce){.wordmark-text{animation:none}}
@media (forced-colors:active){.wordmark-text{color:CanvasText;background:none}}
/* A single glint sweeps the wordmark once on load, like light catching the badge. */
.wordmark-wrap::after{content:"";position:absolute;inset:-10% -4%;background:linear-gradient(105deg,transparent 40%,rgba(255,240,210,.55) 50%,transparent 60%);mix-blend-mode:screen;transform:translateX(-120%);animation:glint 1400ms var(--ease-in-out) 900ms forwards;-webkit-mask:var(--mark) center/contain no-repeat;mask:var(--mark) center/contain no-repeat;pointer-events:none}
@keyframes glint{to{transform:translateX(120%)}}
.hero-sub{font-size:clamp(16px,1.5vw,19px);color:#E3DDD1;max-width:44ch;text-shadow:0 1px 8px rgba(0,0,0,.6)}
.hero-sub .big{font-family:var(--font-mono);font-weight:700;color:var(--amber);font-size:1.15em}
.hero-cta{display:flex;flex-wrap:wrap;gap:10px}
.scroll-cue{position:absolute;left:50%;bottom:18px;width:44px;height:44px;transform:translateX(-50%);opacity:.75}
@media (prefers-reduced-motion:reduce){.beam,.wordmark-wrap::after{animation:none}.beam{opacity:1}}
/* Phones and portrait tablets: the image becomes a band above the copy, so text never sits on the car. */
@media (max-width:720px), (max-width:1100px) and (orientation:portrait){
  .hero{align-items:end;padding-bottom:84px}
  .hero-media{bottom:auto;height:60svh;min-height:380px}
  .hero-media img{object-position:74% 50%}
  .hero-media::after{background:linear-gradient(0deg,var(--bg-deep) 0%,rgba(7,7,6,.35) 30%,rgba(7,7,6,0) 55%),linear-gradient(180deg,rgba(7,7,6,.6),transparent 22%)}
  .beam{width:120%;bottom:30%}
}
/* Landscape 1001-1100 px: pages shift the art right here, which leaves its left edge showing behind the copy; fade it. */
@media (min-width:1001px) and (max-width:1100px) and (orientation:landscape){
  .hero .hero-media img{-webkit-mask-image:linear-gradient(90deg,transparent,#000 14%);mask-image:linear-gradient(90deg,transparent,#000 14%)}
}
/* Portrait layouts: a credit inside the copy column (Top Fuel) goes to the top of the column, right under the photo. */
@media (max-width:720px), (max-width:1100px) and (orientation:portrait){
  .hero-copy>.hero-credit,.hero-copy>.credit{order:-1;margin-bottom:-10px}
}
/* Landscape phones and narrow landscape tablets: too tight for copy beside the car, so the photo becomes a band across
   the top and the copy starts under it, as on portrait phones. The art is shown whole and right-aligned (most tile art crops the car at its right
   edge, so that edge meets the screen's), its left edge fades out, and the band leaves room for the car's name above
   the fold. :root raises specificity over pages' own landscape tweaks. */
@media (orientation:landscape) and (max-height:430px) and (max-width:950px), (orientation:landscape) and (min-width:721px) and (max-width:1000px){
  /* The band leaves room for the name block (wordmark capped at 15svh, plus its make line) on the first screen. */
  :root .hero{--band:calc(79svh - 64px);align-items:start;min-height:0;padding-bottom:56px}
  :root .hero .hero-media{top:56px;bottom:auto;height:var(--band);min-height:0;overflow:hidden;display:flex;justify-content:flex-end}
  /* The image box shrinks to the drawn picture, so the fades land on its left and top edges rather than on empty band. */
  :root .hero .hero-media img{width:auto;max-width:100%;height:100%;object-fit:cover;object-position:100% 100%;transform:none;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 30%),linear-gradient(180deg,transparent,#000 22%);-webkit-mask-composite:source-in;
    mask-image:linear-gradient(90deg,transparent,#000 30%),linear-gradient(180deg,transparent,#000 22%);mask-composite:intersect}
  :root .hero .hero-media::after{background:linear-gradient(0deg,var(--bg-deep) 0%,rgba(7,7,6,0) 22%)}
  :root .hero .hero-copy{padding-top:calc(var(--band) + 64px);max-width:640px}
  :root .hero:has(.hero-credit) .hero-copy{padding-top:calc(var(--band) + 84px)}
  :root .hero .hero-credit{top:calc(var(--band) + 60px);bottom:auto;left:var(--gutter,16px);right:auto;text-align:left;max-width:none}
  /* A credit inside the copy column (Top Fuel) moves to the top of the column, right under the photo. */
  :root .hero .hero-copy>.hero-credit{position:static;order:-1;margin-bottom:-10px}
  :root .hero:has(.hero-copy>.hero-credit) .hero-copy{padding-top:calc(var(--band) + 64px)}
  :root .hero .beam{display:none}
}
/* Landscape phones with a photo credit in the hero: a shorter band, so the credit and the car's name both fit on the first screen. */
@media (orientation:landscape) and (max-height:430px) and (max-width:950px){
  :root .hero:has(.hero-credit),:root .hero:has(.credit){--band:calc(79svh - 124px)}
  /* Credits run the full width (one or two lines) and the name is capped by the screen's height. */
  :root .hero .hero-copy>.credit,:root .hero .hero-copy>.hero-credit{max-width:none}
  :root .hero .wordmark-text{font-size:min(clamp(46px,8vw,96px), 15svh)}
}
/* Narrow landscape tablets (721-1000 px wide, taller than a phone): the same stacked layout as portrait tablets, so
   copy beside the car can't reach it; the band is capped by width and leaves room for the name and subline. */
@media (orientation:landscape) and (min-width:721px) and (max-width:1000px) and (min-height:431px){
  :root .hero{--band:min(52vw, calc(100svh - 270px))}
}

/* Feature trio: Lottie line icons, caps labels, amber hairline dividers. */
.trio{display:grid;grid-template-columns:repeat(3,minmax(0,220px));justify-content:center;padding:72px 0 96px}
.trio-item{display:grid;justify-items:center;gap:12px;padding:6px 18px;text-align:center;border:0;background:transparent;color:inherit;font:inherit}
.trio-item+.trio-item{border-left:1px solid;border-image:linear-gradient(180deg,transparent,rgba(255,176,32,.7),transparent) 1}
.trio-icon{width:56px;height:56px}
.lottie-failed{visibility:hidden}
.trio-label{font-family:var(--font-mono);font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:#E6DFD2;line-height:1.5}
.trio-note{font-size:13px;color:var(--muted);line-height:1.5;max-width:22ch}
@media (max-width:640px){.trio{grid-template-columns:repeat(3,minmax(0,1fr));padding:48px 0 64px}.trio-item{padding:4px 6px}.trio-label{font-size:11px;letter-spacing:.08em}.trio-note{display:none}}

/* Answer block. */
.answer{padding:24px 0 72px}
.answer .lede{margin-bottom:16px}
.byline{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;margin-top:20px;font-size:13px;color:var(--dim)}
.byline a{color:var(--muted)}

/* Editorial split: narrow copy column, image bleeding off the right edge (reference "A True Pilot's Car"). */
.split{display:grid;grid-template-columns:minmax(240px,320px) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:center;padding:56px 0 56px max(var(--gutter),calc((100vw - var(--max))/2))}
.split-copy{min-width:0}
.split-media{position:relative;margin-right:0}
.split-media img{width:100%;height:auto;-webkit-mask:radial-gradient(ellipse 58% 78% at 60% 50%,#000 58%,transparent 100%);mask:radial-gradient(ellipse 58% 78% at 60% 50%,#000 58%,transparent 100%)}
@media (max-width:820px){.split{grid-template-columns:1fr;padding-left:0}.split-copy{padding:0 var(--gutter)}.split-media img{-webkit-mask:linear-gradient(0deg,transparent,#000 15%);mask:linear-gradient(0deg,transparent,#000 15%)}}

/* Stats wall: very large mono numerals; labels underneath. */
.stats{padding:96px 0}
.stats-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin-top:28px;border-top:1px solid var(--line);border-left:1px solid var(--line)}
.stat{background:var(--bg-deep);padding:26px 22px 24px;display:grid;gap:8px;align-content:start;border-right:1px solid var(--line);border-bottom:1px solid var(--line);min-width:0}
@media (max-width:980px){.stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:420px){.stat{padding:20px 14px}.stat-num{font-size:34px}}
@media (max-width:360px){.stats-grid{grid-template-columns:minmax(0,1fr)}.stat{padding:18px 14px}}
.stat-num{font-family:var(--font-mono);font-weight:700;font-size:clamp(38px,4.6vw,58px);line-height:1;color:var(--fg);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.stat-num small{font-size:.4em;color:var(--muted);font-weight:500;margin-left:4px;letter-spacing:.04em}
.stat-num.amber{color:var(--amber);text-shadow:0 0 22px rgba(255,176,32,.25)}
.stat-label{font-size:14px;color:#D9D2C4;line-height:1.45}
.stat-meta{font-size:12px;color:var(--dim);line-height:1.45}

/* Blink race: real durations, played once on view. */
.blink{margin-top:40px;border:1px solid var(--line);background:var(--panel);padding:20px;border-radius:3px}
.blink-head{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:baseline;margin-bottom:14px}
.blink-head h3{font-family:var(--font-display);font-weight:600;font-size:22px}
.blink-row{display:grid;grid-template-columns:minmax(120px,190px) 1fr 64px;gap:12px;align-items:center;padding:7px 0;font-size:14px}
.blink-name{color:#D9D2C4;line-height:1.3}
.blink-track{display:block;height:8px;background:#1F1C16;border-radius:4px;overflow:hidden}
.blink-bar{display:block;height:100%;width:100%;transform:scaleX(0);transform-origin:left;background:var(--car,var(--muted));border-radius:4px}
.blink.go .blink-bar{transform:scaleX(1);transition:transform var(--t) linear}
@media (prefers-reduced-motion:reduce){.blink.go .blink-bar{transition:none}}
.blink-time{font-family:var(--font-mono);text-align:right;font-variant-numeric:tabular-nums;color:var(--muted)}
.blink-time.win{color:var(--amber)}
@media (max-width:560px){.blink-row{grid-template-columns:1fr 54px}.blink-track{grid-column:1/-1;grid-row:2}}

/* Carousel: large image card, caption panel underneath, next slide peeking right, square controls. */
.carousel{padding:72px 0 40px;overflow:hidden}
.car-viewport{overflow:visible;touch-action:pan-y}
.car-track{display:flex;gap:16px;padding-left:max(var(--gutter),calc((100vw - var(--max))/2));transition:transform 420ms var(--ease-in-out);will-change:transform}
.car-track.dragging{transition:none}
.slide{flex:0 0 min(78vw,920px);display:grid;grid-template-rows:auto auto;opacity:.45;transition:opacity 400ms ease}
.slide.active{opacity:1}
.slide-media{aspect-ratio:16/9;background:#0B0A08;overflow:hidden}
.slide-media img{width:100%;height:100%;object-fit:cover;transition:transform 900ms var(--ease-out);-webkit-user-drag:none;user-select:none}
.slide.active .slide-media img{transform:scale(1.02)}
.slide-cap{background:var(--panel);padding:22px 24px 24px}
.slide-cap .title{margin-bottom:12px}
.car-controls{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:22px}
.car-btn{width:40px;height:40px;display:grid;place-items:center;background:var(--panel);border:1px solid var(--line);color:var(--fg);cursor:pointer;border-radius:2px;transition:transform 160ms var(--ease-out),border-color 200ms ease}
.car-btn:active{transform:scale(.96)}
.car-btn:disabled{opacity:.35;cursor:default}
.car-dots{display:flex;gap:14px;align-items:center;height:40px;padding:0 12px;background:var(--panel);border:1px solid var(--line);border-radius:2px}
.car-dot{width:10px;height:10px;padding:0;border:0;background:#3A352B;cursor:pointer;transition:background-color 250ms ease,width 300ms var(--ease-out)}
.car-dot[aria-current="true"]{background:var(--fg);width:22px}
/* 24 px touch target around each 10 px dot (the 14 px gap keeps neighbours from overlapping). */
.car-dot{position:relative}.car-dot::before{content:"";position:absolute;inset:-7px}
@media (hover:hover) and (pointer:fine){.car-btn:hover:not(:disabled){border-color:var(--amber)}}
@media (max-width:640px){.slide{flex-basis:86vw}.slide-cap{padding:18px}}
@media (prefers-reduced-motion:reduce){.car-track{transition:none}.slide.active .slide-media img{transform:none}}

/* Full-bleed story image fading into the page, copy column below (reference "Out of This World"). */
.bleed{padding:40px 0 64px}
.bleed-media{position:relative;height:clamp(380px,62vw,820px);overflow:hidden}
.bleed-media img{width:100%;height:100%;object-fit:cover}
.bleed-media::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,var(--bg-deep),rgba(7,7,6,0) 38%,rgba(7,7,6,0) 80%,var(--bg-deep))}
.bleed .narrow{margin-top:-40px;position:relative}

/* Starman live panel. */
.starman{padding:24px 0 96px;background:radial-gradient(ellipse at 70% 0%,rgba(92,198,255,.06),transparent 60%)}
.stars{position:absolute;inset:0;pointer-events:none;opacity:.8}
.sm-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(24px,4vw,56px);align-items:center;margin-top:28px}
.sm-readouts{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-width:0;gap:1px;background:var(--line);border:1px solid var(--line)}
.sm-cell{background:rgba(7,7,6,.92);padding:18px;min-width:0}
@media (max-width:400px){.sm-cell{padding:14px 12px}.sm-num{font-size:20px}.sm-cell.wide .sm-num{font-size:26px}}
.sm-cell.wide{grid-column:1/-1}
.sm-num{font-family:var(--font-mono);font-weight:700;font-size:clamp(24px,2.6vw,34px);line-height:1.1;font-variant-numeric:tabular-nums;color:var(--fg)}
.sm-cell.wide .sm-num{font-size:clamp(28px,3.4vw,44px);color:var(--amber)}
.sm-unit{font-size:12px;color:var(--muted);margin-top:4px}
.sm-live{display:flex;width:max-content;align-items:center;gap:6px;font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#FF8A94}
.sm-live .pulse{width:18px;height:18px}
.orbit{width:100%;aspect-ratio:1;max-width:min(520px,100%);justify-self:center;min-width:0}
.sm-grid>*{min-width:0}
.sm-fallback{display:none;margin-top:20px;color:#D9D2C4}
.starman.failed .sm-grid,.starman.stale .sm-grid{display:none}
.starman.failed .sm-fallback,.starman.stale .sm-fallback{display:block}
.starman.failed .sm-live .pulse,.starman.stale .sm-live .pulse{display:none}
.orbit text{font-family:var(--font-mono);font-size:11px;fill:var(--muted);letter-spacing:.08em}
@media (max-width:600px){.orbit text{font-size:15px}}
@media (max-width:820px){.sm-grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:360px){.sm-num{font-size:18px}.sm-cell.wide .sm-num{font-size:24px}}

/* Chart (reference "Beyond The Limits of Physics"): copy left, glowing curve right. */
.chart-sec{display:grid;grid-template-columns:minmax(240px,320px) 1fr;gap:clamp(24px,5vw,72px);align-items:center;padding:88px 0}
.chart svg{width:100%;height:auto;overflow:visible}
.chart text{font-family:var(--font-body);font-size:13px;fill:var(--muted)}
.chart .chart-note{font-size:11.5px}
@media (max-width:600px){.chart text{font-size:21px}.chart .chart-note{font-size:19px}}
.chart .grid line{stroke:#2A2720;stroke-width:1}
.chart .draw{stroke-dasharray:var(--len);stroke-dashoffset:var(--len)}
.chart.in .draw{stroke-dashoffset:0;transition:stroke-dashoffset 1800ms var(--ease-out)}
.chart .fan path{opacity:0;transition:opacity 900ms ease}
.chart.in .fan path{opacity:var(--o)}
@media (max-width:820px){.chart-sec{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.chart .draw{stroke-dashoffset:0}.chart .fan path{opacity:var(--o)}}

/* Anatomy: annotated side view with hotspots. */
.anatomy{padding:80px 0}
.anat-stage{position:relative;margin-top:24px}
.anat-stage img{width:100%;height:auto;-webkit-mask:radial-gradient(ellipse 62% 70% at 50% 52%,#000 62%,transparent 100%);mask:radial-gradient(ellipse 62% 70% at 50% 52%,#000 62%,transparent 100%)}
.hotspot{position:absolute;left:var(--x);top:var(--y);width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;border:1px solid rgba(255,176,32,.8);background:rgba(7,7,6,.55);color:var(--amber);font-family:var(--font-mono);font-size:12px;font-weight:700;cursor:pointer;display:grid;place-items:center;transition:transform 160ms var(--ease-out),background-color 200ms ease}
.hotspot::after{content:"";position:absolute;inset:-6px}
.hotspot::before{content:"";position:absolute;inset:-6px;border-radius:50%;border:1px solid rgba(255,176,32,.35);opacity:0;animation:ring 2.4s var(--ease-out) 3}
.hotspot[aria-expanded="true"]{background:var(--amber);color:#000}
.hotspot:active{transform:scale(.96)}
.hotspot:focus-visible{outline:2px solid #fff;outline-offset:3px;box-shadow:0 0 0 6px rgba(7,7,6,.7)}
@keyframes ring{from{transform:scale(.8);opacity:1}to{transform:scale(1.6);opacity:0}}
@media (prefers-reduced-motion:reduce){.hotspot::after{content:"";position:absolute;inset:-6px}
.hotspot::before{animation:none}}
@media (max-width:520px){.hotspot{width:30px;height:30px;margin:-15px 0 0 -15px;font-size:11px}.hotspot::after{inset:-7px}}
@media (max-width:360px){.hotspot{width:24px;height:24px;margin:-12px 0 0 -12px;font-size:10px}.hotspot::after{inset:-8px}}
.anat-notes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:22px}
@media (max-width:820px){.anat-notes{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.anat-notes{grid-template-columns:1fr}}
.anat-note{background:var(--panel);border:1px solid var(--line);padding:16px 18px;transition:border-color 250ms ease,background-color 250ms ease}
.anat-note.on{border-color:rgba(255,176,32,.6);background:#17140D}
.anat-note h3{font-family:var(--font-display);font-weight:600;font-size:20px;margin-bottom:6px;display:flex;gap:10px;align-items:baseline}
.anat-note h3 span{font-family:var(--font-mono);font-size:12px;color:var(--amber)}
.anat-note p{font-size:14px;color:var(--muted);line-height:1.6}

/* Thruster stage. */
.thrust-stage{position:relative;max-width:1100px;margin:0 auto;overflow:hidden}
.thrust-stage img{width:100%;height:auto;-webkit-mask:radial-gradient(ellipse 58% 62% at 50% 60%,#000 60%,transparent 100%);mask:radial-gradient(ellipse 58% 62% at 50% 60%,#000 60%,transparent 100%)}
.plumes{position:absolute;inset:0;pointer-events:none}
.plume{position:absolute;top:var(--y);left:var(--x);width:7%;height:24%;transform:translateX(-50%) scaleY(0);transform-origin:top;background:linear-gradient(180deg,rgba(242,237,227,.95),rgba(200,214,235,.45) 35%,transparent);filter:blur(5px);border-radius:40% 40% 50% 50%;opacity:0}
.burst{position:absolute;top:var(--y);left:var(--x);width:6.5%;aspect-ratio:1;transform:translate(-50%,-50%) scale(0);border-radius:50%;background:radial-gradient(circle,rgba(255,250,240,.95) 0,rgba(214,226,245,.55) 35%,transparent 70%);filter:blur(2px);opacity:0}
.thrust-stage.in .plume{animation:fire 1800ms var(--ease-out) calc(500ms + var(--d)) both}
.thrust-stage.in .burst{animation:burst 1600ms var(--ease-out) calc(300ms + var(--d)) both}
@keyframes fire{0%{transform:translateX(-50%) scaleY(0);opacity:0}18%{transform:translateX(-50%) scaleY(1.15);opacity:1}100%{transform:translateX(-50%) scaleY(.9);opacity:.75}}
@keyframes burst{0%{transform:translate(-50%,-50%) scale(.6);opacity:0}15%{transform:translate(-50%,-50%) scale(1.5);opacity:1}100%{transform:translate(-50%,-50%) scale(1);opacity:.8}}
.smoke{position:absolute;left:12%;right:12%;bottom:6%;height:28%;background:radial-gradient(ellipse at 50% 100%,rgba(214,214,220,.7),transparent 70%);filter:blur(18px);opacity:0;transform:scaleX(.6)}
.thrust-stage.in .smoke{animation:smoke 2600ms var(--ease-out) 800ms both}
@keyframes smoke{to{opacity:.85;transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){.thrust-stage.in .plume,.thrust-stage.in .burst{animation:none;opacity:.75}.thrust-stage.in .plume{transform:translateX(-50%) scaleY(.9)}.thrust-stage.in .burst{transform:translate(-50%,-50%)}.thrust-stage.in .smoke{animation:none;opacity:.7;transform:none}}

/* Red-lit section and trim cards (reference "Performance" and "Augments"). */
.redlit{padding:0 0 88px;background:radial-gradient(ellipse at 50% 0%,rgba(255,59,74,.18),transparent 55%)}
.redlit-media{position:relative;height:clamp(300px,48vw,640px);overflow:hidden}
.redlit-media img{width:100%;height:100%;object-fit:cover;filter:saturate(1.1)}
.redlit-media::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,var(--bg-deep),transparent 55%)}
.center{text-align:center}
.center .title{background-position:center bottom}
.trims{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:12px;margin-top:28px}
.trim{background:linear-gradient(180deg,#15130F,#100F0C);border:1px solid #221F19;padding:30px 26px;text-align:center;display:grid;gap:10px;align-content:start}
.trim h3{font-family:var(--font-display);font-weight:600;font-size:30px}
.trim .status{font-family:var(--font-mono);font-size:12.5px;color:var(--amber);letter-spacing:.06em}
.trim p{color:#CFC8BA;font-size:14.5px;line-height:1.65}
.trim dl{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:8px 0 0;text-align:left}
.trim dt{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);font-family:var(--font-mono)}
.trim dd{margin:2px 0 0;font-family:var(--font-mono);font-size:17px;color:var(--fg)}
.trim .note{font-size:12px;color:var(--muted)}

/* Timeline: horizontal scroller with snap. */
.timeline{padding:88px 0 72px}
.tl-scroll{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px max(var(--gutter),calc((100vw - var(--max))/2)) 18px;scroll-padding-inline:max(var(--gutter),calc((100vw - var(--max))/2));scrollbar-width:thin;scrollbar-color:#3A352B transparent;overscroll-behavior-x:contain}
.tl-item{scroll-snap-align:start;flex:0 0 min(78vw,300px);background:var(--panel);border:1px solid var(--line);border-top:2px solid var(--line);padding:18px 18px 20px;display:grid;gap:8px;align-content:start}
.tl-item img{width:calc(100% + 36px);max-width:none;margin:-18px -18px 6px;aspect-ratio:16/10;object-fit:cover}
.tl-item.key{border-top-color:var(--amber)}
.tl-item.slip{border-top-color:var(--red)}
.tl-date{font-family:var(--font-mono);font-size:13px;color:var(--amber);letter-spacing:.06em}
.tl-item.slip .tl-date{color:#FF8A94}
.tl-item h3{font-family:var(--font-display);font-weight:600;font-size:21px;line-height:1.15}
.tl-item p{font-size:14px;color:var(--muted);line-height:1.6}
.tl-hint{font-size:13px;color:var(--dim)}
.slip-counter{display:inline-flex;gap:10px;align-items:baseline;margin-top:6px;padding:10px 14px;border:1px dashed rgba(255,59,74,.45);border-radius:3px}
.slip-counter b{font-family:var(--font-mono);font-size:24px;color:#FF8A94;font-variant-numeric:tabular-nums}
.slip-counter span{font-size:13px;color:var(--muted)}

/* Buzz: camps with a weight bar and a cited quote each. */
.buzz{padding:88px 0}
.camps{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:12px;margin-top:26px}
.camp{background:var(--panel);border:1px solid var(--line);padding:20px;display:grid;gap:12px;align-content:start}
.camp h3{font-family:var(--font-display);font-weight:600;font-size:22px;display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.camp h3 span{font-family:var(--font-mono);font-size:12px;color:var(--muted);font-weight:500}
.camp p{font-size:14px;color:var(--muted);line-height:1.6}
.camp blockquote{margin:0;padding:12px 14px;border-left:2px solid var(--amber);background:rgba(255,176,32,.04);font-size:14.5px;color:#E6DFD2;line-height:1.55}
.camp cite{display:block;margin-top:8px;font-style:normal;font-size:12.5px;color:var(--dim)}
.camp cite a{color:var(--muted)}
.verdict{margin-top:22px;padding:18px 20px;border:1px solid rgba(255,176,32,.35);background:rgba(255,176,32,.04)}
.verdict p{color:#E6DFD2;font-size:15px}
.market{display:grid;gap:8px;margin-top:14px}
.market-row{display:grid;grid-template-columns:minmax(0,220px) minmax(60px,1fr) 52px;gap:12px;align-items:center;font-size:13.5px;color:var(--muted)}
.market-bar{height:6px;background:#1F1C16;border-radius:3px;overflow:hidden}
.market-bar i{display:block;height:100%;width:var(--p);background:var(--amber);border-radius:3px}
.market-row b{font-family:var(--font-mono);color:var(--fg);text-align:right;font-weight:500}

/* Live feeds. */
.live{padding:88px 0}
.live-head{display:flex;justify-content:space-between;align-items:end;gap:16px;flex-wrap:wrap}
.live-status{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--muted)}
.live-status .pulse{width:20px;height:20px}
.live-tabs{display:none;gap:6px;margin-top:18px}
.live-tab{flex:1;min-height:42px;background:var(--panel);border:1px solid var(--line);color:var(--muted);font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;border-radius:2px}
.live-tab[aria-selected="true"]{color:var(--fg);border-color:rgba(255,176,32,.6)}
.live-cols{display:grid;grid-template-columns:1.2fr 1fr;gap:16px;margin-top:22px}
.live-col h3{font-family:var(--font-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 10px;font-weight:500}
/* A fixed height, filled or not: the list scrolls inside, so the page below never moves when live.json arrives
   (a late render used to push #videos about 660 px down after a deep link had landed). */
.feed{list-style:none;margin:0;padding:0;display:grid;align-content:start;background:var(--bg-deep);border:1px solid var(--line);height:720px;overflow:auto;scrollbar-width:thin;scrollbar-color:#3A352B transparent}
.feed li{background:var(--bg-deep)}
.feed li+li{border-top:1px solid var(--line)}
@media (max-width:720px){.feed{height:min(600px,72svh)}}
.feed a{display:grid;grid-template-columns:1fr auto;gap:12px;padding:14px 16px;text-decoration:none;transition:background-color 200ms ease}
.feed a.has-thumb{grid-template-columns:72px minmax(0,1fr)}
.feed a>div{min-width:0}
.feed a{grid-template-columns:minmax(0,1fr)}
@media (hover:hover) and (pointer:fine){.feed a:hover{background:#13110D}}
.feed .thumb{width:72px;height:72px;object-fit:cover;background:#1A1814;border-radius:2px}
.feed .t{font-size:14.5px;line-height:1.45;color:#ECE5D8;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.feed .m{overflow-wrap:anywhere}
.feed .m{font-size:12px;color:var(--dim);margin-top:4px;display:flex;gap:8px;flex-wrap:wrap}
.feed .m b{font-weight:500;color:var(--muted)}
.feed li.new{animation:feed-in 600ms var(--ease-out)}
@keyframes feed-in{from{background:#1E1A10}to{background:var(--bg-deep)}}
.feed-empty{padding:18px;color:var(--muted);font-size:14px;background:var(--bg-deep)}
@media (min-width:821px){.live-col[hidden]{display:block}}
@media (max-width:820px){.live-tabs{display:flex}.live-cols{grid-template-columns:1fr}.live-col[hidden]{display:none}}

/* Video gallery. */
.videos{padding:88px 0 40px;overflow:hidden}
.vid-track{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px max(var(--gutter),calc((100vw - var(--max))/2)) 18px;scroll-padding-inline:max(var(--gutter),calc((100vw - var(--max))/2));scrollbar-width:none;overscroll-behavior-x:contain}
.vid-track::-webkit-scrollbar{display:none}
.vid{scroll-snap-align:start;flex:0 0 min(80vw,520px);display:grid;gap:10px;align-content:start}
.vid-frame{position:relative;aspect-ratio:16/9;background:#000;overflow:hidden;border-radius:2px}
.vid-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vid-play{position:absolute;inset:0;display:block;width:100%;height:100%;padding:0;border:0;background:#000;cursor:pointer}
.vid-play img{width:100%;height:100%;object-fit:cover;opacity:.82;transition:opacity 300ms ease,transform 600ms var(--ease-out)}
.vid-play::after{content:"";position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;background:rgba(7,7,6,.7) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 7l9 5-9 5z' fill='%23F2EDE3'/%3E%3C/svg%3E") center/30px no-repeat;border:1px solid rgba(255,176,32,.6);transition:transform 160ms var(--ease-out)}
.vid-play:active::after{transform:scale(.96)}
@media (hover:hover) and (pointer:fine){.vid-play:hover img{opacity:1;transform:scale(1.03)}}
.vid h3{font-size:15px;font-weight:600;line-height:1.4;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.vid p{font-size:13px;color:var(--dim)}
.vid-nav{display:flex;gap:8px;justify-content:center;margin-top:8px}
.car-btn:disabled{opacity:.35;cursor:default}

/* Did-you-know facts. */
.facts{padding:88px 0}
.fact-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:26px}
.fact{background:var(--panel);border:1px solid var(--line);padding:20px;display:grid;gap:10px;align-content:start;position:relative;overflow:hidden}
@media (max-width:900px){.fact-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.fact.wide{grid-column:span 2}}
@media (max-width:560px){.fact-grid{grid-template-columns:1fr}.fact.wide{grid-column:auto}}
.fact .n{font-family:var(--font-mono);font-size:42px;font-weight:700;line-height:1;color:#2A261E}
.fact h3{font-family:var(--font-display);font-weight:600;font-size:20px;line-height:1.2}
.fact p{font-size:14px;color:var(--muted);line-height:1.6}
.fact .src{font-size:12px;color:var(--dim)}
.fact .src a{color:var(--muted)}

/* 3D viewer. */
.viewer{padding:88px 0}
.viewer-stage{position:relative;aspect-ratio:16/9;background:#070706;border:1px solid var(--line);margin-top:24px;overflow:hidden}
.viewer-stage canvas{width:100%;height:100%;cursor:grab}
.viewer-stage canvas:active{cursor:grabbing}
.viewer-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.viewer-load{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
.viewer-load:active{transform:translate(-50%,-50%) scale(.97)}
.viewer-bar{position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--amber);transform:scaleX(var(--p,0));transform-origin:left;transition:transform 200ms linear}
.viewer-stage.indeterminate .viewer-bar{transform:scaleX(.3);animation:indeterminate 1.1s linear infinite}
@keyframes indeterminate{from{translate:-30% 0}to{translate:330% 0}}
@media (prefers-reduced-motion:reduce){.viewer-stage.indeterminate .viewer-bar{animation:none;transform:scaleX(1);opacity:.5}}
.viewer-views{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.viewer-views .btn{min-height:38px;padding:0 14px;font-size:12px}
.viewer-views .btn:disabled{opacity:.4;cursor:default}
.viewer-load{white-space:nowrap;max-width:calc(100% - 32px)}
@media (max-width:420px){.viewer-load{font-size:11px;padding:0 14px;letter-spacing:.08em}}
.viewer-note{font-size:13px;color:var(--dim);margin-top:10px}
@media (max-width:640px){.viewer-stage{aspect-ratio:4/3}}

/* FAQ. */
.faq{padding:88px 0}
.faq details{border-top:1px solid var(--line)}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:18px 36px 18px 0;position:relative;font-family:var(--font-display);font-weight:600;font-size:21px;line-height:1.25}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:6px;top:50%;width:10px;height:10px;margin-top:-7px;border-right:1.5px solid var(--amber);border-bottom:1.5px solid var(--amber);transform:rotate(45deg);transition:transform 250ms var(--ease-out)}
.faq details[open] summary::after{transform:rotate(225deg);margin-top:-2px}
.faq details p{padding:0 0 18px;color:var(--muted);font-size:15px;max-width:68ch}

/* Closing and footnotes. */
.closing{padding:72px 0 40px;text-align:center}
.closing .wordmark{margin:0 auto 10px;width:min(70vw,380px)}
.closing-media img{width:min(100%,1100px);margin:0 auto;-webkit-mask:radial-gradient(ellipse at center,#000 55%,transparent 78%);mask:radial-gradient(ellipse at center,#000 55%,transparent 78%)}
.closing .hero-cta{justify-content:center;margin-top:24px}
.notes{padding:48px 0 32px;font-size:12.5px;color:var(--dim);line-height:1.7}
.notes h2{font-family:var(--font-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 10px;font-weight:500}
.notes ol{padding-left:20px;margin:0 0 20px;display:grid;gap:4px}
.notes a{color:var(--muted)}
.foot{border-top:1px solid #1C1A15;padding:22px 0 calc(28px + env(safe-area-inset-bottom,0px));font-size:12.5px;color:var(--dim);display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:center}
.foot a{color:var(--muted);text-decoration:none}
.neighbors{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin-top:20px}
.neighbor{display:grid;grid-template-columns:96px 1fr;gap:14px;align-items:center;padding:12px;background:var(--panel);border:1px solid var(--line);text-decoration:none;transition:border-color 200ms ease}
.neighbor img{width:96px;height:60px;object-fit:cover}
.neighbor.neighbor-no-thumb{grid-template-columns:1fr}
.neighbor b{display:block;font-family:var(--font-display);font-weight:600;font-size:18px}
.neighbor span{font-size:13px;color:var(--muted)}
@media (hover:hover) and (pointer:fine){.neighbor:hover{border-color:rgba(255,176,32,.5)}}
.neighbor-credits{margin:10px 0 0;font-size:12px;line-height:1.5;color:var(--dim)}
.neighbor-credits a{color:var(--muted)}

/* Forced colors: the bars are background colors, which the system palette drops, so paint them in system colors. */
@media (forced-colors:active){
  .blink-track,.market-bar{forced-color-adjust:none;background:Canvas;border:1px solid CanvasText}
  .blink-bar,.market-bar i{forced-color-adjust:none;background:Highlight}
}

/* Print: everything visible without scrolling first, dark text on white, nav in the flow. */
@media print{
  :root{--bg:#fff;--bg-deep:#fff;--surface:#fff;--panel:#fff;--line:#bbb;--fg:#111;--muted:#444;--dim:#555}
  body{background:#fff;color:#111}
  .nav{position:static;background:none;border:0}
  .hero-cta,.nav-actions,.car-btn,.icon-btn,.car-dots{display:none!important}
  .rv{opacity:1!important;transform:none!important;transition:none!important}
  .blink-bar{transform:scaleX(1)!important;transition:none!important}
  h1,h2,h3,.stat-label,.blink-name,.nav-links a,.lede,.hero-sub,.trio-label,.camp blockquote,.verdict p,.trim p,.feed .t,.body,p,li,dd,dt,blockquote,cite,summary{color:#111!important;text-shadow:none!important}
  .hero-sub .big{color:#8a5a00!important}
  /* The hero must be able to split across pages, and things drawn with backgrounds, masks or overlays don't print. */
  .hero{min-height:0!important;overflow:visible;isolation:auto;padding-bottom:24px}
  .hero-media{display:none!important}
  .hero .hero-copy{padding-top:12px!important}
  .hero-media::after,.beam,.wordmark-wrap::after,.scroll-cue{display:none!important}
  .wordmark-text{background:none!important;-webkit-text-fill-color:#111;color:#111!important;filter:none!important}
  .wordmark{filter:invert(1)!important}
  .brand img{filter:invert(1)}
  .split-media img,.anat-stage img,.thrust-stage img,.closing-media img,.hero-media img{-webkit-mask:none!important;mask:none!important}
  [data-replay],.hotspot{display:none!important}
  .chart .draw{stroke-dashoffset:0!important}
  .blink-bar,.blink-track,.market-bar,.market-bar i{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .stat-num,.stat-num.amber{text-shadow:none!important}
  details::details-content{content-visibility:visible;display:block}
}