/* Parallel round 7, Home only: "One evening, one orbit". Loaded after site.css (round 6, unchanged).
   The world is decoration behind the text: a fixed, aria-hidden layer that never takes pointer events or focus.
   Every word stays in the panels below, which scroll natively; chapters pin their panel while the camera is settled.
   Geometry tokens come from content/world.json (inline on .journey): --hold, --overlap, --pullback-hold, --map-hold. */

/* ---------------------------------------------------------------- the world layer */
.world { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; contain: strict;
  background:
    radial-gradient(120% 70% at 30% 108%, rgba(22, 36, 40, 0.9) 0%, rgba(9, 11, 11, 0) 60%),
    linear-gradient(180deg, #0d1316 0%, #0b1012 46%, #090b0b 100%); }
.world > * { position: absolute; inset: 0; width: 100%; height: 100%; }
.world-canvas, .world-seq { display: block; opacity: 0; transition: opacity 0.6s var(--ease); }
.world.is-live .world-canvas, .world.is-live .world-seq { opacity: 1; }
.world-stills img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.7s var(--ease); }
.world-stills img.is-on { opacity: 1; }
.world.is-live .world-stills { visibility: hidden; transition: visibility 0s linear 0.7s; }
/* A low, wide shade keeps the sky readable behind the masthead; panels carry their own ground. */
/* After the map the world dims as the index rises (journey.js sets --world-dim from the scroll position). */
.world-dim { background: var(--bg); opacity: var(--world-dim, 0); }
/* The world's own links: a label beside the pointer over a landmark that has one (journey.js). */
.world-tip { position: fixed; top: 0; left: 0; z-index: 30; display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 13px 0 14px; border: 1px solid rgba(var(--light-rgb), 0.5); border-radius: 999px; background: rgba(9, 12, 12, 0.72); color: var(--fg); font: 600 13.5px/1 var(--sans); white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity 0.18s var(--ease); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35), 0 0 18px rgba(var(--light-rgb), 0.16); will-change: transform; }
.world-tip.is-on { opacity: 1; }
.world-tip-icon { display: none; color: var(--light); }
.world-tip.is-external .world-tip-icon { display: block; }
html.world-pointer, html.world-pointer body, html.world-pointer .journey, html.world-pointer .chapter, html.world-pointer .chapter-pin, html.world-pointer .chapter-hold { cursor: pointer; }
.world-shade { background: linear-gradient(180deg, rgba(9, 11, 11, 0.5) 0%, rgba(9, 11, 11, 0) 16%, rgba(9, 11, 11, 0) 78%, rgba(9, 11, 11, 0.35) 100%); }
.no-js .world { display: none; }
/* Without JS the masthead never gets its scrolled ground, so on Home it stays at the top of the page (as round 6 does
   on phones without JS) instead of floating over the chapters. */
.no-js .masthead { position: absolute; }

/* Everything readable sits above the world. */
[data-page="home"] main { position: relative; z-index: 1; }
[data-page="home"] .colophon { position: relative; z-index: 1; background: var(--bg); }
/* Over a live scene the masthead never blurs (a backdrop blur would re-render the canvas under it every frame). While the
   world is behind it (journey.js sets .over-world) it is a soft scrim that lets the scene run to the top edge; at the index
   and contact it returns to a solid ground. */
[data-page="home"] .masthead.is-scrolled { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--bg); }
/* Desktop only: there the panels pin beside the scene. On phones the panels scroll under the masthead, which keeps
   its solid ground so their text never runs beneath the navigation. */
@media (min-width: 1000px) and (min-aspect-ratio: 4/5) {
  [data-page="home"] .masthead::before { content: ""; position: absolute; inset: 0 0 -40px; z-index: -1; pointer-events: none; opacity: 0; transition: opacity 0.4s var(--ease);
    background: linear-gradient(180deg, rgba(9, 11, 11, 0.8) 0%, rgba(9, 11, 11, 0.5) 52%, rgba(9, 11, 11, 0) 100%); }
  :root.over-world [data-page="home"] .masthead.is-scrolled { background: rgba(9, 11, 11, 0); border-color: transparent; }
  :root.over-world [data-page="home"] .masthead.is-scrolled::before { opacity: 1; }
}

