/* Wonderorbital · site styles (from prototype v5 "Die Landung", 20.10.2026; motion round 22.10.2026).
   One calm column of felt-and-cosmos. The golden signal thread leaves the net in the hero,
   runs behind the cards like a stitched seam and docks on the dish of the ground station
   (newsletter). Single dark world by design. No filters on the thread: glow is layered
   strokes, sparks are pre-rendered sprites. Motion is CSS first (page-load rise, scroll-driven
   reveals, cross-document view transitions, a slow star field) and switches off with
   prefers-reduced-motion. */
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 200 900; font-display: swap; src: url("../fonts/source-sans-3-latin-wght-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Source Sans 3"; font-style: italic; font-weight: 200 900; font-display: swap; src: url("../fonts/source-sans-3-latin-wght-italic.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root{
  --cosmos:#1A1140; --cosmos-deep:#120B2E; --nebula:#5B2E8C; --felt:#2F2A6B; --felt-soft:#3A3480;
  --sun:#FDCB3C; --sun-soft:#FFDD73; --amber:#FDB853; --coral:#F97E5F; --rose:#E35D8A; --orchid:#B14FC9;
  --ivory:#F5EFE0; --ink-muted:#C9C2DC; --line:rgba(245,239,224,.14);
  --grad:linear-gradient(110deg,#FDCB3C 0%,#FDB853 28%,#F97E5F 56%,#E35D8A 80%,#B14FC9 100%);
  --grad-btn:linear-gradient(110deg,#FDCB3C 0%,#FDB853 55%,#F97E5F 100%);
  --font:"Source Sans 3",system-ui,-apple-system,"Segoe UI",sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-padding-top:90px}
body{margin:0;background:var(--cosmos);color:var(--ivory);font-family:var(--font);font-size:1.125rem;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:30;background:var(--cosmos-deep)}
/* a slow star field behind everything: two layers that breathe against each other */
body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:
  radial-gradient(1.4px 1.4px at 8% 12%,rgba(245,239,224,.6),transparent 2.4px),
  radial-gradient(1px 1px at 22% 38%,rgba(245,239,224,.45),transparent 2px),
  radial-gradient(1.2px 1.2px at 35% 74%,rgba(255,221,115,.5),transparent 2.2px),
  radial-gradient(1px 1px at 48% 18%,rgba(245,239,224,.4),transparent 2px),
  radial-gradient(1.6px 1.6px at 61% 56%,rgba(245,239,224,.55),transparent 2.6px),
  radial-gradient(1px 1px at 72% 86%,rgba(245,239,224,.4),transparent 2px),
  radial-gradient(1.2px 1.2px at 84% 28%,rgba(255,221,115,.5),transparent 2.2px),
  radial-gradient(1px 1px at 93% 66%,rgba(245,239,224,.45),transparent 2px),
  radial-gradient(1px 1px at 14% 90%,rgba(245,239,224,.35),transparent 2px),
  radial-gradient(1.3px 1.3px at 55% 94%,rgba(245,239,224,.4),transparent 2.3px),
  radial-gradient(1px 1px at 78% 8%,rgba(245,239,224,.4),transparent 2px),
  radial-gradient(1.1px 1.1px at 40% 50%,rgba(245,239,224,.3),transparent 2px);
  opacity:.75;animation:breathe 9s ease-in-out infinite alternate}
@keyframes breathe{from{opacity:.35}to{opacity:.85}}
a{color:var(--sun);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--sun-soft)}
:focus-visible{outline:3px solid var(--sun);outline-offset:3px;border-radius:4px}
img{max-width:100%;height:auto;display:block}
picture{display:block}
h1,h2,h3,h4{text-wrap:balance;line-height:1.15;margin:0}
h1{font-size:clamp(2rem,4.6vw,3.4rem);font-weight:700}
h2{font-size:clamp(1.5rem,3vw,2.1rem);font-weight:700}
h3{font-size:1.3rem;font-weight:700}
p{margin:0}
.eyebrow{font-size:.8rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--sun)}
.muted{color:var(--ink-muted)}
.small{font-size:.9rem}
.wrap{max-width:1100px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.prose{max-width:68ch}
.glass{background:rgba(20,12,50,.5);backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);border:1px solid rgba(255,255,255,.16);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 24px 70px rgba(0,0,0,.4);border-radius:24px}
.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:16px;top:-60px;z-index:40;padding:10px 16px;border-radius:999px;background:var(--sun);color:var(--cosmos-deep);font-weight:700;text-decoration:none}
.skip:focus{top:calc(env(safe-area-inset-top,0px) + 12px)}

