/* site.css · owner: A (Shell) · Archon v3 "Keystone"
 *
 * Layout concept: one field of light emitted into a dark room.
 * Every section is transparent; the WebGL field (#field, z0) is drawn behind real HTML (main, z1)
 * and re-forms inside each section's `.stage` box. Stages are empty, explicitly sized boxes that
 * carry only overlays (labels, stations, twins). The gold point (brass) is the only signal colour.
 * One committed dark theme; the only light surface is the "paper" Student Intelligence Card.
 *
 * Order: tokens · reset/base · layout primitives · components · chrome · sections (hero → footer)
 *        · concierge · presence · calm · no-JS / no-core · no-GL · forced colours · media queries.
 */

/* ============================================================== 1. TOKENS */
:root {
  color-scheme: dark;

  /* palette (§2.1) */
  --ink: #0A0A0B;
  --ink-2: #0F1012;
  --graphite: #141518;
  --graphite-2: #1B1C20;
  --rule: #2A2B30;
  --rule-2: #3A3B41;
  --bone: #EDEBE4;
  --ash: #A8A59C;
  --mute: #8D8B84;
  --brass: #C8A26B;
  --brass-hi: #E6C58F;
  --brass-lo: #6E5A3A;          /* strokes + away dot only, never text */
  --warn: #D9826A;
  --paper: #ECEAE3;
  --paper-ink: #151619;
  --paper-mute: #5B5952;
  --paper-brass: #7F6232;
  --paper-rule: #CFCCC2;
  --brass-a10: rgba(200, 162, 107, .10);
  --brass-a0: rgba(200, 162, 107, 0);

  /* type (§2.2) */
  --f-display: 'Manrope', 'Helvetica Neue', Arial, sans-serif;
  --f-body: 'Instrument Sans', 'Helvetica Neue', Arial, sans-serif;
  --f-mono: 'Martian Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  --t-mega: clamp(88px, 23vw, 380px);
  --t-mark: clamp(56px, 9vw, 168px);
  --t-display: clamp(48px, 8.4vw, 150px);
  --t-h2: clamp(34px, 5vw, 80px);
  --t-h3: clamp(22px, 2.4vw, 36px);
  --t-lede: clamp(19px, 1.7vw, 26px);
  --t-hero-lede: clamp(20px, 2vw, 30px);
  --t-body: 17px;
  --t-small: 14px;
  --t-mono: 12px;
  --t-label: 11px;

  /* spacing, grid, sizes (§2.3) */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;
  --gutter: clamp(16px, 4vw, 48px);
  --sec-pad: clamp(80px, 8.5vw, 136px);   /* tightened in fix r1 (was clamp(96px, 12vw, 176px)): no half-empty entry frames */
  --max: 1440px;
  --hdr-h: 64px;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  /* bottom band kept clear by pinned (sticky) content: the fixed Ask bar + readouts live there */
  --dock: calc(96px + var(--safe-b));

  /* motion (§2.4) */
  --e-out: cubic-bezier(.16, 1, .3, 1);
  --e-inout: cubic-bezier(.65, 0, .35, 1);
  --e-ui: cubic-bezier(.2, .7, .1, 1);
  --d-micro: 160ms;
  --d-ui: 280ms;
  --d-commit: 380ms;
  --d-reveal: 600ms;

  /* z layers (§2.5) */
  --z-field: 0;
  --z-main: 1;
  --z-overlay: 2;
  --z-keystone: 5;
  --z-peers: 10;
  --z-chrome: 20;
  --z-hdr: 30;
  --z-ask: 40;
  --z-menu: 50;
  --z-toast: 60;
  --z-skip: 70;

  /* stage crop marks (structural framing of every field stage) */
  --crop-tl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath d='M.5 12V.5H12' fill='none' stroke='%233A3B41'/%3E%3C/svg%3E");
  --crop-tr: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath d='M0 .5h11.5V12' fill='none' stroke='%233A3B41'/%3E%3C/svg%3E");
  --crop-bl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath d='M.5 0v11.5H12' fill='none' stroke='%233A3B41'/%3E%3C/svg%3E");
  --crop-br: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath d='M0 11.5h11.5V0' fill='none' stroke='%233A3B41'/%3E%3C/svg%3E");
}

@media (max-width: 759px) {
  :root {
    --t-mark: 17vw;
    --t-body: 16px;
    --hdr-h: 56px;
    --dock: calc(76px + var(--safe-b)); /* the Ask FAB */
  }
}

/* ============================================================== 2. RESET + BASE */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--ink);
  overflow-x: clip;
  scrollbar-color: var(--rule-2) var(--ink);
}
body {
  margin: 0;
  min-height: 100vh;
  background: var(--ink);
  color: var(--bone);
  font: 400 var(--t-body)/1.6 var(--f-body);
  padding-inline: var(--gutter);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
/* film grain: static, above the field, below content */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: var(--z-field);
  pointer-events: none;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Lenis (§3.7) — never html{scroll-behavior:smooth} */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

h1, h2, h3, h4, p, ol, ul, dl, dd, figure, blockquote { margin: 0; }
ol, ul { padding: 0; list-style: none; }
h1, h2, h3, h4 { font-weight: inherit; text-wrap: balance; }
p { text-wrap: pretty; }
img, canvas, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; border-radius: 0; -webkit-tap-highlight-color: rgba(0,0,0,0); }
button:disabled { cursor: not-allowed; }
kbd { font-family: var(--f-mono); }
b { font-weight: inherit; }
table { border-collapse: collapse; width: 100%; }
::selection { background: var(--brass); color: var(--ink); }

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }
.paper :focus-visible { outline-color: var(--paper-brass); }
[tabindex="-1"]:focus:not(:focus-visible) { outline: none; }
/* Router and citation targets (headings, articles, panels) take programmatic focus so screen
   readers land there. They are not controls, so no focus box; cite targets get the .pulse. */
[tabindex="-1"]:not(a, button, input, select, textarea):focus-visible { outline: none; }
/* ...except the Socrates decision outcomes: after a keyboard Accept or Reject, focus lands on the new
   record entry or on the stamp while the decision buttons are disabled, so it must stay visible (fix r3) */
.card-list .card-entry:focus-visible { outline: 2px solid var(--paper-brass); outline-offset: 2px; }
#soc-stamp:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }
/* a labelled form field focused from above the fold keeps its label clear of the fixed header
   (fix r3: an empty compose submit left "NAME" under the header) */
.field :is(input, select, textarea) { scroll-margin-top: calc(var(--hdr-h) + 44px); }

[id] { scroll-margin-top: calc(var(--hdr-h) + 12px); }
/* keyboard focus scrolls controls clear of the fixed Ask bar / readouts / FAB (fix r1) */
html { scroll-padding-bottom: 96px; }
@media (max-width: 759px) { html { scroll-padding-bottom: 72px; } }

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ============================================================== 3. LAYOUT PRIMITIVES */
#field {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100vh;
  height: 100lvh;
  z-index: var(--z-field);
  pointer-events: none;
  display: block;
}
main, .foot { position: relative; z-index: var(--z-main); }
main:focus { outline: none; }

.sec { position: relative; background: none; }
.sec-in {
  max-width: var(--max);
  margin-inline: auto;
  padding-block: var(--sec-pad);
}
.track { position: relative; padding-block: 0; }
.sticky-sentinel { display: block; height: 0; margin: 0; }
.bleed { margin-inline: calc(var(--gutter) * -1); }

/* 12-column grid at >=1024 (one column below) */
.grid12 { display: grid; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) {
  .grid12 { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s-6); }
}

/* ============================================================== 4. COMPONENTS (§2.6) */

/* type utilities */
.t-label {
  font: 400 var(--t-label)/1.4 var(--f-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mute);
}
.t-mono {
  font: 400 var(--t-mono)/1.5 var(--f-mono);
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
}
.t-h2 {
  font: 300 var(--t-h2)/1.02 var(--f-display);
  letter-spacing: -.035em;
  color: var(--ash);
}
.t-h2 .em { color: var(--bone); }
.t-display {
  font: 800 var(--t-display)/.9 var(--f-display);
  letter-spacing: -.045em;
}
.lede {
  font: 300 var(--t-lede)/1.35 var(--f-display);
  letter-spacing: -.01em;
  color: var(--ash);
  max-width: 34ch;
}
.body-l { max-width: 62ch; color: var(--ash); }
.sub {
  font: 500 var(--t-h3)/1.1 var(--f-display);
  letter-spacing: -.02em;
}
.note {
  font-size: var(--t-small);
  line-height: 1.5;
  color: var(--ash);
  max-width: 62ch;
}
.dim { color: var(--mute); }
.brass { color: var(--brass); }

/* section label with brass structural index: "01 ── The studio" */
.label { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-5); }
.label .idx {
  color: var(--brass);
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
}
.label .idx::after {
  content: '';
  width: 28px;
  height: 1px;
  background: var(--rule-2);
}

/* underline drawn by background-size (studio craft, POV work) */
#studio-craft, #pov-work {
  background-image: linear-gradient(var(--brass), var(--brass));
  background-repeat: no-repeat;
  /* near the baseline (≈ +.1em for Manrope), not at the inline box's bottom: at line-height 1.02 that
     edge sits inside the next line's ascenders, so a wrapped line 1 read as a strikethrough (fix r2) */
  background-position: 0 calc(100% - .24em);
  background-size: 0% 2px;
  padding-bottom: .04em;
  transition: background-size var(--d-reveal) var(--e-out);
}
#studio-craft.is-crafted, #pov-work.is-real { background-size: 100% 2px; }

/* buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 44px;
  padding: 0 20px;
  border-radius: 2px;
  border: 1px solid rgba(0, 0, 0, 0);
  font: 500 15px/1.2 var(--f-body);
  letter-spacing: 0;
  white-space: nowrap;
  text-align: center;
  transition: background-color var(--d-ui) var(--e-ui), border-color var(--d-ui) var(--e-ui), color var(--d-ui) var(--e-ui), opacity var(--d-ui) var(--e-ui);
}
.btn-brass { background: var(--brass); color: var(--ink); border-color: var(--brass); }
.btn-brass:hover:not([disabled]) { background: var(--brass-hi); border-color: var(--brass-hi); }
.btn-line { border-color: var(--rule-2); color: var(--bone); }
.btn-line:hover:not([disabled]) { border-color: var(--bone); }
.btn-warn, .btn-line.btn-warn { color: var(--warn); border-color: var(--warn); }
.btn-warn:hover:not([disabled]) { border-color: var(--warn); background: rgba(217, 130, 106, .08); }
.btn-s { min-height: 36px; padding: 0 14px; font-size: 14px; }
.btn[disabled], .btn:disabled { opacity: .45; cursor: not-allowed; }
.btn[aria-disabled="true"] { opacity: .45; cursor: progress; }
@media (pointer: coarse) { .btn-s { min-height: 44px; } }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 44px;
  font-weight: 500;
  color: var(--bone);
  border-bottom: 1px solid var(--rule-2);
  transition: border-color var(--d-ui) var(--e-ui), color var(--d-ui) var(--e-ui);
}
.link-arrow span { color: var(--brass); transition: transform var(--d-ui) var(--e-ui); }
.link-arrow:hover { border-color: var(--brass); }
.link-arrow:hover span { transform: translate(2px, -2px); }

/* chips */
.chip {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid var(--rule-2);
  border-radius: 999px;
  background: var(--graphite-2);
  color: var(--bone);
  font: 400 12px/1.2 var(--f-mono);
  letter-spacing: .02em;
  text-align: left;
  transition: border-color var(--d-ui) var(--e-ui), color var(--d-ui) var(--e-ui), background-color var(--d-ui) var(--e-ui);
}
.chip:hover { border-color: var(--ash); }
.chip[aria-pressed="true"] { border-color: var(--brass); color: var(--brass); }
.chip[aria-pressed="true"]::before {
  content: '';
  width: 5px; height: 5px;
  margin-right: 8px;
  border-radius: 1px;
  background: var(--brass);
}
@media (pointer: coarse) { .chip { min-height: 44px; } }