/* ---------------------------------------------------------------- the opening (round 6) and its hand-over
   On desktop, in world and sequence modes, the take stays fixed while the copy scrolls, then dissolves into the same
   frame rendered in the studio window (journey.js sets --plate-o from u). At the top of the page this is identical
   to round 6's absolutely positioned plate. */
@media (min-width: 1000px) and (min-aspect-ratio: 4/5) {
  :root[data-journey="world"] .opening .plate,
  :root[data-journey="sequence"] .opening .plate { position: fixed; opacity: var(--plate-o, 1); }
  :root[data-journey="world"] .light-opening,
  :root[data-journey="sequence"] .light-opening { opacity: var(--plate-o, 1); }
  :root.plate-gone .opening .plate, :root.plate-gone .light-opening { visibility: hidden; }
  /* The copy and Listen fade as they rise (journey.js sets --opening-o from the scroll position) and are gone before
     they reach the masthead, which therefore stays a scrim over the take and the scene. No transition: the fade is the
     scroll itself. */
  :root[data-journey="world"] .opening-copy, :root[data-journey="sequence"] .opening-copy,
  :root[data-journey="world"] .opening .listen, :root[data-journey="sequence"] .opening .listen { opacity: var(--opening-o, 1); }
  :root[data-journey="world"] .opening .listen, :root[data-journey="sequence"] .opening .listen { transition: border-color 0.25s, background 0.25s; }
  :root.opening-faded .opening-copy, :root.opening-faded .opening .listen { pointer-events: none; }
  /* As the take dissolves, the copy scrolling away keeps a ground of its own over the brighter world (fading with it). */
  :root[data-journey="world"] .opening::after,
  :root[data-journey="sequence"] .opening::after { content: ""; position: absolute; inset: 0 0 -34svh; z-index: 1; pointer-events: none; opacity: calc((1 - var(--plate-o, 1)) * var(--opening-o, 1));
    background: linear-gradient(90deg, rgba(9, 11, 11, 0.55) 0%, rgba(9, 11, 11, 0.25) 34%, rgba(9, 11, 11, 0) 60%), rgba(9, 11, 11, 0.42);
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 34%, #000 58%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 34%, #000 58%, transparent 100%); }
}

/* ---------------------------------------------------------------- journey chapters */
.journey { position: relative; counter-reset: stop; }
.chapter { position: relative; scroll-margin-top: calc(-1 * (var(--masthead-h) + 8px) - var(--hold) * 25svh); }
.js .chapter + .chapter { margin-top: calc(var(--overlap) * -100svh); }
/* The pull-back reveal stays clear: the first stop overlaps it by half as much. */
.js .chapter-pullback + .chapter { margin-top: calc(var(--overlap) * -50svh); }
/* Desktop (panels pinned beside the scene): a longer travel between stops, so a scroll gesture moves the camera less and
   more of each flight is seen (a negative overlap is a gap between chapters). Phones keep --overlap. */
@media (min-width: 1000px) and (min-aspect-ratio: 4/5) {
  .js .chapter + .chapter { margin-top: calc(var(--overlap-desk, var(--overlap)) * -100svh); }
  .js .chapter-pullback + .chapter { margin-top: calc(var(--overlap-desk, var(--overlap)) * -50svh); }
  /* The pullback is crossed at the middle of one eased flight (opening -> first stop): the same lead-in before it as
     after it keeps that crossing on the pullback's own panel and chess invitation. */
  .js .chapter-pullback { margin-top: calc(min(0, var(--overlap-desk, var(--overlap))) * -50svh); }
}
.chapter-pin { position: sticky; top: 0; display: flex; align-items: safe center; height: 100svh; padding: calc(var(--masthead-h) + 20px) var(--pad) 28px; pointer-events: none; }
.chapter-hold { height: calc(var(--hold) * 100svh); }
.chapter-pullback .chapter-hold { height: calc(var(--pullback-hold) * 100svh); }
.chapter-map { scroll-margin-top: calc(-1 * (var(--masthead-h) + 8px) - var(--map-hold) * 25svh); }
.chapter-map .chapter-hold { height: calc(var(--map-hold) * 100svh); }
.chapter[data-side="right"] .chapter-pin { justify-content: flex-end; }
.chapter[data-side="left"] .chapter-pin { justify-content: flex-start; }
.chapter[data-side="bottom"] .chapter-pin { align-items: flex-end; justify-content: center; padding-bottom: clamp(24px, 4svh, 44px); }
/* Without JavaScript each chapter shows its still, pinned behind its panel. */
.chapter-still { display: none; }
.no-js .chapter { isolation: isolate; }
.no-js .chapter-still { position: sticky; top: 0; z-index: -1; display: block; height: 100svh; margin-bottom: -100svh; overflow: hidden; background: #0b1010; }
.no-js .chapter-still img { width: 100%; height: 100%; object-fit: cover; }
/* Without JS there is no camera to settle: each chapter is one screen, its still pinned behind its panel. */
.no-js .chapter-hold { height: 0; }

/* ---------------------------------------------------------------- panels */
.panel { position: relative; width: min(440px, 36vw); padding: 26px 28px 24px; border: 1px solid var(--hair); border-radius: var(--r-panel); background: linear-gradient(180deg, rgba(13, 18, 18, 0.88) 0%, rgba(9, 11, 11, 0.82) 100%); box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.8); pointer-events: auto; }
/* The lamp line arrives at each panel: a short rule of emitted teal on its top edge. */
.panel::before { content: ""; position: absolute; top: -1px; left: 28px; width: 52px; height: 2px; border-radius: 2px; background: var(--light); box-shadow: 0 0 10px rgba(var(--light-rgb), 0.75), 0 0 2px rgba(var(--light-rgb), 0.9); }
.js .chapter .panel { transition: opacity 0.45s var(--ease); }
.js .chapter.is-past .panel { opacity: 0; }
/* Desktop: a panel scrolling up past the masthead's scrim is cut at its lower edge with a short fade (journey.js sets
   --cut, the panel's height above that edge), so its words never run under the navigation. */
.panel.is-cut { -webkit-mask-image: linear-gradient(180deg, transparent var(--cut, 0px), #000 calc(var(--cut, 0px) + 56px)); mask-image: linear-gradient(180deg, transparent var(--cut, 0px), #000 calc(var(--cut, 0px) + 56px)); }
.stop-asyncly .panel { width: min(540px, 40vw); }
.stop-aphelion .panel { width: min(400px, 32vw); }
.stop-title { display: flex; align-items: center; gap: 16px; margin: 0; font: 400 clamp(36px, calc(1.8vw + 14px), 46px)/1 var(--serif); letter-spacing: -0.01em; }
.stop-mark { display: grid; place-items: center; width: 54px; height: 54px; flex: none; border-radius: 14px; }
.stop-mark img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 8px 18px rgba(var(--accent-rgb), 0.22)); }
.stop-rel { margin: 10px 0 0; color: var(--fg); font: 400 clamp(19px, calc(0.5vw + 13px), 22px)/1.25 var(--serif); }
.stop-line { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--hair); color: var(--fg); font-size: 16px; font-weight: 500; line-height: 1.4; }
.stop-text { margin: 10px 0 0; color: var(--fg-2); font-size: 15px; line-height: 1.5; }
.stop-steps { margin: 16px 0 0; }
.stop-steps ol { display: grid; gap: 7px; margin: 8px 0 0; padding: 0; list-style: none; counter-reset: step; }
.stop-steps li { position: relative; padding-left: 26px; color: var(--fg-2); font-size: 14px; line-height: 1.45; counter-increment: step; }
.stop-steps li::before { content: counter(step); position: absolute; left: 0; top: 0.1em; color: var(--light); font: 600 12px/1.6 var(--sans); font-variant-numeric: tabular-nums; }
.stop-steps b { color: var(--fg); font-weight: 600; }
.stop-steps .source { display: inline-block; margin-top: 6px; }
.stop-surface { margin: 14px 0 0; color: var(--fg-3); font-size: var(--fs-caption); line-height: 1.45; }
.stop-gap { margin: 12px 0 0; padding: 10px 0 0; border-top: 1px dashed rgba(227, 181, 111, 0.28); color: var(--fg-2); font-size: 14px; line-height: 1.45; }
/* The company's site is the primary action, in its own accent; the deeper page on this site is secondary. */
.stop-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin: 20px 0 0; padding-top: 18px; border-top: 1px solid var(--hair); }
.btn-cta { min-height: 46px; padding: 0 20px 0 22px; border-color: rgba(var(--accent-rgb), 0.75); background: rgba(var(--accent-rgb), 0.1); color: var(--fg); font-size: 15px; box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.08), 0 10px 28px -16px rgba(var(--accent-rgb), 0.7); }
.btn-cta:hover { border-color: rgb(var(--accent-rgb)); background: rgba(var(--accent-rgb), 0.2); }
.btn-cta .ext { width: 10px; height: 10px; margin-left: 2px; }
.btn-cta .arrow { margin-left: 2px; transition: transform 0.25s var(--ease); }
.btn-cta:hover .arrow { transform: translateX(3px); }
.more-link { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; color: var(--fg-2); font-size: 15px; font-weight: 500; text-decoration: none; transition: color 0.2s; }
.more-link span:first-child { border-bottom: 1px solid var(--hair-2); transition: border-color 0.2s; }
.more-link .arrow { color: var(--fg-3); transition: transform 0.25s var(--ease), color 0.2s; }
.more-link:hover { color: var(--fg); }
.more-link:hover span:first-child { border-color: rgba(var(--accent-rgb), 0.9); }
.more-link:hover .arrow { color: rgb(var(--accent-rgb)); transform: translateX(3px); }

