/* Poppins, self-hosted. Google Fonts is a third-party request that Brave and
   every other content blocker drops, and the fallback font is wider - which used
   to push a chapter heading past the viewport on a phone. 31 KB for all four
   weights, latin subset, so it is also fewer bytes than the two preconnects it
   replaces. */
@font-face{font-family:Poppins;font-style:normal;font-weight:200;font-display:swap;
  src:url(/fonts/poppins-200.woff2) format('woff2')}
@font-face{font-family:Poppins;font-style:normal;font-weight:300;font-display:swap;
  src:url(/fonts/poppins-300.woff2) format('woff2')}
@font-face{font-family:Poppins;font-style:normal;font-weight:400;font-display:swap;
  src:url(/fonts/poppins-400.woff2) format('woff2')}
@font-face{font-family:Poppins;font-style:normal;font-weight:500;font-display:swap;
  src:url(/fonts/poppins-500.woff2) format('woff2')}

/* ===== tokens ===== */
:root{
  --bg:#000; --panel:#070708; --ink:#fff; --mute:#8b8b8b; --dim:#565656;
  --gold:#c58a4a; --line:rgba(255,255,255,.12);
  --pad:clamp(20px,5vw,88px);
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg); color:var(--ink); font-family:Poppins,system-ui,sans-serif;
  font-weight:300; -webkit-font-smoothing:antialiased; overflow-x:hidden;
  overflow-x:clip;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-weight:300}
::selection{background:var(--gold);color:#000}

.label{font-size:9px;letter-spacing:.28em;text-transform:uppercase;color:var(--dim)}
.kicker{font-size:10px;letter-spacing:.34em;text-transform:uppercase;color:var(--mute)}
p{color:#b9b9b9;font-size:clamp(12px,1.05vw,14px);line-height:1.95;font-weight:200}

/* ===== reveal ===== */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* ===== nav ===== */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:80;display:flex;align-items:center;
  gap:40px;padding:22px var(--pad);
  background:linear-gradient(#000 20%,rgba(0,0,0,0));
  transition:background .4s var(--ease),padding .4s var(--ease);
}
.nav.stuck{background:rgba(0,0,0,.85);backdrop-filter:blur(14px);padding:14px var(--pad);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:9px;font-size:10px;letter-spacing:.24em;text-transform:uppercase}
.brand img{width:24px;height:24px;border-radius:50%;opacity:.95}
.burger{background:none;border:0;cursor:pointer;display:flex;flex-direction:column;gap:5px;
  width:24px;margin-left:auto;padding:0}
/* the icon is 24x7 px; a transparent pseudo-element grows the tap target to
   44x43 without moving anything. Same trick for the small .go and .lang links */
.burger,.go,.nav .lang{position:relative}
.burger::before{content:"";position:absolute;inset:-18px -10px}
.go::after,.nav .lang::after{content:"";position:absolute;inset:-14px -4px}
.burger span{height:1px;background:#fff;width:100%;transition:transform .35s var(--ease),width .35s var(--ease)}
.burger span:last-child{width:64%;align-self:flex-end}
.burger.open span:first-child{transform:translateY(3px) rotate(45deg)}
.burger.open span:last-child{width:100%;transform:translateY(-3px) rotate(-45deg)}

/* language switch - only the two front pages have a translation to switch to */
.nav .lang{margin-left:auto;font-size:9px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--dim);border:1px solid var(--line);border-radius:999px;padding:6px 11px;
  transition:color .3s var(--ease),border-color .3s var(--ease)}
.nav .lang:hover{color:#fff;border-color:rgba(255,255,255,.45)}
.nav .lang+.burger{margin-left:22px}

/* full-screen menu - the catalogue outgrew a single row of links */
.menu{position:fixed;inset:0;z-index:70;background:rgba(0,0,0,.97);backdrop-filter:blur(20px);
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(96px,11vw,150px) var(--pad) clamp(40px,6vw,70px);
  opacity:0;visibility:hidden;transition:opacity .45s var(--ease),visibility .45s;overflow-y:auto}
.menu.open{opacity:1;visibility:visible}
/* on a short window (1024x600, 1280x720) plain center pushed the first heading
   behind the header with no way to scroll up to it; safe center starts at the top */
@media (max-height:760px){.menu{justify-content:safe center}}
.menu-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,5vw,80px)}
.menu-grid .col-h{margin-bottom:20px;font-size:9px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold)}
.menu-grid a{display:block;padding:11px 0;border-bottom:1px solid rgba(255,255,255,.08);
  font-size:clamp(15px,1.9vw,25px);font-weight:200;letter-spacing:.12em;text-transform:uppercase;
  color:#b9b9b9;transition:color .3s var(--ease),padding-left .3s var(--ease)}
.menu-grid a:hover{color:#fff;padding-left:12px}
.menu-grid a.current{color:var(--gold)}
.menu-note{margin-top:clamp(30px,5vw,56px);font-size:9px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--dim)}

/* ===== hero ===== */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:0 var(--pad) 132px;overflow:hidden}
.hero-img{position:absolute;inset:-6% -14% -6% 26%;z-index:0}
.hero-img img{width:100%;height:100%;object-fit:cover;object-position:60% 50%;
  transform:scale(1.06);animation:drift 26s var(--ease) infinite alternate}
/* a moving hero needs no drift animation on top of the movement */
.hero-img video{width:100%;height:100%;object-fit:cover;object-position:60% 50%}
.hero::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(100deg,#000 22%,rgba(0,0,0,.72) 44%,rgba(0,0,0,0) 78%)}
/* the stats row sits straight on the photograph, and the gradient above only
   darkens from the left - so on a bright hero the right-hand labels vanished */
.hero-img::after{content:"";position:absolute;inset:auto 0 0 0;height:44%;
  background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.55) 45%,rgba(0,0,0,.92))}
