/* The Memory Engine, V3: the map, rendered and animated, and the product's
   own surfaces as light panels in a dark studio. */

:root {
  --sc-canvas:     #0A0C10;
  --sc-surface:    #12161D;
  --sc-ink:        #F2F4F7;
  --sc-ink-soft:   #A3ABB8;
  --sc-accent:     #19B9CC;
  --sc-accent-ink: #041A20;
  --sc-font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --sc-font-text:    "Inter", system-ui, -apple-system, sans-serif;
  --sc-font-mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --ar-font: system-ui, -apple-system, "SF Arabic", "Geeza Pro", "Segoe UI", sans-serif;
  --sc-shadow-color: 220 40% 3%;
  --rule: color-mix(in oklab, var(--sc-ink) 14%, transparent);
  --glass: color-mix(in oklab, var(--sc-canvas) 62%, transparent);
  --panel: #F5F7FA;
  --panel-ink: #151A22;
  --panel-soft: #4A525E;
  --panel-rule: rgba(21, 26, 34, 0.1);
  --teal-deep: #075A63;
  --sc-danger: #8F3421;
  /* the light ground under fields and controls: off pure white, tinted toward
     the panel, so no large area on this page is #fff */
  --field: #FBFCFD;
  --panel-tint: #EEF2F6;
  /* the dashboard's own two signal colours, carried onto the page as tokens.
     Both are decorative here: every dot sits beside the words it repeats. */
  --sig-warn: #E0A63C;
  --sig-live: #2BB673;
  --bar-h: 64px;
  --r-sm: var(--sc-r-sm);   /* inline chips, the rendered slab */
  --r:    var(--sc-r-md);   /* controls, fields, panels */
  --r-lg: var(--sc-r-lg);   /* the big light destinations: join, map, joined */
  /* The micro tier: labels, captions, panel chrome. --sc-t-xs floors at 12px
     and tops out at 13.1px, so this one token is the phone floor and the
     desktop size at once, and no micro-label carries a px value any more. */
  --t-label: var(--sc-t-xs);
}
:root { color-scheme: dark; }
html { background: var(--sc-canvas); }
[hidden] { display: none !important; }
body { overflow-x: clip; }
.sc-grain { opacity: 0.045; }

/* ----------------------------------------------------------- type -- */
.lbl { margin: 0; font-family: var(--sc-font-text); font-size: var(--t-label); font-weight: 500; line-height: 1.4; color: var(--sc-accent); font-variant-numeric: tabular-nums; }
.mono { font-family: var(--sc-font-mono); font-variant-numeric: tabular-nums; unicode-bidi: plaintext; }
.nums { font-variant-numeric: tabular-nums; }
.h1 { margin: 0; font-family: var(--sc-font-display); font-weight: 500; font-size: clamp(2.5rem, 5.2vw, 5.4rem); line-height: 1.0; letter-spacing: -0.022em; text-wrap: balance; }
.h2 { margin: 0; font-family: var(--sc-font-display); font-weight: 500; font-size: clamp(1.7rem, 3.2vw, 2.9rem); line-height: 1.08; letter-spacing: -0.012em; text-wrap: balance; max-width: 18ch; }
.h2--big { font-size: clamp(2.2rem, 4.8vw, 4.4rem); max-width: 14ch; }
.sub { margin: 0; max-width: 42ch; font-size: clamp(1rem, 1.25vw, 1.15rem); line-height: 1.6; color: var(--sc-ink); text-wrap: pretty; }
.p { margin: 0; font-size: var(--sc-t-base); line-height: 1.66; color: var(--sc-ink-soft); max-width: 46ch; text-wrap: pretty; }
.cap { margin: 0; font-size: var(--sc-t-xs); line-height: 1.55; color: var(--sc-ink-soft); max-width: 52ch; }
.lede { margin: 0; font-size: clamp(1.05rem, 1.4vw, 1.2rem); line-height: 1.55; color: var(--sc-ink); max-width: 40ch; text-wrap: pretty; }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
[dir="rtl"] body, [dir="rtl"] .h1, [dir="rtl"] .h2, [dir="rtl"] .bar__mark, [dir="rtl"] .lbl, [dir="rtl"] .close__h, [dir="rtl"] .rung__n, [dir="rtl"] .joined__h, [dir="rtl"] .say__k, [dir="rtl"] .pick__t, [dir="rtl"] .item h3, [dir="rtl"] .glance__k { font-family: var(--ar-font); letter-spacing: normal; }
[dir="rtl"] .h1 { line-height: 1.24; font-weight: 700; font-size: clamp(2.2rem, 4.6vw, 4.8rem); }
[dir="rtl"] .h2 { line-height: 1.34; font-weight: 700; max-width: 22ch; }
[dir="rtl"] .h2--big { line-height: 1.28; }
[dir="rtl"] .mono:not([dir="ltr"]) { font-family: var(--ar-font); }

/* ------------------------------------------------------------ chrome -- */
.skip { position: fixed; inset-block-start: 8px; inset-inline-start: 8px; z-index: 70; padding: 9px 14px; background: var(--sc-accent); color: var(--sc-accent-ink); border-radius: var(--r); transform: translateY(-180%); transition: transform 160ms var(--sc-ease-out); }
.skip:focus { transform: none; }
.bar { position: fixed; inset-inline: 0; top: 0; z-index: 60; height: var(--bar-h); display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-inline: var(--sc-gutter); pointer-events: none; background: linear-gradient(to bottom, color-mix(in oklab, var(--sc-canvas) 74%, transparent), transparent); }
.bar > * { pointer-events: auto; }
.bar__start { display: flex; align-items: baseline; gap: 16px; }
/* Every control in the bar is a 44px target. The mark and the site link keep
   their type size and their place on the baseline: the box grows around the
   text, which is why the site link's underline moved from a border on the box
   to a decoration on the text. */
.bar__mark { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--sc-font-display); font-size: 1.12rem; color: var(--sc-ink); text-decoration: none; text-shadow: 0 1px 2px hsl(var(--sc-shadow-color) / 0.6); }
.bar__site { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--sc-t-xs); color: var(--sc-ink-soft); text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: color-mix(in oklab, var(--sc-ink-soft) 40%, transparent); text-underline-offset: 0.28em; }
.bar__site:hover { color: var(--sc-ink); text-decoration-color: var(--sc-ink); }
.bar__end { display: flex; align-items: center; gap: 8px; }
.lang, .bar__cta { display: inline-flex; align-items: center; height: 44px; padding-inline: 14px; border-radius: var(--r); font: inherit; font-size: var(--sc-t-sm); font-weight: 500; text-decoration: none; cursor: pointer; transition: background-color 140ms var(--sc-ease-out), transform 100ms var(--sc-ease-out), filter 140ms var(--sc-ease-out); }
.lang { background: var(--glass); border: 1px solid var(--sc-hairline-strong); color: var(--sc-ink); backdrop-filter: blur(12px) saturate(1.2); -webkit-backdrop-filter: blur(12px) saturate(1.2); font-family: var(--ar-font); }
[dir="rtl"] .lang { font-family: var(--sc-font-text); }
.lang:hover { background: color-mix(in oklab, var(--sc-canvas) 82%, var(--sc-ink)); }
.lang.is-nudging { animation: nudge 900ms var(--sc-ease-out) 2; }
@keyframes nudge { 0%, 100% { transform: none; } 35% { transform: translateY(-3px) scale(1.04); } 70% { transform: none; } }
.bar__cta { background: var(--sc-accent); color: var(--sc-accent-ink); font-weight: 600; box-shadow: var(--sc-e1); }
.bar__cta:hover { filter: brightness(1.08); }
.bar__cta:active, .lang:active { transform: translateY(1px); }
@media (max-width: 600px) { .bar__cta, .bar__site { display: none; } }

