/* ===== tokens ===== */
:root {
  color-scheme: dark;
  --void: #05070d;
  --ink: #020309;
  --suit: #46536e;
  --cream: #f1e6c4;
  --cream-dim: #b9b29b;
  --text: #e9e4d4;
  --muted: #9aa0b4;
  --green: #3dff8f;
  --yellow: #ffe45e;
  --magenta: #ff3fa4;
  --cyan: #3fd8ff;
  --panel: rgba(8, 11, 22, 0.62);
  --line: rgba(241, 230, 196, 0.14);
  --display: "Space Grotesk", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --gutter: clamp(16px, 4vw, 56px);
  --ease: cubic-bezier(.2, .7, .1, 1);
}

* { box-sizing: border-box; }
html { background: var(--void); scrollbar-width: none; }
html::-webkit-scrollbar { display: none; }
body {
  margin: 0; background: var(--void); color: var(--text);
  font: 400 17px/1.6 var(--display);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; }
::selection { background: var(--magenta); color: var(--ink); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

#stage { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; height: 100lvh; display: block; z-index: 0; }
.vignette {
  position: fixed; inset: 0; pointer-events: none; z-index: 1;
  background: radial-gradient(120% 90% at 50% 50%, transparent 55%, rgba(2, 3, 9, .75) 100%);
}

/* ===== HUD ===== */
.hud { position: fixed; z-index: 10; font: 500 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--cream-dim); }
.hud-top { top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: center; padding: 20px var(--gutter); }
.brand { display: flex; gap: 10px; align-items: center; text-decoration: none; color: var(--cream); font-weight: 700; }
.brand-mark { width: 10px; height: 10px; border-radius: 50%; background: var(--green); box-shadow: 0 0 12px var(--green); animation: beat 2.3s ease-in-out infinite; }
@keyframes beat { 0%, 100% { transform: scale(.75); opacity: .7 } 40% { transform: scale(1.15); opacity: 1 } }
.skip { text-decoration: none; padding: 9px 14px; border: 1px solid var(--line); border-radius: 999px; background: rgba(5, 7, 13, .5); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: border-color .3s, color .3s; }
.skip:hover, .skip:focus-visible { border-color: var(--cyan); color: var(--cyan); }
.hud-bottom { bottom: 0; left: 0; padding: 18px var(--gutter); display: flex; gap: 22px; }
.hud-bottom b { color: var(--cream); font-weight: 500; }
.ok { color: var(--green) !important; }
.hl-cyan { color: var(--cyan); font-weight: 600; }
.hl-green { color: var(--green); font-weight: 600; }

.rail { position: fixed; z-index: 10; right: var(--gutter); top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 4px; }
.rail a {
  display: flex; align-items: center; justify-content: flex-end; gap: 10px;
  font: 500 10.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; text-decoration: none;
  color: var(--cream-dim); padding: 6px 0;
}
.rail a em { font-style: normal; opacity: 0; transform: translateX(6px); transition: opacity .3s, transform .3s var(--ease); white-space: nowrap; }
.rail a span { color: var(--cream-dim); opacity: .5; }
.rail:hover a em, .rail a:focus-visible em { opacity: 1; transform: none; }
.rail a::after { content: ""; width: 14px; height: 1px; background: var(--cream-dim); opacity: .45; transition: width .4s var(--ease), background .3s, opacity .3s; }
.rail a[aria-current] span { color: var(--green); opacity: 1; }
.rail a[aria-current]::after { width: 34px; background: var(--green); opacity: 1; box-shadow: 0 0 8px var(--green); }

/* ===== chapters ===== */
.chapter { position: relative; z-index: 2; height: 200vh; }
.chapter[data-len="tall"] { height: 260vh; }
.chapter-prologue { height: 100vh; }
.chapter-inner {
  position: sticky; top: 0; height: 100vh; display: flex; align-items: center;
  padding: 90px var(--gutter) 70px;
  opacity: clamp(0, calc(var(--w, 0) * 2.2 - 0.9), 1);
  pointer-events: none;
}
.chapter.is-in .chapter-inner { pointer-events: auto; }
.chapter[data-side="right"] .chapter-inner { justify-content: flex-end; padding-right: calc(var(--gutter) + 120px); }
.chapter[data-side="center"] .chapter-inner { justify-content: center; }

