/* Cosmic Dispatch series stylesheet: home + Dispatch 001-003.
   Fonts are not loaded here; each page links Big Shoulders Display, IBM Plex Mono and Newsreader.
   Amber is reserved for: kicker, the subject dot, one h1 phrase (.hl), the frame-break number (.fb-num), Subscribe. */

:root {
  --void: #070912;
  --sky0: #0b1030;
  --pale: #e6e9f3;
  --dim: rgb(214 220 239 / .66);
  --faint: rgb(214 220 239 / .42);
  --line: rgb(214 220 239 / .14);
  --amber: #e0a63a;
  --earth: #3fa7d6;
  --hz: clamp(110px, 11vw, 180px);
  --display: "Big Shoulders Display", "Arial Narrow", "Helvetica Neue", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --serif: "Newsreader", "Iowan Old Style", Georgia, serif;
  --measure: 36rem;
  --gut: clamp(1.15rem, 5vw, 2rem);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--void); -webkit-text-size-adjust: 100%; }
body { color: var(--pale); overflow-x: hidden; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }

/* ---------- sky: home's star field, four layers of percentage-positioned points ---------- */
.sky, .sky::before, .sky::after {
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.sky {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23d6dcef'%3E%3Ccircle cx='4.2%25' cy='83.1%25' r='.7' fill-opacity='0.48'/%3E%3Ccircle cx='34.4%25' cy='14.2%25' r='.7' fill-opacity='0.36'/%3E%3Ccircle cx='49.8%25' cy='47.9%25' r='1' fill-opacity='0.59'/%3E%3Ccircle cx='61.7%25' cy='47.2%25' r='1.4' fill-opacity='0.74'/%3E%3Ccircle cx='6.4%25' cy='60.3%25' r='.7' fill-opacity='0.4'/%3E%3Ccircle cx='38.0%25' cy='71.6%25' r='1' fill-opacity='0.59'/%3E%3Ccircle cx='63.0%25' cy='68.5%25' r='1' fill-opacity='0.53'/%3E%3Ccircle cx='81.8%25' cy='46.8%25' r='.7' fill-opacity='0.43'/%3E%3Ccircle cx='67.0%25' cy='51.2%25' r='.7' fill-opacity='0.4'/%3E%3Ccircle cx='49.1%25' cy='22.0%25' r='1.4' fill-opacity='0.74'/%3E%3Ccircle cx='34.5%25' cy='31.0%25' r='1.4' fill-opacity='0.78'/%3E%3Ccircle cx='25.9%25' cy='46.5%25' r='1' fill-opacity='0.5'/%3E%3Ccircle cx='68.5%25' cy='4.9%25' r='1' fill-opacity='0.55'/%3E%3Ccircle cx='45.3%25' cy='4.3%25' r='1' fill-opacity='0.52'/%3E%3Ccircle cx='19.9%25' cy='61.7%25' r='1' fill-opacity='0.54'/%3E%3Ccircle cx='32.9%25' cy='63.5%25' r='1' fill-opacity='0.51'/%3E%3Ccircle cx='81.0%25' cy='28.1%25' r='1.4' fill-opacity='0.66'/%3E%3Ccircle cx='22.3%25' cy='12.6%25' r='.7' fill-opacity='0.38'/%3E%3Ccircle cx='97.8%25' cy='47.3%25' r='1' fill-opacity='0.51'/%3E%3Ccircle cx='13.2%25' cy='75.8%25' r='.7' fill-opacity='0.48'/%3E%3Ccircle cx='5.2%25' cy='8.5%25' r='1' fill-opacity='0.6'/%3E%3Ccircle cx='74.1%25' cy='39.0%25' r='.7' fill-opacity='0.39'/%3E%3Ccircle cx='31.4%25' cy='73.6%25' r='.7' fill-opacity='0.47'/%3E%3Ccircle cx='24.7%25' cy='78.8%25' r='.7' fill-opacity='0.4'/%3E%3Ccircle cx='72.0%25' cy='72.9%25' r='.7' fill-opacity='0.45'/%3E%3Ccircle cx='50.1%25' cy='67.4%25' r='.7' fill-opacity='0.45'/%3E%3C/svg%3E");
}
.sky::before, .sky::after {
  content: "";
  position: absolute;
  inset: 0;
}
.sky::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23d6dcef'%3E%3Ccircle cx='92.3%25' cy='48.3%25' r='.7' fill-opacity='0.43'/%3E%3Ccircle cx='58.6%25' cy='24.5%25' r='.7' fill-opacity='0.46'/%3E%3Ccircle cx='10.6%25' cy='3.0%25' r='1.4' fill-opacity='0.69'/%3E%3Ccircle cx='49.8%25' cy='38.4%25' r='1' fill-opacity='0.6'/%3E%3Ccircle cx='19.4%25' cy='40.8%25' r='1.4' fill-opacity='0.73'/%3E%3Ccircle cx='42.3%25' cy='48.8%25' r='1' fill-opacity='0.52'/%3E%3Ccircle cx='97.2%25' cy='63.7%25' r='1.4' fill-opacity='0.69'/%3E%3Ccircle cx='82.6%25' cy='36.2%25' r='.7' fill-opacity='0.37'/%3E%3Ccircle cx='97.7%25' cy='79.3%25' r='.7' fill-opacity='0.44'/%3E%3Ccircle cx='65.7%25' cy='87.9%25' r='.7' fill-opacity='0.46'/%3E%3C/svg%3E"); }
.sky::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23d6dcef'%3E%3Ccircle cx='63.7%25' cy='59.7%25' r='.7' fill-opacity='0.41'/%3E%3Ccircle cx='35.6%25' cy='22.6%25' r='1.4' fill-opacity='0.75'/%3E%3Ccircle cx='85.0%25' cy='17.8%25' r='.7' fill-opacity='0.4'/%3E%3Ccircle cx='29.1%25' cy='83.4%25' r='1' fill-opacity='0.51'/%3E%3Ccircle cx='97.2%25' cy='14.3%25' r='.7' fill-opacity='0.41'/%3E%3Ccircle cx='72.6%25' cy='84.3%25' r='1' fill-opacity='0.6'/%3E%3Ccircle cx='3.8%25' cy='19.8%25' r='1.4' fill-opacity='0.68'/%3E%3Ccircle cx='2.5%25' cy='29.5%25' r='.7' fill-opacity='0.38'/%3E%3Ccircle cx='9.4%25' cy='28.6%25' r='.7' fill-opacity='0.42'/%3E%3Ccircle cx='51.9%25' cy='87.1%25' r='.7' fill-opacity='0.45'/%3E%3C/svg%3E"); }
@media (min-width: 760px) {
  .sky {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23d6dcef'%3E%3Ccircle cx='4.2%25' cy='83.1%25' r='.7' fill-opacity='0.48'/%3E%3Ccircle cx='34.4%25' cy='14.2%25' r='.7' fill-opacity='0.36'/%3E%3Ccircle cx='49.8%25' cy='47.9%25' r='1' fill-opacity='0.59'/%3E%3Ccircle cx='61.7%25' cy='47.2%25' r='1.4' fill-opacity='0.74'/%3E%3Ccircle cx='6.4%25' cy='60.3%25' r='.7' fill-opacity='0.4'/%3E%3Ccircle cx='38.0%25' cy='71.6%25' r='1' fill-opacity='0.59'/%3E%3Ccircle cx='63.0%25' cy='68.5%25' r='1' fill-opacity='0.53'/%3E%3Ccircle cx='81.8%25' cy='46.8%25' r='.7' fill-opacity='0.43'/%3E%3Ccircle cx='67.0%25' cy='51.2%25' r='.7' fill-opacity='0.4'/%3E%3Ccircle cx='49.1%25' cy='22.0%25' r='1.4' fill-opacity='0.74'/%3E%3Ccircle cx='34.5%25' cy='31.0%25' r='1.4' fill-opacity='0.78'/%3E%3Ccircle cx='25.9%25' cy='46.5%25' r='1' fill-opacity='0.5'/%3E%3Ccircle cx='68.5%25' cy='4.9%25' r='1' fill-opacity='0.55'/%3E%3Ccircle cx='45.3%25' cy='4.3%25' r='1' fill-opacity='0.52'/%3E%3Ccircle cx='19.9%25' cy='61.7%25' r='1' fill-opacity='0.54'/%3E%3Ccircle cx='32.9%25' cy='63.5%25' r='1' fill-opacity='0.51'/%3E%3Ccircle cx='81.0%25' cy='28.1%25' r='1.4' fill-opacity='0.66'/%3E%3Ccircle cx='22.3%25' cy='12.6%25' r='.7' fill-opacity='0.38'/%3E%3Ccircle cx='97.8%25' cy='47.3%25' r='1' fill-opacity='0.51'/%3E%3Ccircle cx='13.2%25' cy='75.8%25' r='.7' fill-opacity='0.48'/%3E%3Ccircle cx='5.2%25' cy='8.5%25' r='1' fill-opacity='0.6'/%3E%3Ccircle cx='74.1%25' cy='39.0%25' r='.7' fill-opacity='0.39'/%3E%3Ccircle cx='31.4%25' cy='73.6%25' r='.7' fill-opacity='0.47'/%3E%3Ccircle cx='24.7%25' cy='78.8%25' r='.7' fill-opacity='0.4'/%3E%3Ccircle cx='72.0%25' cy='72.9%25' r='.7' fill-opacity='0.45'/%3E%3Ccircle cx='50.1%25' cy='67.4%25' r='.7' fill-opacity='0.45'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23d6dcef'%3E%3Ccircle cx='92.1%25' cy='87.4%25' r='.7' fill-opacity='0.4'/%3E%3Ccircle cx='54.5%25' cy='41.2%25' r='.7' fill-opacity='0.4'/%3E%3Ccircle cx='74.2%25' cy='50.7%25' r='.7' fill-opacity='0.41'/%3E%3Ccircle cx='62.3%25' cy='33.8%25' r='1' fill-opacity='0.5'/%3E%3Ccircle cx='88.8%25' cy='65.1%25' r='.7' fill-opacity='0.4'/%3E%3Ccircle cx='42.2%25' cy='80.5%25' r='.7' fill-opacity='0.47'/%3E%3Ccircle cx='87.4%25' cy='35.8%25' r='.7' fill-opacity='0.37'/%3E%3Ccircle cx='38.1%25' cy='55.9%25' r='.7' fill-opacity='0.39'/%3E%3Ccircle cx='51.3%25' cy='7.5%25' r='1' fill-opacity='0.54'/%3E%3Ccircle cx='13.9%25' cy='49.9%25' r='.7' fill-opacity='0.41'/%3E%3Ccircle cx='33.5%25' cy='87.6%25' r='1' fill-opacity='0.57'/%3E%3Ccircle cx='14.7%25' cy='26.1%25' r='.7' fill-opacity='0.4'/%3E%3Ccircle cx='97.4%25' cy='30.2%25' r='.7' fill-opacity='0.41'/%3E%3Ccircle cx='89.2%25' cy='13.6%25' r='.7' fill-opacity='0.4'/%3E%3Ccircle cx='48.8%25' cy='78.0%25' r='.7' fill-opacity='0.39'/%3E%3Ccircle cx='91.7%25' cy='25.5%25' r='1' fill-opacity='0.57'/%3E%3Ccircle cx='59.9%25' cy='1.9%25' r='.7' fill-opacity='0.43'/%3E%3Ccircle cx='86.6%25' cy='86.0%25' r='.7' fill-opacity='0.43'/%3E%3C/svg%3E");
  }
}

/* ---------- horizon arc (verbatim from home); its fill is the page colour, so stars stop at the limb ---------- */
.horizon {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: var(--hz);
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Csvg viewBox='0 0 1000 200' preserveAspectRatio='none' width='100%25' height='100%25'%3E%3Cpath d='M0 200A933.8 1222.5 0 0 1 1000 200Z' fill='%23070912'/%3E%3Cpath d='M0 200A933.8 1222.5 0 0 1 1000 200' fill='none' stroke='%23d6dcef' stroke-opacity='.42' stroke-width='1' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E%3Ccircle cx='70%25' cy='19.18%25' r='7.5' fill='none' stroke='%23e0a63a' stroke-opacity='.4'/%3E%3Ccircle cx='70%25' cy='19.18%25' r='2.6' fill='%23e0a63a'/%3E%3C/svg%3E") no-repeat 50% 0 / max(100%, 700px) 100%;
  /* the art is drawn wider than narrow viewports (a shallow horizon, not a dome) and clipped by the box, so phones get no sideways scroll */
}
/* arc only, no baked dot: pair with a .subject element (Orionids radiant, Pleiades Moon) */
.horizon--bare {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Csvg viewBox='0 0 1000 200' preserveAspectRatio='none' width='100%25' height='100%25'%3E%3Cpath d='M0 200A933.8 1222.5 0 0 1 1000 200Z' fill='%23070912'/%3E%3Cpath d='M0 200A933.8 1222.5 0 0 1 1000 200' fill='none' stroke='%23d6dcef' stroke-opacity='.42' stroke-width='1' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E%3C/svg%3E") no-repeat 50% 0 / max(100%, 700px) 100%;
}
/* the dot's position on the arc: 70% across an art box max(100%, 700px) wide, 19.18% down */
.horizon .subject, .horizon .horizon-label { position: absolute; }
.horizon .subject {
  left: calc(50% + max(20%, 140px));
  top: 19.18%;
  width: 5.2px;
  height: 5.2px;
  border-radius: 50%;
  background: var(--amber);
  outline: 1px solid rgb(224 166 58 / .4);
  outline-offset: 4.9px;
  transform: translate(-50%, -50%);
}
.horizon .subject--moon { width: 13px; height: 13px; background: var(--pale); outline: 0; }
.horizon-label {
  right: calc(50% - max(20%, 140px) - .35rem);
  bottom: calc(100% + .5rem);
  max-width: min(17rem, 80vw);
  text-align: right;
  font-family: var(--mono);
  font-size: .6875rem;
  line-height: 1.55;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--dim);
}
.horizon-label > span { white-space: nowrap; }
@media (min-width: 760px) { .horizon-label { max-width: 34rem; font-size: .75rem; } }