@keyframes drift{to{transform:scale(1.13) translate3d(-1.5%,-1%,0)}}
.hero-inner{position:relative;z-index:2;max-width:min(760px,64vw)}
.display{
  font-size:clamp(52px,11.5vw,168px);font-weight:300;line-height:.92;
  letter-spacing:.13em;text-transform:uppercase;text-indent:.13em;
}
.display.sm{font-size:clamp(38px,6vw,84px)}
.lede{margin-top:26px;max-width:520px;color:#cfcfcf;font-size:clamp(12px,1.05vw,14.5px);line-height:1.9}
.stats{
  position:absolute;left:var(--pad);right:var(--pad);bottom:60px;z-index:2;
  list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;
  border-top:1px solid var(--line);padding-top:22px;
}
.stats .value{display:block;margin-top:9px;font-size:clamp(15px,1.7vw,23px);font-weight:200;letter-spacing:.01em}
.scroll-hint{position:absolute;right:var(--pad);bottom:14px;z-index:2;display:flex;align-items:center;gap:10px;
  font-size:9px;letter-spacing:.3em;text-transform:uppercase;color:var(--dim)}
.scroll-hint span{width:34px;height:1px;background:var(--dim);position:relative;overflow:hidden}
.scroll-hint span::after{content:"";position:absolute;inset:0;background:var(--gold);animation:sweep 2.4s infinite}
@keyframes sweep{0%{transform:translateX(-100%)}60%,100%{transform:translateX(100%)}}

/* ===== solar system rail ===== */
.system{padding:clamp(70px,10vw,140px) var(--pad) 56px;
  /* .sun hangs 9% off the right edge on purpose; clip it at the viewport so it
     does not give every desktop page a sideways scroll */
  overflow-x:clip}
.rail{position:relative;height:min(46vw,430px);min-height:280px}
.orbits{position:absolute;inset:0;width:100%;height:100%}
.orbits path{fill:none;stroke:rgba(255,255,255,.13);stroke-width:.7}
.planets{list-style:none;position:absolute;inset:0;display:flex;align-items:center;
  justify-content:space-between;padding-right:19%}
.planets li{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;
  opacity:.5;transition:opacity .5s var(--ease),transform .5s var(--ease);cursor:default}
.planets li:hover,.planets li.current{opacity:1;transform:translateY(-4px)}
.planets b{font-size:9px;letter-spacing:.24em;text-transform:uppercase;font-weight:400}
.planets em{font-size:8.5px;letter-spacing:.18em;color:var(--dim);font-style:normal}
.planets .current b{color:var(--gold)}
.p{position:relative;border-radius:50%;display:block;
  background:radial-gradient(circle at 32% 30%,#e6e0d6,#8d8a84 46%,#191919 100%);
  box-shadow:inset -6px -5px 14px rgba(0,0,0,.75)}
.mercury{width:12px;height:12px}
.venus{width:17px;height:17px;background:radial-gradient(circle at 32% 30%,#f0dcb4,#a98f63 48%,#1b1509 100%)}
.earth{width:18px;height:18px;background:radial-gradient(circle at 32% 30%,#bcd8e8,#4d7fa1 46%,#0a1520 100%)}
.mars{width:14px;height:14px;background:radial-gradient(circle at 32% 30%,#e5a173,#a15a34 48%,#1d0d06 100%)}
.jupiter{width:46px;height:46px;background:
  repeating-linear-gradient(0deg,rgba(0,0,0,.16) 0 2px,rgba(255,255,255,.05) 2px 4px),
  radial-gradient(circle at 32% 28%,#f3ded0,#c69a72 42%,#7d5232 68%,#150c06 100%);
  box-shadow:inset -9px -7px 20px rgba(0,0,0,.8),0 0 34px rgba(197,138,74,.28)}
.saturn{width:26px;height:26px;background:radial-gradient(circle at 32% 30%,#f2e4c2,#b59a63 48%,#1b1408 100%)}
.saturn s{position:absolute;left:50%;top:50%;width:48px;height:13px;transform:translate(-50%,-50%) rotate(-16deg);
  border:1px solid rgba(255,255,255,.42);border-radius:50%}
.uranus{width:21px;height:21px;background:radial-gradient(circle at 32% 30%,#cfeef0,#6ba7ab 48%,#08191a 100%)}
.neptune{width:20px;height:20px;background:radial-gradient(circle at 32% 30%,#b9cdf2,#4a68ac 48%,#070d1c 100%)}
.sun{position:absolute;right:-9%;top:50%;transform:translateY(-50%);
  width:min(30vw,300px);aspect-ratio:1;border-radius:50%;
  border:1px solid rgba(255,255,255,.15);
  background:radial-gradient(circle at 20% 50%,rgba(255,214,150,.12),rgba(0,0,0,0) 62%);
  display:flex;align-items:center;justify-content:flex-end;padding-right:18%}
.sun span{font-size:9px;letter-spacing:.26em;text-transform:uppercase;color:var(--mute)}
.rail-note{margin-top:38px;font-size:9px;letter-spacing:.16em;color:#3d3d3d;text-transform:uppercase}

/* ===== chapters ===== */
.chapter{padding:clamp(80px,11vw,180px) var(--pad)}
.chapter-head{display:flex;align-items:center;gap:clamp(22px,4vw,64px)}
.chapter-head.right{justify-content:flex-end;text-align:right}
.chapter-head h2{font-size:clamp(22px,3.1vw,42px);letter-spacing:.42em;text-transform:uppercase;text-indent:.42em}
.rule{width:min(180px,22vw);height:1px;background:var(--line);margin-top:22px}
.chapter-head.right .rule{margin-left:auto}
.numeral{
  font-size:clamp(72px,13vw,190px);font-weight:500;line-height:.8;letter-spacing:-.02em;
  background-size:cover;background-position:center;-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;opacity:.92;
  background-color:rgba(255,255,255,.3);
}
.numeral.gold{color:var(--gold);-webkit-text-fill-color:currentColor;opacity:.55;background:none}
.chapter-lede{max-width:430px;margin-top:34px}
.chapter-head.right + .chapter-lede{margin-left:auto;text-align:right}

.overview-grid{display:grid;grid-template-columns:1fr 1.25fr;gap:clamp(28px,6vw,90px);
  align-items:center;margin-top:clamp(40px,6vw,86px)}
.copy p + p{margin-top:18px}
.shot{overflow:hidden}
.shot img{width:100%;aspect-ratio:16/10;object-fit:cover;transform:scale(1.02);
  transition:transform 1.6s var(--ease)}
.shot:hover img{transform:scale(1.08)}
.metrics{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
  margin-top:clamp(50px,7vw,110px);border-top:1px solid var(--line);padding-top:26px}
.metrics .value{display:block;margin-top:10px;font-size:clamp(18px,2.4vw,34px);font-weight:200;
  font-variant-numeric:tabular-nums}

/* ===== features deck ===== */
.deck{display:flex;gap:0;margin-top:clamp(44px,6vw,88px);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
  scrollbar-width:none}
.deck::-webkit-scrollbar{display:none}
.card{flex:0 0 100%;scroll-snap-align:start;display:grid;grid-template-columns:1.15fr 1fr;
  min-height:min(60vw,520px);background:var(--panel)}
.card img{width:100%;height:100%;object-fit:cover}
.card-body{padding:clamp(24px,3.4vw,54px);display:flex;flex-direction:column;justify-content:center}
.card-body h3{font-size:12px;letter-spacing:.34em;text-transform:uppercase;margin-bottom:18px}
.facts{list-style:none;margin-top:26px;display:grid;gap:16px}
.facts li{display:flex;gap:14px;font-size:11px;line-height:1.85;color:#a3a3a3;font-weight:200}
.facts i{flex:0 0 26px;height:26px;border-radius:50%;border:1px solid var(--line);
  background:radial-gradient(circle at 34% 32%,rgba(255,255,255,.3),rgba(255,255,255,0) 62%)}
.deck-nav{display:flex;align-items:center;gap:20px;margin-top:28px}
.deck-nav button{background:none;border:1px solid var(--line);color:#ddd;width:38px;height:38px;
  border-radius:50%;cursor:pointer;transition:border-color .4s,color .4s,background .4s}
.deck-nav button:hover{border-color:var(--gold);color:var(--gold)}
.track{flex:1;height:1px;background:var(--line);position:relative}
#deck-bar{position:absolute;left:0;top:-1px;height:3px;width:33.33%;background:var(--gold);
  transition:transform .6s var(--ease)}

/* ===== in depth ===== */
.depth-grid{display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(26px,5vw,72px);
  align-items:center;margin-top:clamp(48px,7vw,100px)}
.donut{position:relative;width:min(38vw,236px);aspect-ratio:1;display:grid;place-items:center}
.donut svg{position:absolute;inset:0;transform:rotate(-90deg)}
.ring-bg{fill:none;stroke:rgba(255,255,255,.1);stroke-width:5}
.ring-fg{fill:none;stroke:var(--gold);stroke-width:5;stroke-linecap:round;
  stroke-dasharray:515;stroke-dashoffset:515;transition:stroke-dashoffset 2s var(--ease)}
.donut-mid b{font-size:clamp(24px,3.4vw,40px);font-weight:200;font-variant-numeric:tabular-nums}
.donut-key{position:absolute;bottom:-40px;display:flex;gap:22px}
.donut-key span{display:flex;align-items:center;gap:7px;font-size:8.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--dim)}
.donut-key i{width:8px;height:8px;border-radius:50%}
.k1{background:var(--gold)} .k2{background:rgba(255,255,255,.28)}

.split{position:relative;margin-top:clamp(80px,12vw,190px);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(26px,5vw,80px);align-items:center;padding:clamp(28px,5vw,70px) 0}
.split-img{grid-column:1;grid-row:1/span 2;align-self:center}
.split-img img{width:100%;height:auto;max-height:min(70vh,620px);object-fit:contain}
.split-copy{position:relative;max-width:480px;grid-column:2;grid-row:1;align-self:end}
.split-copy h3{font-size:12.5px;letter-spacing:.34em;text-transform:uppercase;margin-bottom:20px;
  display:flex;align-items:baseline;gap:14px}
.split-copy h3 em{font-size:24px;font-style:normal;color:var(--gold);letter-spacing:0}
.split-copy p + p{margin-top:16px}
.split-copy.ghost{grid-column:2;grid-row:2;align-self:start}
.split-copy.ghost h3,.split-copy.ghost p{color:var(--mute)}

/* ===== moons ===== */
.moon-diagram{position:relative;margin-left:auto;width:min(26vw,240px);aspect-ratio:1}
.moon-diagram svg{width:100%;height:100%}
.moon-diagram .mo{fill:none;stroke:rgba(255,255,255,.13);stroke-width:.7}
.moon-diagram .host{fill:var(--gold)}
.m{position:absolute;inset:0;animation:orbit linear infinite}
.m::after{content:"";position:absolute;left:50%;top:calc(50% - var(--r));
  width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:#efefef;
  box-shadow:0 0 8px rgba(255,255,255,.5)}
.m1{--r:17.5%;animation-duration:14s;animation-delay:-4s}
.m2{--r:25.83%;animation-duration:22s;animation-delay:-14s}
.m3{--r:35%;animation-duration:34s;animation-delay:-9s}
.m4{--r:44.17%;animation-duration:48s;animation-delay:-30s}
@keyframes orbit{to{transform:rotate(360deg)}}
.moon-feature{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(28px,5vw,80px);
  align-items:center;margin-top:clamp(50px,7vw,110px)}
.moon-feature img{width:100%;height:auto}
.moon-feature + .moon-feature figure{order:2}
.moon-copy h3{font-size:12px;letter-spacing:.34em;text-transform:uppercase;color:var(--gold)}

/* ===== next ===== */
.upnext{position:relative;min-height:min(78vw,660px);display:flex;align-items:center;
  padding:clamp(60px,9vw,130px) var(--pad);overflow:hidden}
.upnext img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:70% 50%}
.upnext::after{content:"";position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,0) 22%,rgba(0,0,0,0) 58%,rgba(0,0,0,.8) 88%,#000),
  linear-gradient(90deg,#000 26%,rgba(0,0,0,.55) 55%,rgba(0,0,0,.15))}
.next-copy{position:relative;z-index:1;max-width:480px}
.next-copy .display{margin:14px 0 20px}
.btn{display:inline-block;margin-top:30px;padding:14px 30px;border:1px solid var(--line);
  font-size:9.5px;letter-spacing:.3em;text-transform:uppercase;transition:.45s var(--ease)}
.btn:hover{background:#fff;color:#000;border-color:#fff}

/* ===== footer ===== */
.foot{border-top:1px solid var(--line);padding:clamp(44px,6vw,80px) var(--pad)}
.foot-top{display:flex;align-items:center;gap:40px}
.foot-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px;
  margin-top:clamp(40px,6vw,72px);max-width:760px}
.foot-cols a{white-space:nowrap}
.foot-cols .col-h{font-size:9px;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);margin-bottom:18px}
.foot-cols a{display:block;font-size:10.5px;color:#8f8f8f;padding:5px 0;font-weight:200;transition:color .3s}
.foot-cols a:hover{color:#fff}
.foot-bar{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  padding:26px 0;border-top:1px solid var(--line);margin-top:34px}
.foot-bar,.foot-bar a{font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:#4a4a4a}
.foot-bar nav{display:flex;gap:26px}
.foot-bar a:hover{color:#fff}

/* ===== home page ===== */
.home-hero .hero-img{inset:-4% -6% -4% 18%}
.home-hero .hero-img img{object-position:50% 45%}
.home-hero::after{background:linear-gradient(96deg,#000 26%,rgba(0,0,0,.82) 46%,rgba(0,0,0,.35) 82%)}
.home-hero .kicker{display:block;margin-bottom:20px}
.home-hero .lede b{font-weight:400;color:#fff;display:block;margin-bottom:12px;
  font-size:clamp(14px,1.4vw,19px);line-height:1.5}
.home-hero .btn{margin-top:34px}
.stats a{border-bottom:1px solid rgba(255,255,255,.25);transition:border-color .4s var(--ease)}
.stats a:hover{border-color:var(--gold);color:var(--gold)}
.planets a{display:contents}
.planets li:has(a){cursor:pointer}

.services{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  margin-top:clamp(44px,6vw,90px);border:1px solid var(--line)}
.service{background:#000;padding:clamp(24px,2.6vw,40px);transition:background .5s var(--ease)}
.service:hover{background:var(--panel)}
.service h3{font-size:11.5px;letter-spacing:.3em;text-transform:uppercase;margin-bottom:18px}
.service ul{list-style:none;margin-top:22px;display:grid;gap:9px}
.service li{font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);
  display:flex;align-items:center;gap:10px}
.service li::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--gold);flex:0 0 4px}

.steps{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(20px,3vw,48px);margin-top:clamp(44px,6vw,90px)}
.steps li{border-top:1px solid var(--line);padding-top:22px}
.step-no{font-size:clamp(30px,3.4vw,46px);font-weight:500;color:transparent;
  -webkit-text-stroke:1px rgba(255,255,255,.3);display:block;line-height:1}
.steps h3{font-size:11px;letter-spacing:.3em;text-transform:uppercase;margin:20px 0 14px}

.work{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,2.4vw,36px);
  margin-top:clamp(44px,6vw,90px)}
.work-card{display:block;border:1px solid var(--line);background:var(--panel);
  transition:border-color .5s var(--ease),transform .5s var(--ease)}
.work-card:hover{border-color:rgba(197,138,74,.55);transform:translateY(-4px)}
.work-card img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:50% 0;
  border-bottom:1px solid var(--line)}
.work-card > div{padding:clamp(20px,2.2vw,32px)}
.work-card h3{font-size:11.5px;letter-spacing:.3em;text-transform:uppercase;margin-bottom:14px}
.go{display:inline-block;margin-top:18px;font-size:9px;letter-spacing:.26em;
  text-transform:uppercase;color:var(--gold)}

/* ===== starfield (front page only) ===== */
.sky{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.sky i{position:absolute;top:0;left:0;border-radius:50%;background:transparent;
  animation:rise linear infinite}
.sky .s1{width:1px;height:1px;box-shadow:487px 1213px #fff,1114px 267px #fff,757px 1875px #fff,1236px 970px #fff,1281px 1189px #fff,134px 1240px #fff,26px 1861px #fff,1715px 960px #fff,531px 1128px #fff,479px 392px #fff,1468px 963px #fff,1107px 1713px #fff,1125px 975px #fff,813px 1308px #fff,1763px 308px #fff,474px 1300px #fff,310px 1777px #fff,1896px 1071px #fff,798px 1518px #fff,31px 1375px #fff,1591px 131px #fff,326px 1552px #fff,1960px 1210px #fff,87px 616px #fff,1597px 63px #fff,1686px 1772px #fff,551px 968px #fff,1218px 1472px #fff,1884px 1799px #fff,793px 1462px #fff,1614px 1886px #fff,874px 808px #fff,1491px 1640px #fff,1181px 910px #fff,1974px 1916px #fff,274px 1799px #fff,748px 199px #fff,73px 278px #fff,1013px 444px #fff,528px 1977px #fff,1376px 893px #fff,1595px 1283px #fff,1751px 616px #fff,862px 1038px #fff,1706px 790px #fff,1175px 718px #fff,1093px 1198px #fff,834px 1196px #fff,475px 1851px #fff,689px 1396px #fff,1875px 1902px #fff,58px 1753px #fff,572px 1240px #fff,1374px 1424px #fff,334px 1430px #fff,1762px 668px #fff,1975px 1109px #fff,1852px 1171px #fff,1165px 213px #fff,1461px 1342px #fff,432px 1296px #fff,1703px 1174px #fff,546px 583px #fff,254px 129px #fff,987px 1748px #fff,1308px 990px #fff,181px 704px #fff,1639px 136px #fff,840px 1837px #fff,308px 41px #fff,601px 874px #fff,1574px 850px #fff,1787px 243px #fff,90px 1239px #fff,1258px 1559px #fff,92px 773px #fff,1471px 1200px #fff,677px 1128px #fff,1804px 1888px #fff,571px 1035px #fff,483px 73px #fff,634px 14px #fff,157px 221px #fff,1228px 1096px #fff,64px 1943px #fff,404px 1989px #fff,835px 597px #fff,1250px 539px #fff,319px 1412px #fff,86px 1777px #fff,695px 642px #fff,737px 1963px #fff,283px 1836px #fff,1764px 773px #fff,771px 942px #fff,1781px 1065px #fff,790px 1318px #fff,1775px 1219px #fff,1394px 1145px #fff,210px 1270px #fff,1992px 1926px #fff,1661px 1038px #fff,555px 883px #fff,1299px 1475px #fff,1465px 486px #fff,1917px 616px #fff,895px 528px #fff,1067px 620px #fff,1123px 694px #fff,23px 1614px #fff,850px 1187px #fff,644px 41px #fff,771px 1261px #fff,1206px 1294px #fff,272px 123px #fff,1297px 1284px #fff,680px 954px #fff,722px 1391px #fff,1878px 722px #fff,1246px 1447px #fff,571px 1511px #fff,1002px 45px #fff,1207px 124px #fff,1955px 1384px #fff,43px 1972px #fff,756px 514px #fff,1286px 934px #fff,611px 1213px #fff,1231px 655px #fff,363px 745px #fff,379px 640px #fff,1552px 756px #fff,1728px 1219px #fff,540px 615px #fff,1612px 772px #fff,214px 1581px #fff,1665px 55px #fff,1989px 1165px #fff,1400px 1505px #fff,269px 634px #fff,1024px 455px #fff,1338px 1646px #fff,551px 488px #fff,671px 383px #fff,1388px 891px #fff,1330px 1429px #fff,198px 208px #fff,1230px 659px #fff,1943px 683px #fff,1382px 1707px #fff,459px 897px #fff,1658px 1752px #fff,1967px 346px #fff,163px 689px #fff,1519px 1331px #fff,446px 1812px #fff,1164px 923px #fff,554px 460px #fff,1611px 247px #fff,69px 1084px #fff;opacity:.55;animation-duration:150s}
.sky .s2{width:2px;height:2px;box-shadow:1961px 390px #fff,645px 1652px #fff,1712px 1717px #fff,1177px 375px #fff,1768px 570px #fff,696px 1653px #fff,1695px 1314px #fff,175px 1651px #fff,1268px 707px #fff,1207px 265px #fff,862px 597px #fff,1061px 1625px #fff,1740px 555px #fff,951px 709px #fff,1298px 853px #fff,594px 859px #fff,1163px 838px #fff,72px 1885px #fff,846px 319px #fff,408px 9px #fff,977px 1931px #fff,1705px 1802px #fff,1275px 1044px #fff,889px 1144px #fff,1945px 1899px #fff,1468px 454px #fff,66px 1526px #fff,935px 1713px #fff,1542px 1357px #fff,1531px 1062px #fff,1972px 591px #fff,1113px 698px #fff,1822px 465px #fff,1764px 139px #fff,1757px 1205px #fff,1988px 587px #fff,245px 1659px #fff,500px 92px #fff,71px 1850px #fff,1644px 1420px #fff,1049px 1892px #fff,406px 1836px #fff,1809px 1842px #fff,880px 1181px #fff,101px 26px #fff,985px 1526px #fff,247px 351px #fff,1030px 614px #fff,489px 1357px #fff,40px 1075px #fff;opacity:.4;animation-duration:230s}
.sky .s3{width:3px;height:3px;box-shadow:1099px 847px #fff,109px 1923px #fff,1869px 1253px #fff,232px 699px #fff,256px 517px #fff,1990px 1764px #fff,1107px 977px #fff,1662px 1602px #fff,125px 720px #fff,452px 404px #fff,250px 1094px #fff,1817px 1672px #fff,244px 350px #fff,490px 1621px #fff,560px 1887px #fff,1821px 1650px #fff;opacity:.28;animation-duration:340s}
@keyframes rise{to{transform:translateY(-2000px)}}
@media (prefers-reduced-motion:reduce){.sky i{animation:none}}

/* scroll progress */
.progress{position:fixed;top:0;left:0;height:2px;width:100%;transform:scaleX(0);
  transform-origin:0 50%;background:linear-gradient(90deg,var(--gold),#f0d5ae);
  z-index:60;pointer-events:none}

/* ===== venus (own layout) ===== */
.v-hero{position:relative;min-height:100svh;display:grid;place-items:center;text-align:center;
  padding:130px var(--pad) 96px;overflow:hidden}
.v-globe{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:min(76vh,90vw);aspect-ratio:1;border-radius:50%;overflow:hidden;z-index:0;
  box-shadow:0 0 140px 40px rgba(197,138,74,.16);
  animation:vbreathe 20s var(--ease) infinite alternate}
.v-globe img{width:100%;height:100%;object-fit:cover;opacity:.6}
@keyframes vbreathe{to{transform:translate(-50%,-50%) scale(1.07)}}
.v-hero::after{content:"";position:absolute;inset:0;z-index:1;
  background:radial-gradient(ellipse at center,rgba(0,0,0,.15) 0%,rgba(0,0,0,.72) 52%,#000 84%)}
.v-hero-inner{position:relative;z-index:2;max-width:640px}
.v-hero-inner .lede{margin:26px auto 0}

.band{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.band li{padding:clamp(30px,4vw,56px) clamp(16px,2.4vw,34px);border-left:1px solid var(--line)}
.band li:first-child{border-left:0}
.band .value{display:block;margin-top:14px;font-size:clamp(26px,3.4vw,50px);font-weight:200;
  font-variant-numeric:tabular-nums}
.band .unit{font-size:.42em;color:var(--gold);margin-left:7px;letter-spacing:.08em}
.band p{margin-top:14px;font-size:11px;line-height:1.75}

.sticky-chapter{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(28px,6vw,90px);
  padding:clamp(80px,11vw,180px) var(--pad)}
.sticky-side{position:sticky;top:118px;align-self:start}
.sticky-side h2{margin-top:26px;font-size:clamp(20px,2.6vw,34px);letter-spacing:.42em;
  text-transform:uppercase;text-indent:.42em}
.sticky-body > * + *{margin-top:clamp(44px,6vw,86px)}
.sticky-body h3{margin-bottom:16px;font-size:11px;letter-spacing:.34em;text-transform:uppercase;color:var(--gold)}
.sticky-body p{max-width:540px}
.sticky-body p + p{margin-top:18px}
.sticky-body figure img{width:100%;aspect-ratio:16/9;object-fit:contain}
.sticky-body figcaption{margin-top:12px;font-size:9px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dim)}

.ladder{list-style:none;position:relative;margin-top:clamp(44px,6vw,86px)}
.ladder::before{content:"";position:absolute;left:0;top:0;bottom:0;width:1px;
  background:linear-gradient(#e0b07a,#c58a4a,#6d3f14,rgba(255,255,255,.1))}
.ladder li{position:relative;display:grid;grid-template-columns:160px 1fr;
  gap:clamp(20px,4vw,64px);padding:clamp(24px,3vw,42px) 0 clamp(24px,3vw,42px) clamp(26px,4vw,64px)}
.ladder li + li{border-top:1px solid var(--line)}
.ladder li::before{content:"";position:absolute;left:-3.5px;top:calc(50% - 3.5px);
  width:8px;height:8px;border-radius:50%;background:var(--gold)}
.ladder .alt{font-size:clamp(18px,2.2vw,30px);font-weight:200;font-variant-numeric:tabular-nums}
.ladder .alt small{font-size:.44em;color:var(--gold);margin-left:5px;letter-spacing:.1em}
.ladder h3{margin-bottom:10px;font-size:10px;letter-spacing:.3em;text-transform:uppercase}

.mosaic{display:grid;grid-template-columns:repeat(3,1fr);
  grid-template-rows:repeat(2,clamp(150px,19vw,270px));
  gap:clamp(10px,1.6vw,22px);margin-top:clamp(44px,6vw,86px)}
.mosaic figure{position:relative;overflow:hidden}
.mosaic figure:first-child{grid-column:span 2;grid-row:span 2}
.mosaic img{width:100%;height:100%;object-fit:cover;transition:transform 1.6s var(--ease)}
.mosaic figure:hover img{transform:scale(1.06)}
.mosaic figcaption{position:absolute;left:0;right:0;bottom:0;padding:16px 18px;
  background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.85));
  font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:#dcdcdc}

.timeline{list-style:none;position:relative;margin-top:clamp(44px,6vw,86px)}
.timeline::before{content:"";position:absolute;left:50%;top:4px;bottom:4px;width:1px;background:var(--line)}
.timeline li{position:relative;width:50%;text-align:right;
  padding:0 clamp(24px,4vw,58px) clamp(34px,4vw,58px) 0}
.timeline li:nth-child(even){margin-left:50%;text-align:left;
  padding:0 0 clamp(34px,4vw,58px) clamp(24px,4vw,58px)}
.timeline li::after{content:"";position:absolute;top:7px;right:-4px;width:8px;height:8px;
  border-radius:50%;background:var(--gold)}
.timeline li:nth-child(even)::after{right:auto;left:-4px}
.timeline .yr{font-size:clamp(15px,1.8vw,24px);font-weight:200;font-variant-numeric:tabular-nums}
.timeline h3{margin:10px 0 8px;font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold)}
.timeline p{font-size:11.5px;max-width:340px}
.timeline li:nth-child(odd) p{margin-left:auto}

/* ===== moon (own layout) ===== */
.m-hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;
  padding:0 var(--pad) clamp(168px,19vw,215px);overflow:hidden}
.m-hero > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:52% 22%;z-index:0}
.m-hero::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,
  rgba(0,0,0,.72) 0%,rgba(0,0,0,.1) 28%,rgba(0,0,0,.6) 58%,rgba(0,0,0,.9) 82%,#000 100%)}
.m-hero-inner{position:relative;z-index:2;width:100%;display:flex;align-items:flex-end;
  justify-content:space-between;gap:clamp(24px,5vw,70px);flex-wrap:wrap}
.m-hero .cap{max-width:280px;text-align:right;font-size:9px;letter-spacing:.18em;
  text-transform:uppercase;color:#bdbdbd;line-height:2.1}
.m-hero .kicker{color:#d4d4d4}

.board-wrap{overflow-x:auto;overscroll-behavior-x:contain;margin-top:clamp(40px,6vw,80px)}
.board{width:100%;min-width:660px;border-collapse:collapse;font-size:12px}
.board th{text-align:left;font-weight:400;font-size:9px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--gold);padding:0 20px 16px 0;border-bottom:1px solid var(--line);white-space:nowrap}
.board td{padding:18px 20px 18px 0;border-bottom:1px solid rgba(255,255,255,.06);
  color:#b0b0b0;font-weight:200;vertical-align:top}
.board td:first-child{color:#fff;white-space:nowrap}
.board td:nth-child(2),.board td:last-child,.board td:nth-child(5){font-variant-numeric:tabular-nums}
.board tbody tr{transition:background .3s var(--ease)}
.board tbody tr:hover{background:rgba(255,255,255,.03)}
.board tbody tr:hover td{color:#fff}

.watch{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,86px);
  align-items:start;margin-top:clamp(40px,6vw,80px)}
.watch-dial{position:sticky;top:112px}
.watch-photo{max-width:520px;margin:0 auto;overflow:hidden}
.watch-photo img{width:100%;height:auto;display:block;transform:scale(1.01);
  transition:transform 1.8s var(--ease)}
.watch-photo:hover img{transform:scale(1.06)}
.dial-note{margin:20px auto 0;max-width:420px;text-align:center;font-size:9px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--dim);line-height:2}

.log{list-style:none;counter-reset:l}
.chapter > .log{margin-top:clamp(40px,6vw,80px)}
.chapter > .log p{max-width:660px}
.log li{position:relative;padding:0 0 clamp(28px,3.4vw,44px) 64px}
.log li::before{counter-increment:l;content:counter(l,decimal-leading-zero);position:absolute;
  left:0;top:-1px;font-size:11px;letter-spacing:.2em;color:var(--gold);font-variant-numeric:tabular-nums}
.log li::after{content:"";position:absolute;left:23px;top:16px;bottom:2px;width:1px;background:var(--line)}
.log li:last-child::after{display:none}
.log h3{margin-bottom:10px;font-size:10.5px;letter-spacing:.3em;text-transform:uppercase}
.specs{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 28px;
  margin-top:36px;padding-top:28px;border-top:1px solid var(--line)}
.specs .value{display:block;margin-top:9px;font-size:12.5px;color:#fff;font-weight:200;line-height:1.7}

.strip{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.4vw,20px);
  margin-top:clamp(40px,6vw,80px)}
.strip figure{overflow:hidden}
.strip figure img{width:100%;aspect-ratio:4/5;object-fit:cover;
  transition:transform 1.6s var(--ease)}
.strip figure:hover img{transform:scale(1.05)}
.strip figcaption{margin-top:14px;font-size:9px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--dim);line-height:2}

.poster{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(30px,6vw,90px);
  align-items:center;margin-top:clamp(40px,6vw,80px)}
.poster img{width:100%;border:1px solid var(--line)}
.poster p + p{margin-top:18px}
.board-hint{display:none;margin-top:16px;font-size:9px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--dim)}

/* artemis ii - the moon layout, reframed: the lit surface has to sit low
   enough that the Earthset crescent is not cropped out on a phone */
.m-hero.a2 > img{object-position:48% 42%}
/* the flyby frames are wide, and the subject is often a small disc in a lot of
   black - a 4:5 crop throws away the picture, so this page keeps the frame */
.strip.wide figure img{aspect-ratio:3/2}

/* ===== earth (own layout) ===== */
.e-hero{position:relative;min-height:100svh;display:grid;grid-template-columns:.92fr 1.08fr}
.e-hero-copy{display:flex;flex-direction:column;justify-content:center;
  padding:clamp(100px,12vw,150px) clamp(28px,4vw,64px) clamp(70px,8vw,110px) var(--pad);
  border-right:1px solid var(--line)}
.e-hero-img{position:relative;overflow:hidden;background:#000}
.e-hero-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:58% 50%}
.e-credit{margin-top:34px;font-size:9px;letter-spacing:.18em;text-transform:uppercase;
  color:#7f7f7f;max-width:340px;line-height:2.1}

.quote{margin-top:clamp(40px,6vw,84px);max-width:940px}
.quote blockquote{font-size:clamp(19px,2.8vw,38px);font-weight:200;line-height:1.44;color:#f2f2f2}
.quote cite{display:block;margin-top:28px;font-style:normal;font-size:9.5px;
  letter-spacing:.28em;text-transform:uppercase;color:var(--gold)}
.quote-body{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,5vw,70px);
  margin-top:clamp(40px,5vw,70px);padding-top:34px;border-top:1px solid var(--line)}
.quote-body p + p{margin-top:18px}

.compare-wrap{overflow-x:auto;overscroll-behavior-x:contain;margin-top:clamp(40px,6vw,80px)}
.compare{display:grid;grid-template-columns:1.15fr repeat(3,minmax(0,1fr));min-width:700px;
  border-top:1px solid var(--line)}
.compare > *{padding:17px 18px 17px 0;border-bottom:1px solid rgba(255,255,255,.06);
  font-size:12px;font-weight:200;color:#aeaeae;line-height:1.75}
.compare .rowhead{color:var(--gold);font-size:9px;letter-spacing:.24em;text-transform:uppercase;
  align-self:center}
.compare .colhead{color:#fff;font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;
  border-bottom:1px solid var(--line);padding-bottom:16px}
.compare .colhead a{border-bottom:1px solid rgba(255,255,255,.28);padding-bottom:2px}
.compare .colhead a:hover{color:var(--gold);border-color:var(--gold)}
.compare .here{color:#fff}

.shell-wrap{margin-top:clamp(40px,6vw,80px)}
.shell{display:block;width:100%}
.shell-note{margin-top:24px;max-width:640px}

.seq{list-style:none;margin-top:clamp(40px,6vw,80px)}
.seq li{display:grid;grid-template-columns:1fr auto;gap:clamp(24px,4vw,70px);align-items:center;
  padding:clamp(28px,3.2vw,46px) 0;border-top:1px solid var(--line)}
.seq li:last-child{border-bottom:1px solid var(--line)}
.seq .dist{font-size:clamp(20px,2.6vw,38px);font-weight:200;font-variant-numeric:tabular-nums;
  line-height:1.15}
.seq .dist small{display:block;margin-top:12px;font-size:9px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--gold);font-variant-numeric:normal}
.seq p{margin-top:16px;max-width:440px}
.seq img{display:block;aspect-ratio:1;object-fit:cover}
.seq li:nth-child(1) img{width:300px}
.seq li:nth-child(2) img{width:232px}
.seq li:nth-child(3) img{width:172px}
.seq li:nth-child(4) img{width:122px}
.seq li:nth-child(5) img{width:80px}

/* ===== mercury / uranus / neptune ===== */
.mr-hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  align-items:flex-end;text-align:right;padding:0 var(--pad) 132px;overflow:hidden}
.mr-hero .hero-img{position:absolute;inset:-6% 30% -6% -14%;z-index:0}
.mr-hero::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(260deg,#000 22%,rgba(0,0,0,.72) 44%,rgba(0,0,0,0) 78%),
             linear-gradient(180deg,rgba(0,0,0,0) 52%,rgba(0,0,0,.86) 86%)}
.mr-hero .hero-inner{margin-left:auto;max-width:min(900px,72vw)}
.mr-hero .display{font-size:clamp(44px,9vw,132px)}
.mr-hero .lede{margin-left:auto}
.mr-hero .stats{text-align:left}

.u-hero{position:relative;min-height:100svh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;padding:130px var(--pad) 120px}
.u-disc{width:clamp(150px,20vw,250px);aspect-ratio:1;border-radius:50%;overflow:hidden;
  box-shadow:0 0 90px 24px rgba(160,220,220,.10);margin-bottom:clamp(34px,5vw,60px)}
.u-disc img{width:100%;height:100%;object-fit:cover}
.u-hero .lede{margin:26px auto 0}
.u-far{margin-top:clamp(30px,5vw,52px);font-size:9px;letter-spacing:.24em;
  text-transform:uppercase;color:#8a8a8a;line-height:2.2}

.n-hero{position:relative;min-height:100svh;overflow:hidden;
  padding:clamp(130px,16vw,190px) var(--pad) clamp(56px,7vw,96px)}
.n-hero .n-disc{--disc:min(62vw,720px);position:absolute;right:-6%;
  bottom:calc(var(--disc) * -.18);width:var(--disc);z-index:0}   /* offset off its OWN size, not the hero height - a tall viewport used to push it off screen */
.n-hero .n-disc img{width:100%;height:auto}
.n-hero::after{content:"";position:absolute;inset:0;z-index:1;
  background:radial-gradient(circle at 78% 80%,rgba(0,0,0,0) 16%,rgba(0,0,0,.5) 52%,#000 88%),
             linear-gradient(180deg,rgba(0,0,0,0) calc(100% - 470px),rgba(0,0,0,.9) calc(100% - 90px))}
.n-hero-inner{position:relative;z-index:2;max-width:min(640px,60vw)}

.tempbar{margin-top:clamp(40px,6vw,80px)}
.tempbar .track{height:10px;border-radius:5px;
  background:linear-gradient(90deg,#2a5c9c 0%,#5d7fae 22%,#8c8c8c 46%,#c58a4a 70%,#e6702a 88%,#ffb347 100%)}
.tempbar .ends{display:flex;justify-content:space-between;margin-top:20px;gap:24px}
.tempbar .end{max-width:330px}
.tempbar .end:last-child{text-align:right}
.tempbar .deg{display:block;margin-top:10px;font-size:clamp(22px,3vw,44px);font-weight:200;
  font-variant-numeric:tabular-nums}
.tempbar p{margin-top:14px;font-size:11.5px}

.bars{list-style:none;margin-top:clamp(40px,6vw,80px)}
.bars li{padding:20px 0;border-bottom:1px solid rgba(255,255,255,.07)}
.bars .row{display:flex;justify-content:space-between;align-items:baseline;gap:20px}
.bars .who{font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:#e4e4e4}
.bars .kmh{font-size:clamp(15px,1.8vw,24px);font-weight:200;font-variant-numeric:tabular-nums}
.bars .track{margin-top:14px;height:6px;background:rgba(255,255,255,.07)}
.bars .fill{height:100%;background:linear-gradient(90deg,#c58a4a,#f0d5ae);
  transform:scaleX(0);transform-origin:0 50%;transition:transform 1.6s var(--ease)}
.bars li.in .fill{transform:scaleX(var(--w))}

.names{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,44px);
  margin-top:clamp(40px,6vw,80px)}
.names h3{margin-bottom:16px;font-size:9.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold)}
.names ul{list-style:none}
.names li{padding:7px 0;font-size:12.5px;font-weight:200;color:#b6b6b6;
  border-bottom:1px solid rgba(255,255,255,.05)}
.names li em{font-style:normal;color:var(--dim);font-size:10.5px;display:block;margin-top:3px}

.reso,.tilt,.flyby,.horizon,.scale{display:block;width:100%}
.diagram{margin-top:clamp(40px,6vw,80px)}
.diagram-note{margin-top:24px;max-width:620px}

/* ===== sun (own layout) ===== */
.s-hero{position:relative;min-height:100svh;display:grid;grid-template-rows:1.05fr .95fr}
.s-hero-img{position:relative;overflow:hidden;background:#000}
.s-hero-img img{width:100%;height:100%;object-fit:cover;object-position:50% 44%}
.s-hero-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,
  rgba(0,0,0,.6) 0%,rgba(0,0,0,0) 28%,rgba(0,0,0,.45) 82%,#000 100%)}
.s-hero-copy{display:flex;flex-direction:column;justify-content:center;
  padding:clamp(28px,4vw,52px) var(--pad) clamp(150px,17vw,200px)}
.s-hero-copy .lede{max-width:620px}
.sunscale{display:block;width:100%}

/* ===== jupiter: the camera pulls back out of the hero =====
   Scroll-driven, CSS only, no JS. The @supports is load-bearing: without
   animation-timeline the shorthand below falls back to the document timeline
   at 0s duration and snaps straight to the end state. Desktop only - the
   mobile hero is a different composition and does not need re-solving. */
@media (min-width:901px){
  @supports (animation-timeline:view()){
    @media (prefers-reduced-motion:no-preference){
      .flight{view-timeline-name:--flight}
      /* a square box, so the disc is never cropped as it shrinks */
      .flight .hero-img{inset:auto;top:50%;right:-8%;
        width:min(116vh,86vw);aspect-ratio:1;transform:translateY(-50%)}
      .flight .hero-img img{animation:flight-planet linear both;
        animation-timeline:--flight;animation-range:exit 0% exit 100%}
      .flight .hero-inner{animation:flight-type linear both;
        animation-timeline:--flight;animation-range:exit 0% exit 88%}
      .flight .stats,.flight .scroll-hint{animation:flight-fade linear both;
        animation-timeline:--flight;animation-range:exit 0% exit 46%}
    }
  }
}
@keyframes flight-planet{from{transform:scale(1.55);opacity:1}
  62%{opacity:1}to{transform:scale(.22);opacity:0}}
@keyframes flight-type{0%,10%{transform:none;filter:blur(0);opacity:1}
  to{transform:scale(2.15);filter:blur(15px);opacity:0}}
@keyframes flight-fade{to{opacity:0;transform:translateY(26px)}}

/* ===== responsive ===== */
@media (max-width:900px){
  .s-hero{grid-template-rows:.85fr 1.15fr}
  .s-hero-copy{padding-bottom:250px}
  .mr-hero{align-items:flex-start;text-align:left}
  .mr-hero .hero-img{inset:auto 0 0 -20%;height:64%}
  .mr-hero::after{background:linear-gradient(180deg,#000 34%,rgba(0,0,0,.55) 62%,rgba(0,0,0,.8))}
  .mr-hero .hero-inner,.mr-hero .lede{margin-left:0}
  .n-hero .n-disc{right:-22%;bottom:auto;top:8%;width:96vw}
  .n-hero::after{background:linear-gradient(180deg,rgba(0,0,0,.5) 0%,rgba(0,0,0,.2) 26%,rgba(0,0,0,.86) 62%,#000)}
  .n-hero{padding-bottom:235px}
  .n-hero-inner{max-width:none;margin-top:42vh}
  .tempbar .ends{flex-direction:column}
  .tempbar .end:last-child{text-align:left}
  .names{grid-template-columns:1fr}
  /* the menu is centred vertically, which on a phone put the first heading
     behind the header with no way to scroll up to it - 17 links do not fit */
  /* the CTA scrim fades left to right, which on a phone is a hard vertical edge
     with the photo pasted onto the right of it - fade top to bottom instead */
  .upnext::after{background:linear-gradient(180deg,#000 5%,rgba(0,0,0,.72) 38%,rgba(0,0,0,.8) 82%,#000)}
  .upnext img{object-position:50% 42%}
  .upnext{min-height:min(112vw,620px)}
  /* one long uppercase word at .42em tracking plus the numeral beside it was
     18 px wider than a 393 px screen in any font but Poppins. Tighter, smaller,
     and breakable as a last resort so no font can push the page sideways. */
  .chapter-head{gap:16px}
  .chapter-head > div{min-width:0}
  .chapter-head h2{font-size:clamp(17px,4.4vw,26px);letter-spacing:.26em;
    text-indent:.26em;overflow-wrap:anywhere}
  .menu{justify-content:flex-start;padding-top:84px}
  .menu-grid{grid-template-columns:1fr;gap:20px}
  .menu-grid a{padding:9px 0;font-size:14px}
  .menu-grid .col-h{margin-bottom:12px}
  .menu-note{margin-top:26px}
  .e-hero{grid-template-columns:1fr;min-height:auto}
  .e-hero-copy{order:2;border-right:0;padding:44px var(--pad) 60px}
  .e-hero-img{order:1;height:60svh}
  .quote-body{grid-template-columns:1fr}
  .seq li{grid-template-columns:1fr;gap:22px}
  .seq li:nth-child(1) img{width:100%}
  .seq li:nth-child(2) img{width:78%}
  .seq li:nth-child(3) img{width:58%}
  .seq li:nth-child(4) img{width:40%}
  .seq li:nth-child(5) img{width:26%}
  .m-hero{padding-bottom:265px}
  .m-hero .cap{text-align:left;max-width:none}
  .board-hint{display:block}
  .watch{grid-template-columns:1fr}
  .watch-dial{position:static}
  .specs{grid-template-columns:1fr}
  .strip{grid-template-columns:1fr}
  .strip figure img{aspect-ratio:auto;height:auto}
  .poster{grid-template-columns:1fr}
  .v-globe{width:104vw}
  .band{grid-template-columns:repeat(2,minmax(0,1fr))}
  .band li:nth-child(odd){border-left:0}
  .band li:nth-child(n+3){border-top:1px solid var(--line)}
  .sticky-chapter{grid-template-columns:1fr}
  .sticky-side{position:static}
  .ladder li{grid-template-columns:1fr;gap:12px}
  .mosaic{grid-template-columns:1fr;grid-template-rows:auto}
  .mosaic figure:first-child{grid-column:auto;grid-row:auto}
  .mosaic img{height:auto}
  .timeline::before{left:0}
  .timeline li,.timeline li:nth-child(even){width:100%;margin-left:0;text-align:left;
    padding:0 0 32px clamp(22px,5vw,42px)}
  .timeline li::after,.timeline li:nth-child(even)::after{left:-4px;right:auto}
  .timeline li:nth-child(odd) p{margin-left:0}
  .hero-img{inset:auto -20% 0 0;height:64%}
  /* the hero copy column is 64vw, which is 250 px on a phone - enough for the
     short world names, 124 px too narrow for one long unbreakable word like
     MARKEDSFØRING. Widen the column and let the display size fall with the
     viewport, same fix as the chapter headings above. */
  .hero-inner{max-width:88vw}
  .hero-inner .display.sm{font-size:min(38px,9.4vw);letter-spacing:.09em;text-indent:.09em}
  .hero::after{background:linear-gradient(180deg,#000 34%,rgba(0,0,0,.55) 62%,rgba(0,0,0,.8))}
  .stats{grid-template-columns:repeat(2,1fr);bottom:36px}
  .overview-grid,.depth-grid,.moon-feature,.card{grid-template-columns:1fr}
  .donut{margin:0 auto 52px}
  .split{grid-template-columns:1fr;padding:0}
  .split-img{grid-column:1;grid-row:auto}
  .split-copy,.split-copy.ghost{grid-column:1;grid-row:auto}
  .metrics{grid-template-columns:1fr;gap:18px}
  .rail{height:340px}
  /* the rail is deliberately wider than a phone. Contain the scroll so swiping it
     to the end does not drag the page or fire the browser's back gesture, and fade
     the right edge so it reads as "there is more" rather than "this is cut off" */
  .planets{padding-right:0;gap:14px;overflow-x:auto;justify-content:flex-start;scrollbar-width:none;
    overscroll-behavior-x:contain;
    mask-image:linear-gradient(90deg,#000 82%,rgba(0,0,0,.15));
    -webkit-mask-image:linear-gradient(90deg,#000 82%,rgba(0,0,0,.15))}
  .planets::-webkit-scrollbar{display:none}
  .planets li{flex:0 0 auto;padding:0 6px}
  .sun{display:none}
  .moon-diagram{display:none}
  .card img{height:auto}
  .foot-cols{grid-template-columns:1fr 1fr}
  .services{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr 1fr}
  .work{grid-template-columns:1fr}
  .home-hero .hero-img{inset:auto 0 0 0;height:70%}
  .home-hero::after{background:linear-gradient(180deg,#000 30%,rgba(0,0,0,.6) 60%,rgba(0,0,0,.85))}
}

/* ===== black hole (the moon layout, with a video where the photo goes) =====
   The hero is a 5-second loop rather than a still, so <video> needs the same
   absolute fill .m-hero already gives an <img>. Nothing else on the page is
   new: the chapters, ladder, board, strip, split and log blocks are reused. */
.m-hero > video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:50% 44%;z-index:0}
/* the loop is bright across the middle, so the scrim has to bite harder in the
   band where the stats sit than the moon gradient does */
.m-hero.bh::after{background:linear-gradient(180deg,
  rgba(0,0,0,.7) 0%,rgba(0,0,0,.14) 24%,rgba(0,0,0,.52) 54%,rgba(0,0,0,.9) 82%,#000 100%)}
/* the two EHT frames are square, and there are two of them, not three */
.strip.two{grid-template-columns:repeat(2,1fr)}
.strip.two figure{background:#000}
.strip.two figure img{aspect-ratio:1}
/* the CTA on /lab/ carries a second paragraph that links into the service pages.
   Links there need the same visible affordance the table cells get, or they read
   as plain text and nobody clicks them. */
.next-copy p + p{margin-top:16px}
.next-copy p a{border-bottom:1px solid rgba(255,255,255,.24);padding-bottom:1px;transition:color .3s,border-color .3s}
.next-copy p a:hover{color:var(--gold);border-color:var(--gold)}
/* the size table cites other pages - give those cells a visible affordance */
.board td a{border-bottom:1px solid rgba(255,255,255,.24);padding-bottom:1px;transition:color .3s,border-color .3s}
.board td a:hover{color:var(--gold);border-color:var(--gold)}
/* "BLACK HOLE" is wide enough to push the credit onto its own flex line, so
   pin it right rather than letting it land ragged-right at the left margin */
.m-hero.bh .cap{margin-left:auto}
@media (max-width:900px){
  .strip.two{grid-template-columns:1fr}
  /* a 16:9 loop cropped into a phone-shaped box shows about a quarter of the
     frame, so aim it at the hole rather than at the centre of the video */
  .m-hero > video{object-position:60% 38%}
}

/* ===== space (own layout): a WebGL viewport with the HUD over it =====
   The only genuinely new composition on the site. Everything below the
   viewport is the standard chapter furniture and adds no CSS.
   The HUD is HTML, not canvas: it inherits the page's type, it is readable by
   a screen reader, and every string in it is translated by being in the
   document rather than in the script. */
.orrery{position:relative;height:100svh;min-height:540px;background:#000;overflow:hidden;
  touch-action:none;cursor:grab}
.orrery.dragging{cursor:grabbing}
.orrery > canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
/* with no WebGL2 the viewport has nothing to show, and a full-height black
   box reads as a broken page. Collapse it to a band with a warm glow where the
   sun would have been, and let the message explain itself. */
.orrery:not(.live){height:auto;min-height:0;cursor:auto;
  padding:clamp(130px,19vw,250px) var(--pad) clamp(56px,8vw,104px);
  background:radial-gradient(circle at 50% 46%,rgba(255,206,143,.20),
    rgba(255,150,60,.05) 26%,rgba(0,0,0,0) 62%)}
.orrery:not(.live) > canvas,.orrery:not(.live) .orrery-hint{display:none}
.orrery:not(.live) .orrery-fallback{position:static;left:auto;right:auto;bottom:auto;
  margin:0 auto;text-align:center;max-width:56ch}

.hud{position:absolute;inset:0;z-index:3;pointer-events:none;
  font-variant-numeric:tabular-nums}
.hud > *{pointer-events:auto}
.hud .col-h{display:block;font-size:8.5px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--gold);margin-bottom:9px}

.hud-tl{position:absolute;left:var(--pad);top:clamp(88px,11vw,132px)}
/* one row of controls, split to the two bottom corners on a desktop and
   stacked into a single column on a phone. Deliberately one container: the
   first draft pinned the scale control to the bottom right and then hid that
   corner under 900px, which took the whole point of the page away from every
   phone. */
.hud-ctl{position:absolute;left:var(--pad);right:var(--pad);bottom:clamp(26px,4vw,44px);
  display:flex;justify-content:space-between;align-items:flex-end;gap:clamp(16px,3vw,40px)}
.ctl-right{display:flex;flex-direction:column;align-items:flex-end;text-align:right;gap:13px}

.stamp{font-size:clamp(15px,1.9vw,25px);font-weight:200;letter-spacing:.05em;line-height:1.25}
.stamp small{display:block;margin-top:6px;font-size:9px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--dim)}

/* segmented control - the site has no buttons like this yet, so it borrows
   the .btn border and the .menu-grid hover instead of inventing a look */
.seg{display:flex;flex-wrap:wrap;border:1px solid var(--line);border-radius:999px;
  background:rgba(0,0,0,.5);backdrop-filter:blur(10px);overflow:hidden}
.seg button{appearance:none;background:none;border:0;cursor:pointer;color:#b9b9b9;
  font:inherit;font-size:9px;letter-spacing:.2em;text-transform:uppercase;font-weight:300;
  padding:10px 14px;transition:color .3s var(--ease),background .3s var(--ease)}
.seg button + button{border-left:1px solid var(--line)}
.seg button:hover{color:#fff}
.seg button[aria-pressed="true"]{background:var(--gold);color:#000}
.seg.tight button{padding:9px 11px}
.hud-note{font-size:9px;letter-spacing:.14em;color:var(--dim);max-width:34ch;line-height:1.7}
.ctl-right .hud-note{margin-left:auto}

/* the body names, positioned per frame from the projected centres */
/* the hero .stats row cannot sit inside the viewport - it is absolutely
   positioned at bottom:60px and the controls are already there - so it gets
   its own band underneath, where the same markup lays out statically */
.statband{position:relative;padding:clamp(26px,3vw,40px) var(--pad) clamp(30px,4vw,56px)}
.statband .stats{position:static;left:auto;right:auto;bottom:auto}
.statband .scroll-hint{position:static;justify-content:flex-end;margin-top:20px}

.orrery-labels{position:absolute;inset:0;z-index:2;pointer-events:none}
.orrery-labels a{position:absolute;transform:translate(12px,-50%);pointer-events:auto;
  font-size:8.5px;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.66);
  white-space:nowrap;text-shadow:0 1px 10px #000,0 0 3px #000;transition:color .3s var(--ease)}
.orrery-labels a::before{content:"";position:absolute;left:-8px;top:50%;width:4px;height:1px;
  background:rgba(255,255,255,.4)}
.orrery-labels a:hover{color:var(--gold)}
.orrery-labels a.on{color:var(--gold)}

/* the panel that opens on a selected body */
.bodypanel{position:absolute;z-index:4;right:var(--pad);top:clamp(88px,11vw,132px);
  width:min(320px,74vw);border:1px solid var(--line);background:rgba(0,0,0,.74);
  backdrop-filter:blur(16px);padding:24px 24px 20px;
  opacity:0;visibility:hidden;transform:translateX(16px);
  transition:opacity .5s var(--ease),transform .5s var(--ease),visibility .5s}
.bodypanel.open{opacity:1;visibility:visible;transform:none}
.bodypanel h3{font-size:12px;letter-spacing:.32em;text-transform:uppercase;margin-bottom:14px}
.bodypanel p{font-size:11px;line-height:1.85}
.bodypanel dl{display:grid;grid-template-columns:auto 1fr;gap:7px 14px;margin:18px 0 0;
  border-top:1px solid var(--line);padding-top:16px}
.bodypanel dt{font-size:8.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);
  align-self:center}
.bodypanel dd{font-size:10.5px;text-align:right;color:#d8d8d8;font-weight:200}
.bodypanel .go{display:inline-block;margin-top:18px;font-size:9px;letter-spacing:.26em;
  text-transform:uppercase;color:var(--gold)}
.bodypanel .shut{position:absolute;right:12px;top:12px;appearance:none;background:none;
  border:0;cursor:pointer;color:var(--dim);font:inherit;font-size:9px;letter-spacing:.2em;
  text-transform:uppercase;padding:6px}
.bodypanel .shut:hover{color:#fff}

.orrery-hint{position:absolute;left:50%;bottom:clamp(26px,4vw,44px);transform:translateX(-50%);
  z-index:3;font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);
  text-align:center;transition:opacity .6s var(--ease)}
.orrery-hint.gone{opacity:0}
.orrery-fallback{position:absolute;left:var(--pad);right:var(--pad);bottom:clamp(26px,4vw,44px);
  z-index:3;max-width:52ch;font-size:10px;line-height:1.85;color:#9a9a9a}

/* the reader gets the same ten captions the panel shows, in the document */
.sky-data{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);
  white-space:nowrap}

@media (max-width:900px){
  /* three HUD corners do not fit a phone. The readout stays top-left, the two
     control stacks become one column along the bottom, and the panel becomes a
     sheet over the lower half rather than a card in the corner. */
  .orrery{height:88svh}
  .hud-tl{top:76px}
  .stamp{font-size:15px}
  .hud-ctl{bottom:18px;flex-direction:column;align-items:stretch;gap:12px}
  .ctl-right{align-items:stretch;text-align:left}
  .hud-ctl .seg{width:100%}
  .hud-ctl .seg button{flex:1 1 auto;padding:9px 5px;font-size:8px;letter-spacing:.1em}
  .hud .col-h{margin-bottom:7px}
  .hud-note{max-width:none}
  .orrery-hint{display:none}
  .bodypanel{right:var(--pad);left:var(--pad);top:auto;bottom:96px;width:auto;
    transform:translateY(16px);padding:20px}
  .bodypanel.open{transform:none}
  .orrery-labels a{font-size:8px;letter-spacing:.16em}
}