/* The landing page: a dark hall at night (1.10.2026), lifted from the dark
   product page of 23.9. One lamp over the sign, a floor of agents that recedes
   into the dark, and every chapter an exhibit under its own light. The nine
   decisions of 23.9: warehouse/plans/2026-09-23-landing-dark-product-page.md;
   the level-up: warehouse/references/2026-09-23-landing-level-up.md; this
   round: warehouse/plans/2026-10-01-landing-beauty.md.
   The hall block is namespaced under .hall, so the page's tokens never leak
   into the product and the product's never leak into the page. */

/* ---------- faces (all self-hosted; no third-party request from this page) ----------
   The Latin files carry Google's Latin range, so a Hebrew glyph is never
   looked up in a Latin file first. Heebo 700 (OFL, fonts.google.com) is the
   third tier: nouns, steps, facts, the captions' names. */
@font-face{font-family:"Assistant";src:url("fonts/assistant-vf-hebrew.woff2") format("woff2");font-weight:200 800;unicode-range:U+0590-05FF,U+FB1D-FB4F,U+200E-200F;font-display:swap}
@font-face{font-family:"Assistant";src:url("fonts/assistant-vf-latin.woff2") format("woff2");font-weight:200 800;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;font-display:swap}
@font-face{font-family:"Heebo";src:url("fonts/heebo-900-hebrew.woff2") format("woff2");font-weight:900;unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F;font-display:swap}
@font-face{font-family:"Heebo";src:url("fonts/heebo-900-latin.woff2") format("woff2");font-weight:900;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;font-display:swap}
@font-face{font-family:"Heebo";src:url("fonts/heebo-700-hebrew.woff2") format("woff2");font-weight:700;unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F;font-display:swap}
@font-face{font-family:"Heebo";src:url("fonts/heebo-700-latin.woff2") format("woff2");font-weight:700;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;font-display:swap}
@font-face{font-family:"Secular One";src:url("fonts/secular-one-400-hebrew.woff2") format("woff2");font-weight:400;unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F;font-display:swap}
@font-face{font-family:"Secular One";src:url("fonts/secular-one-400-latin.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("fonts/ibm-plex-mono-400-latin.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("fonts/ibm-plex-mono-500-latin.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Space Grotesk";src:url("fonts/space-grotesk-500-latin.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Space Grotesk";src:url("fonts/space-grotesk-700-latin.woff2") format("woff2");font-weight:700;font-display:swap}

/* ---------- the page's tokens: one blue-black ramp, white, grey ----------
   The ground is the hall's own blue-black, desaturated, so the product frames
   and the chrome agree (the 23.9 page held a neutral black under navy frames,
   which read as pasted screenshots). Not darker than the level-up's floor:
   #0F1117 sits a step above #0E0E10 in lightness, the card above #18181B.
   Amber is the one light that travels; cobalt is the logo's alone. */
:root{
  --bg:#0F1117;--bg-2:#14171F;--card:#1A1D26;
  --line:#2A2E3A;--line-2:#434856;
  --ink:#F4F4F1;--ink-2:#C4C5C2;--muted:#9C9EA3;   /* muted 6.5:1 on the ground; IS 5568 wants 4.5:1 */
  --cobalt:#4A5CF0;--amber:#FFB23F;
  --warm:255,214,160;                              /* the lamp: a warm white, never a colour of its own */
  --he:"Assistant","Segoe UI",Arial,sans-serif;
  --disp:"Heebo","Assistant","Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;
  --lat:"Space Grotesk","Assistant",sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
  --gutter:clamp(20px,5vw,72px);
  --wrap:1280px;
  --rail:calc(max(0px,(100vw - var(--wrap)) / 2) + var(--gutter) / 2 - 6px);   /* the thread's x, from the left */
}
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%;background:var(--bg);scroll-behavior:smooth}
body{position:relative;background:var(--bg);color:var(--ink);font-family:var(--he);font-size:17px;line-height:1.6;
  font-variation-settings:"wght" 430;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
/* film grain over everything, so a glow reads as light and the dark as a surface. Inline SVG: no request. */
body::after{content:'';position:fixed;inset:0;z-index:100;pointer-events:none;opacity:.075;mix-blend-mode:screen;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .7 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:200px 200px}
a{color:inherit;text-decoration:none}
ul,ol{padding:0;list-style:none}
img,svg,video{display:block;max-width:100%}
button{font:inherit;color:inherit}
b{font-weight:700}
bdi{unicode-bidi:isolate}
::selection{background:var(--amber);color:#1A1200}
:focus-visible{outline:2px solid #fff;outline-offset:3px}
.wrap{position:relative;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* the skip link: off-screen until focused, first in the tab order */
.skip{position:absolute;inset-inline-start:16px;top:-60px;z-index:110;padding:10px 14px;background:#fff;color:#000;
  border-radius:8px;font-weight:600;transition:top .15s}
.skip:focus{top:12px}

/* ---------- the bar ---------- */
.bar{position:sticky;top:0;z-index:30;height:64px;display:flex;align-items:center;
  background:color-mix(in srgb,var(--bg) 72%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-block-end:1px solid rgba(255,255,255,.06)}
.bar .wrap{width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px}
.mark{display:inline-flex;align-items:center;min-height:44px;font-family:var(--lat);font-weight:700;font-size:24px;letter-spacing:.05em;direction:ltr;unicode-bidi:isolate}
.mark i{font-style:normal;color:var(--cobalt)}   /* the logo's cobalt, one step lighter so it clears 3:1 on the ground */
.bar nav{display:flex;align-items:center;gap:28px;font-size:15px;color:var(--ink-2)}
.bar nav a{display:inline-flex;align-items:center;min-height:44px;transition:color .2s}
.bar nav a:hover{color:var(--ink)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:50px;padding:0 26px;
  border:1px solid transparent;border-radius:999px;font-weight:600;font-size:16px;white-space:nowrap;
  cursor:pointer;transition:background-color .2s,color .2s,border-color .2s,box-shadow .3s,scale .16s var(--ease)}
.btn:active{scale:.97}
.btn--solid{background:#fff;color:#000;box-shadow:0 0 0 1px rgba(255,255,255,.18),0 12px 40px -12px rgba(255,255,255,.28)}
.btn--solid:hover{background:#E8E8E4;box-shadow:0 0 0 1px rgba(255,255,255,.25),0 12px 48px -10px rgba(255,255,255,.4)}
.btn--ghost{border-color:var(--line-2);color:var(--ink)}
.btn--ghost:hover{border-color:#6A6A70}
.btn--sm{height:40px;padding:0 18px;font-size:14px;box-shadow:none}

/* ---------- the thread: one line from the hall to the form ----------
   Desktop only. It sits in the left gutter, fills as the page is read, and
   carries a lettered station per chapter; the one being read is amber - the
   same amber that walked the floor. Stations are placed by landing.js;
   without it the thread is not shown at all (it starts hidden). */
.spine{position:fixed;z-index:20;top:96px;bottom:40px;width:1px;background:var(--line);opacity:0;pointer-events:none;
  inset-inline-start:var(--rail);transition:opacity .4s var(--ease)}
.spine.is-on{opacity:1}
.spine__fill{position:absolute;inset:0;background:linear-gradient(to bottom,var(--amber),var(--ink-2) 120px);transform-origin:50% 0;scale:1 0}
.spine b{position:absolute;inset-inline-start:-11px;width:23px;height:23px;display:grid;place-items:center;
  font-family:var(--disp);font-weight:700;font-size:13px;line-height:1;color:var(--muted);
  background:var(--bg);border:1px solid var(--line-2);transition:background-color .3s,border-color .3s,color .3s,box-shadow .3s}
.spine b::before{content:attr(data-l)}
.spine b.is-past{border-color:var(--ink-2);color:var(--ink-2)}
.spine b.is-here{background:var(--amber);border-color:var(--amber);color:#1A1200;box-shadow:0 0 0 5px rgba(255,178,63,.16),0 0 30px rgba(255,178,63,.35)}
.spine b span{position:absolute;right:calc(100% + 12px);top:50%;   /* physical left: out into the margin, never over the text */
  translate:0 -50%;font-size:12px;font-weight:700;color:var(--muted);white-space:nowrap;opacity:0;transition:opacity .3s}
.spine b.is-here span{opacity:1;color:var(--ink)}
@media (max-width:1419px){.spine b span{display:none}}   /* below this the margin cannot hold the name */
/* phones: a hairline of progress under the bar instead, CSS only */
@supports (animation-timeline:scroll()){
  @media (max-width:900px) and (prefers-reduced-motion:no-preference){
    .bar::after{content:'';position:absolute;inset-inline:0;bottom:-1px;height:2px;background:var(--amber);
      transform-origin:0 50%;animation:read linear both;animation-timeline:scroll(root)}
  }
}
@keyframes read{from{scale:0 1}to{scale:1 1}}

/* ---------- the first screen: a hall at night ----------
   One warm lamp hangs above the sign; below the horizon the floor of agents
   recedes into fog. The hero's height is the screen under the bar; the script
   sets it exactly while the screen is pinned. */
.hero{position:relative;min-height:calc(100svh - 64px);overflow:hidden;isolation:isolate;--stage-top:400px}
.hero__lamp{position:absolute;z-index:0;left:50%;top:-340px;width:1500px;height:920px;translate:-50% 0;pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%,rgba(var(--warm),.22) 0%,rgba(var(--warm),.07) 38%,rgba(var(--warm),0) 70%)}
/* the beam: from the lamp down to the floor, a soft widening cone that lands on the lit cell */
.hero__beam{position:absolute;z-index:0;inset:0;pointer-events:none;
  background:conic-gradient(from 150deg at 50% -6%,rgba(var(--warm),0) 0deg,rgba(var(--warm),.04) 16deg,rgba(var(--warm),.10) 30deg,rgba(var(--warm),.04) 44deg,rgba(var(--warm),0) 60deg);
  -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.3),#000 50%,rgba(0,0,0,.75));mask-image:linear-gradient(to bottom,rgba(0,0,0,.3),#000 50%,rgba(0,0,0,.75));filter:blur(12px)}
.hero__in{position:relative;z-index:2;padding-block-start:clamp(44px,7vh,68px);display:grid;justify-items:center;text-align:center;gap:clamp(16px,2.2vh,22px);max-width:1100px;margin-inline:auto}
/* the sign: the first line lit, the second sentence a step dimmer (its own built-in subhead); Hebrew is never tracked */
.hero h1{font-family:var(--disp);font-weight:900;font-size:clamp(40px,5.3vw,76px);line-height:1.04;letter-spacing:0;text-wrap:balance;color:#fff}
/* two sentences, two lines at a wide screen: the first lit, the second a step dimmer (no span inside Gal's text) */
@media (min-width:901px){.hero h1{color:rgba(255,255,255,.72)}.hero h1::first-line{color:#fff}}
.hero .lede{font-size:clamp(18px,1.45vw,21px);line-height:1.5;color:var(--ink-2);max-width:640px;font-variation-settings:"wght" 460}
.hero__cta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-block-start:4px}
/* the horizon: where the far floor dissolves, a faint line the sign hangs above */
.horizon{position:absolute;z-index:1;left:0;right:0;top:calc(var(--stage-top) + 10px);height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent 8%,rgba(255,255,255,.10) 35%,rgba(255,255,255,.16) 50%,rgba(255,255,255,.10) 65%,transparent 92%)}
/* the floor: a plane seen from above, receding to the horizon, fogged at the far end, cut at the sides and by the fold.
   width is pinned to 100% on purpose (with a height set and no width, aspect-ratio would derive one) */
.stage{position:absolute;z-index:1;left:0;right:0;top:var(--stage-top);bottom:0;width:100%;perspective:1000px;perspective-origin:50% -30%;overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 44%,#000 88%,transparent 100%),linear-gradient(to right,transparent 0,#000 13%,#000 87%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to bottom,transparent 0,#000 44%,#000 88%,transparent 100%),linear-gradient(to right,transparent 0,#000 13%,#000 87%,transparent 100%);
  mask-composite:intersect}
/* the example tag sits on the near edge of the floor, where the first whole row is */
.stage__tag{position:absolute;z-index:4;bottom:22px;inset-inline-start:calc(var(--rail) + 22px);background:color-mix(in srgb,var(--bg) 72%,transparent)}   /* a child of the hero, never of the masked stage */
/* the tilt and the zoom are variables, so the script can move the camera without touching the transform itself */
.field{--tilt:52deg;--zoom:1;--lift:0px;position:absolute;left:50%;bottom:-302px;width:2420px;translate:-50% 0;
  transform:translateY(var(--lift)) rotateX(var(--tilt)) scale(var(--zoom));transform-origin:50% 100%;
  display:grid;gap:22px;padding-block-start:6px;will-change:transform}
.field__row{position:relative;z-index:1;display:grid;grid-auto-flow:column;grid-auto-columns:214px;gap:22px;justify-content:center}
/* the rows are staggered with margins, not transforms, so the script can read a cell's place from its offsets */
.field__row--e{margin-inline-start:280px}
.field__row--d{margin-inline-end:120px}
.field__row--c{margin-inline-start:192px}
.field__row--b{margin-inline-end:236px}
.field__row--a{margin-inline-start:120px}
.field__row--z{margin-inline-end:200px}
/* the pool: the pointer at rest, a warm pool on the floor under the one it points at. In plane coordinates, so it
   projects as an ellipse. The numbers are the finder's seat at rest (row b, fourth from the left); the script
   re-measures and glides it to each cell the pointer walks. */
.pool{position:absolute;z-index:0;left:0;top:0;translate:474px 408px;width:1000px;height:700px;pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,178,63,.30) 0%,rgba(255,178,63,.10) 36%,rgba(255,178,63,.02) 62%,rgba(255,178,63,0) 100%);
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 38%);mask-image:linear-gradient(to bottom,transparent 0,#000 38%)}
/* the rails: the hall's own connective language, drawn on the floor between the cells by the script */
.rails{position:absolute;z-index:0;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.rails path{fill:none;stroke:#4A5C77;stroke-width:1.5;stroke-dasharray:3 5;opacity:.8}
.rails rect{fill:#4A5C77}
.rails .rail--amber{stroke:var(--amber);stroke-width:2;opacity:1;stroke-dasharray:var(--len,1200);stroke-dashoffset:0}
.rails .rail--amber + rect,.rails .land--amber{fill:var(--amber)}
.rails .rail--amber.is-drawing{animation:rail 1.6s var(--ease) both}
@keyframes rail{from{stroke-dashoffset:var(--len,1200)}to{stroke-dashoffset:0}}

/* ---------- a chapter: an exhibit in the hall ---------- */
.sec{position:relative;--pad:clamp(80px,11vh,120px);padding-block:var(--pad);isolation:isolate;overflow-x:clip}   /* the exhibits' lamp cones reach past the gutter */
.sec+.sec{border-block-start:1px solid rgba(255,255,255,.05)}
/* the chapter's letter, huge and faint, behind its head: the running structure a reader feels before reading */
.sec::before{content:attr(data-letter);position:absolute;z-index:0;top:calc(var(--pad) - 40px);inset-inline-start:calc(var(--gutter) + 4px);
  font-family:var(--disp);font-weight:900;font-size:clamp(150px,24vw,340px);line-height:.8;color:rgba(255,255,255,.045);pointer-events:none;user-select:none}
/* one soft light at the head of every chapter, each from its own side, so the dark has a source */
.sec::after{content:'';position:absolute;z-index:0;inset:0 0 auto;height:620px;pointer-events:none;
  background:radial-gradient(ellipse 44% 46% at var(--lx,70%) 0%,rgba(var(--warm),.06),transparent)}
.sec--agents{--lx:30%}.sec--build{--lx:60%}.sec--trust{--lx:28%}.talk{--lx:72%}
.sec>.wrap{z-index:1}
.sec__head{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);column-gap:56px;row-gap:22px;align-items:end;margin-block-end:clamp(40px,5vh,56px)}
.sec__head--stack{grid-template-columns:1fr}
.rule{grid-column:1/-1;display:flex;align-items:center;gap:16px;margin-block-end:14px}
.rule::after{content:'';flex:1;height:1px;background:var(--line-2)}
/* the kicker hangs on the rule; its letter is the station's letter, lit */
.kicker{flex:none;font-size:14px;font-weight:700;letter-spacing:0;color:var(--muted)}
.kicker::first-letter{color:var(--ink);font-family:var(--disp);font-weight:900;font-size:17px}
.sec h2{font-family:var(--disp);font-weight:900;font-size:clamp(32px,3.9vw,56px);line-height:1.06;letter-spacing:0;text-wrap:pretty;color:#fff}
/* the same device on the two heads whose first line is their first sentence at a wide screen */
/* (the Hebrew heads dimmed their second line; in English a line is not a sentence, so both heads stay lit) */
.sec__head p{font-size:clamp(17px,1.35vw,20px);color:var(--ink-2);line-height:1.55;max-width:560px;padding-block-end:6px;text-wrap:pretty}
.sec__head p b{color:var(--ink);font-weight:700}
.ex-tag{display:inline-block;font-family:var(--he);font-size:12px;font-weight:700;letter-spacing:0;
  color:var(--ink);border:1px solid var(--line-2);border-radius:4px;padding:1px 8px;vertical-align:middle}

/* the exhibit: a product frame under a lamp, standing on a dark floor that holds its shadow */
.exhibit{position:relative;margin:0}
.exhibit::before{content:'';position:absolute;z-index:0;left:-10%;right:-10%;top:-300px;height:320px;pointer-events:none;   /* the lamp's cone */
  background:conic-gradient(from 118deg at 50% 0%,rgba(var(--warm),0) 0deg,rgba(var(--warm),.05) 28deg,rgba(var(--warm),.12) 62deg,rgba(var(--warm),.05) 96deg,rgba(var(--warm),0) 124deg);
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 70%);mask-image:linear-gradient(to bottom,transparent,#000 70%);filter:blur(14px)}
.exhibit::after{content:'';position:absolute;z-index:0;left:4%;right:4%;top:100%;height:160px;pointer-events:none;   /* the floor under it */
  background:linear-gradient(to bottom,rgba(16,26,40,.85),rgba(16,26,40,.3) 45%,transparent 100%);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent);mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent);filter:blur(4px)}
.frame{position:relative;z-index:1;background:#0B0F16;border-radius:10px;overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 -1px 0 rgba(255,255,255,.03),0 0 0 1px rgba(255,255,255,.07),0 50px 110px -30px rgba(0,0,0,.9),0 0 90px 10px rgba(var(--warm),.035)}
.frame__tag{position:absolute;z-index:3;top:16px;inset-inline-end:18px;background:rgba(0,0,0,.5)}
.fig svg{width:100%;height:auto}

/* ---------- the ontology: four nouns (the map's legend), the map, one line ---------- */
.nouns{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;margin-block-end:44px}
.noun{display:grid;grid-template-columns:auto 1fr;align-items:baseline;column-gap:10px;row-gap:4px;padding-block-start:14px;border-block-start:1px solid var(--line-2)}
.noun b{font-family:var(--disp);font-weight:700;font-size:clamp(21px,1.7vw,24px);line-height:1.15}
.noun span{grid-column:2;color:var(--ink-2);font-size:15.5px;line-height:1.45}
.lg{display:inline-block;width:12px;height:12px;border:1.5px solid #4A5C77;background:#0B111A}
.lg--tested{background:#A9B6C8;border-color:#A9B6C8}
.lg--asked{border-color:#A9B6C8}
.lg--assumed{border-style:dashed;border-color:#7E8A9C}
.lg--open{border-style:dashed;border-color:var(--amber)}
/* the ontology, told in three stages: the lab's scattered files -> one index, a record per file with what is
   known of it -> one proposal out of what is still open. Plain HTML (read aloud, editable in the canvas, whole
   without script); landing.js flies each file into its row while the chapter is pinned. */
.frame--map{padding:30px 34px 36px;background:linear-gradient(168deg,#111A28 0%,#0C121B 45%,#0A0E15 100%)}
.onto{position:relative;display:grid;grid-template-columns:minmax(0,.8fr) 40px minmax(0,1.35fr) 40px minmax(0,.85fr);align-items:stretch;color:#E6ECF5}
.onto__h{font-family:var(--hdisp,"Secular One"),var(--he);font-size:clamp(20px,1.7vw,24px);line-height:1.1;color:#F0F4FA;margin-block-end:18px}
.onto__arrow{align-self:center;justify-self:center;width:24px;height:1px;background:#4A5C77;position:relative;margin-block-start:42px}
.onto__arrow::before{content:'';position:absolute;right:-1px;top:-4px;width:8px;height:8px;border-right:1px solid #4A5C77;border-top:1px solid #4A5C77;rotate:45deg}
/* the pile: files dropped at angles, the way a lab's folders actually look */
.pile{position:relative;height:calc(100% - 42px);min-height:420px}
.file{position:absolute;inset-inline-start:var(--x);top:var(--y);rotate:var(--r);display:flex;align-items:center;gap:8px;
  padding:8px 12px;background:#141D2B;border:1px solid #2C3A4D;border-radius:6px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 10px 24px -10px rgba(0,0,0,.8);
  font-family:var(--mono);font-size:13px;color:#C3CDDB;white-space:nowrap}
.file i{width:11px;height:14px;border:1.5px solid #8593AA;border-radius:1px;flex:none;
  clip-path:polygon(0 0,62% 0,100% 30%,100% 100%,0 100%)}
/* below 1180px the pile column is too narrow to scatter in: the files stand in a loose column instead */
@media (max-width:1180px){
  .pile{height:auto;min-height:0;display:flex;flex-direction:column;align-items:flex-start;gap:20px}
  .file{position:static;max-width:100%}
}
/* the index: one row per record, its status, and the file it points to */
.ledger{display:grid;gap:8px}
.rec{display:grid;grid-template-columns:14px minmax(0,1fr) auto;grid-template-areas:"m n s" ". f f";column-gap:12px;row-gap:2px;align-items:center;
  padding:10px 14px;background:#111A27;border:1px solid #243246;border-radius:6px;box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.rec .lg{grid-area:m}
.rec b{grid-area:n;font-weight:600;font-size:17px;line-height:1.3;color:#F0F4FA}
.rec__st{grid-area:s;font-size:13px;font-weight:700;color:#A9B6C8}
.rec bdi{grid-area:f;justify-self:start;font-family:var(--mono);font-size:12px;color:#8593AA}
.rec[data-kind="open"]{border-color:rgba(255,178,63,.55);background:#1A170F}
.rec[data-kind="open"] .rec__st{color:#FFC96F}
/* the proposal: one card, one amber line to the record it grew from */
.onto__col--prop{display:flex;flex-direction:column}
.prop{margin-block-start:auto;padding:20px 20px 18px;border:1.5px solid var(--amber);border-radius:10px;
  background:linear-gradient(160deg,rgba(255,178,63,.16),rgba(255,178,63,.03));box-shadow:0 0 60px -12px rgba(255,178,63,.55)}
.prop b{display:block;font-family:var(--hdisp,"Secular One"),var(--he);font-weight:400;font-size:clamp(20px,1.7vw,24px);line-height:1.2;color:#FFD08A}
.prop p{margin-block-start:8px;font-size:15.5px;line-height:1.5;color:#E6D3B0}
.onto__link{position:absolute;height:1.5px;background:var(--amber);transform-origin:0 50%;pointer-events:none;display:none}
.onto.is-linked .onto__link{display:block}
.coda{margin-block-start:clamp(140px,16vh,180px);font-size:clamp(17px,1.35vw,20px);line-height:1.6;color:var(--ink-2);max-width:820px}
.coda b{color:var(--ink);font-weight:700}

/* ---------- the agents: at rest four cards with a picture each; on a wide screen with motion the script adds
   .has-reel and the four become captions beside one sticky player; the opener (the finder's screen filling the
   screen, then shrinking into the player) exists only under .has-opener ---------- */
.opener{display:none}
.has-opener .opener{display:block;position:relative;z-index:6;height:calc(100vh - 64px);overflow:hidden;pointer-events:none;background:var(--bg)}
.opener__frame{position:absolute;left:0;top:0;transform-origin:0 0;overflow:hidden;border-radius:0;background:#0B0F16;
  box-shadow:0 0 0 1px rgba(255,255,255,.07),0 50px 110px -30px rgba(0,0,0,.9)}
.opener__frame img{width:100%;height:100%;object-fit:cover;object-position:top}
.reel__caps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 28px}
.cap h3{font-family:var(--disp);font-weight:700;font-size:clamp(24px,2vw,28px);line-height:1.1}
.cap h3 bdi{display:block;text-align:start;
  font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:.12em;color:var(--muted);margin-block-end:8px}
.cap p{margin-block-start:10px;color:var(--ink-2);font-size:16.5px;line-height:1.55;max-width:460px}
.cap__shot{position:relative;margin-block-start:18px;aspect-ratio:1128/836;border-radius:10px;background:#0B111A;overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 0 0 1px rgba(255,255,255,.07),0 30px 70px -30px rgba(0,0,0,.9)}
.cap__shot img,.reel__frame img{width:100%;height:100%;object-fit:cover;object-position:top}
.reel__frame{aspect-ratio:1128/836}
.tag{position:absolute;left:12px;bottom:12px;   /* physical bottom-left: the recording's own close control sits top-left */
  font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;
  color:var(--ink-2);background:rgba(0,0,0,.6);border:1px solid var(--line-2);border-radius:4px;padding:2px 8px;direction:ltr}
.reel__stage{display:none}

.has-reel .reel{display:grid;grid-template-columns:minmax(0,.5fr) minmax(0,1.5fr);gap:clamp(28px,4vw,64px);align-items:start}
.has-reel .reel__caps{display:block}
.has-reel .cap{min-height:52vh;display:flex;flex-direction:column;justify-content:center;padding-block:24px;color:var(--muted);
  border-block-start:1px solid var(--line);transition:border-color .4s}
/* the first caption reaches the middle exactly when the player sticks */
.has-reel .cap:first-child{min-height:calc(100vh - 176px)}
.has-reel .cap:last-child{min-height:calc(100vh - 88px)}   /* at least the player's height, or its top is cut as it leaves */
.has-reel .cap h3 span{color:var(--muted);transition:color .4s}
.has-reel .cap p{color:var(--muted);transition:color .4s}
.has-reel .cap h3 bdi{transition:color .4s}
.has-reel .cap.is-on{border-block-start-color:var(--amber)}
.has-reel .cap.is-on h3 bdi{color:var(--amber)}
.has-reel .cap.is-on h3 span{color:var(--ink)}
.has-reel .cap.is-on p{color:var(--ink-2)}
.has-reel .cap__shot{display:none}
/* the player is sized by the screen's height as well as its width, so the pause button is on screen on a short laptop */
.has-reel .reel__stage{display:block;position:sticky;top:88px;width:min(100%,calc((100vh - 240px) * 1128 / 836));justify-self:end}
.reel__vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;opacity:0;transition:opacity .35s}
.reel__vid.is-ready{opacity:1}
/* the floor under the player holds a faint reflection of the chapter's still */
.mirror{position:absolute;z-index:1;left:0;right:0;top:100%;height:150px;overflow:hidden;transform:scaleY(-1);transform-origin:50% 0;opacity:.3;pointer-events:none;
  -webkit-mask-image:linear-gradient(to top,rgba(0,0,0,1),transparent 92%);mask-image:linear-gradient(to top,rgba(0,0,0,1),transparent 92%);filter:blur(2px)}
.mirror img{position:absolute;left:0;bottom:0;width:100%;height:auto}
.exhibit--screen::after{display:none}
.reel__foot{position:relative;z-index:2;display:flex;align-items:center;gap:14px;margin-block-start:16px}
.reel__btn{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:999px;border:1px solid var(--line-2);
  background:var(--card);cursor:pointer;transition:border-color .2s,background-color .2s}
.reel__btn:hover{border-color:#6A6A70}
.reel__btn svg{width:16px;height:16px;fill:var(--ink)}
.reel__btn .i-play,.reel__btn[aria-pressed="true"] .i-pause{display:none}
.reel__btn[aria-pressed="true"] .i-play{display:block}
.reel__bar{flex:1;display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.reel__bar i{height:2px;background:var(--line);position:relative;overflow:hidden}
.reel__bar i::after{content:'';position:absolute;inset:0;background:var(--ink-2);transform-origin:0 50%;scale:var(--p,0) 1}
.reel__bar i.is-on::after{background:var(--amber);box-shadow:0 0 10px rgba(255,178,63,.6)}

/* the three steps: a rail with a dot at each step, no boxes */
.steps{margin-block-start:clamp(72px,10vh,120px)}
.steps__h{font-size:14px;font-weight:700;color:var(--muted);margin-block-end:18px}
.steps ol{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.steps ol::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:var(--line-2)}
.steps li{position:relative;padding-block-start:22px}
.steps li::before{content:'';position:absolute;top:-3px;inset-inline-start:0;width:7px;height:7px;background:var(--ink-2)}
.steps li:first-child::before{background:var(--amber);box-shadow:0 0 0 4px rgba(255,178,63,.18)}
.steps li b{font-family:var(--disp);font-weight:700;font-size:clamp(22px,2vw,26px);line-height:1.2}

/* ---------- the build: four requests, a ruled list in the product's colours ---------- */
.asks{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 48px;padding-block-start:44px}
.asks__tag{position:absolute;top:0;inset-inline-start:0}
.ask{position:relative;display:flex;align-items:center;gap:18px;padding:22px 4px;border-block-start:1px solid var(--line-2);
  color:var(--hink);overflow:hidden;transition:border-color .3s}
.ask::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(260px circle at var(--mx,20%) var(--my,0%),color-mix(in srgb,var(--ag) 18%,transparent),transparent 70%)}
.ask:hover{border-block-start-color:color-mix(in srgb,var(--ag) 60%,var(--line-2))}
.ask__emb{flex:none;position:relative;display:grid;place-items:center;width:46px;height:46px;border:1px solid var(--ag);color:var(--ag);border-radius:8px;
  background:radial-gradient(66% 66% at 50% 38%,var(--ag-soft),rgba(0,0,0,0) 72%),#0E1622;transition:border-color .5s,color .5s}
.ask__emb svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ask b{position:relative;font-family:var(--hdisp,"Secular One"),var(--he);font-weight:400;font-size:clamp(19px,1.6vw,23px);line-height:1.2}
.build__cta{margin-block-start:40px}

/* ---------- trust: the schematic, then three lines ---------- */
.fig--flow{margin-block-end:40px}
.frame--flow{padding:18px 22px 22px;background:linear-gradient(168deg,#0E1622 0%,#0B0F16 60%)}
.flow__svg{width:100%;height:auto;display:block}
.fl-panel{fill:#0E1622;stroke:#2A3A52;stroke-width:1.5}
.fl-title{fill:#E6ECF5;font-family:var(--hdisp,"Secular One"),var(--he);font-size:22px;text-anchor:start}
.fl-file{fill:#131E2E;stroke:#4A5C77;stroke-width:1.4}
.fl-ag{fill:#131E2E;stroke:var(--ag,#4A5C77);stroke-width:1.6}
.fl-ag--signal{stroke:#FFB23F}
.fl-human{fill:#101826;stroke:#4A5C77;stroke-width:1.4;stroke-dasharray:5 4}
.fl-box{fill:#15151A;stroke:#4A4A52;stroke-width:1.5}
.fl-tx{fill:#D6DEEA;font-family:var(--he);font-size:16px;font-weight:600;text-anchor:middle}
.fl-tx--signal{fill:#FFD08A}
.fl-sub{fill:#9A9A96;font-family:var(--he);font-size:14px;text-anchor:middle}
.fl-rail{fill:none;stroke:#3A4A62;stroke-width:1.5}
.fl-rail--out{stroke:#FFB23F;stroke-width:2}
.fl-rail--no{stroke:#7A4A4A;stroke-dasharray:6 6}
.fl-land{fill:#FFB23F}
.fl-note{paint-order:stroke;stroke:#0E1622;stroke-width:6px;stroke-linejoin:round;fill:#FFD08A;font-family:var(--he);font-size:15px;font-weight:600;text-anchor:middle}
.fl-no{paint-order:stroke;stroke:#0E1622;stroke-width:6px;stroke-linejoin:round;fill:#D08A8A;font-family:var(--he);font-size:15px;font-weight:600;text-anchor:middle}
.fl-x path{stroke:#D46A6A;stroke-width:2.2;stroke-linecap:round}
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.fact{padding-block-start:18px;border-block-start:1px solid var(--line-2)}
.fact b{display:block;font-family:var(--disp);font-weight:700;font-size:clamp(21px,1.8vw,25px);line-height:1.2}

/* ---------- the form: bare on the ground, a rule under each field ---------- */
.talk__grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,5vw,80px);align-items:start}
.talk .sec__head{margin-block-end:0}
.lead{position:relative;padding:8px 0 0}
.lead__grid{display:grid;grid-template-columns:1fr 1fr;gap:22px 28px}
.lead label{display:block;font-size:14px;font-weight:600;color:var(--ink-2)}
.lead__cap{display:block}
.lead input,.lead textarea{margin-block-start:8px}
.lead .wide{grid-column:1 / -1}
.lead input,.lead textarea{width:100%;font:inherit;font-size:17px;color:var(--ink);background:transparent;
  border:0;border-block-end:1px solid var(--line-2);border-radius:0;padding:10px 2px;transition:border-color .25s}
.lead textarea{min-height:110px;resize:vertical}
.lead input:focus,.lead textarea:focus{border-color:#fff;box-shadow:0 1px 0 #fff}   /* the page's own focus ring stays on top of the underline */
.req{font-weight:400;font-size:13px;color:var(--muted)}
.lead [aria-invalid="true"]{border-color:#D46A6A}
/* the honeypot is hidden by clipping, never by a negative offset: a box pushed 9999px off the page widens the scrollable area */
.lead .hp{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.lead__foot{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-block-start:26px}
.lead .status{font-size:15px;color:var(--ink-2);min-height:1.5em}
.lead .status[data-kind="error"]{color:#E89A9A}
.lead .status[data-kind="ok"]{color:var(--ink)}
.lead.done .lead__grid,.lead.done .send{display:none}
.lead .fine{margin-block-start:14px;font-size:13.5px;color:var(--muted)}
.lead .fine a{display:inline-block;padding-block:4px;text-decoration:underline;text-underline-offset:3px}
/* the thread arrives: the amber that walked the page lands on the thing to do, once */
.lead.is-lit .send{box-shadow:0 0 0 1px rgba(255,178,63,.6),0 0 40px rgba(255,178,63,.35)}

/* ---------- the foot: the mark, large, as the closing image ---------- */
.foot{position:relative;border-block-start:1px solid var(--line);padding-block:40px 34px;overflow:hidden}
.foot .wrap{display:grid;gap:28px;font-size:14px;color:var(--muted)}
.mark--big{display:block;font-size:clamp(96px,14vw,200px);line-height:.9;letter-spacing:.02em;color:rgba(255,255,255,.07);
  min-height:0;text-align:center;pointer-events:none;user-select:none}
.mark--big i{color:rgba(74,92,240,.35)}
.foot__row{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.foot nav{display:flex;gap:18px}
.foot nav a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding-inline:6px}
.foot a:hover{color:var(--ink)}

/* ---------- edit mode ---------- */
.is-editing [data-t]{outline:1px dashed rgba(255,255,255,.35);outline-offset:4px;cursor:text}
.is-editing [data-t]:focus{outline:2px solid #fff}
.editbar{position:fixed;inset-inline:0;bottom:0;z-index:60;display:flex;align-items:center;gap:14px;padding:12px var(--gutter);
  background:color-mix(in srgb,var(--bg) 92%,transparent);border-block-start:1px solid var(--line-2);backdrop-filter:blur(10px)}
.editbar__t{font-size:14px;color:var(--ink-2)}
.editbar__n{font-size:14px;color:var(--ink);margin-inline-start:auto}

/* ---------- reveals: everything rests visible; motion only adds ----------
   site.js marks only what STARTS below the fold with .pre, then .in on arrival.
   A group arrives as one: its children follow each other 70ms apart. */
[data-reveal].pre{opacity:0;translate:0 18px}
[data-reveal].pre.in{opacity:1;translate:0 0;transition:opacity .7s var(--ease),translate .7s var(--ease)}
[data-reveal="group"].pre{opacity:1;translate:none}
[data-reveal="group"].pre>*,[data-reveal="group"].pre ol>li{opacity:0;translate:0 16px}
[data-reveal="group"].pre.in>*,[data-reveal="group"].pre.in ol>li{opacity:1;translate:0 0;transition:opacity .6s var(--ease),translate .6s var(--ease)}
[data-reveal="group"].pre.in>:nth-child(2),[data-reveal="group"].pre.in ol>li:nth-child(2){transition-delay:70ms}
[data-reveal="group"].pre.in>:nth-child(3),[data-reveal="group"].pre.in ol>li:nth-child(3){transition-delay:140ms}
[data-reveal="group"].pre.in>:nth-child(4){transition-delay:210ms}
[data-reveal="group"].pre.in>:nth-child(5){transition-delay:280ms}

/* =====================================================================
   THE HALL'S TOKENS - the product's own colours, scoped to .hall so the page's
   monochrome never leaks in and the product's hues never leak out.
   ===================================================================== */
.hall{
  --ground:#0B111A;--ground-2:#0E1622;--panel:#141D2B;--panel-2:#1A2434;
  --edge:#2C3A4D;--edge-2:#4A5C77;
  --hink:#F0F4FA;--hink-2:#A9B6C8;--hmuted:#9AA8BE;   /* a step above the product's own: through the tilt the id rendered 4.4:1 */
  --signal:#FFB23F;--signal-2:#FFC96F;--signal-ink:#0B111A;
  --hdisp:"Secular One","Assistant","Segoe UI",sans-serif;
  color:var(--hink)}
.hall .ag--conductor{--ag:#7B8AF5;--ag-soft:rgba(123,138,245,.20);--ag-beam:rgba(123,138,245,.15)}
.hall .ag--finder{--ag:#4FA9D6;--ag-soft:rgba(79,169,214,.20);--ag-beam:rgba(79,169,214,.15)}
.hall .ag--coder{--ag:#3EBB9C;--ag-soft:rgba(62,187,156,.20);--ag-beam:rgba(62,187,156,.15)}
.hall .ag--observer{--ag:#C4A05A;--ag-soft:rgba(196,160,90,.20);--ag-beam:rgba(196,160,90,.15)}
.hall .ag--responder{--ag:#D2708F;--ag-soft:rgba(210,112,143,.20);--ag-beam:rgba(210,112,143,.15)}
.hall .ag--examiner{--ag:#7FBB63;--ag-soft:rgba(127,187,99,.20);--ag-beam:rgba(127,187,99,.15)}
.hall .ag--documenter{--ag:#8FA3BD;--ag-soft:rgba(143,163,189,.20);--ag-beam:rgba(143,163,189,.15)}
.hall .ag--citator{--ag:#AEB85C;--ag-soft:rgba(174,184,92,.20);--ag-beam:rgba(174,184,92,.15)}
.hall .ag--submitter{--ag:#D2795E;--ag-soft:rgba(210,121,94,.20);--ag-beam:rgba(210,121,94,.15)}
.hall .ag--survey{--ag:#A08BD4;--ag-soft:rgba(160,139,212,.20);--ag-beam:rgba(160,139,212,.15)}
.hall .ag--privacy{--ag:#E0B25A;--ag-soft:rgba(224,178,90,.20);--ag-beam:rgba(224,178,90,.15)}
.hall .ag--footnotes{--ag:#B9A46A;--ag-soft:rgba(185,164,106,.20);--ag-beam:rgba(185,164,106,.15)}
.hall .ag--style{--ag:#C98BB4;--ag-soft:rgba(201,139,180,.20);--ag-beam:rgba(201,139,180,.15)}
.hall .ag--ontologist{--ag:#7FA7E8;--ag-soft:rgba(127,167,232,.20);--ag-beam:rgba(127,167,232,.15)}
.hall .ag--proposer{--ag:#E3C35C;--ag-soft:rgba(227,195,92,.20);--ag-beam:rgba(227,195,92,.15)}
.hall .ag--critic{--ag:#9FB8A1;--ag-soft:rgba(159,184,161,.20);--ag-beam:rgba(159,184,161,.15)}

/* ---------- a cell: hairline, lit from its top edge, its own hue only in the emblem and the beam ---------- */
.cell{position:relative;height:196px;padding:16px 14px 12px;overflow:hidden;
  display:flex;flex-direction:column;align-items:flex-start;text-align:start;
  background:var(--panel);border:1px solid var(--edge);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 20px 40px -20px rgba(0,0,0,.8);
  transition:border-color .28s var(--ease),background-color .28s var(--ease),opacity .28s var(--ease),box-shadow .28s var(--ease)}
.cell::before{content:'';position:absolute;inset-block-start:-14px;inset-inline:-6px;height:150px;pointer-events:none;
  background:radial-gradient(70% 90% at 50% 0%,var(--ag-beam),rgba(0,0,0,0) 72%);opacity:.8}
.cell__emb{position:relative;width:44px;height:44px;display:grid;place-items:center;color:var(--ag);margin-block-end:12px;
  background:radial-gradient(66% 66% at 50% 38%, var(--ag-soft), rgba(0,0,0,0) 72%),var(--ground-2);border:1px solid var(--edge-2)}
.cell__emb svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.cell__n{font-family:var(--hdisp);font-weight:400;font-size:21px;line-height:1.1;color:var(--hink)}
.cell__id{display:inline-block;margin-block-start:6px;padding:1px 6px;font-family:var(--mono);font-weight:500;font-size:11px;
  letter-spacing:.1em;color:var(--hmuted);background:var(--ground-2);border:1px solid var(--edge)}
.cell__s{margin-block-start:8px;font-size:13.5px;line-height:1.4;color:var(--hink-2);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cell__st{margin-block-start:auto;display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--hink-2)}
.cell__st::before{content:'';width:7px;height:7px;background:var(--ag)}
.cell__st--next{color:var(--hmuted)}
.cell__st--next::before{background:transparent;box-shadow:inset 0 0 0 2px var(--hmuted)}
/* the one under the light: the pointer's cell while the screen is pinned, the finder at rest */
.cell.is-on,.field:not(.is-lit) .cell--rest{border-color:var(--signal);background:var(--panel-2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 0 0 1px rgba(255,178,63,.35),0 0 60px -4px rgba(255,178,63,.45)}
.cell.is-on .cell__emb,.field:not(.is-lit) .cell--rest .cell__emb{border-color:var(--signal)}
.field.is-lit .cell:not(.is-on){opacity:.9}   /* .55 took the small text to 2.4:1; .9 keeps the mono id at 4.6 */
/* the dark seats: cells nobody is in yet, further back in the hall. No text, no count. */
.cell--ghost{background:rgba(20,29,43,.55);border-color:rgba(44,58,77,.7);box-shadow:none;opacity:.7}
.cell--ghost::before{display:none}
.cell--ghost .cell__emb{color:transparent;background:var(--ground-2);border-color:var(--edge);opacity:.6}
/* the nearest row is floor, not seats: it is what the fold cuts and what the lifted camera shows last */
.field__row--z .cell--ghost{opacity:.3;background:rgba(20,29,43,.3)}
/* the far row: names and flags a step larger, the sentences hidden (projected under 10px, nobody reads them there) */
@media (min-width:901px){
  .field__row--c .cell__s{visibility:hidden}
  .field__row--c .cell__id{font-size:13px}
  .field__row--c .cell__st{font-size:15px}
}
/* in the canvas (edit mode) the floor lies flat, so a sentence is edited where it can be read */
.is-editing .field{--tilt:0deg;--lift:0px}
.is-editing .field__row--c .cell__s{visibility:visible}

/* ---------- narrow ---------- */
@media (max-width:900px){
  .bar nav .hide-sm{display:none}
  .btn--sm{height:44px}
  .spine{display:none}
  .hero{min-height:0;padding-block-end:0}
  .hero__in{padding-block-start:40px;padding-inline:4px}
  .hero h1{line-height:1.06}
  .horizon,.hero__beam{display:none}
  .hero__lamp{top:-420px;width:900px;height:760px}
  /* the floor on a phone: four whole seats under the lamp, a few dark ones behind, the same tilt a little flatter */
  .stage{position:relative;inset:auto;top:auto;width:auto;height:auto;margin:30px var(--gutter) 0;perspective:800px;perspective-origin:50% -20%;overflow:visible;
    -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 70%,transparent 100%);-webkit-mask-composite:source-over;
    mask-image:linear-gradient(to bottom,#000 0,#000 70%,transparent 100%);mask-composite:add}
  .stage__tag{position:static;display:inline-block;margin:4px var(--gutter) 0}
  .field{--tilt:18deg;position:relative;left:auto;bottom:auto;width:auto;translate:none;
    grid-template-columns:1fr 1fr;gap:12px;padding-block-start:0;margin-block-end:-10px}
  .field__row{display:contents}
  .cell:not(.cell--keep):not(.cell--ghost){display:none}
  .cell--ghost{display:none}
  .field__row--z .cell--ghost:nth-child(-n+2){display:flex;height:88px;opacity:.35}
  .pool,.rails{display:none}
  .sec{--pad:60px}
  .sec::before{top:12px;font-size:150px}
  .sec__head{grid-template-columns:1fr;row-gap:16px;margin-block-end:32px}
  .sec__head p{font-size:17px}
  .nouns{grid-template-columns:1fr 1fr;gap:22px}
  .exhibit::before,.exhibit::after{display:none}
  .frame--map{padding:18px}
  .reel__caps{grid-template-columns:1fr}
  .frame--flow{padding:14px;overflow-x:auto}                        /* the schematic keeps its size and scrolls, your machine first */
  .flow__svg{min-width:900px}
  .fig--flow::after{display:block;content:'';position:absolute;z-index:2;top:0;bottom:0;right:0;left:auto;width:56px;height:auto;filter:none;
    background:linear-gradient(to left,var(--bg),transparent);-webkit-mask-image:none;mask-image:none}   /* the rest of the drawing is that way */
  /* the three stages stack: files, then the index, then the proposal */
  .onto{grid-template-columns:1fr}
  .onto__arrow{width:1px;height:24px;margin:14px 0}
  .onto__arrow::before{left:-4px;right:auto;top:auto;bottom:0;rotate:135deg}
  .pile{height:auto;min-height:0;display:flex;flex-wrap:wrap;gap:8px}
  .file{position:static;rotate:none}
  .coda{margin-block-start:36px}
  .steps{margin-block-start:48px}
  .steps ol,.facts,.asks{grid-template-columns:1fr}
  .asks{gap:0}
  .talk__grid{grid-template-columns:1fr}
  .lead__grid{grid-template-columns:1fr}
  .mark--big{font-size:96px}
}

/* ---------- reduced motion: everything is already at rest ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}