/* ---------------------------------------------------------------- the map (aerial): every connection, grouped */
.map-panel { width: min(1232px, 100%); padding: 26px 32px 24px; }
.map-panel::before { left: 50%; margin-left: -26px; }
.map-title { margin: 0; font: 400 clamp(32px, calc(1.6vw + 14px), 42px)/1 var(--serif); letter-spacing: -0.01em; }
.map-title .line + .line { font-style: italic; }
.map-groups { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1.2fr) minmax(0, 0.75fr); gap: 0 clamp(24px, 3vw, 44px); margin-top: 18px; }
.mg { min-width: 0; }
.mg-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0; padding-bottom: 10px; border-bottom: 1px solid var(--hair-2); color: var(--fg-3); font: 600 11px/1.3 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; }
.mg-lede { color: var(--fg-3); font-weight: 500; letter-spacing: 0.02em; text-transform: none; opacity: 0.8; }
.mg-list { margin: 0; padding: 0; list-style: none; }
.mg-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; min-height: 48px; padding: 8px 0; border-bottom: 1px solid var(--hair); }
.mg-list li:last-child { border-bottom: 0; }
.mg-co { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 12px; align-items: center; min-width: 0; color: var(--fg); text-decoration: none; }
.mg-co .mg-mark { grid-row: span 2; }
.mg-mark { display: grid; place-items: center; width: 28px; height: 28px; flex: none; }
.mg-mark img { width: 100%; height: 100%; object-fit: contain; }
.mg-name { color: var(--fg); font: 400 19px/1.15 var(--serif); }
.mg-role { color: var(--fg-2); font-size: 13.5px; line-height: 1.3; }
.mg-co:hover .mg-name { text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: rgba(var(--accent-rgb), 0.85); text-underline-offset: 4px; }
.mg-from { display: inline-flex; align-items: center; gap: 12px; min-width: 9.5em; }
.mg-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mg-chip { display: inline-flex; align-items: center; min-height: 28px; padding: 0 11px; border: 1px solid var(--hair-2); border-radius: 999px; color: var(--fg); font-size: 13.5px; white-space: nowrap; }
.mg-chip .note-text { margin-left: 8px; }
.mg-link { display: inline-flex; align-items: baseline; gap: 6px; color: var(--fg-3); font-size: 13.5px; }
.mg-link .note-text { margin-left: 4px; }
.mg-link a { color: var(--fg-2); text-decoration: none; border-bottom: 1px solid var(--hair-2); }
.mg-link a:hover { color: var(--fg); border-color: var(--light); }
.mg-list .note-text { margin-left: auto; }
.mg-co + .note-text { margin-left: auto; }

