:root {
  color-scheme: dark;
  --ink: #f1f2ec;
  --muted: #9aaab5;
  --faint: #61717c;
  --line: rgba(200, 230, 237, .16);
  --accent: #9ae6df;
  --accent-hot: #ffb879;
  --page-bg: #07101a;
  --stage: 0;
  --mono: "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: "Manrope", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 3rem; background: #060b13; }
body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  color: var(--ink);
  background: radial-gradient(ellipse at 50% 32%, hsl(calc(202 - var(--stage) * 164) 46% 12% / .84), transparent 64%), var(--page-bg);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.65;
  transition: background-color 1.6s ease;
}
body::before {
  content: "";
  position: fixed;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(3,8,15,.14) 0%, rgba(5,10,17,.04) 35%, hsl(calc(206 - var(--stage) * 115) 54% 5% / .58) 100%);
}
a { color: inherit; }
button { color: inherit; font: inherit; }
.sky { position: fixed; inset: 0; z-index: -2; width: 100%; height: 100%; pointer-events: none; }
.ambient-glow { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse at 75% 58%, hsl(calc(187 - var(--stage) * 134) 78% 46% / calc(.12 + var(--stage) * .12)), transparent 40%); mix-blend-mode: screen; opacity: .78; transition: background 1.5s ease; }

