/* ============================================================================
   Philippinen 2026 · für Noémie
   ----------------------------------------------------------------------------
   TYPE PAIRING — why these two (plus one interloper)

   Fraunces (display). A variable serif with real quirk: its SOFT axis rounds
   the terminals and its WONK axis lets single-storey italic-ish forms slip in.
   Set at SOFT 45 / WONK 1 it reads warm and hand-cut rather than institutional
   — closer to a 1970s travel magazine masthead than to a newspaper. That is
   exactly the register we want: this is a love letter wearing a magazine's
   clothes. Its high optical-size range also means the huge hero setting and
   the 14px kickers can both be tuned, instead of one size being a compromise.

   Karla (body). A grotesque with a slightly awkward, humanist skeleton — the
   flat-sided 'a', the low-slung 'g' — so it stays friendly next to Fraunces
   without competing for personality. It is quiet, but not anonymous the way a
   default UI sans would be, and it holds up in long German compounds.

   Caveat is loaded for exactly one line: the Swiss-German note in the closing
   section. A third family for a single sentence is deliberate — that line is
   spoken, not written, and it should look like it was added by hand after the
   page was already finished.

   ----------------------------------------------------------------------------
   SIGNATURE ELEMENT — the depth-scroll

   Scrolling the page is descending on a dive. Each section carries its own
   background gradient and every gradient ends on the colour the next one
   begins with, so the page reads as one continuous water column from dawn
   light (#EDF4EF) down to the abyss (#061A28). A fixed depth gauge on the
   right edge counts 0 m → 40 m as you go.

   It is built out of chained CSS gradients rather than a JS-driven colour
   layer on purpose: it survives prefers-reduced-motion, a JS failure, any
   page height, and printing. The only JS involved is the gauge readout.
   Everything else in the design is kept quiet so the descent is the one thing
   that performs.
   ========================================================================= */

/* ---------------------------------------------------------------- tokens -- */
:root {
  /* water column, top to bottom */
  --dawn: #f3e9d7;
  --dawn-cool: #edf4ef;
  --aqua-pale: #d3e9e3;
  --aqua: #aedcd5;
  --lagoon-light: #7cc6c4;
  --shelf: #0f5a6e;
  --navy: #0b3247;
  --navy-deep: #0a2438;
  --abyss: #061a28;

  --silver: #c8d3da;
  --coral: #ff8a6b; /* on dark ground */
  --coral-ink: #a93818; /* on light ground */

  --ink-dark: #0b2e47;
  --ink-dark-soft: #204a63;

  --r: 14px;
  --r-lg: 26px;
  --bar: 3.25rem;

  /* distance from the screen edge for everything that carries text or an image:
     ~26px on a phone instead of the 18px it used to be */
  --gutter: clamp(1.6rem, 6.5vw, 2.25rem);

  --sans: 'Karla', 'Avenir Next', 'Segoe UI', system-ui, sans-serif;
  --serif: 'Fraunces', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --hand: 'Caveat', 'Segoe Script', cursive;

  --wonk: 'SOFT' 45, 'WONK' 1;
  --ease: cubic-bezier(0.2, 0.72, 0.16, 1);
}

/* zones set the ink; sections set the ground */
.zone-light {
  --ink: var(--ink-dark);
  --ink-soft: var(--ink-dark-soft);
  --accent: var(--coral-ink);
  --panel: rgba(255, 255, 255, 0.66);
  --panel-line: rgba(11, 46, 71, 0.14);
  --rule: rgba(11, 46, 71, 0.16);
}
.zone-dark {
  --ink: var(--dawn);
  --ink-soft: var(--silver);
  --accent: var(--coral);
  --panel: rgba(255, 255, 255, 0.07);
  --panel-line: rgba(243, 233, 215, 0.18);
  --rule: rgba(243, 233, 215, 0.2);
}

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

html {
  background: var(--abyss);
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--sans);
  font-size: clamp(1rem, 0.955rem + 0.22vw, 1.125rem);
  line-height: 1.65;
  color: var(--ink-dark);
  background: var(--abyss);
  overflow-x: hidden;
}

h1,
h2,
h3,
h4 {
  font-family: var(--serif);
  font-variation-settings: var(--wonk);
  font-weight: 600;
  line-height: 1.06;
  margin: 0;
  text-wrap: balance;
}

p {
  margin: 0 0 1em;
  text-wrap: pretty;
}
p:last-child {
  margin-bottom: 0;
}

a {
  color: inherit;
}

img,
svg {
  display: block;
  max-width: 100%;
}

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

::selection {
  background: #ff8a6b;
  color: #0b2e47;
}

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

.skip {
  position: absolute;
  left: 0.75rem;
  top: -3.5rem;
  z-index: 60;
  padding: 0.6rem 1rem;
  border-radius: 0 0 var(--r) var(--r);
  background: var(--dawn);
  color: var(--ink-dark);
  font-weight: 700;
  text-decoration: none;
  transition: top 0.2s var(--ease);
}
.skip:focus-visible {
  top: 0;
}

.wrap {
  width: min(100% - 2 * var(--gutter), 1180px);
  margin-inline: auto;
}
.wrap--narrow {
  width: min(100% - 2 * var(--gutter), 720px);
}