/* ---------------------------------------------------------------- chapter rail */
/* Hidden by opacity only, so keyboard users reach it from the opening (it appears as soon as it holds focus). */
.rail { position: fixed; top: 50%; left: max(10px, calc(var(--pad) * 0.42 - 7px)); z-index: 35; transform: translateY(-50%); opacity: 0; pointer-events: none; transition: opacity 0.4s var(--ease); }
.rail.is-on, .rail:focus-within { opacity: 1; pointer-events: auto; }
.rail ul { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.rail a { position: relative; display: flex; align-items: center; height: 26px; padding: 0 6px 0 0; color: var(--fg-2); font-size: 13px; font-weight: 500; text-decoration: none; }
.rail a::before { content: ""; width: 14px; height: 1.5px; border-radius: 1px; background: rgba(238, 241, 238, 0.5); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.28); transition: width 0.35s var(--ease), background 0.35s; }
.rail a[aria-current]::before { width: 26px; background: var(--light); box-shadow: 0 0 8px rgba(var(--light-rgb), 0.8); }
.rail a:hover::before { background: var(--fg); }
.rail-label { position: absolute; left: calc(100% + 6px); padding: 3px 8px; border-radius: 6px; background: rgba(9, 11, 11, 0.86); color: var(--fg); white-space: nowrap; opacity: 0; transform: translateX(-4px); transition: opacity 0.25s var(--ease), transform 0.25s var(--ease); pointer-events: none; }
.rail a:hover .rail-label, .rail a:focus-visible .rail-label { opacity: 1; transform: none; }
.rail a:focus-visible { outline-offset: 1px; }
.no-js .rail { display: none; }