/* segmented control */
.seg {
  display: inline-flex;
  border: 1px solid var(--rule-2);
  border-radius: 2px;
  background: var(--graphite-2);
}
.seg-btn {
  min-height: 36px;
  padding: 0 14px;
  font: 400 12px/1 var(--f-mono);
  letter-spacing: .06em;
  color: var(--ash);
  transition: color var(--d-ui) var(--e-ui), box-shadow var(--d-ui) var(--e-ui);
}
.seg-btn + .seg-btn { border-left: 1px solid var(--rule-2); }
.seg-btn:hover { color: var(--bone); }
.seg-btn[aria-pressed="true"] { color: var(--brass); box-shadow: inset 0 -2px 0 var(--brass); }
@media (pointer: coarse) { .seg-btn { min-height: 44px; } }

/* form fields */
input[type="text"], input:not([type]), input[type="email"], select, textarea {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  background: var(--graphite-2);
  border: 1px solid var(--rule-2);
  border-radius: 2px;
  color: var(--bone);
  font: 400 16px/1.4 var(--f-body);
  transition: border-color var(--d-ui) var(--e-ui);
}
input::placeholder, textarea::placeholder { color: var(--mute); opacity: 1; }
input:hover, select:hover, textarea:hover { border-color: var(--mute); }
input:focus-visible, select:focus-visible, textarea:focus-visible { border-color: var(--brass); outline-offset: 0; outline-width: 1px; }
textarea { resize: vertical; min-height: 120px; line-height: 1.55; }
select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M.5.5 5 5 9.5.5' fill='none' stroke='%23C8A26B'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
}
select option { background: var(--graphite); color: var(--bone); }
.field { display: grid; gap: var(--s-2); }
.field > label, label.field > span, .range > span {
  font: 400 var(--t-label)/1.4 var(--f-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mute);
}
.row { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }

/* range */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 44px;
  background: none;
  cursor: pointer;
}
input[type="range"]::-webkit-slider-runnable-track { height: 1px; background: var(--rule-2); }
input[type="range"]::-moz-range-track { height: 1px; background: var(--rule-2); }
input[type="range"]::-moz-range-progress { height: 1px; background: var(--brass); }
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px; height: 16px;
  margin-top: -7.5px;
  border-radius: 50%;
  background: var(--brass);
  border: 3px solid var(--ink);
  box-shadow: 0 0 0 1px var(--brass);
}
input[type="range"]::-moz-range-thumb {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--brass);
  border: 3px solid var(--ink);
  box-shadow: 0 0 0 1px var(--brass);
}

/* stages: empty boxes the field re-forms inside; only overlays live here */
.stage { position: relative; width: 100%; }
.stage:not(.stage-hero)::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--crop-tl) left top no-repeat, var(--crop-tr) right top no-repeat,
              var(--crop-bl) left bottom no-repeat, var(--crop-br) right bottom no-repeat;
  opacity: 0;
  transition: opacity var(--d-reveal) var(--e-out);
}
/* The crop marks frame the stage the field is drawing in (fix r1: the next section's corner mark
   peeked into the hero's first frame on its own). Static twins draw in every stage: all framed. */
.stage.is-active::before, html.no-gl .stage::before, :is(html:not(.js), html.no-core) .stage::before { opacity: .9; }
html.calm .stage::before { transition: none; }
.stage-cap {
  margin-top: var(--s-3);
  font: 400 12px/1.5 var(--f-mono);
  letter-spacing: .02em;
  color: var(--mute);
}
.stage-cap::before {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  margin-right: 10px;
  border-radius: 1px;
  background: var(--brass);
  vertical-align: 1px;
}
.stage-cap .t-label { margin-right: 6px; }
.stage-twin { display: none; }

.node-labels {
  position: absolute;
  inset: 0;
  z-index: var(--z-overlay);
  pointer-events: none;
}
.node-label {
  position: absolute;
  left: 0; top: 0;
  /* 10px (SPEC) sat inside the node's point cluster (σ .06 ≈ 12–26px); lift clear of its halo */
  transform: translate(-50%, calc(-100% - var(--node-lift, 24px)));
  padding: 3px 7px;
  font: 400 11px/1.2 var(--f-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  width: max-content;
  max-width: min(260px, 46vw);
  overflow-wrap: anywhere;
  text-align: center;
  color: var(--ash);
  background: var(--ink);   /* solid (was .78): sketch edges pass under the label, not through its text (fix r2) */
  border: 1px solid var(--rule);
  border-radius: 2px;
}

/* the wordmark full stop */
.dot {
  display: inline-block;
  width: .19em;
  height: .19em;
  border-radius: .035em;
  background: var(--brass);
  margin-left: .045em;
  vertical-align: baseline;
  transition: background var(--d-ui);
}
.dot.is-away { background: var(--brass-lo); box-shadow: none; }   /* the point has left; the full stop dims, still there (SPEC §2.6; fix r2: the hollow socket read as a checkbox) */
#hdr-dot.is-thinking { animation: dot-blink 1s steps(2, jump-none) infinite; }
/* The finale glow sits behind the letters (fix r3: as the dot's own box-shadow it painted over the N's
   right stem, since an inline box paints after the text before it). The 1px ring stays on the dot. */
#foot-dot { position: relative; transition: background var(--d-ui), box-shadow 1.1s var(--e-out); }
#foot-dot::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  box-shadow: 0 0 80px 14px rgba(200, 162, 107, .26);
  opacity: 0;
  pointer-events: none;
  transition: opacity 1.1s var(--e-out);
}
html.gl-live #foot-dot.is-active { box-shadow: 0 0 0 1px rgba(230, 197, 143, .45); background: rgba(200, 162, 107, .5); }
html.gl-live #foot-dot.is-active::before { opacity: 1; }
@keyframes dot-blink { 0% { opacity: 1; } 100% { opacity: .25; } }

/* citation highlight */
.pulse { animation: pulse 1600ms var(--e-out) both; border-radius: 2px; }
@keyframes pulse {
  0%   { box-shadow: 0 0 0 1px var(--brass); background-color: var(--brass-a10); }
  70%  { box-shadow: 0 0 0 1px var(--brass); background-color: var(--brass-a10); }
  100% { box-shadow: 0 0 0 1px var(--brass-a0); background-color: var(--brass-a0); }
}

/* calm toggle (footer + menu) */
.calm-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid var(--rule-2);
  border-radius: 999px;
  font: 400 12px/1 var(--f-mono);
  letter-spacing: .04em;
  color: var(--ash);
  transition: border-color var(--d-ui) var(--e-ui), color var(--d-ui) var(--e-ui);
}
.calm-toggle::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  border: 1px solid var(--mute);
}
.calm-toggle:hover { color: var(--bone); border-color: var(--ash); }
.calm-toggle[aria-pressed="true"] { color: var(--brass); border-color: var(--brass); }
.calm-toggle[aria-pressed="true"]::before { background: var(--brass); border-color: var(--brass); }
@media (pointer: coarse) { .calm-toggle { min-height: 44px; } }

/* ============================================================== 5. CHROME */
.skip {
  position: fixed;
  left: var(--s-4);
  top: calc(var(--s-3) + var(--safe-t));
  z-index: var(--z-skip);
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  background: var(--brass);
  color: var(--ink);
  font: 500 15px/1 var(--f-body);
  border-radius: 2px;
  transform: translateY(-200%);
  transition: transform var(--d-ui) var(--e-out);
}
.skip:focus, .skip:focus-visible { transform: none; outline-color: var(--bone); }

/* header */
.hdr {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: var(--z-hdr);
  padding-top: var(--safe-t);
  /* .84 in SPEC §4.0 let body copy scrolling underneath read through the bar, and so did .96
     (integration); the bar is opaque ink-2 (fix r1). */
  background: var(--ink-2);
  border-bottom: 1px solid var(--rule);
}
.hdr-in {
  height: var(--hdr-h);
  max-width: calc(var(--max) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: var(--s-5);
}
.wordmark {
  justify-self: start;
  display: inline-flex;
  align-items: baseline;
  min-height: 44px;
  padding-top: 12px;
  font: 800 22px/1 var(--f-display);
  letter-spacing: -.055em;
  color: var(--bone);
}
.nav { display: flex; align-items: center; gap: clamp(16px, 2.2vw, 36px); }
.nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font: 500 14px/1 var(--f-body);
  color: var(--ash);
  white-space: nowrap;
  transition: color var(--d-ui) var(--e-ui);
}
.nav a::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  bottom: 11px;
  height: 1px;
  background: var(--brass);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--d-commit) var(--e-out);
}
.nav a:hover { color: var(--bone); }
.nav a[aria-current] { color: var(--bone); }
.nav a[aria-current]::after { transform: scaleX(1); }
.hdr-tools { justify-self: end; display: flex; align-items: center; gap: var(--s-3); }
.hdr-viewing {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font: 400 11px/1 var(--f-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ash);
  font-variant-numeric: tabular-nums;
}
.hdr-viewing i { width: 6px; height: 6px; border-radius: 50%; background: var(--bone); }
#hdr-viewing-n { color: var(--bone); }
.ask-open {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  min-height: 36px;
  padding: 0 8px 0 14px;
  border: 1px solid var(--rule-2);
  border-radius: 2px;
  font: 500 14px/1 var(--f-body);
  color: var(--bone);
  transition: border-color var(--d-ui) var(--e-ui);
}
.ask-open:hover { border-color: var(--brass); }
.ask-open kbd {
  display: inline-grid;
  place-items: center;
  min-width: 22px; height: 22px;
  border: 1px solid var(--rule-2);
  border-radius: 2px;
  font-size: 11px;
  color: var(--brass);
}
.menu-btn {
  display: none;
  position: relative;
  width: 44px; height: 44px;
  margin-right: -10px;
}
.menu-btn i {
  position: absolute;
  left: 12px; right: 12px;
  height: 1px;
  background: var(--bone);
  transition: transform var(--d-ui) var(--e-out);
}
.menu-btn i:nth-of-type(1) { top: 18px; }
.menu-btn i:nth-of-type(2) { top: 25px; }
.menu-btn[aria-expanded="true"] i:nth-of-type(1) { transform: translateY(3.5px) rotate(45deg); }
.menu-btn[aria-expanded="true"] i:nth-of-type(2) { transform: translateY(-3.5px) rotate(-45deg); }