.masthead { position: absolute; inset: 0 0 auto; z-index: 30; display: flex; align-items: center; justify-content: space-between; padding: 30px 4.2vw; }
.wordmark { display: inline-flex; align-items: center; gap: 10px; color: #e5ece9; text-decoration: none; font: 500 10px/1 var(--mono); letter-spacing: .11em; }
.wordmark-slash { color: #64767f; padding: 0 1px; }
.wordmark-mark { width: 22px; height: 22px; position: relative; display: inline-block; border: 1px solid rgba(188,236,227,.63); border-radius: 50%; transform: rotate(-28deg); }
.wordmark-mark i { position: absolute; display: block; width: 8px; height: 2px; left: 6px; background: #a8e2d8; border-radius: 2px; }
.wordmark-mark i:nth-child(1) { top: 5px; width: 5px; left: 8px; }
.wordmark-mark i:nth-child(2) { top: 9px; }
.wordmark-mark i:nth-child(3) { top: 13px; width: 5px; left: 8px; }
.sound-toggle { display: inline-flex; align-items: center; gap: 9px; min-height: 40px; padding: 0 14px; border: 1px solid rgba(225,242,237,.2); border-radius: 999px; background: rgba(9,17,26,.46); color: #d9e2dd; font: 400 10px var(--mono); letter-spacing: .035em; cursor: pointer; transition: border-color .2s, background .2s; }
.sound-toggle:hover, .sound-toggle:focus-visible { border-color: rgba(158,230,220,.72); background: rgba(21,45,51,.7); outline: none; }
.sound-toggle svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.sound-toggle .sound-wave { opacity: .2; transition: opacity .3s; }
.sound-toggle[aria-pressed="true"] .sound-wave { opacity: 1; }
.sound-toggle b { color: var(--accent); font-weight: 500; }

.readout { position: fixed; z-index: 28; right: 28px; bottom: 24px; width: 220px; padding: 15px 17px 14px; border: 1px solid rgba(211,238,232,.2); background: linear-gradient(145deg, rgba(14,26,35,.84), rgba(8,13,21,.82)); box-shadow: 0 12px 45px rgba(0,0,0,.19); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.readout-top, .readout-label, .readout-unit { font: 9px/1.3 var(--mono); letter-spacing: .12em; color: #a0b2b8; }
.readout-top { display: flex; align-items: center; gap: 7px; }
.readout-unit { margin-left: auto; font-size: 8px; color: #72878e; }
.live-dot { width: 5px; height: 5px; flex: 0 0 5px; border-radius: 50%; background: #a4ead3; box-shadow: 0 0 11px #a4ead3; animation: pulse 2.1s ease-in-out infinite; }
.readout-value { margin-top: 8px; color: #f4f1e9; font: 400 31px/.98 var(--mono); letter-spacing: -.08em; font-variant-numeric: tabular-nums; }
.readout-suffix { margin-left: 7px; color: #a9c3c2; font-size: 14px; letter-spacing: 0; }
.readout-label { margin-top: 6px; color: #91a4a9; letter-spacing: .04em; text-transform: uppercase; font-size: 8px; }
.readout-track { margin-top: 12px; height: 2px; background: rgba(204,227,221,.12); overflow: hidden; }
.readout-track span { display: block; width: 0; height: 100%; background: linear-gradient(90deg, #9ae6df, #ffc085); box-shadow: 0 0 8px #9ae6df; transition: width .2s linear; }
@keyframes pulse { 50% { opacity: .4; } }

.hero { position: relative; min-height: 780px; height: 100svh; max-height: 1100px; overflow: hidden; isolation: isolate; }
.hero-copy { position: absolute; z-index: 4; top: clamp(156px, 20vh, 220px); left: 12.4vw; width: min(430px, 39vw); }
.kicker { display: flex; align-items: center; gap: 12px; margin: 0 0 22px; color: #a2b6b7; font: 400 9px/1 var(--mono); letter-spacing: .19em; text-transform: uppercase; }
.kicker span { color: #9de3d6; font-size: 10px; }
h1, h2 { margin: 0; font-weight: 500; letter-spacing: -.075em; line-height: .9; }
.hero h1 { font-size: clamp(80px, 10.3vw, 152px); color: #f0f0e9; }
h1 em, h2 em { color: #a2e1d9; font-style: normal; }
.hero-deck { width: min(330px, 92%); margin: 25px 0 25px; color: #a5b2b7; font-size: 13px; line-height: 1.75; }
.begin-link { display: inline-flex; align-items: center; gap: 10px; color: #dfebe5; text-decoration: none; font: 10px var(--mono); letter-spacing: .03em; }
.begin-link:hover { color: #a2e1d9; }
.begin-icon { display: grid; place-items: center; width: 24px; height: 24px; border: 1px solid rgba(174,229,218,.48); border-radius: 50%; color: #a2e1d9; font-size: 15px; transition: transform .25s; }
.begin-link:hover .begin-icon { transform: translateY(3px); }
.begin-rule { display: inline-block; width: 43px; height: 1px; margin-left: 3px; background: linear-gradient(90deg, rgba(182,228,220,.65), transparent); }

.orbit-art { position: absolute; z-index: 2; top: 18%; right: 10%; width: min(46vw, 650px); height: 38%; min-height: 240px; color: #d2e8e8; }
.orbit-rings { position: absolute; width: 65%; height: 65%; top: 9%; left: 14%; transform: rotate(-22deg); border: 1px solid rgba(191,221,222,.23); border-radius: 50%; box-shadow: 0 0 30px rgba(96,190,213,.06); }
.orbit-rings i { position: absolute; display: block; inset: 13% -12%; border: 1px solid rgba(156,198,208,.13); border-radius: 50%; }
.orbit-rings i:nth-child(2) { inset: -15% 16%; transform: rotate(27deg); border-color: rgba(183,220,215,.1); }
.orbit-rings i:nth-child(3) { inset: 47% 42%; width: 8px; height: 8px; background: #b5ede4; border: 0; box-shadow: 0 0 12px 3px rgba(143,229,221,.74); }
.iss-drawing { position: absolute; z-index: 3; width: 43%; height: auto; top: 26%; left: 30%; filter: drop-shadow(0 0 9px rgba(132,218,236,.34)); animation: float 8s ease-in-out infinite; }
@keyframes float { 50% { transform: translateY(-8px) rotate(-1deg); } }
.hero-coordinate { position: absolute; z-index: 4; right: 0; bottom: 3%; display: flex; flex-direction: column; width: max-content; white-space: nowrap; padding-left: 14px; border-left: 1px solid rgba(168,227,218,.52); font: 8px var(--mono); letter-spacing: .12em; color: #8da6ae; }
.hero-coordinate strong { margin: 4px 0; color: #dbece4; font: 400 20px var(--mono); letter-spacing: 0; }
.hero-coordinate small { color: #a5c8c5; font-size: 10px; }
.tiny-label { color: #9be4d6; }
.earth-horizon { position: absolute; inset: auto 0 0; height: 48%; min-height: 310px; z-index: 1; overflow: hidden; }
.earth-horizon svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.horizon-atmo { position: absolute; z-index: 1; left: -10%; right: -10%; top: -6%; height: 44%; border-radius: 50%; background: rgba(64,196,225,.14); filter: blur(32px); }
.horizon-grid { position: absolute; z-index: 2; inset: 50% 0 0; opacity: .14; background-image: linear-gradient(rgba(119,177,187,.14) 1px, transparent 1px), linear-gradient(90deg, rgba(119,177,187,.14) 1px, transparent 1px); background-size: 100% 42px, 72px 100%; mask-image: linear-gradient(180deg, transparent, #000 36%); }
.hero-caption { position: absolute; z-index: 3; right: 5vw; bottom: 14%; display: flex; flex-direction: column; gap: 5px; text-align: right; color: #a2c5ca; font: 8px var(--mono); letter-spacing: .18em; }
.hero-caption span:last-child { color: #667f8a; }
.hero-iss-pin { position: absolute; z-index: 5; top: 34%; left: 60%; display: flex; align-items: center; gap: 0; transform: translateY(-50%); }
.pin-core { position: relative; display: block; width: 9px; height: 9px; flex: 0 0 9px; border: 1px solid #c8fff0; border-radius: 50%; background: #75decf; box-shadow: 0 0 0 6px rgba(119,225,210,.12), 0 0 22px rgba(131,249,233,.9); }
.pin-line { width: clamp(35px, 7vw, 100px); height: 1px; background: linear-gradient(90deg, #89d8d0, rgba(137,216,208,0)); }
.pin-tag { padding: 5px 8px; border: 1px solid rgba(151,218,215,.22); background: rgba(6,16,25,.57); color: #95b2b7; font: 8px var(--mono); letter-spacing: .11em; white-space: nowrap; }
.pin-tag b { margin-left: 8px; color: #d6eee8; font-weight: 400; }
.hero-bottom-note { position: absolute; z-index: 5; bottom: 25px; left: 50%; display: flex; align-items: center; gap: 10px; transform: translateX(-50%); color: #728b90; font: 8px var(--mono); letter-spacing: .2em; white-space: nowrap; }
.mouse-mark { display: block; width: 13px; height: 19px; border: 1px solid rgba(172,227,217,.38); border-radius: 8px; position: relative; }
.mouse-mark i { position: absolute; top: 4px; left: 5px; width: 1px; height: 4px; background: #b7ece0; animation: wheel 1.5s infinite; }
@keyframes wheel { to { transform: translateY(4px); opacity: 0; } }

.descent { position: relative; padding: 80px 0 110px; }
.descent::before { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(180deg, rgba(7,18,28,0) 0, rgba(6,14,22,.28) 13%, rgba(6,12,20,.6) 70%, rgba(12,14,21,.4) 100%); }
.descent-intro { position: relative; z-index: 2; width: min(1000px, 74vw); margin: 0 auto; padding: 0 0 62px; text-align: center; }
.descent-intro .kicker { justify-content: center; }
.descent-intro h2 { font-size: clamp(46px, 6.1vw, 80px); }
.descent-intro > p:not(.kicker) { max-width: 430px; margin: 20px auto 28px; color: #9cabb1; font-size: 13px; }
.scale-note { display: flex; align-items: flex-start; gap: 13px; max-width: 515px; margin: 0 auto; padding: 13px 17px; border: 1px solid rgba(178,222,215,.17); background: rgba(8,18,26,.46); text-align: left; }
.scale-icon { display: grid; flex: 0 0 23px; place-items: center; width: 23px; height: 23px; border: 1px solid rgba(159,228,215,.36); border-radius: 50%; color: #9de3d6; font: 15px var(--mono); }
.scale-note p { margin: 0; color: #9daeb0; font-size: 10px; line-height: 1.6; }
.scale-note b { color: #d4e6dd; font: 9px var(--mono); letter-spacing: .08em; text-transform: uppercase; }

.timeline { position: relative; width: min(1120px, 88vw); margin: 0 auto; }
.timeline-spine { position: absolute; z-index: 0; top: -24px; bottom: -30px; left: 50%; width: 1px; transform: translateX(-50%); background: linear-gradient(180deg, rgba(167,232,222,.13), rgba(162,217,212,.34) 7%, rgba(93,176,178,.28) 42%, rgba(203,131,97,.34) 73%, rgba(253,175,94,.8)); }
.spine-glow { position: absolute; inset: 0 -2px; background: inherit; filter: blur(3px); opacity: .47; }
.traveler { position: absolute; z-index: 3; left: 50%; top: 0; width: 9px; height: 9px; border-radius: 50%; transform: translate(-50%,-50%); background: #a9f2de; box-shadow: 0 0 0 5px rgba(144,225,215,.12), 0 0 20px 5px rgba(120,222,213,.8); transition: top .08s linear, background .7s; }
.landmarks { position: relative; }
.stop { position: relative; display: grid; grid-template-columns: 1fr 1fr; align-items: center; min-height: 286px; }
.stop:nth-child(odd) .stop-card { grid-column: 1; justify-self: end; margin-right: 62px; text-align: right; }
.stop:nth-child(even) .stop-card { grid-column: 2; justify-self: start; margin-left: 62px; }
.stop-card { position: relative; width: min(390px, calc(100% - 25px)); padding: 19px 21px 18px; border-top: 1px solid rgba(182,219,216,.25); border-bottom: 1px solid rgba(182,219,216,.12); background: linear-gradient(115deg, rgba(9,22,30,.47), rgba(7,15,23,.28)); transition: border-color .35s, background .35s, transform .4s; }
.stop-card::after { content: ""; position: absolute; top: 0; width: 14px; height: 1px; background: #9ce2d5; }
.stop:nth-child(odd) .stop-card::after { right: 0; }
.stop:nth-child(even) .stop-card::after { left: 0; }
.stop-card.is-near { border-color: rgba(163,231,214,.56); background: linear-gradient(115deg, rgba(23,48,52,.58), rgba(11,22,29,.38)); }
.stop:nth-child(odd) .stop-card.is-near { transform: translateX(-5px); }
.stop:nth-child(even) .stop-card.is-near { transform: translateX(5px); }
.stop-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; color: #87aaa9; font: 8px var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.stop:nth-child(odd) .stop-meta { justify-content: flex-end; }
.stop-index { color: #748b8e; }
.stop-type { color: #9ce2d5; }
.stop h3 { margin: 0; color: #e9eee8; font-size: clamp(19px, 2vw, 25px); line-height: 1.15; font-weight: 500; letter-spacing: -.045em; }
.stop-distance { margin-top: 7px; color: #bfd8d2; font: 400 12px var(--mono); letter-spacing: -.035em; }
.stop-distance small { color: #718c91; font: 8px var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.stop-fact { margin: 9px 0 0; color: #a0aeb0; font-size: 10px; line-height: 1.6; }
.stop:nth-child(odd) .stop-fact { margin-left: auto; max-width: 350px; }
.stop-source { display: inline-flex; align-items: center; gap: 5px; margin-top: 11px; color: #809b9c; text-decoration: none; font: 8px var(--mono); letter-spacing: .06em; }
.stop-source::after { content: "↗"; font-size: 10px; transition: transform .2s; }
.stop-source:hover, .stop-source:focus-visible { color: #c1ede0; outline: none; }
.stop-source:hover::after { transform: translate(2px,-2px); }
.stop-pin { position: absolute; z-index: 2; top: 50%; left: 50%; display: grid; place-items: center; width: 13px; height: 13px; border: 1px solid rgba(204,232,221,.8); border-radius: 50%; background: #142c34; transform: translate(-50%,-50%); box-shadow: 0 0 0 5px rgba(142,206,203,.06); }
.stop-pin::after { content: ""; display: block; width: 3px; height: 3px; border-radius: 50%; background: #b7e8d7; }
.stop-pin::before { content: ""; position: absolute; width: 32px; height: 1px; background: linear-gradient(90deg, rgba(160,222,213,.55), transparent); }
.stop:nth-child(odd) .stop-pin::before { right: 12px; transform: rotate(180deg); }
.stop:nth-child(even) .stop-pin::before { left: 12px; }
.stop[data-zone="deep"] .stop-pin { background: #342a2a; border-color: #d99a77; }
.stop[data-zone="core"] .stop-pin { background: #563c29; border-color: #ffc37c; box-shadow: 0 0 12px rgba(249,146,70,.26); }
.stop[data-zone="core"] .stop-type { color: #ffc184; }
.stop[data-zone="deep"] .stop-type { color: #e7ac8a; }

.center-finale { position: relative; display: flex; align-items: center; min-height: 740px; padding: 100px 12vw 120px; overflow: hidden; background: radial-gradient(ellipse at 68% 52%, rgba(177,78,43,.16), transparent 41%), linear-gradient(180deg, rgba(10,13,19,.08), rgba(13,13,18,.64)); }
.final-copy { position: relative; z-index: 4; width: min(410px, 45vw); margin-left: 8vw; }
.final-copy h2 { font-size: clamp(66px, 8vw, 112px); }
.final-copy > p:not(.kicker) { width: min(350px, 100%); color: #adadad; font-size: 12px; line-height: 1.8; }
.final-readout { display: flex; flex-direction: column; width: fit-content; gap: 4px; margin-top: 28px; padding: 12px 17px; border-left: 1px solid #eaaa73; background: rgba(28,20,20,.4); color: #a99d97; font: 8px/1.45 var(--mono); letter-spacing: .13em; }
.final-readout b { color: #ffcc94; font: 400 24px var(--mono); letter-spacing: -.07em; }
.final-readout small { color: #cf9c78; font-size: 12px; }
.return-link { display: inline-block; margin-top: 31px; color: #d4ddd6; text-decoration: none; font: 9px var(--mono); letter-spacing: .09em; }
.return-link:hover { color: #ffcc94; }
.final-orbit { position: absolute; width: min(60vw, 780px); aspect-ratio: 1; right: 1vw; top: 50%; transform: translateY(-50%); }
.earth-cross { position: absolute; inset: 4%; border-radius: 50%; background: radial-gradient(circle at 52% 48%, rgba(255,170,92,.17), transparent 19%), radial-gradient(circle at 50% 50%, #43251c 0 19%, #a6502d 19.2% 35%, #284051 35.2% 67%, #192d3b 67.3% 79%, transparent 79.4%); box-shadow: inset -22px -9px 38px rgba(0,0,0,.38), 0 0 70px rgba(177,74,44,.1); }
.earth-cross::before, .earth-cross::after { content: ""; position: absolute; inset: 4%; border: 1px solid rgba(229,165,117,.12); border-radius: 50%; }
.earth-cross::after { inset: 12%; border-color: rgba(120,192,200,.15); }
.earth-cut { display: grid; place-items: center; position: absolute; border-radius: 50%; }
.earth-cut.crust { inset: 0; border: 1px solid rgba(138,200,203,.35); }
.earth-cut.mantle { inset: 10%; border: 1px dashed rgba(143,191,184,.22); }
.earth-cut.outer-core { inset: 26%; border: 1px solid rgba(237,148,97,.26); }
.earth-cut.inner-core { inset: 47%; border: 1px solid rgba(255,203,132,.43); background: radial-gradient(circle, #ffe0a5, #da804a 59%, rgba(165,79,44,.5)); box-shadow: 0 0 45px rgba(250,144,79,.49); }
.earth-cut.inner-core span { width: 18%; height: 18%; border-radius: 50%; background: #fff2c7; filter: blur(3px); box-shadow: 0 0 35px 16px rgba(255,183,104,.73); }
.center-flare { position: absolute; inset: 46%; border-radius: 50%; background: rgba(255,190,106,.5); filter: blur(28px); }
.center-axis { position: absolute; top: 5%; bottom: 5%; left: 50%; width: 1px; transform: rotate(31deg); background: linear-gradient(180deg, transparent, rgba(241,190,142,.28), #ffbd80, rgba(241,190,142,.22), transparent); box-shadow: 0 0 8px rgba(255,183,119,.22); }

.footer { display: grid; grid-template-columns: auto minmax(200px, 1fr) auto; align-items: center; gap: 38px; min-height: 120px; padding: 24px 5vw; border-top: 1px solid rgba(206,223,218,.11); color: #859196; background: rgba(5,9,15,.74); }
.footer > div { display: flex; align-items: center; gap: 10px; color: #b7c1bc; font: 8px var(--mono); letter-spacing: .1em; white-space: nowrap; }
.wordmark-mark.small { width: 19px; height: 19px; }
.wordmark-mark.small i { transform: scale(.78); transform-origin: left center; }
.footer p { max-width: 550px; margin: 0; color: #748086; font-size: 9px; line-height: 1.6; }
.footer-end { color: #849694; font: 8px var(--mono); letter-spacing: .1em; white-space: nowrap; }
.footer-end b { color: #c9a187; font-weight: 400; }
.noscript { position: fixed; z-index: 100; right: 0; bottom: 0; left: 0; padding: 12px; text-align: center; color: white; background: #752f28; font: 12px var(--sans); }

@media (min-width: 1500px) {
  .hero-copy { left: 16vw; }
  .orbit-art { right: 14%; }
  .timeline { width: min(1210px, 80vw); }
}
@media (max-width: 800px) {
  .masthead { padding: 20px 20px; }
  .hero { min-height: 750px; }
  .hero-copy { top: 18%; left: 8vw; width: 54vw; }
  .hero h1 { font-size: clamp(76px, 15vw, 120px); }
  .hero-deck { font-size: 12px; max-width: 280px; }
  .orbit-art { width: 58vw; height: 28%; min-height: 180px; top: 41%; right: -2%; opacity: .9; }
  .hero-iss-pin { left: 48%; top: 56%; flex-direction: row-reverse; transform: translate(-100%,-50%); }
  .hero-iss-pin .pin-line { background: linear-gradient(270deg, #89d8d0, rgba(137,216,208,0)); }
  .earth-horizon { height: 36%; min-height: 270px; }
  .hero-caption { bottom: 13%; right: 4vw; font-size: 7px; }
  .descent { padding-top: 70px; }
  .descent-intro { width: 84vw; padding-bottom: 45px; }
  .timeline { width: 94vw; }
  .stop { min-height: 264px; }
  .stop:nth-child(odd) .stop-card { margin-right: 45px; }
  .stop:nth-child(even) .stop-card { margin-left: 45px; }
  .stop-card { padding: 16px 15px; }
  .center-finale { min-height: 690px; padding: 100px 8vw; }
  .final-copy { margin-left: 0; width: 53vw; }
  .final-orbit { width: 70vw; right: -16vw; opacity: .83; }
  .footer { grid-template-columns: 1fr auto; gap: 12px 22px; }
  .footer p { grid-column: 1 / -1; grid-row: 2; }
}
@media (max-width: 520px) {
  .masthead { padding: 15px 15px; }
  .wordmark { gap: 7px; font-size: 8px; letter-spacing: .08em; }
  .wordmark-mark { width: 19px; height: 19px; }
  .wordmark-mark i { left: 5px; transform: scale(.86); transform-origin: left center; }
  .wordmark-mark i:nth-child(1), .wordmark-mark i:nth-child(3) { left: 7px; }
  .sound-toggle { min-height: 34px; padding: 0 10px; gap: 6px; font-size: 9px; }
  .sound-toggle svg { width: 14px; height: 14px; }
  .readout { right: 11px; bottom: max(11px, env(safe-area-inset-bottom)); width: 173px; padding: 10px 12px 9px; }
  .readout-top { font-size: 7px; }
  .readout-unit { font-size: 7px; }
  .readout-value { margin-top: 5px; font-size: 24px; letter-spacing: .035em; }
  .readout-label { margin-top: 4px; font-size: 7px; }
  .readout-track { display: none; }
  .hero { min-height: 760px; height: 100svh; max-height: 920px; }
  .hero-copy { top: 17%; left: 8vw; width: 80vw; }
  .hero-copy .kicker { margin-bottom: 17px; }
  .hero h1 { font-size: clamp(76px, 20vw, 105px); }
  .hero-deck { max-width: 245px; width: 72%; margin-top: 19px; font-size: 11px; }
  .begin-link { font-size: 9px; }
  .orbit-art { top: 46%; right: 0; width: 73vw; height: 25%; min-height: 170px; }
  .iss-drawing { width: 47%; top: 27%; left: 26%; }
  .hero-coordinate { right: 16%; bottom: -4%; }
  .hero-coordinate strong { font-size: 17px; }
  .hero-iss-pin { top: 56%; left: 48%; }
  .pin-tag { font-size: 7px; padding: 4px 5px; }
  .pin-tag b { margin-left: 4px; }
  .pin-line { width: 23px; }
  .earth-horizon { height: 32%; min-height: 250px; }
  .earth-horizon svg { width: 155%; left: -27%; }
  .hero-caption { right: 5vw; bottom: 13%; }
  .hero-bottom-note { bottom: 18px; left: 26%; font-size: 7px; }
  .descent { padding-top: 61px; }
  .descent-intro { width: 86vw; padding-bottom: 32px; text-align: left; }
  .descent-intro .kicker { justify-content: flex-start; margin-bottom: 18px; }
  .descent-intro h2 { font-size: 51px; }
  .descent-intro > p:not(.kicker) { margin: 16px 0 21px; font-size: 11px; max-width: 335px; }
  .scale-note { gap: 10px; padding: 11px 12px; }
  .scale-note p { font-size: 9px; }
  .timeline { width: 100%; padding-left: 17px; }
  .timeline-spine { left: 21px; transform: none; top: -14px; bottom: -20px; }
  .traveler { left: 0; }
  .stop { display: flex; align-items: center; min-height: 238px; padding: 0 13px 0 31px; }
  .stop:nth-child(odd) .stop-card, .stop:nth-child(even) .stop-card { width: 100%; margin: 0; text-align: left; justify-self: auto; }
  .stop:nth-child(odd) .stop-meta { justify-content: flex-start; }
  .stop:nth-child(odd) .stop-fact { margin-left: 0; }
  .stop-card { padding: 14px 14px 13px; }
  .stop h3 { font-size: 21px; }
  .stop-distance { font-size: 11px; }
  .stop-fact { font-size: 10px; }
  .stop-pin { left: 4px; }
  .stop:nth-child(odd) .stop-pin::before { right: auto; left: 11px; transform: none; }
  .stop:nth-child(even) .stop-pin::before { left: 11px; }
  .center-finale { min-height: 780px; align-items: flex-start; padding: 95px 8vw 90px; }
  .final-copy { width: 86vw; }
  .final-copy h2 { font-size: 75px; }
  .final-copy > p:not(.kicker) { width: 75%; font-size: 11px; }
  .final-readout { margin-top: 19px; }
  .final-orbit { width: 108vw; top: auto; right: -29vw; bottom: -12vw; transform: none; opacity: .7; }
  .return-link { margin-top: 20px; }
  .footer { grid-template-columns: 1fr; gap: 12px; padding: 23px 7vw 100px; }
  .footer > div { font-size: 7px; }
  .footer p { grid-column: auto; grid-row: auto; font-size: 8px; }
  .footer-end { font-size: 7px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}