/* ---------- masthead ---------- */
.masthead {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  width: 100%; max-width: 72rem; margin: 0 auto; padding: 1rem var(--gut);
  font-family: var(--mono); font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--faint);
}
.brand { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--pale); }
.brand svg { width: 30px; height: 30px; flex: none; }
.brand b { font-family: var(--display); font-weight: 600; font-size: 1.25rem; letter-spacing: .06em; text-transform: uppercase; }

/* ---------- hero: 100svh, kicker + h1 + horizon, nothing else above the fold ---------- */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
  padding-bottom: calc(var(--hz) + 4.5rem);
  text-align: center;
}
.hero-in {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: clamp(1.5rem, 5vh, 3rem) var(--gut) 0;
}
.kicker { font-family: var(--mono); font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--amber); }
.hero h1 {
  max-width: 64rem;
  margin-top: 1.1rem;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(3rem, 11vw, 8rem);
  line-height: .88;
  letter-spacing: .01em;
  text-transform: uppercase;
  text-wrap: balance;
}
.hl { color: var(--amber); font-style: normal; }

/* ---------- reading column ---------- */
.standfirst, .prose {
  max-width: calc(var(--measure) + 2 * var(--gut));
  margin: 0 auto;
  padding: 0 var(--gut);
  font-family: var(--serif);
  font-size: clamp(1.1875rem, 1.1rem + .3vw, 1.3125rem);
  line-height: 1.62;
}
.standfirst { padding-top: clamp(2.5rem, 8vh, 4.5rem); }
.standfirst p:first-child { font-style: italic; font-size: 1.3em; line-height: 1.38; color: var(--pale); text-wrap: pretty; }
.standfirst .meta { margin-top: 1.1rem; font-family: var(--mono); font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.prose { padding-top: clamp(2.5rem, 8vh, 4.5rem); padding-bottom: clamp(2.5rem, 8vh, 4.5rem); }
.prose > * + * { margin-top: 1.1em; }
/* page-colour backing (as on home) so the fixed star field never lands inside text */
.standfirst p, .prose > p, .prose > h2, .prose > h3, .prose > ul, .prose > ol, .instrument, .still figcaption, .stage-cap, .stage-read, .frame-break p, .cd-foot { background: var(--void); }
.prose h2 {
  margin-top: 2.6em;
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1.75rem, 1.45rem + 1.3vw, 2.2rem);
  line-height: 1.02; letter-spacing: .02em; text-transform: uppercase; text-wrap: balance;
}
.prose > h2:first-child, .prose > h3:first-child { margin-top: 0; }
.prose h3 { margin-top: 2em; font-family: var(--display); font-weight: 600; font-size: 1.35rem; line-height: 1.1; letter-spacing: .04em; text-transform: uppercase; color: var(--dim); }
.prose h2 + *, .prose h3 + * { margin-top: .7em; }
.prose p { text-wrap: pretty; }
.prose strong { font-weight: 600; }
.prose a { color: var(--pale); text-decoration-color: var(--faint); text-underline-offset: .18em; }
.prose a:hover { text-decoration-color: var(--pale); }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: .4em; }