/* --------------------------------------------------------------- topbar --- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: var(--bar);
  padding-inline: max(0.9rem, calc(var(--gutter) - 0.45rem));
  background: rgba(7, 30, 46, 0.9);
  backdrop-filter: blur(10px) saturate(1.2);
  color: var(--dawn);
  box-shadow: 0 1px 0 rgba(243, 233, 215, 0.14);
}

.topbar-mark {
  flex: none;
  font-family: var(--serif);
  font-variation-settings: var(--wonk);
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  color: var(--dawn);
  white-space: nowrap;
}
.topbar-mark span {
  color: var(--coral);
}
.mark-year {
  display: none;
  color: inherit;
}
@media (min-width: 26rem) {
  .mark-year {
    display: inline;
  }
}

.bar-depth {
  flex: none;
  order: 3;
  margin: 0;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  background: rgba(243, 233, 215, 0.08);
  box-shadow: inset 0 0 0 1px rgba(243, 233, 215, 0.22);
  color: var(--silver);
  line-height: 1;
  white-space: nowrap;
}
.bar-depth b {
  font-family: var(--serif);
  font-variation-settings: var(--wonk);
  font-size: 0.9rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.bar-depth span {
  margin-left: 0.1rem;
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  opacity: 0.8;
}

.topbar-nav {
  order: 2;
  margin-left: auto;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  mask-image: linear-gradient(90deg, transparent, #000 12px, #000 calc(100% - 12px), transparent);
}
.topbar-nav::-webkit-scrollbar {
  display: none;
}
.topbar-nav ul {
  display: flex;
  gap: 0.15rem;
  margin: 0;
  padding: 0.35rem 0.35rem;
  list-style: none;
}
.topbar-nav a {
  display: block;
  padding: 0.3rem 0.62rem;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  white-space: nowrap;
  text-decoration: none;
  color: var(--silver);
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease);
}
.topbar-nav a:hover {
  background: rgba(243, 233, 215, 0.12);
  color: var(--dawn);
}
.topbar-nav a[aria-current='true'] {
  background: rgba(255, 138, 107, 0.18);
  color: #ffd7c8;
  box-shadow: inset 0 0 0 1px rgba(255, 138, 107, 0.45);
}

/* ------------------------------------------------- depth gauge (0→40 m) --- */
/* On phones this is a slim line hugging the very edge — no pill, no number, so
   it can never overlap the text. The readout appears once there is room for it. */
/* Phone: a line down the very edge of the screen that fills from the top as you
   go deeper, with the metre reading in the sticky bar. Costs 8px of gutter and
   never covers a word. The pill version returns on wider screens. */
.gauge {
  position: fixed;
  right: 0;
  top: 0;
  translate: none;
  z-index: 30;
  height: 100vh;
  height: 100svh;
  padding: 0 3px;
  color: var(--dawn);
  pointer-events: none;
}

.gauge-track {
  position: relative;
  width: 3px;
  height: 100%;
  margin-inline: auto;
  background: rgba(243, 233, 215, 0.22);
  border-radius: 2px;
  overflow: hidden;
}
/* the filled part: how deep we already are */
.gauge-track::after {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: calc(var(--p, 0) * 100%);
  background: linear-gradient(rgba(255, 138, 107, 0.55), var(--coral));
  border-radius: 2px;
}

.gauge-tick {
  position: absolute;
  left: 50%;
  top: calc(var(--t) * 100%);
  translate: -50% -50%;
  width: 11px;
  height: 2px;
  background: rgba(6, 26, 40, 0.45);
  z-index: 1;
}
.gauge-tick i {
  position: absolute;
  right: 12px;
  top: 50%;
  translate: 0 -50%;
  font-size: 0.6rem;
  font-style: normal;
  letter-spacing: 0.08em;
  color: rgba(243, 233, 215, 0.55);
  display: none;
}