/* ------------------------------------------------------------- stage -- */
.stage { background: var(--sc-canvas); }
.ground { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; }
[dir="rtl"] .flipx { transform: scaleX(-1); }
.act video.flipx, .act .sc-stage__poster.flipx { object-position: 62% 50%; }
.scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.scrim--lead { background: linear-gradient(to right, color-mix(in oklab, var(--sc-canvas) 86%, transparent) 0%, color-mix(in oklab, var(--sc-canvas) 66%, transparent) 30%, color-mix(in oklab, var(--sc-canvas) 30%, transparent) 50%, transparent 66%); }
[dir="rtl"] .scrim--lead { background: linear-gradient(to left, color-mix(in oklab, var(--sc-canvas) 86%, transparent) 0%, color-mix(in oklab, var(--sc-canvas) 66%, transparent) 30%, color-mix(in oklab, var(--sc-canvas) 30%, transparent) 50%, transparent 66%); }
.scrim--column { background: linear-gradient(to right, color-mix(in oklab, var(--sc-canvas) 96%, transparent) 0%, color-mix(in oklab, var(--sc-canvas) 90%, transparent) 50%, color-mix(in oklab, var(--sc-canvas) 60%, transparent) 66%, color-mix(in oklab, var(--sc-canvas) 40%, transparent) 100%); }
[dir="rtl"] .scrim--column { background: linear-gradient(to left, color-mix(in oklab, var(--sc-canvas) 96%, transparent) 0%, color-mix(in oklab, var(--sc-canvas) 90%, transparent) 50%, color-mix(in oklab, var(--sc-canvas) 60%, transparent) 66%, color-mix(in oklab, var(--sc-canvas) 40%, transparent) 100%); }
.art { position: absolute; z-index: 21; inset-inline-end: var(--sc-gutter); bottom: 14px; margin: 0; font-family: var(--sc-font-text); font-size: var(--t-label); line-height: 1.4; color: color-mix(in oklab, var(--sc-ink-soft) 70%, transparent); }
[dir="rtl"] .art { font-family: var(--ar-font); }

/* copy positions */
.copy { position: absolute; z-index: 20; display: grid; gap: 14px; will-change: opacity, transform; }
.copy--hero { inset-inline-start: var(--sc-gutter); top: max(19vh, calc(var(--bar-h) + 7vh)); width: min(40rem, 38vw); gap: 18px; }
.copy--hero2 { inset-inline-start: var(--sc-gutter); bottom: clamp(3rem, 10vh, 7rem); width: min(34rem, 36vw); gap: 10px; }
.copy--side { inset-inline-start: var(--sc-gutter); top: 50%; transform: translateY(-50%); width: min(30rem, 34vw); }
.copy--brief { inset-inline-start: var(--sc-gutter); top: max(14vh, calc(var(--bar-h) + 4vh)); width: min(40rem, 44vw); gap: 12px; }
.copy--brief2 { inset-inline-start: var(--sc-gutter); bottom: clamp(3rem, 9vh, 7rem); width: min(34rem, 40vw); }
.copy--dash { inset-inline-start: var(--sc-gutter); top: 50%; transform: translateY(-50%); width: min(28rem, 32vw); }
.h1, .sub, .copy--hero2 .h2, .copy--brief .h2 { text-shadow: 0 2px 20px hsl(var(--sc-shadow-color) / 0.6); }

.act--hero:not(.is-entered) .copy--hero .sc-split__i { transform: translate3d(0, 112%, 0) !important; }
.act--hero.is-entered .copy--hero .sc-split__i { animation: rise 1100ms var(--sc-ease-out) both; }
.act--hero.is-entered .copy--hero .sc-split:nth-child(2) .sc-split__i { animation-delay: 110ms; }
.act--hero.is-entered .copy--hero .sc-split:nth-child(3) .sc-split__i { animation-delay: 220ms; }
.act--hero.is-entered .copy--hero .sc-split:nth-child(4) .sc-split__i { animation-delay: 330ms; }
.act--hero.is-entered .sub { animation: fade 900ms var(--sc-ease-out) 420ms both; }
@keyframes rise { from { transform: translate3d(0, 112%, 0); } to { transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

/* --------------------------------------------------------- light panels -- */
.panel, .glance, .join, .joined, .mapcard { color-scheme: light; }
.panel { background: var(--panel); color: var(--panel-ink); border-radius: var(--r); box-shadow: 0 1px 0 color-mix(in oklab, var(--field) 70%, transparent) inset, var(--sc-e3), 0 0 0 1px color-mix(in oklab, var(--field) 6%, transparent); }
.panel__bar { display: flex; align-items: center; gap: var(--sc-2); padding: var(--sc-3) var(--sc-4); border-bottom: 1px solid var(--panel-rule); font-family: var(--sc-font-text); font-size: var(--t-label); line-height: 1.4; color: var(--panel-soft); font-variant-numeric: tabular-nums; }
[dir="rtl"] .panel__bar { font-family: var(--ar-font); }
.panel__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sig-warn); box-shadow: 0 0 0 3px color-mix(in oklab, var(--sig-warn) 18%, transparent); flex: 0 0 auto; }
.panel__dot--on { background: var(--sig-live); box-shadow: 0 0 0 3px color-mix(in oklab, var(--sig-live) 18%, transparent); }
.panel__t--end { margin-inline-start: auto; color: var(--sc-danger); opacity: clamp(0, calc(var(--sc-p) * 3 - 1.3), 1); }
.panel__cap, .panel__small { margin: 0; font-size: var(--sc-t-xs); line-height: 1.55; color: var(--panel-soft); }
.panel__file { margin: 0; font-size: var(--t-label); letter-spacing: 0.02em; color: var(--panel-soft); padding: var(--sc-3) var(--sc-4); border-bottom: 1px solid var(--panel-rule); }