/* mobile menu sheet */
.menu {
  position: fixed;
  top: calc(var(--hdr-h) + var(--safe-t));
  left: 0; right: 0; bottom: 0;
  z-index: var(--z-menu);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--s-7);
  padding: var(--s-5) var(--gutter) calc(var(--s-5) + var(--safe-b));
  background: var(--ink);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.menu nav { display: flex; flex-direction: column; }
.menu nav a {
  display: flex;
  align-items: baseline;
  gap: var(--s-4);
  padding: 10px 0;
  border-bottom: 1px solid var(--rule);
  font: 300 40px/1.1 var(--f-display);
  letter-spacing: -.03em;
  color: var(--bone);
}
.menu nav a::before {
  /* the page's own section indices (fix r3: a running 01–08 count disagreed with the 01–06 labels);
     Top and Local AI carry no index, as on the page */
  content: attr(data-idx);
  min-width: 2.2em;
  font: 400 11px/1 var(--f-mono);
  letter-spacing: .1em;
  color: var(--brass);
  transform: translateY(-.9em);
}
.menu nav a[aria-current] { color: var(--brass-hi); }
.menu-foot { display: flex; flex-direction: column; gap: var(--s-4); align-items: flex-start; }
.menu-ro {
  font: 400 11px/1.6 var(--f-mono);
  letter-spacing: .1em;
  color: var(--mute);
  font-variant-numeric: tabular-nums;
}
.menu-ro b { color: var(--bone); }

/* page rail (>=1024) */
.rail {
  position: fixed;
  right: 12px;
  top: 50%;
  z-index: var(--z-chrome);
  display: none;
  flex-direction: column;
  gap: 12px;
  transform: translateY(-50%);
}
.rail-tick {
  position: relative;
  display: grid;
  place-items: center end;
  width: 24px;
  height: 24px;
}
.rail-tick::before {
  content: '';
  width: 12px;
  height: 1px;
  background: var(--bone);
  opacity: .55;
  transition: width var(--d-commit) var(--e-out), background-color var(--d-ui), opacity var(--d-ui);
}
.rail-tick:hover::before { opacity: 1; }
.rail-tick.is-active::before { width: 20px; background: var(--brass); opacity: 1; }
.rail-label {
  position: absolute;
  right: calc(100% + 10px);
  top: 50%;
  padding: 4px 8px;
  font: 400 11px/1 var(--f-mono);
  letter-spacing: .08em;
  white-space: nowrap;
  color: var(--bone);
  background: var(--graphite);
  border: 1px solid var(--rule);
  border-radius: 2px;
  opacity: 0;
  pointer-events: none;
  transform: translate(4px, -50%);
  transition: opacity var(--d-micro) var(--e-ui), transform var(--d-ui) var(--e-out);
}
.rail-tick:hover .rail-label, .rail-tick:focus-visible .rail-label { opacity: 1; transform: translate(0, -50%); }
.rail-peers {
  position: absolute;
  right: 26px;
  top: 50%;
  width: 3px; height: 3px;
  margin-top: -1.5px;
  border-radius: 50%;
  background: var(--bone);
  display: none;
}
.rail-peers[data-n="1"] { display: block; }
.rail-peers[data-n="2"] { display: block; box-shadow: -6px 0 0 var(--bone); }
.rail-peers:not([data-n="0"]):not([data-n="1"]):not([data-n="2"]):not([data-n=""]) { display: block; box-shadow: -6px 0 0 var(--bone), -12px 0 0 var(--bone); }
.rail-tick:hover .rail-peers, .rail-tick:focus-visible .rail-peers { opacity: 0; }

/* readouts (>=1280): one compact HUD strip, bottom-left, below the hero band */
.readouts {
  position: fixed;
  left: 24px;
  bottom: calc(20px + var(--safe-b));
  z-index: var(--z-chrome);
  display: none;
  align-items: center;
  gap: 12px;
  height: 26px;
  padding: 0 10px;
  font: 400 11px/1 var(--f-mono);
  letter-spacing: .06em;
  color: var(--mute);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  pointer-events: none;
  background: rgba(10, 10, 11, .88);
  border: 1px solid var(--rule);
  border-radius: 2px;
}
.readouts span { display: flex; align-items: center; gap: 6px; }
/* no separators: when the strip wraps (see ≥1280 below) a leading rule would dangle on row two */
.readouts { column-gap: 16px; }
.readouts b { color: var(--bone); font-weight: 400; letter-spacing: .04em; }

/* keystone (field positions it via transform at signal.screen()) */
.keystone {
  position: fixed;
  left: 0; top: 0;
  z-index: var(--z-keystone);
  width: 48px;
  height: 48px;
  margin: -24px 0 0 -24px;
  border-radius: 50%;
  background: none;
  touch-action: none;
  cursor: grab;
  will-change: transform;
  transition: box-shadow var(--d-ui) var(--e-ui);
}
.keystone:hover { box-shadow: 0 0 0 1px rgba(200, 162, 107, .45); }
.keystone:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; border-radius: 50%; }
.keystone.is-pulling { cursor: grabbing; box-shadow: none; }
.keystone-hint {
  position: fixed;
  left: 0; top: 0;
  z-index: var(--z-keystone);
  padding: 4px 8px;
  font: 400 11px/1 var(--f-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ash);
  background: rgba(10, 10, 11, .78);
  border: 1px solid var(--rule);
  border-radius: 2px;
  pointer-events: none;
  will-change: transform;
}

/* toasts */
.toasts {
  position: fixed;
  top: calc(var(--hdr-h) + var(--safe-t) + 12px);
  left: 50%;
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-2);
  width: max-content;
  max-width: calc(100vw - 32px);
  transform: translateX(-50%);
  pointer-events: none;
}
.toast {
  padding: 10px 16px;
  font: 400 12px/1.4 var(--f-mono);
  letter-spacing: .02em;
  color: var(--bone);
  background: var(--graphite);
  border: 1px solid var(--rule-2);
  border-left: 2px solid var(--brass);
  border-radius: 2px;
  animation: toast-in var(--d-commit) var(--e-out) both;
}
.toast[data-tone="warn"], .toast.is-warn { border-left-color: var(--warn); }
@keyframes toast-in { from { opacity: .4; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ============================================================== 6. SECTIONS */

/* ---------------- 6.1 Hero #top ---------------- */
.hero {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: minmax(0, 1fr) auto auto;
  column-gap: var(--s-6);
  min-height: clamp(640px, 92svh, 960px);
  max-width: var(--max);
  margin-inline: auto;
  padding-top: var(--hdr-h);
}
.hero-copy {
  position: relative;
  z-index: 1;
  grid-column: 1 / 7;
  grid-row: 1;
  align-self: end;
  padding-bottom: 8vh;
}
.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-bottom: var(--s-5);
  color: var(--ash);
}
.eyebrow::before {
  content: '';
  width: 6px; height: 6px;
  margin-right: var(--s-2);
  border-radius: 1px;
  background: var(--brass);
}
.hero-mark {
  font: 800 var(--t-mark)/.82 var(--f-display);
  letter-spacing: -.045em;   /* -.055em made the R and C touch (fix r1) */
  color: var(--bone);
  white-space: nowrap;
  margin-left: -.04em;
}
.hero-lede {
  margin-top: var(--s-6);
  max-width: 24em;
  font: 300 var(--t-hero-lede)/1.35 var(--f-display);
  letter-spacing: -.01em;
  color: var(--bone);
}
.hero-ctas { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }

.stage-hero {
  position: absolute;
  z-index: 0;
  top: var(--hdr-h);
  bottom: 0;
  right: calc(-1 * var(--gutter) - max(0px, (100vw - 2 * var(--gutter) - var(--max)) / 2));
  width: 62vw;
}
#hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 60% 50%;
  filter: grayscale(1) contrast(1.08) brightness(.82);
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0, #000 160px), linear-gradient(180deg, #000 calc(100% - 56px), rgba(0,0,0,0));
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0, #000 160px), linear-gradient(180deg, #000 calc(100% - 56px), rgba(0,0,0,0));
  mask-composite: intersect;
  transition: opacity var(--d-reveal) var(--e-out);
  /* decorative: it never takes the pointer (fix r3: at opacity 0 under the live field it still took
     hits, started image drags and kept a text selection alive, which blocked the double-click ping) */
  pointer-events: none;
  -webkit-user-drag: none;
}
html.gl-live #hero-img { opacity: 0; }

.band {
  position: relative;
  z-index: 1;
  grid-column: 1 / -1;
  grid-row: 3;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: var(--s-2) clamp(16px, 2.6vw, 44px);
  min-height: 56px;
  border-top: 1px solid var(--rule);
  font: 400 13px/1.2 var(--f-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.band a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--bone);
  transition: color var(--d-ui) var(--e-ui);
}
.band a:hover { color: var(--brass-hi); }
.band-sep { color: var(--brass); font-family: var(--f-body); }
/* each separator travels with the link before it, so a wrapped band ends a line with ✳ instead of
   starting the next one with it (fix r3: at 390px line two began "✳ AI TOOLS") */
.band-item { display: inline-flex; align-items: center; column-gap: inherit; white-space: nowrap; }
.hero-foot {
  position: relative;
  z-index: 1;
  grid-column: 1 / -1;
  grid-row: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-4);
  padding-bottom: var(--s-2);
  color: var(--ash);
}
.scroll-cue {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 44px;
  /* over the sculpture's base: a feathered ink shadow keeps it legible without punching a hard
     dark rectangle out of the artwork (fix r1) */
  padding: 0 26px;
  margin-right: -26px;
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(10, 10, 11, .9) 55%, rgba(10, 10, 11, 0) 100%);
  text-shadow: 0 0 8px var(--ink), 0 0 2px var(--ink);
  color: var(--ash);
  transition: color var(--d-ui) var(--e-ui);
}
.scroll-cue:hover { color: var(--bone); }
.scroll-cue span { color: var(--brass); }

/* ---------------- 6.2 Studio ---------------- */
.studio-sticky {
  max-width: var(--max);
  margin-inline: auto;
  padding-block: var(--sec-pad);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: var(--s-7);
  align-items: center;
}
.studio-copy { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-5); }
.studio-copy .label { margin-bottom: 0; }
.tags { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); color: var(--ash); margin-top: var(--s-3); }
.tags li { display: inline-flex; align-items: center; gap: var(--s-2); }
.tags li::before { content: ''; width: 4px; height: 4px; background: var(--brass-lo); border-radius: 1px; }
#studio-stage { aspect-ratio: 1; max-height: 52svh; }

