/* GENERATED by scripts/build-flight-embed.mjs — do not edit by hand. */

/* ============================================================================
   scrollcraft.css: the taste floor
   ----------------------------------------------------------------------------
   Two layers, and the split matters:

     TOKENS   what you override per brand. Colour roles, the type ramp, the
              spacing scale, elevation, motion. A brand is ~12 values.
     DEVICES  what the engine drives. Do not restyle these to taste; they are
              the mechanism. Style your own markup instead.

   Nothing here draws a "component". There are no card, badge, or pill classes,
   because a stylesheet that ships those is how every page built on it ends up
   with the same shapes. You get a floor and a vocabulary; the composition is
   yours.
   ========================================================================== */

/* ---------------------------------------------------------------- tokens -- */
:root {
  /* --- colour roles. Override these six and the page is rebranded. -------- */
  --sc-canvas:      #08090b;   /* the page ground. Drift interpolates this.   */
  --sc-surface:     #101217;   /* anything raised off the ground             */
  --sc-ink:         #f4f2ef;   /* primary text                               */
  --sc-ink-soft:    #9a9ba1;   /* secondary text. Tinted, never flat gray.   */
  --sc-accent:      #d8ff3e;   /* ONE accent. It owns a region, not confetti. */
  --sc-accent-ink:  #08090b;   /* text that sits on the accent               */

  --sc-hairline:    color-mix(in oklab, var(--sc-ink) 12%, transparent);
  --sc-hairline-strong: color-mix(in oklab, var(--sc-ink) 22%, transparent);

  /* --- type. Two families max. Display carries voice, text carries prose. - */
  --sc-font-display: "Instrument Sans", "Geist", system-ui, sans-serif;
  --sc-font-text:    "Geist", system-ui, sans-serif;
  --sc-font-mono:    "Geist Mono", ui-monospace, monospace;

  /* Fluid ramp. Tracking tightens as size grows because a face set at 6rem
     with 0 tracking reads loose; this is optical correction, not decoration. */
  --sc-t-xs:   clamp(0.75rem, 0.72rem + 0.15vw, 0.82rem);
  --sc-t-sm:   clamp(0.875rem, 0.84rem + 0.18vw, 0.95rem);
  --sc-t-base: clamp(1rem, 0.96rem + 0.22vw, 1.125rem);
  --sc-t-lg:   clamp(1.2rem, 1.1rem + 0.5vw, 1.5rem);
  --sc-t-xl:   clamp(1.6rem, 1.35rem + 1.2vw, 2.25rem);
  --sc-t-2xl:  clamp(2.1rem, 1.6rem + 2.4vw, 3.4rem);
  --sc-t-3xl:  clamp(2.8rem, 1.9rem + 4.2vw, 5rem);
  --sc-t-4xl:  clamp(3.4rem, 1.9rem + 6.6vw, 7.5rem);

  --sc-track-tight:  -0.035em;
  --sc-track-snug:   -0.02em;
  --sc-track-normal: -0.005em;
  --sc-track-wide:    0.08em;

  --sc-leading-none: 0.94;
  --sc-leading-tight: 1.06;
  --sc-leading-body: 1.62;

  --sc-measure: 62ch;

  /* --- space. 4px base: the useful middle steps an 8-only scale misses. --- */
  --sc-1: 0.25rem;  --sc-2: 0.5rem;   --sc-3: 0.75rem;  --sc-4: 1rem;
  --sc-5: 1.5rem;   --sc-6: 2rem;     --sc-7: 3rem;     --sc-8: 4rem;
  --sc-9: 6rem;     --sc-10: 8rem;    --sc-11: 12rem;

  /* Section rhythm is fluid so a phone doesn't inherit desktop air. */
  --sc-section: clamp(4.5rem, 9vw, 11rem);
  --sc-gutter:  clamp(1.25rem, 5vw, 5.5rem);
  --sc-maxw:    82rem;

  /* --- radius. Pick one scale for the page and hold it. ------------------- */
  --sc-r-sm: 6px;  --sc-r-md: 12px;  --sc-r-lg: 20px;  --sc-r-pill: 999px;

  /* --- elevation. Every shadow has an offset AND a soft blur, and is tinted
         to the canvas hue. A zero-offset coloured halo is decoration, not
         depth, so there isn't one here. ---------------------------------- */
  --sc-shadow-color: 220 40% 2%;
  --sc-e1: 0 1px 2px hsl(var(--sc-shadow-color) / 0.28),
           0 2px 6px -1px hsl(var(--sc-shadow-color) / 0.20);
  --sc-e2: 0 2px 4px hsl(var(--sc-shadow-color) / 0.24),
           0 8px 18px -4px hsl(var(--sc-shadow-color) / 0.30);
  --sc-e3: 0 4px 8px hsl(var(--sc-shadow-color) / 0.22),
           0 18px 40px -8px hsl(var(--sc-shadow-color) / 0.38),
           0 48px 90px -24px hsl(var(--sc-shadow-color) / 0.30);

  /* Edge light: a 1px top highlight sells a raised surface better than any
     amount of blur, because real raised things catch light on their lip. */
  --sc-edge: inset 0 1px 0 color-mix(in oklab, var(--sc-ink) 10%, transparent);

  /* --- motion. Built-in CSS easings are too weak for UI. ------------------ */
  --sc-ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
  --sc-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --sc-ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --sc-d-fast: 160ms;  --sc-d-base: 240ms;  --sc-d-slow: 420ms;

  --sc-z-stage: 1; --sc-z-copy: 20; --sc-z-chrome: 60;
}

/* --------------------------------------------------------------- reset -- */
*, *::before, *::after { box-sizing: border-box; }
/* html reset dropped for embed — the site owns document scroll */
/* reduced-motion scroll-behavior dropped for embed — site-owned */

