/* =========================================================================
   DIVINO DIGITAL · ASCENT
   A single night sky, climbed from horizon to summit.
   Sections: hero -> the climb (about) -> the charts (portfolio, the
   summit). Contact lives quietly in the footer.
   See DESIGN.md for the system.
   ========================================================================= */

/* ---------- Font: Jost variable (self-hosted, OFL). Futura's web proxy. -- */
@font-face {
  font-family: 'Jost';
  src: url('../assets/fonts/jost-var.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
/* metric-adjusted fallback: keeps slow first loads from shifting on swap */
@font-face {
  font-family: 'Jost Fallback';
  src: local('Futura'), local('Helvetica Neue'), local('Arial');
  size-adjust: 96%;
  ascent-override: 100%;
  descent-override: 27%;
  line-gap-override: 0%;
}

/* ---------- Tokens. Hex first, OKLCH refinement where supported. --------- */
:root {
  --void:  #0d1016;            /* horizon dark, page top      */
  --abyss: #050609;            /* summit dark, page bottom    */
  --mid:   #090b10;            /* sky gradient midpoint       */
  --star:  #f0f3f7;            /* light: primary ink + stars  */
  --ink-2: #a9b4c2;            /* secondary ink               */
  --ink-3: #8391a3;            /* faint labels                */
  --hairline: rgba(240, 243, 247, 0.14);
  --hairline-bright: rgba(240, 243, 247, 0.28);

  --font: 'Jost', 'Jost Fallback', Futura, 'Avenir Next', 'Century Gothic', system-ui, sans-serif;
  --track-caps: 0.32em;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);     /* expo-out */
  --t-fast: 220ms;
  --t-slow: 700ms;

  /* z scale: sky < content < head < skip */
  --z-sky: 0;
  --z-content: 1;
  --z-head: 10;
  --z-skip: 100;
}
@supports (color: oklch(50% 0 0)) {
  :root {
    --void:  oklch(15% 0.015 255);
    --abyss: oklch(7% 0.01 258);
    --mid:   oklch(11% 0.012 256);
    --star:  oklch(96% 0.005 240);
    --ink-2: oklch(78% 0.015 240);
    --ink-3: oklch(66% 0.02 245);
  }
}

/* ---------- Base ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100svh;   /* short pages: keep the sky gradient seamless */
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--star);
  background-color: var(--void);
  /* The whole document is one sky: horizon dark up top, abyss at the summit */
  background-image: linear-gradient(to bottom, var(--void), var(--mid) 45%, var(--abyss));
  overflow-x: hidden;
}

::selection { background: var(--star); color: var(--abyss); }

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--star);
  outline-offset: 4px;
  border-radius: 2px;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- Skip link ----------------------------------------------------- */
.skip-link {
  position: fixed;
  top: 1rem; left: 1rem;
  z-index: var(--z-skip);
  padding: 0.6rem 1.1rem;
  background: var(--star);
  color: var(--abyss);
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-decoration: none;
  border-radius: 2px;
  transform: translateY(-300%);
}
.skip-link:focus-visible { transform: none; outline-offset: 2px; }

/* ---------- The sky (canvas) ---------------------------------------------- */
#sky {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: var(--z-sky);
  pointer-events: none;
}

main, .site-foot { position: relative; z-index: var(--z-content); }

/* ---------- Header -------------------------------------------------------- */
.site-head {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: var(--z-head);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem clamp(1.25rem, 4vw, 3rem);
}
/* readability veil; the sky stays visible through it */
.site-head::before {
  content: '';
  position: absolute;
  inset: -1px 0 -2.5rem 0;
  background: linear-gradient(to bottom, rgba(5, 6, 9, 0.82), transparent);
  pointer-events: none;
}