/* ---------------- 6.3 What we build ---------------- */
.build-grid { display: grid; grid-template-columns: minmax(0, 1fr); }
.build-intro .lede { margin-top: var(--s-5); }
.cap { position: relative; }
.cap-h { font: 500 clamp(28px, 3.2vw, 48px)/1.1 var(--f-display); letter-spacing: -.02em; }
.cap-btn {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  align-items: baseline;
  column-gap: var(--s-4);
  width: 100%;
  min-height: 44px;
  text-align: left;
  color: var(--ash);
  transition: color var(--d-ui) var(--e-ui);
}
.cap-btn .idx {
  flex: none;
  font: 400 12px/1 var(--f-mono);
  letter-spacing: .08em;
  color: var(--brass);
  transform: translateY(-.35em);
}
.cap-btn:hover, .cap.is-active .cap-btn, .cap-btn[aria-pressed="true"] { color: var(--bone); }
.cap p { color: var(--ash); font-size: 17px; max-width: 42ch; margin-top: var(--s-3); }
.build-sticky { display: flex; flex-direction: column; }
#build-stage { flex: 1 1 auto; min-height: 0; }
.cap-nav { display: flex; align-items: center; justify-content: center; gap: var(--s-4); }
.cap-nav .btn { min-width: 44px; padding: 0; font-family: var(--f-mono); }
#cap-count { min-width: 5ch; text-align: center; color: var(--ash); }

/* ---------------- 6.4 Custom AI + bench ---------------- */
.custom-intro { display: flex; flex-direction: column; gap: var(--s-5); }
.custom-intro .label { margin-bottom: 0; }
#custom-title { color: var(--bone); }
.custom-intro .sub { margin-top: var(--s-3); }
.steps {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-6);
  margin-top: var(--s-8);
  counter-reset: none;
}
.step {
  position: relative;
  padding-top: var(--s-5);
  border-top: 1px solid var(--rule);
}
.step::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: -1px;
  height: 1px;
  background: var(--brass);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--d-reveal) var(--e-out);
}
.step[aria-current="step"]::before { transform: scaleX(1); }
.step-idx { display: block; margin-bottom: var(--s-4); transition: color var(--d-ui); }
.step[aria-current="step"] .step-idx { color: var(--brass); }
.step h3 { font: 500 var(--t-h3)/1.1 var(--f-display); letter-spacing: -.02em; }
.step p { margin-top: var(--s-3); color: var(--ash); max-width: 36ch; }

.bench {
  /* An outlined instrument frame, deliberately without a fill: #custom-stage lives inside it,
     and the field is drawn behind <main>, so any opaque background here would hide the arch. */
  position: relative;
  margin-top: var(--s-9);
  padding: 32px;
  background: none;
  border: 1px solid var(--rule-2);
  border-radius: 2px;
}
.bench::before {
  content: '';
  position: absolute;
  top: -1px; left: -1px;
  width: 48px; height: 1px;
  background: var(--brass);
}
.bench-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-3) var(--s-6);
  padding-bottom: var(--s-5);
  margin-bottom: var(--s-6);
  border-bottom: 1px solid var(--rule);
}
.bench-head h3 { font: 500 clamp(20px, 1.8vw, 28px)/1.2 var(--f-display); letter-spacing: -.015em; max-width: 36ch; }
.demo-note { color: var(--ash); }
.bench-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-6);
}
.bench-plot {
  position: relative;
  background: var(--ink-2);
  border: 1px solid var(--rule);
  border-radius: 2px;
}
#bench-canvas { width: 100%; aspect-ratio: 4 / 3; height: auto; }
.bench-handles { position: absolute; inset: 0; pointer-events: none; }
.handle {
  position: absolute;
  width: 24px; height: 24px;
  margin: -12px 0 0 -12px;
  border-radius: 50%;
  pointer-events: auto;
  touch-action: none;
  cursor: ns-resize;
  display: grid;
  place-items: center;
}
.handle::after {
  content: '';
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--ink);
  border: 2px solid var(--brass);
  transition: transform var(--d-micro) var(--e-ui), background-color var(--d-micro);
}
.handle:hover::after, .handle:focus-visible::after, .handle.is-active::after { transform: scale(1.25); background: var(--brass); }
.handle:focus-visible { outline-offset: 0; }
@media (pointer: coarse) { .handle { width: 44px; height: 44px; margin: -22px 0 0 -22px; } }

.bench-side { display: flex; flex-direction: column; gap: var(--s-5); min-width: 0; }
.range { display: grid; gap: 0; }
.bench-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.bench-ro {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}
.bench-ro > div { padding: 12px 14px; background: var(--ink-2); }
.bench-ro dt {
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mute);
}
.bench-ro dd {
  margin-top: 6px;
  font-size: 18px;
  letter-spacing: 0;
  color: var(--bone);
  font-variant-numeric: tabular-nums;
}
.spark { width: 100%; height: 48px; }
.bench-compute { color: var(--mute); }
.bench-stage-wrap { padding-top: var(--s-6); border-top: 1px solid var(--rule); }
#custom-stage { height: 44svh; }
#bench-next { margin-top: var(--s-3); }

/* ---------------- 6.5 Local ---------------- */
.local-grid { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--s-7); align-items: center; }
.local-copy { display: flex; flex-direction: column; gap: var(--s-5); }
.local-copy .label { margin-bottom: 0; }
.local-copy .label::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 1px;
  background: var(--brass);
}
#local-title { color: var(--bone); }
#local-note {
  padding-left: var(--s-4);
  border-left: 1px solid var(--brass-lo);
}
#local-stage { height: 48svh; }

/* ---------------- 6.6 Point of view ---------------- */
.pov-sticky {
  max-width: var(--max);
  margin-inline: auto;
  padding-block: var(--sec-pad) var(--s-7);
  display: flex;
  flex-direction: column;
}
.pov-sticky .label { margin-bottom: var(--s-4); }
#pov-title { color: var(--bone); font-weight: 800; }
#pov-stage { flex: none; height: min(46vh, 440px); min-height: 280px; margin-block: var(--s-4); }
.pov-line {
  font: 300 clamp(20px, 2.2vw, 32px)/1.3 var(--f-display);
  letter-spacing: -.01em;
  color: var(--ash);
  max-width: 40ch;
}
.pov-line .em { color: var(--bone); }

/* ---------------- 6.7 Socrates ---------------- */
.soc-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-5);
  align-items: end;
}
.soc-intro .label { margin-bottom: 0; }
.soc-title { font-weight: 200; letter-spacing: -.05em; color: var(--bone); }
.soc-oneliner {
  font: 300 var(--t-lede)/1.35 var(--f-display);
  letter-spacing: -.01em;
  color: var(--bone);
  max-width: 30ch;
}
.soc-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3) var(--s-4);
  font: 400 13px/1.4 var(--f-mono);
  letter-spacing: .02em;
  color: var(--ash);
}
.soc-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-7);
  margin-top: var(--s-8);
}
#soc-loop h3 {
  font: 500 clamp(20px, 1.8vw, 26px)/1.2 var(--f-display);
  letter-spacing: -.015em;
  max-width: 28ch;
  margin-bottom: var(--s-5);
}
.stage-square { aspect-ratio: 1; width: min(100%, 420px); max-width: 560px; margin-inline: auto; }
.soc-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.soc-ring .ring-line { stroke: var(--rule-2); stroke-width: 1; vector-effect: non-scaling-stroke; }
.soc-ring .gate-line {
  stroke: var(--brass);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-dasharray: 16 0 0;
  transition: stroke-dasharray var(--d-commit) var(--e-out), stroke var(--d-ui);
}
.soc-ring .gate-line.is-open { stroke-dasharray: 4 8 4; stroke: var(--brass-lo); }
.soc-ring .packet { fill: var(--brass); }
html.gl-live #soc-ring .ring-line,
html.gl-live #soc-gate,
html.gl-live #soc-packet { display: none; }

.stations { position: absolute; inset: 0; z-index: var(--z-overlay); }
.station {
  position: absolute;
  width: 32px; height: 32px;
  margin: -16px 0 0 -16px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--ash);
  transition: box-shadow var(--d-ui) var(--e-ui), color var(--d-ui);
}
.station::before {
  content: '';
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--ink);
  border: 1px solid var(--ash);
  transition: background-color var(--d-ui), border-color var(--d-ui), opacity var(--d-ui);
}
html.gl-live .station::before { opacity: 0; }
.station:hover { box-shadow: inset 0 0 0 1px var(--rule-2); color: var(--bone); }
.station[aria-checked="true"] { color: var(--bone); box-shadow: inset 0 0 0 1px var(--ash); }
.station[data-gate] { box-shadow: inset 0 0 0 2px var(--brass-lo); }
.station.is-lit { color: var(--bone); }
.station.is-lit::before { background: var(--bone); border-color: var(--bone); }
.station.is-current { color: var(--brass); box-shadow: inset 0 0 0 1px var(--brass); }
.station.is-current::before { background: var(--brass); border-color: var(--brass); }
.station:focus-visible { outline-offset: 2px; border-radius: 50%; }
/* default ring geometry (φ = 90° − 40°·i, radius 39%); identical to what socrates.js computes */
.stations > .station:nth-of-type(1) { left: 50%;     top: 11%; }
.stations > .station:nth-of-type(2) { left: 75.07%;  top: 20.13%; }
.stations > .station:nth-of-type(3) { left: 88.41%;  top: 43.23%; }
.stations > .station:nth-of-type(4) { left: 83.77%;  top: 69.5%; }
.stations > .station:nth-of-type(5) { left: 63.34%;  top: 86.65%; }
.stations > .station:nth-of-type(6) { left: 36.66%;  top: 86.65%; }
.stations > .station:nth-of-type(7) { left: 16.23%;  top: 69.5%; }
.stations > .station:nth-of-type(8) { left: 11.59%;  top: 43.23%; }
.stations > .station:nth-of-type(9) { left: 24.93%;  top: 20.13%; }
/* Labels sit radially INSIDE the ring (integration change from "outside"): outside labels crossed
   the ring at the side stations and overflowed a 390px viewport. (--c, --s) = (cos φ, sin φ). */
.station { --lab-d: 30px; --c: 0; --s: 1; --ta: center; }   /* 23px touched the ring and stations (fix r1) */
.station[data-i="1"] { --c: .643;  --s: .766; --ta: right; }
.station[data-i="2"] { --c: .985;  --s: .174; --ta: right; }
.station[data-i="3"] { --c: .866;  --s: -.5;  --ta: right; }
/* the two bottom stations label just below the ring (inside, their labels collide at 390px) */
.station[data-i="4"] { --c: 0; --s: 1; }
.station[data-i="5"] { --c: 0; --s: 1; }
.station[data-i="6"] { --c: -.866; --s: -.5;  --ta: left; }
.station[data-i="7"] { --c: -.985; --s: .174; --ta: left; }
.station[data-i="8"] { --c: -.643; --s: .766; --ta: left; }
.station-label {
  position: absolute;
  left: calc(50% - var(--c) * var(--lab-d));
  top: calc(50% + var(--s) * var(--lab-d));
  width: max-content;
  max-width: 11ch;
  transform: translate(calc(-50% - var(--c) * 50%), calc(-50% + var(--s) * 50%));
  font: 400 11px/1.25 var(--f-mono);
  letter-spacing: .02em;
  text-align: var(--ta);
  color: inherit;
  pointer-events: none;
  /* an ink halo keeps the loop's stroke and dust off the text without drawing boxes over the ring
     (fix r3: the .82 ink plates read as black chips on the diagram) */
  padding: 1px 4px;
  text-shadow: 0 0 2px var(--ink), 0 0 4px var(--ink), 0 0 8px var(--ink), 0 0 12px var(--ink);
}
@media (pointer: coarse) {
  .station { width: 44px; height: 44px; margin: -22px 0 0 -22px; --lab-d: 34px; }
}