.flight-hero {
  background: var(--sc-canvas);
  color: var(--sc-ink);
  font-family: var(--sc-font-text);
  font-size: var(--sc-t-base);
  line-height: var(--sc-leading-body);
  letter-spacing: var(--sc-track-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-synthesis-weight: none;
  overflow-x: clip;
}
.flight-hero :where(img, video, canvas, svg) { display: block; max-width: 100%; }
.flight-hero :where(button, input, select, textarea) { font: inherit; color: inherit; }

/* ------------------------------------------------- the browser surfaces --
   The parts you did not draw still carry the design. Selection, caret, focus
   ring, scrollbar and tabular numerals all ship with defaults that belong to no
   design system. Theming them is the cheapest signal that a page was built
   rather than assembled, and it is the step that gets skipped most reliably. */
.flight-hero ::selection { background: var(--sc-accent); color: var(--sc-accent-ink); }
.flight-hero { caret-color: var(--sc-accent); accent-color: var(--sc-accent); }
:focus-visible {
  outline: 2px solid var(--sc-accent);
  outline-offset: 3px;
  border-radius: var(--sc-r-sm);
}
:where(a) { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
/* scrollbar theming dropped for embed — site-owned */
:where(table, .sc-nums, [data-sc-count]) { font-variant-numeric: tabular-nums; }

/* ----------------------------------------------------------- typography -- */
.sc-display {
  font-family: var(--sc-font-display);
  font-weight: 500;
  line-height: var(--sc-leading-none);
  letter-spacing: var(--sc-track-tight);
  text-wrap: balance;
  margin: 0;
}
.sc-display--xl { font-size: var(--sc-t-4xl); }
.sc-display--lg { font-size: var(--sc-t-3xl); }
.sc-display--md { font-size: var(--sc-t-2xl); letter-spacing: var(--sc-track-snug); }
.sc-lede {
  font-size: var(--sc-t-lg);
  line-height: 1.44;
  letter-spacing: var(--sc-track-snug);
  color: var(--sc-ink);
  max-width: 46ch;
  text-wrap: pretty;
  margin: 0;
}
.sc-body { max-width: var(--sc-measure); color: var(--sc-ink-soft); text-wrap: pretty; margin: 0; }
.sc-label {
  font-family: var(--sc-font-mono);
  font-size: var(--sc-t-xs);
  letter-spacing: var(--sc-track-wide);
  text-transform: uppercase;
  color: var(--sc-ink-soft);
}

/* ---------------------------------------------------------------- layout -- */
.sc-wrap { width: 100%; max-width: var(--sc-maxw); margin-inline: auto; padding-inline: var(--sc-gutter); }
.sc-section { padding-block: var(--sc-section); }
/* More space above a heading than below it: the gap belongs to the boundary,
   not to the pair. */
.sc-stack > * + * { margin-top: var(--sc-4); }
.sc-stack > :is(h1,h2,h3) { margin-top: var(--sc-7); }
.sc-stack > :is(h1,h2,h3):first-child { margin-top: 0; }
.sc-rule { height: 1px; border: 0; background: var(--sc-hairline); margin: 0; }

/* =============================================================== DEVICES ==
   Driven by the engine. Restyle your own markup, not these.                */

.sc-act--pinned { position: relative; }
.sc-stage {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  overflow: clip;
  z-index: var(--sc-z-stage);
}

/* scrub / sequence media */
.sc-stage :is(video[data-sc-scrub], canvas[data-sc-sequence], .sc-stage__poster) {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
video[data-sc-scrub] { opacity: 0; transition: opacity 380ms var(--sc-ease-out); }
.sc-has-clip video[data-sc-scrub] { opacity: 1; }
/* The poster is a live frame-holder, not a placeholder: it stays up until a
   real video frame has painted, which is what stops the blank-stage flash. */
.sc-stage__poster { z-index: 0; transition: opacity 380ms var(--sc-ease-out); }
.sc-has-clip .sc-stage__poster { opacity: 0; }

/* A scrim only where text sits. A full-frame darkening layer flattens the
   image everywhere to fix contrast in one corner. */
.sc-scrim {
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: linear-gradient(
    var(--sc-scrim-angle, 180deg),
    color-mix(in oklab, var(--sc-canvas) var(--sc-scrim-a, 78%), transparent) 0%,
    color-mix(in oklab, var(--sc-canvas) 30%, transparent) 42%,
    transparent 68%);
}
/* Point the scrim at the copy. A scrim gradient that darkens the top while the
   copy sits at the bottom fixes contrast nowhere and flattens the image
   everywhere, which is the most common way text-over-video goes wrong. */
.sc-scrim--bottom { --sc-scrim-angle: 0deg; }
.sc-scrim--left   { --sc-scrim-angle: 90deg; }
.sc-scrim--right  { --sc-scrim-angle: 270deg; }

/* Corner scrims, for copy anchored to a corner. An edge gradient has to darken
   a whole band across the frame to cover one corner; a corner gradient puts the
   density where the text is and leaves the rest of the image alone. Pair with
   .sc-copy--lead / .sc-copy--trail. */
.sc-scrim--lead {
  background: linear-gradient(to top right,
    color-mix(in oklab, var(--sc-canvas) 94%, transparent) 0%,
    color-mix(in oklab, var(--sc-canvas) 72%, transparent) 30%,
    color-mix(in oklab, var(--sc-canvas) 30%, transparent) 52%,
    transparent 72%);
}
.sc-scrim--trail {
  background: linear-gradient(to top left,
    color-mix(in oklab, var(--sc-canvas) 94%, transparent) 0%,
    color-mix(in oklab, var(--sc-canvas) 72%, transparent) 30%,
    color-mix(in oklab, var(--sc-canvas) 30%, transparent) 52%,
    transparent 72%);
}
/* A band across the bottom, for copy that spans the full width of the frame.
   That is what both corner anchors become below 860px, and it is also the right
   shape whenever the copy block is wider than a corner. */
.sc-scrim--band {
  background: linear-gradient(to top,
    color-mix(in oklab, var(--sc-canvas) 94%, transparent) 0%,
    color-mix(in oklab, var(--sc-canvas) 74%, transparent) 22%,
    color-mix(in oklab, var(--sc-canvas) 30%, transparent) 42%,
    transparent 58%);
}
.sc-scrim--vignette {
  background: radial-gradient(120% 90% at 50% 45%, transparent 40%,
              color-mix(in oklab, var(--sc-canvas) 70%, transparent) 100%);
}

/* copy over a stage.
   max-width is in rem, never ch. A `ch` on this container resolves against the
   CONTAINER's font-size (body size), not the display size of the heading inside
   it, so `max-width: 20ch` here silently produces a ~180px column and wraps a
   hero headline to six lines. Set a ch measure on the text element itself. */
.sc-copy {
  position: absolute; z-index: var(--sc-z-copy);
  inset-inline: var(--sc-gutter);
  max-width: min(46rem, 76vw);
  will-change: opacity, transform;
}
.sc-copy--lead   { left: var(--sc-gutter); bottom: clamp(3rem, 12vh, 9rem); }
/* inset-inline FIRST. It is the shorthand for left+right, so declaring it after
   `left: 50%` resets left to auto and the block drifts off the left edge. */
.sc-copy--center { inset-inline: auto; left: 50%; top: 50%; translate: -50% -50%; text-align: center; }
.sc-copy--trail  { inset-inline: auto; right: var(--sc-gutter); bottom: clamp(3rem, 12vh, 9rem); text-align: right; }

/* cue defaults: the engine writes opacity/transform inline, these are the
   pre-paint state so nothing flashes before the first read() */
[data-sc-cue] { opacity: 0; will-change: opacity, transform; }
.sc-ready [data-sc-cue] { transition: none; }

/* kinetic split */
.sc-split { display: inline-block; overflow: hidden; vertical-align: top; }
/* Descenders live below the baseline; a line mask clipped to the line box eats
   the tails off g, y, p, j. The padding buys them room back. */
.sc-split--line { display: block; padding-bottom: 0.14em; margin-bottom: -0.14em; }
.sc-split__i { display: inline-block; will-change: transform, opacity; }
.sc-is-split { opacity: 1 !important; }

/* horizontal rail */
[data-sc-pan] { display: flex; will-change: transform; }

/* reveal + parallax */
[data-sc-reveal] { will-change: clip-path; }
[data-sc-parallax] { will-change: transform; }

/* flow reveal (fires once) */
[data-sc-in], [data-sc-stagger] > * {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition: opacity 620ms var(--sc-ease-out), transform 620ms var(--sc-ease-out);
}
[data-sc-in].sc-in, [data-sc-stagger] > .sc-in { opacity: 1; transform: none; }

/* pointer devices */
[data-sc-tilt] { transform-style: preserve-3d; will-change: transform; }
[data-sc-magnet] { will-change: transform; }
/* isolation always; position only if nothing more specific already set it.
   Written with :where() (zero specificity) on purpose: a plain `position:
   relative` here has the same weight as `.sc-stage` and, being later in the
   file, silently wins. A stage carrying both attributes then stops being
   sticky and the whole act scrolls away instead of pinning. */
[data-sc-spotlight] { isolation: isolate; }
:where([data-sc-spotlight]) { position: relative; }
[data-sc-spotlight]::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: radial-gradient(
    28rem 28rem at calc(var(--sc-mx, 0.5) * 100%) calc(var(--sc-my, 0.5) * 100%),
    color-mix(in oklab, var(--sc-accent) 16%, transparent), transparent 70%);
  opacity: 0; transition: opacity var(--sc-d-slow) var(--sc-ease-out);
}
[data-sc-spotlight]:hover::after { opacity: 1; }

/* =========================================================== WORLDFLIGHT ==
   One fixed stage for the whole page. The only thing in document flow is the
   spacer, and it is empty. If you find yourself adding a section here, you want
   act mode instead: the moment a real block scrolls past the fixed stage, the
   page has a seam again and the whole point is gone.                        */

[data-sc-mode="worldflight"] { position: relative; }

.sc-world {
  position: fixed; inset: 0;
  overflow: clip;
  z-index: var(--sc-z-stage);
  background: var(--sc-canvas);
}

/* Every leg is mounted for the life of the page and stacked in the same box.
   The engine owns opacity, visibility and z-index here; do not set them. */
.sc-world__seg {
  position: absolute; inset: 0;
  opacity: 0;
  will-change: opacity;
}
.sc-world__seg > :is(video, img, canvas) {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
/* The poster is the frame-holder AND the first camera move: the engine pushes
   it in slowly until a real decoded frame is available to replace it. */
.sc-world__poster {
  z-index: 0;
  transform-origin: 50% 50%;
  transition: opacity 420ms var(--sc-ease-out);
}
.sc-world__seg > video { z-index: 1; }
.sc-world__seg.sc-has-clip .sc-world__poster { opacity: 0; }
/* The act stylesheet lights a clip through its ancestor act. A worldflight leg
   has no act, so match the class the engine also writes on the clip itself. */
video[data-sc-scrub].sc-has-clip { opacity: 1; }

/* The copy layer is fixed too, and inert by default: the engine hands
   pointer-events back to a block only while it is actually legible. */
.sc-world__copy {
  position: fixed; inset: 0;
  z-index: var(--sc-z-copy);
  pointer-events: none;
}
.sc-world__scrim { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
[data-sc-copy] {
  opacity: 0;
  pointer-events: none;
  will-change: opacity, transform;
}
.sc-ready [data-sc-copy] { transition: none; }

/* The track. Empty on purpose. */
.sc-world__spacer { pointer-events: none; }

/* scroll progress */
[data-sc-progress] {
  position: fixed; inset: 0 0 auto 0; height: 2px; z-index: var(--sc-z-chrome);
  background: var(--sc-accent); transform-origin: 0 50%; transform: scaleX(0);
  will-change: transform;
}

/* ----------------------------------------------------------- atmosphere --
   Depth is not only shadow. Grain keeps a flat dark ground from banding, and
   it is the difference between "a dark page" and "a lit room". */
.sc-grain { position: fixed; inset: 0; pointer-events: none; z-index: 3; opacity: 0.045; }
.sc-grain::before {
  content: ""; position: absolute; inset: -50%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23n)'/></svg>");
}

/* -------------------------------------------------------- reduced motion -- */
@media (prefers-reduced-motion: reduce) {
  /* Fewer and gentler, not zero. Opacity still carries the reveal so the page
     is comprehensible; every position change is dropped. */
  [data-sc-in], [data-sc-stagger] > * { transform: none; transition-duration: 220ms; }
  [data-sc-parallax], [data-sc-pan], .sc-split__i { transform: none !important; }
  /* A wipe is a position change too. Show reveal content settled. */
  [data-sc-reveal] { clip-path: none !important; }
  /* A rail's transform IS its navigation, not decoration. Zeroing it the way
     parallax and kinetic type are zeroed parks the act on its first screenful
     and makes everything past the fold unreachable: a device degrading into
     missing content. Hand the travel back to the reader as an ordinary scroll
     region instead, so the same items are all still gettable without motion.
     A build that would rather re-lay the rail out as a grid can still do that;
     this is the floor, not the ceiling. */
  [data-sc-act="pan"] .sc-stage,
  [data-sc-act="pan"] [data-sc-stage] {
    overflow-x: auto; overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
  }
  [data-sc-pan] > * { scroll-snap-align: center; }
  [data-sc-spotlight]::after { display: none; }
  /* A worldflight keeps its whole story here. No clip is ever fetched, so the
     posters are the film, and they cross-dissolve through exactly the same
     seams at exactly the same scroll positions. The push-in and the copy drift
     are the only things that go. */
  .sc-world__poster, [data-sc-copy] { transform: none !important; }
}

/* --------------------------------------------------------------- mobile -- */
@media (max-width: 860px) {
  .sc-copy { inset-inline: var(--sc-gutter); max-width: none; }
  .sc-copy--trail { text-align: left; }
  .sc-stage { height: 100svh; }
  /* .sc-copy--trail re-anchors to the left and spans the full width here, so a
     bottom-RIGHT corner gradient darkens the one corner the copy just left and
     guarantees a contrast failure over any bright clip. Point the density at
     the copy: the same band .sc-scrim--band paints. */
  .sc-scrim--trail {
    background: linear-gradient(to top,
      color-mix(in oklab, var(--sc-canvas) 94%, transparent) 0%,
      color-mix(in oklab, var(--sc-canvas) 74%, transparent) 22%,
      color-mix(in oklab, var(--sc-canvas) 30%, transparent) 42%,
      transparent 58%);
  }
}


/* ---- from the flight page's inline <style> ---- */

  :root {
    --sc-canvas:     #05060A;
    --sc-surface:    #12100D;
    --sc-ink:        #F2EEE6;
    --sc-ink-soft:   #ABA396;
    --sc-accent:     #E8622C;
    --sc-accent-ink: #14100B;
    /* The site's faces, so /flights is not a different website from the page
       that links to it: Oswald for display, Space Grotesk for text, JetBrains
       Mono for the instrument. Same three next/font loads on the homepage. */
    --sc-font-display: "Oswald", system-ui, sans-serif;
    --sc-font-text:    "Space Grotesk", system-ui, sans-serif;
    --sc-font-mono:    "JetBrains Mono", ui-monospace, monospace;
    /* Space the copy column leaves for the instrument. One token, so every
       act starts on the same left edge instead of five edges 149px apart. */
    --rail: 124px;
    --col: 880px;        /* one width for every copy block: one right edge */
  }
  /* the alt-note only fits beside the rail on a wide screen; the reserve
     grows to clear it there and it is hidden below that. */
  @media (min-width: 1281px) { :root { --rail: 268px; } }
  @media (max-width: 860px)  { :root { --rail: 0px; } }
  html { background: var(--sc-canvas); }

  /* ── instrument flight: the live world sits under every act ── */
  /* The sky. The canvas is transparent (alpha: true), so this gradient is what
     sits above the ridgeline and behind the far edge of the DEM tile: night
     blue at the top, the fog's own colour at the horizon band, warm haze at
     the bottom where the ground is. scene.fog is set to the middle stop, so
     distant terrain dissolves into it instead of ending in a hard cut. */
  #world { position: fixed; inset: 0; z-index: 0;
    background: linear-gradient(to bottom,
      #05070d 0%, #0c121c 34%, #1b2430 56%, #2a2b2b 72%, #14161a 100%); }
  #world canvas { width: 100%; height: 100%; display: block; }
  #veil { position: fixed; inset: 0; z-index: 1; background: var(--sc-canvas);
          opacity: 0.3; pointer-events: none; }
  /* WebGL-less fallback: the real satellite still, pushed slowly by scroll */
  #flat { position: fixed; inset: 0; z-index: 0; display: none;
          background: url("assets/satellite.jpg") center / cover no-repeat; }
  html.no3d #flat { display: block; }
  html.no3d #world { display: none; }
  .flight-hero .flight-acts { position: relative; z-index: 2; }
  [data-sc-stage] { background: transparent; }

  /* pin labels projected from the 3D world */
  /* Sized and weighted to be found. 11px at 66% opacity over satellite
     imagery is a smudge; this sits on a near-solid ground with the accent
     carrying the edge, and lifts further above the marker so the stalk below
     it reads as pointing at something. */
  .pin-label { position: fixed; z-index: 3; transform: translate(-50%, -190%);
    font-family: var(--sc-font-display); font-weight: 600; font-size: 13px;
    letter-spacing: 0.05em;
    color: var(--sc-ink); background: rgba(5,6,10,0.9);
    border: 1px solid rgba(255,122,30,0.85);
    box-shadow: 0 2px 14px rgba(0,0,0,0.55);
    padding: 5px 11px; border-radius: 5px; opacity: 0;
    pointer-events: none; white-space: nowrap; }
  .pin-label b { color: var(--sc-accent); font-variant-numeric: tabular-nums; }
  .pin-label.on { opacity: 1; }

  #calm { margin-top: 10px; background: none; border: 1px solid rgba(255,255,255,0.18);
    color: var(--sc-ink-soft); font-family: var(--sc-font-display); font-size: 9px;
    letter-spacing: 0.14em; text-transform: uppercase; padding: 4px 7px; border-radius: 4px;
    cursor: pointer; transition: color 200ms, border-color 200ms; }
  #calm:hover, #calm:focus-visible { color: var(--sc-ink); border-color: var(--sc-accent); }
  #calm[aria-pressed="true"] { color: var(--sc-accent); border-color: rgba(232,98,44,0.5); }

  /* close act: nothing but the mountain and the one action */
  #a-close .close-stage { position: absolute; inset: 0; display: flex;
    align-items: flex-end; justify-content: center; padding-bottom: 12vh;
    pointer-events: none; }
  #a-close .close-stage .cta { pointer-events: auto; }
  #a-close .foot { position: absolute; left: 0; right: 0; bottom: 0; }

  /* ── the instrument, v2: bigger, and it is the nav ── */
  /* 84px fitted "TRAVERSE" and nothing longer. The rail is translated on the
     site (Spanish "CAMPAMENTOS", "TRAVESÍA"), and a nav item that wraps to two
     lines makes the whole rail uneven. 104px holds eleven characters at 9px
     with the tracking these labels carry; --rail below reserves it. */
  #inst { position: fixed; left: 18px; top: 50%; transform: translateY(-50%);
    width: 104px; z-index: 40; font-family: var(--sc-font-display);
    display: flex; flex-direction: column; align-items: center; gap: 12px; }
  #inst .alt-val { font-size: 22px; font-weight: 800; letter-spacing: 0.01em;
    font-variant-numeric: tabular-nums; color: var(--sc-ink); text-align: center; line-height: 1.05; }
  #inst .alt-val small { display: block; font-size: 9px; font-weight: 600;
    color: var(--sc-ink-soft); letter-spacing: 0.16em; }
  #inst svg { display: block; }
  #wp { list-style: none; margin: 0; padding: 0; width: 100%; }
  #wp li { margin: 0; }
  #wp button { display: block; width: 100%; background: none; border: 0;
    font: 600 9px/1.6 var(--sc-font-display); letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--sc-ink-soft); cursor: pointer;
    padding: 3px 0; text-align: center; transition: color 140ms var(--sc-ease-out); }
  #wp button:hover { color: var(--sc-ink); }
  #wp button[aria-current="true"] { color: var(--sc-accent); }
  #wp button:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 2px; }
  /* Tracks the rail's own width rather than restating it: widening #inst for
     translated labels used to slide the rail out from under this and the note
     printed over the waypoint list. */
  #inst .alt-note { position: absolute; left: calc(100% + 12px); top: 50%; transform: translateY(-50%);
    width: 150px; font-size: 10.5px; line-height: 1.45; color: var(--sc-ink-soft);
    opacity: 0; transition: opacity 480ms var(--sc-ease-out);
    border-left: 1px solid rgba(242,238,230,0.22);
    /* The rail was given a ground months ago because ink-soft cannot hold over
       satellite imagery; the note beside it was left bare and vanished over
       every sunlit snowfield above 5,000 m — which is exactly where its text
       has something to say. Same ground, faded out to the right so it does not
       become a second panel. */
    background: linear-gradient(to right, rgba(5,6,10,0.80) 0%,
      rgba(5,6,10,0.62) 62%, rgba(5,6,10,0) 100%);
    border-radius: 0 10px 10px 0;
    padding: 7px 16px 7px 9px; pointer-events: none; }
  #inst .alt-note.on { opacity: 1; }
  @media (max-width: 1280px) { #inst .alt-note { display: none; } }
  /* Phone: the instrument becomes a bottom HUD bar. Top-right put the chip
     straight over the right-aligned headings and number columns. */
  @media (max-width: 860px) {
    #inst { left: 0; right: 0; top: auto; bottom: 0; transform: none; width: auto;
      flex-direction: row; justify-content: center; align-items: center; gap: 10px;
      padding: 8px 10px 10px;
      background: linear-gradient(to top, rgba(5,6,10,0.94) 0%, rgba(5,6,10,0.72) 60%, rgba(5,6,10,0) 100%); }
    #inst svg, #wp { display: none; }
    #inst .alt-val { display: flex; align-items: baseline; gap: 6px; font-size: 16px; }
    #inst .alt-val small { display: inline; font-size: 9px; }
    #calm { margin-top: 0; background: rgba(5,6,10,0.8); }
  }

  /* Pinned stages are inset:0 with no max-width; .page used to carry
     max-width + auto margins on top of the same padding, so flow acts and
     pinned acts sat on two different left edges and the copy column jumped
     sideways five times down the page. Same box for both now. */
  .page { padding: 0 var(--sc-gutter) 0 calc(var(--sc-gutter) + var(--rail)); }

  /* ── one surface strategy: a directional scrim per act, no cards except
     where there is a photograph. The bordered blurred panels painted their
     full background before any content cued in, so the largest object on
     screen was repeatedly an empty box. ── */
  #a-terms { position: relative; }
  /* A flow section is shorter than the viewport, so its scrim has a visible
     bottom edge. Fade the scrim out vertically at both ends. */
  #a-terms .stage-scrim { -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 14%, #000 84%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, #000 14%, #000 84%, transparent 100%); }
  /* The ledger is a full-width table, so the standard left-weighted scrim
     cannot cover its right-hand columns at every camera position. Same
     treatment, longer dark plateau. */
  .stage-scrim--wide { background: linear-gradient(to right, rgba(5,6,10,0.90) 0%,
    rgba(5,6,10,0.84) 62%, rgba(5,6,10,0.55) 84%, rgba(5,6,10,0.10) 100%); }
  .stage-scrim { position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(to right, rgba(5,6,10,0.88) 0%, rgba(5,6,10,0.70) 46%,
                rgba(5,6,10,0.26) 78%, rgba(5,6,10,0) 100%); }
  @media (max-width: 860px) {
    .stage-scrim { background: linear-gradient(to top, rgba(5,6,10,0.92) 0%,
                   rgba(5,6,10,0.70) 58%, rgba(5,6,10,0.18) 100%); }
    /* --wide kept its left-to-right gradient on phones, so the ledger's right
       columns sat on bare satellite imagery: the shoot harness measured the
       day rows at 1.16:1 and "The camps" at 2.96:1, both below 3:1. Portrait
       needs the same bottom-weighted plate as .stage-scrim, only heavier,
       because the ledger is taller than a copy block. */
    .stage-scrim--wide { background: linear-gradient(to top, rgba(5,6,10,0.95) 0%,
                         rgba(5,6,10,0.88) 62%, rgba(5,6,10,0.42) 100%); }
  }
  #a-terms { position: relative; }
  #a-terms > .page { position: relative; z-index: 1; }
  .sc-section--tight { padding-block-start: var(--sc-6); }

  .kick { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--sc-accent); font-family: var(--sc-font-display); font-weight: 700;
    margin-bottom: 1rem; }
  /* A 10px run inside 18px body copy reads as a broken word, not a citation.
     Sources sit under their paragraph. */
  .src { display: block; font-size: 11px; color: #8E877B;
    letter-spacing: 0.03em; margin-top: 0.5rem; }
  .hero-meta .src, .stagecard .src { display: inline; font-size: inherit;
    letter-spacing: inherit; color: inherit; margin-top: 0; }


  /* THE HERO SCRIM HAD NO RULE. The markup carries a .hero-scrim div and
     nothing ever styled it, so it computed to rgba(0,0,0,0). On a wide screen
     the copy sits left over dark rock and gets away with it; in portrait it
     lands on the lit summit and the sub-copy, the CTA aside and every stat
     label rendered grey-on-white. */
  #a-hero, #a-land-open .hero-scrim {
    position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(to right,
      rgba(5,6,10,0.86) 0%, rgba(5,6,10,0.62) 42%,
      rgba(5,6,10,0.16) 76%, rgba(5,6,10,0) 100%);
  }
  @media (max-width: 860px) {
    /* Portrait puts the copy over the middle of the frame, so the plate has to
       run top-to-bottom rather than left-to-right. */
    #a-hero, #a-land-open .hero-scrim {
      background: linear-gradient(to bottom,
        rgba(5,6,10,0.93) 0%, rgba(5,6,10,0.88) 48%,
        rgba(5,6,10,0.58) 74%, rgba(5,6,10,0.20) 100%);
    }
    /* Three max-content columns wrapped 2 + 1 and sprawled edge to edge. */
    .hero-meta {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      column-gap: 1rem; row-gap: 1.1rem; margin-top: 1.6rem;
    }
    .hero-meta b { font-size: 1.55rem; }
    .hero-meta div { font-size: 11px; line-height: 1.45; }
    .hero-sub { font-size: 0.97rem; }
    .hero-cta { margin-top: 1.6rem; }
  }
  /* HERO: loud */
  #a-hero, #a-land-open .hero-wrap { position: absolute; inset: 0; display: grid;
    align-content: center; padding: 0 var(--sc-gutter) 0 calc(var(--sc-gutter) + var(--rail)); }
  .hero-h { font-family: var(--sc-font-display); font-weight: 800;
    font-size: clamp(3.4rem, 12.5vw, 11rem); line-height: 0.88;
    letter-spacing: -0.025em; margin: 0.2em 0 0.15em; color: var(--sc-ink);
    text-wrap: balance; }
  .hero-h .three60 { color: var(--sc-accent); }
  @media (max-width: 700px) { .hero-h { font-size: clamp(2.6rem, 15vw, 3.4rem); } }
  .hero-sub { max-width: 52ch; color: var(--sc-ink-soft); font-size: 1.08rem; }
  /* a grid, so the numbers sit on one baseline instead of hanging left in
     cells sized by their labels. */
  .hero-meta { margin-top: 2.4rem; display: grid;
    grid-template-columns: repeat(3, minmax(0, max-content));
    column-gap: clamp(1.6rem, 4vw, 3.2rem); row-gap: 1.5rem;
    font-family: var(--sc-font-display); }
  @media (max-width: 700px) { .hero-meta { grid-template-columns: repeat(2, minmax(0, max-content)); } }
  .hero-meta div { font-size: 12px; letter-spacing: 0.05em; color: var(--sc-ink-soft); }
  .hero-meta b { display: block; font-size: 2.1rem; font-weight: 800; letter-spacing: 0;
    color: var(--sc-ink); font-variant-numeric: tabular-nums; }
  /* a date range is not as loud as the summit altitude */
  .hero-meta b.date { font-size: 1.4rem; font-weight: 700; }
  .hero-cta { margin-top: 2.4rem; }
  .cta { display: inline-block; font: 700 13px/1 var(--sc-font-display);
    letter-spacing: 0.08em; text-transform: uppercase; color: var(--sc-accent-ink);
    background: var(--sc-accent); padding: 15px 26px; border-radius: 999px;
    text-decoration: none; box-shadow: 0 10px 30px -12px rgba(232,98,44,0.55); }
  .cta:active { transform: translateY(1px); }
  .cta:focus-visible { outline: 2px solid var(--sc-ink); outline-offset: 3px; }

  /* APPROACH: cards assemble */
  /* prose column wider than the card rail: it was 36ch against a 7fr rail */
  .appr-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    gap: clamp(1.6rem, 4vw, 3.4rem); align-items: center; max-width: calc(var(--col) + 220px); }
  @media (max-width: 860px) { .appr-grid { grid-template-columns: 1fr; } }
  .intertitle { font-family: var(--sc-font-display); font-weight: 600;
    font-size: clamp(2rem, 4.6vw, 3.6rem); line-height: 1.0; margin: 0 0 1.2rem;
    letter-spacing: -0.015em; max-width: 18ch; text-wrap: balance; }
  .stagecards { display: grid; gap: 0.9rem; }
  /* the one card token on the page: used only where there is a photograph */
  .stagecard { display: grid; grid-template-columns: 104px 1fr; gap: 0.9rem;
    align-items: center; background: rgba(5,6,10,0.72); border: 1px solid rgba(242,238,230,0.1);
    border-radius: 10px; padding: 0.7rem; backdrop-filter: blur(6px); }
  .stagecard--type { grid-template-columns: 1fr; }
  .stagecard img { width: 104px; height: 78px; object-fit: cover; border-radius: 6px; display: block; }
  .stagecard .lab { font-family: var(--sc-font-display); font-weight: 600;
    font-size: 13px; color: var(--sc-ink); }
  .stagecard .lab b { color: var(--sc-accent); font-variant-numeric: tabular-nums; }
  .stagecard .fact { font-size: 12.5px; color: var(--sc-ink-soft); line-height: 1.45; margin-top: 3px; }
  .appr-copy p { max-width: var(--sc-measure); color: var(--sc-ink-soft); }
  /* THE APPROACH · ONE CAMP PER ACT.
     This was a two-column grid with all four camps stacked in the right-hand
     column. Under 860px it collapsed to one column and the four cards ran down
     the screen over the terrain and off the bottom edge. One camp per act means
     one panel on screen, sized for a phone first. */
  /* The instrument rail is a fixed 104px (268px wide enough for the note) down
     the left edge, and --rail is the token every other act reserves for it.
     This one did not, so the camp headings ran under the rail: "Puente del
     Inca" rendered as "uente del Inca" behind the waypoint list. */
  .camp-stage { position: absolute; inset: 0; display: grid; align-content: end;
    padding: 0 clamp(1.1rem, 5vw, 4.5rem) clamp(2.2rem, 9vh, 5rem)
             calc(clamp(1.1rem, 5vw, 4.5rem) + var(--rail)); }
  .camp-panel { max-width: 32rem; }
  .camp-h { font-family: var(--sc-font-display); font-weight: 800;
    font-size: clamp(1.6rem, 4.2vw, 2.6rem); line-height: 1.02;
    letter-spacing: -0.02em; margin: 0.25rem 0 0.9rem; color: var(--sc-ink);
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.7rem; }
  .camp-h b { color: var(--sc-accent); font-size: 0.5em; font-weight: 700;
    letter-spacing: 0.02em; font-variant-numeric: tabular-nums; }
  .campshot { margin: 0 0 0.9rem; }
  .campshot img { width: 100%; max-width: 21rem; height: clamp(6.5rem, 15vh, 9.5rem);
    object-fit: cover; border-radius: 8px; display: block;
    border: 1px solid rgba(242,238,230,0.14); }
  .camp-body { color: var(--sc-ink); font-size: clamp(0.95rem, 2.4vw, 1.06rem);
    line-height: 1.5; margin: 0 0 0.6rem; max-width: 34ch; }
  .camp-intro { color: var(--sc-ink-soft); font-size: 0.92rem; line-height: 1.5;
    margin: 0 0 0.6rem; max-width: 40ch; }
  /* THE TWO ELEMENTS THE SHOOT HARNESS FAILS ON PORTRAIT.
     "The camps" kicker measured 2.96:1 and the ledger's source line 1.16:1 at
     390x844, with the scrim already at full opacity — so it was never a scrim
     problem. Both are the smallest, dimmest text on the page sitting over
     satellite imagery, and on a narrow screen the panel does not cover enough
     of the frame for the scrim gradient to do the work. The waypoint rail had
     the same problem and the same fix worked: give the type its own plate.
     Kept to the flight's own classes so nothing else on the site moves. */
  #a-camps .kick, #a-camps .src,
  #a-summit .kick, #a-summit .src,
  #a-group .kick, #a-group .src,
  #a-terms .kick, #a-terms .src {
    text-shadow: 0 1px 2px rgba(5,6,10,0.95), 0 0 10px rgba(5,6,10,0.85);
  }
  @media (max-width: 860px) {
    /* ink-soft at 11px over imagery is the losing combination. Portrait gets
       the brighter ink; the muting was only ever there to keep the source line
       from competing on a wide screen where it sits on a dark plate anyway. */
    /* THE PANEL GETS ITS OWN PLATE, because a gradient cannot do this job.
       The portrait scrim runs `to top` and is only ~0.42 alpha at the top of the
       frame — which is exactly where a panel's kicker and heading sit. Measured
       at full cue opacity (the report shows o=1 on the worst frames, so this is
       not a mid-fade artifact), "The camps" still read 1.71:1 over bright snow
       with the scrim fully in. Colour alone could not fix it and did not. */
    #a-camps .ledger-stage > div,
    #a-group .group-panel,
    #a-terms .terms-panel {
      background: rgba(5, 6, 10, 0.78);
      -webkit-backdrop-filter: blur(6px);
      backdrop-filter: blur(6px);
      border-radius: 12px;
      padding: 1rem 1.05rem;
    }
    /* SOLID colours, no color-mix with transparent — mixing toward transparent
       lowers alpha, which is the opposite of what this needs. The first attempt
       did exactly that and drove the measurement from 2.96:1 down to 1.04:1. */
    #a-camps .src, #a-summit .src, #a-group .src, #a-terms .src {
      color: #E8E4DC;
    }
    #a-camps .kick, #a-summit .kick, #a-group .kick, #a-terms .kick {
      color: #F5A87E;
    }
  }

  /* Portrait: the instrument docks along the bottom edge, so the panel stops
     above it instead of sitting under it. */
  @media (max-width: 860px) {
    .camp-stage { padding-bottom: calc(clamp(2rem, 7vh, 3.5rem) + 54px); }
    .camp-panel, .campshot img { max-width: none; }
  }


  /* CAMPS: pinned ledger, rows arrive one by one */
  .ledger-stage { position: absolute; inset: 0; display: grid; align-content: center;
    padding: 0 var(--sc-gutter) 0 calc(var(--sc-gutter) + var(--rail)); }
  .ledger-stage > div { position: relative; z-index: 1; }
  .ledger { max-width: var(--col); }
  .ledger-row { display: grid; grid-template-columns: 3.8rem minmax(0,1fr) 6.6rem 5.4rem;
    gap: 1rem; padding: 0.72rem 0; border-bottom: 1px solid rgba(242,238,230,0.08);
    align-items: baseline; }
  .ledger-row:last-child { border-bottom: 0; }
  .ledger-row .d { font-family: var(--sc-font-display); font-weight: 700;
    color: var(--sc-ink-soft); font-size: 12px; letter-spacing: 0.08em; white-space: nowrap; }
  .ledger-row .n { color: var(--sc-ink); font-size: 0.98rem; }
  .ledger-row .n small { display: block; color: var(--sc-ink-soft); font-size: 12px; margin-top: 2px; }
  .ledger-row .e { font-variant-numeric: tabular-nums; font-family: var(--sc-font-display);
    font-weight: 600; color: var(--sc-ink); font-size: 0.95rem; text-align: right; }
  .ledger-row .t { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--sc-accent); text-align: right; font-family: var(--sc-font-display); font-weight: 700; }
  .ledger-row--silence { grid-template-columns: 3rem 1fr; padding: 2.2rem 0; }
  .ledger-row--silence .n { color: var(--sc-ink-soft); font-style: italic; }
  @media (max-width: 700px) {
    .ledger-row { grid-template-columns: 2.8rem 1fr; row-gap: 0.2rem; }
    .ledger-row .t { display: none; }
    .ledger-row .e { grid-column: 2; text-align: left; color: var(--sc-ink-soft); font-size: 12px; }
  }

  /* SUMMIT: the peak. The world is the act. */
  .summit-copy { position: absolute; left: 0; right: 0; bottom: 7vh; text-align: center;
    padding: 0 var(--sc-gutter); }
  .summit-h { font-family: var(--sc-font-display); font-weight: 800;
    font-size: clamp(2.6rem, 8vw, 6.4rem); line-height: 0.95; margin: 0 0 0.35rem;
    letter-spacing: -0.02em; }
  .summit-copy p { color: var(--sc-ink-soft); max-width: 54ch; margin: 0 auto; }
  .summit-scrim { position: absolute; left: 0; right: 0; bottom: 0; height: 52%;
    background: linear-gradient(to top, rgba(5,6,10,0.95) 0%, rgba(5,6,10,0.85) 34%, rgba(5,6,10,0) 100%); }
  .canaleta-note { position: absolute; right: clamp(1rem, 4vw, 4rem); top: 18vh;
    width: 230px; text-align: left; font-size: 12px; line-height: 1.5;
    color: var(--sc-ink-soft); border-left: 1px solid rgba(242,238,230,0.22); padding-left: 10px; }
  /* The Canaleta, photographed. The terrain render carries the shape of the
     gully but not what it is underfoot; 400 m of loose scree only reads from a
     photograph. Sits under the note, same column. */
  .canaleta-shot { position: absolute; right: clamp(1rem, 4vw, 4rem); top: calc(18vh + 108px);
    width: 230px; margin: 0;
    /* Same plate as .stagecard. Without it the CC BY credit was grey text on
       sunlit satellite terrain and effectively unreadable — which for an
       attribution is not a styling nicety. */
    background: rgba(5,6,10,0.72); border: 1px solid rgba(242,238,230,0.1);
    border-radius: 10px; padding: 0.55rem; backdrop-filter: blur(6px); }
  .canaleta-shot img { width: 100%; height: 142px; object-fit: cover; display: block;
    border-radius: 6px; }
  .canaleta-shot figcaption { font-size: 10.5px; line-height: 1.45; margin-top: 6px;
    color: var(--sc-ink-soft); }
  @media (max-width: 900px) {
    /* On a phone the note already eats the top third; the photo goes below the
       copy instead of stacking two panels over the mountain. */
    .canaleta-shot { position: absolute; right: auto; left: clamp(1rem, 5vw, 2rem);
      top: auto; bottom: 12vh; width: min(46vw, 200px); }
    .canaleta-shot img { height: 116px; }
  }

  /* DESCENT: a top fade so the summit act's dark tail dissolves instead of
     sliding off as a hard block edge */
  #a-descent { position: relative; }
  #a-descent::before { content: ""; position: absolute; left: 0; right: 0; top: 0;
    height: 42vh; pointer-events: none;
    background: linear-gradient(to bottom, rgba(5,6,10,0.92) 0%, rgba(5,6,10,0) 100%); }
  .descent-line { text-align: right; position: relative; }
  .descent-line .intertitle { margin-left: auto; }

  /* GROUP: the rope team assembles */
  .group-stage { position: absolute; inset: 0; display: grid; align-content: center;
    padding: 0 var(--sc-gutter) 0 calc(var(--sc-gutter) + var(--rail)); }
  .group-panel { position: relative; z-index: 1; max-width: var(--col); }
  .team { display: flex; gap: clamp(0.7rem, 1.8vw, 1.4rem); margin: 1.8rem 0 1.2rem; flex-wrap: wrap; }
  .seat { width: 72px; text-align: center; font-family: var(--sc-font-display); }
  .seat svg { display: block; margin: 0 auto 6px; }
  .seat span { font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sc-ink-soft); }
  /* Empty seats are quiet. Orange means the thing you want, everywhere else on
     this page — spending it on absence made five vacancies the loudest object
     in the frame. Only the seat being offered keeps the accent. */
  .seat--open svg circle { stroke-dasharray: 4 5; stroke: rgba(242,238,230,0.34); }
  .seat--open svg path, .seat--open svg circle:not(:first-child) { fill: rgba(242,238,230,0.22); }
  .seat--yours svg circle { stroke: var(--sc-accent); stroke-dasharray: 4 5; }
  .seat--yours span { color: var(--sc-accent); }
  .forming-line { font-family: var(--sc-font-display); font-weight: 600; font-size: 13px;
    letter-spacing: 0.06em; color: var(--sc-ink); }
  .forming-line b { color: var(--sc-accent); }
  .profile-line { color: color-mix(in srgb, var(--sc-ink) 82%, transparent); font-size: 0.95rem; max-width: 52ch; }

  /* TERMS */
  .terms-panel { max-width: var(--col); }
  .band-line { margin: 0; font-family: var(--sc-font-display); font-weight: 700;
    font-size: clamp(2.2rem, 5.4vw, 3.8rem); color: var(--sc-ink); font-variant-numeric: tabular-nums; }
  .band-line small { display: block; font-size: 12px; font-weight: 600; letter-spacing: 0.1em;
    color: var(--sc-ink-soft); text-transform: uppercase; margin-top: 0.4rem; }
  .terms-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: clamp(1.4rem, 3vw, 2.4rem); margin-top: 1.6rem; }
  .terms-grid h3 { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--sc-accent); margin: 0 0 0.7rem; font-family: var(--sc-font-display); }
  .terms-grid ul { list-style: none; margin: 0; padding: 0; }
  .terms-grid li { padding: 0.4rem 0; border-bottom: 1px solid rgba(242,238,230,0.08);
    color: var(--sc-ink-soft); font-size: 0.93rem; }
  .cancel-tab { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
  .cancel-tab td { padding: 0.4rem 0; border-bottom: 1px solid rgba(242,238,230,0.08);
    color: var(--sc-ink-soft); font-size: 0.93rem; }
  .cancel-tab td:last-child { text-align: right; color: var(--sc-ink); font-family: var(--sc-font-display); }
  .honesty { border-left: 2px solid var(--sc-accent); padding: 0.2rem 0 0.2rem 1rem;
    max-width: 58ch; color: var(--sc-ink-soft); margin-top: 1.6rem; font-size: 0.95rem; }

  /* CLOSE: arrival at Plaza de Mulas */
  .close-stage { position: absolute; inset: 0; display: grid; align-content: center;
    justify-items: center; text-align: center; padding: 0 var(--sc-gutter); }
  .close-h { font-family: var(--sc-font-display); font-weight: 800;
    font-size: clamp(2.2rem, 6vw, 4.6rem); line-height: 1.0; margin: 0 0 1rem;
    letter-spacing: -0.02em; max-width: 16ch; text-wrap: balance; }
  .close-sub { color: var(--sc-ink-soft); max-width: 46ch; margin: 0 0 1.8rem; }
  .close-scrim { position: absolute; inset: 0;
    background: radial-gradient(ellipse 60% 55% at 50% 55%, rgba(5,6,10,0.88) 0%, rgba(5,6,10,0.55) 60%, rgba(5,6,10,0.15) 100%); }
  .foot { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.2rem var(--sc-gutter);
    display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
    font-size: 10.5px; color: color-mix(in srgb, var(--sc-ink-soft) 75%, transparent); }
  .foot .mark { font-family: var(--sc-font-display); font-weight: 700; letter-spacing: 0.18em;
    color: var(--sc-ink); }
  @media (max-width: 860px) { .foot { padding-bottom: 4.2rem; } }

/* ---- embed-only ---- */

/* The stage layers are position:fixed, so past the last act they would hang
   over the homepage forever. is-done retires them. visibility (not just
   opacity) is what stops them eating clicks meant for the site. */
.flight-hero.is-done #world,
.flight-hero.is-done #flat,
.flight-hero.is-done #veil,
.flight-hero.is-done #pins,
.flight-hero.is-done #inst,
.flight-hero.is-done .sc-grain {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 420ms ease, visibility 0s linear 420ms;
}
.flight-hero #world, .flight-hero #flat, .flight-hero #veil, .flight-hero #pins,
.flight-hero #inst, .flight-hero .sc-grain {
  transition: opacity 420ms ease;
}