/* ---------- motion ---------- */
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes fadein{from{opacity:0}to{opacity:1}}
.hero .copy>*{animation:rise 1s var(--ease) both}
.hero .copy>:nth-child(2){animation-delay:.18s}
.pagehead>*{animation:rise .8s var(--ease) both}
.pagehead>:nth-child(2){animation-delay:.07s}
.pagehead>:nth-child(3){animation-delay:.14s}
.pagehead>:nth-child(4){animation-delay:.21s}
.pagehead>:nth-child(5){animation-delay:.28s}
.landing.auto .panel>*{animation:rise .9s var(--ease) both}
.landing.auto .panel>:nth-child(2){animation-delay:.08s}
.landing.auto .panel>:nth-child(3){animation-delay:.16s}
.landing.auto .panel>:nth-child(4){animation-delay:.24s}
.landing.auto .panel>:nth-child(5){animation-delay:.32s}
/* scroll-driven reveals: no script, browsers without view() timelines simply show the element */
@supports (animation-timeline: view()){
  .reveal{animation:rise .9s var(--ease) both;animation-timeline:view();animation-range:entry 0% entry 42%}
  .grid3>.reveal:nth-child(2),.episodes>li:nth-child(even) .reveal{animation-range:entry 8% entry 52%}
  .grid3>.reveal:nth-child(3){animation-range:entry 16% entry 62%}
  .measuring .reveal{animation:none!important}
}
/* page to page: a short crossfade, the header capsule stays where it is */
@view-transition{navigation:auto}
.capsule{view-transition-name:capsule}
::view-transition-old(root),::view-transition-new(root){animation-duration:.32s}
::view-transition-group(capsule){animation-duration:.32s}
@media (prefers-reduced-motion:reduce){
  body::after{animation:none;opacity:.6}
  .hero .copy>*,.pagehead>*,.landing.auto .panel>*,.reveal{animation:none!important}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}

/* ---------- header: glass capsule with the turning planet and the menu ---------- */
.top{position:fixed;top:env(safe-area-inset-top,0px);left:0;right:0;z-index:20;pointer-events:none;display:flex;justify-content:center;padding:12px max(16px,env(safe-area-inset-left,0px)) 0 max(16px,env(safe-area-inset-right,0px))}
.capsule{position:relative;pointer-events:auto;display:flex;align-items:center;gap:14px;width:100%;max-width:780px;padding:6px 10px 6px 6px;border-radius:999px;border:1px solid transparent;transition:background .45s,border-color .45s,box-shadow .45s}
.capsule::before{content:"";position:absolute;inset:-1px;border-radius:999px;padding:1px;background:var(--grad);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .45s;pointer-events:none}
.orb{width:40px;height:40px;border-radius:50%;overflow:hidden;flex:none;box-shadow:0 0 0 1px rgba(255,255,255,.15),0 6px 18px rgba(0,0,0,.4);will-change:transform}
.orb img{width:100%;height:100%;object-fit:cover}
.capsule nav{margin-left:auto}
nav ul{list-style:none;margin:0;padding:0;display:flex;gap:2px}
nav a{display:block;padding:9px 14px;border-radius:999px;color:var(--ivory);text-decoration:none;font-weight:600;font-size:1rem;text-shadow:0 1px 10px rgba(0,0,0,.6);transition:background .25s,color .25s}
nav a:hover,nav a[aria-current="page"]{background:rgba(253,203,60,.16);color:var(--sun-soft)}
.top.docked .capsule{background:rgba(18,11,46,.66);backdrop-filter:blur(14px) saturate(150%);-webkit-backdrop-filter:blur(14px) saturate(150%);border-color:rgba(255,255,255,.12);box-shadow:0 14px 44px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.1)}
.top.docked .capsule::before{opacity:.55}
.top.docked nav a{text-shadow:none}
@media (max-width:620px){
  .top{padding-top:8px}
  .orb{width:34px;height:34px}
  nav a{padding:7px 7px;font-size:.82rem}
  .capsule{gap:6px;padding:5px 6px 5px 5px}
}
@media (max-width:480px){ nav li:last-child{display:none} }