#soc-caption { max-width: 560px; margin-inline: auto; min-height: 3em; color: var(--ash); }

/* console */
.console {
  background: var(--graphite);
  border: 1px solid var(--rule);
  border-radius: 2px;
  min-width: 0;
}
.console-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-2) var(--s-4);
  padding: 12px 20px;
  border-bottom: 1px solid var(--rule);
  font: 400 12px/1.4 var(--f-mono);
  letter-spacing: .02em;
  color: var(--bone);
}
.demo-flag { color: var(--brass); }
.demo-flag::before {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  margin-right: 8px;
  border: 1px solid var(--brass);
  border-radius: 1px;
  vertical-align: 1px;
}
.tabs { display: flex; border-bottom: 1px solid var(--rule); padding-inline: 12px; }
.tabs [role="tab"] {
  min-height: 44px;
  padding: 0 12px;
  font: 400 12px/1 var(--f-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--mute);
  transition: color var(--d-ui), box-shadow var(--d-ui);
}
.tabs [role="tab"]:hover { color: var(--bone); }
.tabs [role="tab"][aria-selected="true"] { color: var(--bone); box-shadow: inset 0 -2px 0 var(--brass); }
.pane {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-4);
  padding: 24px 20px;
  border-bottom: 1px solid var(--rule);
}
.pane > * { max-width: 100%; }
.pane h4 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-3);
  font: 500 12px/1.4 var(--f-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--bone);
}
.pane h4 .t-label { letter-spacing: .06em; text-transform: none; }
.name-field { display: grid; gap: var(--s-3); width: 100%; }
.name-field .seg { justify-self: start; }
#soc-name { max-width: 340px; font-family: var(--f-mono); font-size: 14px; }
.hint:empty { display: none; }
.evidence { display: grid; gap: var(--s-2); width: 100%; }
.ev-line {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  background: var(--ink-2);
  border: 1px solid var(--rule);
  border-radius: 2px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--bone);
  transition: box-shadow var(--d-ui), border-color var(--d-ui);
}
.ev-id {
  font: 400 11px/1.4 var(--f-mono);
  letter-spacing: .06em;
  color: var(--mute);
}
.ev-line.is-cited { border-color: var(--brass); box-shadow: inset 2px 0 0 var(--brass); }
.stamp {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border: 1px solid var(--rule-2);
  border-radius: 2px;
  font: 400 11px/1.2 var(--f-mono);
  letter-spacing: .1em;
  color: var(--ash);
}
.stamp.is-accepted, .stamp[data-state="accepted"] { color: var(--brass); border-color: var(--brass); }
.stamp.is-rejected, .stamp[data-state="rejected"] { color: var(--warn); border-color: var(--warn); }
.draft-text {
  font: 300 clamp(18px, 1.5vw, 22px)/1.45 var(--f-display);
  letter-spacing: -.005em;
  color: var(--bone);
  max-width: 44ch;
}
.draft-text:empty { display: none; }
.draft-text .cites { white-space: nowrap; }   /* a claim's last word + its chips wrap together (fix r2) */
.cite {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 8px;
  margin: 0 2px;
  border: 1px solid var(--rule-2);
  border-radius: 2px;
  font: 400 11px/1 var(--f-mono);
  letter-spacing: .04em;
  color: var(--brass);
  vertical-align: 2px;
  transition: border-color var(--d-ui);
}
button.cite:hover, .cite[aria-expanded="true"] { border-color: var(--brass); }
@media (pointer: coarse) { button.cite { min-height: 44px; min-width: 44px; justify-content: center; } }
.cite-pop {
  width: 100%;
  padding: 12px 14px;
  background: var(--graphite-2);
  border: 1px solid var(--rule-2);
  border-left: 2px solid var(--brass);
  border-radius: 2px;
  font: 400 13px/1.55 var(--f-mono);
  color: var(--bone);
}
.draft-src { color: var(--mute); }
.decide-btns { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.edit-box { display: grid; gap: var(--s-3); width: 100%; }
.loop-strip { display: none; gap: 8px; align-items: center; }
.loop-strip li {
  width: 8px; height: 8px;
  border-radius: 50%;
  border: 1px solid var(--mute);
}
.loop-strip li.is-lit { background: var(--bone); border-color: var(--bone); }
.loop-strip li.is-current { background: var(--brass); border-color: var(--brass); }
.loop-strip li[data-gate] { box-shadow: 0 0 0 2px var(--brass-lo); }

/* the paper Student Intelligence Card */
.paper {
  margin: 20px;
  padding: 24px;
  background: var(--paper);
  color: var(--paper-ink);
  border: 0;
  border-radius: 2px;
}
.paper h4 { color: var(--paper-ink); }
.card-list { display: grid; width: 100%; border-top: 1px solid var(--paper-rule); }
.card-list:empty, .evidence:empty { display: none; }
.card-list li, .card-entry {
  position: relative;
  padding: 12px 0 12px 14px;
  border-bottom: 1px solid var(--paper-rule);
  font-size: 15px;
  line-height: 1.5;
  color: var(--paper-ink);
}
.card-list li::before {
  content: '';
  position: absolute;
  left: 0; top: 20px;
  width: 5px; height: 5px;
  border-radius: 1px;
  background: var(--paper-mute);
}
.entry-date, .card-entry .date {
  font: 400 12px/1.5 var(--f-mono);
  letter-spacing: .02em;
  color: var(--paper-mute);
}
.card-entry.is-new { animation: entry-new 2s var(--e-out) both; }
@keyframes entry-new {
  0%, 30% { box-shadow: inset 2px 0 0 var(--paper-brass); background-color: rgba(127, 98, 50, .08); }
  100% { box-shadow: inset 2px 0 0 rgba(127, 98, 50, 0); background-color: rgba(127, 98, 50, 0); }
}
.card-ro { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-6); }
.card-ro dt { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--paper-mute); }
.card-ro dd { margin-top: 2px; font-size: 16px; color: var(--paper-ink); font-variant-numeric: tabular-nums; }
.card-log { color: var(--paper-mute); min-height: 1.5em; }
.paper .btn-line { color: var(--paper-ink); border-color: var(--paper-mute); }
.paper .btn-line:hover:not([disabled]) { border-color: var(--paper-ink); }

/* class panel */
#soc-panel-class { padding: 20px; display: grid; gap: var(--s-5); }
.table-wrap { overflow-x: auto; border: 1px solid var(--rule); border-radius: 2px; }
.class-table { font: 400 12px/1.4 var(--f-mono); letter-spacing: .02em; min-width: 520px; }
.class-table th, .class-table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--rule); }
.class-table th { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); font-weight: 400; background: var(--ink-2); }
.class-table td { color: var(--bone); }
.class-table td:first-child { color: var(--brass); }
.class-table tr:last-child td { border-bottom: 0; }
.plans { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
.plans h4 { font: 400 11px/1.4 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); margin-bottom: var(--s-2); }
.plans ol { list-style: decimal; padding-left: 1.2em; color: var(--bone); font-size: 15px; }
.plans ol li::marker { color: var(--brass); font-family: var(--f-mono); font-size: 12px; }
.plans p { color: var(--bone); font-size: 15px; }

/* principles */
.principles {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-6);
  margin-top: var(--s-9);
}
.principles article { padding-top: var(--s-5); border-top: 1px solid var(--rule); }
.principles h3 { font: 500 clamp(20px, 1.7vw, 26px)/1.15 var(--f-display); letter-spacing: -.015em; }
.principles h3::before {
  content: '';
  display: block;
  width: 8px; height: 8px;
  margin-bottom: var(--s-4);
  border-radius: 1px;
  background: var(--brass);
}
.principles p { margin-top: var(--s-3); color: var(--ash); font-size: 16px; }

/* ---------------- 6.8 Contact ---------------- */
.contact-intro { display: flex; flex-direction: column; gap: var(--s-5); }
.contact-intro .label { margin-bottom: 0; }
.email-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-4); margin-top: var(--s-3); }
.email {
  font-size: clamp(16px, 1.4vw, 20px);
  color: var(--bone);
  user-select: all;
  -webkit-user-select: all;
  padding: 6px 0;
  border-bottom: 1px solid var(--brass-lo);
}
.copy-status:empty { display: none; }
.copy-status { color: var(--ash); }

.sketch {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-6);
  margin-top: var(--s-9);
  padding-top: var(--s-7);
  border-top: 1px solid var(--rule);
}
.sketch-side { display: flex; flex-direction: column; gap: var(--s-5); min-width: 0; }
#sketch-title { font: 500 var(--t-h3)/1.1 var(--f-display); letter-spacing: -.02em; }
.sketch-form { display: grid; gap: var(--s-3); }
#sketch-input { font-size: 15px; }
.sketch-chips { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }
#sketch-build { margin-left: var(--s-1); }
.sketch-out {
  display: grid;
  gap: var(--s-3);
  justify-items: start;
  padding: 24px;
  background: var(--graphite);
  border: 1px solid var(--rule);
  border-radius: 2px;
}
/* one shrinkable column, and long unbroken words (a German compound, a pasted token) wrap inside
   the card instead of widening it past its edge (fix r2) */
.sketch-out { grid-template-columns: minmax(0, 1fr); }
.sketch-out > * { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
#sketch-name { font: 500 22px/1.2 var(--f-display); letter-spacing: -.015em; color: var(--bone); }
#sketch-summary { color: var(--ash); }
#sketch-host { color: var(--bone); }
#sketch-qs { display: grid; gap: var(--s-2); counter-reset: q; font-size: 15px; }
#sketch-qs li { counter-increment: q; display: grid; grid-template-columns: 28px minmax(0, 1fr); color: var(--bone); }
#sketch-qs li::before { content: counter(q, decimal-leading-zero); font: 400 11px/2 var(--f-mono); color: var(--brass); }
#sketch-stage { height: 44svh; }

.compose {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-7);
  margin-top: var(--s-9);
  padding-top: var(--s-7);
  border-top: 1px solid var(--rule);
}
.c-form { display: grid; gap: var(--s-5); align-content: start; }
.c-form h3 { font: 500 var(--t-h3)/1.1 var(--f-display); letter-spacing: -.02em; }
.c-form .field { position: relative; }
.count { justify-self: end; }
#c-prepare { justify-self: start; }
.form-note { color: var(--warn); font-size: var(--t-small); min-height: 1.5em; }
.form-note:empty { min-height: 0; }
.c-preview {
  display: grid;
  gap: var(--s-4);
  align-content: start;
  padding: 24px;
  background: var(--graphite);
  border: 1px solid var(--rule);
  border-radius: 2px;
}
#c-out { font: 400 13px/1.6 var(--f-mono); min-height: 220px; background: var(--ink-2); }
#c-copy { justify-self: start; }