/* small wordmark via mask so it tints with currentColor */
.head-mark {
  position: relative;
  display: block;
  width: clamp(104px, 12vw, 138px);
  aspect-ratio: 1484 / 152;
  color: var(--star);
  background: currentColor;
  -webkit-mask: url('../assets/wordmark.svg') center / contain no-repeat;
  mask: url('../assets/wordmark.svg') center / contain no-repeat;
  transition: opacity var(--t-fast) var(--ease-out);
}
.head-mark:hover { opacity: 0.8; }

.site-nav {
  position: relative;
  display: flex;
  gap: clamp(1.2rem, 3vw, 2.6rem);
}
.site-nav a {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-2);
  /* invisible padding grows the tap target to ~44px without moving layout */
  padding: 0.85rem 0.5rem;
  margin: -0.85rem -0.5rem;
  transition: color var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out);
}
.site-nav a:hover {
  color: var(--star);
  transform: translateY(-1px);   /* everything here rises */
}

/* ---------- Altimeter (decorative scroll instrument, desktop only) ------- */
.altimeter {
  position: fixed;
  right: clamp(1.1rem, 2.6vw, 2.4rem);
  top: 50%;
  transform: translateY(-50%);
  z-index: var(--z-head);
  display: flex;
  align-items: center;
  gap: 0.9rem;
}
.alt-rail {
  position: relative;
  display: block;
  width: 1px;
  height: 34vh;
  background: var(--hairline);
}
.alt-dot {
  position: absolute;
  left: 50%;
  top: 0;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--star);
  box-shadow: 0 0 8px 1px rgba(240, 243, 247, 0.55);
  will-change: transform;
  /* --sp set by JS: 0 at horizon, 1 at the summit. The dot climbs UP. */
  transform: translate(-50%, calc((1 - var(--sp, 0)) * (34vh - 5px)));
}
h2 { margin: 0; font-weight: 300; }

.statement {
  display: block;
  font-size: clamp(1.45rem, 1.1rem + 1.6vw, 2.1rem);
  font-weight: 300;
  letter-spacing: 0.02em;
  line-height: 1.35;
  color: var(--star);
  text-wrap: balance;
}

.body-copy {
  max-width: 36rem;
  margin: 1.4rem auto 0;
  font-size: 1rem;
  color: var(--ink-2);
  text-wrap: pretty;
}

/* ---------- Horizon (hero) ------------------------------------------------ */
.hero {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: 0 1.5rem;
}

/* --hf (0..1, set by JS while scrolling) dissipates the horizon like
   smoke: fade, a slight rise and swell, and on desktop a soft blur */
.hero-inner {
  position: relative;
  text-align: center;
  opacity: calc(1 - var(--hf, 0));
  transform: translateY(calc(var(--hf, 0) * -30px)) scale(calc(1 + var(--hf, 0) * 0.04));
  will-change: opacity, transform;
}
@media (hover: hover) and (pointer: fine) {
  .hero-inner { filter: blur(calc(var(--hf, 0) * 9px)); }
}

.hero-mark { margin: 0; }
.hero-mark svg {
  display: block;
  width: min(clamp(300px, 62vw, 700px), calc(100vw - 2.5rem));
  height: auto;
  color: var(--star);
  filter: drop-shadow(0 0 26px rgba(240, 243, 247, 0.12));
}

.hero-line {
  margin: 2rem 0 0;
  font-size: clamp(0.75rem, 0.68rem + 0.35vw, 0.875rem);
  font-weight: 400;
  letter-spacing: var(--track-caps);
  text-indent: var(--track-caps);   /* balances the trailing tracking space */
  text-transform: uppercase;
  color: var(--ink-2);
}

/* the dawn at the bottom edge is the canvas planet limb (see main.js) */

