/* Agents Are Instruments, Not Pilots — reader-paced essay.
   Type and house tokens follow the Navigational Assurance page (Spectral, IBM
   Plex Mono, brand teal, olive accent). The ground follows the CI deck: chart
   paper, deep teal ink, and lime used for exactly one thing — the moment
   expert judgment meets the agent's work. Lime is never text. */

:root {
  --paper:      #eef6f3;
  --paper-2:    #e3efeb;
  --surface:    #f6faf8;
  --ink:        #073d3d;
  --ink-soft:   #315757;
  --cite:       #40706d;
  --hair:       #b9cfca;
  --hair-soft:  #d3e2de;
  --band-1:     #82aba4;
  --band-2:     #a3d0c9;
  --band-3:     #cfe6e1;
  --band-4:     #eaf4f1;
  --lime:       #bcc41c;
  --lime-ink:   #6d7300;   /* lime's partner for the rare small mark that needs contrast */
  --plate-bg:   #eef6f3;   /* the deck's chart plates are always paper */

  --font-text:  "Spectral", Georgia, "Times New Roman", serif;
  --font-mono:  "IBM Plex Mono", Menlo, ui-monospace, monospace;
  --gutter:     clamp(1rem, 4vw, 2.5rem);
  --measure:    34rem;
  --page:       78rem;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:     #0b1716;
    --paper-2:   #10201f;
    --surface:   #12231f;
    --ink:       #e4efec;
    --ink-soft:  #a7c4bf;
    --cite:      #8fb3ad;
    --hair:      #2f4a46;
    --hair-soft: #213734;
    --band-1:    #3f6e67;
    --band-2:    #2c5852;
    --band-3:    #1d403c;
    --band-4:    #152f2c;
    --lime-ink:  #d4dc4a;
  }
}
:root[data-theme="dark"] {
  --paper:     #0b1716;
  --paper-2:   #10201f;
  --surface:   #12231f;
  --ink:       #e4efec;
  --ink-soft:  #a7c4bf;
  --cite:      #8fb3ad;
  --hair:      #2f4a46;
  --hair-soft: #213734;
  --band-1:    #3f6e67;
  --band-2:    #2c5852;
  --band-3:    #1d403c;
  --band-4:    #152f2c;
  --lime-ink:  #d4dc4a;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 1.125rem;
  line-height: 1.62;
  overflow-x: hidden;
}
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { text-decoration-color: var(--lime); }
:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }

.skip {
  position: absolute; left: 0; top: 0; z-index: 100;
  padding: 0.6rem 0.9rem;
  background: var(--paper); color: var(--ink);
  font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase;
  border: 1px solid var(--hair); transform: translateY(-120%);
}
.skip:focus, .skip:focus-visible { transform: none; }

.mono, .eyebrow, .tag {
  font-family: var(--font-mono);
  font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--cite);
}

/* ------------------------------------------------------------------ hero */
.hero {
  position: relative;
  padding: clamp(4rem, 14vh, 9rem) var(--gutter) clamp(3rem, 9vh, 6rem);
  border-bottom: 1px solid var(--hair-soft);
  overflow: hidden;
}
.hero__ground {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0.55; pointer-events: none;
}
:root[data-theme="dark"] .hero__ground { opacity: 0.08; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hero__ground { opacity: 0.08; } }
.hero__inner { position: relative; max-width: calc(var(--page) - 2 * var(--gutter)); margin: 0 auto; }
.hero h1 {
  font-weight: 300; font-size: clamp(2.3rem, 1.4rem + 4vw, 4.6rem);
  line-height: 1.06; letter-spacing: -0.02em; margin: 1rem 0 0.8rem; max-width: 16ch;
}
.hero__dek { font-size: clamp(1.15rem, 1rem + 0.6vw, 1.45rem); font-style: italic; color: var(--ink-soft); margin: 0 0 1.8rem; font-weight: 300; }
.hero__by { margin: 0; color: var(--ink-soft); font-size: 0.98rem; }
.hero__meta { margin: 0.5rem 0 0; }

.lede { max-width: var(--page); margin: 0 auto; padding: clamp(2.5rem, 7vh, 4rem) var(--gutter) 0; }
.lede p { max-width: var(--measure); margin: 0 0 1.1rem; }
.lede p:first-child { font-size: 1.24rem; }