/* ---------------- 6.9 Footer finale ---------------- */
.foot {
  max-width: var(--max);
  margin-inline: auto;
  padding-top: var(--s-10);
  padding-bottom: 120px;
}
.foot-mark {
  position: relative;
  isolation: isolate;      /* the finale glow (#foot-dot::before, z -1) paints under the letters (fix r3) */
  font: 800 min(var(--t-mega), calc((100vw - 2 * var(--gutter)) / 4.4))/.8 var(--f-display);
  letter-spacing: -.05em;   /* -.06em made the R and C touch (fix r1) */
  color: var(--bone);
  white-space: nowrap;
  margin-left: -.03em;
  padding-bottom: .08em;
}
.foot-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3) var(--s-6);
  margin-top: var(--s-7);
  padding-top: var(--s-5);
  border-top: 1px solid var(--rule);
  color: var(--mute);
}
.foot-row > a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-left: auto;
  color: var(--ash);
  transition: color var(--d-ui);
}
.foot-row > a:hover { color: var(--bone); }
.foot-row > a span { color: var(--brass); margin-left: 6px; }

/* ============================================================== 7. CONCIERGE (Ask Archon) */
.ask {
  position: fixed;
  left: 50%;
  bottom: calc(20px + var(--safe-b));
  z-index: var(--z-ask);
  width: 416px; /* 360 in §5.1 truncated the default placeholder (integration change) */
  max-width: calc(100vw - 32px);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  transform: translateX(-50%);
  transition: width var(--d-commit) var(--e-out);
}
.ask:focus-within, .ask.is-open { width: min(640px, 100vw - 32px); }
/* an engaged bar gets an ink backdrop behind its chips, the panel-to-bar gap and the mode line,
   so the hero band never shows sliced through them (fix r1). Its sides are feathered (fix r3): the
   old box ended 18px outside the panel in an invisible hard edge that cut the hero CTA, the readout
   strip and the keystone hint mid-word. Now nearby copy fades out under the panel like a shadow, and
   the only hard edges are the panel's and the bar's own borders. */
@media (min-width: 760px) {
  .ask:focus-within::before, .ask.is-open::before {
    content: '';
    position: absolute;
    inset: -14px -56px -12px;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(to top, var(--ink) 70%, rgba(10, 10, 11, 0));
    -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0), #000 56px, #000 calc(100% - 56px), rgba(0, 0, 0, 0));
    mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0), #000 56px, #000 calc(100% - 56px), rgba(0, 0, 0, 0));
  }
}
.ask-bar {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  height: 48px;
  padding: 0 4px 0 14px;
  background: var(--graphite);
  border: 1px solid var(--rule-2);
  border-radius: 2px;
  transition: border-color var(--d-ui) var(--e-ui);
}
.ask-bar:focus-within { border-color: var(--brass); box-shadow: 0 0 0 1px var(--brass); } /* the input's focus ring is the bar's */
.ask-prompt { color: var(--brass); flex: none; }
#ask-input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 44px;
  padding: 0 6px;
  background: none;
  border: 0;
  font: 400 15px/1 var(--f-body);
}
#ask-input:focus-visible { outline: none; }
.ask-send, .ask-stop {
  flex: none;
  min-height: 38px;
  padding: 0 14px;
  border-radius: 2px;
  font: 500 12px/1 var(--f-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  transition: background-color var(--d-ui), color var(--d-ui), border-color var(--d-ui);
}
.ask-send { background: var(--brass); color: var(--ink); }
.ask-send:hover { background: var(--brass-hi); }
.ask-stop { border: 1px solid var(--warn); color: var(--warn); }
/* The mode line shows once the viewer engages (focus, open panel, sheet). Collapsed, the bar floats
   alone, so the line never sits over page copy; answers carry their own honest title. */
.ask-mode {
  display: none;
  align-self: center;
  max-width: 100%;
  padding: 3px 8px;
  text-align: center;
  color: var(--mute);
  background: rgba(10, 10, 11, .88);
  border-radius: 2px;
}
.ask:focus-within .ask-mode, .ask.is-open .ask-mode, .ask.is-sheet .ask-mode { display: block; }
.ask-chips { display: flex; flex-wrap: wrap; gap: var(--s-2); justify-content: center; }
.ask-chips .chip { background: var(--graphite); }

.ask-panel {
  display: flex;
  flex-direction: column;
  max-height: min(58vh, 560px);
  background: var(--graphite);
  border: 1px solid var(--rule);
  border-radius: 2px;
  animation: panel-in var(--d-commit) var(--e-out) both;
}
@keyframes panel-in { from { opacity: .5; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.ask-head {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: 6px 6px 6px 16px;
  border-bottom: 1px solid var(--rule);
}
#ask-title { color: var(--bone); flex: 1 1 auto; }
#ask-scope { width: 120px; height: 20px; flex: none; }
.ask-x {
  width: 44px; height: 44px;
  flex: none;
  display: grid;
  place-items: center;
  color: var(--ash);
  font-size: 14px;
  border-radius: 2px;
}
.ask-x:hover { color: var(--bone); background: var(--graphite-2); }
.ask-log {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
}
.qa { display: grid; gap: var(--s-3); }
.qa + .qa { padding-top: var(--s-5); border-top: 1px solid var(--rule); }
.q {
  font: 400 12px/1.5 var(--f-mono);
  letter-spacing: .02em;
  color: var(--ash);
}
.q::before { content: '› '; color: var(--brass); }
.a { font-size: 16px; line-height: 1.6; color: var(--bone); white-space: pre-wrap; }
.a[aria-busy="true"]:not(:has(.tok)) { color: var(--ash); }
.tok {
  color: var(--brass);
  opacity: .35;
  filter: blur(3px);
  transition: color var(--d-commit) var(--e-out), opacity var(--d-commit) var(--e-out), filter var(--d-commit) var(--e-out);
}
.tok.is-set { color: var(--bone); opacity: 1; filter: none; }
.is-streaming .a::after, .a.is-streaming::after {
  content: '';
  display: inline-block;
  width: .5em; height: .5em;
  margin-left: .25em;
  border-radius: 1px;
  background: var(--brass);
  animation: dot-blink 1s steps(2, jump-none) infinite;
}
.ask-quote {
  margin: 4px 0;
  padding: 2px 0 2px 14px;
  border-left: 2px solid var(--brass);
  font: 300 17px/1.5 var(--f-display);
  color: var(--bone);
  white-space: normal;
}
.receipts { font: 400 11px/1.6 var(--f-mono); letter-spacing: .04em; color: var(--mute); }
.receipts:empty, .cites-row:empty, .follow:empty { display: none; }
.cites-row, .follow { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.cite-chip {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 9px;
  margin: 0 2px;
  border: 1px solid var(--rule-2);
  border-radius: 2px;
  background: var(--graphite-2);
  font: 400 11px/1 var(--f-mono);
  letter-spacing: .04em;
  color: var(--brass);
  vertical-align: 1px;
  white-space: nowrap;
  transition: border-color var(--d-ui), color var(--d-ui);
}
.cite-chip:hover { border-color: var(--brass); color: var(--brass-hi); }
.follow .chip { min-height: 32px; }
@media (pointer: coarse) { .cite-chip, .follow .chip { min-height: 44px; } }
/* An inline chip inside answer text keeps its 44px target but not a 44px line (fix r3: running text
   jumped from 26px to about 70px leading around each chip on phones). The button box stays 44px tall
   with negative block margins, so the line box is unchanged; the visible chip is drawn by ::before. */
@media (pointer: coarse) {
  .a .cite-chip {
    position: relative;
    z-index: 0;
    margin-block: -12px;
    background: none;
    border-color: rgba(0, 0, 0, 0);
    vertical-align: middle;
  }
  .a .cite-chip::before {
    content: '';
    position: absolute;
    inset: 10px 0;
    z-index: -1;
    border: 1px solid var(--rule-2);
    border-radius: 2px;
    background: var(--graphite-2);
  }
}
.ask-meta {
  padding: 8px 16px 0;
  font-size: 11px;
  color: var(--mute);
  font-variant-numeric: tabular-nums;
}
.ask-meta:empty { display: none; }
.ask-note { padding: 6px 16px 0; font-size: 14px; color: var(--ash); }
.ask-note:empty { display: none; }
.ask-note button { margin-left: 8px; }
.ask-disclosure { padding: 8px 16px 12px; color: var(--mute); letter-spacing: .04em; text-transform: none; line-height: 1.5; }
.ask-disclosure:empty { display: none; }
.ask-disclosure .disc-line { display: block; }
.ask-disclosure .disc-line + .disc-line { margin-top: 4px; }
/* per-answer source line and a fallback note that leads into its local quote (fix r1) */
.qa-src { margin-top: -6px; }
.ask-note-inline { font-size: 14px; line-height: 1.5; color: var(--ash); }
/* the mobile sheet's scrim (a tap on it closes the sheet); hidden unless the sheet is open */
.ask-scrim {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-ask) - 1);
  background: rgba(10, 10, 11, .72);
  touch-action: none;
  overscroll-behavior: contain;
}

.ask-fab {
  position: fixed;
  right: calc(16px + env(safe-area-inset-right, 0px));
  bottom: calc(16px + var(--safe-b));
  z-index: var(--z-ask);
  display: none;
  align-items: center;
  gap: 10px;
  min-width: 64px;
  height: 44px;
  padding: 0 18px;
  border: 1px solid var(--rule-2);
  border-radius: 999px;
  background: var(--graphite);
  color: var(--bone);
  font: 500 15px/1 var(--f-body);
}
.ask-fab::before { content: ''; width: 6px; height: 6px; border-radius: 1px; background: var(--brass); }

/* ============================================================== 8. PRESENCE */
.peers {
  position: fixed;
  inset: 0;
  z-index: var(--z-peers);
  pointer-events: none;
  overflow: hidden;
}
.peer {
  position: absolute;
  left: 0; top: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  opacity: .75;  /* presence stays visible; the copy stays the loudest layer (fix r2) */
  will-change: transform;
  transition: opacity var(--d-reveal) var(--e-ui);
}
.peer.is-idle { opacity: .3; }
.peer-x {
  position: relative;
  width: 12px; height: 12px;
  margin: -6px 0 0 -6px;
  flex: none;
}
.peer-x::before, .peer-x::after { content: ''; position: absolute; background: var(--bone); }
.peer-x::before { left: 0; right: 0; top: 50%; height: 1px; margin-top: -.5px; }
.peer-x::after { top: 0; bottom: 0; left: 50%; width: 1px; margin-left: -.5px; }
.peer-tag {
  font: 400 10px/1 var(--f-mono);
  letter-spacing: .08em;
  /* the tag is a peer's only identifier: --ash under the .75 of .peer is about 4.9:1 on ink, and an
     ink halo keeps it legible where it crosses copy (fix r3: --mute at .55 × .7 was about 1.8:1) */
  color: var(--ash);
  text-shadow: 0 0 2px var(--ink), 0 0 5px var(--ink);
  transform: translateY(-6px);
  transition: opacity var(--d-ui) var(--e-ui);
}
.peer.is-idle .peer-tag { opacity: 0; }
/* .ping rings are sized, drawn and animated inline by presence.js (brass 1px ring, 0→120px, 900ms) */
.ping { position: absolute; pointer-events: none; border-color: var(--brass); }

/* ============================================================== 9. SCROLL-LINKED STICKY STAGES
   Only with JS + core, not calm, and only at the widths §4 gives. `.track` never gets padding-block. */
/* Pinned content stays above --dock (the fixed Ask bar / readouts / FAB), so stage captions and
   the POV line are never parked underneath them (integration change). */
@media (min-width: 1024px) {
  html.js:not(.calm):not(.no-core) .studio-track { height: 170vh; }
  html.js:not(.calm):not(.no-core) .studio-sticky {
    position: sticky;
    top: var(--hdr-h);
    height: calc(100svh - var(--hdr-h));
    padding-block: 16px var(--dock);
  }
  html.js:not(.calm):not(.no-core) #studio-stage { height: min(78vh, 760px, calc(100svh - var(--hdr-h) - var(--dock) - 72px)); }
  html.js:not(.calm):not(.no-core) .build-sticky {
    position: sticky;
    top: calc(var(--hdr-h) + 24px);
  }
  /* Runway after the last row (fix r1): the pinned stage stays whole while Consulting is the
     centred row, and a deep link to #cap-architecture / #cap-consulting (row top at hdr + 12) lands
     with the diagram fully in view. Needed: last row top + runway >= sticky top + sticky height. */
  html.js:not(.calm):not(.no-core) .build-copy { padding-bottom: max(0px, calc(70svh - var(--dock) - var(--hdr-h) - 12px)); }
  html.js:not(.calm):not(.no-core) .soc-sticky {
    position: sticky;
    top: calc(var(--hdr-h) + 24px);
  }
  /* the square loop stage shrinks on short viewports so its caption stays in view while pinned */
  html.js:not(.calm):not(.no-core) .soc-sticky .stage-square { max-width: min(560px, calc(100svh - var(--hdr-h) - var(--dock) - 176px)); }
}
html.js:not(.calm):not(.no-core) .pov-track { height: 180vh; }
@media (min-width: 1024px) { html.js:not(.calm):not(.no-core) .pov-track { height: 220vh; } }
html.js:not(.calm):not(.no-core) .pov-sticky {
  position: sticky;
  top: var(--hdr-h);
  height: calc(100svh - var(--hdr-h));
  padding-block: var(--s-6) var(--dock);
}
html.js:not(.calm):not(.no-core) #pov-title { font-size: min(var(--t-display), 12.5svh); }
html.js:not(.calm):not(.no-core) #pov-stage { flex: 1 1 auto; height: auto; min-height: 22vh; }

/* ============================================================== 10. CALM (reduced motion or toggle) */
html.calm .track { height: auto; }
html.calm .sticky { position: static; }
html.calm #hero-img,
html.calm .tok,
html.calm #studio-craft, html.calm #pov-work,
html.calm .step::before, html.calm .cap::before,
html.calm .nav a::after,
html.calm .ask,
html.calm .soc-ring .gate-line { transition: none; }
html.calm #hdr-dot.is-thinking,
html.calm .is-streaming .a::after, html.calm .a.is-streaming::after { animation: none; }
html.calm .pulse { animation: none; box-shadow: 0 0 0 1px var(--brass); background-color: var(--brass-a10); }
html.calm .card-entry.is-new { animation: none; box-shadow: inset 2px 0 0 var(--paper-brass); }
html.calm .ask-panel, html.calm .toast { animation: none; }
html.calm .tok { color: var(--bone); opacity: 1; filter: none; }

/* ============================================================== 11. NO JS / NO CORE
   All copy readable in order, stages hidden (except the hero photograph), dead controls hidden. */
.nojs-only { display: none; }
:is(html:not(.js), html.no-core) .nojs-only { display: grid; }
:is(html:not(.js), html.no-core) p.nojs-only { display: block; }
:is(html:not(.js), html.no-core) .js-only { display: none; }
:is(html:not(.js), html.no-core) .track { height: auto; }
:is(html:not(.js), html.no-core) .sticky { position: static; }
:is(html:not(.js), html.no-core) .stage:not(.stage-hero),
:is(html:not(.js), html.no-core) .stage-cap,
:is(html:not(.js), html.no-core) .build-track,
:is(html:not(.js), html.no-core) #ask,
:is(html:not(.js), html.no-core) #ask-fab,
:is(html:not(.js), html.no-core) #ask-open,
:is(html:not(.js), html.no-core) #keystone,
:is(html:not(.js), html.no-core) #keystone-hint,
:is(html:not(.js), html.no-core) #rail,
:is(html:not(.js), html.no-core) #readouts,
:is(html:not(.js), html.no-core) #peers,
:is(html:not(.js), html.no-core) #menu,
:is(html:not(.js), html.no-core) #menu-btn,
:is(html:not(.js), html.no-core) .bench,
:is(html:not(.js), html.no-core) .bench-plot,
:is(html:not(.js), html.no-core) #cap-nav,
:is(html:not(.js), html.no-core) .calm-toggle,
:is(html:not(.js), html.no-core) #soc-access,
:is(html:not(.js), html.no-core) .tabs,
:is(html:not(.js), html.no-core) #soc-decide,
:is(html:not(.js), html.no-core) #soc-reset,
:is(html:not(.js), html.no-core) .card-ro,
:is(html:not(.js), html.no-core) #soc-draft-src,
:is(html:not(.js), html.no-core) #soc-evidence > .note,
:is(html:not(.js), html.no-core) #sketch-chips,
:is(html:not(.js), html.no-core) #sketch-add,
:is(html:not(.js), html.no-core) #c-email-copy,
:is(html:not(.js), html.no-core) #soc-caption,
:is(html:not(.js), html.no-core) #local-note,
:is(html:not(.js), html.no-core) .compose { display: none !important; }
/* with the stages gone, copy takes the full measure instead of leaving an empty column */
:is(html:not(.js), html.no-core) .studio-copy,
:is(html:not(.js), html.no-core) .build-copy,
:is(html:not(.js), html.no-core) .local-copy,
:is(html:not(.js), html.no-core) .soc-track,
:is(html:not(.js), html.no-core) .console,
:is(html:not(.js), html.no-core) .sketch-side { grid-column: 1 / -1; }
:is(html:not(.js), html.no-core) .studio-copy .t-h2 { max-width: 16em; }
:is(html:not(.js), html.no-core) .console { max-width: 960px; }
:is(html:not(.js), html.no-core) .sketch-side { max-width: 720px; }
@media (min-width: 1024px) {
  :is(html:not(.js), html.no-core) .caps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-6); }
  :is(html:not(.js), html.no-core) .cap:nth-last-child(2) { border-bottom: 1px solid var(--rule); }
}
:is(html:not(.js), html.no-core) .pov-sticky { padding-block: var(--sec-pad) 0; }
:is(html:not(.js), html.no-core) .studio-sticky { padding-block: var(--sec-pad); }
:is(html:not(.js), html.no-core) #soc-panel-class[hidden] { display: grid !important; border-top: 1px solid var(--rule); }
/* the loop becomes a readable sequence instead of a diagram */
:is(html:not(.js), html.no-core) .loop-list {
  position: static !important;
  width: auto; height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
  clip-path: none;
  white-space: normal;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  font: 400 12px/1.4 var(--f-mono);
  color: var(--bone);
}
:is(html:not(.js), html.no-core) .loop-list li { padding: 8px 12px; border: 1px solid var(--rule-2); border-radius: 999px; }
:is(html:not(.js), html.no-core) .loop-list li:nth-child(4) { border-color: var(--brass); color: var(--brass); }
@media (max-width: 759px) {
  :is(html:not(.js), html.no-core) .hdr { position: relative; margin-inline: calc(var(--gutter) * -1); }
  :is(html:not(.js), html.no-core) .hdr-in { height: auto; padding-block: 4px; display: flex; flex-wrap: wrap; gap: 0 var(--s-5); }
  :is(html:not(.js), html.no-core) .hdr-tools { display: none; }
  :is(html:not(.js), html.no-core) .nav { display: flex !important; flex-wrap: wrap; column-gap: var(--s-5); row-gap: 0; }
  :is(html:not(.js), html.no-core) .hero { padding-top: 0; }
}

