/* Rx Route story: one fixed hairline world, copy at waypoints, a clickable route rail.
   The shared header and footer come from shared/rx.css; this file only styles the world, its rail and its copy.
   ponytail: the Thai headings, rail labels and kicker keep the h-story original's tracking (.rail a, .kick)
   - ticket 01 also says Thai is never letter-spaced. The two rules conflict; matching the approved
   original won. If P'Ek wants the rule to cover the story too, drop those letter-spacing values here. */
:root {
  /* only what the story changes: the world sits on #fbfbfa, not the kit's white, so the shared header
     and footer bound to --paper blend into it. Every other token comes from shared/rx.css. */
  --canvas: #fbfbfa; --paper: #fbfbfa; --accent-ink: #fbfbfa;
  /* the hairline palette (kernel classes read these) */
  --hairline-plate: var(--canvas); --hairline-edge: #3d4250; --hairline-mid: #b4b4ba;
  --hairline-lo: #c3c8d2; --hairline-hi: var(--accent); --hairline-stroke: 1;
}

/* the world in colour: every solid is filled by its material; its top cap is the same hue, lit from above */
:root .stage [class*="m-"] > .sil { fill: var(--fill); }
:root .stage [class*="m-"] > .top { fill: color-mix(in srgb, var(--fill) 58%, #fff); }
:root .stage {
  --c-blue: #4274e8; --c-coral: #e8604c; --c-sand: #f1b541; --c-green: #3e9a6e; --c-slate: #66788f; --c-navy: #22385c;
}
:root .m-box { --fill: #d2a670; }
:root .m-post, :root .m-cab, :root .m-fin, :root .m-ct1 { --fill: var(--c-blue); }
:root .m-beam { --fill: #ef8a2e; }
:root .m-wall { --fill: #eef2f7; }
:root .m-roof { --fill: #cfd8e4; }
:root .m-sky, :root .m-glass { --fill: #a9c6f0; }
:root .m-belt, :root .m-chassis { --fill: #444a55; }
:root .m-leg, :root .m-engine { --fill: #9aa2ad; }
:root .m-gate { --fill: var(--c-slate); }
:root .m-ct2, :root .m-crane, :root .m-car1 { --fill: var(--c-coral); }
:root .m-ct3, :root .m-trolley, :root .m-funnel, :root .m-fork, :root .m-car3 { --fill: var(--c-sand); }
:root .m-ct4, :root .m-car4 { --fill: var(--c-green); }
:root .m-ct5, :root .m-car2 { --fill: var(--c-slate); }
:root .m-hull { --fill: var(--c-navy); }
:root .m-hullred { --fill: #b8413a; }
:root .m-white, :root .m-tbox { --fill: #ffffff; }
:root .m-annex { --fill: #e6ecf4; }
:root .m-eave { --fill: var(--c-slate); }
:root .m-wing { --fill: #e4e8ee; }
:root .m-pallet, :root .m-trunk { --fill: #a77b4f; }
:root .m-canopy { --fill: #6fae7b; }
:root .m-water { --fill: #d3e5f6; }
:root .m-runway { --fill: #626876; }
:root .m-site { --fill: #f1f2ee; }
:root .m-road { --fill: #d9dde3; }
:root .stage .win { fill: #a9c6f0; stroke: var(--hairline-edge); }
:root .stage .stripe { fill: var(--accent); stroke: none; }
:root .stage .lamp { fill: #fff1a8; stroke: var(--hairline-edge); }
:root .stage .tire { fill: #2b2e35; }
:root .stage .hubc { fill: #c9ced6; }
:root .stage .rl { stroke: #ffffff; }
:root .stage .wave { stroke: #9cc2ea; }
:root .stage .rib { stroke: rgba(20, 24, 32, .28); }
:root .m-vest, :root .m-lifeboat { --fill: #f28c28; }
:root .m-vest2 { --fill: #e9d44a; }
:root .m-pants { --fill: #34405a; }
:root .m-skin { --fill: #e2ad84; }
:root .m-helmet { --fill: #fafafa; }
:root .m-scanner { --fill: #c9d2de; }
:root .m-screen, :root .m-bumper { --fill: #2b2e35; }
:root .m-lampoff { --fill: #8a93a0; }
:root .m-lampon { --fill: #3ecf7a; }
:root .m-dock { --fill: #c9cdd3; }
:root .stage .hole { fill: #3a3f4a; }
:root .stage .door { fill: #aeb8c6; }
:root .stage .belt-in { fill: color-mix(in srgb, #444a55 58%, #fff); stroke: var(--hairline-edge); }
:root .stage .belt-side { fill: #353a44; stroke: var(--hairline-edge); }
.stage .glow { fill: var(--hairline-plate); }
.stage .glow.on { fill: var(--accent); }
.stage .m-lampon > .sil { stroke: var(--accent); }
/* limbs: an outline stroke under a fill stroke, round-capped */
.stage .limb-o { fill: none; stroke: var(--hairline-edge); stroke-linecap: round; }
.stage .limb-i { fill: none; stroke: var(--hairline-plate); stroke-linecap: round; }
.stage .reflect { stroke: var(--hairline-mid); }
:root .stage .l-pants { stroke: #34405a; }
:root .stage .l-shoe { stroke: #22252b; }
:root .stage .l-skin { stroke: #e2ad84; }
:root .stage .l-vest { stroke: #f28c28; }
:root .stage .l-vest2 { stroke: #e9d44a; }
:root .stage .l-suit { stroke: #3b4a6b; }
:root .m-suit { --fill: #3b4a6b; }
:root .stage .reflect { stroke: #f4f6f8; }
/* brand decals: the header mark and the name, laid on faces */
.stage .decal .dmark { fill: none; stroke: var(--ink); stroke-width: 3.5; vector-effect: none; stroke-linecap: butt; }
.stage .decal .ddot { fill: var(--accent); stroke: none; }
.stage .decal .dtext { fill: var(--ink); font-family: "Archivo", system-ui, sans-serif; font-weight: 800; letter-spacing: .1em; }
.stage .decal.brand .dmark { stroke: var(--accent); }
.stage .decal.brand .dtext { fill: var(--accent); }
.stage .signbg { fill: var(--hairline-plate); stroke: var(--hairline-edge); }
:root .stage .signbg { fill: var(--accent); stroke: none; }
:root .stage .decal.light .dmark { stroke: #ffffff; }
:root .stage .decal.light .dtext, :root .stage .decal.light .ddot { fill: #ffffff; }

/* the base reset comes from shared/rx.css; the story only wants a thinner scrollbar */
html { scrollbar-width: thin; scrollbar-color: var(--ink-soft) transparent; }
.skip { position: fixed; left: var(--g); top: -60px; z-index: 21; background: var(--ink); color: var(--canvas); padding: 8px 14px; }
.skip:focus { top: 12px; }

/* the shared footer sits after the story; opaque so it never mixes with the last waypoint's copy */
.foot { position: relative; z-index: 6; background: var(--canvas); }

/* when the footer scrolls in, the rail fades out (story.js sets .end + inert); the end stage's copy stays to the
   very end and the footer (z-index 6) slides up over it */
.rail { transition: opacity 240ms var(--ease); }
.end .rail { opacity: 0; }

/* the end stage's buttons keep the story's bracket metrics; scoped to .acts so they never restyle
   the shared header's .brk. Everything else about .brk (brackets, hover, active) comes from shared/rx.css. */
.acts .brk { height: 36px; padding: 0 28px; }
.acts .brk.bold { --t: 4px; height: 44px; padding: 0 44px; font-size: 14px; font-weight: 700; }

/* the world. The kernel injects `:where([data-hairline]){aspect-ratio:5/4;touch-action:pan-y}` at zero
   specificity, so these two overrides are load-bearing: without them the fixed stage is sized 5/4
   (1440x1152 at a 1440 viewport) and the SVG letterboxes instead of filling the viewport. */
.stage { position: fixed; inset: 0; z-index: 0; aspect-ratio: auto; touch-action: auto; }
.stage svg { width: 100%; height: 100%; }
/* the globe: the Earth at the end of the story, in the same hairline as the rest of it. The disc reuses the old
   map's land fill; the coastline, the graticule and the accent arcs are drawn on the near side only. */
.stage .globe .disc { fill: #eaf0f9; stroke: var(--hairline-edge); }
.stage .globe .coast { stroke: var(--hairline-edge); }
.stage .globe .grid { stroke: var(--hairline-lo); }
.stage .globe .caps { stroke: var(--ink-soft); stroke-width: 3; stroke-linecap: round; }
.stage .globe .caps.on { stroke: var(--c-blue); }
.stage .globe .arc { stroke: var(--c-blue); stroke-width: 1.25; stroke-opacity: .4; }
/* the fleet: one small plane per route capital, in the globe's own accent; its group scales it, so it never shrinks */
.stage .globe .fleet { fill: var(--c-blue); stroke: none; }
.stage .globe circle { stroke: none; }
.stage .globe circle.hub { fill: var(--c-blue); }
.stage .globe circle.ring { fill: none; stroke: var(--c-blue); stroke-width: 1; }

/* the rail: the page's map */
.rail { position: fixed; right: var(--g); top: 50%; z-index: 4; transform: translateY(-50%); }
.rail ol { list-style: none; padding: 0; display: grid; gap: 14px; justify-items: end; }
.rail a { display: flex; align-items: center; gap: 10px; color: var(--ink-soft); font-size: 11px; font-weight: 600; letter-spacing: .08em; transition: color 180ms var(--ease); }
.rail a::after { content: ""; width: 7px; height: 7px; border: 1.5px solid currentColor; transition: background-color 180ms var(--ease), transform 180ms var(--ease); }
.rail a span { opacity: 0; transform: translateX(4px); transition: opacity 180ms var(--ease), transform 180ms var(--ease); }
.rail:hover a span, .rail a[aria-current] span, .rail a:focus-visible span { opacity: 1; transform: none; }
.rail a[aria-current] { color: var(--ink); }
.rail a[aria-current]::after { background: var(--accent); border-color: var(--accent); transform: scale(1.25); }

/* copy windows: fixed, opacity driven by story.js */
.copy { position: fixed; inset: 0; z-index: 3; pointer-events: none; }
.wp { position: absolute; max-width: 30rem; opacity: 0; visibility: hidden; padding: 18px 22px; margin: -18px -22px; background: color-mix(in srgb, var(--canvas) 84%, transparent); border-radius: 2px; }
.wp.trail { margin: -18px -22px -18px 0; }
.wp.on { visibility: visible; }
.wp.on .acts, .wp.on a { pointer-events: auto; }
.wp.lead { left: var(--g); bottom: 14vh; }
.wp.lead.top { bottom: auto; top: 17vh; }
.wp.trail { right: calc(var(--g) + 96px); top: 22vh; text-align: right; }
.wp.trail.low { top: auto; bottom: 16vh; }
.kick { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 18px; }
h1, h2 { font-weight: 700; font-stretch: 82%; letter-spacing: -.01em; line-height: 1.14; text-wrap: balance; }
h1 { font-size: clamp(2rem, 1.2rem + 2.6vw, 3.4rem); }
h2 { font-size: clamp(1.7rem, 1.1rem + 1.9vw, 2.75rem); }
.wp p { margin-top: 14px; color: var(--ink-soft); text-wrap: pretty; max-width: 26rem; }
.wp.trail p { margin-left: auto; }

.mapcopy { bottom: auto; top: 20vh; max-width: 36rem; } /* wide enough that each large point stays on one line */
/* the end stage: four delivery points, then the two calls to action */
.pts { list-style: none; padding: 0; margin-top: 22px; }
.pts li { font-size: clamp(1.15rem, 0.85rem + 0.9vw, 1.6rem); font-weight: 600; color: var(--ink); padding: 6px 0; }
.mapcopy .acts { display: flex; align-items: center; flex-wrap: wrap; gap: 16px 28px; margin-top: 28px; }

.spacer { height: 700vh; }

@media (max-width: 760px) {
  /* the shared header sizes itself at these widths (shared/rx.css) - only the story's own furniture is touched here */
  .rail { top: auto; bottom: 18px; right: 50%; transform: translateX(50%); }
  .rail ol { display: flex; gap: 18px; }
  .rail a span { display: none; }
  .wp, .wp.trail, .wp.trail.low, .wp.lead.top, .mapcopy { left: 0; right: 0; top: auto; bottom: 52px; max-width: none; margin: 0; padding: 16px var(--g) 10px; text-align: left; }
  .wp.trail p { margin-left: 0; }
  .wp { background: color-mix(in srgb, var(--canvas) 92%, transparent); }
  /* keep the end-stage panel short on mobile so the globe above it stays clear of it (see resize/keyframe) */
  .pts { margin-top: 6px; }
  .pts li { font-size: 1.05rem; padding: 3px 0; }
  .mapcopy .acts { gap: 10px 18px; margin-top: 8px; }
  .acts .brk.bold { height: 38px; padding: 0 20px; }
  /* the end on a phone: once every plane has landed (story.js sets .over) the globe dims and the panel rises onto
     the globe's centre (story.js sets --rise), so the footer later slides up over both together */
  .stage { transition: opacity .6s var(--ease); }
  .mapcopy { transition: translate .6s var(--ease), background-color .6s var(--ease); }
  .over .stage { opacity: .22; }
  .over .mapcopy { translate: 0 var(--rise, 0px); background-color: transparent; }
  h1 { font-size: 1.85rem; }
  h2 { font-size: 1.6rem; }
}
@media (prefers-reduced-motion: reduce) { .rail a span, .rail a::after, .stage, .mapcopy { transition: none; } }