/* ==========================================================================
   Mithu Car Rental — Northeast India, chauffeur-driven
   --------------------------------------------------------------------------
   Design thesis: the page IS the road. Scroll = kilometres travelled.
   The page's colour temperature is a function of ALTITUDE — warm silt haze
   on the Brahmaputra plain, moss and rain in the foothills, thin pale cold
   at Sela Pass (4,170 m). Nothing here is decorative; the ribbon on the
   right edge is a real elevation profile.

   Palette (5 named values, all drawn from the route itself):
     basalt   #0B1416  wet road stone — the base
     mist     #C6D2CD  Sohra cloud — primary text
     moss     #4E7A5C  tea garden / living-root moss
     silt     #7E93A0  Brahmaputra silt water
     gamosa   #C1362F  the red border of the Assamese gamosa — the ONE accent
   ========================================================================== */

:root {
  --basalt: #0B1416;
  --basalt-2: #101B1D;
  --mist: #C6D2CD;
  --mist-dim: #8A9A96;
  --moss: #4E7A5C;
  --silt: #7E93A0;
  --gamosa: #C1362F;
  /* #C1362F is 3.41:1 on basalt — fine as a fill and fine for large display
     type, but it fails 4.5:1 for the small uppercase labels. This tint is
     5.34:1 and is used wherever the accent carries actual words. */
  --gamosa-text: #E0625A;

  /* Altitude-driven. engine.js rewrites these live as you climb. */
  --sky-hi: #2A3A3F;
  --sky-lo: #0B1416;
  --ink: var(--mist);
  --accent: var(--gamosa);

  --f-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --f-body: 'Newsreader', Georgia, 'Times New Roman', serif;
  --f-data: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

  --rail: 112px;           /* width of the elevation ribbon gutter */
  --pad: clamp(20px, 4vw, 56px);
  /* 34vw left the dock at 306px on a 900px laptop — three-line headlines and a
     half-wrapped data strip. 46vw keeps it readable from 900px up. */
  --dock-w: clamp(320px, 46vw, 500px);

  --ease: cubic-bezier(.22, .61, .36, 1);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--basalt);
  color: var(--ink);
  font-family: var(--f-body);
  font-optical-sizing: auto;
  font-size: clamp(15px, 1.05vw, 17px);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; }

.skip {
  position: fixed; top: 8px; left: 8px; z-index: 999;
  padding: 10px 16px; background: var(--gamosa); color: #fff;
  font-family: var(--f-data); font-size: 13px; text-decoration: none;
  transform: translateY(-160%);
}
.skip:focus { transform: none; }

/* Visually hidden, still read by assistive tech. */
.vh {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}

/* Dual ring. A single accent outline vanishes over the film — #C1362F measures
   1.47:1 against the Sela sky. One of these two rings always has contrast,
   whatever is painted underneath. */
:focus-visible {
  outline: 2px solid var(--basalt);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px #F2F5F4, 0 0 0 7px var(--gamosa);
  border-radius: 1px;
}
#book:focus-visible, #book:focus { outline: none; box-shadow: none; }

/* ==========================================================================
   THE FILM — fixed behind everything, scrubbed by scroll
   ========================================================================== */

.film {
  position: fixed; inset: 0;
  z-index: 0;
  background: var(--sky-lo);
  transition: background 400ms linear;
}
.film canvas { display: block; width: 100%; height: 100%; }

.film__video { position: absolute; inset: 0; }
.film__video video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 260ms linear;
}
.film__video video.is-live { opacity: 1; }

/* Film grain: kills the plasticky vector look, reads as 16mm */
.film__grain {
  position: absolute; inset: -50%;
  pointer-events: none;
  opacity: .16;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  animation: grain 700ms steps(3) infinite;
}
@keyframes grain {
  0%   { transform: translate(0, 0); }
  33%  { transform: translate(-2%, 1%); }
  66%  { transform: translate(1%, -2%); }
  100% { transform: translate(0, 0); }
}

/* Left scrim so the copy always has contrast, whatever the film is doing */
.film__scrim {
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    linear-gradient(100deg, var(--sky-lo) 0%, color-mix(in srgb, var(--sky-lo) 72%, transparent) 34%, transparent 62%),
    linear-gradient(to top, color-mix(in srgb, var(--sky-lo) 88%, transparent) 0%, transparent 34%);
}