/* If the engine or the scene fails to load, the stage is dead weight. Drop it
   and let the copy stand on the page background rather than on black. */
.flight-hero.flight-hero--failed #world,
.flight-hero.flight-hero--failed #veil,
.flight-hero.flight-hero--failed #inst { display: none; }

/* ---- typography: the flight borrows the SITE's typefaces ----
   The flight build asks for Archivo and Public Sans and the standalone page
   loads them from Google Fonts. The homepage does not — FlightHero injects
   this stylesheet and nothing else — so on the landing the headline fell all
   the way back to system-ui and the hero read in a typeface that appears
   nowhere else on the site.
   Loading two more webfonts on the landing is the wrong fix: it is exactly the
   first-paint weight this hero has been cut down twice to avoid. Point the
   flight's tokens at the site's own faces instead. Zero extra bytes, and the
   hero stops looking like a different website. Scoped, so the standalone page
   at /flights/aconcagua-360 keeps Archivo. */
.flight-hero {
  --sc-font-display: var(--font-display), var(--font-sans), system-ui, sans-serif;
  --sc-font-text:    var(--font-sans), system-ui, sans-serif;
  --sc-font-mono:    var(--font-mono), ui-monospace, monospace;
}

/* The door. Fixed from the first frame — arriving to read one article and
   being made to scroll a mountain first is the bounce we are trying to fix. */