main{position:relative}
main.sub{padding-top:92px}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;background:var(--cosmos-deep)}
.hero .key{width:100%;aspect-ratio:1920/1072;object-fit:cover}
.hero .copy{position:absolute;inset:0;display:grid;align-content:start;justify-items:center;text-align:center;padding-top:clamp(80px,8vw,130px);gap:clamp(14px,2vw,28px);pointer-events:none}
.hero .copy>*{pointer-events:auto}
.wmlink{position:relative;display:block;width:min(640px,62vw)}
.wmlink img{width:100%;height:auto;filter:drop-shadow(0 8px 28px rgba(0,0,0,.5))}
.hero .box{width:min(640px,88vw);padding:clamp(18px,2.4vw,30px) clamp(18px,2.8vw,36px);display:grid;gap:10px;justify-items:center}
.hero .claim{font-size:clamp(1.3rem,2.6vw,2rem);font-weight:700;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;letter-spacing:.01em}
.hero .lead{max-width:44ch;font-size:clamp(1rem,1.5vw,1.2rem);color:var(--ivory)}
.hero .actions{margin-top:6px;display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.hero::after{content:"";position:absolute;inset:auto 0 0;height:22%;background:linear-gradient(transparent,var(--cosmos));pointer-events:none}
@media (max-width:760px){
  .hero{display:flex;flex-direction:column}
  .hero .copy{position:static;order:0;padding:74px 16px 10px;background:var(--cosmos);gap:14px}
  .wmlink{width:min(400px,84vw)}
  .hero .key{order:1}
  .hero::after{display:none}
}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 22px;border-radius:999px;font-weight:700;text-decoration:none;border:1px solid rgba(255,255,255,.25);color:var(--ivory);background:rgba(26,17,64,.5);white-space:nowrap;transition:transform .2s,box-shadow .2s,border-color .2s,filter .2s;cursor:pointer;font:inherit;font-weight:700}
.btn:hover{transform:translateY(-1px);border-color:rgba(253,203,60,.7);color:var(--sun-soft)}
.btn.primary{background:var(--grad-btn);color:var(--cosmos-deep);border-color:transparent;box-shadow:0 10px 28px rgba(253,184,83,.35)}
.btn.primary:hover{filter:brightness(1.06);color:var(--cosmos-deep);box-shadow:0 14px 34px rgba(253,184,83,.45)}
.actions{display:flex;gap:10px;flex-wrap:wrap}

/* ---------- spine with thread ---------- */
.spine{position:relative}
.thread{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:1}
.thread path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.thread .ghost{stroke:rgba(253,203,60,.12);stroke-width:2}
.thread .glow1{stroke:rgba(253,184,83,.16);stroke-width:18}
.thread .glow2{stroke:rgba(253,203,60,.38);stroke-width:6}
.thread .core{stroke:#FFEBB0;stroke-width:2}
.thread circle{opacity:0;transition:opacity .5s}
.thread circle.on{opacity:1}
#sparks{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}
.section{position:relative;z-index:2;padding-block:clamp(44px,7vw,84px)}
.section>.wrap>.head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:26px}