.gauge-cursor {
  position: absolute;
  left: 50%;
  top: calc(var(--p, 0) * 100%);
  translate: -50% -50%;
  display: grid;
  justify-items: center;
  gap: 1px;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--coral);
  color: #26170f;
  line-height: 1;
  box-shadow: 0 0 0 2px rgba(6, 26, 40, 0.55);
  overflow: hidden;
  z-index: 2;
}
.gauge-cursor b,
.gauge-cursor em {
  display: none;
}
.gauge-cursor b {
  font-family: var(--serif);
  font-variation-settings: var(--wonk);
  font-size: 0.82rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.gauge-cursor em {
  font-size: 0.5rem;
  font-style: normal;
  letter-spacing: 0.1em;
  opacity: 0.8;
}

/* ============================================== das Rätsel vor der Tür ==== */
/* Visually this is the bottom of the dive: the deepest colour on the site.
   Solving the riddle is the ascent — afterwards the page opens in dawn light. */
.gate {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 100;
  place-items: center;
  padding: var(--gutter);
  overflow-y: auto;
  background: radial-gradient(115% 85% at 50% 6%, #10465f, #061a28 58%, #03101a);
  color: var(--dawn);
}
.is-locked .gate,
.gate.is-closing {
  display: grid;
}
.gate.is-closing {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.55s var(--ease);
}
/* while locked, the page underneath is not merely invisible — it is gone */
.is-locked .topbar,
.is-locked main,
.is-locked .foot,
.is-locked .gauge {
  display: none;
}
.is-locked,
.is-locked body {
  overflow: hidden;
}

.gate-card {
  --ink-soft: var(--silver);
  --accent: var(--coral);
  width: min(100%, 32rem);
  margin: auto;
  text-align: center;
}
.gate-motif {
  width: 7.5rem;
  height: auto;
  margin: 0 auto 1.4rem;
  color: var(--coral);
}
.gate-eyebrow {
  margin: 0 0 0.6rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--coral);
}
.gate h1 {
  font-family: var(--serif);
  font-variation-settings: var(--wonk);
  font-size: clamp(1.9rem, 1.2rem + 3.4vw, 2.9rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0 0 1.4rem;
}
.gate-riddle {
  margin: 0 0 1.5rem;
  font-family: var(--serif);
  font-variation-settings: 'SOFT' 45, 'WONK' 0;
  font-size: clamp(1.05rem, 0.95rem + 0.7vw, 1.3rem);
  font-weight: 300;
  line-height: 1.55;
  color: var(--dawn);
  text-wrap: balance;
}
.gate-riddle b {
  font-weight: 600;
}

/* the five sub-riddles: left-aligned so they are readable, block centred */
.gate-list {
  display: grid;
  gap: 0.6rem;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 1.9rem;
  padding: 0;
  list-style: none;
  text-align: left;
}
.gate-list li {
  position: relative;
  padding-left: 3.5rem;
  font-size: 0.97rem;
  line-height: 1.45;
  color: var(--dawn);
}
/* the depth next to each question — the actual key to the puzzle */
.gate-depth {
  position: absolute;
  left: 0;
  top: 0.02rem;
  display: inline-grid;
  place-items: center;
  min-width: 2.7rem;
  padding: 0.16rem 0.35rem;
  border-radius: 999px;
  background: rgba(255, 138, 107, 0.14);
  box-shadow: inset 0 0 0 1px rgba(255, 138, 107, 0.4);
  color: #ffd7c8;
  font-family: var(--serif);
  font-variation-settings: var(--wonk);
  font-size: 0.8rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.gate-row {
  display: grid;
  gap: 0.5rem;
}
.gate-input {
  width: 100%;
  padding: 0.85rem 1rem;
  border: 0;
  border-radius: var(--r);
  background: rgba(243, 233, 215, 0.1);
  box-shadow: inset 0 0 0 2px rgba(243, 233, 215, 0.28);
  color: var(--dawn);
  font: inherit;
  text-align: center;
}
.gate-input::placeholder {
  color: rgba(200, 211, 218, 0.6);
}
.gate-input:focus-visible {
  outline: 3px solid var(--coral);
  outline-offset: 2px;
}
.gate-go {
  padding: 0.85rem 1.4rem;
  border: 0;
  border-radius: var(--r);
  background: var(--coral);
  color: #26170f;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background-color 0.25s var(--ease);
}
.gate-go:hover {
  background: #ffa287;
}

.gate-feedback {
  min-height: 1.5em;
  margin: 1rem 0 0;
  font-size: 0.92rem;
  color: var(--coral);
}
.gate-feedback.is-ok {
  color: #9fe3c4;
}

.gate-hint-btn,
.gate-giveup {
  margin: 0.5rem 0 0;
  padding: 0.4rem 0.2rem;
  border: 0;
  background: none;
  color: var(--silver);
  font: inherit;
  font-size: 0.85rem;
  text-decoration: underline;
  text-decoration-color: rgba(200, 211, 218, 0.45);
  text-underline-offset: 3px;
  cursor: pointer;
}
.gate-hint-btn:hover,
.gate-giveup:hover {
  color: var(--dawn);
}
.gate-hint-btn[hidden],
.gate-giveup[hidden] {
  display: none;
}
.gate-hint {
  margin: 0.7rem 0 0;
  font-size: 0.9rem;
  color: var(--silver);
}
.gate-giveup {
  display: block;
  margin: 1.6rem auto 0;
  font-size: 0.8rem;
  opacity: 0.75;
}

@media (min-width: 30rem) {
  .gate-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}

/* -------------------------------------------------------- shared blocks --- */
.section {
  position: relative;
  padding-block: clamp(4rem, 10vw, 8.5rem);
  color: var(--ink);
  scroll-margin-top: var(--bar);
}

.kicker {
  margin: 0 0 0.7rem;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--accent);
}

.section-head {
  max-width: 42ch;
  margin-bottom: clamp(2.2rem, 5vw, 3.6rem);
}
.section-head--center {
  max-width: 34ch;
  margin-inline: auto;
  text-align: center;
}
.section-head h2 {
  font-size: clamp(2.05rem, 1.2rem + 4.6vw, 3.7rem);
  letter-spacing: -0.015em;
}
.lead {
  margin-top: 1.1rem;
  font-size: 1.08em;
  color: var(--ink-soft);
}
.chapter-meta {
  margin: 0.9rem 0 0;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* frames: one grid cell for the art, one row for the caption -------------- */
.frame {
  --ar: 4 / 3;
  display: grid;
  grid-template-rows: auto auto;
  margin: 0;
}
.frame > .art,
.frame > .shot {
  grid-area: 1 / 1;
  width: 100%;
  aspect-ratio: var(--ar);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--shelf);
  box-shadow: 0 18px 40px -26px rgba(4, 18, 28, 0.75);
}
.frame > .shot {
  position: relative;
  z-index: 1;
}
.shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.frame.has-photo > .art {
  visibility: hidden;
}
.frame > figcaption {
  grid-row: 2;
  margin-top: 0.8rem;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--ink-soft);
}
.frame--tall {
  --ar: 3 / 4;
}
.frame--wide {
  --ar: 16 / 10;
}
.frame--square {
  --ar: 1 / 1;
}

/* gentle parallax lives on the inner art so the caption is never clipped */
[data-parallax] .art use,
[data-parallax] .shot img {
  transform: translateY(var(--py, 0px)) scale(1.09);
  will-change: transform;
}

/* reveal on scroll --------------------------------------------------------- */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.75s var(--ease), transform 0.75s var(--ease);
}
.js [data-reveal].is-in {
  opacity: 1;
  transform: none;
}