.copy { max-width: 34rem; }
.copy-wide { max-width: 40rem; }
.copy-center { max-width: 68rem; text-align: center; }
.copy-low { align-self: flex end; align-self: flex-end; margin-bottom: 4vh; }

.reveal { opacity: 0; transform: translateY(18px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: calc(var(--i, 0) * 90ms); }
.chapter.is-in .reveal { opacity: 1; transform: none; }

.kicker { font: 500 12px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--green); margin: 0 0 18px; }
h1, h2, h3 { font-family: var(--display); font-weight: 600; letter-spacing: -.02em; margin: 0; color: var(--cream); }
h1 { font-size: clamp(48px, 7.4vw, 112px); line-height: .95; letter-spacing: -.035em; }
h2 { font-size: clamp(28px, 3.3vw, 46px); line-height: 1.08; margin-bottom: 18px; }
h3 { font-size: 19px; line-height: 1.3; }
.role { font: 500 13px/1.5 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--cyan); margin: 22px 0 18px; }
.lede { font-size: clamp(18px, 1.5vw, 22px); color: var(--text); max-width: 30rem; }
.cue { font: 500 12px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--cream-dim); margin-top: 36px; }
.cue span { display: inline-block; animation: bob 1.8s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(5px); } }
.meta { font: 400 14px/1.6 var(--mono); color: var(--muted); }
.meta b { color: var(--cream); font-weight: 500; }
.emph { font-size: 21px; color: var(--cream); line-height: 1.45; }
.small { font-size: 14.5px; color: var(--muted); }
.small a { color: var(--cream); text-decoration-color: var(--line); text-underline-offset: 3px; }
.note { font: 400 13px/1.6 var(--mono); color: var(--muted); }
.note .dot { display: inline-block; margin-right: 8px; vertical-align: 1px; }
.note b { color: var(--cream); font-weight: 500; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 10px var(--yellow); flex: none; }
.copy p { margin: 0 0 14px; }

/* panels behind long copy keep text readable over bright scenes */
.copy:not(.copy-center) { padding: 28px 30px; margin-left: -30px; border-radius: 18px; background: linear-gradient(90deg, rgba(5, 7, 13, .72), rgba(5, 7, 13, .35) 75%, transparent); }
.chapter[data-side="right"] .copy { background: linear-gradient(270deg, rgba(5, 7, 13, .72), rgba(5, 7, 13, .35) 75%, transparent); margin: 0 -30px 0 0; }
#drift .copy { background: none; }

/* ===== prologue ===== */
.chapter-prologue .chapter-inner { opacity: 1; justify-content: center; text-align: center; }
.prologue { font: 400 clamp(17px, 1.9vw, 24px)/1.5 var(--mono); color: var(--cream); max-width: 40rem; }
.prologue p {
  margin: 0 0 22px;
  opacity: clamp(0, calc((var(--p, 0) - var(--at)) * 9), 1);
  opacity: min(clamp(0, calc((var(--p, 0) - var(--at)) * 9), 1), clamp(0, calc((0.5 - var(--p, 0)) * 6), 1));
  transform: translateY(calc(clamp(0, calc((var(--at) - var(--p, 0)) * 60), 1) * 10px));
}
.scroll-cue {
  position: absolute; bottom: 64px; left: 50%; transform: translateX(-50%); margin: 0;
  font: 500 11px/1 var(--mono); letter-spacing: .3em; text-transform: uppercase; color: var(--cream-dim);
  opacity: clamp(0, calc((0.08 - var(--p, 0)) * 14), 1);
}
.scroll-cue::after { content: ""; display: block; width: 1px; height: 38px; margin: 12px auto 0; background: linear-gradient(var(--cream-dim), transparent); animation: drip 2s ease-in-out infinite; }
@keyframes drip { 0% { transform: scaleY(0); transform-origin: top } 50% { transform: scaleY(1); transform-origin: top } 51% { transform-origin: bottom } 100% { transform: scaleY(0); transform-origin: bottom } }