/* ---------- cards ---------- */
.card{position:relative;background:linear-gradient(160deg,var(--felt-soft),var(--felt));border:1px solid var(--line);border-radius:20px;transition:translate .3s var(--ease),box-shadow .3s,border-color .3s}
.card:hover{translate:0 -3px;border-color:rgba(253,203,60,.55);box-shadow:0 14px 44px rgba(0,0,0,.4)}
.feature{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(16px,2.5vw,32px);padding:clamp(14px,1.8vw,22px);align-items:center}
.feature .shot{border-radius:14px;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.4);background:var(--cosmos-deep)}
.feature .shot img{width:100%;aspect-ratio:16/9;object-fit:cover;transition:transform .6s var(--ease)}
.feature:hover .shot img{transform:scale(1.03)}
.feature .body{display:grid;gap:12px;padding:6px 6px 6px 0;min-width:0}
.feature h2{font-size:clamp(1.4rem,2.3vw,1.8rem)}
.feature .actions .btn{padding:11px 16px;font-size:1rem}
@media (max-width:760px){.feature{grid-template-columns:1fr}.feature .body{padding:4px}}
.chip{display:inline-block;font-size:.76rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:3px 10px;border-radius:999px;background:rgba(253,203,60,.16);color:var(--sun-soft);white-space:nowrap}
.chip.ex{background:rgba(201,194,220,.14);color:var(--ink-muted)}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
@media (max-width:900px){.grid3{grid-template-columns:1fr}}
.post{display:grid;grid-template-rows:auto auto auto 1fr auto;gap:10px;padding:0 20px 18px;overflow:hidden;min-width:0}
.post .pic{margin:0 -20px 8px;aspect-ratio:16/9;overflow:hidden;background:var(--cosmos-deep)}
.post .pic img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.post:hover .pic img{transform:scale(1.04)}
.post .meta{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:.9rem;min-height:26px}
.post h3{font-size:1.2rem;min-height:calc(1.15em*3);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.post h3 a{color:var(--ivory);text-decoration:none}
.post h3 a:hover{color:var(--sun-soft)}
.post .ex{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;font-size:1rem}
.post .more{font-weight:600;align-self:end}

/* ---------- ground station (newsletter): the landing ---------- */
.landing{position:relative;z-index:0;height:calc(max(640px,100svh) + 110vh)}
.station-full{position:sticky;top:0;height:max(640px,100svh);display:grid;align-items:center;overflow:hidden;background:var(--cosmos-deep)}
/* soft top edge instead of a line, so the thread passes from the page into the scene without a seam */
.station-full::before{content:"";position:absolute;inset:0 0 auto;height:140px;background:linear-gradient(var(--cosmos),rgba(26,17,64,0));z-index:1;pointer-events:none}
.station-full .scene{position:absolute;inset:0}
.station-full .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:left bottom}
.station-full canvas.bg{opacity:0;transition:opacity .4s}
.station-full canvas.bg.ready{opacity:1}
.station-full .scene::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(18,11,46,0) 45%,rgba(18,11,46,.45) 100%);pointer-events:none}
.station-full .dockline{z-index:2}
.station-full .ping,.station-full .tag{z-index:3}
.station-full .panelwrap{position:relative;z-index:4;width:100%;max-width:1180px;display:flex;justify-content:flex-end}
.panel{width:min(520px,100%);padding:clamp(22px,3vw,36px);display:grid;gap:14px}
.panel h2,.panel h1{font-size:clamp(1.4rem,2.3vw,1.9rem)}
.panel .sig{display:flex;align-items:center;gap:10px;font-size:.9rem;color:var(--ink-muted)}
.panel .sig i{width:10px;height:10px;border-radius:50%;background:rgba(253,203,60,.35);flex:none;transition:background .4s}
.station-full.docked .panel .sig i{background:var(--sun);animation:beat 1.8s ease-out infinite}
@keyframes beat{0%{box-shadow:0 0 0 0 rgba(253,203,60,.7)}100%{box-shadow:0 0 0 14px rgba(253,203,60,0)}}
.ping{position:absolute;width:12px;height:12px;border-radius:50%;background:var(--sun-soft);transform:translate(-50%,-50%);opacity:0;box-shadow:0 0 18px 6px rgba(253,203,60,.65);transition:opacity .4s;pointer-events:none}
.ping::before,.ping::after{content:"";position:absolute;inset:-8px;border-radius:50%;border:2px solid rgba(253,203,60,.85);opacity:0}
.station-full.docked .ping{opacity:1}
.station-full.docked .ping::before{animation:ring 2s ease-out infinite}
.station-full.docked .ping::after{animation:ring 2s ease-out 1s infinite}
@keyframes ring{0%{transform:scale(.3);opacity:.9}100%{transform:scale(4);opacity:0}}
.station-full .tag{position:absolute;transform:translate(-100%,-100%);font-size:.8rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--sun-soft);background:rgba(18,11,46,.7);border:1px solid rgba(253,203,60,.4);padding:4px 10px;border-radius:999px;opacity:0;transition:opacity .5s,transform .5s;pointer-events:none;white-space:nowrap}
.station-full.docked .tag{opacity:1;transform:translate(-100%,-100%) translateY(-6px)}
.station-full .tag.c{transform:translate(-50%,-100%);font-size:.7rem}
.station-full.docked .tag.c{transform:translate(-50%,-100%) translateY(-6px)}
/* the newsletter page: the station is the page's own hero, plays once after load, no pinning */
.landing.auto{height:auto}
.landing.auto .station-full{position:relative;height:max(640px,100svh)}
.landing.auto .station-full::before{height:0}
.landing.auto .panel{width:min(560px,100%)}
/* stacked: no pinning, the scene above the panel. Set by the script (also for tall windows where the dish
   would sit behind the glass panel) and by the media query for browsers without script. */
