/* A parcel's journey. Stacked chapters with stills by default (phones, reduced motion, no WebGL);
   html.fly + .jst.pin = the pinned cinematic sequence (desktop, 1000 x 600 and up, motion allowed). */
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; }
@font-face { font-family: "Onest Fallback"; src: local("Arial"), local("Helvetica"), local("Arimo"); size-adjust: 105%; }
:root { --sans: "Onest", "Onest Fallback", ui-sans-serif, system-ui, sans-serif; }

/* ---------- hero ---------- */
.j-hero { position: relative; padding: 112px var(--gut) var(--sp6); overflow: hidden; }
.j-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(50% 80% at 72% 0%, color-mix(in srgb, var(--warm) 9%, transparent), transparent 70%); }
.j-hero > .wrap { position: relative; }
.j-hero .crumbs { display: flex; gap: 8px; }
.j-hero .m-eyebrow { margin-bottom: var(--sp2); }
.h1 { margin: 0; max-width: 18ch; font: 400 clamp(40px, 5vw, 72px)/1.02 var(--sans); letter-spacing: -.045em; text-wrap: balance; }
.j-hrow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 380px); gap: var(--sp4) var(--sp8); align-items: end; margin-top: var(--sp3); }
.lede { margin: 0; max-width: 62ch; font-size: var(--t-lead); line-height: 1.62; color: var(--ink-2); font-weight: 300; }
.j-manifest { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0; padding: 8px 18px; border-radius: var(--r-lg); }
.j-manifest div { padding: 10px 0; border-top: 1px solid var(--line); }
.j-manifest div:nth-child(-n+3) { border-top: 0; }
.j-manifest dt { font: 500 10px/1.3 var(--mono); letter-spacing: .1em; color: var(--muted); }
.j-manifest dd { margin: 3px 0 0; font-size: 14.5px; }
@media (max-width: 860px) { .j-hrow { grid-template-columns: 1fr; } }