/* ============================================================== 1 · HERO == */
.hero {
  position: relative;
  display: grid;
  align-items: end;
  min-height: 100vh;
  min-height: 100svh;
  padding-block: calc(var(--bar) + 2rem) clamp(2.5rem, 7vh, 4.5rem);
  overflow: hidden;
  background: var(--ink-dark);
  color: var(--ink-dark);
}
.hero-art {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.hero-art .art,
.hero-art .shot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.hero-art .shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-art.has-photo .art {
  visibility: hidden;
}
.hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(243, 233, 215, 0.08) 0%,
    rgba(243, 233, 215, 0.42) 38%,
    rgba(243, 233, 215, 0.82) 62%,
    rgba(240, 245, 240, 0.97) 100%
  );
}

.hero-body {
  position: relative;
  z-index: 2;
  width: min(100% - 2 * var(--gutter), 1180px);
  margin-inline: auto;
}

.eyebrow {
  margin: 0 0 0.9rem;
  font-family: var(--sans);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--coral-ink);
}

.hero h1 {
  font-size: clamp(2.6rem, 1rem + 10.4vw, 6.4rem);
  font-weight: 500;
  letter-spacing: -0.028em;
  line-height: 0.98;
  max-width: 20ch;
}
.hero h1 span {
  display: block;
}
.hero h1 span:last-child {
  font-weight: 700;
  font-variation-settings: 'SOFT' 60, 'WONK' 1;
}

.hero-dates {
  margin: 1.1rem 0 0;
  font-family: var(--serif);
  font-variation-settings: var(--wonk);
  font-size: clamp(1.05rem, 0.9rem + 1.1vw, 1.45rem);
  color: var(--ink-dark);
}
.hero-dates time {
  white-space: nowrap;
}

.hero-lead {
  margin: 1rem 0 0;
  max-width: 46ch;
  color: var(--ink-dark-soft);
}

/* countdown --------------------------------------------------------------- */
.countdown {
  margin-top: clamp(1.6rem, 4vw, 2.4rem);
}
.countdown-label {
  margin: 0 0 0.6rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-dark-soft);
}
.cd-units {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 8.5rem));
  gap: 0.5rem;
}
.cd-unit {
  padding: 0.55rem 0.85rem 0.6rem;
  border-radius: var(--r);
  background: rgba(255, 255, 255, 0.58);
  box-shadow: inset 0 0 0 1px rgba(11, 46, 71, 0.12);
  text-align: center;
}
.cd-unit b {
  display: block;
  font-family: var(--serif);
  font-variation-settings: var(--wonk);
  font-size: clamp(1.7rem, 1.2rem + 2.2vw, 2.5rem);
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--ink-dark);
}
.cd-unit span {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-dark-soft);
}
.countdown.is-now .cd-units {
  display: none;
}
.cd-arrived {
  margin: 0;
  font-family: var(--serif);
  font-variation-settings: var(--wonk);
  font-size: 1.3rem;
}

.hero-cue {
  margin: clamp(1.6rem, 4vw, 2.4rem) 0 0;
}
.hero-cue a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1.1rem;
  border-radius: 999px;
  background: var(--ink-dark);
  color: var(--dawn);
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-decoration: none;
  transition: background-color 0.25s var(--ease);
}
.hero-cue a:hover {
  background: #14405c;
}
.hero-cue span {
  transition: transform 0.25s var(--ease);
}
.hero-cue a:hover span {
  transform: translateY(2px);
}

/* orchestrated hero load-in */
.js .hero-in > * {
  opacity: 0;
  animation: rise 1s var(--ease) forwards;
}
.js .hero-in > *:nth-child(1) {
  animation-delay: 0.15s;
}
.js .hero-in > *:nth-child(2) {
  animation-delay: 0.28s;
}
.js .hero-in > *:nth-child(3) {
  animation-delay: 0.44s;
}
.js .hero-in > *:nth-child(4) {
  animation-delay: 0.54s;
}
.js .hero-in > *:nth-child(5) {
  animation-delay: 0.66s;
}
.js .hero-in > *:nth-child(6) {
  animation-delay: 0.8s;
}
@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(26px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ========================================= Zwischenstand: Tage zählen ==== */
/* Sitzt zwischen Titelbild und Route und trägt dieselbe Farbe wie der Anfang
   der Route, damit die Tiefenkette lückenlos bleibt. */
.tally-band {
  padding-block: clamp(3.5rem, 8vw, 6rem);
  background: var(--dawn-cool);
  color: var(--ink);
}
.tally-band .section-head {
  margin-bottom: clamp(1.8rem, 4vw, 2.6rem);
}

.tally {
  display: grid;
  gap: clamp(1.4rem, 3.5vw, 2rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.tally-item {
  display: grid;
  justify-items: center;
  gap: 0.3rem;
  padding: clamp(1.3rem, 3.5vw, 1.9rem) 1.2rem;
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, 0.6);
  box-shadow: inset 0 0 0 1px var(--panel-line);
  text-align: center;
}
.tally-num {
  font-family: var(--serif);
  font-variation-settings: 'SOFT' 45, 'WONK' 1;
  font-size: clamp(3.2rem, 2rem + 6vw, 5rem);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--ink-dark);
}
.tally-label {
  font-family: var(--serif);
  font-variation-settings: var(--wonk);
  font-size: 1.15rem;
  font-weight: 600;
}
.tally-note {
  max-width: 34ch;
  margin-top: 0.35rem;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--ink-soft);
}
.tally-done {
  font-size: 1.6rem;
  line-height: 1.2;
}
.tally-foot {
  max-width: 46ch;
  margin: clamp(1.8rem, 4vw, 2.6rem) auto 0;
  font-size: 0.98rem;
  color: var(--ink-soft);
  text-align: center;
}

