:root {
  --paper: #f4eede;
  --paper-2: #ebe1cd;
  --ink: #221c14;
  --ink-soft: #4a4034;
  --oxblood: #963414;
  --gold: #a9772a;
  --gold-bright: #d49a3a;
  --line: rgba(34, 28, 20, 0.16);
  --dark: #1a150e;
  --darker: #120e08;
  --display: "Playfair Display", Georgia, serif;
  --body: "Spectral", Georgia, serif;
  --label: "Barlow Condensed", system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }

/* paper fiber, a faint felted weave under the parchment sections. soft long
   strands of low frequency noise, so the parchment feels like a sheet rather
   than a flat fill. felt, not seen. */
.reading, .signatures, .nehru, .book, .archive, .press, .stats-band, .dangers, .quote-scene, .mapsec {
  position: relative;
}
.reading::before, .signatures::before, .nehru::before, .book::before, .archive::before, .press::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.5;
  mix-blend-mode: multiply;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)' opacity='0.16'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}
.reading > *, .signatures > *, .nehru > *, .book > *, .archive > *, .press > * { position: relative; z-index: 1; }

body {
  font-family: var(--body);
  font-size: 19px;
  line-height: 1.72;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  /* oldstyle figures read as period correct in running prose */
  font-feature-settings: "onum" 1, "liga" 1, "kern" 1;
  font-variant-numeric: oldstyle-nums proportional-nums;
}
img { max-width: 100%; display: block; }

/* the animated counters use tabular lining figures so the width never shifts as
   the digits roll, otherwise they jitter on every frame */
.counter, .stat-v {
  font-feature-settings: "lnum" 1, "tnum" 1;
  font-variant-numeric: lining-nums tabular-nums;
  font-variant-ligatures: none;
}

.progress {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 3px;
  background: linear-gradient(90deg, var(--oxblood), var(--gold-bright));
  transform: scaleX(0);
  transform-origin: left;
  z-index: 50;
}

/* the chapter rail, a slim vertical index pinned to the right edge and centred,
   one gold dash per movement, the active chapter naming itself beside its tick */
.chapter-rail {
  position: fixed;
  right: 1.4rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 45;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.95rem;
}
.rail-tick {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.6rem;
  background: transparent;
  border: 0;
  padding: 0.2rem 0;
  cursor: pointer;
}
.rail-dash {
  display: block;
  width: 16px;
  height: 1px;
  background: var(--gold);
  opacity: 0.45;
  transition: width 0.3s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.3s ease, background-color 0.3s ease;
}
.rail-label {
  font-family: var(--label);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.7rem;
  color: var(--gold-bright);
  white-space: nowrap;
  opacity: 0;
  transform: translateX(6px);
  transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);
  pointer-events: none;
}
.rail-tick:hover .rail-dash { width: 26px; opacity: 0.85; }
.rail-tick:hover .rail-label { opacity: 0.7; transform: translateX(0); }
.rail-tick.on .rail-dash { width: 28px; opacity: 1; background: var(--gold-bright); }
.rail-tick.on .rail-label { opacity: 1; transform: translateX(0); }
@media (max-width: 900px) { .chapter-rail { display: none; } }
@media (pointer: coarse) { .chapter-rail { display: none; } }

.kicker {
  font-family: var(--label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 0.82rem;
  color: var(--oxblood);
  margin-bottom: 1.3em;
  position: relative;
  padding-left: 2.6em;
}
.kicker::before {
  content: "";
  position: absolute;
  left: 0; top: 0.62em;
  width: 2em; height: 1px;
  background: currentColor;
  opacity: 0.7;
}
.kicker.light { color: rgba(247, 240, 226, 0.8); }

.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--dark);
}
.hero-media {
  position: absolute;
  inset: -4%;
  background-size: cover;
  background-position: center 38%;
  filter: sepia(0.18) contrast(1.04) brightness(0.98) saturate(0.9);
  animation: kenburns 26s ease-in-out infinite alternate;
}
@keyframes kenburns { from { transform: scale(1.02); } to { transform: scale(1.1); } }
.hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(12, 9, 6, 0.93) 0%, rgba(12, 9, 6, 0.34) 44%, rgba(12, 9, 6, 0.12) 70%, rgba(12, 9, 6, 0.5) 100%);
}
.hero-inner {
  position: relative;
  z-index: 2;
  max-width: 980px;
  margin: 0 auto;
  width: 100%;
  padding: 0 6vw 13vh;
}
.hero h1 {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(3.2rem, 9vw, 7.4rem);
  line-height: 0.98;
  color: #faf4e6;
  letter-spacing: -0.025em;
  text-shadow: 0 3px 30px rgba(0, 0, 0, 0.55);
}
.hero-dek {
  margin-top: 0.7em;
  max-width: 40ch;
  font-size: clamp(1.12rem, 2.1vw, 1.45rem);
  font-style: italic;
  color: rgba(247, 240, 226, 0.92);
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.55);
}
.hero-credit {
  position: absolute;
  right: 6vw; bottom: 3vh;
  z-index: 2;
  max-width: 30ch;
  text-align: right;
  font-family: var(--label);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: rgba(247, 240, 226, 0.55);
}
.scrollcue {
  position: absolute;
  left: 50%; bottom: 3vh;
  transform: translateX(-50%);
  z-index: 2;
  font-family: var(--label);
  text-transform: uppercase;
  letter-spacing: 0.3em;
  font-size: 0.72rem;
  color: rgba(247, 240, 226, 0.7);
  animation: bob 2.2s ease-in-out infinite;
}
@keyframes bob { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(6px); } }

.reading {
  max-width: 680px;
  margin: 0 auto;
  padding: clamp(7vh, 11vh, 13vh) 24px;
}
.reading + .reading { padding-top: 0; }

/* hold the running body to a comfortable measure near 64 characters so lines
   never run too wide to track */
.body, .lede, .standfirst, .sig-lead, .archive-sub, .map-sub { max-width: 64ch; }

/* extra air before a big visual beat, so the film breathes before it cuts to a
   full bleed scene, a plate, the globe or the dangers wall */
.reading + .quote-scene,
.reading + .plate,
.reading + .mapsec,
.reading + .dangers,
.reading + .signatures { margin-top: clamp(2vh, 4vh, 6vh); }
.quote-scene + .reading,
.plate + .reading { padding-top: clamp(9vh, 13vh, 16vh); }

/* a quiet chapter divider between two consecutive reading sections, a thin gold
   rule with a centred diamond, the kind a printed travelogue would set. main.js
   inserts the rule, so the reading that follows recovers its top air for rhythm */
.chapter-rule + .reading { padding-top: clamp(4vh, 7vh, 9vh); }
.chapter-rule {
  display: block;
  width: min(680px, calc(100% - 48px));
  margin: clamp(5vh, 8vh, 10vh) auto 0;
  border: 0;
  height: 1.4em;
  position: relative;
}
.chapter-rule::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line) 18%, var(--line) 82%, transparent);
}
.chapter-rule::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 7px; height: 7px;
  transform: translate(-50%, -50%) rotate(45deg);
  background: var(--gold);
  opacity: 0.7;
}