.landing.stacked{height:auto}
.landing.stacked .station-full{position:relative;height:auto;min-height:0;display:block}
.landing.stacked .station-full::before{height:90px}
.landing.stacked .station-full .scene{position:relative;height:clamp(300px,min(78vw,64svh),640px)}
.landing.stacked .station-full .scene::after{display:none}
.landing.stacked .station-full .panelwrap{padding-block:22px 34px;justify-content:center}
.landing.stacked .panel{width:min(640px,100%)}
.landing.auto.stacked .station-full .scene{height:clamp(320px,min(78vw,66svh),680px)}
.landing.auto.stacked .station-full .panelwrap{padding-block:18px 40px}
@media (max-width:1100px){
  .landing{height:auto}
  .station-full{position:relative;height:auto;min-height:0;display:block}
  .station-full::before{height:90px}
  .station-full .scene{position:relative;height:clamp(300px,min(78vw,64svh),640px)}
  .station-full .scene::after{display:none}
  .station-full .panelwrap{padding-block:22px 34px;justify-content:center}
  .panel{width:min(640px,100%)}
  .landing.auto .station-full::before{height:0}
}
@media (prefers-reduced-motion:reduce){
  .landing{height:auto}
  .station-full{position:relative}
}
form.nl{display:grid;gap:10px}
form.nl .row{display:grid;grid-template-columns:1fr;gap:10px}
form.nl input{width:100%;min-width:0;padding:15px 18px;border-radius:14px;border:1px solid rgba(255,255,255,.22);background:rgba(12,8,34,.6);color:var(--ivory);font:inherit;font-size:1.05rem}
form.nl input:focus{border-color:var(--sun)}
form.nl button{width:100%;padding:14px 22px;border-radius:999px;border:0;background:var(--grad-btn);color:var(--cosmos-deep);font:inherit;font-weight:700;cursor:pointer;box-shadow:0 10px 28px rgba(253,184,83,.35);transition:transform .2s,box-shadow .2s,filter .2s}
form.nl button:hover{filter:brightness(1.06);transform:translateY(-1px);box-shadow:0 14px 34px rgba(253,184,83,.45)}
form.nl button[disabled]{opacity:.7;cursor:default}
form.nl .fine{font-size:.85rem;color:var(--ink-muted)}
form.nl .hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.ok{display:none;padding:14px 16px;border-radius:14px;background:rgba(253,203,60,.14);border:1px solid rgba(253,203,60,.5)}
.ok.show{display:block;animation:rise .5s var(--ease) both}
.ok.err{background:rgba(249,126,95,.14);border-color:rgba(249,126,95,.6)}