/* scroll cue: a point of light traveling upward */
.scroll-cue {
  position: absolute;
  bottom: 2.3rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  /* the invitation goes first when the climb begins */
  opacity: calc(1 - min(1, var(--hf, 0) * 2.5));
}
.cue-track {
  position: relative;
  display: block;
  width: 1px;
  height: 52px;
  background: var(--hairline);
  overflow: hidden;
}
.cue-dot {
  position: absolute;
  left: -1px;
  top: 0;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--star);
  animation: cue-up 2.6s var(--ease-out) infinite;
}
.cue-label {
  font-size: 0.625rem;
  letter-spacing: var(--track-caps);
  text-indent: var(--track-caps);
  text-transform: uppercase;
  color: var(--ink-2);   /* sits over the horizon glow; ink-3 fails AA there */
}
@keyframes cue-up {
  0%   { transform: translateY(54px); opacity: 0; }
  18%  { opacity: 1; }
  72%  { opacity: 1; }
  100% { transform: translateY(-6px); opacity: 0; }
}

/* ---------- Load choreography: one orchestrated dawn --------------------- */
@keyframes rise-in {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
/* the wordmark assembles glyph by glyph, left to right; translate values
   are SVG user units (viewBox 1484x152) so the rise scales with the mark */
@keyframes glyph-rise {
  from { opacity: 0; transform: translateY(64px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero-mark svg path { animation: glyph-rise 0.9s var(--ease-out) both; }
.hero-mark svg path:nth-of-type(1)  { animation-delay: 0.25s; }
.hero-mark svg path:nth-of-type(2)  { animation-delay: 0.295s; }
.hero-mark svg path:nth-of-type(3)  { animation-delay: 0.34s; }
.hero-mark svg path:nth-of-type(4)  { animation-delay: 0.385s; }
.hero-mark svg path:nth-of-type(5)  { animation-delay: 0.43s; }
.hero-mark svg path:nth-of-type(6)  { animation-delay: 0.475s; }
.hero-mark svg path:nth-of-type(7)  { animation-delay: 0.565s; }   /* breath at the word gap */
.hero-mark svg path:nth-of-type(8)  { animation-delay: 0.61s; }
.hero-mark svg path:nth-of-type(9)  { animation-delay: 0.655s; }
.hero-mark svg path:nth-of-type(10) { animation-delay: 0.7s; }
.hero-mark svg path:nth-of-type(11) { animation-delay: 0.745s; }
.hero-mark svg path:nth-of-type(12) { animation-delay: 0.79s; }
.hero-mark svg path:nth-of-type(13) { animation-delay: 0.835s; }
.hero-line            { animation: fade-in 1.1s var(--ease-out) 1.15s both; }
.cue-track, .cue-label { animation: fade-in 1s var(--ease-out) 1.8s both; }

/* on the home page the small header mark waits below the horizon and
   appears only once the hero wordmark has dissipated (.is-aloft, set by
   JS). The .reveal-armed gate keeps it visible for no-JS, reduced-motion
   and prerendered visits. */
.reveal-armed .home .head-mark {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s var(--ease-out), visibility 0s 0.6s;
}
.reveal-armed.is-aloft .home .head-mark {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.6s var(--ease-out);
}

/* ---------- The Climb ----------------------------------------------------- */
.climb {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 96vh;
  padding: 12vh 1.5rem;
  text-align: center;
}

.climb-lights {
  position: absolute;
  inset: 6vh 0;
  pointer-events: none;
}
.track {
  position: absolute;
  top: 0; bottom: 0;
  width: 1px;
  background: linear-gradient(to bottom, transparent, var(--hairline) 18%, var(--hairline) 82%, transparent);
}
/* never let the tracks cross the 38rem copy column (audited: 26vw alone
   strikes through the text on every iPad width) */
.track-a { left: min(26vw, calc(50% - 21rem)); }
.track-b { right: min(26vw, calc(50% - 21rem)); }

.climber {
  position: absolute;
  left: 50%;
  top: 0;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--star);
  /* comet head: a bright core in a wide soft coma */
  box-shadow:
    0 0 12px 3px rgba(240, 243, 247, 0.65),
    0 0 36px 9px rgba(214, 226, 240, 0.22);
  will-change: transform;
  /* --p driven by section scroll progress (JS); parked mid-track otherwise */
  transform: translate(-50%, calc((1 - var(--p, 0.55)) * 72vh));
}
/* the comet tail: the path already climbed, fading long below the head */
.climber::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 7px;
  width: 1.5px;
  height: 230px;
  transform: translateX(-50%);
  background: linear-gradient(to bottom, rgba(240, 243, 247, 0.6), rgba(240, 243, 247, 0.14) 45%, transparent);
}

.climb-copy { position: relative; max-width: 38rem; }

/* ---------- The Charts (the summit) ---------------------------------------
   The portfolio as a top-charts list, App Store cadence: each row is a
   floating liquid-glass capsule over the starfield. Monochrome glass;
   the YOLO tile is the page's only color, by design. */
.charts {
  position: relative;
  min-height: 72svh;
  padding: 10vh 1.5rem 12vh;
  text-align: center;
}

.chart {
  display: grid;
  gap: 1rem;
  width: min(100%, 35rem);
  margin: 3.4rem auto 0;
  padding: 0;
  list-style: none;
  text-align: left;
}

/* each row arrives a beat after the one above it */
.reveal-armed .chart-row.is-in { transition-delay: calc(var(--d, 0) * 140ms); }

/* the glass capsule: blur of the sky behind, specular top edge, soft drop */
.row-link {
  position: relative;
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  align-items: center;
  gap: 1.25rem;
  padding: 1.05rem 1.35rem;
  border-radius: 24px;
  text-decoration: none;
  background: linear-gradient(180deg, rgba(240, 243, 247, 0.07), rgba(240, 243, 247, 0.025));
  border: 1px solid rgba(240, 243, 247, 0.13);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  box-shadow:
    inset 0 1px 0 rgba(240, 243, 247, 0.16),
    inset 0 -1px 0 rgba(5, 6, 9, 0.45),
    0 16px 38px rgba(0, 0, 0, 0.42);
  transition:
    background-color var(--t-fast) var(--ease-out),
    border-color var(--t-fast) var(--ease-out),
    transform var(--t-fast) var(--ease-out),
    box-shadow var(--t-fast) var(--ease-out);
}
/* a diagonal sheen across the glass, the liquid part */
.row-link::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0.09), transparent 42%);
  pointer-events: none;
}
@supports not (backdrop-filter: blur(1px)) {
  .row-link { background: linear-gradient(180deg, rgba(24, 28, 36, 0.92), rgba(13, 16, 22, 0.92)); }
}
a.row-link:hover,
a.row-link:focus-visible {
  background-color: rgba(240, 243, 247, 0.05);
  border-color: rgba(240, 243, 247, 0.22);
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(240, 243, 247, 0.2),
    inset 0 -1px 0 rgba(5, 6, 9, 0.45),
    0 22px 48px rgba(0, 0, 0, 0.5);
}
/* the unreleased capsule sits quieter in the rack */
.is-soon .row-link { opacity: 0.82; }