.lede {
  font-size: clamp(1.35rem, 3vw, 1.7rem);
  line-height: 1.54;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.006em;
}
.lede::first-letter {
  font-family: var(--display);
  font-weight: 700;
  font-size: 4.3em;
  float: left;
  line-height: 0.62;
  margin: 0.08em 0.09em 0 -0.02em;
  padding-right: 0.06em;
  color: var(--oxblood);
  letter-spacing: -0.01em;
  font-feature-settings: "lnum" 1;
  font-variant-numeric: lining-nums;
  text-shadow: 0 1px 0 rgba(150, 52, 20, 0.12);
}

.reading h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.9rem, 4.2vw, 2.7rem);
  line-height: 1.12;
  margin: 0.1em 0 0.7em;
  letter-spacing: -0.018em;
}
.body {
  font-size: 1.18rem;
  line-height: 1.72;
  color: #2c2519;
  margin-bottom: 1.1em;
}
.body em { font-style: italic; color: var(--oxblood); }

.riders {
  display: grid;
  gap: 1.1em;
  margin: 0.4em 0 2.2em;
  padding: 1.4em 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.rider { display: flex; flex-direction: column; }
.r-name { font-family: var(--display); font-weight: 600; font-size: 1.3rem; }
.r-role { font-size: 1.02rem; color: var(--ink-soft); font-style: italic; }
.rider.mine .r-name { color: var(--oxblood); }
.rider.mine .r-name::after { content: " ·"; color: var(--gold); }

/* pull quotes hang left, with an oversized opening quotation mark set into the
   margin, the way a fine press would set a marginal quote. left aligned, never
   centred. */
.pullquote {
  margin: 2.6em 0;
  max-width: 38rem;
  text-align: left;
  position: relative;
  padding-left: 1.5em;
}
.pullquote::before {
  content: "\201C";
  position: absolute;
  left: 0;
  top: 0.42em;
  font-family: var(--display);
  font-weight: 700;
  font-style: normal;
  font-size: 2.6em;
  line-height: 0;
  color: var(--gold);
  opacity: 0.5;
  pointer-events: none;
}
.pullquote span {
  font-family: var(--display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.5rem, 3.1vw, 2.05rem);
  line-height: 1.36;
  color: var(--oxblood);
  text-wrap: pretty;
}
.pullquote cite { text-align: left; }

/* every pull quote sits the same way, aligned at the column with the hanging
   mark in a small gutter, so the page reads cleanly and never looks staggered. */

/* every pull quote sits the same way, left aligned at the column with the
   hanging mark in the margin, so the page reads cleanly and never looks broken */
.pullquote cite, .big-quote cite, .nehru-quote cite {
  display: block;
  margin-top: 1.1em;
  font-family: var(--label);
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.78rem;
  color: var(--ink-soft);
}

.plate { background: var(--darker); padding: clamp(4vh, 7vh, 9vh) 6vw; text-align: center; }
/* two framed prints in a row share one dark field rather than doubling the gap,
   so they read as a facing spread */
.plate + .plate { padding-top: 0; }
.plate .frame {
  display: inline-block;
  overflow: hidden;
  line-height: 0;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
  max-width: 100%;
}
.plate .frame > img {
  max-height: 78vh;
  width: auto;
  transform: scale(1.04);
  filter: sepia(0.12) contrast(1.04);
}
/* a cropped plate sizes its frame to a fixed width and lets the crop window set
   the height through its aspect ratio, so the plate img rule above never applies */
.plate .frame:has(.crop) { display: block; width: min(860px, 92vw); margin: 0 auto; }
.plate figcaption {
  margin: 1.6em auto 0;
  max-width: 52ch;
  font-family: var(--label);
  font-size: 0.94rem;
  letter-spacing: 0.03em;
  color: rgba(247, 240, 226, 0.66);
}

.dangers {
  background: var(--dark);
  padding: clamp(8vh, 12vh, 15vh) 6vw;
  text-align: center;
}
.dangers .kicker { display: inline-block; color: var(--gold); margin-bottom: 1em; }
.dangers-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.8rem, 4.4vw, 3rem);
  line-height: 1.1;
  color: #faf4e6;
  max-width: 18ch;
  margin: 0 auto clamp(4vh, 6vh, 7vh);
  letter-spacing: -0.018em;
}
.peril-grid {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 1px;
  background: rgba(169, 119, 42, 0.28);
  border: 1px solid rgba(169, 119, 42, 0.28);
}
.peril {
  background: var(--dark);
  padding: 2.4em 2em;
  text-align: left;
}
.peril-n {
  font-family: var(--label);
  font-size: 0.9rem;
  letter-spacing: 0.2em;
  color: var(--gold);
}
.peril h3 {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.5rem;
  color: #faf4e6;
  margin: 0.25em 0 0.45em;
}
.peril p { font-size: 1.05rem; line-height: 1.62; color: rgba(247, 240, 226, 0.74); }