/* ---------------------------------------------------------------- scenes
   Text in document flow, figure beside it. The figure is sticky only inside
   its own scene, so nothing stays pinned for longer than the few paragraphs
   it illustrates. */
.scene {
  max-width: var(--page); margin: 0 auto;
  padding: clamp(3rem, 10vh, 6rem) var(--gutter) clamp(1rem, 4vh, 2rem);
  display: grid; grid-template-columns: minmax(0, var(--measure)) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem); align-items: start;
}
.scene__head { grid-column: 1; grid-row: 1; }
.scene__text { grid-column: 1; grid-row: 2; }
.scene__fig  { grid-column: 2; grid-row: 1 / span 2; align-self: start; position: sticky; top: clamp(1.5rem, 10vh, 6rem); margin: 0; }
.scene__num { display: block; margin-bottom: 0.6rem; }
.scene h2 {
  font-weight: 300; scroll-margin-top: 1rem; font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.35rem);
  line-height: 1.18; letter-spacing: -0.012em; margin: 0 0 1.4rem;
}
.scene h3 { font-weight: 400; font-size: 1.3rem; margin: 2.4rem 0 0.8rem; }
.scene p { margin: 0 0 1.1rem; }
.scene p.coda { font-size: 1.3rem; line-height: 1.42; font-weight: 400; margin-top: 1.6rem; }
.scene .guides { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.04em; color: var(--cite); margin-top: 1.6rem; padding-top: 0.7rem; border-top: 1px solid var(--hair-soft); }
.scene .guides a { text-decoration: none; border-bottom: 1px solid var(--hair); }

/* the five kinds of observation, set as the deck sets them */
.tiers { list-style: none; margin: 1.2rem 0 1.6rem; padding: 0; display: grid; gap: 0.1rem; }
.tiers li { display: grid; grid-template-columns: 1.6rem 1fr; gap: 0 0.6rem; padding: 0.55rem 0; border-top: 1px solid var(--hair-soft); }
.tiers li:last-child { border-bottom: 1px solid var(--hair-soft); }
.tiers .n { font-family: var(--font-mono); font-size: 0.85rem; color: var(--cite); padding-top: 0.2rem; }
.tiers .k { font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); }
.tiers .q { grid-column: 2; font-style: italic; color: var(--ink-soft); font-size: 1.02rem; }
.tiers .far { background: linear-gradient(90deg, color-mix(in oklab, var(--lime) 14%, transparent), transparent 70%); }
.tiers-note { font-size: 0.98rem; color: var(--ink-soft); }