/* the glance panel, in front of the map */
.glance { position: absolute; z-index: 22; inset-inline-start: 42vw; bottom: 9vh; width: min(24rem, 30vw); padding: var(--sc-4); display: grid; gap: var(--sc-3); background: var(--panel); color: var(--panel-ink); border-radius: var(--r); box-shadow: 0 1px 0 color-mix(in oklab, var(--field) 70%, transparent) inset, var(--sc-e3); }
.glance__k { margin: 0; font-family: var(--sc-font-display); font-size: 1.15rem; line-height: 1.2; }
[dir="rtl"] .glance__k { font-weight: 700; }
/* One number carries the panel and the other five follow it as a sentence.
   Six numbers at equal weight over six labels in a 3x2 grid is the hero-metric
   template; every figure is still here, in a hierarchy instead of a scoreboard. */
.glance__lead { margin: 0; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.glance__n { font-family: var(--sc-font-display); font-size: clamp(2rem, 2.8vw, 2.9rem); line-height: 1; color: var(--panel-ink); }
.glance__lk { font-size: var(--sc-t-sm); line-height: 1.4; color: var(--panel-ink); max-width: 18ch; text-wrap: balance; }
.glance__rest { margin: 0; font-size: var(--t-label); line-height: 1.55; color: var(--panel-soft); }
.glance__f { margin: 0; font-size: var(--t-label); line-height: 1.4; color: var(--panel-soft); }

/* the session panel */
.panel--session { position: absolute; z-index: 20; inset-inline-end: 6vw; top: 50%; transform: translateY(-50%); width: min(44rem, 50vw); display: grid; gap: var(--sc-3); padding-bottom: 18px; }
.say { display: grid; gap: var(--sc-2); padding: var(--sc-4) var(--sc-4) 0; }
.say__who { font-family: var(--sc-font-text); font-size: var(--t-label); font-weight: 500; line-height: 1.4; color: var(--panel-soft); }
[dir="rtl"] .say__who { font-family: var(--ar-font); }
.say__k { font-family: var(--sc-font-display); font-size: clamp(1.2rem, 1.9vw, 1.7rem); line-height: 1.2; color: var(--panel-ink); letter-spacing: -0.01em; text-wrap: balance; }
.say__box { display: block; position: relative; }
.say__box::before { content: ""; position: absolute; inset-inline-start: 0; top: 20%; bottom: 20%; width: 3px; border-radius: var(--sc-r-pill); background: var(--sc-accent); }
.say__in { width: 100%; height: clamp(60px, 8vh, 78px); padding-inline: 22px; border-radius: var(--r); background: var(--field); border: 1px solid var(--panel-rule); color: var(--panel-ink); font-family: var(--sc-font-display); font-style: italic; font-size: clamp(1.1rem, 1.7vw, 1.5rem); box-shadow: 0 1px 2px rgba(0,0,0,0.06) inset; text-overflow: ellipsis; }
[dir="rtl"] .say__in { font-family: var(--ar-font); font-style: normal; }
.say__in:focus-visible { outline: none; border-color: var(--teal-deep); box-shadow: inset 0 0 0 2px var(--teal-deep); }
.say__note { margin: 0; padding-inline: var(--sc-4); font-size: var(--sc-t-xs); color: var(--panel-soft); }
.erode { margin: 0; padding-inline: var(--sc-4); font-family: var(--sc-font-display); font-style: italic; font-size: clamp(1.1rem, 1.7vw, 1.5rem); line-height: 1.35; color: var(--panel-ink); opacity: clamp(0, calc(var(--sc-p) * 3 - 1.05), 1); }
[dir="rtl"] .erode { font-family: var(--ar-font); font-style: normal; line-height: 1.6; }
.erode i { display: inline-block; font-style: inherit; white-space: pre; opacity: clamp(0.08, calc((var(--t) - var(--sc-p)) * 9 + 1), 1); transform: translateY(calc(clamp(0, (var(--sc-p) - var(--t)) * 9, 1) * 0.4em)) rotate(calc(clamp(0, (var(--sc-p) - var(--t)) * 9, 1) * 5deg)); }
.erode i.sp { opacity: 1; transform: none; }
.panel--session .say, .panel--session .say__note { opacity: clamp(0, calc(1.6 - var(--sc-p) * 3), 1); }
.panel__kept { margin: 0; padding-inline: var(--sc-4); font-family: var(--sc-font-text); font-size: var(--t-label); font-weight: 500; line-height: 1.4; color: var(--sc-danger); opacity: clamp(0, calc(var(--sc-p) * 4 - 3.2), 1); }
[dir="rtl"] .panel__kept { font-family: var(--ar-font); }
/* the session dissolves behind the panel as the act advances */
.ground--loss { opacity: calc(1 - var(--sc-p) * 0.55); transform: scale(calc(1 + var(--sc-p) * 0.06)); transform-origin: 70% 60%; }
[dir="rtl"] .ground--loss.flipx { transform: scaleX(-1) scale(calc(1 + var(--sc-p) * 0.06)); transform-origin: 50% 60%; }

/* quiet */
.act--quiet { min-height: 70vh; display: grid; place-items: center; padding-block: 10vh; background: var(--sc-canvas); }
.quiet__inner { text-align: center; }
.quiet__line { margin: 0; font-family: var(--sc-font-text); font-size: var(--sc-t-sm); line-height: 1.5; color: var(--sc-ink-soft); max-width: 44ch; font-variant-numeric: tabular-nums; }
[dir="rtl"] .quiet__line { font-family: var(--ar-font); }

/* the brief and the reader's subject */
.panel--brief { position: absolute; z-index: 20; inset-inline-start: var(--sc-gutter); top: 50%; transform: translateY(-40%); width: min(44rem, 46vw); margin: 0; display: grid; }
.brief { margin: 0; padding: var(--sc-4) var(--sc-4) var(--sc-3); font-family: var(--sc-font-mono); font-size: clamp(12px, 0.9vw, 13.5px); line-height: 1.6; color: var(--panel-ink); white-space: pre-wrap; word-break: break-word; overflow-x: auto; text-align: left; }
.brief b { font-weight: 600; color: var(--teal-deep); }
.brief .you-line { background: color-mix(in oklab, var(--sc-accent) 16%, transparent); border-radius: var(--r-sm); padding: 1px 4px; }
.brief .ar { font-family: var(--ar-font); direction: rtl; unicode-bidi: isolate; }
.panel--brief .panel__cap { padding: 0 var(--sc-4) 14px; }
.you { position: absolute; z-index: 19; display: grid; gap: 8px; justify-items: center; transform: translate(-50%, -50%); opacity: clamp(0, calc(var(--sc-p) * 3 - 1.4), 1); pointer-events: none; }
.you__dot { width: 14px; height: 14px; border-radius: 50%; background: var(--sc-accent); box-shadow: 0 0 0 4px color-mix(in oklab, var(--sc-accent) 25%, transparent), 0 0 24px color-mix(in oklab, var(--sc-accent) 90%, transparent); }
.you__label { padding: 6px 12px; border-radius: var(--sc-r-pill); background: var(--panel); color: var(--teal-deep); font-size: var(--sc-t-sm); font-weight: 600; white-space: nowrap; max-width: 18rem; overflow: hidden; text-overflow: ellipsis; box-shadow: var(--sc-e2); }
[dir="rtl"] .you__label { font-family: var(--ar-font); }

/* the dashboard on the slab */
.slab { position: absolute; left: 0; top: 0; width: 1000px; height: 625px; z-index: 2; transform-origin: 0 0; overflow: hidden; border-radius: var(--r-sm); opacity: 0; transition: opacity 500ms var(--sc-ease-out); }
.slab img { display: block; width: 100%; height: 100%; object-fit: cover; }
.act--dash.is-slab .slab { opacity: 1; }
.dash__real { display: none; }
/* the picture wrapper must not become the box: the image is positioned by the
   act (absolute over the slab, a centred block when the act flows) */
.dash__pic { display: contents; }
.ground--dash { opacity: calc(1 - var(--sc-p) * 0.1); }

/* the rail */
.stage--solid { background: var(--sc-canvas); }
.rail { display: flex; align-items: center; gap: clamp(1.5rem, 3vw, 3rem); height: 100%; padding-inline: var(--sc-gutter); will-change: transform; }
.rail__lead { flex: 0 0 auto; width: min(30rem, 34vw); display: grid; gap: 12px; padding-inline-end: 2vw; }
.item { flex: 0 0 auto; width: clamp(18rem, 27vw, 26rem); display: grid; gap: 10px; }
.item--last { padding-inline-end: var(--sc-gutter); }
.item h3 { margin: 6px 0 0; font-family: var(--sc-font-display); font-weight: 500; font-size: clamp(1.1rem, 1.5vw, 1.35rem); line-height: 1.25; letter-spacing: -0.01em; text-wrap: balance; }
.item p { margin: 0; font-size: var(--sc-t-sm); line-height: 1.55; color: var(--sc-ink-soft); text-wrap: pretty; }
.panel--item { display: grid; gap: var(--sc-3); min-height: 15rem; padding-bottom: 14px; }
.panel--img { padding: 0; overflow: hidden; min-height: 0; }
.panel--img img { display: block; width: 100%; height: auto; }
.note { margin: 0; padding: 0 16px; display: grid; gap: 4px; }
.note dt { font-family: var(--sc-font-text); font-size: var(--t-label); font-weight: 500; line-height: 1.4; color: var(--panel-soft); margin-top: 6px; }
[dir="rtl"] .note dt { font-family: var(--ar-font); }
.note dd { margin: 0; font-size: 12.5px; line-height: 1.5; }
.red { margin: 0 16px; font-size: var(--t-label); line-height: 1.6; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; }
.red__k { color: var(--panel-soft); }
.red__s { color: var(--sc-danger); text-decoration-thickness: 2px; }
.red__r { background: var(--panel-ink); color: var(--sc-ink); padding: 1px 6px; border-radius: var(--r-sm); font-size: var(--t-label); }
.panel--item .panel__small { padding: 0 16px; }
.tree { list-style: none; margin: 0; padding: 0 16px; display: grid; gap: 6px; font-size: 12px; }
.tree li { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--panel-rule); padding-bottom: 5px; }
.tree li span { font-family: var(--sc-font-text); color: var(--panel-soft); font-size: var(--t-label); text-align: end; }
[dir="rtl"] .tree li span { font-family: var(--ar-font); }
.fold { margin: 0; padding: 0 16px; display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; font-size: 12.5px; color: var(--panel-soft); }
.fold__w { font-family: var(--ar-font); font-size: 1.4rem; color: var(--panel-ink); padding: 2px 10px; background: var(--field); border-radius: var(--r-sm); border: 1px solid var(--panel-rule); }
.srcs { list-style: none; margin: 0; padding: 0 16px; display: grid; gap: 7px; }
.srcs li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 13px; border-bottom: 1px solid var(--panel-rule); padding-bottom: 6px; }
.srcs b { font-family: var(--sc-font-display); font-size: 1.15rem; font-weight: 500; }