/* ---------- newsletter page: tiles, sample issue, questions ---------- */
.tiles .tile{padding:26px 24px 28px;display:grid;gap:12px;align-content:start}
.tile .ico{width:44px;height:44px;color:var(--sun)}
.tile h3{font-size:1.25rem}
.mail{max-width:760px;padding:clamp(20px,3vw,32px);display:grid;gap:14px}
.mailhead{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:center;padding-bottom:12px;border-bottom:1px solid var(--line)}
.mailhead .from{display:inline-flex;align-items:center;gap:10px;font-weight:600}
.mailhead .from i{width:12px;height:12px;border-radius:50%;background:var(--sun);box-shadow:0 0 12px 3px rgba(253,203,60,.5)}
.mail .subject{font-size:clamp(1.2rem,2vw,1.5rem)}
.mailbody{display:grid;gap:14px;color:var(--ivory)}
.mailbody p{max-width:66ch}
.faq{display:grid;grid-template-columns:1fr 1fr;gap:18px 32px;margin:0;max-width:980px}
.faq dt{font-weight:700;color:var(--sun-soft);margin-top:6px}
.faq dd{margin:0;color:var(--ink-muted)}
.faq>dt{grid-column:1}.faq>dd{grid-column:2}
@media (max-width:760px){.faq{grid-template-columns:1fr}.faq>dt,.faq>dd{grid-column:1}.faq dd{margin-bottom:8px}}

/* ---------- videos: the season as one thread ---------- */
.seasonline{display:inline-flex;align-items:center;gap:10px;font-size:1rem;color:var(--ink-muted);flex-wrap:wrap}
.seasonline .count{display:inline-flex;align-items:baseline;gap:4px;padding:4px 12px;border-radius:999px;background:rgba(253,203,60,.14);color:var(--sun-soft);font-variant-numeric:tabular-nums}
.seasonline .count b{font-size:1.2em}
.timeline{position:relative;padding-block:12px 32px}
.timeline .thread{z-index:1}
.episodes{list-style:none;margin:0;padding:0;display:grid;gap:clamp(26px,4vw,52px);position:relative;z-index:2}
.ep{display:grid;grid-template-columns:1fr 84px 1fr;align-items:center}
.ep .epcard{grid-column:1;grid-row:1}
.ep:nth-child(even) .epcard{grid-column:3}
.ep .dot{grid-column:2;grid-row:1;justify-self:center;width:16px;height:16px;border-radius:50%;background:rgba(253,203,60,.28);box-shadow:0 0 0 4px rgba(253,203,60,.08);transition:background .5s,box-shadow .5s;position:relative}
.ep .dot::after{content:"";position:absolute;top:50%;height:2px;width:34px;transform:translateY(-50%);background:linear-gradient(90deg,rgba(253,203,60,0),rgba(253,203,60,.75));right:100%;opacity:.25;transition:opacity .5s}
.ep:nth-child(even) .dot::after{right:auto;left:100%;background:linear-gradient(90deg,rgba(253,203,60,.75),rgba(253,203,60,0))}
.ep.lit .dot{background:var(--sun-soft);box-shadow:0 0 0 5px rgba(253,203,60,.18),0 0 26px 7px rgba(253,203,60,.45)}
.ep.lit .dot::after{opacity:1}
.epcard{display:grid;grid-template-columns:1fr;gap:14px;padding:14px 14px 18px}
.epcard .body{padding:0 6px}
.epcard .shot{display:block;border-radius:12px;overflow:hidden;background:var(--cosmos-deep);aspect-ratio:16/9;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.epcard .shot img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.epcard:hover .shot img{transform:scale(1.04)}
.epcard .shot.planet{display:grid;place-items:center;position:relative;background:radial-gradient(70% 70% at 50% 60%,rgba(91,46,140,.5),rgba(18,11,46,.9))}
.epcard .shot.planet img{width:38%;height:auto;transform:none;opacity:.9}
.epcard .shot.planet .n{position:absolute;right:16px;bottom:8px;font-size:2.6rem;font-weight:700;color:rgba(253,203,60,.55);font-variant-numeric:tabular-nums}
.epcard .body{display:grid;gap:8px;min-width:0}
.epcard .meta{display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:.9rem}
.epcard h2{font-size:clamp(1.2rem,1.8vw,1.45rem)}
.epcard h2 a{color:var(--ivory);text-decoration:none}
.epcard h2 a:hover{color:var(--sun-soft)}
.epcard p{font-size:1rem}
.epcard .actions{margin-top:4px}
.epcard .actions .btn{padding:9px 14px;font-size:.95rem}
.ep.planned .epcard{background:linear-gradient(160deg,rgba(58,52,128,.55),rgba(47,42,107,.55));border-style:dashed}
.ep.planned h2{color:var(--ink-muted)}
.soon{display:inline-block;font-size:.76rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--sun-soft);border:1px solid rgba(253,203,60,.4);padding:3px 10px;border-radius:999px;justify-self:start}
.tlnote{padding-block:8px 24px;max-width:70ch}
@media print{.reveal,.hero .copy>*,.pagehead>*{animation:none!important}}
@media (max-width:760px){
  .ep,.ep:nth-child(even){grid-template-columns:36px 1fr}
  .ep .epcard,.ep:nth-child(even) .epcard{grid-column:2}
  .ep .dot{grid-column:1;justify-self:start;width:14px;height:14px}
  .ep .dot::after,.ep:nth-child(even) .dot::after{display:none}
  .epcard{gap:12px}
  .epcard .shot.planet{aspect-ratio:3/1}
  .epcard .shot.planet img{width:26%}
  .episodes{gap:22px}
}