/* ===== metrics (wrist HUD readouts) ===== */
.metrics { display: grid; gap: 10px; margin: 6px 0 16px; }
.metric {
  font: 500 12px/1.3 var(--mono); padding: 12px 14px; margin: 4px 0 16px;
  border: 1px solid rgba(63, 216, 255, .22); border-radius: 10px; background: rgba(63, 216, 255, .05);
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap;
}
.metrics .metric { margin: 0; }
.metric-label { text-transform: uppercase; letter-spacing: .12em; color: var(--muted); font-size: 10.5px; }
.metric-values { display: flex; gap: 10px; align-items: baseline; font-size: 17px; }
.metric-before { color: var(--yellow); text-shadow: 0 0 12px rgba(255, 228, 94, .5); }
.metric-arrow { color: var(--cream-dim); }
.metric-after { color: var(--cyan); text-shadow: 0 0 14px rgba(63, 216, 255, .6); }
.metric .metric-before, .metric .metric-arrow, .metric .metric-after { opacity: 0; transition: opacity .5s, filter .5s; }
.metric.is-on .metric-before, .metric.is-on .metric-arrow { opacity: 1; }
.metric.is-resolved .metric-before { opacity: .55; text-decoration: line-through; text-decoration-color: rgba(255, 228, 94, .5); }
.metric.is-resolved .metric-after { opacity: 1; }
.metric:not([data-before]).is-on .metric-after { opacity: 1; }

.patch { display: flex; align-items: center; gap: 12px; font: 500 13px/1.3 var(--mono); color: var(--cream); }
.patch-badge.patch-star { border-style: solid; font-size: 18px; color: var(--cyan); border-color: var(--cyan); box-shadow: 0 0 16px rgba(63, 216, 255, .35) inset; }
.patch-badge { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 2px dashed var(--yellow); color: var(--yellow); font-size: 11px; letter-spacing: .08em; box-shadow: 0 0 16px rgba(255, 228, 94, .35) inset; }

/* ===== lab + terminal ===== */
#inside h2 { font-size: clamp(24px, 2.4vw, 34px); }
#inside .copy { padding-top: 22px; padding-bottom: 18px; }
.lab { display: grid; gap: 10px; margin: 6px 0 12px; }
.lab-item { padding: 11px 14px; border-left: 2px solid var(--green); background: rgba(61, 255, 143, .04); border-radius: 0 10px 10px 0; }
.lab-item h3 { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 18px; margin-bottom: 6px; }
.lab-item h3 a { text-decoration: none; }
.lab-item h3 a:hover { color: var(--green); }
.lab-item p { font-size: 14.5px; color: var(--muted); margin: 0; }
.tag { font: 500 10.5px/1 var(--mono); padding: 4px 7px; border-radius: 5px; background: rgba(63, 216, 255, .12); color: var(--cyan); }
.badge { font: 500 10px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; padding: 5px 8px; border-radius: 999px; border: 1px solid var(--line); color: var(--cream-dim); }