/* ---------- stills: hard-edged, in-column, 1px rule, mono caption ---------- */
.still { margin: 2em 0; }
.still img { width: 100%; background: var(--sky0); }
.still figcaption, .cap {
  margin-top: .6rem; padding-top: .5rem; border-top: 1px solid var(--line);
  font-family: var(--mono); font-size: .72rem; line-height: 1.55; letter-spacing: .04em; color: var(--faint);
}

/* ---------- instruments: display numerals over mono labels, rules not cards ---------- */
.instrument {
  margin: 2em 0; padding: 1rem 0 1.1rem;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  font-family: var(--mono); font-size: .8rem; line-height: 1.6; color: var(--dim);
}
.instrument .num { display: block; font-family: var(--display); font-weight: 600; font-size: 2.2rem; line-height: 1; letter-spacing: .03em; text-transform: uppercase; color: var(--pale); }
.instrument .lab { display: block; margin-top: .45rem; font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.instrument .note { display: block; margin-top: .6rem; }
.instruments { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 1rem 1.5rem; }
.instruments .instrument { margin: 0; }

/* ---------- centrepiece stage: 100svh, full-bleed, no card ---------- */
.stage {
  position: relative;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  display: grid;
  place-items: center;
}
.stage-art { display: block; width: var(--art-w, min(100vw, calc(100svh - 10rem))); height: auto; overflow: visible; }
.stage-read {
  position: absolute; left: var(--gut); bottom: var(--gut);
  font-family: var(--mono); font-size: .75rem; line-height: 1.55; letter-spacing: .1em; text-transform: uppercase; color: var(--pale);
}
.stage-cap {
  position: absolute; left: var(--gut); right: var(--gut); top: var(--gut); max-width: 26rem;
  font-family: var(--mono); font-size: .7rem; line-height: 1.55; letter-spacing: .04em; color: var(--faint);
}
@media (max-width: 639px) { .stage-read { font-size: .7rem; } }
/* scrubbed version: a tall track holds the stage sticky; JS maps the track's progress to p in [0, 1] */
.track { position: relative; height: var(--track, 400svh); }
.track > .stage { position: sticky; top: 0; }
/* reduced motion: static stacked frames instead of sticky scrub */
.frames { display: none; }

/* ---------- frame-break: 100svh, one line, one amber number ---------- */
.frame-break {
  display: grid;
  place-content: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: 4rem var(--gut);
  text-align: center;
}
.frame-break p, .fb-line {
  max-width: 15em;
  margin: 0 auto;
  font-family: var(--display); font-weight: 600;
  font-size: clamp(2.2rem, 7vw, 5.5rem);
  line-height: .95; letter-spacing: .015em; text-transform: uppercase; text-wrap: balance;
  color: var(--pale);
}
.fb-num { color: var(--amber); font-weight: 600; }
.frame-break .fb-sub {
  max-width: 34rem; margin-top: 1.4rem;
  font-family: var(--mono); font-weight: 400; font-size: .8rem; line-height: 1.6; letter-spacing: .1em; color: var(--dim);
}

/* ---------- the Short: click-to-load YouTube facade ---------- */
.short-facade { margin: 2.4em auto; max-width: 20rem; }
.short-frame { position: relative; aspect-ratio: 9 / 16; overflow: hidden; background: var(--sky0); }
.short-frame img, .short-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; }
.short-play { position: absolute; inset: 0; display: grid; place-items: center; text-decoration: none; cursor: pointer; }
.short-play span {
  display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%;
  background: var(--pale);
  transition: transform .35s cubic-bezier(.34, 1.56, .64, 1);
}
.short-play:hover span, .short-play:focus-visible span { transform: scale(1.1); }
.short-play:focus-visible { outline: 2px solid var(--pale); outline-offset: -4px; }
.short-play svg { width: 26px; height: 26px; margin-left: 5px; fill: var(--void); }
.short-facade figcaption {
  margin-top: .6rem; padding-top: .5rem; border-top: 1px solid var(--line);
  font-family: var(--mono); font-size: .72rem; letter-spacing: .06em; color: var(--faint);
}
.short-facade figcaption a { color: var(--dim); }