.mapsec { background: var(--darker); padding: clamp(8vh, 12vh, 15vh) 5vw; overflow: hidden; }
.map-head { max-width: 760px; margin: 0 auto clamp(2vh, 4vh, 5vh); text-align: center; }
.map-head .kicker { display: inline-block; color: var(--gold); }
.map-head h2 { font-family: var(--display); font-weight: 700; font-size: clamp(1.9rem, 5vw, 3rem); color: #faf4e6; margin-bottom: 0.4em; }
.map-sub { font-size: 1.12rem; font-style: italic; color: rgba(247, 240, 226, 0.66); }
.globe-wrap { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: clamp(1.5rem, 3.5vw, 3.4rem); align-items: center; }
#globe { width: 100%; max-width: 100%; overflow: hidden; cursor: grab; }
#globe:active { cursor: grabbing; }
#globe canvas { display: block; margin: 0 auto; outline: none; max-width: 100%; }
/* the stop list framed as a small itinerary panel, ruled off the globe */
.globe-panel { border-left: 1px solid rgba(169, 119, 42, 0.3); padding-left: 1.2rem; }
.globe-stops {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.1em 0.4em;
  padding: 0.1em 0.3em 0.1em 0;
}
/* the live caption above the itinerary. always names the active or hovered stop
   so the viewer is never lost, set as a small dateline over the list. */
.globe-now {
  border-bottom: 1px solid rgba(169, 119, 42, 0.3);
  padding-bottom: 0.9em;
  margin-bottom: 1em;
}
.globe-now b {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  line-height: 1.1;
  color: var(--gold-bright);
}
.globe-now span {
  display: block;
  margin-top: 0.3em;
  font-family: var(--label);
  letter-spacing: 0.04em;
  font-size: 0.92rem;
  color: rgba(247, 240, 226, 0.7);
}
.stops-cap {
  font-family: var(--label);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.72rem;
  color: var(--gold);
  margin-bottom: 0.9em;
}
.globe-replay {
  margin-top: 1.2rem;
  display: inline-block;
  background: transparent;
  border: 1px solid rgba(169, 119, 42, 0.45);
  color: rgba(247, 240, 226, 0.82);
  font-family: var(--label);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.72rem;
  padding: 0.62em 1.1em;
  cursor: pointer;
  transition: color 0.25s ease, border-color 0.25s ease, background-color 0.25s ease;
}
.globe-replay::before { content: "\21BB"; margin-right: 0.6em; color: var(--gold-bright); }
.globe-replay:hover { color: #faf4e6; border-color: var(--gold-bright); background: rgba(169, 119, 42, 0.12); }
.globe-stops li { cursor: pointer; padding: 0.4em 0.6em; border-left: 2px solid transparent; transition: background-color 0.25s ease, border-color 0.25s ease, padding-left 0.25s cubic-bezier(0.2, 0.7, 0.2, 1); }
.globe-stops li:hover { background: rgba(169, 119, 42, 0.1); padding-left: 0.95em; }
.globe-stops li.on { border-left-color: var(--gold-bright); background: rgba(169, 119, 42, 0.16); padding-left: 0.95em; }
.globe-stops li b, .globe-stops li span { transition: color 0.25s ease; }
.globe-stops li.on b { color: var(--gold-bright); }
.globe-stops b { display: block; font-family: var(--display); font-size: 1rem; color: #faf4e6; }
.globe-stops span { font-family: var(--label); font-size: 0.74rem; letter-spacing: 0.04em; color: rgba(247, 240, 226, 0.6); }
.map-plate .frame img { filter: contrast(1.18) sepia(0.08); }
@media (max-width: 760px) {
  .globe-wrap { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .globe-panel { border-left: 0; border-top: 1px solid rgba(169, 119, 42, 0.3); padding-left: 0; padding-top: 1.3rem; }
}
.globe-tip {
  background: var(--paper);
  color: var(--ink);
  padding: 0.45em 0.7em;
  border-radius: 3px;
  font-family: var(--label);
  font-size: 0.82rem;
  letter-spacing: 0.03em;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55);
}
.globe-tip b { display: block; font-family: var(--display); font-weight: 600; font-size: 1rem; color: var(--oxblood); }
.globe-tip span { color: var(--ink-soft); }

.quote-scene {
  position: relative;
  min-height: 88vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 12vh 8vw;
  overflow: hidden;
  background: var(--dark);
}
/* the archival faces are the point, so the photographs are lifted to read
   clearly. legibility of the white quote comes from a stronger scrim gradient
   and a shadow on the text itself, not from crushing the image into the dark. */
.quote-scene-media {
  position: absolute;
  /* bleed must exceed the parallax drift range in motion.js, or the drift opens a
     dark band at the top or bottom edge of the scene as it scrolls. */
  inset: -12%;
  background-size: cover;
  background-position: center;
  filter: sepia(0.2) contrast(1.04) brightness(0.78) grayscale(0.1);
}
.quote-scene.danger .quote-scene-media { filter: sepia(0.26) contrast(1.06) brightness(0.72) grayscale(0.14); }
/* a deeper, directional scrim, darker top and bottom where the text and cite
   sit, lighter across the middle band so the faces stay visible */
.quote-scene-scrim {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(150% 100% at 50% 50%, rgba(10, 7, 4, 0) 34%, rgba(10, 7, 4, 0.34) 70%, rgba(10, 7, 4, 0.62) 100%),
    linear-gradient(to bottom, rgba(10, 7, 4, 0.5) 0%, rgba(10, 7, 4, 0.12) 30%, rgba(10, 7, 4, 0.12) 64%, rgba(10, 7, 4, 0.58) 100%);
}
.big-quote { position: relative; z-index: 2; max-width: min(820px, 86vw); }
.big-quote span {
  font-family: var(--display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.7rem, 4vw, 3rem);
  line-height: 1.3;
  color: #faf4e6;
  letter-spacing: -0.012em;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.85), 0 6px 34px rgba(0, 0, 0, 0.75);
}
.big-quote cite { color: rgba(247, 240, 226, 0.82); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8); }
.scene-caption {
  position: relative;
  z-index: 2;
  margin-top: 3.5vh;
  max-width: 48ch;
  font-family: var(--label);
  letter-spacing: 0.04em;
  font-size: 0.95rem;
  color: rgba(247, 240, 226, 0.74);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
}

.signatures { background: var(--paper-2); padding: clamp(8vh, 12vh, 15vh) 6vw; }
.sig-grid {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(2rem, 5vw, 5.5rem);
  align-items: center;
}
.sig-photo { margin: 0; }
.sig-photo img { width: 100%; box-shadow: 0 26px 64px rgba(34, 28, 20, 0.34); filter: sepia(0.14) contrast(1.04); }
.sig-photo figcaption { margin-top: 1.1em; font-family: var(--label); font-size: 0.9rem; letter-spacing: 0.02em; color: var(--ink-soft); }
.sig-text h2 { font-family: var(--display); font-weight: 700; font-size: clamp(2.6rem, 6.5vw, 4rem); line-height: 1; margin: 0.1em 0 0.5em; }
.sig-count { color: var(--oxblood); }
.sig-text .body { margin-bottom: 1.5em; }
.sig-list { list-style: none; display: grid; gap: 0.7em; }
.sig-list li {
  font-family: var(--display);
  font-style: italic;
  font-size: 1.22rem;
  padding-left: 1.5em;
  position: relative;
  color: var(--ink);
}
.sig-list li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 0.9em; height: 1px; background: var(--gold); }