@media (min-width: 40rem) {
  .tally {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ============================================================= 2 · ROUTE == */
.route {
  background: linear-gradient(to bottom, var(--dawn-cool), var(--aqua-pale));
}

.route-grid {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
}

.route-map {
  position: relative;
  padding: clamp(0.5rem, 1.6vw, 1rem);
  border-radius: var(--r-lg);
  background: radial-gradient(120% 80% at 60% 20%, rgba(255, 255, 255, 0.7), rgba(174, 220, 213, 0.35));
  box-shadow: inset 0 0 0 1px rgba(11, 46, 71, 0.08);
}
.map-figure {
  margin: 0;
}
/* fixed aspect box so the whole archipelago is always visible, never cropped;
   it fills its column completely — no empty frame around the map */
.map-stack {
  position: relative;
  width: 100%;
  aspect-ratio: 865 / 1355;
}
.map-base {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--r);
  background: var(--aqua-pale);
}
.map-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  font-family: var(--sans);
  overflow: visible;
}
.map-credit {
  margin: 0.6rem 0.2rem 0;
  font-size: 0.68rem;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
}
.map-credit a {
  text-decoration-color: var(--accent);
}

/* the international legs only get a short feeder stub — the full itinerary is
   in the flight list, so the map stays about the archipelago */
.route-zurich {
  fill: none;
  stroke: #12495e;
  stroke-opacity: 0.7;
  stroke-width: 4.5;
  stroke-dasharray: 5 14;
  stroke-linecap: round;
}

.route-base {
  fill: none;
  stroke: #f8f4ea;
  stroke-opacity: 0.8;
  stroke-width: 7;
  stroke-dasharray: 10 15;
  stroke-linecap: round;
  filter: drop-shadow(0 0 2px rgba(4, 20, 30, 0.55));
}
.route-draw {
  fill: none;
  stroke: var(--coral-ink);
  stroke-width: 6;
  stroke-linecap: round;
  filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.75));
}
.route-home {
  fill: none;
  stroke: #12495e;
  stroke-opacity: 0.75;
  stroke-width: 4.5;
  stroke-dasharray: 5 16;
  stroke-linecap: round;
  transition: opacity 0.6s var(--ease);
}

.map-stop text {
  font-size: 27px;
  font-weight: 700;
  letter-spacing: 0.01em;
  fill: #0b2e47;
  paint-order: stroke;
  stroke: #f8f4ea;
  stroke-width: 6;
  stroke-linejoin: round;
  opacity: 0.55;
  transition: opacity 0.5s var(--ease);
}
.map-stop .map-mode {
  font-size: 21px;
  font-weight: 500;
  fill: #204a63;
}
.map-stop .dot {
  fill: #f8f4ea;
  stroke: #0b2e47;
  stroke-width: 6;
  transition: fill 0.45s var(--ease), stroke 0.45s var(--ease);
}
.map-stop .halo {
  fill: var(--coral-ink);
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0.4);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
.map-stop.is-lit text {
  opacity: 1;
}
.map-stop.is-lit .dot {
  fill: var(--coral-ink);
  stroke: #f8f4ea;
}
.map-stop.is-lit .halo {
  opacity: 0.24;
  transform: scale(1);
}