/* ============================================================== 12. NO WEBGL (static twins) */
html.no-gl .stage-twin {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
html.no-gl #hero-img { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  html.no-gl:not(.calm) #hero-stage::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(420px circle at var(--mx, 62%) var(--my, 46%), rgba(237, 235, 228, .09), rgba(237, 235, 228, 0) 70%);
  }
}

/* ============================================================== 13. FORCED COLOURS */
@media (forced-colors: active) {
  .dot, .stage-cap::before, .eyebrow::before, .ask-fab::before, .demo-flag::before,
  .rail-tick::before, .peer-x::before, .peer-x::after, .rail-peers { forced-color-adjust: none; }
  .dot { background: CanvasText; }
  .rail-tick::before { background: CanvasText; }
  .rail-tick.is-active::before { background: Highlight; }
  .btn, .chip, .seg, .ask-bar, .console, .bench, .sketch-out, .c-preview, .ask-panel, .toast, .station, .cite, .cite-chip, .stamp { border: 1px solid CanvasText; }
  .chip[aria-pressed="true"], .seg-btn[aria-pressed="true"], .station.is-current, .tabs [role="tab"][aria-selected="true"] { outline: 2px solid Highlight; outline-offset: -2px; }
  #studio-craft.is-crafted, #pov-work.is-real { text-decoration: underline; }
  .handle::after { border-color: CanvasText; }
  :focus-visible { outline-color: Highlight; }
  #hero-img { -webkit-mask-image: none; mask-image: none; }
  /* fix r3: the field canvas is opaque ink and canvas pixels are not recoloured, so under a light
     system theme it stayed black and swallowed CanvasText outlines. field.js starts in static mode
     here (twins draw in the system text colour); if the mode flips after load, the live canvas hides
     and the photograph comes back. The away/thinking dots follow the system text colour as well. */
  #field { display: none; }
  html.gl-live #hero-img { opacity: 1; }
  .dot.is-away, #hdr-dot.is-thinking { background: CanvasText; }
  .paper { border: 1px solid CanvasText; }
  /* canvas-drawn plot and sparkline keep their dark surface, or bone/ash strokes vanish on a light Canvas (fix r1) */
  .bench-plot, #bench-spark { forced-color-adjust: none; background: #0F1012; }
}

/* ============================================================== 14. MEDIA QUERIES */