/* the icon tile. YOLO wears its real colors; the only color on the page. */
.row-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 56px; height: 56px;
  border-radius: 14px;
  border: 1px solid var(--hairline);
}
.icon-yolo {
  background: #fef102;
  border-color: rgba(0, 0, 0, 0.35);
}
.row-glyph {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #0a0a0a;
}
/* the live tile breathes in its own yellow */
.is-live .row-icon::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 14px;
  box-shadow: 0 0 22px rgba(254, 241, 2, 0.3);
  pointer-events: none;
  animation: tile-breathe 5s ease-in-out infinite;
}
@keyframes tile-breathe {
  0%, 100% { opacity: 0.3; }
  50%      { opacity: 1; }
}

.is-soon .row-icon {
  border-style: dashed;
  background: none;
  box-shadow: none;
}
.is-soon .row-icon svg {
  width: 20px; height: 20px;
  color: var(--ink-3);
  opacity: 0.65;
}

/* rank, name, subtitle: App Store native type, no display tracking here */
.row-rank {
  min-width: 1.2rem;
  font-size: 1.125rem;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  text-align: center;
  color: var(--ink-2);
}

/* the text column may shrink; the name ellipsizes before the row overflows */
.row-text { min-width: 0; }
.row-name {
  display: block;
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--star);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.row-meta {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.875rem;
  color: var(--ink-2);
}
.is-soon .row-name,
.is-soon .row-meta { color: var(--ink-3); }