.flight-hero .flight-skip {
  position: fixed;
  /* BOTTOM right, not top right.
     It started under the header at top: 84px, which put a full-size pill in
     the same column as Sign In and the locale switch — three controls stacked
     down the right edge, the largest of them the one nobody came for. The exit
     belongs at the far corner from the thing it exits: out of the header's
     lane, out of the copy's lane, and quiet enough that it reads as a way out
     rather than the page's main action. */
  bottom: max(18px, env(safe-area-inset-bottom));
  right: max(18px, env(safe-area-inset-right));
  z-index: 70;
  padding: 0.42rem 0.78rem;
  border: 1px solid color-mix(in oklab, var(--sc-ink) 20%, transparent);
  border-radius: 999px;
  background: color-mix(in oklab, var(--sc-canvas) 55%, transparent);
  -webkit-backdrop-filter: blur(9px);
  backdrop-filter: blur(9px);
  color: var(--sc-ink-soft);
  font-family: var(--sc-font-ui, var(--sc-font-text));
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  opacity: 0.72;
  transition: opacity 260ms ease, color 200ms ease, border-color 200ms ease,
              background 200ms ease;
}
.flight-hero .flight-skip:hover,
.flight-hero .flight-skip:focus-visible {
  opacity: 1;
  color: var(--sc-ink);
  border-color: var(--sc-accent);
  background: color-mix(in oklab, var(--sc-canvas) 82%, transparent);
}
.flight-hero.is-done .flight-skip { opacity: 0; pointer-events: none; }