/* ---------------------------------------------------------------- index */
.index { position: relative; padding: clamp(64px, 9svh, 104px) var(--pad) clamp(40px, 6svh, 64px); background: var(--bg); }
/* The aerial dims as the index rises over it. */
.index::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 28px; background: linear-gradient(180deg, rgba(9, 11, 11, 0), var(--bg)); pointer-events: none; }
.index-head { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; padding-bottom: 20px; border-bottom: 1px solid var(--hair); }
.index-head .display { font-size: clamp(40px, calc(2.6vw + 12px), 60px); }
.index-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 clamp(24px, 3vw, 48px); }
.ix { grid-column: span 4; padding: 22px 0 24px; border-bottom: 1px solid var(--hair); }
.ix-piano { grid-column: span 8; grid-row: span 2; display: grid; grid-template-columns: minmax(150px, 0.42fr) minmax(0, 1fr); gap: 0 clamp(20px, 2.6vw, 40px); align-items: start; }
.ix-title { margin: 0; font: 400 clamp(26px, calc(0.8vw + 16px), 32px)/1.1 var(--serif); }
.ix-title a { text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 0.2s; }
.ix-title a:hover { border-color: var(--hair-2); }
.ix-title .arrow { display: inline-block; margin-left: 8px; color: var(--fg-3); font: 400 0.7em/1 var(--sans); transition: transform 0.25s var(--ease), color 0.2s; }
.ix-title a:hover .arrow { color: var(--light); transform: translateX(3px); }
.ix-text { margin: 8px 0 0; color: var(--fg-2); font-size: 15px; line-height: 1.5; }
.ix-about.has-portrait { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 0 20px; align-items: start; }
.ix-portrait { display: block; width: 112px; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%; border-radius: 3px; filter: var(--grade); }
.ix-list { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 10px 0 0; padding: 0; list-style: none; }
.ix-list a { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; color: var(--fg-2); font-size: 15px; font-weight: 500; text-decoration: none; }
.ix-list a:hover { color: var(--fg); }
.ix-list .oc-mark { width: 20px; height: 20px; }
.ix-still { position: relative; margin: 0; }
.ix-still img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%; border-radius: 3px; filter: var(--grade); }
.ix-still figcaption { position: absolute; right: 10px; bottom: 8px; }
.ix-piano .ix-title { margin-bottom: 14px; }
.ix-piano .quote p { font-size: clamp(26px, calc(1.2vw + 14px), 34px); }
.ix-piano .quote footer { margin-top: 10px; font-size: 13px; }
.ix-piano .ix-text { margin-top: 16px; }
.ix-films { display: flex; flex-wrap: wrap; gap: 10px 12px; margin-top: 18px; }
.ix-films .btn { min-height: 42px; padding: 0 18px; font-size: 14px; }
.ix-empty { color: var(--fg-3); }
[data-page="home"] .contact { background: var(--bg); padding-top: clamp(48px, 7svh, 80px); }