.terminal { border: 1px solid rgba(61, 255, 143, .25); border-radius: 12px; background: rgba(2, 4, 9, .88); box-shadow: 0 0 40px rgba(61, 255, 143, .08); overflow: hidden; margin-bottom: 14px; font: 400 13px/1.55 var(--mono); }
.term-bar { display: flex; gap: 6px; align-items: center; padding: 9px 12px; border-bottom: 1px solid var(--line); }
.term-bar span { width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
.term-bar span:nth-child(1) { background: var(--magenta); } .term-bar span:nth-child(2) { background: var(--yellow); } .term-bar span:nth-child(3) { background: var(--green); }
.term-bar em { margin-left: auto; font-style: normal; font-size: 10.5px; letter-spacing: .06em; color: var(--muted); }
.term-out { height: 128px; overflow-y: auto; padding: 10px 14px 0; scrollbar-width: thin; }
.term-line { white-space: pre-wrap; word-break: break-word; color: var(--cream); }
.term-echo { color: var(--green); }
.term-dim { color: var(--muted); }
.term-err { color: var(--magenta); }
.term-form { display: flex; gap: 8px; padding: 6px 14px 12px; align-items: center; }
.term-prompt { color: var(--green); white-space: nowrap; }
.term-form input { flex: 1; min-width: 0; background: none; border: 0; outline: none; color: var(--cream); font: inherit; caret-color: var(--green); }

/* ===== constellations ===== */
#constellations h2 { font-size: clamp(24px, 2.5vw, 36px); margin-bottom: 0; }
#constellations .cards { margin-top: 110px; }
.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; text-align: left; margin-top: 26px; }
.card {
  --hue: var(--green);
  padding: 20px 20px 16px; border-radius: 16px; background: rgba(8, 11, 22, 0.5); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
  border: 1px solid rgba(241, 230, 196, .1); position: relative; display: flex; flex-direction: column;
  transition: transform .5s var(--ease), border-color .4s, box-shadow .4s;
}
.card[data-hue="magenta"] { --hue: var(--magenta); } .card[data-hue="cyan"] { --hue: var(--cyan); } .card[data-hue="yellow"] { --hue: var(--yellow); }
.card::before { content: ""; position: absolute; left: 20px; top: -1px; width: 40px; height: 2px; background: var(--hue); box-shadow: 0 0 12px var(--hue); }
.card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--hue) 50%, transparent); box-shadow: 0 10px 40px -10px color-mix(in srgb, var(--hue) 40%, transparent); }
.card-k { font: 500 10.5px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--hue); margin: 0 0 10px !important; }
.card h3 { font-size: 18px; margin-bottom: 10px; }
.card p { font-size: 13.5px; color: var(--muted); line-height: 1.55; }
.card-f { margin-top: auto !important; padding-top: 10px; display: flex; flex-direction: column; gap: 8px; font: 400 11px/1.4 var(--mono) !important; color: var(--cream-dim) !important; }
.card-f .badge { align-self: flex-start; }

/* ===== nerve net ===== */
.skills { display: flex; flex-wrap: wrap; gap: 7px; margin: 8px 0 14px; }
.skill {
  font: 500 12px/1 var(--mono); padding: 8px 11px; border-radius: 999px; cursor: default;
  border: 1px solid var(--line); background: rgba(5, 7, 13, .5); color: var(--cream);
  transition: border-color .25s, color .25s, box-shadow .25s, background .25s;
}
.skill:hover, .skill:focus-visible, .skill.is-active { border-color: var(--green); color: var(--green); box-shadow: 0 0 14px rgba(61, 255, 143, .3); outline: none; }
.evidence { font: 400 13px/1.55 var(--mono); color: var(--muted); min-height: 3.2em; }
.evidence b { color: var(--cyan); font-weight: 500; }
.principles { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 7px; font-size: 14.5px; color: var(--muted); }
.principles b { color: var(--cream); font-weight: 600; }
.thesis {
  position: absolute; right: calc(var(--gutter) + 110px); bottom: 12vh; margin: 0; max-width: 26rem; text-align: right;
  font: 500 clamp(18px, 1.7vw, 24px)/1.35 var(--display); color: var(--cream-dim);
  opacity: clamp(0, calc(var(--l, 0) * 4), 1);
}
.thesis b { color: var(--cream); }
.thesis { text-shadow: 0 0 18px var(--void), 0 0 6px var(--void), 0 0 2px var(--void); }