.stops {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: stop;
}
.stops li {
  position: relative;
  padding: 1rem 1.1rem 1.1rem 3.2rem;
  border-radius: var(--r);
  background: rgba(255, 255, 255, 0.35);
  box-shadow: inset 0 0 0 1px rgba(11, 46, 71, 0.07);
  counter-increment: stop;
  transition: background-color 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.stops li::before {
  content: counter(stop);
  position: absolute;
  left: 0.9rem;
  top: 0.95rem;
  display: grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 999px;
  background: rgba(11, 46, 71, 0.1);
  color: var(--ink-dark-soft);
  font-family: var(--serif);
  font-variation-settings: var(--wonk);
  font-size: 0.85rem;
  font-weight: 700;
  transition: background-color 0.5s var(--ease), color 0.5s var(--ease);
}
.stops li.is-lit {
  background: rgba(255, 255, 255, 0.72);
  box-shadow: inset 0 0 0 1px rgba(169, 56, 24, 0.28);
}
.stops li.is-lit::before {
  background: var(--coral-ink);
  color: #fdf3ea;
}
.stops h3 {
  font-size: 1.25rem;
  margin: 0.1rem 0 0.3rem;
}
.stop-when {
  margin: 0;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.stops p:last-child {
  margin: 0;
  font-size: 0.95rem;
  color: var(--ink-soft);
}

/* flight schedule — quiet, factual, no booking-site energy */
.flights {
  margin-top: clamp(2.2rem, 5vw, 3.2rem);
  padding: clamp(1.3rem, 3.5vw, 1.8rem);
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, 0.42);
  box-shadow: inset 0 0 0 1px var(--panel-line);
}
.flights h3 {
  font-size: 1.2rem;
}
.flights-note {
  margin: 0.35rem 0 1.1rem;
  font-size: 0.85rem;
  color: var(--ink-soft);
}
.flight-list {
  display: grid;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.flight-list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    'when no'
    'route time';
  gap: 0.15rem 0.8rem;
  align-items: baseline;
  padding: 0.8rem 0;
  border-top: 1px solid var(--rule);
}
.flight-when {
  grid-area: when;
}
.flight-route {
  grid-area: route;
}
.flight-time {
  grid-area: time;
  text-align: right;
}
.flight-no {
  grid-area: no;
  text-align: right;
}
.flight-list p {
  margin: 0;
}
.flight-when {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.flight-route {
  font-family: var(--serif);
  font-variation-settings: var(--wonk);
  font-size: 1.08rem;
  font-weight: 600;
}
.flight-route span {
  color: var(--accent);
}
.flight-time {
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
}

.flight-no {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
}
.flights-foot {
  margin: 1.1rem 0 0;
  padding-top: 0.9rem;
  border-top: 1px solid var(--rule);
  font-size: 0.86rem;
  color: var(--ink-soft);
}

@media (min-width: 34rem) {
  .flight-list li {
    grid-template-columns: 9.5rem minmax(0, 1fr) auto 5.5rem;
    grid-template-areas: none;
    align-items: baseline;
  }
  .flight-when,
  .flight-route,
  .flight-time,
  .flight-no {
    grid-area: auto;
  }
}

/* =========================================================== 3 · CHAPTER == */
#coron {
  background: linear-gradient(to bottom, var(--aqua-pale), #c2e4de);
}

/* the wrecks — the deepest of the light sections, half the trip happens here */
.wracks {
  background: linear-gradient(to bottom, #c2e4de, var(--aqua));
}
.wracks .frame--wide {
  margin-block: clamp(1.4rem, 3.5vw, 2.4rem);
}
.wracks-note {
  max-width: 52ch;
  margin: clamp(1.6rem, 4vw, 2.4rem) 0 0;
  padding-left: 1rem;
  border-left: 3px solid var(--accent);
  font-size: 0.95rem;
  color: var(--ink-soft);
}

.chapter-intro {
  display: grid;
  gap: clamp(1.8rem, 4vw, 3rem);
  align-items: start;
  margin-bottom: clamp(2.4rem, 6vw, 4rem);
}
.prose {
  max-width: 62ch;
}
.prose .lead {
  margin-top: 0;
  font-family: var(--serif);
  font-variation-settings: var(--wonk);
  font-size: clamp(1.2rem, 1.02rem + 0.85vw, 1.6rem);
  line-height: 1.32;
  color: var(--ink);
}

.photo-grid {
  display: grid;
  gap: clamp(1rem, 2.5vw, 1.6rem);
}

.cards-head {
  margin: clamp(2.6rem, 6vw, 4rem) 0 1.4rem;
  font-size: 1.35rem;
  letter-spacing: -0.01em;
}
.cards-head::after {
  content: '';
  display: block;
  width: 3.2rem;
  height: 3px;
  margin-top: 0.7rem;
  border-radius: 2px;
  background: var(--accent);
}

.cards {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Phone: hairline-separated entries. Eighteen panels stacked in one column read
   as clutter; the same content as a list reads as an article. Panels come back
   as soon as the cards sit side by side. */
.card {
  padding: 1.45rem 0;
  border-top: 1px solid var(--rule);
}
.card:first-child {
  padding-top: 0.4rem;
  border-top: 0;
}
.card:last-child {
  padding-bottom: 0.2rem;
}
.card-tag {
  margin: 0 0 0.55rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--accent);
}
.card h4 {
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
}
.card p:last-child {
  margin: 0;
  font-size: 0.96rem;
  color: var(--ink-soft);
}

/* ========================================================= 4 · CREATURES == */
.creatures {
  background: linear-gradient(to bottom, var(--aqua), var(--lagoon-light));
  scroll-margin-top: var(--bar);
}

.creature-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 72%;
  gap: 1rem;
  margin: 0;
  padding: 0 0 1rem;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  overscroll-behavior-x: contain;
}
.creature {
  scroll-snap-align: start;
}
.creature .frame {
  margin-bottom: 0.85rem;
}
.creature h3 {
  font-size: 1.15rem;
  margin-bottom: 0.35rem;
}
.creature p {
  margin: 0;
  font-size: 0.92rem;
  color: var(--ink-soft);
}
.rail-hint {
  margin: 0.6rem 0 0;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
}

/* ======================================== the descent (light → dark) ====== */
.descent {
  position: relative;
  padding-block: clamp(5rem, 14vw, 10rem);
  color: var(--ink);
  background: linear-gradient(to bottom, var(--lagoon-light), var(--shelf));
  overflow: hidden;
}
.bubbles {
  position: absolute;
  inset: 0;
}
.bubbles span {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: calc(var(--s) * 22px);
  height: calc(var(--s) * 22px);
  border-radius: 999px;
  background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.06) 62%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);
}
.note-panel {
  position: relative;
  max-width: 44ch;
  margin-inline: auto;
  padding: clamp(1.4rem, 4vw, 2.2rem);
  border-radius: var(--r-lg);
  background: var(--dawn);
  color: var(--ink-dark);
  box-shadow: 0 30px 60px -40px rgba(4, 18, 28, 0.9);
  text-align: center;
}
.note-panel .kicker {
  color: var(--coral-ink);
}
.note-panel h2 {
  font-size: clamp(1.5rem, 1.1rem + 2vw, 2.1rem);
  margin-bottom: 0.8rem;
}
.note-panel p:last-child {
  color: var(--ink-dark-soft);
  font-size: 0.98rem;
}

/* ======================================================== 5 · MALAPASCUA == */
#malapascua {
  background: linear-gradient(to bottom, var(--shelf), var(--navy));
}

.spotlight {
  display: grid;
  gap: 0;
  margin: clamp(2rem, 5vw, 3.5rem) 0 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: rgba(4, 18, 28, 0.42);
  box-shadow: inset 0 0 0 1px var(--panel-line), 0 30px 70px -50px #000;
}
.spotlight-art {
  --ar: 16 / 10;
}
.spotlight-art > .art,
.spotlight-art > .shot {
  border-radius: 0;
  box-shadow: none;
}
.spotlight-body {
  padding: clamp(1.4rem, 4vw, 2.6rem);
}
.spotlight-body h3 {
  font-size: clamp(1.6rem, 1.1rem + 2.4vw, 2.6rem);
  letter-spacing: -0.015em;
  margin-bottom: 0.9rem;
}
.spotlight-body p {
  max-width: 52ch;
  color: var(--ink-soft);
}
.spotlight-body p:first-of-type {
  color: var(--ink);
  font-size: 1.05em;
}