/* ---------------------------------------------------------------- figures */
.fig {
  background: var(--surface);
  border: 1px solid var(--hair);
  border-radius: 4px;
  padding: clamp(0.9rem, 2vw, 1.4rem);
}
.fig__head { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; margin-bottom: 0.9rem; }
.fig__head .tag--illus { color: var(--ink-soft); border: 1px solid var(--hair); padding: 0.1rem 0.4rem; border-radius: 2px; letter-spacing: 0.12em; font-size: 0.64rem; }
.fig__stage { position: relative; }
.fig figcaption { margin-top: 0.9rem; padding-top: 0.75rem; border-top: 1px solid var(--hair-soft); font-size: 0.92rem; line-height: 1.5; color: var(--ink-soft); }
.fig__status { min-height: 2.9em; }
.fig__status b { font-weight: 500; color: var(--ink); }
.fig__steps { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.6rem; }
.fig__steps button {
  font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink); background: transparent; border: 1px solid var(--hair); border-radius: 3px;
  padding: 0.35rem 0.6rem; min-height: 2rem; cursor: pointer;
}
.fig__steps button:hover { border-color: var(--ink-soft); }
.fig__steps button:disabled { opacity: 0.4; cursor: default; }
.fig__steps .count { font-family: var(--font-mono); font-size: 0.7rem; color: var(--cite); margin-left: auto; }
.no-js .fig__steps { display: none; }
.fig__desc { /* full text alternative, read by assistive tech and shown without JS */
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* staged elements: visible from data-from onward; data-dim dims them from that step */
.js [data-from]            { opacity: 0; transition: opacity 520ms ease, transform 520ms ease; }
.js [data-from].on         { opacity: 1; }
.js [data-from].on.dim     { opacity: 0.22; }
.js [data-dim]:not([data-from]) { transition: opacity 520ms ease; }
.js [data-dim].dim:not([data-from]) { opacity: 0.22; }

/* plates: the deck's own vector charts, always on chart paper */
.plates { position: relative; aspect-ratio: 1488 / 626; background: var(--plate-bg); border-radius: 2px; overflow: hidden; }
.plates--close { aspect-ratio: 1076 / 470; }
.plates img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.plates .plate-label {
  position: absolute; left: 0.6rem; bottom: 0.5rem;
  font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: #073d3d; background: #eef6f3e6; padding: 0.15rem 0.4rem; border-radius: 2px;
}
.js .plates .plate-label[data-from] { transition-duration: 300ms; }

/* F1 · the correction */
.wp { border: 1px solid var(--hair); background: var(--paper); border-radius: 2px; position: relative; }
.wp__title { padding: 0.55rem 0.8rem; border-bottom: 1px solid var(--hair-soft); }
.wp__row { display: grid; grid-template-columns: 5.6rem 1fr; gap: 0.6rem; padding: 0.42rem 0.8rem; align-items: baseline; border-bottom: 1px solid var(--hair-soft); }
.wp__row:last-child { border-bottom: 0; }
.wp__k { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.1em; color: var(--cite); text-transform: uppercase; }
.wp__v { font-size: 1.02rem; }
.wp__v .agent-v { transition: color 400ms ease; }
.wp__v .agent-v.on-hot { text-decoration: line-through; text-decoration-thickness: 1px; color: var(--ink-soft); }
.wp__v s { text-decoration-thickness: 1px; color: var(--ink-soft); }
.wp__ring {
  position: absolute; right: -0.7rem; top: 50%; width: 1.4rem; height: 1.4rem; margin-top: -0.7rem;
  border-radius: 50%; border: 3px solid var(--lime); background: var(--paper);
}
.wp__ring::after { content: ""; position: absolute; inset: 0.32rem; border-radius: 50%; background: var(--lime); }
.why { margin-top: 1.1rem; }
.why__list { list-style: none; margin: 0.5rem 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0.45rem; }
.why__list li {
  border: 1px dashed var(--hair); border-radius: 2px; padding: 0.45rem 0.6rem;
  display: grid; grid-template-columns: 1.1rem 1fr; gap: 0.3rem; font-size: 0.95rem; line-height: 1.3; min-height: 3.1rem; align-items: start;
}
.why__list .qm { font-size: 1.15rem; color: var(--ink-soft); line-height: 1.1; }
.kept { margin-top: 0.9rem; font-style: italic; }
.provenance { margin-top: 0.4rem; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.06em; color: var(--cite); }

/* F3 · the gradient, drawn inline so it follows the theme */
.grad { width: 100%; height: auto; display: block; overflow: visible; }
.grad text { font-family: var(--font-mono); fill: var(--ink); font-size: 14px; }
.grad .lvl { font-size: 17px; }
.grad .sub { fill: var(--cite); font-size: 12px; }
.grad .axis { fill: var(--cite); font-size: 12px; letter-spacing: 0.12em; }
.grad .band-label { fill: var(--ink); font-size: 15px; }
.grad .hyp { font-family: var(--font-text); font-size: 19px; }
.grad .req { font-size: 15px; }
.grad .resp { font-size: 12.5px; }
.grad .box { fill: var(--surface); stroke: var(--hair); }
.grad .head { fill: var(--ink-soft); } .grad .head--strong { fill: var(--ink); }
.grad .dash--strong { stroke: var(--ink); stroke-width: 2; }
.grad .b1 { fill: var(--band-1); } .grad .b2 { fill: var(--band-2); } .grad .b3 { fill: var(--band-3); } .grad .b4 { fill: var(--band-4); }
.grad .line { stroke: var(--ink-soft); fill: none; }
.grad .dash { stroke: var(--ink-soft); stroke-dasharray: 6 5; fill: none; stroke-width: 1.6; }
.grad .lime-ring { fill: var(--surface); stroke: var(--lime); stroke-width: 3.5; }
.grad .lime-dot { fill: var(--lime); }
.grad .route { stroke: var(--ink); stroke-width: 1.8; fill: none; stroke-dasharray: 1; stroke-dashoffset: 1; }
.js .grad .route.on { stroke-dashoffset: 0; transition: stroke-dashoffset 900ms ease, opacity 300ms; }
.js .grad .route.r2.on { transition-delay: 250ms; } .js .grad .route.r3.on { transition-delay: 500ms; }
.no-js .grad .route { stroke-dashoffset: 0; }
.grad .dest { fill: var(--surface); stroke: var(--ink); stroke-width: 1.6; }
.grad .tick { stroke: var(--ink-soft); }
@media (max-width: 640px) {
  .grad .resp.mid, .grad .sub, .grad .band-label.mid, .grad .tick { display: none; }
  .grad .resp { font-size: 22px; }
  .grad .lvl { font-size: 22px; }
  .grad .band-label { font-size: 19px; }
  .grad .hyp, .grad .req { font-size: 19px; }
  .grad .axis { font-size: 16px; letter-spacing: 0.08em; }
}

/* F4 · the record */
.rec { list-style: none; margin: 0; padding: 0; position: relative; display: grid; gap: 0.55rem; }
.rec::before { content: ""; position: absolute; left: 1.05rem; top: 1rem; bottom: 1rem; width: 1px; background: var(--ink-soft); opacity: 0.6; }
.rec li {
  position: relative; display: grid; grid-template-columns: 2.1rem 1fr; gap: 0.6rem; align-items: center;
  background: var(--paper); border: 1px solid var(--hair); border-radius: 3px; padding: 0.55rem 0.7rem 0.55rem 0;
}
.rec .node { justify-self: center; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--ink-soft); }
.rec .k { font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase; }
.rec .d { display: block; font-size: 0.95rem; color: var(--ink-soft); font-style: italic; line-height: 1.3; }
.rec li.expert { border: 2px solid var(--lime); }
.rec li.expert .node { width: 1rem; height: 1rem; background: var(--paper); border: 3px solid var(--lime); }
.rec-foot { margin-top: 0.8rem; text-align: center; }
.js .rec li[data-from] { transform: translateY(6px); }
.js .rec li[data-from].on { transform: none; }