/* ---------- stacked story (default) ---------- */
.j-story { position: relative; padding: 0 var(--gut) var(--sp8); }
.jst { position: relative; max-width: var(--maxw); margin: 0 auto; }
.js-view, .js-hud { display: none; }
.j-ch { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; padding: var(--sp5) 0; border-top: 1px solid var(--line); }
.j-ch h3 { margin: 0; max-width: 24ch; font: 400 clamp(26px, 2.6vw, 36px)/1.1 var(--sans); letter-spacing: -.035em; text-wrap: balance; }
.j-ch > p { margin: 0; max-width: 60ch; font-size: 16px; line-height: 1.62; color: var(--ink-2); font-weight: 300; }
.j-ch > p b { font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }
.j-ch .j-src { font: 400 12px/1.55 var(--mono); color: var(--muted); }
.j-src a { color: var(--ink-2); text-underline-offset: 3px; }
.j-hand { font-size: 19px !important; color: var(--ink) !important; font-weight: 400 !important; }
.j-links { display: flex; flex-wrap: wrap; gap: 10px; }
.j-fig { margin: 4px 0 0; overflow: hidden; border-radius: var(--r-lg); border: 1px solid var(--line); background: #03050c; aspect-ratio: 4 / 5; max-width: 520px; }
.j-fig img { display: block; width: 100%; height: 100%; object-fit: cover; }
.j-fig--svg { aspect-ratio: 4 / 3; background: radial-gradient(80% 70% at 60% 40%, #0c1530, #060914 60%, #03050c); max-width: 640px; }
.j-fig--svg svg { display: block; width: 100%; height: 100%; }
#mapStill { aspect-ratio: 520 / 560; max-width: 560px; }
#mapStill .jm-lab { font-size: 14px; } #mapStill .jm-cap { font-size: 11px; } #mapStill .jm-scale text { font-size: 12px; } #mapStill .jm-ocean { font-size: 15px; }
.j-ruler { position: relative; height: 70px; margin: 34px 46px 0 18px !important; max-width: 470px; }
.j-ruler.m-ruler { --m: 0; }
@media (min-width: 861px) {
  .j-ch { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); column-gap: var(--sp6); align-content: start; }
  .j-ch > :not(.j-fig) { grid-column: 1; }
  .j-ch .j-fig { grid-column: 2; grid-row: 1 / span 8; align-self: start; position: sticky; top: 90px; }
}
.no-gl .j-fig:not(.j-fig--svg) { display: none; }

/* ---------- the schematic map and doorstep (SVG, shared by both modes) ---------- */
.jm-grid { stroke: rgba(255, 255, 255, .05); stroke-width: 1; }
.jm-dot { fill: #9fb7ff; fill-opacity: .55; stroke: #9fb7ff; stroke-opacity: .9; stroke-width: .8; }
.jm-dot.top { fill: #f0b27a; stroke: #f0b27a; fill-opacity: .75; }
.jm-port { fill: #f0b27a; }
.jm-port-r { fill: none; stroke: #f0b27a; stroke-opacity: .6; }
.jm-route { fill: none; stroke: #f0b27a; stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 1; }
.jm-route-b { fill: none; stroke: rgba(240, 178, 122, .22); stroke-width: 6; stroke-linecap: round; }
.jm-head { fill: #fff3e2; }
.jm-lab { font: 500 11px/1 var(--mono); fill: #b9c0cc; letter-spacing: .04em; }
.jm-lab b, .jm-lab .v { fill: #f0b27a; }
.jm-cap { font: 500 10px/1 var(--mono); fill: #8b94a4; letter-spacing: .12em; text-transform: uppercase; }
.jm-ocean { font: 400 italic 13px/1 var(--sans); fill: rgba(159, 183, 255, .35); letter-spacing: .3em; }
.jm-scale line { stroke: #b9c0cc; stroke-width: 1.2; }
.jm-scale text { font: 500 10px/1 var(--mono); fill: #b9c0cc; }
.jd-l { fill: none; stroke: rgba(159, 183, 255, .75); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.jd-f { fill: rgba(159, 183, 255, .06); }
.jd-glow { opacity: .9; }
.jd-box { fill: #c69c6d; stroke: #f0d3a8; stroke-width: 1.2; }
.jd-tape { fill: #e8d3ad; }
.jd-ok { font: 500 11px/1 var(--mono); fill: #5ccf95; letter-spacing: .12em; }
.jd-okr { fill: rgba(92, 207, 149, .12); stroke: rgba(92, 207, 149, .6); }

/* ---------- fly mode: the pinned sequence ---------- */
.fly .j-story { height: 760vh; padding: 0 var(--gut); }
.fly .jst { position: sticky; top: 74px; height: calc(100vh - 88px); max-width: none; overflow: hidden; border-radius: var(--r-xl); border: 1px solid var(--line); background: #03050c; isolation: isolate; }
:root[data-theme="light"] .fly .jst { border-color: rgba(11, 13, 18, .14); box-shadow: 0 30px 60px -36px rgba(15, 20, 30, .45); }
.fly .js-view { display: block; position: absolute; inset: 0; }
.js-view canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .6s var(--ease-out); }
.js-view canvas.on { opacity: 1; }
.js-map, .js-door { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.js-map { background: radial-gradient(80% 70% at 62% 44%, #0c1530 0%, #060914 55%, #03050c 100%); }
.js-door { background: radial-gradient(60% 60% at 62% 60%, #1a1420 0%, #07080f 60%, #03050c 100%); }
.js-map svg, .js-door svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.js-vig { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 90% at 60% 50%, transparent 55%, rgba(3, 5, 12, .55) 100%), linear-gradient(90deg, rgba(3, 5, 12, .62), transparent 34%); }
.js-dip { position: absolute; inset: 0; background: #03050c; opacity: 0; pointer-events: none; }
.js-leaders { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 3; }
.js-call { position: absolute; left: 0; top: 0; z-index: 4; width: 260px; opacity: 0; pointer-events: none; transform: translate3d(-999px, 0, 0); }
.js-call .m-callout-v { margin: 8px 0 0; font: 500 24px/1 var(--mono); letter-spacing: -.01em; font-variant-numeric: tabular-nums; color: var(--ink); }
.js-call .m-callout-pf { margin-top: 6px; }

.fly .js-hud { display: block; position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.js-hud > * { pointer-events: auto; }
.js-chips { position: absolute; left: 24px; top: 22px; flex-wrap: nowrap; }
.js-events { position: absolute; left: 26px; right: 250px; bottom: 22px; pointer-events: none; }
.js-read { pointer-events: none; }

/* chapter cards become the stage's left column; the stage shows one at a time */
.fly .js-chapters { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.fly .j-ch { position: absolute; left: 26px; top: 78px; width: min(392px, 31vw); display: block; padding: 18px 20px 18px; border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent); border-radius: var(--r-lg); background: rgba(10, 13, 20, .9); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 22px 44px -22px rgba(0, 0, 0, .75); color: #eef1f6; opacity: 0; transform: translate3d(-12px, 0, 0); pointer-events: none;
  --ink: #eef1f6; --ink-2: #b9c0cc; --muted: #8b94a4; --line: rgba(255, 255, 255, .085); --line-2: rgba(255, 255, 255, .16); --accent: #9fb7ff; --bg-2: #0a0d14; --bg-3: #0f131c; }
.fly .j-ch.on { pointer-events: auto; }
.fly .j-ch > * + * { margin-top: 10px; }
.fly .j-ch h3 { margin-top: 12px; font-size: clamp(22px, 1.9vw, 28px); }
.fly .j-ch > p { font-size: 14.5px; line-height: 1.58; }
.fly .j-ch .j-src { font-size: 11px; }
.fly .j-ch .j-fig { display: none; }
.fly .j-ch .j-hand { font-size: 17px !important; }
.fly .j-ch .btn.ghost-s { color: #eef1f6; border-color: rgba(255, 255, 255, .22); }
@media (max-height: 760px) { .fly .j-ch > p:not(.j-src):not(.j-hand) { font-size: 13.5px; } .fly .j-ch .j-src { display: none; } }

.j-more { padding: var(--sec-y) var(--gut); }
.j-more .h2 { margin: 0; }
.j-more .sec-sub { margin: var(--sp2) 0 var(--sp3); }

@media (prefers-reduced-motion: reduce) { .js-view canvas { transition: none; } }