.stats-band {
  background: var(--dark);
  padding: clamp(7vh, 10vh, 13vh) 6vw;
  text-align: center;
}
/* the hero number, full width, the headline figure of the whole ride */
.stat-hero { max-width: 1100px; margin: 0 auto clamp(4vh, 6vh, 7vh); }
.stat-hero-v {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(3.6rem, 17vw, 13rem);
  line-height: 0.9;
  color: #faf4e6;
  letter-spacing: -0.03em;
  display: block;
  /* keep the big figure from ever spilling past the viewport on small screens */
  max-width: 100%;
  overflow-wrap: normal;
  text-wrap: balance;
}
.stat-hero-unit { font-weight: 600; letter-spacing: -0.01em; font-size: 0.42em; }
.stat-hero-l {
  display: block;
  margin-top: 0.5em;
  font-family: var(--label);
  text-transform: uppercase;
  letter-spacing: 0.28em;
  font-size: clamp(0.82rem, 1.6vw, 1rem);
  color: var(--gold);
}
/* a single ruled row of the remaining five stats, divided by thin gold rules */
.stat-row {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.stat {
  display: flex;
  flex-direction: column;
  gap: 0.35em;
  flex: 1 1 0;
  min-width: 130px;
  padding: 0.4em clamp(1rem, 3vw, 2.6rem);
}
.stat + .stat { border-left: 1px solid rgba(169, 119, 42, 0.28); }
.stats-band .counter, .stat-v {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.9rem, 4vw, 3rem);
  line-height: 1;
  color: #faf4e6;
}
.stat-l { font-family: var(--label); text-transform: uppercase; letter-spacing: 0.15em; font-size: 0.8rem; color: var(--gold); }
/* the human toll, set apart, a big arrow and the survivors picked out in bright gold */
.stat-toll .stat-v { display: inline-flex; align-items: baseline; gap: 0.12em; }
.stat-toll-arrow { font-size: 1.35em; color: var(--gold); font-weight: 400; line-height: 0; padding: 0 0.08em; }
.stat-toll-end { color: var(--gold-bright); }
@media (max-width: 680px) {
  /* a clean two column grid rather than a wrapping flex row, so the five stats
     never break 2 plus 2 plus 1 with a lone full width straggler. the first four
     sit in a tidy 2 by 2 block ruled by thin gold lines, and the human toll spans
     both columns underneath, centred, a deliberate finale. */
  .stat-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    column-gap: 0;
    row-gap: 0;
  }
  .stat, .stat + .stat {
    flex: none;
    min-width: 0;
    padding: 0.95em 0.8em;
    border-left: 0;
    text-align: center;
    align-items: center;
  }
  /* internal rules, a vertical line between the two columns and horizontal lines
     between the rows, drawn only where they should appear */
  .stat:nth-child(odd) { border-right: 1px solid rgba(169, 119, 42, 0.28); }
  .stat:nth-child(3), .stat:nth-child(4) { border-top: 1px solid rgba(169, 119, 42, 0.28); }
  /* the toll, set apart across the full width as the closing figure */
  .stat-toll {
    grid-column: 1 / -1;
    border-right: 0;
    border-top: 1px solid rgba(169, 119, 42, 0.28);
    padding-top: 1.2em;
    margin-top: 0.2em;
  }
}

/* the closing manifesto. their own appeal to the reader, set large and centred
   on the dark, the last full voice of the riders before Nehru speaks. */
.manifesto { background: var(--darker); padding: clamp(11vh, 16vh, 20vh) 6vw; text-align: center; position: relative; }
.manifesto-quote { position: relative; z-index: 1; max-width: 940px; margin: 0 auto; }
.manifesto-quote span {
  display: block;
  font-family: var(--display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.5rem, 3.3vw, 2.5rem);
  line-height: 1.36;
  color: #faf4e6;
  letter-spacing: -0.012em;
  text-wrap: pretty;
  text-shadow: 0 2px 22px rgba(0, 0, 0, 0.5);
}
.manifesto-quote::before {
  content: "\201C";
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(3rem, 7vw, 5rem);
  line-height: 0.4;
  color: var(--gold-bright);
  opacity: 0.5;
  margin-bottom: 0.3em;
}
.manifesto-quote cite {
  display: block;
  margin-top: 1.4em;
  font-family: var(--label);
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.82rem;
  color: var(--gold);
}

.nehru { background: var(--paper); padding: clamp(9vh, 13vh, 16vh) 6vw; text-align: center; }
.nehru .kicker { color: var(--oxblood); display: inline-block; margin-bottom: 2em; }
.nehru-quote { max-width: 820px; margin: 0 auto; padding: 1.5em 0; border-top: 1px solid var(--gold); border-bottom: 1px solid var(--gold); }
.nehru-quote span {
  font-family: var(--display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.4rem, 3.2vw, 2.05rem);
  line-height: 1.42;
  color: var(--ink);
}

.book { background: var(--paper-2); padding: clamp(8vh, 12vh, 15vh) 6vw; }
.book-grid { max-width: 1000px; margin: 0 auto; display: grid; grid-template-columns: 0.8fr 1fr; gap: clamp(2.5rem, 6vw, 6rem); align-items: center; }
.book-cover { margin: 0; }
.book-cover img { width: 100%; box-shadow: 0 30px 70px rgba(34, 28, 20, 0.4); }
.book-text h2 { font-family: var(--display); font-weight: 700; font-size: clamp(1.9rem, 4vw, 2.6rem); line-height: 1.1; margin: 0.1em 0 0.6em; }

/* in the press: two screenshot-style social cards in a small two-up row */
.press { background: var(--paper-2); padding: clamp(9vh, 13vh, 15vh) 6vw; text-align: center; }
.press-inner { max-width: 1000px; margin: 0 auto; }
.press .kicker { color: var(--oxblood); display: inline-block; }
.press h2 { font-family: var(--display); font-weight: 700; font-size: clamp(1.9rem, 4.4vw, 2.8rem); line-height: 1.1; margin: 0.15em 0 0.4em; }
.press-lead { font-size: 1.14rem; font-style: italic; color: var(--ink-soft); max-width: 56ch; margin: 0 auto clamp(3.5vh, 5vh, 6vh); }
.press-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1.4rem, 4vw, 2.6rem); align-items: start; }
.press-fig { margin: 0; }
.press-fig .frame { display: block; overflow: hidden; line-height: 0; box-shadow: 0 22px 54px rgba(34, 28, 20, 0.3), inset 0 0 0 1px rgba(169, 119, 42, 0.3); }
.press-fig img { width: 100%; height: auto; display: block; }
.press-fig figcaption { margin-top: 1em; font-family: var(--label); font-size: 0.9rem; letter-spacing: 0.02em; color: var(--ink-soft); }
@media (max-width: 640px) {
  .press-row { grid-template-columns: 1fr; gap: 2.4rem; }
}

.archive { background: var(--paper); padding: clamp(9vh, 13vh, 15vh) 6vw; }
.archive-inner { max-width: 1100px; margin: 0 auto; }
.archive .kicker { color: var(--oxblood); }
.archive h2 { font-family: var(--display); font-weight: 700; font-size: clamp(1.9rem, 4.4vw, 2.8rem); margin-bottom: 0.35em; }
.archive-sub { font-size: 1.14rem; font-style: italic; color: var(--ink-soft); max-width: 56ch; margin-bottom: 3em; }
/* a museum index, not a bullet list. the seven groups flow in a responsive
   multi-column layout, each a small caps heading over a list of two-line rows.
   every row sets the title in Spectral over the source domain in gold Barlow
   caps, with a quiet drawing-underline and an arrow that arrive on hover. */