/* ---------------------------------------------------------------- portrait and narrow screens
   The panel sits at the bottom, over the lower part of the frame; long panels scroll with the page rather than pin. */
@media (max-width: 999px), (max-aspect-ratio: 4/5) {
  .js .chapter + .chapter { margin-top: 0; }
  .chapter, .chapter-map { scroll-margin-top: calc(-1 * (var(--masthead-h) + 8px) - 20svh); }
  .chapter-pin { position: relative; top: auto; display: block; height: auto; min-height: 0; padding: 70svh var(--pad) 0; }
  .chapter-pullback .chapter-pin { padding-top: 46svh; }
  .chapter-hold, .chapter-pullback .chapter-hold, .chapter-map .chapter-hold { height: 22svh; }
  .panel, .stop-asyncly .panel, .stop-aphelion .panel, .map-panel { width: 100%; padding: 22px 20px 20px; border-radius: 18px; }
  .no-js .chapter-pin { padding-top: 64svh; }
  .map-groups { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .rail { display: none; }
  .index-grid { grid-template-columns: minmax(0, 1fr); }
  .ix, .ix-piano { grid-column: auto; grid-row: auto; }
  .ix-piano { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .ix-still { max-width: 260px; }
  .ix-about.has-portrait { grid-template-columns: 96px minmax(0, 1fr); gap: 0 16px; }
  .ix-portrait { width: 96px; }
}
@media (min-width: 1000px) and (max-height: 760px) {
  .chapter-pin { padding-top: calc(var(--masthead-h) + 12px); padding-bottom: 12px; }
  .panel { padding: 18px 24px 16px; }
  .stop-title { font-size: 34px; }
  .stop-rel { margin-top: 6px; font-size: 19px; }
  .stop-line { margin-top: 10px; padding-top: 10px; font-size: 15px; }
  .stop-text { margin-top: 6px; font-size: 14px; }
  .stop-steps { margin-top: 10px; }
  .stop-steps ol { gap: 4px; margin-top: 6px; }
  .stop-steps li { font-size: 13px; line-height: 1.4; }
  .stop-surface, .stop-gap { margin-top: 8px; }
  .stop-gap { padding-top: 8px; font-size: 13px; }
  .stop-cta { margin-top: 12px; padding-top: 12px; }
  .stop-mark { width: 46px; height: 46px; }
}
@media (prefers-reduced-motion: reduce) {
  .world-canvas, .world-seq, .world-stills img { transition: none; }
}

/* ------------------------------------------------------------ the terrace chess set (world mode) */
.chess-invite { position: absolute; left: var(--pad); bottom: clamp(28px, 6svh, 64px); display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 20px 0 16px; border: 1px solid rgba(var(--light-rgb), 0.5); border-radius: 999px; background: rgba(9, 12, 12, 0.55); color: var(--fg); font: 600 15px/1 var(--sans); cursor: pointer; pointer-events: auto; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 0 22px rgba(var(--light-rgb), 0.14); transition: border-color 0.25s, background 0.25s, opacity 0.35s var(--ease); }
.chess-invite:hover { border-color: rgba(var(--light-rgb), 0.85); background: rgba(var(--light-rgb), 0.12); }
.chess-invite-icon { color: var(--light); flex: none; }
.chapter-pullback:not(.is-current) .chess-invite { opacity: 0; pointer-events: none; }
.chess-on .chess-invite { opacity: 0; pointer-events: none; }
.chess-hud { position: fixed; z-index: 25; left: var(--pad); top: calc(var(--masthead-h) + 22px); width: min(352px, calc(100vw - 2 * var(--pad))); padding: 22px 22px 18px; border: 1px solid var(--hair-2); border-radius: 18px; background: rgba(10, 13, 13, 0.74); -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2); box-shadow: 0 18px 60px rgba(0, 0, 0, 0.45); opacity: 0; transform: translateY(8px); transition: opacity 0.45s var(--ease), transform 0.45s var(--ease); }
.chess-hud.is-on { opacity: 1; transform: none; }
.chess-hud-rail { margin: 0 0 6px; color: var(--light); font: 600 11.5px/1 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; }
.chess-hud-title { margin: 0 0 12px; font: 400 30px/1.05 var(--serif); letter-spacing: -0.01em; outline: none; }
.chess-hud-status { margin: 0 0 12px; min-height: 1.4em; color: var(--fg); font-size: 15.5px; line-height: 1.45; }
.chess-hud[data-phase="thinking"] .chess-hud-status { color: var(--fg-2); }
.chess-hud-moves { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 0 0 14px; padding: 10px 0 0; border-top: 1px solid var(--hair); list-style: none; color: var(--fg-2); font: 500 13.5px/1.5 var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace); }
.chess-hud-moves .mv-n { color: var(--fg-3); }
.chess-hud-moves .mv-b { color: var(--fg); }
.chess-hud-form { margin: 0 0 14px; }
.chess-hud-label { display: block; margin: 0 0 7px; color: var(--fg-3); font-size: 13px; }
.chess-hud-row { display: flex; gap: 8px; }
.chess-hud-row input { flex: 1; min-width: 0; min-height: 44px; padding: 0 14px; border: 1px solid var(--hair-2); border-radius: 12px; background: rgba(255, 255, 255, 0.04); color: var(--fg); font: 500 16px/1 var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace); }
.chess-hud-row input:focus-visible { outline: 2px solid rgba(var(--light-rgb), 0.7); outline-offset: 1px; }
.chess-hud-row input:disabled { opacity: 0.5; }
.chess-hud-play { min-height: 44px; padding: 0 18px; }
.chess-hud-play:disabled { opacity: 0.45; cursor: default; }
.chess-hud-error { margin: 7px 0 0; min-height: 1.2em; color: var(--review); font-size: 13px; }
.chess-hud-error:empty { display: none; }
.chess-hud-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.chess-hud-actions kbd { margin-left: 4px; padding: 1px 6px; border: 1px solid var(--hair-2); border-radius: 6px; color: var(--fg-3); font: 600 11px/1.4 var(--sans); }
/* the board takes the scene: the journey's own panels and rail step back while the reader plays */
.chess-on .chapter-pin > :not(.chess-invite), .chess-on .rail { opacity: 0; pointer-events: none; transition: opacity 0.35s var(--ease); }
@media (max-width: 999px), (max-aspect-ratio: 4/5) {
  .chess-invite { left: 50%; transform: translateX(-50%); bottom: clamp(20px, 5svh, 40px); }
  .chess-hud { left: 0; right: 0; top: auto; bottom: 0; width: auto; padding: 16px var(--pad) calc(14px + env(safe-area-inset-bottom)); border-radius: 18px 18px 0 0; border-bottom: 0; }
  .chess-hud-title { font-size: 24px; margin-bottom: 8px; }
  .chess-hud-moves { display: none; }
}
@media (prefers-reduced-motion: reduce) { .chess-hud { transition: none; transform: none; } }

/* ------------------------------------------------------------ link chip pinned above a settled stop's landmark */
.world-chip { position: fixed; z-index: 4; top: 0; left: 0; display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 12px 0 14px; border: 1px solid rgba(var(--light-rgb), 0.55); border-radius: 999px; background: rgba(9, 12, 12, 0.62); color: var(--fg); font: 600 13px/1 var(--sans); text-decoration: none; white-space: nowrap; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 0 20px rgba(var(--light-rgb), 0.18); opacity: 0; transition: opacity 0.5s var(--ease), border-color 0.2s, background 0.2s; will-change: transform; }
.world-chip.is-on { opacity: 1; }
.world-chip:hover { border-color: rgba(var(--light-rgb), 0.9); background: rgba(var(--light-rgb), 0.14); }
.world-chip::after { content: ""; position: absolute; left: 50%; bottom: -9px; width: 1px; height: 8px; background: linear-gradient(rgba(var(--light-rgb), 0.7), rgba(var(--light-rgb), 0)); }
.world-chip-icon { color: var(--light); }
.world-chip:not(.is-external) .world-chip-icon { transform: rotate(45deg); }
.chess-on .world-chip, .world-pointer .world-chip { opacity: 0; }