/* -------------------------------------------------------------- doc -- */
.doc { position: relative; z-index: 2; padding-block: clamp(4rem, 8vw, 8rem); background: var(--sc-canvas); }
.wrap { width: 100%; max-width: var(--sc-maxw); margin-inline: auto; padding-inline: var(--sc-gutter); }
.stack { display: grid; gap: var(--sc-5); align-content: start; }
.doc__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.facts, .nots { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.facts li { font-size: var(--sc-t-base); line-height: 1.62; color: var(--sc-ink-soft); max-width: 60ch; text-wrap: pretty; }
.facts li strong { color: var(--sc-ink); font-weight: 560; }
.nots li { position: relative; padding-inline-start: 18px; font-size: var(--sc-t-sm); line-height: 1.6; color: var(--sc-ink-soft); max-width: 52ch; text-wrap: pretty; }
.nots li::before { content: ""; position: absolute; inset-inline-start: 0; top: 0.72em; width: 8px; height: 1px; background: var(--sc-accent); }
.rule { height: 1px; border: 0; background: var(--rule); margin-block: clamp(3rem, 6vw, 5.5rem) clamp(2rem, 4vw, 3.5rem); }
.rungs { display: grid; gap: var(--sc-6); }
.rungs__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: start; }
.rung { display: grid; gap: 12px; padding-block-start: 18px; border-block-start: 1px solid var(--rule); }
.rung--2 { border-block-start-color: var(--sc-accent); }
.rung__n { margin: 0; font-family: var(--sc-font-display); font-weight: 500; font-size: clamp(1.35rem, 2vw, 1.8rem); line-height: 1.2; }
.rung__p { margin: 0; font-size: var(--sc-t-base); line-height: 1.62; color: var(--sc-ink-soft); text-wrap: pretty; max-width: 60ch; }
.rung__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.rung__list li { position: relative; padding-inline-start: 18px; font-size: var(--sc-t-sm); line-height: 1.55; color: var(--sc-ink); }
.rung__list li::before { content: ""; position: absolute; inset-inline-start: 0; top: 0.7em; width: 8px; height: 1px; background: var(--sc-accent); }
.rung__cap { margin: 0; font-size: var(--sc-t-xs); color: var(--sc-accent); line-height: 1.55; }
.rungs__loss { margin: 0; font-size: var(--sc-t-base); line-height: 1.62; color: var(--sc-ink-soft); max-width: 68ch; text-wrap: pretty; }

/* --------------------------------------------------------- voices -- */
/* The rung grammar (a hairline on top, no box) so testimonials read as part
   of the document, not as a widget dropped into it. The three long quotes
   carry the accent rule; the short course lines carry the plain one. */