/* ---------- footer with prev / next ---------- */
.cd-foot {
  max-width: 72rem; margin: clamp(1rem, 4vh, 2.5rem) auto 0; padding: 0 var(--gut) 3rem;
  font-family: var(--mono); font-size: .75rem; letter-spacing: .1em; color: var(--faint);
}
.pn { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.pn a, .pn span.pn-none { display: block; padding: 1.4rem 0; text-decoration: none; color: var(--faint); }
.pn a + a, .pn span + a, .pn a + span { padding-left: 1rem; border-left: 1px solid var(--line); }
.pn .pn-next { text-align: right; padding-right: 0; }
.pn small { display: block; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; }
.pn b {
  display: block; margin-top: .45rem;
  font-family: var(--display); font-weight: 600; font-size: clamp(1.4rem, 1.1rem + 1.4vw, 2.2rem);
  line-height: 1; letter-spacing: .03em; text-transform: uppercase; color: var(--pale);
}
.pn a:hover b, .pn a:focus-visible b { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .15em; }
.foot-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 1.5rem; margin-top: 2rem; }
.foot-row nav { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.4rem; text-transform: uppercase; }
.foot-row nav a { color: var(--dim); text-decoration: none; border-bottom: 1px solid var(--line); padding-bottom: 2px; }
.foot-row nav a:hover { color: var(--pale); border-color: var(--pale); }
.foot-row nav a.sub { color: var(--void); background: var(--amber); border: 0; padding: .6rem 1.1rem; }
.foot-row nav a.sub:hover { color: var(--void); background: var(--pale); }
.cd-foot > p { margin-top: 2rem; text-wrap: balance; }

/* ---------- motion ---------- */
:focus-visible { outline: 2px solid var(--pale); outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) {
  .sky::before { animation: twinkle 7s ease-in-out infinite; }
  .sky::after { animation: twinkle 11s ease-in-out -4s infinite; }
  @keyframes twinkle { 50% { opacity: .15; } }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .track { height: auto; }
  .track > .stage { position: relative; }
  .track.has-frames > .stage { display: none; }
  .track.has-frames > .frames { display: grid; gap: 2.5rem; padding: 3rem var(--gut); }
}