/* F5 · recurrence */
.recur { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.recur > li { border: 1px dashed var(--hair); border-radius: 3px; padding: 0.55rem 0.7rem; background: var(--paper); transition: border-color 400ms ease; }
.recur > li.hot.on-hot { border: 2px solid var(--ink); }
.recur .lab { font-size: 0.98rem; line-height: 1.3; }
.recur .marks { display: flex; flex-wrap: wrap; gap: 0.35rem 0.55rem; min-height: 1.3rem; margin-top: 0.35rem; }
.recur .resp { display: block; margin-top: 0.35rem; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.06em; color: var(--cite); }
.mark { display: inline-flex; align-items: center; height: 1.1rem; }
.mark::before, .mark::after { content: ""; width: 0.45rem; height: 1px; background: var(--ink-soft); }
.mark i { width: 0.95rem; height: 0.95rem; border-radius: 50%; border: 2.5px solid var(--lime); background: var(--paper); position: relative; }
.mark i::after { content: ""; position: absolute; inset: 0.2rem; border-radius: 50%; background: var(--lime); }
.legend { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.8rem; font-size: 0.86rem; color: var(--ink-soft); }
.js .marks .mark { transition-delay: calc(var(--i, 0) * 90ms); }

/* ------------------------------------------------------------- closing */
.questions { list-style: none; margin: 1.2rem 0 1.6rem; padding: 0; display: grid; gap: 0.7rem; }
.questions li { padding-left: 1.4rem; position: relative; font-size: 1.12rem; line-height: 1.4; }
.questions li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 0.8rem; height: 1px; background: var(--ink-soft); }
.questions li.last { font-size: 1.36rem; }

.status-wrap, .guides-wrap, .colophon { max-width: var(--page); margin: 0 auto; padding: clamp(2rem, 7vh, 4rem) var(--gutter) 0; }
.status { max-width: 48rem; border: 1px solid var(--hair); border-radius: 4px; background: var(--surface); padding: clamp(1rem, 3vw, 1.8rem); }
.status h2, .guides-wrap h2 { font-weight: 300; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); margin: 0 0 1rem; }
.status dl { margin: 0; display: grid; gap: 1rem; }
.status dt { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cite); }
.status dd { margin: 0.25rem 0 0; font-size: 1.02rem; }

.reading { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: 1.1rem; max-width: 48rem; }
.reading li { padding-top: 0.9rem; border-top: 1px solid var(--hair-soft); }
.reading__who { display: block; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cite); margin-bottom: 0.25rem; }
.reading__what { margin: 0 0 0.2rem; font-size: 1rem; }
.reading__used { margin: 0; font-size: 0.94rem; color: var(--ink-soft); font-style: italic; }