.voices { position: relative; z-index: 2; padding-block: clamp(4rem, 8vw, 7rem) 0; background: var(--sc-canvas); }
.voices__head { display: grid; gap: 14px; margin-block-end: clamp(2rem, 4vw, 3.25rem); }
.voices__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 3rem); align-items: start; }
.voice { margin: 0; display: grid; gap: 16px; padding-block-start: 18px; border-block-start: 1px solid var(--sc-accent); }
.voice blockquote { margin: 0; font-family: var(--sc-font-display); font-size: clamp(1.15rem, 1.55vw, 1.4rem); line-height: 1.42; color: var(--sc-ink); text-wrap: pretty; }
.voice figcaption, .voices__more li span { font-size: var(--sc-t-xs); line-height: 1.5; color: var(--sc-ink-soft); }
.voice figcaption b { display: block; color: var(--sc-ink); font-weight: 560; font-size: var(--sc-t-sm); }
.voices__more { list-style: none; margin: clamp(2.25rem, 4vw, 3.5rem) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 18px clamp(1.5rem, 3vw, 3rem); }
.voices__more:empty { display: none; }
.voices__more li { display: grid; gap: 6px; padding-block-start: 12px; border-block-start: 1px solid var(--rule); font-size: var(--sc-t-sm); line-height: 1.55; color: var(--sc-ink); text-wrap: pretty; }
[dir="rtl"] .voice blockquote { font-family: var(--ar-font); line-height: 1.75; font-size: clamp(1.1rem, 1.45vw, 1.3rem); }
@media (max-width: 860px) { .voices__grid { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------- close -- */
.ground--close { opacity: 0.55; object-position: 70% 50%; }
.close__inner { position: absolute; z-index: 20; inset-inline: var(--sc-gutter); top: calc(var(--bar-h) + 1vh); bottom: 62px; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2rem, 5vw, 5rem); align-content: center; align-items: center; max-width: var(--sc-maxw); margin-inline: auto; }
.close__text { display: grid; gap: 16px; align-content: center; }
.close__recall { margin: 0 0 2px; font-family: var(--sc-font-display); font-style: italic; font-size: clamp(1rem, 1.4vw, 1.2rem); line-height: 1.5; color: var(--sc-accent); max-width: 40ch; }
[dir="rtl"] .close__recall { font-family: var(--ar-font); font-style: normal; }
.close__recall:empty { display: none; }
.close__h { margin: 0; font-family: var(--sc-font-display); font-weight: 500; font-size: clamp(2rem, 3.6vw, 3.4rem); line-height: 1.04; letter-spacing: -0.015em; text-wrap: balance; max-width: 16ch; }
[dir="rtl"] .close__h { line-height: 1.3; font-weight: 700; }
.next { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 10px; }
.next li { display: grid; grid-template-columns: 2rem 1fr; gap: 10px; align-items: baseline; font-size: var(--sc-t-sm); line-height: 1.55; color: var(--sc-ink); max-width: 48ch; }
.next__n { font-family: var(--sc-font-display); font-size: 1.25rem; color: var(--sc-accent); line-height: 1; }
[dir="rtl"] .next__n { font-family: var(--ar-font); }
.close__site { margin: 6px 0 0; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.close__site a { color: var(--sc-ink); text-decoration-color: var(--sc-accent); text-underline-offset: 0.22em; }
.join { display: grid; gap: var(--sc-4); padding: clamp(20px, 2.4vw, 30px); border-radius: var(--r-lg); background: var(--panel); color: var(--panel-ink); box-shadow: 0 1px 0 color-mix(in oklab, var(--field) 70%, transparent) inset, var(--sc-e3); }
.join .lbl { color: var(--teal-deep); }
.pick, .seg { border: 0; margin: 0; padding: 0; display: grid; gap: 8px; min-width: 0; }
.pick legend, .seg legend { padding: 0; margin-bottom: 6px; }
.pick__o { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border-radius: var(--r); border: 1px solid var(--panel-rule); background: var(--field); cursor: pointer; transition: border-color 140ms var(--sc-ease-out), background-color 140ms var(--sc-ease-out); }
.pick__o:hover { border-color: color-mix(in oklab, var(--sc-accent) 60%, transparent); }
.pick__o input { margin: 4px 0 0; width: 16px; height: 16px; accent-color: var(--teal-deep); flex: 0 0 auto; }
.pick__body { display: grid; gap: 2px; min-width: 0; }
.pick__t { font-family: var(--sc-font-display); font-size: clamp(1.05rem, 1.35vw, 1.2rem); line-height: 1.25; color: var(--panel-ink); }
.pick__s { font-size: var(--sc-t-xs); line-height: 1.5; color: var(--panel-soft); }
.pick__o:has(input:checked) { border-color: var(--sc-accent); background: color-mix(in oklab, var(--sc-accent) 10%, var(--field)); }
.pick__o:has(input:focus-visible), .seg__o:has(input:focus-visible) { outline: 2px solid var(--teal-deep); outline-offset: 2px; }
.seg__row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--panel-rule); border-radius: var(--r); overflow: hidden; background: var(--field); }
.seg__o { position: relative; display: flex; align-items: center; justify-content: center; height: 44px; font-size: var(--sc-t-sm); color: var(--panel-soft); cursor: pointer; border-inline-start: 1px solid var(--panel-rule); transition: background-color 140ms var(--sc-ease-out), color 140ms var(--sc-ease-out); }
.seg__o:first-child { border-inline-start: 0; }
.seg__o input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.seg__o:hover { color: var(--panel-ink); }
.seg__o:has(input:checked) { background: var(--teal-deep); color: var(--sc-ink); font-weight: 600; }
.join__osnote { margin: 0; font-size: var(--sc-t-xs); line-height: 1.55; color: var(--panel-soft); }
.join__fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
/* The optional name gets its own row above the pair; three boxes on one line
   is what makes an optional field read as another obstacle. */