/* The hero door sits beside a line telling you the mountain is optional, so
   the choice reads as a choice rather than a skip link. */
.flight-hero .hero-cta-aside {
  display: block;
  margin-top: 0.7rem;
  color: var(--sc-ink-soft);
  font-size: 0.82rem;
}
.flight-hero .hero-cta .cta { cursor: pointer; }

/* The instrument docks to the bottom edge on phones, where the site's own
   sticky chrome also lives. Lift it clear. */
/* Under 860px the instrument becomes a bottom HUD bar across the full width
   (see #inst in the inline block), so the door has to sit above it. */
@media (max-width: 860px) {
  .flight-hero .flight-skip {
    font-size: 0.58rem;
    padding: 0.38rem 0.7rem;
    bottom: calc(54px + max(10px, env(safe-area-inset-bottom)));
  }
}

/* The headline was sized for two words ("Aconcagua / 360") at up to 11rem. The
   site's line is nine words and at that size it ran off the viewport, so the
   reader met a wall of type with no mountain behind it. Same voice, sized for
   the sentence it actually holds. */
.flight-hero .hero-h { font-size: clamp(2.5rem, 6.4vw, 5.6rem); line-height: 0.95; }
@media (max-width: 700px) {
  .flight-hero .hero-h { font-size: clamp(2rem, 8.6vw, 2.9rem); }
}

/* The waypoint rail sat at ink-soft over satellite imagery, which is the one
   background it cannot hold: it read as smudges. Give it a spine and a ground
   so it is legible against snow as well as rock. */
.flight-hero #inst {
  padding: 10px 8px;
  border-radius: 12px;
  background: linear-gradient(to right,
    color-mix(in oklab, var(--sc-canvas) 60%, transparent),
    color-mix(in oklab, var(--sc-canvas) 22%, transparent));
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}
.flight-hero #wp button {
  color: color-mix(in oklab, var(--sc-ink) 74%, transparent);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.75);
}
.flight-hero #wp button:hover { color: var(--sc-ink); }
.flight-hero #inst .alt-val,
.flight-hero #inst .alt-val small { text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8); }
@media (max-width: 820px) {
  .flight-hero #inst { border-radius: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
}