/* ========================================================== 6 · TIMELINE == */
.timeline {
  background: linear-gradient(to bottom, var(--navy), var(--navy-deep));
}
.tl {
  position: relative;
  margin: 0;
  padding: 0 0 0 2rem;
  list-style: none;
  counter-reset: day;
}
.tl::before {
  content: '';
  position: absolute;
  left: 0.44rem;
  top: 0.6rem;
  bottom: 0.6rem;
  width: 2px;
  background: linear-gradient(rgba(243, 233, 215, 0.05), var(--rule) 12%, var(--rule) 88%, rgba(243, 233, 215, 0.05));
}
.tl li {
  position: relative;
  padding-bottom: clamp(1.5rem, 3.5vw, 2.4rem);
  counter-increment: day;
}
.tl li:last-child {
  padding-bottom: 0;
}
.tl li::before {
  content: '';
  position: absolute;
  left: -1.72rem;
  top: 0.72rem;
  width: 0.72rem;
  height: 0.72rem;
  border-radius: 999px;
  background: var(--navy-deep);
  box-shadow: 0 0 0 2px var(--ink-soft);
}
.tl li.tl-star::before {
  background: var(--coral);
  box-shadow: 0 0 0 2px var(--coral), 0 0 0 7px rgba(255, 138, 107, 0.16);
}
.tl-when {
  margin: 0 0 0.25rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}
.tl h3 {
  font-size: 1.28rem;
  margin-bottom: 0.35rem;
}
.tl p:last-child {
  margin: 0;
  max-width: 58ch;
  font-size: 0.98rem;
  color: var(--ink-soft);
}
.tl-star h3 {
  font-size: 1.5rem;
}

/* =========================================================== 7 · CLOSING == */
.closing {
  background: linear-gradient(to bottom, var(--navy-deep), var(--abyss));
}

.handnote {
  position: relative;
  max-width: 34rem;
  margin: 0 auto clamp(3rem, 8vw, 5rem);
  padding: clamp(1.8rem, 5vw, 3rem) clamp(1.4rem, 5vw, 3rem) clamp(1.6rem, 4vw, 2.4rem);
  border-radius: 4px 22px 6px 20px;
  background: linear-gradient(170deg, #fbf4e6, var(--dawn));
  color: var(--ink-dark);
  box-shadow: 0 40px 70px -45px #000, 0 2px 0 rgba(255, 255, 255, 0.5) inset;
  rotate: -1.1deg;
  text-align: center;
}
.handnote::before {
  /* the piece of tape */
  content: '';
  position: absolute;
  top: -0.7rem;
  left: 50%;
  translate: -50% 0;
  width: 5.5rem;
  height: 1.4rem;
  border-radius: 2px;
  background: rgba(255, 138, 107, 0.42);
  box-shadow: inset 0 0 0 1px rgba(169, 56, 24, 0.16);
}
.handnote-motif {
  width: 8.5rem;
  height: auto;
  margin: 0 auto 1.1rem;
  color: var(--coral-ink);
}
.handnote blockquote {
  margin: 0;
}
.handnote blockquote p {
  margin: 0;
  font-family: var(--hand);
  font-size: clamp(1.75rem, 1.1rem + 4.4vw, 2.9rem);
  font-weight: 600;
  line-height: 1.2;
  color: #17384c;
  text-wrap: balance;
}
.handnote figcaption {
  margin-top: 1.5rem;
  padding-top: 1.1rem;
  border-top: 1px dashed rgba(11, 46, 71, 0.2);
}
.handnote-names {
  display: block;
  font-family: var(--serif);
  font-variation-settings: var(--wonk);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--ink-dark);
}
.handnote-dates {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-dark-soft);
}