.colophon { padding-bottom: clamp(4rem, 12vh, 7rem); display: grid; gap: 1.2rem; justify-items: start; }
.colophon img { width: 84px; height: 84px; }
.colophon p { margin: 0; color: var(--ink-soft); font-size: 0.98rem; max-width: 40rem; }

.theme-toggle {
  position: absolute; right: var(--gutter); top: 1rem; z-index: 50;
  font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink); background: var(--paper); border: 1px solid var(--hair); border-radius: 3px; padding: 0.4rem 0.6rem; cursor: pointer;
}

/* -------------------------------------------------------------- mobile
   One column. The figure leads its scene and is sticky at the top of the
   viewport only while that scene's paragraphs pass beneath it. Figures are
   composed to stay under about half the screen. */
@media (max-width: 960px) {
  body { font-size: 1.06rem; }
  .scene { grid-template-columns: minmax(0, 1fr); gap: 0 1.2rem; }
  .scene__head { grid-row: 1; }
  .scene__fig { grid-column: 1; grid-row: 2; top: 0; margin-bottom: 1.2rem; z-index: 5; padding-top: 0.5rem; background: var(--paper); }
  .scene__text { grid-row: 3; }
  .fig { padding: 0.75rem; }
  .fig figcaption { font-size: 0.86rem; margin-top: 0.6rem; padding-top: 0.5rem; }
  .scene__fig .fig__status { display: none; }   /* the essay text beneath carries the same sentence */
  .fig figcaption { margin-top: 0.45rem; padding-top: 0.4rem; }
  .fig__steps { margin-top: 0.3rem; }
  .fig__steps button { padding: 0.2rem 0.5rem; min-height: 2rem; font-size: 0.64rem; }
  .fig__head .tag, .fig__head .tag--illus { font-size: 0.6rem; }
  .provenance { margin-top: 0; font-size: 0.62rem; }
  .wp__title { padding: 0.35rem 0.6rem; font-size: 0.62rem; }
  .why { margin-top: 0.55rem; }
  .why .mono { font-size: 0.62rem; }
  .why__list { gap: 0.3rem; margin-top: 0.3rem; }
  .kept { margin: 0.45rem 0 0; font-size: 0.92rem; line-height: 1.3; }
  .recur > li { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 0.5rem; }
  .recur .resp { order: 1; white-space: nowrap; margin-top: 0; }
  .recur .marks { order: 2; flex-basis: 100%; }
  .rec-foot { margin-top: 0.45rem; font-size: 0.62rem; }
  .why__list li { min-height: 0; font-size: 0.8rem; line-height: 1.22; padding: 0.3rem 0.4rem; }
  .wp__row { grid-template-columns: 4.6rem 1fr; padding: 0.3rem 0.6rem; }
  .wp__v { font-size: 0.95rem; }
  .rec { gap: 0.3rem; }
  .rec li { padding: 0.35rem 0.6rem 0.35rem 0; }
  .rec .d { font-size: 0.84rem; }
  .recur { gap: 0.3rem; }
  .recur > li { padding: 0.35rem 0.55rem; }
  .recur .lab { font-size: 0.88rem; }
  .recur .marks { margin-top: 0.15rem; min-height: 1.1rem; }
  .recur .resp { margin-top: 0.15rem; font-size: 0.64rem; }
  .legend { display: none; }
  .fig__head { margin-bottom: 0.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* a plate's superseded label leaves entirely rather than dimming under the new one */
.js .plates .plate-label.on.dim { opacity: 0; }

/* ------------------------------------------------- second editorial pass */
/* The hero is a title block now; the essay opens on the workpaper. */
.hero { padding: clamp(3rem, 9vh, 5.5rem) var(--gutter) clamp(2rem, 5vh, 3rem); }
.hero h1 { font-size: clamp(2.2rem, 1.4rem + 3.2vw, 4rem); max-width: 18ch; }
.hero__dek { margin-bottom: 1rem; }
.hero__by .mono { font-size: 0.7rem; margin-left: 0.2rem; }
.scene--first { padding-top: clamp(2rem, 6vh, 3.5rem); }

/* Editor's flags: review-only notes, visibly not prose. Remove before publishing. */
.flag {
  margin: 1.2rem 0; padding: 0.7rem 0.9rem;
  border: 1px dashed var(--lime-ink); border-radius: 3px;
  font-family: var(--font-mono); font-size: 0.74rem; line-height: 1.55; color: var(--ink-soft);
  background: color-mix(in oklab, var(--lime) 8%, transparent);
}
.flag b { display: block; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); margin-bottom: 0.25rem; }
.bridge { padding-top: clamp(1rem, 4vh, 2rem); }
.bridge .flag { max-width: var(--measure); }
.experience {
  max-width: var(--measure); margin: 1.4rem 0 0.2rem !important;
  padding: 0.7rem 0; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair);
  font-size: 0.8rem !important; letter-spacing: 0.08em; color: var(--ink);
}