@media (prefers-reduced-motion: reduce) {
  .film__grain { animation: none; }
}

/* ==========================================================================
   TOPBAR
   ========================================================================== */

.topbar {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 40;
  display: flex; align-items: center; gap: 20px;
  padding: 18px var(--pad);
  padding-right: calc(var(--pad) + var(--rail));
}
/* The film's scrim only darkens the left 62%; the topbar sits across the whole
   width, so over the Sela frame its text measured 1.29:1. This is its own
   scrim. */
.topbar::before {
  content: ''; position: absolute; inset: -10px 0 auto 0; height: 130px;
  z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom,
    color-mix(in srgb, var(--sky-lo) 92%, transparent) 0%,
    color-mix(in srgb, var(--sky-lo) 62%, transparent) 46%,
    transparent 100%);
  transition: background 400ms linear;
}

.mark { text-decoration: none; display: flex; align-items: baseline; gap: 9px; }
.mark__name {
  font-family: var(--f-display);
  font-variation-settings: 'wdth' 118, 'wght' 700;
  font-size: 21px; letter-spacing: -.015em;
  color: var(--ink);
}
.mark__sub {
  font-family: var(--f-data);
  font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--mist-dim);
}

/* Odometer — the position readout. Real data, not decoration. */
.odo {
  margin-left: auto;
  display: flex; align-items: baseline; gap: 3px;
  font-family: var(--f-data); font-size: 12px;
  color: var(--mist-dim);
  font-variant-numeric: tabular-nums;
}
.odo__km, .odo__alt { color: var(--ink); font-weight: 500; min-width: 3ch; text-align: right; }
.odo__unit { margin-right: 8px; opacity: .6; }
.odo__sep { opacity: .35; margin-right: 8px; }