/* the Get button: Apple native. iOS dark-mode system blue on the gray
   fill pill, the page's second and last color. */
.row-pill {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  padding: 0.34rem 1.2rem;
  border: 0;
  border-radius: 999px;
  background: rgba(120, 120, 128, 0.26);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  color: #0a84ff;
  transition:
    background-color var(--t-fast) var(--ease-out),
    color var(--t-fast) var(--ease-out),
    box-shadow var(--t-fast) var(--ease-out);
}
a.row-link:hover .row-pill,
a.row-link:focus-visible .row-pill {
  background-color: rgba(120, 120, 128, 0.4);
  box-shadow: 0 0 18px rgba(10, 132, 255, 0.25);
}
.is-soon .row-pill {
  background: rgba(120, 120, 128, 0.16);
  color: var(--ink-3);
}

/* ---------- First light ----------------------------------------------------
   Reaching the summit warms the sky almost imperceptibly. JS adds
   .first-light to <html> once, the first time the visitor arrives. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: var(--z-sky);
  background: radial-gradient(90% 55% at 50% 0%, rgba(255, 241, 224, 0.055), transparent 62%);
  opacity: 0;
  transition: opacity 2.2s var(--ease-out);
}
.first-light body::after { opacity: 1; }

/* ---------- Footer: one quiet line ----------------------------------------- */
.site-foot {
  border-top: 1px solid var(--hairline);
  padding: 2rem clamp(1.25rem, 4vw, 3rem);
}

.foot-line {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.9rem 1.5rem;
}

/* the four-point star mark, a way back to the top */
.foot-mark {
  display: grid;
  place-items: center;
  width: 2.6rem; height: 2.6rem;   /* invisible tap target */
  margin: -0.8rem -0.4rem;
  color: var(--ink-2);
  transition: color var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out);
}
.foot-mark svg { display: block; width: 13px; height: 13px; }
.foot-mark:hover,
.foot-mark:focus-visible { color: var(--star); transform: translateY(-1px); }

/* the contact, kept subtle: a tracked line of light, nothing more */
.beacon {
  display: inline-block;
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: 0.26em;
  text-indent: 0.26em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-2);
  padding: 0.85rem 0.5rem;
  margin: -0.85rem -0.5rem;   /* invisible tap target */
  transition: color var(--t-fast) var(--ease-out), text-shadow var(--t-fast) var(--ease-out);
}
.beacon:hover,
.beacon:focus-visible {
  color: var(--star);
  text-shadow: 0 0 14px rgba(240, 243, 247, 0.45);
}
/* one soft glow when first light arrives at the summit */
@keyframes beacon-text-flare {
  0%   { text-shadow: none; }
  35%  { text-shadow: 0 0 18px rgba(240, 243, 247, 0.7); color: var(--star); }
  100% { text-shadow: none; }
}
.beacon.flare { animation: beacon-text-flare 1.8s var(--ease-out) 1; }

.foot-dot {
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--ink-3);
  opacity: 0.6;
}

.foot-item {
  font-size: 0.6875rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap;
}
.foot-legal { display: flex; gap: 1.5rem; }
.foot-legal a {
  font-size: 0.6875rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-3);
  padding: 0.85rem 0.5rem;
  margin: -0.85rem -0.5rem;
  transition: color var(--t-fast) var(--ease-out);
}
.foot-legal a:hover { color: var(--star); }