/* ===== transmission ===== */
.transmit { display: flex; gap: 10px; max-width: 36rem; margin: 26px auto 22px; }
.transmit input { flex: 1; min-width: 0; padding: 15px 18px; border-radius: 999px; border: 1px solid var(--line); background: rgba(5, 7, 13, .7); color: var(--cream); font: 400 15px var(--display); outline: none; transition: border-color .3s; }
.transmit input:focus { border-color: var(--green); }
.transmit button { padding: 15px 22px; border-radius: 999px; border: 0; background: var(--green); color: var(--ink); font: 600 14px var(--display); cursor: pointer; box-shadow: 0 0 24px rgba(61, 255, 143, .35); transition: transform .2s, box-shadow .3s; }
.transmit button:hover { transform: translateY(-1px); box-shadow: 0 0 34px rgba(61, 255, 143, .55); }
.links { display: flex; flex-wrap: wrap; gap: 8px 22px; justify-content: center; font: 500 13px var(--mono); }
.links a { text-decoration: none; color: var(--cream); border-bottom: 1px solid var(--line); padding-bottom: 3px; transition: color .25s, border-color .25s; }
.links a:hover { color: var(--green); border-color: var(--green); }
.foot { font: 400 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-top: 26px !important; }

/* ===== visor star tooltip ===== */
.star-tip { position: fixed; z-index: 20; pointer-events: none; font: 500 11.5px/1.3 var(--mono); padding: 7px 10px; border-radius: 8px; background: rgba(5, 7, 13, .9); border: 1px solid var(--line); color: var(--cream); opacity: 0; transform: translate(14px, -50%); transition: opacity .2s; white-space: nowrap; }
.star-tip.on { opacity: 1; }
.star-tip i { font-style: normal; color: var(--yellow); }

:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.noscript { position: relative; z-index: 5; padding: 40px; }

/* ===== responsive ===== */
@media (max-width: 1180px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
  .copy-center h2 { font-size: 28px; }
}
/* ===== touch ===== */
.on-touch { display: none; }
@media (hover: none) {
  .on-hover { display: none; }
  .on-touch { display: inline; }
}
@media (pointer: coarse) {
  .term-form input, .transmit input { font-size: 16px; }   /* stops iOS zooming into inputs */
  .skill { padding: 10px 13px; }
}

/* ===== progress ===== */
.progress { position: fixed; z-index: 11; top: 0; left: 0; right: 0; height: 2px; pointer-events: none; }
.progress span { display: block; height: 100%; width: calc(var(--prog, 0) * 100%); background: linear-gradient(90deg, var(--green), var(--cyan)); box-shadow: 0 0 10px var(--green); }

@media (max-width: 1180px) { .rail { display: none; } .chapter[data-side="right"] .chapter-inner { padding-right: var(--gutter); } }

/* ===== landscape tablets and short laptop screens: compact so every chapter fits ===== */
@media (min-width: 761px) and (max-height: 840px) and (orientation: landscape) {
  .chapter-inner { padding-top: 72px; padding-bottom: 48px; }
  h2 { font-size: clamp(24px, 2.7vw, 36px); margin-bottom: 12px; }
  .copy p { margin-bottom: 10px; }
  .copy:not(.copy-center) { padding: 22px 26px; }
  .metric { padding: 9px 12px; margin: 2px 0 10px; }
  .metrics { gap: 7px; }
  .metric-values { font-size: 15px; }
  .lab-item { padding: 9px 12px; }
  .lab-item p, .small, .principles { font-size: 13.5px; }
  .term-out { height: 104px; }
  .card { padding: 16px 16px 12px; }
  .card p { font-size: 13px; }
  #constellations .cards { margin-top: 70px; }
}