.arch-cols {
  column-width: 19rem;
  column-gap: clamp(2rem, 4vw, 3.4rem);
}
.arch-group-sec {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  margin-bottom: clamp(2.4rem, 4vw, 3.4rem);
}
.arch-group {
  display: flex;
  align-items: baseline;
  gap: 0.55em;
  font-family: var(--label);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.92rem;
  color: var(--oxblood);
  margin-bottom: 0.9em;
  padding-bottom: 0.5em;
  border-bottom: 1px solid var(--line);
}
.arch-count {
  margin-left: auto;
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum" 1, "tnum" 1;
  color: var(--gold);
  letter-spacing: 0.1em;
}
.arch-list {
  display: flex;
  flex-direction: column;
}
.arch {
  display: block;
  text-decoration: none;
  color: var(--ink);
  padding: 0.62em 0 0.66em;
  border-bottom: 1px solid rgba(34, 28, 20, 0.08);
}
.arch:last-child { border-bottom: 0; }
.arch-title {
  display: block;
  position: relative;
  font-family: var(--body);
  font-size: 1.02rem;
  line-height: 1.32;
  color: var(--ink);
  /* a drawing underline, grown from the left on hover, no transition: all */
  background-image: linear-gradient(var(--oxblood), var(--oxblood));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: color 0.2s ease, background-size 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.arch-title::after {
  content: "\2197";
  margin-left: 0.35em;
  font-family: var(--label);
  color: var(--gold);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.arch-src {
  display: block;
  margin-top: 0.28em;
  font-family: var(--label);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.72rem;
  color: var(--gold);
  transition: color 0.2s ease;
}
.arch:hover .arch-title { color: var(--oxblood); background-size: 100% 1px; }
.arch:hover .arch-title::after { opacity: 1; }
.arch:hover .arch-src { color: var(--gold-bright); }

.dedication { background: var(--dark); padding: clamp(10vh, 14vh, 17vh) 6vw; text-align: center; }
.ded-mem { font-family: var(--display); font-style: italic; font-size: clamp(1.5rem, 4vw, 2.3rem); color: var(--gold); }
.ded-family { margin-top: 1em; font-family: var(--body); font-style: italic; font-size: clamp(1rem, 2vw, 1.2rem); color: rgba(247, 240, 226, 0.66); max-width: 46ch; margin-left: auto; margin-right: auto; }
.ded-by { margin-top: 1.6em; font-family: var(--label); text-transform: uppercase; letter-spacing: 0.18em; font-size: 0.86rem; color: rgba(247, 240, 226, 0.8); }
/* link underline draws in from the left on hover rather than just sitting there */
.ded-by a {
  color: #faf4e6;
  text-decoration: none;
  position: relative;
  padding-bottom: 2px;
  background-image: linear-gradient(var(--gold), var(--gold));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 1px;
  transition: color 0.2s ease, background-size 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.ded-by a:hover { color: var(--gold); }

.standfirst {
  font-family: var(--display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.15rem, 2.4vw, 1.4rem);
  line-height: 1.4;
  color: var(--oxblood);
  margin: -0.2em 0 1.1em;
}
.sig-foot { margin-top: 1.3em; font-style: italic; color: var(--ink-soft); font-size: 1.05rem; }

.reading.after .kicker { color: var(--gold); }

.wave-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
  margin-top: 2.6em;
}
.wave-gallery figure { margin: 0; }
.wave-gallery img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  filter: sepia(0.16) contrast(1.04);
  box-shadow: 0 14px 34px rgba(34, 28, 20, 0.28);
}
.wave-gallery figcaption {
  margin-top: 0.6em;
  font-family: var(--label);
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
}

.reveal { opacity: 0; transform: translateY(26px); transition: opacity 1s ease, transform 1s cubic-bezier(0.2, 0.7, 0.2, 1); }
.reveal.in { opacity: 1; transform: none; }

@media (max-width: 760px) {
  body { font-size: 18px; }
  .sig-grid, .book-grid { grid-template-columns: 1fr; gap: 2.2rem; }
  .book-cover { max-width: 280px; margin: 0 auto; }
  .hero-credit { left: 6vw; right: 6vw; text-align: left; max-width: none; }
  .reading { padding-left: 22px; padding-right: 22px; }
  .map-wrap { aspect-ratio: 3 / 2; }
  .pin-label { font-size: 0.74rem; }
  /* pull quotes stay inside the column on a narrow screen, no negative hang */
  .reading .pullquote:nth-of-type(odd),
  .reading .pullquote:nth-of-type(even) { margin-left: 0; margin-right: 0; }
  /* comfortable tap targets for the route list */
  .globe-stops li { padding: 0.75em 0.7em; }
  /* the giant 146 reins in so it never overruns the leaf on a phone */
  .sig-wall::before { font-size: clamp(8rem, 60vw, 16rem); opacity: 0.06; }
  .sig-wall { gap: 0.3em 0.8em; padding: 2rem 0.4rem; }
}

/* film grain over everything for cohesion. fine and quiet, felt not seen,
   a tighter frequency and lower opacity than a heavy filter look */
.grain {
  position: fixed; inset: -50%; z-index: 60; pointer-events: none;
  width: 200%; height: 200%;
  opacity: 0.035; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  animation: grain 0.7s steps(3) infinite;
}
@keyframes grain {
  0% { transform: translate(0, 0); }
  33% { transform: translate(-3%, 2%); }
  66% { transform: translate(2%, -3%); }
  100% { transform: translate(-2%, 3%); }
}

/* hero is visible immediately, never an entrance that could get stuck hidden */

/* widow and orphan control */
h1, .reading h2, .standfirst, .big-quote span, .pullquote span, .dangers-title, .map-head h2, .sig-head h2, .pull-line { text-wrap: balance; }
.body, .lede, .sig-lead, .map-sub, .archive-sub, .hero-dek { text-wrap: pretty; }

/* framed archival prints */
.plate .frame { box-shadow: 0 30px 80px rgba(0,0,0,0.55), inset 0 0 0 1px rgba(169,119,42,0.32); }
.book-cover img { box-shadow: 0 30px 70px rgba(34,28,20,0.4), inset 0 0 0 1px rgba(169,119,42,0.3); }

/* hero route line */
.hero-route {
  margin-top: 1.7em;
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.9em;
  font-family: var(--label); text-transform: uppercase; letter-spacing: 0.22em;
  font-size: 0.76rem; color: rgba(247,240,226,0.72);
}
.hero-route span:not(.hr-km):not(:last-child)::after { content: "→"; margin-left: 0.9em; color: var(--gold); }
.hero-route .hr-km { color: #faf4e6; border: 1px solid rgba(169,119,42,0.6); padding: 0.35em 0.75em; letter-spacing: 0.12em; }

/* pulled-out single line, hangs with weight */
.pull-line {
  margin: 1.5em 0 0;
  font-family: var(--display); font-style: italic; font-weight: 500;
  font-size: clamp(1.5rem, 3.6vw, 2.4rem); line-height: 1.28;
  color: var(--oxblood);
}

/* the signature wall. the showpiece. an autograph endpaper, packed close, the
   famous hands large and ink dark, the field of lesser names crowding the gaps,
   and a giant 146 ghosted behind the whole leaf. */
.signatures { text-align: center; overflow: hidden; }
.sig-head { max-width: 760px; margin: 0 auto clamp(3.5vh, 5vh, 6vh); }
.sig-head .kicker { display: inline-block; }
.sig-head h2 { font-family: var(--display); font-weight: 700; font-size: clamp(2.4rem, 7vw, 4.2rem); line-height: 1; margin: 0.1em 0 0.55em; letter-spacing: -0.02em; }
.sig-lead { font-size: 1.15rem; font-style: italic; color: var(--ink-soft); max-width: 54ch; margin: 0 auto; }

.sig-wall {
  position: relative;
  max-width: 1040px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 0.28em 1em;
  padding: clamp(2.4rem, 5vw, 4rem) clamp(0.5rem, 3vw, 2.5rem);
  isolation: isolate;
}
/* the giant 146, the count of hands, ghosted behind the leaf */
.sig-wall::before {
  content: "146";
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -52%);
  z-index: 0;
  font-family: var(--display);
  font-weight: 900;
  font-style: normal;
  font-size: clamp(12rem, 44vw, 34rem);
  line-height: 0.8;
  letter-spacing: -0.05em;
  color: var(--oxblood);
  opacity: 0.09;
  font-feature-settings: "lnum" 1;
  font-variant-numeric: lining-nums;
  pointer-events: none;
  white-space: nowrap;
}
.sig-name { position: relative; z-index: 1; display: inline-block; font-family: var(--display); font-style: italic; line-height: 1.06; transform: rotate(var(--rot, 0deg)); }
.sig-name.marquee { font-size: clamp(1.7rem, 4vw, 3.2rem); font-weight: 600; color: var(--oxblood); padding: 0.1em 0.12em; }
.sig-name.marquee i { display: block; font-style: normal; font-family: var(--label); text-transform: uppercase; letter-spacing: 0.13em; font-size: 0.34em; color: var(--ink-soft); margin-top: 0.2em; }
.sig-name.faint { font-size: clamp(1.05rem, 2.2vw, 1.55rem); color: rgba(34, 28, 20, 0.4); }
.sig-name.faint.dim { color: rgba(34, 28, 20, 0.26); font-size: clamp(0.95rem, 1.8vw, 1.25rem); }

/* dangers, with ghosted index numerals and a hover lift that gives the card
   real depth, a raised plate that catches a warm rim of light */
.peril {
  position: relative;
  overflow: hidden;
  background-color: var(--dark);
  transition: background-color 0.35s ease, transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.35s ease;
}
.peril-n { position: absolute; top: 0.05em; right: 0.18em; z-index: 0; font-size: clamp(3rem, 6vw, 5rem); color: var(--oxblood); opacity: 0.2; transition: color 0.35s ease, opacity 0.35s ease; font-feature-settings: "lnum" 1; font-variant-numeric: lining-nums; }
.peril h3, .peril p { position: relative; z-index: 1; }
.peril h3 { transition: color 0.35s ease; }
.peril:hover {
  background-color: var(--darker);
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(212, 154, 58, 0.25);
  z-index: 2;
}
.peril:hover .peril-n { color: var(--gold); opacity: 0.6; }
.peril p { color: rgba(247, 240, 226, 0.8); }

/* the most visceral card promoted, rifles to the forehead, ringed in oxblood so
   the eye lands on it first */
.peril.feature { background-color: #221008; box-shadow: inset 0 0 0 1px rgba(150, 52, 20, 0.55); }
.peril.feature .peril-n { color: var(--oxblood); opacity: 0.4; }
.peril.feature h3 { color: #f6d9b0; }
.peril.feature:hover { background-color: #2a130a; box-shadow: 0 20px 46px rgba(0, 0, 0, 0.55), inset 0 0 0 1px rgba(150, 52, 20, 0.8); }

/* section seams, so the page reads as one continuous film rather than a stack
   of hard cuts. main.js inserts a soft band at every boundary where a parchment
   section meets a dark one, tinted from the parchment side, and scrubs its
   opacity with scroll so the change feels like a slow cross dissolve. the band
   is purely decorative and additive, it never hides content, and with no script
   running there is simply no band and the original clean edge remains. */
.seam {
  position: absolute;
  left: 0; right: 0;
  height: clamp(64px, 10vh, 130px);
  pointer-events: none;
  z-index: 3;
  opacity: var(--seam-o, 0.92);
}
.seam-top { top: -1px; background: linear-gradient(to bottom, var(--seam-tint, var(--paper)), rgba(0, 0, 0, 0)); }
.seam-bottom { bottom: -1px; background: linear-gradient(to top, var(--seam-tint, var(--paper)), rgba(0, 0, 0, 0)); }
/* keep real content above the seam bands */
.dangers > :not(.seam), .mapsec > :not(.seam), .quote-scene > :not(.seam),
.stats-band > :not(.seam), .plate > :not(.seam), .manifesto > :not(.seam),
.signatures > :not(.seam), .reading > :not(.seam) { position: relative; z-index: 4; }

/* small-viewport height fixes */
@supports (height: 100svh) {
  .hero { min-height: 100svh; }
  .quote-scene { min-height: 92svh; }
}

/* mobile: turn the wave gallery into a swipe carousel */
@media (max-width: 600px) {
  .wave-gallery { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 78%; overflow-x: auto; scroll-snap-type: x mandatory; gap: 1rem; padding-bottom: 0.6em; -webkit-overflow-scrolling: touch; }
  .wave-gallery figure { scroll-snap-align: center; }
  .stats-band { gap: 1.4rem 2.2rem; }
  .arch-cols { column-width: auto; columns: 1; }
}

/* touch devices have no hover, so the hover only flourishes are switched off,
   the grab cursor is dropped, and nothing is left half lit by a sticky tap */
@media (pointer: coarse) {
  .peril:hover { transform: none; box-shadow: inset 0 0 0 1px rgba(212, 154, 58, 0.12); background-color: var(--dark); }
  .peril.feature:hover { background-color: #221008; box-shadow: inset 0 0 0 1px rgba(150, 52, 20, 0.55); }
  .peril:hover .peril-n { color: var(--oxblood); opacity: 0.2; }
  .peril.feature:hover .peril-n { color: var(--oxblood); opacity: 0.4; }
  .arch:hover .arch-title { color: var(--ink); background-size: 0% 1px; }
  .arch:hover .arch-title::after { opacity: 0; }
  .arch:hover .arch-src { color: var(--gold); }
  .globe-stops li:hover { background: transparent; padding-left: 0.7em; }
  .globe-stops li.on { padding-left: 0.95em; }
  .ded-by a { background-size: 100% 1px; }
  #globe, #globe:active { cursor: default; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-media, .scrollcue, .grain { animation: none; }
  .hero-inner > * { opacity: 1; animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .seam { display: none; }
}

/* the itinerary runs in two columns beside the globe so it never towers over it,
   and folds back to one on a narrow screen. every stop is always shown, no
   hidden scroll to discover. */
@media (max-width: 540px) { .globe-stops { grid-template-columns: 1fr; } }

/* three archival photographs that arrive as book scans, each with black panels
   and a baked caption around the real photograph. rather than ship a re-encoded
   crop, the source loads in full inside a fixed window that is sized to the
   photograph alone, scaled up and shifted so only the picture shows and the
   black borders and printed captions fall outside the frame. the original file
   still loads, so naturalWidth stays above zero, and the family's real faces
   read clearly. each window carries the aspect of the photograph it reveals. */
.crop {
  display: block;
  overflow: hidden;
  position: relative;
  line-height: 0;
  width: 100%;
}
.crop img {
  position: absolute;
  left: 0; top: 0;
  max-width: none;
  max-height: none;
}
/* the Hong Kong gold-medals photograph (1600x1009), set as a centred plate the
   size of the other plate figures. the image fills the frame with object-fit
   cover and a hair of inset zoom, so the thin dark bar baked along the bottom of
   the scan falls outside the window and never shows. */
.sig-medals { margin: clamp(3vh, 5vh, 7vh) auto 0; max-width: min(860px, 92vw); text-align: center; }
.sig-medals .frame {
  display: block;
  overflow: hidden;
  line-height: 0;
  width: 100%;
  aspect-ratio: 1600 / 1009;
  box-shadow: 0 24px 60px rgba(34, 28, 20, 0.32), inset 0 0 0 1px rgba(169, 119, 42, 0.3);
}
.sig-medals .frame img {
  width: 102%;
  height: 102%;
  margin: -1%;
  object-fit: cover;
  object-position: center top;
}
.sig-medals figcaption { margin: 1.1em auto 0; max-width: 48ch; font-family: var(--label); font-size: 0.9rem; letter-spacing: 0.02em; color: var(--ink-soft); }

/* a photograph that sits beside the reading column, text wrapping around it on a
   wide screen and stacking full width on a phone. it floats and pulls a little
   into the margin so the picture feels to sit alongside the prose, not break it.
   on a narrow screen the float is dropped and it becomes a full measure plate. */
.reading-fig {
  margin: 0.4em 0 1.4em;
  width: clamp(13rem, 34%, 20rem);
}
.reading-fig.fig-right { float: right; margin-left: clamp(1.6rem, 3vw, 2.6rem); margin-right: clamp(-3.5rem, -3vw, -0.5rem); }
.reading-fig.fig-left { float: left; margin-right: clamp(1.6rem, 3vw, 2.6rem); margin-left: clamp(-3.5rem, -3vw, -0.5rem); }
.reading-fig .frame {
  display: block;
  overflow: hidden;
  line-height: 0;
  box-shadow: 0 18px 44px rgba(34, 28, 20, 0.3), inset 0 0 0 1px rgba(169, 119, 42, 0.3);
}
.reading-fig .frame img { width: 100%; height: auto; filter: sepia(0.14) contrast(1.04); }
.reading-fig figcaption {
  margin-top: 0.85em;
  font-family: var(--label);
  font-size: 0.84rem;
  letter-spacing: 0.02em;
  line-height: 1.4;
  color: var(--ink-soft);
}
/* the lede sets a large drop cap with a left float, so a figure floated left in
   the opening chapter would collide with it. keep the opening figure to the right. */
#chap-start .reading-fig { float: right; }
@media (max-width: 760px) {
  .reading-fig, .reading-fig.fig-right, .reading-fig.fig-left,
  #chap-start .reading-fig {
    float: none;
    width: 100%;
    max-width: 64ch;
    margin: clamp(2.6vh, 4vh, 5vh) 0;
  }
}

/* a full bleed plate that runs the whole width, a deliberate visual beat between
   two chapters. the framed print is allowed to grow wider than the standing
   plates so it reads as a spread. */
.wide-plate .frame { width: min(1180px, 94vw); margin: 0 auto; }
.wide-plate .frame > img { max-height: none; width: 100%; transform: none; }

/* a photograph set inside a reading column, full measure, framed like a print */
.inline-fig { margin: clamp(3vh, 5vh, 7vh) 0 0; max-width: 64ch; }
.inline-fig .frame { display: block; overflow: hidden; line-height: 0; box-shadow: 0 22px 54px rgba(34, 28, 20, 0.3), inset 0 0 0 1px rgba(169, 119, 42, 0.3); }
.inline-fig figcaption { margin-top: 1em; font-family: var(--label); font-size: 0.9rem; letter-spacing: 0.02em; color: var(--ink-soft); }
.crop.homecoming img, .crop.hongkong img, .crop.trio img { filter: sepia(0.14) contrast(1.05); }

/* trio with all their gear, the ROUND THE WORLD ON BICYCLES clipping. the photo
   sits inside the scan at roughly x 4 to 96 percent, y 3 to 82 percent */
.crop.trio { aspect-ratio: 1.623; }
.crop.trio img { width: 111.1%; left: -5.56%; top: -8.33%; }
/* the homecoming reception at Dadar, the lower photograph of the scan */
.crop.homecoming { aspect-ratio: 2.012; }
.crop.homecoming img { width: 116.3%; left: -7.56%; top: -226.3%; }
/* the trio in Hong Kong after the gold medals, the upper group photograph */
.crop.hongkong { aspect-ratio: 1.811; }
.crop.hongkong img { width: 131.6%; left: 0; top: 0; }

/* the real autograph page, set as a centred plate inside the signatures section */
.sig-autograph { margin: 0 auto clamp(3vh, 5vh, 7vh); max-width: 520px; text-align: center; }
.sig-autograph .frame { display: inline-block; overflow: hidden; line-height: 0; box-shadow: 0 24px 60px rgba(34, 28, 20, 0.32), inset 0 0 0 1px rgba(169, 119, 42, 0.3); }
.sig-autograph img { width: 100%; max-height: 72vh; filter: contrast(1.05); }
.sig-autograph figcaption { margin-top: 1.1em; max-width: 46ch; margin-left: auto; margin-right: auto; font-family: var(--label); font-size: 0.9rem; letter-spacing: 0.02em; color: var(--ink-soft); }

/* living archival video: real photos animated on Higgsfield, played as moving
   backgrounds with the still photo as poster fallback. inherits the media
   filter and sits under the scrim, so the quote text stays readable. */
.bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.plate-vid { width: 100%; display: block; }
@media (prefers-reduced-motion: reduce) {
  .bg-video { display: none; }
}

/* immersive motion support. these rules only style nodes that the motion layer
   creates or splits, so with no script running they have nothing to act on and
   the page is unaffected. headings stay fully visible by default. */

/* kinetic heading lines. SplitText wraps each measured line in a .kin-line, and
   the line slides up out of this mask on enter. overflow hidden is the mask, and
   the slight bottom padding keeps descenders from being clipped at rest. */
.kin-line { overflow: hidden; display: block; padding-bottom: 0.08em; }

/* the custom cursor ring, a fixed decorative node added by the motion layer on a
   fine pointer only. it captures nothing and augments the native cursor rather
   than replacing it, a small gold ring that lerps after the pointer and grows
   and softens over interactive things. never shown under a coarse pointer. */
.cursor-ring {
  position: fixed;
  top: 0; left: 0;
  width: 26px; height: 26px;
  margin: -13px 0 0 -13px;
  border: 1px solid var(--gold-bright);
  border-radius: 50%;
  pointer-events: none;
  z-index: 70;
  opacity: 0;
  mix-blend-mode: normal;
  transition: opacity 0.4s ease, width 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), height 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), border-color 0.35s ease, background-color 0.35s ease;
}
.cursor-ring.on { opacity: 0.7; }
.cursor-ring.grow {
  width: 50px; height: 50px;
  border-color: rgba(212, 154, 58, 0.5);
  background: rgba(212, 154, 58, 0.08);
}
@media (pointer: coarse) { .cursor-ring { display: none; } }
@media (prefers-reduced-motion: reduce) { .cursor-ring { display: none; } }

/* fix: the seam rule above forces .quote-scene children to position:relative,
   which collapsed the absolutely-positioned scene background to 0x0 and hid
   every full-bleed photo and video. re-assert the background, keep it behind
   the scrim and the quote. */
.quote-scene > .quote-scene-media { position: absolute; inset: -12%; z-index: 0; }
.quote-scene > .quote-scene-scrim { z-index: 1; }

/* a larger side figure for the photographs that earn more room, the desert
   setting-out, the Hong Kong medals, the trio home with their machine. it pulls
   a touch further into the margin and runs wider than the standard reading-fig
   so the faces and detail read at a glance. */
.reading-fig.fig-lg { width: clamp(15rem, 44%, 26rem); }
.reading-fig.fig-lg.fig-right { margin-right: clamp(-5rem, -4vw, -1rem); }
.reading-fig.fig-lg.fig-left { margin-left: clamp(-5rem, -4vw, -1rem); }
@media (max-width: 760px) {
  .reading-fig.fig-lg,
  .reading-fig.fig-lg.fig-right,
  .reading-fig.fig-lg.fig-left { float: none; width: 100%; max-width: 64ch; margin: clamp(2.6vh, 4vh, 5vh) 0; }
}

/* Nehru's foreword, lifted to a prominent early beat. his handwritten page sits
   beside the typeset quote on a wide screen, stacking on a phone. the page image
   reads as the artefact it is, the quote as the clean reading of it. */
.nehru-inner {
  max-width: 1040px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 0.84fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  text-align: left;
}
.nehru-fig { margin: 0; }
.nehru-fig .frame {
  display: block;
  overflow: hidden;
  line-height: 0;
  box-shadow: 0 26px 64px rgba(34, 28, 20, 0.34), inset 0 0 0 1px rgba(169, 119, 42, 0.3);
}
.nehru-fig img { width: 100%; height: auto; }
.nehru-fig figcaption {
  margin-top: 0.9em;
  font-family: var(--label);
  font-size: 0.86rem;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
}
.nehru-body .kicker { margin-bottom: 1.5em; }
.nehru-body .nehru-quote { text-align: left; margin: 0; max-width: none; }
@media (max-width: 820px) {
  .nehru { text-align: center; }
  .nehru-inner { grid-template-columns: 1fr; gap: 2.2rem; }
  .nehru-fig { max-width: 380px; margin: 0 auto; }
  .nehru-body .kicker { margin-left: auto; margin-right: auto; }
}

/* the Instagram reel, a vertical retelling, framed like a phone screen and set
   to play on tap so nothing autoloads a heavy video. centred in the press band. */
.reel { margin: clamp(4vh, 6vh, 8vh) auto 0; max-width: 332px; text-align: center; }
.reel-frame {
  position: relative;
  aspect-ratio: 9 / 16;
  border-radius: 20px;
  overflow: hidden;
  background: #0c0906;
  box-shadow: 0 28px 70px rgba(34, 28, 20, 0.42), inset 0 0 0 1px rgba(169, 119, 42, 0.4);
}
.reel-vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.reel figcaption {
  margin-top: 1.2em;
  font-family: var(--label);
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  line-height: 1.5;
  color: var(--ink-soft);
}
.reel figcaption a {
  color: var(--oxblood);
  text-decoration: none;
  background-image: linear-gradient(var(--oxblood), var(--oxblood));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 1px;
  padding-bottom: 1px;
  transition: color 0.2s ease;
}
.reel figcaption a:hover { color: var(--gold); }

/* a large feature photograph that breaks out wider than the reading column, a
   deliberate big visual beat that also spaces dense text. centred on the page,
   framed like a print, and dropped back to the column on a phone. */
.reading-feature {
  width: min(940px, 92vw);
  /* break out and centre on the viewport with margins, NOT a transform, because
     the .reveal entrance animates transform and would cancel a translateX here. */
  margin-left: calc(50% - min(470px, 46vw));
  margin-right: calc(50% - min(470px, 46vw));
  margin-top: clamp(3.5vh, 6vh, 8vh);
  margin-bottom: clamp(3.5vh, 6vh, 8vh);
}
.reading-feature .frame {
  display: block;
  overflow: hidden;
  line-height: 0;
  box-shadow: 0 30px 72px rgba(34, 28, 20, 0.36), inset 0 0 0 1px rgba(169, 119, 42, 0.32);
}
.reading-feature .frame img { width: 100%; height: auto; filter: sepia(0.14) contrast(1.04); }
.reading-feature figcaption {
  margin: 1.1em auto 0;
  max-width: 60ch;
  text-align: center;
  font-family: var(--label);
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
}
@media (max-width: 760px) {
  .reading-feature { width: auto; margin-left: 0; margin-right: 0; }
}
/* a portrait feature sits centred inside the reading column rather than breaking
   out wide, the right shape for a tall standing portrait. */
.reading-feature.is-portrait { width: min(560px, 84vw); margin-left: auto; margin-right: auto; }
.reading-feature .frame video { width: 100%; height: auto; display: block; filter: sepia(0.12) contrast(1.04); }

/* keyboard focus, was missing entirely. a quiet gold ring on anything focusable
   so the page is navigable without a mouse. */
a:focus-visible,
button:focus-visible,
.globe-replay:focus-visible,
.reel-vid:focus-visible {
  outline: 2px solid var(--gold-bright);
  outline-offset: 3px;
  border-radius: 2px;
}

/* running body type eases down a little on a phone instead of holding a fixed
   1.18rem, so the long reading columns breathe on a small screen. */
.body { font-size: clamp(1.06rem, 2.4vw, 1.18rem); }

/* the route-list metadata was a touch small for an interactive label */
.globe-stops span { font-size: 0.8rem; }

/* the scroll cue and the hero credit both sit at the bottom on a phone and can
   collide, so drop the decorative cue on small screens. */
@media (max-width: 600px) {
  .scrollcue { display: none; }
}