/* ---- mobile only (<760) ---- */
@media (max-width: 759px) {
  .nav, .ask-open { display: none; }
  .menu-btn { display: inline-block; }
  .hdr-in { grid-template-columns: minmax(0, 1fr) auto; }
  .wordmark { font-size: 20px; }

  /* hero: stage first (visual order), copy, band */
  .hero {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    min-height: 0;
    column-gap: 0;
  }
  .stage-hero {
    position: relative;
    top: auto; right: auto; bottom: auto;
    order: -1;
    width: auto;
    height: 46svh;
    min-height: 320px;
    max-height: 460px;
    margin-inline: calc(var(--gutter) * -1);
  }
  #hero-img {
    object-position: 58% 50%;
    -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 48px), rgba(0,0,0,0));
    mask-image: linear-gradient(180deg, #000 calc(100% - 48px), rgba(0,0,0,0));
  }
  .hero-copy { grid-column: 1; grid-row: auto; padding-bottom: var(--s-7); margin-top: calc(var(--s-4) * -1); }
  .eyebrow { margin-bottom: var(--s-4); flex-wrap: wrap; }
  .hero-lede { font-size: 20px; margin-top: var(--s-5); }
  .hero-ctas { flex-direction: column; align-items: stretch; margin-top: var(--s-5); }
  .hero-ctas .btn { width: 100%; }
  .band {
    grid-column: 1;
    grid-row: auto;
    justify-content: flex-start;
    gap: 0 var(--s-3);
    padding-block: var(--s-2);
    font-size: 12px;
    letter-spacing: .08em;
  }
  .hero-foot { display: none; }

  .bleed-m { margin-inline: calc(var(--gutter) * -1); width: auto; }
  .bench { padding: 20px 16px; margin-inline: calc(var(--gutter) * -1 + 8px); }
  .bench-ro dd { font-size: 16px; }
  .bench-actions .btn { flex: 1 1 auto; }
  .paper { margin: 12px; padding: 20px 16px; }
  .pane { padding: 20px 16px; }
  .console-bar { padding: 12px 16px; }
  .loop-strip { display: flex; }
  .foot { padding-bottom: 96px; }
  .foot-row > a { margin-left: 0; }

  /* Ask: bottom sheet */
  .ask:not(.is-sheet) { display: none; }
  .ask.is-sheet {
    position: fixed;
    inset: auto 0 0 0;
    bottom: var(--kb, 0px);
    width: auto;
    max-width: none;
    max-height: 78svh;
    transform: none;
    padding: 12px 12px calc(12px + var(--safe-b));
    background: var(--graphite);
    border-top: 1px solid var(--rule-2);
    transition: none;
  }
  .ask.is-sheet .ask-panel { flex: 1 1 auto; min-height: 0; max-height: none; border: 0; background: none; }
  .ask.is-sheet .ask-log { padding: 12px 4px; }
  /* before the first answer the open sheet shows only its header (title + close) above the chips */
  .ask.is-sheet.is-fresh .ask-panel { flex: none; }
  .ask.is-sheet.is-fresh .ask-log, .ask.is-sheet.is-fresh #ask-scope, .ask.is-sheet.is-fresh .ask-disclosure { display: none; }
  .ask.is-sheet .ask-head { padding-left: 4px; }
  .ask.is-sheet .ask-bar { background: var(--graphite-2); }
  .ask-send, .ask-stop { min-height: 44px; }   /* tap-target rule (fix r2: was 38px) */
  .ask-fab { display: inline-flex; }
  .ask.is-sheet ~ .ask-fab, .ask-fab[aria-expanded="true"] { display: none; }
  .station-label { max-width: 10ch; }
  .node-labels { --node-lift: 14px; }
}

/* coarse pointers at any width: Send / Stop are 44px targets too (the bar is 48px tall) */
@media (pointer: coarse) { .ask-send, .ask-stop { min-height: 44px; } }
/* touch tablets (coarse pointer at >=760px): the header Ask button, the nav links and the rail ticks
   reach the 44px the site gives every other control on coarse pointers (fix r3: 36px / 43px / 24px) */
@media (pointer: coarse) {
  .ask-open { min-height: 44px; }
  .nav a { min-width: 44px; justify-content: center; }
  .rail { gap: 0; }
  .rail-tick { width: 44px; height: 44px; }
}
/* while the visitor types in a page field on a phone, the Ask FAB steps out of the way (fix r2) */
@media (max-width: 759px) {
  body:has(main :is(input:not([type="range"]), textarea, select):focus) .ask-fab { opacity: 0; pointer-events: none; }
}
/* tablet header: the nav is centred and the tools share what's left (fix r2: with room live the
   count ran into the nav at 760–899px, and "Ask about Archon" needs the room of >=1100px) */
@media (max-width: 1099px) { .ask-open-more { display: none; } }
@media (min-width: 760px) and (max-width: 899px) {
  .hdr-viewing-word { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
}

/* ---- below desktop (<1024): single column; build is a snap carousel ---- */
@media (max-width: 1023px) {
  .build-grid {
    grid-template-areas: "intro" "stage" "caps" "nav";
    row-gap: var(--s-5);
  }
  .build-copy { display: contents; }
  .build-intro { grid-area: intro; }
  .build-track { grid-area: stage; }
  .caps { grid-area: caps; }
  .cap-nav { grid-area: nav; }
  #build-stage { flex: none; height: 42svh; }
  .caps {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .caps::-webkit-scrollbar { display: none; }
  .cap {
    flex: 0 0 min(84%, 520px);
    scroll-snap-align: center;
    padding: 20px;
    background: var(--graphite);
    border: 1px solid var(--rule);
    border-radius: 2px;
    transition: border-color var(--d-ui) var(--e-ui);
  }
  .cap.is-active { border-color: var(--brass); }
  .cap-h { font-size: clamp(26px, 5vw, 36px); }
  .cap p { font-size: 16px; }
  .build-intro { margin-bottom: var(--s-3); }
  .local .stage-wrap { order: -1; }
}

/* ---- tablet (760–1023): larger type, some two-up rows ---- */
@media (min-width: 760px) {
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .principles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plans { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #bench-canvas { aspect-ratio: 16 / 10; }
  .soc-intro { grid-template-columns: minmax(0, 1fr) auto; }
  .soc-intro .label, .soc-title { grid-column: 1 / -1; }
  .soc-status { justify-content: flex-end; }
  .stage-square { width: 100%; max-width: 560px; }
  #studio-stage { max-height: 60svh; }
  .body-l { font-size: 18px; }
}
@media (min-width: 760px) and (max-width: 1023px) {
  .hero-copy { grid-column: 1 / 8; }
  .stage-hero { width: 58vw; }
  .t-h2 { font-size: clamp(40px, 6vw, 60px); }
}

/* ---- desktop (>=1024): 12-column grids, sticky stages active ---- */
@media (min-width: 1024px) {
  .rail { display: flex; }

  .studio-sticky {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--s-6);
  }
  .studio-copy { grid-column: 1 / 6; }
  .studio .stage-wrap { grid-column: 6 / 13; }
  #studio-stage { aspect-ratio: auto; height: min(78vh, 760px); max-height: none; }

  .build-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--s-6);
    align-items: stretch;
  }
  .build-copy { grid-column: 1 / 7; }
  .build-track { grid-column: 7 / 13; grid-row: 1; }
  .cap-nav { display: none; }
  .caps { margin-top: var(--s-8); }
  .cap {
    min-height: 30vh;
    padding-block: var(--s-6);
    border-top: 1px solid var(--rule);
  }
  .cap:last-child { border-bottom: 1px solid var(--rule); }
  .cap::before {
    content: '';
    position: absolute;
    left: 0; right: 0; top: -1px;
    height: 1px;
    background: var(--brass);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--d-reveal) var(--e-out);
  }
  .cap.is-active::before { transform: scaleX(1); }
  .cap p { padding-left: calc(2rem + var(--s-4)); }
  .build-sticky { height: calc(100svh - var(--hdr-h) - 24px - var(--dock)); }
  /* the caption leads the diagram: while the sticky is still unpinned its foot runs through the
     --dock band under the fixed Ask bar, so a caption there was hidden on entry (fix r2) */
  .build-sticky .stage-cap { flex: none; order: -1; margin: 0 0 var(--s-3); }

  .custom-intro { max-width: calc((100% - 11 * var(--s-6)) / 12 * 8 + 7 * var(--s-6)); }
  .bench-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--s-6);
    row-gap: var(--s-6);
  }
  .bench-plot { grid-column: 1 / 8; grid-row: 1; align-self: start; }
  .bench-side { grid-column: 8 / 13; grid-row: 1; }
  .bench-stage-wrap { grid-column: 1 / 13; grid-row: 2; }
  #custom-stage { height: min(56vh, 520px); }

  .local-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s-6); }
  .local-copy { grid-column: 1 / 6; }
  .local .stage-wrap { grid-column: 6 / 13; }
  #local-stage { height: min(76vh, 720px); }

  .soc-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s-6); align-items: stretch; }
  .soc-track { grid-column: 1 / 6; }
  .console { grid-column: 6 / 13; align-self: start; }
  .principles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  #soc-caption { margin-inline: 0; }
  .stage-square { margin-inline: 0; }

  .contact-intro { max-width: calc((100% - 11 * var(--s-6)) / 12 * 8 + 7 * var(--s-6)); }
  .sketch { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s-6); align-items: start; }
  .sketch-side { grid-column: 1 / 6; }
  #sketch-stage { grid-column: 6 / 13; height: min(64vh, 600px); }
  .compose { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s-6); }
  .c-form { grid-column: 1 / 8; }
  .c-preview { grid-column: 8 / 13; }
}

@media (min-width: 760px) { .menu { display: none !important; } }

/* ---- wide (>=1280): readout strip ---- */
@media (min-width: 1280px) {
  .readouts { display: flex; transition: opacity var(--d-ui) var(--e-ui); }
  /* never run under the centred Ask bar (416px): cap the strip to the space on its left and let it
     wrap to a second row (still inside the --dock band) when a long FORM label or VIEWING needs it */
  /* One row, always (fix r2: VIEWING used to drop alone onto a second row): tighter tracking and
     gaps, and a long FORM value is clipped with an ellipsis before the strip may wrap. */
  .readouts {
    flex-wrap: nowrap;
    max-width: calc(50vw - 208px - 40px);
    column-gap: 10px;
    padding: 0 8px;
    letter-spacing: .02em;
  }
  .readouts b { letter-spacing: 0; }
  .readouts span { min-width: 0; flex: none; }
  .readouts span:first-child { flex: 0 1 auto; overflow: hidden; }
  #ro-form { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
}
/* >=1280: the header already shows the live viewer count (#hdr-viewing, which screen readers get too),
   so the strip leaves VIEWING to it and FORM keeps its room. Fix r3: at >=1440 both used to show. */
@media (min-width: 1280px) {
  #readouts #ro-viewing-wrap { display: none; }
  /* an engaged Ask bar widens, shows its mode line and casts its backdrop where the strip sits: the
     strip steps aside at every wide width (fix r3: only 1280–1439 did, so at 1440 it read "VIEWI") */
  body:has(.ask:focus-within) .readouts, body:has(.ask.is-open) .readouts { opacity: 0; }
}