.field--full { grid-column: 1 / -1; }
.field { display: grid; gap: 6px; }
.field label { font-size: var(--sc-t-xs); color: var(--panel-soft); }
.field input { width: 100%; height: 52px; background: var(--field); border: 1px solid var(--panel-rule); border-radius: var(--r); color: var(--panel-ink); padding-inline: 16px; font-family: var(--sc-font-text); font-size: var(--sc-t-base); font-variant-numeric: tabular-nums; }
.field input::placeholder { color: color-mix(in oklab, var(--panel-soft) 60%, transparent); }
.field input:focus-visible { outline: none; border-color: var(--teal-deep); box-shadow: inset 0 0 0 2px var(--teal-deep); }
/* a field that failed keeps its hairline red while it is wrong, focused or not */
.field input.is-bad { border-color: var(--sc-danger); box-shadow: inset 0 0 0 1px var(--sc-danger); }
.field input.is-bad:focus-visible { border-color: var(--sc-danger); box-shadow: inset 0 0 0 2px var(--sc-danger); }
.field__err { margin: 0; font-size: var(--sc-t-xs); line-height: 1.45; color: var(--sc-danger); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: 54px; padding-inline: 26px; border: 0; border-radius: var(--r); background: var(--teal-deep); color: var(--sc-ink); font: inherit; font-size: var(--sc-t-base); font-weight: 620; cursor: pointer; text-decoration: none; box-shadow: var(--sc-e2); transition: filter 140ms var(--sc-ease-out), transform 100ms var(--sc-ease-out); }
.btn--wide { width: 100%; }
.btn:hover { filter: brightness(1.1); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn:focus-visible { outline: 2px solid var(--panel-ink); outline-offset: 3px; }
.join__err { margin: 0; font-size: var(--sc-t-sm); color: var(--sc-danger); }
.joined { display: grid; gap: var(--sc-3); padding: clamp(20px, 2.4vw, 30px); border-radius: var(--r-lg); background: var(--panel); color: var(--panel-ink); box-shadow: 0 1px 0 color-mix(in oklab, var(--field) 70%, transparent) inset, var(--sc-e3); }
.joined .p { color: var(--panel-soft); }
.joined__h { margin: 0; font-family: var(--sc-font-display); font-size: clamp(1.4rem, 2.2vw, 2rem); line-height: 1.2; }
.foot { position: absolute; z-index: 20; inset-inline: var(--sc-gutter); bottom: 0; height: 54px; display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; border-block-start: 1px solid var(--rule); color: var(--sc-ink-soft); font-size: var(--sc-t-xs); }
/* the footer links are 44px tall targets; the type size is untouched */
.foot a { display: inline-flex; align-items: center; min-height: 44px; color: var(--sc-ink); }
/* flow-mode close (phones and short windows): decided inline in index.html
   before the engine reads the page; the !important lines cover the case
   where the viewport turns small after load and the pin is already set */
.act--close.is-flow { height: auto !important; }
.act--close.is-flow .close__stage { position: relative !important; height: auto !important; min-height: 100svh; overflow: visible !important; }
.act--close.is-flow .close__inner { position: relative; inset: auto; top: auto; bottom: auto; width: auto; margin-inline: max(var(--sc-gutter), calc((100% - var(--sc-maxw)) / 2)); padding-block: calc(var(--bar-h) + 4vh) 24px; grid-template-columns: 1fr; opacity: 1 !important; transform: none !important; }
.act--close.is-flow .foot { position: relative; inset: auto; height: auto; padding-block: 18px 22px; margin-inline: var(--sc-gutter); }
.act--close.is-flow .ground { position: absolute; }

/* --------------------------------------------------------- reduced -- */
@media (prefers-reduced-motion: reduce) {
  .act--hero:not(.is-entered) .copy--hero .sc-split__i { transform: none !important; }
  .act--hero.is-entered .copy--hero .sc-split__i, .act--hero.is-entered .sub { animation: none; }
  .erode i { transform: none !important; }
  .lang.is-nudging { animation: none; }
  .ground--loss { transform: none !important; }
}

/* ----------------------------------------------------------- phones -- */
@media (max-width: 860px) {
  :root { --bar-h: 56px; }
  .bar { background: linear-gradient(to bottom, color-mix(in oklab, var(--sc-canvas) 90%, transparent) 0%, color-mix(in oklab, var(--sc-canvas) 62%, transparent) 60%, transparent 100%); }
  .scrim--lead, [dir="rtl"] .scrim--lead { background: linear-gradient(to bottom, color-mix(in oklab, var(--sc-canvas) 96%, transparent) 0%, color-mix(in oklab, var(--sc-canvas) 92%, transparent) 18%, color-mix(in oklab, var(--sc-canvas) 62%, transparent) 32%, color-mix(in oklab, var(--sc-canvas) 24%, transparent) 42%, transparent 52%); }
  .act--dash .scrim--lead, [dir="rtl"] .act--dash .scrim--lead { background: linear-gradient(to top, color-mix(in oklab, var(--sc-canvas) 95%, transparent) 0%, color-mix(in oklab, var(--sc-canvas) 90%, transparent) 30%, color-mix(in oklab, var(--sc-canvas) 55%, transparent) 42%, color-mix(in oklab, var(--sc-canvas) 18%, transparent) 52%, transparent 60%); }
  .slab { display: none; }
  .dash__real { display: block; position: absolute; z-index: 3; inset-inline: var(--sc-gutter); top: calc(var(--bar-h) + 2vh); width: auto; height: auto; border-radius: var(--r); box-shadow: var(--sc-e3); }
  .ground--dash { opacity: 0.78 !important; }
  .ground--loss { opacity: calc(1 - var(--sc-p) * 0.32); }
  .ground, .act video.flipx, .act .sc-stage__poster.flipx { object-position: 60% 30%; }
  .copy--hero { top: calc(var(--bar-h) + 2vh); inset-inline: var(--sc-gutter); width: auto; gap: 10px; }
  .h1 { font-size: clamp(1.9rem, 8.4vw, 2.6rem); }
  [dir="rtl"] .h1 { font-size: clamp(1.8rem, 8vw, 2.5rem); }
  .sub { font-size: var(--sc-t-sm); max-width: 36ch; }
  .copy--hero2 { display: none; }
  .h2 { font-size: clamp(1.4rem, 6.2vw, 2rem); max-width: 22ch; }
  .h2--big { font-size: clamp(1.8rem, 8vw, 2.6rem); }
  .glance { inset-inline: var(--sc-gutter); width: auto; bottom: clamp(2rem, 6vh, 4rem); padding: 12px 14px; gap: 8px; }
  .glance__n { font-size: 1.75rem; }
  .art { inset-inline: var(--sc-gutter); bottom: 6px; }
  /* the loss act stacks on phones: headline, then the session panel, then the
     rest of the picture where the words turn to dust. A flow column sizes
     itself to the copy, so a longer line can never push the panel into it */
  .act--loss .stage { display: flex; flex-direction: column; align-items: stretch; gap: 18px; padding: calc(var(--bar-h) + 2vh) var(--sc-gutter) 0; }
  .act--loss .stage > picture { display: contents; }
  .act--loss .copy--side { position: relative; inset: auto; top: auto; width: auto; order: -1; }
  .panel--session { position: relative; inset: auto; top: auto; bottom: auto; width: auto; transform: none; gap: 10px; }
  .say { padding: 12px 14px 0; gap: 8px; }
  .say__k { font-size: 1.05rem; }
  .say__in { height: 56px; padding-inline: 16px; font-size: 1.05rem; }
  .erode { padding-inline: 14px; font-size: 1.05rem; }
  .copy--side { top: calc(var(--bar-h) + 2vh); transform: none; inset-inline: var(--sc-gutter); width: auto; }
  .copy--brief { top: calc(var(--bar-h) + 2vh); inset-inline: var(--sc-gutter); width: auto; }
  .panel--brief { inset-inline: var(--sc-gutter); width: auto; top: auto; bottom: clamp(2rem, 6vh, 4rem); transform: none; }
  /* the peak's content, the reader's own line included, holds the 12px
     floor: the panel scrolls inside itself rather than the type shrinking */
  .brief { font-size: 12px; padding: 12px 14px 8px; }
  .copy--brief2 { display: none; }
  .you__label { font-size: var(--sc-t-xs); max-width: 12rem; }
  .copy--dash { inset-inline: var(--sc-gutter); width: auto; top: auto; bottom: 5vh; transform: none; }
  .rail__lead { width: 76vw; }
  .item { width: 78vw; }
  .doc__grid, .rungs__grid { grid-template-columns: 1fr; }
  .close__inner { grid-template-columns: 1fr; }
  .act--close { height: auto !important; }
  .act--close .close__stage { position: relative !important; height: auto !important; min-height: 100svh; overflow: visible !important; }
  .act--close .close__inner { position: relative; inset: auto; top: auto; bottom: auto; width: auto; margin-inline: var(--sc-gutter); padding-block: calc(var(--bar-h) + 4vh) 24px; opacity: 1 !important; transform: none !important; }
  .act--close .foot { position: relative; inset: auto; height: auto; padding-block: 18px 22px; margin-inline: var(--sc-gutter); }
  .act--close .ground { position: absolute; }
  .join__fields { grid-template-columns: 1fr; }
  .seg__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .seg__o:nth-child(3) { border-inline-start: 0; }
  .seg__o:nth-child(n + 3) { border-block-start: 1px solid var(--panel-rule); }
  .foot { height: auto; padding-block: 14px; }
}

/* ---------------------------------------------------- the real map -- */
.mapcard { position: absolute; z-index: 2; inset-inline-end: 5vw; top: 50%; transform: translateY(-50%); width: min(50vw, 78vh); aspect-ratio: 1 / 1; border-radius: var(--r-lg); background: linear-gradient(160deg, var(--field), var(--panel-tint)); overflow: hidden; box-shadow: 0 1px 0 color-mix(in oklab, var(--field) 60%, transparent) inset, var(--sc-e3), 0 0 0 1px color-mix(in oklab, var(--field) 8%, transparent); }
.mapcard:focus-visible { outline: 3px solid var(--sc-accent); outline-offset: 3px; }
.mapcard__poster { position: absolute; inset: 3%; width: 94%; height: 94%; object-fit: contain; transition: opacity 400ms var(--sc-ease-out); }
.mapcard.has-svg .mapcard__poster { opacity: 0; }
.mapcard__svg { position: absolute; inset: 2%; }
.mapcard__svg svg { width: 100%; height: 100%; display: block; }
.mapcard__hint { position: absolute; left: 16px; right: 16px; bottom: 12px; margin: 0; font-family: var(--sc-font-text); font-size: var(--t-label); line-height: 1.4; color: var(--panel-soft); opacity: 0; transition: opacity 300ms var(--sc-ease-out); }
.mapcard.has-svg .mapcard__hint { opacity: 1; }
[dir="rtl"] .mapcard__hint { font-family: var(--ar-font); text-align: right; }
.copy--graph { inset-inline-start: var(--sc-gutter); top: 50%; transform: translateY(-50%); width: min(30rem, 36vw); }
.copy--graph .cap { font-family: var(--sc-font-display); font-style: italic; font-size: clamp(1rem, 1.3vw, 1.15rem); color: var(--sc-accent); }
/* the number's box is fixed so the caption cannot reflow as it counts: an
   italic serif has no guaranteed tabular figures to hold the width for it */
#edgeCount { display: inline-block; min-width: 2.4ch; text-align: end; }
[dir="rtl"] .copy--graph .cap { font-family: var(--ar-font); font-style: normal; letter-spacing: normal; }
/* Drawing under the hand, in eight batches. Every arc and node used to carry a
   calc() on --sc-p, which is 1,468 style recalculations on every scroll frame
   and where the phone's 107ms frames came from. Each element now carries the
   batch it belongs to (b0 to b7, given once when the vector lands) and the card
   carries how far the drawing has reached (d1 to d8, stepped in app.js from
   --sc-p, rAF-throttled and only while the act is on screen). The transition
   does the drawing between one step and the next. */
.mapcard__svg { contain: layout paint; }
.mapcard .sc-e { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 620ms linear, opacity 200ms var(--sc-ease-out), stroke-width 200ms var(--sc-ease-out); }
.mapcard .sc-g { opacity: 0; transition: opacity 420ms var(--sc-ease-out); }
/* the 32 group arcs carry no pathLength, so they never could draw: they are
   painted once and left alone rather than recomputed every frame */
.mapcard #secs path { stroke-dasharray: 1; stroke-dashoffset: 0; }
.mapcard.d1 .b0,
.mapcard.d2 :is(.b0, .b1),
.mapcard.d3 :is(.b0, .b1, .b2),
.mapcard.d4 :is(.b0, .b1, .b2, .b3),
.mapcard.d5 :is(.b0, .b1, .b2, .b3, .b4),
.mapcard.d6 :is(.b0, .b1, .b2, .b3, .b4, .b5),
.mapcard.d7 :is(.b0, .b1, .b2, .b3, .b4, .b5, .b6),
.mapcard.d8 :is(.b0, .b1, .b2, .b3, .b4, .b5, .b6, .b7) { stroke-dashoffset: 0; opacity: 1; }
/* the type on the ring arrives after the shapes it names */
.mapcard #core text, .mapcard #secs text, .mapcard #labels text { opacity: 0; transition: opacity 320ms var(--sc-ease-out); }
.mapcard:is(.d1, .d2, .d3, .d4, .d5, .d6, .d7, .d8) #core text { opacity: 1; }
.mapcard:is(.d4, .d5, .d6, .d7, .d8) #secs text { opacity: 1; }
.mapcard:is(.d6, .d7, .d8) #labels text:not([opacity="0"]) { opacity: 1; }
.mapcard.is-hover #edges path { opacity: 0.06; }
.mapcard.is-hover #edges path.lit { opacity: 1; stroke-width: 2.6px; }
.mapcard.is-hover #nodes > g { opacity: 0.35 !important; }
.mapcard.is-hover #nodes > g.lit { opacity: 1 !important; }
.mapcard #labels text.lit { opacity: 1 !important; font-weight: 600; }
@media (max-width: 860px) {
  .mapcard { inset-inline: var(--sc-gutter); width: auto; top: calc(var(--bar-h) + 2vh); transform: none; }
  .copy--graph { inset-inline: var(--sc-gutter); width: auto; top: auto; bottom: 4vh; transform: none; }
  .copy--graph .h2 { font-size: 1.15rem; }
  .copy--graph .p { font-size: var(--sc-t-xs); }
  .copy--graph .cap { font-size: 1rem; }
  /* 179 names at 350px of card are a texture, not type: the phone draws the
     ring and the dots and leaves the labels out of the render entirely */
  .mapcard #labels { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .mapcard .sc-e { stroke-dashoffset: 0 !important; }
  .mapcard .sc-g, .mapcard #core text, .mapcard #secs text, .mapcard #labels text:not([opacity="0"]) { opacity: 1 !important; }
}

/* ------------------------------------------- 861 to 1100px, the hero -- */
/* At this width the cover-fit crops the rendered slab hard and its lit face
   reaches into the copy column: 1.03:1 at the worst frame at 1024x768. Three
   moves, none of which costs the act its depth: the picture's face is carried
   off the copy, the copy is held a little narrower, and this act's scrim runs
   further across. object-position is a physical property and the RTL mirror is
   applied after it, so one value serves both directions symmetrically. */
@media (min-width: 861px) and (max-width: 1100px) {
  /* the crop puts the lit ring under the headline's last third: 3.95:1 at the
     worst frame of the hero clip, so this act's scrim reaches further */
  .act--hero .scrim--lead {
    background: linear-gradient(to right,
      color-mix(in oklab, var(--sc-canvas) 90%, transparent) 0%,
      color-mix(in oklab, var(--sc-canvas) 86%, transparent) 34%,
      color-mix(in oklab, var(--sc-canvas) 58%, transparent) 48%,
      color-mix(in oklab, var(--sc-canvas) 24%, transparent) 62%,
      transparent 72%);
  }
  [dir="rtl"] .act--hero .scrim--lead {
    background: linear-gradient(to left,
      color-mix(in oklab, var(--sc-canvas) 90%, transparent) 0%,
      color-mix(in oklab, var(--sc-canvas) 86%, transparent) 34%,
      color-mix(in oklab, var(--sc-canvas) 58%, transparent) 48%,
      color-mix(in oklab, var(--sc-canvas) 24%, transparent) 62%,
      transparent 72%);
  }
}

/* ------------------------------------- 861 to 1320px, the dash act -- */
/* The cover-fit carries the slab's lit face into the copy column across a
   wider band than the first fix covered: measured with lab/dash-band.mjs, the
   copy's right edge is still inside the slab at 1150 (24px) and 1200 (11px)
   and only clears on its own at 1280. The three moves are the same ones, and
   the band now ends where the geometry actually stops overlapping. */
@media (min-width: 861px) and (max-width: 1320px) {
  .ground--dash { object-position: 46% 50%; }
  .copy--dash { width: min(26rem, 30vw); }
  .act--dash .scrim--lead {
    background: linear-gradient(to right,
      color-mix(in oklab, var(--sc-canvas) 88%, transparent) 0%,
      color-mix(in oklab, var(--sc-canvas) 84%, transparent) 38%,
      color-mix(in oklab, var(--sc-canvas) 50%, transparent) 50%,
      color-mix(in oklab, var(--sc-canvas) 18%, transparent) 62%,
      transparent 72%);
  }
  [dir="rtl"] .act--dash .scrim--lead {
    background: linear-gradient(to left,
      color-mix(in oklab, var(--sc-canvas) 88%, transparent) 0%,
      color-mix(in oklab, var(--sc-canvas) 84%, transparent) 38%,
      color-mix(in oklab, var(--sc-canvas) 50%, transparent) 50%,
      color-mix(in oklab, var(--sc-canvas) 18%, transparent) 62%,
      transparent 72%);
  }
}

/* -------------------------------------------------- short windows: flow -- */
/* Under 620px of viewport height a pinned stage cannot hold a panel and a
   block of copy at once: at 320x568 the map hint sat on the eyebrow and the
   dashboard ran 52px into the heading, and a pinned stage gives the reader no
   way to scroll them apart. So the two acts that pair a panel with copy flow,
   the same switch the close already has, decided inline in index.html before
   the engine reads the page (R124). The !important lines are for the window
   that turns short after load, where the pin is already set: the engine writes
   height, position and cue opacity inline, and inline beats any specificity.
   --sc-p is published on flow acts too, so the map still draws under the hand. */
.act--graph.is-flow, .act--dash.is-flow { height: auto !important; }
.act--graph.is-flow .stage, .act--dash.is-flow .stage {
  position: relative !important; height: auto !important; min-height: 0 !important; overflow: visible !important;
  display: grid; gap: clamp(14px, 3vh, 26px); padding-block: calc(var(--bar-h) + 3vh) 7vh;
}
.act--graph.is-flow .ground, .act--dash.is-flow .ground { position: absolute; }
.act--graph.is-flow .mapcard,
.act--graph.is-flow .copy--graph,
.act--dash.is-flow .dash__real,
.act--dash.is-flow .copy--dash {
  position: relative; inset: auto; top: auto; bottom: auto;
  transform: none !important; opacity: 1 !important;
  width: auto; margin-inline: auto; max-width: min(100%, 46rem);
  padding-inline: var(--sc-gutter);
}
.act--graph.is-flow .mapcard { width: min(calc(100% - var(--sc-gutter) * 2), 62vh); padding-inline: 0; }
.act--dash.is-flow .dash__real { display: block; height: auto; padding-inline: 0; width: min(calc(100% - var(--sc-gutter) * 2), 46rem); }
.act--dash.is-flow .slab { display: none; }
.act--dash.is-flow .ground--dash { opacity: 0.7 !important; }

/* ------------------------------------------ V5 · the phone's own pace -- */
/* 2026-09-10. On a phone the page kept the desktop's scroll for beats the
   phone does not show: the peak held one frame for 1.6 screens after its
   brief landed, the dashboard pinned a still picture, and the rail panned one
   78vw card at a time with its caption cut by an edge for 74% of the pan.
   Phone only, so nothing above this block moves on the desktop (R104). The
   act devices are switched inline in index.html before the engine reads the
   page (R124); these rules are the other half of that switch. */
@media (max-width: 860px) {
  /* the peak: the brief hands over to its payoff line, over the map with the
     reader's subject lit. One after the other, never a crossfade: the line
     and the panel's caption share the bottom of the screen, and two texts at
     half strength on top of each other read as a smear. The panel leaves over
     0.70 to 0.76 and the line's cue starts at 0.76 (index.html). --sc-p here
     is the brief act's own progress. */
  .act--brief .panel--brief { opacity: clamp(0, calc((0.76 - var(--sc-p)) * 16.7), 1); }
  .act--brief .copy--brief2 { display: grid; inset-inline: var(--sc-gutter); width: auto; bottom: clamp(2.5rem, 8vh, 5rem); }
  /* the line sits low over a bright part of the clip, so the ground darkens
     under it, and only as it arrives (R123: the scrim covers the copy) */
  .act--brief .stage::after { content: ""; position: absolute; inset: 0; z-index: 18; pointer-events: none; background: linear-gradient(to top, color-mix(in oklab, var(--sc-canvas) 94%, transparent) 0%, color-mix(in oklab, var(--sc-canvas) 78%, transparent) 22%, color-mix(in oklab, var(--sc-canvas) 30%, transparent) 40%, transparent 52%); opacity: clamp(0, calc((var(--sc-p) - 0.72) * 12.5), 1); }

  /* the rail as a list of whole cards */
  .act--rail.is-flow { height: auto !important; }
  .act--rail.is-flow .stage { position: relative !important; height: auto !important; overflow: visible !important; }
  .act--rail.is-flow .rail { flex-direction: column; align-items: stretch; height: auto; gap: 44px; padding-block: calc(var(--bar-h) + 4vh) 8vh; transform: none !important; }
  .act--rail.is-flow .rail__lead, .act--rail.is-flow .item { width: auto; padding-inline-end: 0; }
}