/* ---------- footer ---------- */
footer{position:relative;background:radial-gradient(60% 40% at 15% 100%,rgba(253,184,83,.12),transparent 60%),radial-gradient(1px 1px at 20% 30%,rgba(245,239,224,.5),transparent 2px),radial-gradient(1px 1px at 70% 60%,rgba(245,239,224,.4),transparent 2px),radial-gradient(1.5px 1.5px at 85% 20%,rgba(245,239,224,.45),transparent 2px),radial-gradient(1px 1px at 40% 80%,rgba(245,239,224,.35),transparent 2px),var(--cosmos-deep);padding-block:60px 40px;color:var(--ink-muted);font-size:.98rem}
footer::before{content:"";position:absolute;inset:0 0 auto;height:2px;background:var(--grad);opacity:.7}
.foot{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:36px;align-items:start}
.foot .foot-h{font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--sun);margin-bottom:12px;font-weight:600}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.foot a{color:var(--ivory);text-decoration:none}
.foot a:hover{color:var(--sun-soft)}
.foot .brandcol{display:grid;gap:14px;justify-items:start}
.foot .brandcol img{width:min(220px,70%);height:auto}
.foot .claimline{font-weight:700;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;display:inline-block;font-size:1.15rem}
.fbot{margin-top:36px;padding-top:20px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.9rem}
@media (max-width:760px){.foot{grid-template-columns:1fr 1fr}.foot .brandcol{grid-column:1/-1}}