.wp__note { display: block; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.04em; color: var(--cite); font-style: normal; margin-top: 0.1rem; }

/* scene 5: retained → investigated → interpreted → responses */
.tray {
  border: 1px dashed var(--hair); border-radius: 3px; padding: 0.55rem 0.7rem; margin-bottom: 0.7rem;
  background: var(--paper); transition: border-color 400ms ease, opacity 520ms ease;
}
.tray.on-hot { border: 1px solid var(--ink); }
.tray__lab, .tray__inv { display: block; font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cite); }
.tray__inv { color: var(--ink); margin-top: 0.35rem; }
.tray__marks { display: flex; flex-wrap: wrap; gap: 0.35rem 0.55rem; min-height: 2.6rem; align-content: flex-start; margin-top: 0.35rem; }
.interp { font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cite); margin: 0 0 0.4rem; }
.proposal-tag { margin: -0.4rem 0 1.2rem !important; font-size: 0.68rem !important; letter-spacing: 0.14em; color: var(--ink-soft); }

.scene p.final {
  font-size: clamp(1.45rem, 1.15rem + 1vw, 1.95rem); line-height: 1.3; font-weight: 400;
  margin: 2rem 0 1.4rem; padding-top: 1.2rem; border-top: 1px solid var(--hair);
}
.status dl > div { display: grid; grid-template-columns: 7rem 1fr; gap: 0.2rem 1rem; }
.status dd { margin: 0; }
@media (max-width: 560px) { .status dl > div { grid-template-columns: 1fr; } }

@media (max-width: 960px) {
  .tray { padding: 0.35rem 0.55rem; margin-bottom: 0.4rem; }
  .tray__marks { min-height: 2.3rem; gap: 0.25rem 0.45rem; margin-top: 0.2rem; }
  .tray__lab, .tray__inv, .interp { font-size: 0.6rem; }
  .tray__inv { margin-top: 0.15rem; }
  .interp { margin-bottom: 0.25rem; }
  .wp__note { font-size: 0.6rem; }
}
.reading__intro { max-width: 48rem; color: var(--ink-soft); font-size: 0.98rem; margin: 0; }
.reading .flag { margin: 0.6rem 0 0; }

/* scene 1: the form is there from the start; only the values arrive */
.wp__v { position: relative; }
.wp__v .pending { color: var(--hair); position: absolute; left: 0; }
.js .wp__v .pending + [data-from].on { background: var(--paper); position: relative; }
.no-js .wp__v .pending { display: none; }

/* scene 5: the unsorted tray and the interpreted rows occupy the same cell,
   so the records move in place and the figure keeps one height */
.sortstage { display: grid; }
.sortstage > * { grid-area: 1 / 1; }
.sortstage .tray { align-self: start; margin-bottom: 0; }
.js .sortstage .tray.dim { opacity: 0; pointer-events: none; }
.recur > li { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 0.6rem; padding: 0.45rem 0.7rem; }
.recur .resp { order: 1; margin-top: 0; }
.recur .marks { order: 2; flex-basis: 100%; margin-top: 0.25rem; }
.no-js .tray { display: none; }
.sortstage .tray { align-self: center; }
.wp__row { grid-template-columns: 6.6rem 1fr; }
@media (max-width: 960px) { .wp__row { grid-template-columns: 5.6rem 1fr; } }

/* site links: the eyebrow doubles as a way back to Reins AI */
.site-nav { margin: 0; }
.site-nav a, .site-links a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--hair); }
.site-nav a:hover, .site-links a:hover { border-bottom-color: var(--lime); }
.site-links { font-size: 0.72rem !important; letter-spacing: 0.14em; }
.hero__by .mono { white-space: nowrap; }