.pack {
  padding: clamp(1.5rem, 4vw, 2.2rem);
  border-radius: var(--r-lg);
  background: var(--panel);
  box-shadow: inset 0 0 0 1px var(--panel-line);
}
.pack h3 {
  font-size: 1.4rem;
  margin-bottom: 0.4rem;
}
.pack-intro {
  margin: 0 0 1.2rem;
  font-size: 0.88rem;
  color: var(--ink-soft);
}
.pack-list {
  display: grid;
  gap: 0.15rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pack-list label {
  display: flex;
  gap: 0.8rem;
  align-items: flex-start;
  padding: 0.6rem 0.5rem;
  border-radius: var(--r);
  cursor: pointer;
  transition: background-color 0.2s var(--ease);
}
.pack-list label:hover {
  background: rgba(243, 233, 215, 0.07);
}
.pack-list input {
  flex: none;
  appearance: none;
  width: 1.4rem;
  height: 1.4rem;
  margin: 0.1rem 0 0;
  border-radius: 6px;
  background: rgba(243, 233, 215, 0.1);
  box-shadow: inset 0 0 0 2px var(--ink-soft);
  cursor: pointer;
  transition: background-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.pack-list input:checked {
  background: var(--coral);
  box-shadow: inset 0 0 0 2px var(--coral);
}
.pack-list input:checked::after {
  content: '';
  display: block;
  width: 0.42rem;
  height: 0.78rem;
  margin: 0.16rem auto 0;
  border-right: 3px solid #26170f;
  border-bottom: 3px solid #26170f;
  rotate: 40deg;
}
.pack-list input:checked + span {
  color: var(--ink-soft);
  text-decoration: line-through;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
}
.pack-list span {
  font-size: 0.98rem;
  line-height: 1.45;
}
.pack-note {
  min-height: 1.4em;
  margin: 1rem 0 0;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  color: var(--accent);
}

/* ============================================================== footer === */
.foot {
  padding: clamp(2.5rem, 6vw, 4rem) 0 clamp(2.5rem, 6vw, 3.5rem);
  background: var(--abyss);
  color: var(--ink-soft);
  text-align: center;
}
.foot p {
  margin: 0;
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.foot-small {
  margin-top: 0.6rem !important;
  letter-spacing: 0.04em;
  text-transform: none;
  opacity: 0.72;
}
.foot-small span {
  color: var(--coral);
}
.foot a {
  color: inherit;
}

/* image attributions — required by the CC licences, kept out of the way */
.credits {
  max-width: 46rem;
  margin: 2rem auto 0;
  padding: 0.9rem 1.1rem;
  border-radius: var(--r);
  background: rgba(255, 255, 255, 0.04);
  box-shadow: inset 0 0 0 1px rgba(243, 233, 215, 0.1);
  text-align: left;
}
.credits summary {
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.credits > p {
  margin: 0.9rem 0 0.7rem;
  font-size: 0.8rem;
  line-height: 1.55;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-soft);
}
.credits ul {
  display: grid;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.credits li {
  font-size: 0.76rem;
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-soft);
}
.credits b {
  color: var(--ink);
  font-weight: 700;
}
.credits a {
  text-decoration-color: var(--accent);
  text-underline-offset: 2px;
}

.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* ============================================================ responsive == */
@media (min-width: 34rem) {
  .photo-grid {
    grid-template-columns: 1fr 1fr;
  }
  .frame--wide {
    grid-column: 1 / -1;
  }
  .photo-grid--two .frame--wide {
    grid-column: auto;
  }
  .cd-units {
    grid-template-columns: repeat(4, minmax(0, 6.6rem));
  }
}

@media (min-width: 48rem) {
  :root {
    --bar: 3.6rem;
  }
  .creature-rail {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    grid-template-columns: repeat(2, 1fr);
    overflow: visible;
    scroll-snap-type: none;
    gap: clamp(1rem, 2.5vw, 1.7rem);
  }
  .rail-hint {
    display: none;
  }
  .cards {
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(0.85rem, 2vw, 1.25rem);
  }
  .card,
  .card:first-child,
  .card:last-child {
    padding: 1.15rem 1.25rem 1.3rem;
    border-top: 0;
    border-radius: var(--r-lg);
    background: var(--panel);
    box-shadow: inset 0 0 0 1px var(--panel-line);
  }
  .tl {
    padding-left: 2.6rem;
  }
}

@media (min-width: 48rem) {
  .bar-depth {
    display: none;
  }
  .gauge {
    right: max(0.35rem, env(safe-area-inset-right));
    top: 50%;
    translate: 0 -50%;
    height: min(44vh, 360px);
    padding: 0.9rem 0.45rem;
    border-radius: 999px;
    background: rgba(6, 26, 40, 0.5);
    backdrop-filter: blur(6px);
  }
  .gauge-track {
    width: 2px;
    background: linear-gradient(rgba(243, 233, 215, 0.15), rgba(243, 233, 215, 0.45));
    overflow: visible;
  }
  .gauge-track::after {
    display: none;
  }
  .gauge-tick {
    width: 9px;
    height: 1px;
    background: rgba(243, 233, 215, 0.5);
  }
  .gauge-cursor {
    width: auto;
    height: auto;
    padding: 0.28rem 0.3rem;
    box-shadow: none;
    overflow: visible;
  }
  .gauge-cursor b,
  .gauge-cursor em {
    display: block;
  }
}

@media (min-width: 62rem) {
  .gauge-tick i {
    display: block;
  }
  .gauge {
    padding-inline: 0.5rem;
  }
  .route-grid {
    grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
    align-items: center;
  }
  .chapter-intro {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.75fr);
  }
  .creature-rail {
    grid-template-columns: repeat(4, 1fr);
  }
  .cards {
    grid-template-columns: repeat(3, 1fr);
  }
  .spotlight {
    grid-template-columns: 1.1fr 0.9fr;
    align-items: stretch;
  }
  .spotlight-art {
    --ar: auto;
  }
  .spotlight-art > .art,
  .spotlight-art > .shot {
    height: 100%;
    aspect-ratio: auto;
    min-height: 26rem;
  }
  .section-head h2 {
    max-width: 24ch;
  }
}

@media (min-width: 78rem) {
  .gauge {
    right: 1.1rem;
  }
}

/* ------------------------------------------------------- reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  .js [data-reveal],
  .js .hero-in > * {
    opacity: 1 !important;
    transform: none !important;
  }
  [data-parallax] .art use,
  [data-parallax] .shot img {
    transform: none !important;
    will-change: auto;
  }
  .map-stop text,
  .map-stop .dot,
  .map-stop .halo,
  .route-home {
    opacity: 1;
  }
  .map-stop .halo {
    opacity: 0.18;
    transform: scale(1);
  }
  .handnote {
    rotate: none;
  }
}

/* -------------------------------------------------------------- printing -- */
@media print {
  .topbar,
  .gauge,
  .hero-cue,
  .rail-hint {
    display: none;
  }
  body,
  .section,
  .descent,
  .foot {
    background: #fff !important;
    color: #000 !important;
  }
  .creature-rail {
    grid-auto-flow: row;
    overflow: visible;
  }
}