.call {
  font-family: var(--f-data);
  font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  text-decoration: none;
  padding: 9px 15px;
  border: 1px solid color-mix(in srgb, var(--ink) 55%, transparent);
  color: var(--ink);
  transition: background 200ms var(--ease), border-color 200ms var(--ease);
}
.call:hover, .call:focus-visible { background: var(--gamosa); border-color: var(--gamosa); color: #fff; }

/* ==========================================================================
   THE STAGE + DOCKED CHAPTER COPY
   ========================================================================== */

.stage { position: relative; z-index: 10; }

.dock {
  position: fixed;
  left: var(--pad);
  bottom: clamp(48px, 9vh, 96px);
  width: var(--dock-w);
  z-index: 20;
  pointer-events: none;
}
.dock > * { pointer-events: auto; }

/* Leaving is fast, arriving is delayed — the two cards share one fixed corner,
   so a symmetrical crossfade shows both texts stacked on top of each other for
   a fraction of a second on every chapter change. */
.chapter {
  position: absolute; left: 0; bottom: 0; width: 100%;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 170ms var(--ease), transform 170ms var(--ease);
  will-change: opacity, transform;
}
.chapter.is-on {
  opacity: 1; transform: none;
  transition: opacity 360ms var(--ease) 150ms, transform 420ms var(--ease) 150ms;
}

/* The milestone: a real Indian highway stone, not an 01/02/03 badge */
.chapter__stone {
  display: inline-flex; align-items: stretch;
  margin-bottom: 18px;
  font-family: var(--f-data);
  font-size: 11px; letter-spacing: .06em;
  border: 1px solid color-mix(in srgb, var(--ink) 26%, transparent);
  background: color-mix(in srgb, var(--sky-lo) 55%, transparent);
  backdrop-filter: blur(6px);
}
.chapter__km {
  padding: 6px 10px;
  background: var(--accent); color: #fff; font-weight: 500;
  font-variant-numeric: tabular-nums;
  transition: background 500ms linear;
}
.chapter__place { padding: 6px 12px; color: var(--ink); text-transform: uppercase; letter-spacing: .14em; }

.chapter__h {
  margin: 0 0 14px;
  font-family: var(--f-display);
  font-variation-settings: 'wdth' 112, 'wght' 620;
  font-size: clamp(30px, 4.1vw, 55px);
  line-height: .98;
  letter-spacing: -.028em;
  color: #fff;
  text-wrap: balance;
  text-shadow: 0 2px 30px color-mix(in srgb, var(--sky-lo) 90%, transparent);
}
.chapter__h em {
  font-style: normal;
  color: var(--accent);
  transition: color 500ms linear;
}

.chapter__body {
  margin: 0 0 18px;
  font-size: 1.02rem;
  color: color-mix(in srgb, var(--ink) 88%, transparent);
  max-width: 40ch;
  text-shadow: 0 1px 18px color-mix(in srgb, var(--sky-lo) 80%, transparent);
}

/* Chapter data strip — the operational truth of that leg.
   Columns, never flex-wrap: wrapping left a single orphaned item on a second
   row with the rule only above the first, which read as broken. */
.chapter__data {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  column-gap: clamp(10px, 1.6vw, 20px);
  margin: 0;
  font-family: var(--f-data);
}
.chapter__data div {
  padding: 9px 0 0;
  border-top: 1px solid color-mix(in srgb, var(--ink) 22%, transparent);
}
.chapter__data dt {
  font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--mist-dim); margin-bottom: 3px;
}
.chapter__data dd {
  margin: 0; font-size: 13px; color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.hint {
  position: fixed; left: var(--pad); bottom: 18px; z-index: 21;
  font-family: var(--f-data); font-size: 10.5px;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--mist-dim);
  transition: opacity 400ms linear;
}
.hint::after {
  content: ''; display: inline-block;
  width: 34px; height: 1px; margin-left: 10px; vertical-align: middle;
  background: currentColor;
  animation: pull 2.4s var(--ease) infinite;
  transform-origin: left;
}
@keyframes pull { 0%,100% { transform: scaleX(.3); opacity: .4; } 50% { transform: scaleX(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .hint::after { animation: none; } }

/* ==========================================================================
   THE ELEVATION RIBBON — the signature element
   A real profile of the route, rotated 90°. Horizontal bow = altitude.
   ========================================================================== */

.ribbon {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: var(--rail);
  z-index: 30;
  pointer-events: none;
  /* Same reason as .topbar::before — the rail sits outside the film's scrim,
     where the labels measured 1.05:1 against the Sela sky. */
  background: linear-gradient(to right,
    transparent 0%,
    color-mix(in srgb, var(--sky-lo) 70%, transparent) 34%,
    color-mix(in srgb, var(--sky-lo) 90%, transparent) 100%);
  transition: background 400ms linear;
}
.ribbon svg { width: 100%; height: 100%; display: block; overflow: visible; }

.ribbon .rb-track { fill: none; stroke: color-mix(in srgb, var(--mist) 22%, transparent); stroke-width: 1.25; }
.ribbon .rb-done  { fill: none; stroke: var(--accent); stroke-width: 2; transition: stroke 500ms linear; }
.ribbon .rb-fill  { fill: color-mix(in srgb, var(--mist) 7%, transparent); stroke: none; }
.ribbon .rb-car   { fill: var(--accent); transition: fill 500ms linear; }
.ribbon .rb-car-ring { fill: none; stroke: color-mix(in srgb, var(--mist) 45%, transparent); stroke-width: 1; }
.ribbon .rb-tick  { fill: none; stroke: color-mix(in srgb, var(--mist) 30%, transparent); stroke-width: 1; }
.ribbon .rb-label {
  font-family: var(--f-data); font-size: 9.5px;
  letter-spacing: .08em; text-transform: uppercase;
  fill: var(--mist);
}
.ribbon .rb-label.is-on { fill: #fff; font-weight: 500; }
.ribbon .rb-alt { font-family: var(--f-data); font-size: 9px; fill: var(--mist-dim); }

/* ==========================================================================
   GROUND — everything after the film
   ========================================================================== */

.ground {
  position: relative;
  z-index: 15;
  background: var(--basalt);
  border-top: 1px solid color-mix(in srgb, var(--mist) 14%, transparent);
}

/* The topbar is fixed, so an anchor jump would drop a heading underneath it. */
.band[id], .route[id], .faq__item[id] { scroll-margin-top: 96px; }

.band {
  padding: clamp(64px, 10vh, 128px) var(--pad);
  padding-right: calc(var(--pad) + var(--rail));
  max-width: 1240px;
  border-bottom: 1px solid color-mix(in srgb, var(--mist) 10%, transparent);
}
.band:last-of-type { border-bottom: 0; }

.band__h {
  margin: 0 0 10px;
  font-family: var(--f-display);
  font-variation-settings: 'wdth' 108, 'wght' 600;
  font-size: clamp(25px, 3.1vw, 40px);
  line-height: 1.03; letter-spacing: -.025em;
  color: #fff;
}
.band__lede {
  margin: 0 0 44px;
  max-width: 52ch;
  color: var(--mist-dim);
  font-size: 1.02rem;
}

/* --- routes --- */
.routes { list-style: none; margin: 0; padding: 0; }
.routes li {
  display: grid;
  /* fixed metric columns so km / days / permit line up down the whole table —
     auto columns size per-row and read as ragged */
  grid-template-columns: minmax(0, 1fr) 92px 84px 96px;
  gap: 18px; align-items: baseline;
  padding: 17px 0;
  border-top: 1px solid color-mix(in srgb, var(--mist) 13%, transparent);
}
.routes .r-meta { text-align: right; }
.routes li:last-child { border-bottom: 1px solid color-mix(in srgb, var(--mist) 13%, transparent); }
.routes .r-name {
  font-family: var(--f-display);
  font-variation-settings: 'wdth' 104, 'wght' 560;
  font-size: clamp(17px, 1.7vw, 22px);
  letter-spacing: -.015em; color: #fff;
}
.routes .r-note { display: block; font-family: var(--f-body); font-size: .88rem; color: var(--mist-dim); margin-top: 3px; font-variation-settings: normal; letter-spacing: 0; }
.routes .r-meta { font-family: var(--f-data); font-size: 12px; color: var(--mist-dim); font-variant-numeric: tabular-nums; white-space: nowrap; }
.routes .r-meta b { color: var(--ink); font-weight: 500; }

/* Wide content scrolls inside its own box. The page body must never scroll
   horizontally. */
.scroller { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.band__note {
  margin: 26px 0 0;
  max-width: 74ch;
  font-size: .92rem;
  color: var(--mist-dim);
  border-left: 2px solid var(--gamosa);
  padding-left: 16px;
}

.prose { max-width: 70ch; margin: 0 0 18px; font-size: 1.02rem; }
.prose strong { color: #fff; font-weight: 600; }

/* --- routes: one real block per road --- */
.route {
  padding: 34px 0;
  border-top: 1px solid color-mix(in srgb, var(--mist) 13%, transparent);
}
.route:last-of-type { border-bottom: 1px solid color-mix(in srgb, var(--mist) 13%, transparent); }
.route__h {
  margin: 0 0 18px;
  font-family: var(--f-display);
  font-variation-settings: 'wdth' 104, 'wght' 580;
  font-size: clamp(19px, 2.1vw, 27px);
  line-height: 1.1; letter-spacing: -.02em; color: #fff;
  max-width: 30ch;
}
.route__meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0 clamp(12px, 2vw, 28px);
  margin: 0 0 22px;
  font-family: var(--f-data);
}
.route__meta div { padding: 9px 0 0; border-top: 1px solid color-mix(in srgb, var(--mist) 20%, transparent); }
.route__meta dt {
  font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--mist-dim); margin-bottom: 4px;
}
.route__meta dd { margin: 0; font-size: 12.5px; color: var(--ink); }
.route__p { margin: 0 0 14px; max-width: 68ch; }
.route__fact {
  margin: 18px 0 0; max-width: 68ch;
  padding: 16px 18px;
  background: color-mix(in srgb, var(--mist) 4%, transparent);
  border-left: 2px solid var(--gamosa);
  font-size: .96rem; color: var(--ink);
}
.route__fact span {
  display: block; margin-bottom: 6px;
  font-family: var(--f-data); font-size: 9.5px;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--gamosa-text);
}

/* --- states table --- */
.states, .season { width: 100%; border-collapse: collapse; min-width: 640px; }
.states th, .states td, .season th, .season td {
  text-align: left; vertical-align: top;
  padding: 16px 18px 16px 0;
  border-top: 1px solid color-mix(in srgb, var(--mist) 13%, transparent);
}
.states thead th, .season thead th {
  font-family: var(--f-data); font-size: 9.5px;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--mist-dim); font-weight: 400;
  border-top: 0; padding-bottom: 10px;
}
.states tbody th {
  font-family: var(--f-display);
  font-variation-settings: 'wdth' 104, 'wght' 560;
  font-size: clamp(16px, 1.6vw, 20px); color: #fff;
  letter-spacing: -.012em; white-space: nowrap; padding-right: 26px;
}
.states .st-permit { font-family: var(--f-data); font-size: 11.5px; color: var(--gamosa-text); max-width: 20ch; }
.states .st-days { font-family: var(--f-data); font-size: 11.5px; color: var(--mist-dim); white-space: nowrap; }
.states .st-for { color: var(--ink); font-size: .96rem; max-width: 46ch; }
.states .st-road { display: block; margin-top: 8px; color: var(--mist-dim); font-size: .9rem; }

/* --- season table --- */
.season tbody th { font-family: var(--f-data); font-size: 12px; color: var(--ink); white-space: nowrap; }
.season .sv {
  font-family: var(--f-data); font-size: 10.5px;
  letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
}
/* Never colour alone: each cell also carries the word. */
.season .sv--good   { color: #7FBE93; }
.season .sv--mixed  { color: #E0A33E; }
.season .sv--closed { color: var(--gamosa-text); }
.season .sn { color: var(--mist-dim); font-size: .92rem; max-width: 52ch; }

/* --- self-drive comparison --- */
.selfdrive {
  margin-top: 44px; padding: 28px 30px;
  border: 1px solid color-mix(in srgb, var(--mist) 15%, transparent);
  max-width: 76ch;
}
.sd-h {
  margin: 0 0 16px;
  font-family: var(--f-display);
  font-variation-settings: 'wdth' 104, 'wght' 580;
  font-size: clamp(18px, 2vw, 25px);
  line-height: 1.12; letter-spacing: -.02em; color: #fff;
}
.sd-p { margin: 0 0 13px; color: var(--ink); max-width: 66ch; }
.sd-p:last-child { margin-bottom: 0; }

/* --- FAQ --- */
.faq__item {
  border-top: 1px solid color-mix(in srgb, var(--mist) 13%, transparent);
}
.faq__item:last-of-type { border-bottom: 1px solid color-mix(in srgb, var(--mist) 13%, transparent); }
.faq__item summary {
  cursor: pointer; list-style: none;
  padding: 20px 44px 20px 0; position: relative;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary h3 {
  display: inline;
  margin: 0;
  font-family: var(--f-display);
  font-variation-settings: 'wdth' 104, 'wght' 540;
  font-size: clamp(16px, 1.6vw, 20px);
  letter-spacing: -.012em; color: #fff;
}
.faq__item summary::after {
  content: '+'; position: absolute; right: 8px; top: 50%;
  transform: translateY(-50%);
  font-family: var(--f-data); font-size: 18px; color: var(--gamosa-text);
}
.faq__item[open] summary::after { content: '–'; }
.faq__item summary:hover h3 { color: var(--gamosa-text); }
.faq__item > p {
  margin: 0 0 24px; max-width: 68ch; color: var(--mist-dim);
}

/* --- fleet --- */
/* Rows, not cards. A card grid orphans a cell at almost every breakpoint with
   five vehicles, and the page already speaks in tables — see .routes. */
.fleet { list-style: none; margin: 0; padding: 0; }
.fleet li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 116px;
  gap: 18px; align-items: baseline;
  padding: 19px 0;
  border-top: 1px solid color-mix(in srgb, var(--mist) 13%, transparent);
}
.fleet li:last-child { border-bottom: 1px solid color-mix(in srgb, var(--mist) 13%, transparent); }
.fleet .f-name {
  font-family: var(--f-display);
  font-variation-settings: 'wdth' 104, 'wght' 560;
  font-size: clamp(17px, 1.7vw, 22px);
  letter-spacing: -.015em; color: #fff;
}
.fleet li.is-ours { border-left: 2px solid var(--gamosa); padding-left: 16px; }
.fleet .f-reg {
  display: block; margin-top: 6px;
  font-family: var(--f-data); font-size: 10px;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--gamosa-text);
  font-variation-settings: normal;
}
.fleet .f-for {
  display: block; margin-top: 4px;
  font-family: var(--f-body); font-size: .9rem; color: var(--mist-dim);
  font-variation-settings: normal; letter-spacing: 0;
  max-width: 58ch;
}
.fleet .f-seats,
.fleet .f-rate {
  font-family: var(--f-data); font-size: 12px;
  color: var(--mist-dim); font-variant-numeric: tabular-nums;
  text-align: right; white-space: nowrap;
}
.fleet .f-rate b { color: var(--ink); font-weight: 500; }

/* --- why --- */
.why { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.why li {
  display: grid;
  grid-template-columns: clamp(58px, 7vw, 96px) 1fr;
  gap: clamp(16px, 3vw, 40px);
  padding: 22px 0;
  border-top: 1px solid color-mix(in srgb, var(--mist) 13%, transparent);
  align-items: start;
}
.why .w-where {
  font-family: var(--f-data); font-size: 10px;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--gamosa-text); padding-top: 5px; line-height: 1.5;
}
.why .w-h {
  font-family: var(--f-display);
  font-variation-settings: 'wdth' 104, 'wght' 560;
  font-size: clamp(16px, 1.6vw, 20px); color: #fff;
  margin: 0 0 6px; letter-spacing: -.012em;
}
.why .w-b { margin: 0; color: var(--mist-dim); max-width: 62ch; font-size: .98rem; }

/* --- book --- */
.band--book { padding-top: clamp(72px, 12vh, 150px); }
.book { max-width: 760px; }
.book__eyebrow {
  font-family: var(--f-data); font-size: 10.5px;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--gamosa-text); margin: 0 0 16px;
}
.book__h {
  margin: 0 0 16px;
  font-family: var(--f-display);
  font-variation-settings: 'wdth' 116, 'wght' 660;
  font-size: clamp(32px, 5vw, 68px);
  line-height: .97; letter-spacing: -.032em; color: #fff;
  text-wrap: balance;
}
.book__body { margin: 0 0 34px; max-width: 46ch; font-size: 1.06rem; }

.book__acts { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 46px; }
.act {
  font-family: var(--f-data); font-size: 12.5px;
  letter-spacing: .07em; text-transform: uppercase;
  text-decoration: none; padding: 14px 22px;
  transition: background 200ms var(--ease), color 200ms var(--ease), border-color 200ms var(--ease);
}
.act--primary { background: var(--gamosa); color: #fff; border: 1px solid var(--gamosa); }
/* Hover only. Inverting on focus dropped the main CTA to 3.41:1 at 12.5px —
   focusing the conversion button must not make it harder to read. */
.act--primary:hover { background: transparent; color: var(--gamosa-text); }
.act--ghost { border: 1px solid color-mix(in srgb, var(--mist) 55%, transparent); color: var(--ink); }
.act--ghost:hover, .act--ghost:focus-visible { border-color: var(--mist); background: color-mix(in srgb, var(--mist) 8%, transparent); }

.book__facts {
  display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  margin: 1px 0 0 1px;
}
.book__facts > div {
  background: var(--basalt); padding: 18px 20px;
  outline: 1px solid color-mix(in srgb, var(--mist) 13%, transparent);
}
.book__facts dt {
  font-family: var(--f-data); font-size: 9.5px;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--mist-dim); margin-bottom: 6px;
}
.book__facts dd { margin: 0; font-size: .98rem; color: var(--ink); }

.foot {
  /* Sits outside <main> for the contentinfo landmark, so it needs its own
     background and stacking — otherwise the fixed film shows through it. */
  position: relative; z-index: 15; background: var(--basalt);
  padding: 34px var(--pad) 44px;
  padding-right: calc(var(--pad) + var(--rail));
  font-family: var(--f-data); font-size: 11px;
  color: var(--mist-dim);            /* was 2.87:1 — this line carries the permit number */
  line-height: 1.8;
}
.foot code { color: var(--mist-dim); }
.foot p { margin: 0 0 4px; }
.foot a { color: var(--mist); text-decoration-color: color-mix(in srgb, var(--mist) 40%, transparent); }
.foot a:hover { color: #fff; }
.foot__by {
  margin-top: 18px; padding-top: 16px;
  border-top: 1px solid color-mix(in srgb, var(--mist) 12%, transparent);
  letter-spacing: .1em; text-transform: uppercase; font-size: 10px;
}
.foot__by a { color: var(--gamosa-text); text-decoration: none; }
.foot__by a:hover { text-decoration: underline; }

/* ==========================================================================
   MOBILE — copy docks to the bottom, ribbon goes horizontal on top
   ========================================================================== */

@media (max-width: 860px) {
  :root { --rail: 0px; --dock-w: auto; }

  .topbar { padding: 14px var(--pad); gap: 12px; }
  .mark__sub { display: none; }
  .odo { font-size: 11px; }
  .call { padding: 8px 12px; font-size: 11px; }

  .dock {
    left: var(--pad); right: var(--pad); width: auto;
    /* clears the horizontal elevation strip */
    bottom: calc(66px + env(safe-area-inset-bottom, 0px));
  }
  .chapter__h { font-size: clamp(27px, 8.2vw, 40px); }
  .chapter__body { max-width: none; font-size: .98rem; }
  .chapter__data { column-gap: 10px; }
  .chapter__data dt { font-size: 9px; letter-spacing: .1em; }
  .hint { display: none; }   /* the strip below already says where you are */

  /* The elevation profile survives on phones — laid on its side along the
     bottom, carrying the milestone you are actually at. */
  .ribbon {
    top: auto; bottom: 0; left: 0; right: 0;
    width: auto;
    height: calc(56px + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: linear-gradient(to top,
      var(--sky-lo) 0%,
      color-mix(in srgb, var(--sky-lo) 82%, transparent) 62%,
      transparent 100%);
  }
  .ribbon svg { display: block; height: 56px; }
  .ribbon .rb-label { font-size: 9.5px; }
  .ribbon .rb-tick { stroke: color-mix(in srgb, var(--mist) 38%, transparent); }

  .band, .foot { padding-right: var(--pad); }
  .fleet li { grid-template-columns: 1fr auto; gap: 6px 14px; }
  .fleet .f-name { grid-column: 1 / -1; }
  .fleet .f-seats { text-align: left; }
  .route__meta { grid-template-columns: 1fr 1fr; }
  .selfdrive { padding: 22px 20px; }
  .route__fact { padding: 14px 16px; }
  .film__scrim {
    background:
      linear-gradient(to top, var(--sky-lo) 4%, color-mix(in srgb, var(--sky-lo) 76%, transparent) 34%, transparent 66%);
  }
}

/* ==========================================================================
   REDUCED MOTION — the film freezes on one frame per chapter, copy just stacks
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .chapter { transition: none; }
  .film__grain { display: none; }
}

/* ==========================================================================
   STATIC LAYOUT — used in two situations:
     1. prefers-reduced-motion: reduce  (body.is-static)
     2. viewports under 520px tall, which is what 400% browser zoom produces.
        A pinned 411px chapter in a 256px viewport is clipped off the top and
        cannot be scrolled back into view, because the dock is fixed.
   In both cases the chapters become ordinary flowing content. They keep an
   opaque panel: this layout puts them outside the film's left scrim, and
   without it the copy dropped to 2.17:1 over a bright frame.
   ========================================================================== */

body.is-static .dock { position: static; width: auto; max-width: 820px; margin: 0; padding: 0 var(--pad); }
body.is-static .chapter,
body.is-static .chapter.is-on {
  position: static; opacity: 1; transform: none;
  margin: 0 0 56px; padding: 26px 26px 28px;
  background: color-mix(in srgb, var(--basalt) 93%, transparent);
  border: 1px solid color-mix(in srgb, var(--mist) 13%, transparent);
  transition: none;
}
body.is-static .hint { display: none; }

@media (max-height: 519px) {
  .dock {
    position: static; width: auto; max-width: 820px;
    margin: 0; padding: 0 var(--pad);
  }
  .chapter, .chapter.is-on {
    position: static; opacity: 1; transform: none;
    margin: 0 0 40px; padding: 20px;
    background: color-mix(in srgb, var(--basalt) 93%, transparent);
    border: 1px solid color-mix(in srgb, var(--mist) 13%, transparent);
    transition: none;
  }
  .hint { display: none; }
  .stage { padding: 96px 0 40px; }
}

/* ==========================================================================
   FORCED COLORS — the canvas is exempt from forced-color-adjust and keeps
   painting under text that the OS has forced to black, giving 1.28:1.
   ========================================================================== */

@media (forced-colors: active) {
  .film, .film__grain, .film__scrim { display: none; }
  .topbar::before, .ribbon { background: none; }
  .chapter, .chapter.is-on { position: static; opacity: 1; transform: none; margin-bottom: 48px; }
  .dock { position: static; width: auto; max-width: 820px; padding: 0 var(--pad); }
  .hint { display: none; }
}