/* ---------- article and list pages ---------- */
.pagehead{padding-block:clamp(24px,4vw,56px) 24px;display:grid;gap:14px}
.pagehead .meta{display:flex;gap:12px;align-items:center;flex-wrap:wrap;color:var(--ink-muted)}
.vidhead{display:grid;grid-template-columns:1.1fr 1fr;gap:28px;align-items:center}
.vidhead img{border-radius:16px;border:1px solid var(--line);width:100%;aspect-ratio:16/9;object-fit:cover}
.vidhead .side{display:grid;gap:12px}
@media (max-width:760px){.vidhead{grid-template-columns:1fr}}
article .body{display:grid;gap:18px;padding-block:8px 56px}
article .body h2{margin-top:20px}
article .body h3{margin-top:8px}
article .body p,article .body ul,article .body ol{max-width:68ch}
article .body ul,article .body ol{margin:0;padding-left:1.3em;display:grid;gap:6px}
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:14px}
table{border-collapse:collapse;width:100%;min-width:720px;font-size:.98rem}
th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
th{font-weight:600;color:var(--sun);font-size:.85rem;letter-spacing:.06em;text-transform:uppercase;background:rgba(0,0,0,.18)}
td:first-child{font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--ink-muted)}
.mark{display:inline-block;font-size:.78rem;font-weight:600;padding:1px 8px;border-radius:999px;background:rgba(201,194,220,.14);white-space:nowrap}
.mark.f{color:#BFE3C8}.mark.s{color:#F5D08A}.mark.m{color:#D9C6FF}
.note{padding:14px 16px;border-left:3px solid var(--sun);background:rgba(253,203,60,.08);border-radius:0 12px 12px 0;color:var(--ink-muted)}
.label-line{font-size:.9rem;color:var(--ink-muted);border-top:1px solid var(--line);padding-top:14px}
.list{display:grid;gap:14px}
.list .card{padding:18px 20px;display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center}
.list .card .n{font-variant-numeric:tabular-nums;color:var(--sun);font-weight:700;font-size:1.3rem}
.list .card h3 a{color:inherit;text-decoration:none}
.list .card h3 a:hover{color:var(--sun-soft)}
.list .card .thumb{width:160px;border-radius:10px;overflow:hidden;border:1px solid var(--line)}
.list .card .thumb img{aspect-ratio:16/9;object-fit:cover;width:100%}
@media (max-width:640px){.list .card{grid-template-columns:1fr}.list .card .thumb{width:100%}}
.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;max-width:60ch;margin:0}
.kv dt{color:var(--sun);font-weight:600}
.kv dd{margin:0}
.hero-post{aspect-ratio:16/9;max-width:820px;border-radius:16px;overflow:hidden;border:1px solid var(--line);background:var(--cosmos-deep)}
.hero-post img{width:100%;height:100%;object-fit:cover}
.nlcard{display:grid;grid-template-columns:1fr 1fr;gap:0;overflow:hidden}
.nlcard img{width:100%;height:100%;object-fit:cover;object-position:left bottom}
.nlcard .panel{width:100%;padding:28px}
@media (max-width:760px){.nlcard{grid-template-columns:1fr}}
.filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.filters a{text-decoration:none;padding:6px 12px;border-radius:999px;border:1px solid var(--line);color:var(--ivory);font-weight:600;font-size:.95rem;transition:background .25s,border-color .25s,color .25s}
.filters a[aria-current="page"],.filters a:hover{background:rgba(253,203,60,.16);color:var(--sun-soft);border-color:rgba(253,203,60,.5)}
.pager{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-block:12px 40px}
.pager a{text-decoration:none;font-weight:600}
.empty{padding:40px 0 80px;text-align:center;display:grid;gap:14px;justify-items:center}
.empty img{width:140px;height:140px;border-radius:50%}
.sources li{margin-bottom:4px}
address{font-style:normal}
.chapters{columns:2;column-gap:24px;max-width:60ch}
@media (max-width:600px){.chapters{columns:1}}
.chapters li{break-inside:avoid}
.chapters .t{font-variant-numeric:tabular-nums;color:var(--sun);margin-right:8px}
@media (prefers-reduced-motion:reduce){.card,.card:hover,.btn,.btn:hover,form.nl button,form.nl button:hover{transition:none;transform:none;translate:none}.capsule{transition:none}.station-full.docked .ping::before,.station-full.docked .ping::after,.station-full.docked .panel .sig i{animation:none}.post .pic img,.feature .shot img,.epcard .shot img{transition:none;transform:none}.ok.show{animation:none}}
.pad-top{margin-top:28px}
.chapters{list-style:none;padding-left:0;margin:0}