/* ---------- Scroll reveals ------------------------------------------------
   JS adds .reveal-armed to <html> right before observing, so content can
   never be hidden by a script that failed to run. No-JS stays visible. */
.reveal-armed .reveal {
  opacity: 0;
  transform: translateY(18px);
}
.reveal-armed .reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out);
}

/* ---------- Subpages (privacy / terms) ------------------------------------ */
.page-main {
  position: relative;
  z-index: var(--z-content);
  max-width: 40rem;
  margin: 0 auto;
  padding: 9.5rem 1.5rem 6rem;
}
.page-main h1 {
  font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.2rem);
  font-weight: 300;
  letter-spacing: 0.04em;
  margin: 0 0 2.2rem;
}
.page-main h2 { font-size: 1.05rem; font-weight: 500; letter-spacing: 0.06em; margin: 2.4rem 0 0.6rem; }
.page-main p { color: var(--ink-2); margin: 0.8rem 0; text-wrap: pretty; }
.page-main a { color: var(--star); text-underline-offset: 3px; }
.page-updated { font-size: 0.8125rem; color: var(--ink-3); letter-spacing: 0.08em; }

/* ---------- Responsive ---------------------------------------------------- */
@media (max-width: 960px) {
  .altimeter { display: none; }

  /* below this the one-line footer can't fit; stack it clean, no dots */
  .foot-line { flex-direction: column; gap: 1.1rem; }
  .foot-dot { display: none; }
}

@media (max-width: 760px) {
  .climb { min-height: 88vh; }
  .track-a { left: 9%; }
  .track-b { right: 9%; }
  /* keep the copy clear of the climbing tracks */
  .climb-copy { max-width: min(38rem, calc(100vw - 7rem)); }
  .climber::after { height: 150px; }

  /* the chart tightens up */
  .chart { margin-top: 3rem; gap: 0.85rem; }
  .row-link { gap: 0.95rem; padding: 0.85rem 1rem; border-radius: 20px; }
  .row-icon { width: 48px; height: 48px; border-radius: 12px; }
  .is-live .row-icon::after { border-radius: 12px; }
  .row-glyph { font-size: 0.62rem; }
}

@media (max-width: 640px) {
  .site-nav { gap: clamp(1.1rem, 6vw, 2rem); }
  .site-nav a { font-size: 0.625rem; letter-spacing: 0.22em; white-space: nowrap; }

  /* everything in the capsule slims down so all four columns keep fitting */
  .row-link { gap: 0.6rem; padding: 0.85rem 0.85rem; }
  .row-icon { width: 44px; height: 44px; }
  .row-rank { min-width: 1rem; font-size: 1rem; }
  .row-name { font-size: 0.9375rem; }
  .row-meta { font-size: 0.8125rem; }
  .row-pill { padding: 0.3rem 0.9rem; font-size: 0.8125rem; }
}

/* print: no choreography, everything visible */
@media print {
  .reveal-armed .reveal { opacity: 1; transform: none; }
  #sky, .altimeter, .scroll-cue { display: none; }
}

/* ---------- Reduced motion: the sky stands still -------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .hero-mark svg path, .hero-line, .cue-track, .cue-label {
    animation: none;
  }
  .cue-dot { animation: none; top: 50%; }
  .is-live .row-icon::after { animation: none; opacity: 0.6; }
  .beacon.flare { animation: none; }
  body::after { transition: none; }

  .reveal-armed .reveal { opacity: 1; transform: none; transition: none; }

  .site-nav a { transition-property: color; }
  .site-nav a:hover { transform: none; }
  .foot-mark:hover { transform: none; }
  a.row-link:hover, a.row-link:focus-visible { transform: none; }
}

/* forced colors (Windows High Contrast): the masked wordmark would vanish
   because backgrounds are overridden; pin it to the forced link color */
@media (forced-colors: active) {
  .head-mark {
    forced-color-adjust: none;
    background: LinkText;
  }
}