/* ===== stacked: phones + portrait tablets — the 3D stays fixed, copy scrolls below the subject ===== */
@media (max-width: 760px), (max-width: 1100px) and (orientation: portrait) {
  .rail, .hud-bottom { display: none; }
  .hud-top { padding: 12px 16px; background: rgba(5, 7, 13, .82); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid rgba(241, 230, 196, .06); }
  .progress { top: auto; bottom: 0; height: 3px; }
  .chapter, .chapter[data-len="tall"] { height: auto; min-height: 140vh; min-height: 140svh; }
  .chapter-inner, .chapter[data-side="right"] .chapter-inner {
    position: relative; height: auto; min-height: 100vh; min-height: 100svh; display: block;
    padding: 56vh 16px 22vh; padding-top: 56svh; opacity: 1; pointer-events: auto;
  }
  .chapter-prologue { height: 100vh; height: 100svh; min-height: 0; }
  .chapter-prologue .chapter-inner { position: sticky; height: 100vh; height: 100svh; min-height: 0; display: flex; padding: 0 20px; align-items: flex-start; padding-top: 22svh; }
  .scroll-cue { bottom: 40px; }
  .reveal { opacity: 1; transform: none; }
  .copy, .copy:not(.copy-center), .chapter[data-side="right"] .copy, .copy-wide, .copy-center {
    max-width: 640px; margin: 0 auto; padding: 22px 20px; border-radius: 18px;
    background: rgba(5, 7, 13, .74); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(241, 230, 196, .07);
  }
  #drift .copy { background: rgba(5, 7, 13, .5); }
  .copy-low { align-self: auto; margin-bottom: 0; }
  .copy-center { text-align: left; }
  #constellations .cards { margin-top: 18px; }
  .cards { grid-template-columns: 1fr 1fr; gap: 12px; }
  .transmit { flex-direction: column; }
  .transmit button { padding: 16px 22px; }
  .links { justify-content: flex-start; }
  .thesis { position: static; display: block; text-align: left; margin: 18px auto 0; max-width: 640px; opacity: 1; padding: 0 6px; }
  .term-out { height: 170px; }
  .star-tip { transform: translate(-50%, -150%); }
}

/* phones: tighter type and single-column cards */
@media (max-width: 600px) {
  body { font-size: 15.5px; }
  .brand { font-size: 10px; letter-spacing: .1em; }
  .skip { font-size: 0; padding: 8px 12px; }
  .skip::before { content: "Résumé →"; font-size: 10px; letter-spacing: .12em; }
  .skip span { display: none; }
  .chapter-inner, .chapter[data-side="right"] .chapter-inner { padding: 58vh 12px 20vh; padding-top: 58svh; }
  .copy, .copy:not(.copy-center), .chapter[data-side="right"] .copy, .copy-wide, .copy-center { padding: 18px 16px; border-radius: 16px; }
  h1 { font-size: 44px; }
  h2, #inside h2, #constellations h2 { font-size: 24px; line-height: 1.12; }
  .kicker { font-size: 11px; margin-bottom: 14px; }
  .meta { font-size: 13px; }
  .emph { font-size: 18px; }
  .cards { grid-template-columns: 1fr; }
  .card { padding: 18px 16px 14px; }
  .metric { padding: 10px 12px; margin-bottom: 12px; }
  .metric-values { font-size: 15px; }
  .lab-item { padding: 10px 12px; }
  .lab-item p { font-size: 13.5px; }
  .term-out { height: 150px; }
  .prologue { font-size: 16px; }
}

/* portrait tablets: bigger type, roomier panels */
@media (min-width: 601px) and (max-width: 1100px) and (orientation: portrait) {
  .hud-top { padding: 16px 28px; }
  .chapter-inner, .chapter[data-side="right"] .chapter-inner { padding: 54vh 28px 24vh; padding-top: 54svh; }
  .copy, .copy:not(.copy-center), .chapter[data-side="right"] .copy, .copy-wide, .copy-center { max-width: 680px; padding: 30px 32px; }
  #constellations .copy-center { max-width: 760px; }
  h1 { font-size: 72px; }
  h2, #inside h2, #constellations h2 { font-size: 34px; }
  .prologue { font-size: 21px; max-width: 34rem; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal { transition: opacity .3s; transform: none; }
  .brand-mark, .cue span, .scroll-cue::after { animation: none; }
}