/*
  Misfit Circuit — site system.
  Observatory Deck (readable plates, brass rules) for the working pages,
  Lantern Town (the lit world) for the doorway, and the Long Table room
  for the Neighborhood. 3D for the world, paper for the proof.
*/

:root {
  color-scheme: dark;
  --bg: #121011;
  --bg-deep: #0d0b0c;
  --card: #1b1819;
  --card-2: #211c1a;
  --line: #2f2a2b;
  --line-2: #413833;
  --text: #ece4d4;
  --cream: #f2eadb;
  --soft: #b7ad9c;
  --brass: #c9a15c;
  --brass-dim: #8d7a55;
  --lantern: #e2b45a;
  --verdigris: #8fb8a8;
  --amber: #e09a4c;
  --ember: #e38a62;
  --slate: #b4c1d4;
  --paper: #f6efe0;
  --paper-ink: #2a231c;
  --copper: #a06a3c;
  --wall: #16221f;
  --floor: #3a2a1c;

  --display: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --measure: 60ch;
  --radius: 12px;
  --gutter: clamp(16px, 5vw, 64px);
  --section: clamp(48px, 8vw, 112px);
  --max: 1280px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 24px; }
body {
  margin: 0;
  min-height: 100vh;
  background: radial-gradient(1200px 640px at 85% -10%, #231d18 0, var(--bg) 62%) var(--bg);
  color: var(--text);
  font: 400 clamp(18px, 1.05rem + 0.25vw, 20px) / 1.6 var(--sans);
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: var(--brass); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--cream); }
:where(a, button, summary, input, [tabindex]):focus-visible {
  outline: 3px solid var(--lantern);
  outline-offset: 3px;
  border-radius: 4px;
}
h1, h2, h3 {
  margin: 0 0 0.45em;
  color: var(--cream);
  font-family: var(--display);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.3rem, 5.2vw, 4.3rem); }
h2 { font-size: clamp(1.6rem, 2.6vw, 2.35rem); }
h3 { font-size: clamp(1.18rem, 1.5vw, 1.35rem); font-weight: 600; }
p { margin: 0 0 1em; max-width: var(--measure); }
ul, ol { padding-left: 1.2em; }
strong { color: var(--cream); font-weight: 600; }
code { font-family: var(--mono); font-size: 0.86em; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 12px; top: -80px; z-index: 50;
  padding: 12px 16px; min-height: 44px;
  background: var(--lantern); color: #140f08;
  font-weight: 700; text-decoration: none; border-radius: 8px;
}
.skip-link:focus { top: 12px; }

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.narrow { max-width: 880px; }
.wrap.narrow { max-width: calc(880px + 2 * var(--gutter)); }
.mt { margin-top: 18px; }
.mt-lg { margin-top: 34px; }

/* ---------- Type helpers ---------- */
.kicker {
  margin: 0 0 0.8em;
  color: var(--brass);
  font: 500 0.95rem/1.4 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.lede { font-size: 1.12em; color: var(--soft); }
.qual {
  padding-left: 16px;
  border-left: 3px solid var(--brass);
  color: var(--soft);
}
.muted { color: var(--soft); }
.small { font-size: 0.86em; }
.caption, figcaption {
  color: var(--soft);
  font: 500 0.95rem/1.5 var(--mono);
  letter-spacing: 0.01em;
}
.rule { height: 1px; margin: 22px 0; background: linear-gradient(90deg, var(--brass), transparent); border: 0; }

/* ---------- Header ---------- */
.site-header { position: relative; z-index: 20; border-bottom: 1px solid var(--line); background: rgba(18, 16, 17, 0.92); }
.site-header .bar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  max-width: var(--max); margin: 0 auto; padding: 10px var(--gutter);
}
.brand {
  display: inline-flex; align-items: center; gap: 12px;
  min-height: 44px; padding: 0 4px;
  color: var(--cream); text-decoration: none;
  font-family: var(--display); font-size: 1.28rem; font-weight: 600;
}
.brand-mark {
  width: 13px; height: 13px; flex: none;
  border: 2px solid var(--brass); border-radius: 2px;
  transform: rotate(45deg);
  box-shadow: 0 0 14px rgba(226, 180, 90, 0.35);
}
.site-nav ul { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px clamp(6px, 1.6vw, 22px); margin: 0; padding: 0; list-style: none; }
.site-nav a {
  display: inline-flex; align-items: center;
  min-height: 44px; min-width: 44px; padding: 0 6px;
  color: var(--text); text-decoration: none; font-size: 1rem;
  border-bottom: 2px solid transparent;
}
.site-nav a:hover { color: var(--lantern); }
.site-nav a[aria-current="page"] { color: var(--lantern); border-bottom-color: var(--lantern); }
.nav-toggle {
  display: none;
  min-height: 44px; min-width: 44px; padding: 0 16px;
  background: transparent; color: var(--cream);
  border: 1px solid var(--line-2); border-radius: 10px;
  font: 600 0.95rem/1 var(--sans); cursor: pointer;
}
@media (max-width: 859px) {
  .js .nav-toggle { display: inline-flex; align-items: center; }
  .js .site-header .bar { flex-wrap: wrap; }
  .js .site-nav { flex-basis: 100%; }
  .js .site-nav:not(.is-open) { display: none; }
  .js .site-nav ul { flex-direction: column; align-items: stretch; padding: 4px 0 10px; }
  .js .site-nav a { width: 100%; padding: 0 8px; border-bottom: 1px solid var(--line); }
  .js .site-nav a[aria-current="page"] { border-bottom-color: var(--lantern); }
}

/* ---------- Buttons ---------- */
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 26px 0 0; }
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 10px 20px;
  border: 1px solid var(--brass); border-radius: 999px;
  background: var(--brass); color: #17120a;
  font: 650 1rem/1.2 var(--sans); text-decoration: none; text-align: center;
}
.button:hover { background: var(--cream); border-color: var(--cream); color: #17120a; }
.button.secondary { background: transparent; color: var(--cream); border-color: var(--line-2); }
.button.secondary:hover { border-color: var(--brass); color: var(--lantern); background: rgba(201, 161, 92, 0.08); }
.text-link {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px;
  color: var(--lantern); font: 600 0.95rem/1.3 var(--mono);
  letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none;
}
.text-link:hover { color: var(--cream); text-decoration: underline; }

/* ---------- Page hero (working pages) ---------- */
.page-hero { padding: clamp(28px, 6vw, 88px) 0 clamp(8px, 2vw, 24px); }
/* The story starts right under the page top, so it shows on the first screen. */
.page-hero + .plate, .page-hero + section { padding-top: clamp(12px, 2.5vw, 36px); }
.page-hero .grid-hero { display: grid; gap: clamp(24px, 4vw, 56px); align-items: end; }
@media (min-width: 1000px) { .page-hero .grid-hero { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.page-hero h1 { max-width: 18ch; }
.page-hero .grid-hero.solo { grid-template-columns: minmax(0, 1fr); }
.hero-pull { margin-top: 28px; }

/* ---------- Plates (Observatory Deck) ---------- */
.plate {
  display: grid; gap: 22px clamp(24px, 4vw, 56px); align-items: start;
  padding: var(--section) 0 0;
}
.plate > .plate-head { border-top: 1px solid var(--line); padding-top: 22px; }
.plate > .plate-body { min-width: 0; }
@media (min-width: 1000px) {
  .plate { grid-template-columns: minmax(0, 2fr) minmax(0, 5fr); }
  .plate > .plate-head { position: sticky; top: 24px; }
  .plate > .plate-body { border-top: 1px solid var(--line); padding-top: 22px; }
}
.plate-head h2 { font-size: clamp(1.6rem, 2.4vw, 2.25rem); }
.section { padding: var(--section) 0 0; }
main > :last-child { padding-bottom: var(--section); }

/* ---------- Dials and inventory ---------- */
.dials { display: grid; gap: 22px 18px; margin: 0; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.dials > div { border-top: 2px solid var(--brass); padding-top: 12px; }
.dials dt { color: var(--cream); font: 500 clamp(2rem, 3vw, 2.6rem)/1.1 var(--display); }
.dials dd { margin: 4px 0 0; color: var(--text); }
.dials small { display: block; margin-top: 4px; color: var(--soft); font-size: 0.84em; line-height: 1.45; }
.dials .is-deferred { border-top-color: var(--amber); }
.dials .is-deferred dt { color: var(--amber); }

.inv { display: grid; gap: 12px; margin: 0 0 16px; padding: 0; list-style: none; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.inv li { padding: 16px 18px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
.inv b { display: block; color: var(--soft); font: 500 1rem/1.4 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; }
.inv strong { display: block; margin: 2px 0 4px; font: 500 2rem/1.1 var(--display); color: var(--cream); }
.inv span { display: block; color: var(--soft); font-size: 0.92em; line-height: 1.5; }
.inv .failed b { color: var(--ember); }
.inv .partial b { color: var(--amber); }
.inv .finished b { color: var(--verdigris); }

/* ---------- Cards, notices, slots ---------- */
.card {
  padding: clamp(18px, 2.4vw, 26px);
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
}
.card > :last-child { margin-bottom: 0; }
.grid { display: grid; gap: 16px; }
.grid.two { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.grid.three { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.grid.four { grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); }
.notice {
  padding: 18px 20px;
  background: rgba(201, 161, 92, 0.07);
  border: 1px solid rgba(201, 161, 92, 0.35); border-radius: var(--radius);
  color: var(--soft);
}
.notice strong { color: var(--cream); }
.notice > :last-child { margin-bottom: 0; }
.slot {
  display: grid; place-items: center; gap: 6px;
  min-height: 180px; padding: 20px;
  border: 2px dashed var(--line-2); border-radius: 10px;
  color: var(--soft); text-align: center;
  font: 500 0.95rem/1.5 var(--mono);
}
.slot strong { display: block; color: var(--cream); font: 600 0.95rem/1.4 var(--sans); }
.checklist { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.checklist li { position: relative; padding: 10px 14px 10px 40px; background: var(--card); border-left: 3px solid var(--verdigris); border-radius: 0 8px 8px 0; }
.checklist li::before { content: "✓"; position: absolute; left: 14px; top: 10px; color: var(--verdigris); font-weight: 700; }
.checklist.limits li { border-left-color: var(--amber); }
.checklist.limits li::before { content: "—"; color: var(--amber); }
.admit { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.admit li { padding: 12px 16px; background: var(--card); border-left: 3px solid var(--brass); color: var(--soft); border-radius: 0 8px 8px 0; }

/* Result-state chips. Blocked and deferred never turn gold. */
.status {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 0 0 10px; padding: 4px 12px;
  border: 1px solid var(--line-2); border-radius: 999px;
  color: var(--cream); font: 600 1rem/1.4 var(--mono);
  letter-spacing: 0.08em; text-transform: uppercase;
}
.status::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.status.supported { color: var(--verdigris); border-color: rgba(143, 184, 168, 0.5); }
.status.bounded { color: var(--slate); border-color: rgba(180, 193, 212, 0.5); }
.status.partial { color: var(--amber); border-color: rgba(224, 154, 76, 0.55); }
.status.failed { color: var(--ember); border-color: rgba(227, 138, 98, 0.55); }
.status.blocked, .status.deferred { color: var(--amber); border-color: rgba(224, 154, 76, 0.55); }
.status.blocked::before, .status.deferred::before { border-radius: 1px; transform: rotate(45deg); }
.status.inconclusive { color: #f0c979; border-color: rgba(240, 201, 121, 0.5); }
.status.unknown { color: var(--soft); border-style: dashed; }
.status.unknown::before { background: transparent; border: 1px solid currentColor; }
.status.candidate { color: var(--slate); border-style: dashed; }

/* ---------- Figures and screenshots ---------- */
.shot { margin: 0; overflow: hidden; background: var(--card); border: 1px solid var(--line); border-radius: 10px; }
.shot img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; background: #0b0a0a; }
.shot figcaption { padding: 10px 14px; border-top: 1px solid var(--line); }
.shot .pair { display: grid; grid-template-columns: 1.45fr 1fr; gap: 1px; background: var(--line); }
.shot .pair img { aspect-ratio: auto; height: 100%; min-height: 160px; }
.shots { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
/* Composer captures: one large capture, the tall ones open at full size behind a disclosure. */
.captures { display: grid; gap: 18px; }
.captures .shot.lead img { aspect-ratio: auto; object-fit: contain; }
.capture-view { margin: 0; border: 1px solid var(--line); border-radius: 10px; background: var(--card); }
.capture-view > summary {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  min-height: 52px; padding: 10px 16px;
  color: var(--cream); font: 600 1rem/1.3 var(--sans); cursor: pointer; list-style: none;
}
.capture-view > summary::-webkit-details-marker { display: none; }
.capture-view > summary::before { content: "+"; display: grid; place-items: center; width: 26px; height: 26px; flex: none; border: 1px solid var(--brass); border-radius: 50%; color: var(--brass); font-family: var(--mono); }
.capture-view[open] > summary::before { content: "−"; }
.capture-view > summary .muted { font-weight: 400; }
.capture-view .shot { border: 0; border-top: 1px solid var(--line); border-radius: 0 0 10px 10px; }
.capture-view .shot img { aspect-ratio: auto; object-fit: contain; }
.shot figcaption a { color: var(--lantern); font-weight: 600; }
.journey-head { display: grid; gap: 8px 40px; align-items: end; margin-bottom: 24px; padding-top: 22px; border-top: 1px solid var(--line); }
@media (min-width: 1000px) { .journey-head { grid-template-columns: minmax(0, 2fr) minmax(0, 5fr); } }
.art { margin: 0; }
.art img { width: 100%; border-radius: 10px; border: 1px solid rgba(201, 161, 92, 0.35); }
.art figcaption { margin-top: 10px; }

/* ---------- Home: the doorway (Lantern Town) ---------- */
.home .site-header { position: absolute; left: 0; right: 0; top: 0; border-bottom: 0; background: linear-gradient(rgba(13, 11, 12, 0.88), rgba(13, 11, 12, 0)); }
.doorway {
  position: relative; isolation: isolate;
  display: grid; align-items: end;
  min-height: min(100vh, 940px);
  padding: 120px 0 clamp(40px, 6vw, 72px);
  overflow: hidden;
  background: #0d0b17;
}
.doorway-art { position: absolute; inset: 0; z-index: -2; margin: 0; }
.doorway-art img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; transform-origin: 32% 64%; }
.doorway::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgba(13, 11, 12, 0.95) 0%, rgba(13, 11, 12, 0.86) 33%, rgba(13, 11, 12, 0.35) 51%, rgba(13, 11, 12, 0) 68%),
    linear-gradient(0deg, rgba(18, 16, 17, 1) 0%, rgba(18, 16, 17, 0) 22%);
}
.doorway-copy { max-width: 520px; }
.doorway .actions .watch { flex: 0 0 100%; width: fit-content; max-width: 100%; }
.doorway h1 { font-size: clamp(2.4rem, 4.9vw, 4rem); max-width: 16ch; text-shadow: 0 2px 24px rgba(0, 0, 0, 0.55); }
.doorway .lede { color: #d9cfbd; }
.doorway .qual { color: #d0c6b4; }
.doorway-credit {
  position: absolute; right: var(--gutter); bottom: 18px;
  max-width: 40ch; padding: 6px 10px;
  background: rgba(13, 11, 12, 0.72); border-radius: 8px;
  text-align: right;
}
.watch {
  display: inline-flex; align-items: center; gap: 12px;
  min-height: 48px; padding: 8px 18px 8px 10px;
  color: var(--cream); text-decoration: none;
  border: 1px solid rgba(226, 180, 90, 0.5); border-radius: 999px;
  background: rgba(13, 11, 12, 0.55);
}
.watch:hover { color: var(--lantern); border-color: var(--lantern); }
.watch-door {
  position: relative; width: 26px; height: 32px; flex: none;
  border: 2px solid var(--lantern); border-bottom-width: 3px; border-radius: 13px 13px 2px 2px;
  background: radial-gradient(ellipse at 50% 80%, rgba(226, 180, 90, 0.7), rgba(226, 180, 90, 0) 70%);
}
.watch small { display: block; color: var(--soft); font: 500 0.95rem/1.3 var(--mono); letter-spacing: 0.02em; }
@media (max-width: 799px) {
  /* Phone doorway: a taller, square crop keeps Steve, the crew, and the ship ramp in frame;
     the headline sits over the darkened foot of the painting. */
  .doorway { display: block; min-height: 0; padding: 0 0 32px; background: var(--bg); }
  .doorway::before { display: none; }
  .doorway-art { position: relative; inset: auto; z-index: 0; aspect-ratio: 6 / 5; margin: 0; overflow: hidden; }
  .doorway-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, var(--bg) 0%, rgba(18, 16, 17, 0.85) 16%, rgba(18, 16, 17, 0) 44%), linear-gradient(180deg, rgba(13, 11, 12, 0.8) 0%, rgba(13, 11, 12, 0) 24%); }
  .doorway-art img { object-position: 100% 50%; transform-origin: 100% 50%; }
  .doorway-copy { max-width: none; }
  .doorway .wrap { position: relative; z-index: 1; margin-top: -18vw; }
  .doorway .kicker { margin-bottom: 0.5em; }
  .doorway h1 { font-size: clamp(2.1rem, 9.4vw, 2.6rem); text-shadow: 0 2px 18px rgba(0, 0, 0, 0.85), 0 0 40px rgba(13, 11, 12, 0.9); }
  .doorway-credit { position: static; max-width: none; margin: 18px var(--gutter) 0; padding: 0; text-align: left; background: none; }
}

/* Orrery: the recorded run drawn as rings. */
.orrery-wrap { margin: 0; }
.orrery-wrap figcaption { margin-top: 12px; }
.orrery { width: 100%; max-width: 440px; margin: 0 auto; aspect-ratio: 1; }
.orrery svg { width: 100%; height: 100%; display: block; }
.orrery-legend { display: grid; gap: 6px 16px; margin: 14px auto 0; padding: 0; max-width: 460px; list-style: none; color: var(--text); font: 500 1rem/1.45 var(--mono); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.orrery-legend li::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 8px; border-radius: 50%; background: var(--brass); vertical-align: -1px; }
.orrery-legend .c::before { background: #6f9a8a; }
.orrery-legend .d::before { background: #8fa0b8; }
.orrery-legend .b::before { background: #d38a3a; border-radius: 1px; transform: rotate(45deg); }
.run-grid { display: grid; gap: 28px; align-items: center; grid-template-columns: minmax(0, 1fr); }
.run-grid > * { min-width: 0; }
@media (min-width: 1100px) { .run-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } }

/* Composer mini (home) and Composer illustration (Apartment) */
.steps { display: grid; gap: 14px; margin: 18px 0 0; padding: 0; list-style: none; }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.steps li { position: relative; padding: 18px 18px 18px 18px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
.steps li.optional { border-style: dashed; }
.step-no { display: inline-block; margin-bottom: 8px; color: var(--brass); font: 600 0.95rem/1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; }
.steps h3 { margin-bottom: 6px; }
.steps p { margin: 0; color: var(--soft); font-size: 0.94em; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; }
.chips li { padding: 4px 12px; border: 1px solid var(--line-2); border-radius: 999px; color: var(--text); font-size: 0.86em; }
.chips li.off { border-style: dashed; color: var(--soft); }

.plate.composer { grid-template-columns: minmax(0, 1fr); gap: 18px; }
.plate.composer > .plate-head { position: static; display: grid; gap: 0 40px; align-items: end; }
@media (min-width: 1000px) {
  .plate.composer > .plate-head { grid-template-columns: minmax(0, 2fr) minmax(0, 5fr); }
  .plate.composer > .plate-head > .kicker { grid-column: 1; }
  .plate.composer > .plate-head > h2 { grid-column: 1; margin-bottom: 0; }
  .plate.composer > .plate-head > p:last-child { grid-column: 2; grid-row: 1 / span 2; align-self: end; margin: 0; }
  .plate.composer > .plate-body { border-top: 0; padding-top: 0; }
}
.plate.composer .plate-head .small { font-size: 1em; max-width: 60ch; }
.composer-frame {
  padding: clamp(16px, 3vw, 32px);
  background: linear-gradient(180deg, #1c1714, #151212);
  border: 1px solid var(--line-2); border-radius: 18px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.35);
}
.frame-label { margin: 0 0 18px; }
.composer fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.composer legend { padding: 0; margin-bottom: 14px; color: var(--cream); font: 500 clamp(1.25rem, 2vw, 1.6rem)/1.25 var(--display); }
.preset-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
@media (min-width: 900px) { .preset-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 699px) {
  /* Phones: the four workflow cards sit two across so step 1 stays one screen tall. */
  .preset-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .preset { min-height: 0; padding: 12px 12px 14px; gap: 4px; }
  .preset span { font-size: 0.86rem; line-height: 1.4; }
}
.preset-grid input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.preset {
  display: grid; align-content: start; gap: 6px;
  min-height: 150px; padding: 16px 18px;
  background: var(--card); border: 1px solid var(--line-2); border-radius: 12px;
  color: var(--text); cursor: pointer;
}
.preset b { color: var(--cream); font: 600 1.08rem/1.3 var(--sans); }
.preset span { color: var(--soft); font-size: 0.86em; line-height: 1.45; }
.preset i { font-style: normal; color: var(--brass); font: 600 0.95rem/1.4 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; }
.preset-grid input:checked + .preset { border-color: var(--lantern); background: linear-gradient(180deg, rgba(226, 180, 90, 0.14), rgba(226, 180, 90, 0.04)); box-shadow: inset 0 0 0 1px var(--lantern); }
.preset-grid input:checked + .preset i::after { content: " · chosen"; color: var(--lantern); }
.preset-grid input:focus-visible + .preset { outline: 3px solid var(--lantern); outline-offset: 3px; }
.preset.is-off { cursor: default; border-style: dashed; background: transparent; }
.preset.is-off b { color: var(--soft); }
.suggestions { grid-column: 1 / -1; margin-top: 6px; }
.suggestion { display: none; padding: 18px 20px; border: 1px solid var(--line); border-radius: 12px; background: rgba(13, 11, 12, 0.5); }
#preset-investigate:checked ~ .suggestions .s-investigate,
#preset-build:checked ~ .suggestions .s-build,
#preset-review:checked ~ .suggestions .s-review { display: block; }
.suggestion h3 { font-size: 1.1rem; }
.waves { display: grid; gap: 10px; margin: 12px 0 0; padding: 0; list-style: none; }
.waves li { display: grid; gap: 4px 14px; padding: 12px 14px; background: var(--card); border-radius: 10px; border-left: 3px solid var(--brass); }
@media (min-width: 700px) { .waves li { grid-template-columns: 130px 1fr; } }
.waves .wave { color: var(--brass); font: 600 0.95rem/1.5 var(--mono); letter-spacing: 0.04em; text-transform: uppercase; }
.waves p { margin: 0; color: var(--soft); font-size: 0.94em; }
.waves strong { display: block; }
.handoff { margin: 2px 0 2px 16px; color: var(--brass); font: 500 0.95rem/1.4 var(--mono); }
.advanced { margin-top: 18px; border: 1px dashed var(--line-2); border-radius: 12px; }
.advanced > summary {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  min-height: 52px; padding: 10px 18px;
  color: var(--cream); font: 600 1rem/1.3 var(--sans); cursor: pointer; list-style: none;
}
.advanced > summary::-webkit-details-marker { display: none; }
.advanced > summary::before { content: "+"; display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid var(--brass); border-radius: 50%; color: var(--brass); font-family: var(--mono); }
.advanced[open] > summary::before { content: "−"; }
.advanced > summary .step-no { margin: 0; }
.advanced-body { padding: 0 18px 18px; }
.controls-grid { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.controls-grid li { padding: 14px 16px; background: var(--card); border: 1px solid var(--line); border-radius: 10px; }
.controls-grid b { display: block; margin-bottom: 4px; color: var(--cream); }
.controls-grid span { color: var(--soft); font-size: 0.92em; line-height: 1.5; display: block; }
.gate { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; margin-top: 18px; padding: 14px 18px; border-radius: 12px; background: rgba(143, 184, 168, 0.08); border: 1px solid rgba(143, 184, 168, 0.35); }
.gate p { margin: 0; }

/* Contrast table: what it is / is not */
.not-list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.not-list li { padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius); }
.not-list li.is { border-color: rgba(226, 180, 90, 0.5); background: rgba(226, 180, 90, 0.06); }
.not-list b { display: block; margin-bottom: 4px; color: var(--cream); }
.not-list span { color: var(--soft); font-size: 0.94em; }

/* Flow and stages */
.flow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 16px; padding: 0; list-style: none; }
.flow li { display: flex; align-items: center; gap: 10px; padding: 6px 16px 6px 6px; background: var(--card); border: 1px solid var(--line); border-radius: 999px; font-weight: 600; }
.flow li span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--brass); color: var(--brass); font: 700 0.85rem/1 var(--mono); }
.stages { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); }
.stages li { padding: 16px; border-top: 2px solid var(--brass); background: var(--card); border-radius: 0 0 10px 10px; }
.stages h3 { margin-bottom: 6px; }
.stages p { margin: 0; color: var(--soft); font-size: 0.93em; }

/* Timeline */
.timeline { margin: 0; padding: 0; list-style: none; }
.timeline li { position: relative; display: grid; gap: 4px 20px; padding: 0 0 26px 34px; }
@media (min-width: 760px) { .timeline li { grid-template-columns: 120px 1fr; } }
.timeline li::before { content: ""; position: absolute; left: 7px; top: 12px; bottom: -4px; width: 2px; background: var(--line-2); }
.timeline li:last-child::before { display: none; }
.timeline li::after { content: ""; position: absolute; left: 3px; top: 7px; width: 10px; height: 10px; border: 2px solid var(--brass); background: var(--bg); transform: rotate(45deg); }
.timeline li.is-amber::after { border-color: var(--amber); background: var(--amber); }
.timeline time, .timeline .t { color: var(--soft); font: 500 0.95rem/1.6 var(--mono); }
.timeline h3 { margin-bottom: 4px; }
.timeline p { margin: 0; color: var(--soft); }

/* Cases (Work) */
.cases { display: grid; gap: clamp(28px, 4vw, 48px); }
.case { display: grid; gap: 20px 40px; align-items: center; padding-top: 28px; border-top: 1px solid var(--line); }
.case h3 { font-size: clamp(1.3rem, 2vw, 1.7rem); font-weight: 500; }
@media (min-width: 900px) {
  .case { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  .case:nth-child(even) > figure { order: 2; }
}
.verified { padding-left: 14px; border-left: 3px solid var(--verdigris); color: var(--soft); }
.verified b { margin-right: 6px; color: var(--verdigris); font: 600 1rem/1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; }
.verified.limit { border-left-color: var(--amber); }
.verified.limit b { color: var(--amber); }
.index { display: flex; flex-wrap: wrap; gap: 4px 20px; margin: 22px 0 0; padding: 0; list-style: none; }
.index a { display: inline-flex; align-items: center; min-height: 44px; color: var(--soft); font: 500 0.95rem/1.3 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; }
.index a:hover { color: var(--lantern); }

/* Labs */
.state-group { padding-top: 28px; border-top: 2px solid var(--brass-dim); scroll-margin-top: 24px; }
.state-group + .state-group { margin-top: 44px; }
.state-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-bottom: 16px; }
.state-head h3 { margin: 0; }
.state-head h3.status { padding: 8px 18px; font-size: clamp(1.18rem, 1.5vw, 1.35rem); font-weight: 600; letter-spacing: 0.06em; }
.state-head h3.status::before { width: 11px; height: 11px; }
.state-head p { margin: 0; color: var(--soft); font-size: 0.92em; }
.exp { display: grid; gap: 6px 24px; padding: 18px 0; }
.exp + .exp { border-top: 1px dashed var(--line); }
@media (min-width: 800px) { .exp { grid-template-columns: 220px minmax(0, 1fr); } .exp > .exp-name { grid-row: 1 / span 3; } }
.exp-name { color: var(--cream); font: 600 1rem/1.4 var(--sans); }
.exp-name small { display: block; margin-top: 4px; color: var(--soft); font: 500 0.95rem/1.4 var(--mono); letter-spacing: 0.03em; }
.exp h4 { margin: 0 0 4px; color: var(--cream); font: 500 1.2rem/1.3 var(--display); }
.exp p { margin: 0 0 8px; color: var(--soft); }
.exp .links { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.legend-states { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.legend-states li { display: flex; }
.legend-states a { display: inline-flex; min-height: 44px; align-items: center; text-decoration: none; }
.legend-states .status { margin: 0; }
.method { margin: 0; padding: 0; list-style: none; counter-reset: m; display: grid; gap: 0; }
.method li { position: relative; counter-increment: m; padding: 14px 14px 14px 56px; border-top: 1px solid var(--line); }
.method li::before { content: counter(m); position: absolute; left: 12px; top: 12px; display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--brass); border-radius: 50%; color: var(--brass); font: 700 0.85rem/1 var(--mono); }
.pull {
  margin: 0; max-width: 32ch; padding-left: 22px;
  border-left: 2px solid var(--brass);
  color: var(--cream); font: 400 clamp(1.4rem, 2.4vw, 2rem)/1.3 var(--display);
}
.pull cite, blockquote cite { display: block; margin-top: 12px; color: var(--soft); font: 500 0.95rem/1.4 var(--mono); font-style: normal; letter-spacing: 0.06em; text-transform: uppercase; }

/* Crew */
.member { display: grid; gap: 20px; padding: 26px 0; border-top: 1px solid var(--line); }
@media (min-width: 760px) { .member { grid-template-columns: 240px minmax(0, 1fr); } }
@media (min-width: 1000px) { .member { grid-template-columns: 320px minmax(0, 1fr); gap: 20px 36px; } }
.member:first-child { border-top: 0; padding-top: 0; }
.member img { width: 100%; max-width: 320px; aspect-ratio: 1; object-fit: cover; border-radius: 12px; border: 1px solid var(--brass); }
.member img.tally-art { aspect-ratio: 3 / 2; object-fit: contain; }
.member h3 { font-size: clamp(1.4rem, 2vw, 1.75rem); font-weight: 500; }
.member .role { margin-bottom: 10px; color: var(--lantern); font-weight: 600; }
.receipt { padding-left: 14px; border-left: 3px solid var(--verdigris); color: var(--soft); }
.receipt b { margin-right: 6px; color: var(--verdigris); font: 600 1rem/1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; }
.member img.steve-art { object-position: 50% 30%; }
.ledger { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.ledger li { padding: 16px 18px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); color: var(--soft); }
.ledger strong { display: block; color: var(--cream); font-size: 1.05rem; }
.ledger .role { display: block; margin-bottom: 6px; color: var(--brass); font-size: 0.9em; }
.crew-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0 0 14px; }
.crew-strip img { aspect-ratio: 1; object-fit: cover; border-radius: 8px; border: 1px solid rgba(201, 161, 92, 0.45); }

/* Paths onward */
.paths { display: grid; gap: 28px 24px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.path {
  display: block; min-height: 44px; padding: 16px 0 0;
  color: var(--text); text-decoration: none;
  border-top: 2px solid var(--brass);
}
.path > span { color: var(--brass); font: 600 0.95rem/1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; }
.path h3 { margin: 6px 0; }
.path p { margin: 0; color: var(--soft); font-size: 0.94em; }
.path:hover h3, .path:focus-visible h3 { color: var(--lantern); }
.path:hover { color: var(--text); }

/* Home neighborhood teaser (warm) */
.porch-panel {
  display: grid; gap: 24px; align-items: center;
  padding: clamp(20px, 3vw, 36px);
  background: radial-gradient(600px 300px at 20% 100%, rgba(226, 180, 90, 0.16), transparent 70%), linear-gradient(180deg, var(--wall), #121a18);
  border: 1px solid #2d3c37; border-radius: 22px;
  border-bottom: 6px solid var(--copper);
}
@media (min-width: 900px) { .porch-panel { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } }
.porch-panel .window-art img { border-radius: 120px 120px 10px 10px; border: 8px solid #2a1e14; aspect-ratio: 4 / 3; object-fit: cover; }
.porch-link {
  display: inline-flex; align-items: center; gap: 12px;
  min-height: 48px; color: var(--lantern); font-weight: 600; text-decoration: none;
}
.porch-link:hover { color: var(--cream); text-decoration: underline; }
.lantern-dot { width: 14px; height: 18px; flex: none; border-radius: 4px 4px 8px 8px; background: var(--lantern); box-shadow: 0 0 16px 4px rgba(226, 180, 90, 0.45); }

/* ---------- Neighborhood: the Long Table room ---------- */
.room-wrap { padding: clamp(16px, 3vw, 32px) var(--gutter) 0; max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; perspective: 1200px; }
.room {
  position: relative; min-height: 560px; overflow: hidden;
  border-radius: 26px;
  background: linear-gradient(var(--wall) 0, var(--wall) 64%, var(--floor) 64%, #2a1e14 100%);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
  transform: rotateX(calc(var(--ty, 0) * 1deg)) rotateY(calc(var(--tx, 0) * 1deg));
  transform-style: preserve-3d;
}
.motion-ok .room { transition: transform 0.14s linear; }
.room::before { content: ""; position: absolute; inset: 0; background: radial-gradient(640px 320px at 70% 78%, rgba(240, 192, 96, 0.22), transparent 70%); }
.room .window { position: absolute; right: 7%; top: 9%; width: min(36%, 380px); margin: 0; transform: translateZ(10px); }
.room .window img { width: 100%; aspect-ratio: 1.05; object-fit: cover; border: 10px solid #2a1e14; border-radius: 160px 160px 8px 8px; }
.room .sign {
  position: absolute; left: clamp(20px, 4vw, 52px); top: 11%;
  max-width: min(56%, 640px); padding: 22px 26px;
  background: var(--paper); color: var(--paper-ink);
  border-radius: 16px; border-bottom: 6px solid var(--copper);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
  transform: translateZ(80px);
}
.room .sign h1 { color: #1f1913; font-size: clamp(1.9rem, 3.6vw, 3rem); max-width: 18ch; }
.room .sign p { color: #3a3129; margin: 0; }
.room .sign .kicker { color: #7a4d22; }
.room .table { position: absolute; left: 8%; right: 8%; bottom: 13%; height: 26px; border-radius: 8px; background: linear-gradient(#5a3f28, #3a2a1c); box-shadow: 0 30px 30px rgba(0, 0, 0, 0.4); transform: translateZ(40px); }
.room .lamp { position: absolute; left: 64%; bottom: 17%; width: 16px; height: 64px; background: #2b241e; transform: translateZ(60px); }
.room .lamp::after { content: ""; position: absolute; left: -17px; top: -30px; width: 50px; height: 34px; border-radius: 8px 8px 20px 20px; background: var(--lantern); box-shadow: 0 0 60px 22px rgba(240, 192, 96, 0.35); }
.room .plaque { position: absolute; right: clamp(20px, 4vw, 52px); bottom: 5%; margin: 0; padding: 8px 12px; border-radius: 10px; background: rgba(14, 20, 22, 0.72); transform: translateZ(60px); }
@media (max-width: 899px) {
  .room { min-height: 0; padding: 16px; transform: none !important; }
  .room .sign { position: static; max-width: none; margin: 0 0 14px; transform: none; }
  .room .window { position: static; width: 100%; max-width: 320px; margin: 0 auto; transform: none; }
  .room .table, .room .lamp { display: none; }
  .room .plaque { position: static; display: inline-block; margin-top: 12px; transform: none; }
}
.journey { display: grid; gap: 20px; margin: 0; padding: 0; list-style: none; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
.journey li { display: grid; grid-template-rows: auto 1fr; overflow: hidden; background: var(--card); border: 1px solid var(--line); border-radius: 16px; border-bottom: 5px solid var(--copper); }
.journey img { width: 100%; aspect-ratio: 390 / 520; object-fit: cover; object-position: top; background: #0b0a0a; }
.journey .j-body { padding: 14px 16px 16px; }
.journey .j-body h3 { font-size: 1.1rem; margin-bottom: 4px; }
.journey .j-body p { margin: 0 0 6px; color: var(--soft); font-size: 0.92em; }
.journey .kicker { margin-bottom: 4px; }
.journey .text-link { min-height: 44px; }
.speech { position: relative; max-width: 62ch; padding: 22px 26px; background: var(--paper); color: var(--paper-ink); border-radius: 20px; }
.speech::after { content: ""; position: absolute; left: 40px; bottom: -14px; border: 14px solid transparent; border-top-color: var(--paper); border-bottom: 0; }
.speech p { margin: 0; color: var(--paper-ink); font: 400 clamp(1.15rem, 1.8vw, 1.4rem)/1.45 var(--display); }
.speech p + p { margin-top: 10px; }
.speech cite { display: block; margin-top: 10px; color: #6a5a48; font: 500 0.95rem/1.4 var(--mono); font-style: normal; letter-spacing: 0.06em; text-transform: uppercase; }
.warm-cards .card { background: #182320; border-color: #2d3c37; border-radius: 20px; border-bottom: 5px solid var(--copper); }

/* ---------- About ---------- */
.claims { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.claims li { display: grid; gap: 4px 18px; padding: 14px 0; border-top: 1px solid var(--line); }
@media (min-width: 700px) { .claims li { grid-template-columns: 150px 1fr; } }
.claims p { margin: 0; color: var(--soft); }
.claims .status { justify-self: start; align-self: start; }

/* ---------- Footer ---------- */
.site-footer { margin-top: var(--section); padding: 36px 0 48px; border-top: 1px solid var(--line); background: var(--bg-deep); color: var(--soft); }
.footer-grid { display: grid; gap: 18px 40px; }
@media (min-width: 900px) { .footer-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); } }
.footer-grid p { margin: 0; }
.site-footer nav ul { display: flex; flex-wrap: wrap; gap: 0 18px; margin: 0; padding: 0; list-style: none; }
.site-footer nav a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; color: var(--soft); text-decoration: none; }
.site-footer nav a:hover { color: var(--lantern); text-decoration: underline; }

/* ---------- Field report (Agent Diaries, preserved) ---------- */
.editor-note { max-width: 1180px; margin: 0 auto; padding: clamp(24px, 4vw, 40px) var(--gutter) 0; }
.editor-note p { max-width: 70ch; margin: 0; padding: 14px 18px; border: 1px solid rgba(224, 154, 76, 0.5); border-left-width: 4px; border-radius: 8px; background: rgba(224, 154, 76, 0.07); color: var(--soft); font-size: 0.94em; }
.article-hero { max-width: 1180px; margin: 0 auto; padding: clamp(40px, 7vw, 88px) var(--gutter) 24px; }
.article-series { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-bottom: 18px; color: var(--brass); font: 500 0.95rem/1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; }
.article-hero h1 { font-size: clamp(2.2rem, 5vw, 3.8rem); }
.article-hero h1 span { color: var(--lantern); }
.article-deck { font-size: 1.14em; color: var(--soft); }
.article-byline { display: flex; align-items: center; gap: 14px; margin-top: 22px; }
.article-byline p { margin: 0; color: var(--soft); font-size: 0.92em; }
.byline-mark { display: grid; place-items: center; width: 52px; height: 52px; flex: none; border: 1px solid var(--brass); border-radius: 50%; color: var(--brass); font: 600 0.95rem/1 var(--mono); }
.article-body { display: grid; gap: 32px; max-width: 1180px; margin: 0 auto; padding: 24px var(--gutter) 0; }
@media (min-width: 1000px) { .article-body { grid-template-columns: 220px minmax(0, 1fr); } .article-toc { position: sticky; top: 24px; align-self: start; } }
.article-body > * { min-width: 0; }
.article-toc { display: grid; gap: 0; }
.article-toc p { margin: 0 0 8px; color: var(--brass); font: 500 0.95rem/1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; }
.article-toc a { display: flex; align-items: center; min-height: 44px; color: var(--soft); text-decoration: none; border-top: 1px solid var(--line); font-size: 0.92em; }
.article-toc a:hover { color: var(--lantern); }
.article-prose { max-width: 70ch; }
.article-prose section { margin-bottom: 2.2em; }
.article-prose h2 { margin-top: 1.2em; }
.article-prose h3 { margin-top: 1.4em; }
.article-prose .lede { color: var(--cream); font-size: 1.18em; }
.article-prose hr { border: 0; height: 1px; margin: 2.4em 0; background: linear-gradient(90deg, var(--brass), transparent); }
.article-prose ul, .article-prose ol { margin: 0 0 1.2em; }
.article-prose li { margin-bottom: 0.4em; }
.article-prose blockquote { margin: 1.4em 0; padding-left: 20px; border-left: 2px solid var(--brass); color: var(--cream); font: 400 1.3rem/1.45 var(--display); }
.article-prose pre { overflow-x: auto; margin: 0 0 1.2em; padding: 16px 18px; background: var(--bg-deep); border: 1px solid var(--line); border-radius: 10px; color: var(--text); font: 0.95rem/1.55 var(--mono); }
.speaker-label { color: var(--brass); font: 500 0.95rem/1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; }
.pull-stat { margin: 1.4em 0; padding: 18px 22px; background: var(--card); border-left: 3px solid var(--lantern); border-radius: 0 10px 10px 0; }
.pull-stat strong { font: 500 1.25rem/1.4 var(--display); }
.rule-stack { display: grid; gap: 8px; margin: 0 0 1.2em; }
.rule-stack span { padding: 10px 14px; background: var(--card); border: 1px solid var(--line); border-radius: 8px; }
.event-chain { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-family: var(--mono); font-size: 0.86em; }
.event-chain span { padding: 6px 10px; border: 1px solid var(--brass); border-radius: 8px; color: var(--cream); }
.event-chain i { color: var(--brass); font-style: normal; }
.evidence-grid { display: grid; gap: 12px; margin: 0 0 1.2em; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.evidence-grid div { padding-top: 10px; border-top: 2px solid var(--brass); }
.evidence-grid strong { display: block; font: 500 2.2rem/1.1 var(--display); }
.evidence-grid span { color: var(--soft); font-size: 0.9em; }
.evidence-grid .negative { border-top-color: var(--amber); }
.evidence-grid .negative strong { color: var(--amber); }
.question-list { padding-left: 1.4em; }
.closing-question { color: var(--lantern); font: 500 1.4rem/1.4 var(--display); }
.signature { color: var(--soft); font-style: italic; }
.evidence-note { margin-top: 2em; padding: 18px 20px; border: 1px solid rgba(201, 161, 92, 0.35); border-radius: 10px; background: rgba(201, 161, 92, 0.06); color: var(--soft); font-size: 0.94em; }
.article-next { max-width: 1180px; margin: 0 auto; padding: var(--section) var(--gutter) 0; }
.article-next > div { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- 404 ---------- */
.not-found { display: grid; place-items: center; min-height: 70vh; padding: 48px var(--gutter); text-align: left; }
.not-found h1 span { color: var(--lantern); }

/* ---------- WarmStart evidence ladder ---------- */
.ladder { display: grid; gap: 0; margin: 0 0 8px; padding: 0; list-style: none; }
.rung { display: grid; gap: 6px 18px; padding: 14px 0 14px 18px; border-left: 2px solid var(--brass); }
.rung.open { border-left: 2px dashed var(--line-2); }
.rung h3 { margin: 0 0 4px; }
.rung p { margin: 0; color: var(--soft); }
.rung .status { justify-self: start; margin: 0; }
@media (min-width: 760px) { .rung { grid-template-columns: 170px minmax(0, 1fr); } }
.gh-slot { min-height: 120px; border-color: rgba(201, 161, 92, 0.55); }

/* ---------- Evidence matrix (Labs) ---------- */
.matrix-wrap { margin-top: 16px; overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; }
.matrix { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 0.9em; }
.matrix caption { padding: 12px 14px; text-align: left; color: var(--brass); font: 500 0.85rem/1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; }
.matrix th, .matrix td { padding: 10px 14px; border-top: 1px solid var(--line); text-align: left; vertical-align: top; }
.matrix thead th { color: var(--soft); font: 500 0.8rem/1.3 var(--mono); text-transform: uppercase; letter-spacing: 0.08em; }
.matrix tbody th { color: var(--cream); font-weight: 600; }
.matrix td { color: var(--soft); }
.matrix .status { display: flex; width: fit-content; margin-bottom: 6px; font-size: 0.78rem; }
.matrix .wanted { background: rgba(201, 161, 92, 0.05); }

/* ---------- The Composer reel (home) ----------
   Seven states, one picture. Without script every layer is lit and every caption is readable;
   script only dims what has not happened yet and highlights the current state. */
.reel-section { padding: var(--section) 0 0; }
.reel-head { display: grid; gap: 8px 40px; align-items: end; margin-bottom: 26px; padding-top: 22px; border-top: 1px solid var(--line); }
@media (min-width: 1000px) { .reel-head { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); } }
.reel-head .lede { margin: 0; }
.reel { display: grid; gap: 22px 36px; margin: 0 0 12px; }
@media (min-width: 1000px) {
  .reel { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); grid-template-rows: auto 1fr auto; align-items: start; }
  .reel-stage { grid-column: 1; grid-row: 1 / span 2; position: sticky; top: 24px; align-self: start; }
  .reel-controls { grid-column: 2; grid-row: 1; margin: 0; }
  .reel-steps { grid-column: 2; grid-row: 2; }
  .reel-note { grid-row: 3; }
}
.reel-stage {
  position: relative;
  display: grid; gap: 14px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  padding: clamp(16px, 2.4vw, 28px);
  background:
    radial-gradient(520px 260px at 50% 40%, rgba(226, 180, 90, 0.14), transparent 70%),
    linear-gradient(180deg, #1c1816, #141112);
  border: 1px solid rgba(201, 161, 92, 0.35); border-radius: 16px;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(242, 234, 219, 0.06);
  transform-style: preserve-3d;
  transform: rotateX(calc(var(--ty, 0) * 1deg)) rotateY(calc(var(--tx, 0) * 1deg));
}
.reel-stage::before { /* the table's brass edge */
  content: ""; position: absolute; inset: 8px; border: 1px dashed rgba(201, 161, 92, 0.18); border-radius: 12px; pointer-events: none;
}
.reel-lanes, .reel-return { grid-column: 1 / -1; }
@media (min-width: 700px) {
  .reel-stage { grid-template-columns: minmax(0, 0.85fr) minmax(0, 0.85fr) minmax(0, 1.9fr) minmax(0, 1fr); gap: 22px; }
  .reel-lanes, .reel-return { grid-column: auto; }
  .reel-col:not(:last-child)::after { /* beams between rooms */
    content: ""; position: absolute; top: 50%; right: -20px; width: 18px; height: 2px;
    background: linear-gradient(90deg, rgba(201, 161, 92, 0.2), var(--lantern) 50%, rgba(201, 161, 92, 0.2));
    background-size: 200% 100%;
  }
}
@media (min-width: 1000px) { .reel { perspective: 1600px; } }
.reel-col { position: relative; display: grid; align-content: start; gap: 10px; min-width: 0; transform: translateZ(18px); }
.reel-label { margin: 0; color: var(--brass); font: 500 0.8rem/1.3 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; }
.brief-card {
  display: grid; gap: 6px; padding: 14px 14px 16px;
  background: var(--paper); color: var(--paper-ink); border-radius: 6px;
  box-shadow: 0 10px 18px -8px rgba(0, 0, 0, 0.7);
  font: 500 0.85rem/1.3 var(--mono);
}
.brief-card b { font: 600 1.05rem/1.2 var(--display); }
.brief-card span { padding-top: 5px; border-top: 1px solid rgba(42, 35, 28, 0.2); }
.hub-ring {
  position: relative; display: grid; place-items: center;
  width: min(100%, 124px); aspect-ratio: 1; margin: 0 auto;
  border: 2px solid var(--brass); border-radius: 50%;
  box-shadow: 0 0 0 7px rgba(201, 161, 92, 0.08), 0 0 28px rgba(226, 180, 90, 0.25);
  color: var(--cream); font: 600 0.82rem/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase;
}
.hub-ring::before { content: ""; position: absolute; inset: 10px; border: 1px dashed rgba(226, 180, 90, 0.6); border-radius: 50%; }
.hub-presets, .slips { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.hub-presets li, .slips li {
  padding: 5px 9px; border: 1px solid var(--line-2); border-radius: 999px;
  color: var(--soft); font: 500 0.8rem/1.25 var(--mono); text-align: center;
}
.hub-presets .is-picked { border-color: var(--lantern); color: #17120a; background: var(--lantern); font-weight: 700; }
.wave-row { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr); gap: 8px; align-items: center; padding: 8px; border: 1px solid var(--line-2); border-radius: 10px; background: rgba(13, 11, 12, 0.5); }
.wave-row + .wave-row { margin-top: 2px; }
.wave-tag { writing-mode: vertical-rl; transform: rotate(180deg); color: var(--brass); font: 500 0.72rem/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; }
.seat { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 8px; align-items: center; min-width: 0; }
.seat img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; border: 2px solid var(--brass-dim); }
.seat span { min-width: 0; color: var(--soft); font: 500 0.74rem/1.3 var(--mono); overflow-wrap: anywhere; }
.seat b { display: block; color: var(--cream); font: 600 0.8rem/1.2 var(--sans); overflow-wrap: normal; word-break: keep-all; white-space: nowrap; }
.slips .ok { border-color: rgba(143, 184, 168, 0.55); color: var(--verdigris); }
.slips .amber { border-color: rgba(224, 154, 76, 0.6); color: var(--amber); border-style: dashed; }
.gate-key {
  display: grid; justify-items: center; gap: 4px; margin-top: 6px; padding: 12px 8px;
  border: 1px solid var(--lantern); border-radius: 12px; background: rgba(226, 180, 90, 0.08); text-align: center;
}
.gate-key b { color: var(--cream); font: 600 0.95rem/1.2 var(--sans); }
.gate-key small { color: var(--soft); font: 500 0.74rem/1.3 var(--mono); }
.key-mark { width: 16px; height: 16px; border: 2px solid var(--lantern); border-radius: 3px; transform: rotate(45deg); box-shadow: 0 0 14px rgba(226, 180, 90, 0.5); }
@media (max-width: 699px) {
  .reel-return { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: 10px; }
  .reel-return .reel-label { grid-column: 1 / -1; }
  .gate-key { margin-top: 0; }
}

.reel-steps { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; counter-reset: reel; }
.reel-steps li {
  position: relative; counter-increment: reel;
  padding: 10px 12px 10px 46px; border-left: 2px solid var(--line-2);
  color: var(--text); font-size: 0.95em; line-height: 1.5;
}
.reel-steps li::before {
  content: counter(reel); position: absolute; left: 12px; top: 11px;
  display: grid; place-items: center; width: 24px; height: 24px;
  border: 1px solid var(--brass); border-radius: 50%; color: var(--brass); font: 600 0.8rem/1 var(--mono);
}
.reel-steps b { color: var(--cream); }
.reel-note { grid-column: 1 / -1; margin: 0; }
.reel-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; }
.reel-controls button {
  min-height: 44px; min-width: 44px; padding: 0 14px;
  background: transparent; color: var(--cream);
  border: 1px solid var(--line-2); border-radius: 999px;
  font: 600 0.9rem/1 var(--sans); cursor: pointer;
}
.reel-controls button:hover { border-color: var(--brass); color: var(--lantern); }
.reel-controls .reel-play { border-color: var(--brass); }
.reel-count { margin-left: 4px; color: var(--soft); font: 500 0.9rem/1 var(--mono); }

/* With script: what has not happened yet rests in shadow; the current state is lit. */
.js .reel [data-on] { opacity: 0.3; filter: saturate(0.3); }
.js .reel [data-on].is-lit { opacity: 1; filter: none; }
.js .reel .is-focus .hub-ring,
.js .reel .brief-card.is-focus,
.js .reel .is-focus.gate-key { box-shadow: 0 0 0 3px rgba(226, 180, 90, 0.35), 0 0 36px rgba(226, 180, 90, 0.45); }
.js .reel-steps li { color: var(--soft); cursor: pointer; }
.js .reel-steps li b { color: var(--text); }
.js .reel-steps li[aria-current="step"] { color: var(--text); border-left-color: var(--lantern); background: linear-gradient(90deg, rgba(226, 180, 90, 0.1), transparent 80%); }
.js .reel-steps li[aria-current="step"] b { color: var(--cream); }
.js .reel-steps li[aria-current="step"]::before { background: var(--lantern); border-color: var(--lantern); color: #17120a; }
.js .reel-steps li.is-done::before { content: "✓"; }
.reel[data-state="4"] .reel-lanes .wave-row,
.reel[data-state="5"] .reel-lanes .wave-row,
.reel[data-state="6"] .reel-lanes .wave-row,
.reel[data-state="7"] .reel-lanes .wave-row { border-color: rgba(201, 161, 92, 0.55); }
.reel[data-state="5"] [data-wave="1"] .seat img,
.reel[data-state="5"] [data-wave="2"] .seat img { border-color: var(--lantern); box-shadow: 0 0 16px rgba(226, 180, 90, 0.55); }

/* Motion layer: gated, gentle, and never needed to read anything. */
.motion-ok .reel-stage { transition: transform 0.2s linear; }
.motion-ok .reel [data-on] { transition: opacity 0.7s ease, filter 0.7s ease, transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1); }
.motion-ok .reel .reel-lanes .seat { transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.6s ease; }
.motion-ok .reel-steps li { transition: background-color 0.4s ease, border-color 0.4s ease, color 0.4s ease; }
.motion-ok.js .reel [data-on]:not(.is-lit) { transform: translateY(8px) scale(0.98); }
.motion-ok .reel[data-state="2"] .hub-ring::before, .motion-ok .reel[data-state="3"] .hub-ring::before { animation: spin 9s linear infinite; }
.motion-ok .reel[data-state="1"] .brief-card { animation: arrive 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) both; }
.motion-ok .reel[data-state="3"] .seat { animation: seat-in 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) both; }
.motion-ok .reel[data-state="3"] .seat:nth-child(3) { animation-delay: 0.15s; }
.motion-ok .reel[data-state="3"] [data-wave="2"] .seat:nth-child(2) { animation-delay: 0.3s; }
.motion-ok .reel[data-state="3"] [data-wave="2"] .seat:nth-child(3) { animation-delay: 0.45s; }
.motion-ok .reel[data-state="5"] [data-wave="1"] .seat img { animation: work 1.6s ease-in-out infinite alternate; }
.motion-ok .reel[data-state="5"] [data-wave="2"] .seat img { animation: work 1.6s ease-in-out 1.6s infinite alternate backwards; }
.motion-ok .reel[data-state="6"] .slips li { animation: slip 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) both; }
.motion-ok .reel[data-state="6"] .slips li:nth-child(2) { animation-delay: 0.2s; }
.motion-ok .reel[data-state="6"] .slips li:nth-child(3) { animation-delay: 0.4s; }
.motion-ok .reel .reel-col.is-flow::after { animation: beam 1.8s linear infinite; }
@keyframes arrive { from { transform: translateX(-24px) rotate(-3deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes seat-in { from { transform: translateZ(0) translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes work { from { box-shadow: 0 0 6px rgba(226, 180, 90, 0.2); } to { box-shadow: 0 0 20px rgba(226, 180, 90, 0.7); } }
@keyframes slip { from { transform: translateX(-16px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes beam { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* ---------- The path through the Circuit (every primary page) ---------- */
.circuit-path { max-width: var(--max); margin: var(--section) auto 0; padding: 0 var(--gutter); }
.circuit-path > p { margin: 0 0 12px; color: var(--brass); font: 500 0.9rem/1.4 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; }
.circuit-path ol { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); border-top: 1px solid var(--line); }
.circuit-path li { position: relative; }
.circuit-path a {
  display: grid; gap: 2px; min-height: 64px; padding: 14px 14px 14px 0;
  color: var(--text); text-decoration: none;
}
.circuit-path a::before { content: ""; width: 9px; height: 9px; margin-bottom: 6px; border: 1px solid var(--brass); transform: rotate(45deg); }
.circuit-path a b { color: var(--cream); font: 600 1rem/1.3 var(--sans); }
.circuit-path a span { color: var(--soft); font-size: 0.86em; line-height: 1.4; }
.circuit-path a:hover b { color: var(--lantern); }
.circuit-path a[aria-current="page"]::before { background: var(--lantern); border-color: var(--lantern); box-shadow: 0 0 12px rgba(226, 180, 90, 0.6); }
.circuit-path a[aria-current="page"] b { color: var(--lantern); }
.circuit-path .quiet a b { font-family: var(--display); font-style: italic; font-weight: 500; }
.circuit-next { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 8px; padding-top: 16px; border-top: 1px solid var(--line); }
.circuit-next .button { gap: 12px; }
@media (max-width: 699px) { .circuit-path ol { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* Paths and cards lift a little toward the lamp. */
.motion-ok .path, .motion-ok .member img { transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.35s ease, border-color 0.35s ease; }
@media (hover: hover) {
  .path:hover { border-color: rgba(201, 161, 92, 0.6); box-shadow: 0 18px 30px -18px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(201, 161, 92, 0.2); transform: translateY(-3px); }
}

/* ---------- Motion (progressive enhancement only) ---------- */
.motion-ok .reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.6s ease, transform 0.6s ease; }
.motion-ok .reveal.is-visible { opacity: 1; transform: none; }
.motion-ok .doorway-art img { animation: settle 12s cubic-bezier(0.22, 0.61, 0.36, 1) both; }
@keyframes settle { from { transform: scale(1.1); } to { transform: scale(1); } }
.motion-ok .orrery .rings { transform-origin: 300px 300px; animation: spin 150s linear infinite; }
.motion-ok .orrery .counter { transform-origin: 300px 300px; animation: spin 150s linear infinite reverse; }
@keyframes spin { to { transform: rotate(360deg); } }
.motion-ok .lantern-dot { animation: glow 5s ease-in-out infinite alternate; }
@keyframes glow { from { box-shadow: 0 0 12px 3px rgba(226, 180, 90, 0.35); } to { box-shadow: 0 0 20px 6px rgba(226, 180, 90, 0.55); } }

/* Crew: the round-table portrait, cropped to a circle the artwork was made to survive. */
.table-portrait { margin: 0; justify-self: center; text-align: center; max-width: 340px; }
.table-portrait img { width: min(72vw, 340px); aspect-ratio: 1; border-radius: 50%; object-fit: cover; border: 2px solid var(--brass); box-shadow: 0 0 0 6px var(--bg), 0 0 0 7px var(--line-2), 0 18px 48px rgba(0, 0, 0, 0.45); }
.table-portrait figcaption { margin-top: 14px; }

/* Apartment: the Composer's five steps. Without script every step is listed; with script one is shown at a time. */
.csteps { margin: 0; display: block; padding: 0; }
.csteps-steps { display: grid; gap: 14px; margin: 16px 0 12px; padding: 0; list-style: none; }
.csteps-step { display: grid; gap: 14px; padding: 16px; border-top: 2px solid var(--brass); background: var(--card); border-radius: 0 0 10px 10px; }
@media (min-width: 900px) { .csteps-step { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; padding: 22px; } }
.csteps-text h4 { margin: 0 0 6px; font-size: 1.15rem; font-weight: 600; }
.csteps-text p:last-child { margin: 0; color: var(--soft); }
.csteps-shot { aspect-ratio: 16 / 10; overflow: hidden; border: 1px solid var(--line-2); border-radius: 8px; background: var(--bg-deep); }
.csteps-shot img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; display: block; }
.csteps-drawn { display: grid; align-content: center; justify-items: center; gap: 8px; padding: 16px; font: 600 0.9rem/1.3 var(--mono); color: var(--soft); }
.csteps-drawn span { padding: 8px 14px; border: 1px dashed var(--line-2); border-radius: 6px; min-width: 60%; text-align: center; }
.csteps-drawn b { color: var(--cream); }
.csteps-start .csteps-key { border: 2px solid var(--lantern); color: var(--lantern); border-style: solid; }
.csteps-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; }
.csteps-nav button { min-width: 44px; min-height: 44px; padding: 0 10px; border: 1px solid var(--line-2); border-radius: 22px; background: var(--card-2); color: var(--text); font: 600 0.9rem/1 var(--sans); cursor: pointer; }
.csteps-nav button[aria-current="step"] { border-color: var(--lantern); color: var(--bg); background: var(--lantern); }
.csteps-nav button:disabled { opacity: 0.45; cursor: default; }
.csteps-nav button:focus-visible { outline: 2px solid var(--lantern); outline-offset: 2px; }
.csteps-progress { flex: 1 1 100%; height: 3px; background: var(--line); border-radius: 2px; overflow: hidden; }
.csteps-progress i { display: block; height: 100%; width: calc(var(--p, 0.2) * 100%); background: var(--brass); }
.csteps.is-enhanced .csteps-step:not(.is-on) { display: none; }
.motion-ok .csteps-progress i { transition: width 0.45s cubic-bezier(0.22, 0.61, 0.36, 1); }
.motion-ok .csteps.is-enhanced .csteps-step.is-on { animation: csteps-in 0.45s cubic-bezier(0.22, 0.61, 0.36, 1) both; }
@keyframes csteps-in { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: none; } }


/* ---------- Tools: what the crew built (added 2026-09-30) ---------- */
.site-nav a[aria-current="true"] { color: var(--lantern); border-bottom-color: var(--lantern); }
.footer-grid a[aria-current="page"] { color: var(--lantern); }
.watch-link { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; color: #d9cfbd; text-decoration: none; font: 500 0.95rem/1.35 var(--mono); }
.watch-link:hover { color: var(--lantern); }
.watch-link .watch-door { width: 20px; height: 26px; }
.doorway .actions .watch-link { flex: 0 0 100%; width: fit-content; max-width: 100%; }
.tools-block { padding: var(--section) 0 0; }
.tools-head { display: grid; gap: 18px clamp(24px, 4vw, 56px); padding-top: 22px; border-top: 1px solid var(--line); }
@media (min-width: 1000px) { .tools-head { grid-template-columns: minmax(0, 2fr) minmax(0, 5fr); } }
.tools-head h2 { margin: 0; }
.tools-head .lede { margin: 0 0 16px; }
.tool-legend { display: flex; flex-wrap: wrap; gap: 8px 10px; margin: 0; padding: 0; list-style: none; }
.tool-chip { display: inline-flex; align-items: center; gap: 8px; padding: 3px 12px; border: 1px solid var(--line-2); border-radius: 999px; color: var(--cream); font: 600 1rem/1.4 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; }
.tool-chip::before { content: ""; flex: none; box-sizing: border-box; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.tool-chip.is-public { color: var(--verdigris); border-color: rgba(143, 184, 168, 0.5); }
.tool-chip.is-local { color: var(--slate); border-color: rgba(180, 193, 212, 0.5); }
.tool-chip.is-proto::before { background: transparent; border: 1.5px solid currentColor; }
.tool-chip.is-lab { color: var(--soft); border-style: dashed; border-color: var(--soft); }
.tool-chip.is-lab::before { background: transparent; border: 1.5px dashed currentColor; }
/* Run record timeline */
.run-timeline { margin: 28px 0; padding: 22px 22px 18px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
.run-timeline figcaption { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.run-timeline figcaption .kicker { margin: 0; }
.run-sum { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; color: var(--soft); font: 500 0.9rem/1.4 var(--mono); font-variant-numeric: tabular-nums; }
.run-sum strong { color: var(--cream); font: 500 1.5rem/1.1 var(--display); }
.run-sum .run-state { color: var(--amber); }
.run-waves { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.wave { display: grid; grid-template-columns: minmax(0, 14rem) minmax(0, 1fr) 9.5rem; align-items: center; gap: 8px 18px; }
.wave-label { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wave-label b { color: var(--cream); font-weight: 600; font-size: 0.95rem; }
.wave-label span { color: var(--soft); font: 0.78rem/1.4 var(--mono); }
.wave.is-ok .wave-outcome { color: var(--verdigris); }
.wave.is-failed .wave-outcome { color: var(--amber); }
.wave-track { position: relative; height: 14px; background: var(--bg-deep); border: 1px solid var(--line); border-radius: 999px; }
.wave-bar { position: absolute; top: 2px; bottom: 2px; border-radius: 999px; background: var(--verdigris); }
.wave.is-failed .wave-bar { background: repeating-linear-gradient(135deg, var(--amber) 0 6px, rgba(224, 154, 76, 0.55) 6px 12px); }
.wave-time { margin: 0; color: var(--soft); font: 0.78rem/1.5 var(--mono); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.wave-time b { color: var(--cream); font-weight: 500; }
.run-axis { display: grid; grid-template-columns: minmax(0, 14rem) minmax(0, 1fr) 9.5rem; gap: 18px; margin-top: 8px; }
.axis-ticks { position: relative; height: 1.2em; border-top: 1px solid var(--line); }
.axis-ticks span { position: absolute; top: 4px; transform: translateX(-50%); color: var(--soft); font: 0.72rem/1 var(--mono); white-space: nowrap; }
.axis-ticks span:first-child { transform: none; }
@media (max-width: 719px) {
  .run-timeline { padding: 18px 16px 14px; }
  .wave, .run-axis { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .wave-time { text-align: left; }
  .run-axis .axis-spacer { display: none; }
}
.hire-note { margin-top: 28px; padding: 18px 20px; border: 1px solid var(--line-2); border-left: 3px solid var(--lantern); border-radius: 10px; background: var(--card); }
.hire-note p { margin: 0; color: var(--soft); line-height: 1.6; }
.hire-note b { color: var(--cream); font-weight: 600; }
.hire-note a { color: var(--lantern); text-underline-offset: 3px; }
.tool-why-lede { display: flex; flex-direction: column; gap: 8px; margin: 18px 0 16px; max-width: 34ch; color: var(--cream); font: 500 clamp(1.5rem, 2.6vw, 2rem)/1.25 var(--display); text-wrap: balance; }
.tool-why-lede .kicker { margin: 0; font-size: 0.8rem; }
.tools-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 0 32px; margin-top: 28px; padding-top: 8px; border-top: 1px solid var(--line); }
.tools-foot p { flex: 1 1 280px; margin: 0; color: var(--soft); font-size: 0.9em; text-align: right; }
@media (max-width: 899px) { .tools-foot p { text-align: left; } }
.tool-hero .kicker a { color: var(--brass); }
.tool-status { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 18px 0 0; color: var(--soft); }
.tool-status span:last-child { flex: 1 1 260px; }
.tool-hero .notice p { margin: 0; }
.tool-prose { max-width: 70ch; }
.tool-prose h3 { margin-top: 1.5em; }
.tool-prose > h3:first-child { margin-top: 0; }
.tool-prose ul, .tool-prose ol { margin: 0 0 1.2em; }
.tool-prose li { margin-bottom: 0.45em; }
.tool-prose li > ul, .tool-prose li > ol { margin: 0.45em 0 0; }
.tool-prose blockquote { margin: 1.2em 0 1.4em; padding-left: 20px; border-left: 2px solid var(--brass); }
.tool-prose blockquote p { margin: 0 0 0.35em; color: var(--cream); font: 400 1.25rem/1.45 var(--display); }
.tool-prose blockquote p:last-child { margin-top: 10px; color: var(--soft); font: 500 0.95rem/1.4 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; }
.tool-prose .tool-links { display: flex; flex-wrap: wrap; gap: 0 24px; }

/* ---------- Visuals: diagrams, illustrations, screen strips ---------- */
.viz { margin: 30px 0; padding: 0; }
.viz-stage { padding: 22px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.viz figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; margin-top: 10px; color: var(--soft); font-size: 0.88rem; line-height: 1.5; }
.viz-tag { padding: 2px 8px; border: 1px solid var(--line-2); border-radius: 999px; color: var(--brass); font: 500 0.7rem/1.5 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; }
.viz code { font: 0.85em var(--mono); color: var(--cream); }
.fam-glm { --fam: var(--verdigris); }
.fam-deepseek { --fam: var(--slate); }
.fam-mimo { --fam: var(--amber); }
.fam-build { --fam: var(--lantern); }
.fam-check { --fam: var(--ember); }

/* Composer pipeline */
.pipe { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.pipe-stage { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 14px 12px; background: var(--card-2); border: 1px solid var(--line); border-radius: 10px; }
.pipe-stage:not(:last-child)::after { content: "→"; position: absolute; top: 14px; right: -12px; width: 12px; text-align: center; color: var(--brass-dim); font: 0.9rem/1.4 var(--mono); }
.pipe-head { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--cream); font: 600 1rem/1.2 var(--sans); }
.pipe-num { flex-shrink: 0; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--bg-deep); color: var(--brass); font: 500 0.75rem/1 var(--mono); }
.pipe-waves { display: flex; flex-direction: column; gap: 10px; }
.pipe-wave { display: flex; flex-direction: column; gap: 5px; }
.pipe-wave > span:last-child { color: var(--soft); font-size: 0.78rem; line-height: 1.4; }
.dots { display: flex; flex-wrap: wrap; gap: 4px; }
.dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--fam); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3); }
.pipe-out { margin: auto 0 0; padding-top: 8px; border-top: 1px dashed var(--line-2); color: var(--cream); font-size: 0.8rem; line-height: 1.4; }
.fam-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 16px 0 0; padding: 0; list-style: none; color: var(--soft); font: 0.75rem/1.4 var(--mono); }
.fam-legend li { display: flex; align-items: center; gap: 6px; }
.fam-legend .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--fam); }
@media (max-width: 899px) {
  .pipe { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .pipe-stage:not(:last-child)::after { content: "↓"; top: auto; right: auto; bottom: -19px; left: 18px; }
}
.motion-ok .viz-pipeline.is-visible .pipe-stage { animation: viz-rise 0.55s ease both, baton 10s ease-in-out infinite; animation-delay: calc(var(--i) * 0.3s), calc(1.8s + var(--i) * 2s); }
.motion-ok .viz-pipeline.is-visible .dots i { animation: dot-pop 0.35s ease both; animation-delay: calc(var(--d) * 45ms + 0.25s); }
@keyframes viz-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes dot-pop { from { opacity: 0; transform: scale(0.2); } to { opacity: 1; transform: none; } }
@keyframes baton { 0%, 22%, 100% { border-color: var(--line); box-shadow: none; } 6%, 14% { border-color: var(--lantern); box-shadow: 0 0 0 1px rgba(226, 180, 90, 0.35), 0 0 22px rgba(226, 180, 90, 0.18); } }

/* Screen strips */
.viz-shots .viz-stage { padding: 16px; }
.shot-strip { display: flex; gap: 14px; margin: 0; padding: 0 0 6px; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; }
.shot-strip li { flex: 0 0 auto; display: flex; flex-direction: column; gap: 8px; scroll-snap-align: start; }
.shot-strip img { display: block; object-fit: cover; object-position: top; border: 1px solid var(--line-2); border-radius: 8px; background: var(--paper); }
.shot-strip p { display: flex; align-items: baseline; gap: 8px; margin: 0; color: var(--cream); font-size: 0.85rem; line-height: 1.35; }
.shot-strip p span { color: var(--brass); font: 500 0.75rem/1 var(--mono); }
.viz-shots-wide .shot-strip li { width: min(78%, 420px); }
.viz-shots-wide .shot-strip img { width: 100%; height: auto; aspect-ratio: 16 / 10; }
.viz-shots-phone .shot-strip li { width: 180px; }
.viz-shots-phone .shot-strip img { width: 180px; height: 300px; }
.shot-strip p { max-width: 100%; }

/* Art */
.viz-art .viz-stage { padding: 0; background: none; border: 0; }
.viz-art img { display: block; width: 100%; height: auto; max-width: 460px; border-radius: var(--radius); border: 1px solid var(--line); }
.motion-ok .viz-art.is-visible img { animation: settle 9s cubic-bezier(0.22, 0.61, 0.36, 1) both; }

/* WarmStart handoff */
.hand { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr) minmax(0, 0.8fr); gap: 16px; align-items: stretch; }
.hand-card { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 14px; background: var(--card-2); border: 1px solid var(--line); border-radius: 10px; }
.hand-card:not(:last-child)::after { content: "→"; position: absolute; top: 50%; right: -14px; transform: translateY(-50%); color: var(--brass-dim); font: 0.95rem/1 var(--mono); }
.hand-kicker { margin: 0; color: var(--brass); font: 500 0.72rem/1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; }
.hand-title { margin: 0; color: var(--cream); font: 600 0.98rem/1.3 var(--sans); }
.hand-sub { margin: 0; color: var(--soft); font-size: 0.8rem; line-height: 1.45; }
.hand-card.is-ending { border-style: dashed; opacity: 0.85; }
.hand-card.is-new { border-color: rgba(226, 180, 90, 0.6); box-shadow: 0 0 0 1px rgba(226, 180, 90, 0.2); }
.facts { display: flex; flex-direction: column; gap: 8px; margin: 2px 0 4px; padding: 0; list-style: none; }
.facts li { display: flex; flex-direction: column; gap: 3px; padding: 8px 10px; background: var(--bg-deep); border: 1px solid var(--line); border-left: 3px solid var(--verdigris); border-radius: 6px; color: var(--text); font-size: 0.82rem; line-height: 1.4; }
.fact-ok { color: var(--verdigris); font: 500 0.68rem/1.2 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; }
.hand-without { margin: 14px 0 0; padding-top: 12px; border-top: 1px dashed var(--line-2); color: var(--soft); font-size: 0.85rem; line-height: 1.5; }
.hand-without b { color: var(--amber); font-weight: 600; }
@media (max-width: 719px) {
  .hand { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .hand-card:not(:last-child)::after { content: "↓"; top: auto; right: auto; bottom: -18px; left: 18px; transform: none; }
}
.motion-ok .viz-handoff.is-visible .is-ending { animation: fade-out-half 1.2s ease both 0.3s; }
.motion-ok .viz-handoff.is-visible .facts li { animation: fact-in 0.6s ease both; animation-delay: calc(0.9s + var(--i) * 0.45s); }
.motion-ok .viz-handoff.is-visible .is-new { animation: warm-up 1.2s ease both 2.4s, warm-glow 4s ease-in-out infinite alternate 3.6s; }
@keyframes fade-out-half { from { opacity: 1; } to { opacity: 0.55; } }
@keyframes fact-in { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: none; } }
@keyframes warm-up { from { border-color: var(--line); box-shadow: none; } to { border-color: rgba(226, 180, 90, 0.6); box-shadow: 0 0 0 1px rgba(226, 180, 90, 0.2); } }
@keyframes warm-glow { from { box-shadow: 0 0 0 1px rgba(226, 180, 90, 0.2); } to { box-shadow: 0 0 0 1px rgba(226, 180, 90, 0.35), 0 0 26px rgba(226, 180, 90, 0.18); } }

/* Boss Battles roles */
.roles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.role { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 14px 12px; background: var(--card-2); border: 1px solid var(--line); border-top: 3px solid var(--role); border-radius: 10px; }
.role:not(:last-child)::after { content: "→"; position: absolute; top: 18px; right: -13px; color: var(--brass-dim); font: 0.9rem/1 var(--mono); }
.role p { margin: 0; color: var(--soft); font-size: 0.82rem; line-height: 1.45; }
.role .role-team { color: var(--role); font: 500 0.7rem/1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; }
.role .role-name { color: var(--cream); font: 600 1rem/1.25 var(--sans); }
.role-badge { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; margin-top: 4px; padding: 3px 8px; border: 1px solid var(--line-2); border-radius: 999px; color: var(--cream); font: 0.7rem/1.4 var(--mono); }
.role-badge .lock { width: 12px; height: 12px; color: var(--amber); }
.role-breaker { --role: var(--ember); }
.role-challenger { --role: var(--verdigris); }
.role-judge { --role: var(--slate); }
.role-reviewer { --role: var(--brass); }
@media (max-width: 899px) {
  .roles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .role:not(:last-child)::after { display: none; }
}
@media (max-width: 479px) { .roles { grid-template-columns: minmax(0, 1fr); } }
.motion-ok .viz-battle.is-visible .role { animation: viz-rise 0.5s ease both, baton 8s ease-in-out infinite; animation-delay: calc(var(--i) * 0.25s), calc(1.5s + var(--i) * 2s); }
.motion-ok .viz-battle.is-visible .role-badge .lock { animation: lock-pulse 2.4s ease-in-out infinite; }
@keyframes lock-pulse { 0%, 100% { transform: none; } 50% { transform: scale(1.18); } }

/* PDF Rescue */
.pdf-pair { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 16px; align-items: center; }
.page { display: flex; flex-direction: column; gap: 8px; }
.page-label { margin: 0; color: var(--brass); font: 500 0.72rem/1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; }
.page-body { position: relative; display: flex; flex-direction: column; gap: 9px; padding: 16px 14px; background: var(--paper); border-radius: 6px; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35); min-height: 250px; }
.blk { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 6px 8px 6px 26px; border-radius: 4px; background: rgba(42, 35, 28, 0.06); }
.blk b { position: absolute; left: 6px; top: 6px; display: grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; background: var(--copper); color: var(--paper); font: 600 0.62rem/1 var(--mono); }
.blk i { display: block; height: 5px; border-radius: 3px; background: rgba(42, 35, 28, 0.55); }
.blk i.short { width: 60%; }
.page-messy .blk { transform: translateX(calc(var(--i) * 3px - 4px)) rotate(var(--r)); }
.page-messy .blk:nth-child(2) { margin-left: 22px; }
.page-messy .blk:nth-child(3) { margin-right: 26px; }
.tbl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; margin-top: 4px; }
.tbl span { height: 12px; border-radius: 2px; background: rgba(42, 35, 28, 0.25); }
.page-messy .tbl span.off { transform: translate(6px, -5px); background: rgba(160, 106, 60, 0.55); }
.pdf-arrow { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--lantern); font: 500 0.75rem/1.3 var(--mono); text-align: center; }
.pdf-arrow::after { content: "→"; font-size: 1.4rem; line-height: 1; }
.pdf-notes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 18px 0 0; padding: 0; list-style: none; }
.pdf-notes li { padding: 10px 12px; border-left: 3px solid var(--verdigris); background: var(--card-2); border-radius: 6px; color: var(--soft); font-size: 0.82rem; line-height: 1.45; }
.pdf-notes b { color: var(--cream); font-weight: 600; }
@media (max-width: 719px) {
  .pdf-pair { grid-template-columns: minmax(0, 1fr); }
  .pdf-arrow::after { content: "↓"; }
  .pdf-notes { grid-template-columns: minmax(0, 1fr); }
}
.motion-ok .viz-pdf.is-visible .page-clean .blk { animation: settle-block 1.1s cubic-bezier(0.22, 0.61, 0.36, 1) both; animation-delay: calc(0.6s + var(--i) * 0.18s); }
.motion-ok .viz-pdf.is-visible .page-clean .tbl span { animation: viz-rise 0.5s ease both 1.6s; }
@keyframes settle-block { from { transform: translate(var(--x), var(--y)) rotate(var(--r)); opacity: 0.4; } to { transform: none; opacity: 1; } }

/* Video Evidence Engine */
.vid { display: flex; flex-direction: column; gap: 12px; }
.vid-screen { position: relative; aspect-ratio: 16 / 6; max-width: 100%; background: var(--bg-deep); border: 1px solid var(--line-2); border-radius: 8px; overflow: hidden; }
.vid-side { position: absolute; left: 0; top: 0; bottom: 0; width: 22%; background: rgba(180, 193, 212, 0.08); border-right: 1px solid var(--line); }
.vid-tgt { position: absolute; right: 12%; top: 26%; width: 22%; height: 48%; border: 2px dashed var(--verdigris); border-radius: 8px; }
.vid-card { position: absolute; left: 30%; top: 36%; width: 14%; height: 28%; background: var(--lantern); border-radius: 6px; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4); }
.vid-cursor { position: absolute; left: 38%; top: 52%; width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 16px solid var(--cream); transform: rotate(-30deg); }
.vid-bar { position: relative; height: 6px; border-radius: 3px; background: var(--line); }
.vid-played { position: absolute; left: 0; top: 0; bottom: 0; width: 62%; border-radius: 3px; background: var(--brass-dim); }
.vid-head { position: absolute; left: 62%; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--lantern); box-shadow: 0 0 0 4px rgba(226, 180, 90, 0.2); }
.vid-quote { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin: 0; color: var(--cream); font: 500 1.25rem/1.3 var(--display); }
.vid-quote .ts { padding: 2px 8px; border-radius: 4px; background: var(--bg-deep); color: var(--lantern); font: 500 0.78rem/1.4 var(--mono); }
.vid-note { margin: 0; color: var(--soft); font-size: 0.85rem; line-height: 1.5; }
.vid-frames { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.vid-frames li { margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: 4px; color: var(--soft); font: 0.7rem/1.2 var(--mono); text-align: center; }
.mini { position: relative; display: block; aspect-ratio: 16 / 9; background: var(--bg-deep); border: 1px solid var(--line-2); border-radius: 4px; overflow: hidden; }
.mini .mtgt { position: absolute; display: block; right: 9%; top: 24%; width: 24%; height: 50%; border: 1.5px dashed var(--verdigris); border-radius: 3px; }
.mini .mcard { position: absolute; display: block; padding: 0; border: 0; top: 34%; width: 16%; height: 30%; left: calc(24% + var(--p) * 46%); background: var(--lantern); border-radius: 2px; }
@media (max-width: 479px) { .vid-frames { grid-template-columns: repeat(3, minmax(0, 1fr)); } .vid-frames li:nth-child(n+4) { display: none; } }
.motion-ok .viz-video.is-visible .vid-card { animation: drag-card 5s ease-in-out infinite 1s; }
.motion-ok .viz-video.is-visible .vid-cursor { animation: drag-cursor 5s ease-in-out infinite 1s; }
.motion-ok .viz-video.is-visible .vid-played { animation: play-to 1.6s ease both; }
.motion-ok .viz-video.is-visible .vid-head { animation: head-to 1.6s ease both; }
.motion-ok .viz-video.is-visible .vid-frames li { animation: viz-rise 0.45s ease both; animation-delay: calc(1.4s + var(--i) * 0.15s); }
@keyframes drag-card { 0%, 15% { transform: none; } 55%, 85% { transform: translateX(170%) translateY(0); } 100% { transform: none; } }
@keyframes drag-cursor { 0%, 15% { transform: rotate(-30deg); } 55%, 85% { transform: translateX(340%) rotate(-30deg); } 100% { transform: rotate(-30deg); } }
@keyframes play-to { from { width: 0; } to { width: 62%; } }
@keyframes head-to { from { left: 0; } to { left: 62%; } }

.vid-answer { margin-top: 4px; padding: 14px 16px; background: var(--bg-deep); border: 1px solid var(--line-2); border-left: 3px solid var(--verdigris); border-radius: 8px; }
.vid-answer-label { margin: 0 0 8px; color: var(--verdigris); font: 500 0.72rem/1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; }
.vid-answer dl { display: grid; gap: 6px; margin: 0; }
.vid-answer dl > div { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: 10px; }
.vid-answer dt { color: var(--soft); font: 0.78rem/1.5 var(--mono); }
.vid-answer dd { margin: 0; color: var(--cream); font-size: 0.86rem; line-height: 1.5; }

/* Content Engine flow */
.flow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1.1fr); gap: 22px; align-items: center; }
.flow-src { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.flow-src li { position: relative; padding: 8px 10px; background: var(--card-2); border: 1px solid var(--line); border-radius: 8px; color: var(--cream); font-size: 0.82rem; line-height: 1.35; }
.flow-src li::after { content: ""; position: absolute; right: -22px; top: 50%; width: 22px; height: 1px; background: var(--line-2); }
.flow-node { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 14px; background: var(--card-2); border: 1px solid var(--line-2); border-radius: 10px; }
.flow-node p { margin: 0; color: var(--soft); font-size: 0.82rem; line-height: 1.45; }
.flow-node .flow-title { color: var(--cream); font: 600 1rem/1.25 var(--sans); }
.flow-node:not(.flow-out)::after { content: "→"; position: absolute; right: -18px; top: 50%; transform: translateY(-50%); color: var(--brass-dim); font: 0.95rem/1 var(--mono); }
.flow-out { border-color: rgba(143, 184, 168, 0.5); }
.cites { display: flex; flex-direction: column; gap: 4px; margin: 2px 0; padding: 0; list-style: none; color: var(--text); font-size: 0.82rem; }
.cites sup { color: var(--verdigris); font: 500 0.7rem var(--mono); }
@media (max-width: 719px) {
  .flow { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .flow-src li::after { display: none; }
  .flow-node:not(.flow-out)::after { content: "↓"; right: auto; left: 18px; top: auto; bottom: -16px; transform: none; }
}
.motion-ok .viz-content.is-visible .flow-src li { animation: fact-in 0.5s ease both; animation-delay: calc(var(--i) * 0.15s); }
.motion-ok .viz-content.is-visible .flow-node { animation: viz-rise 0.6s ease both 0.8s; }
.motion-ok .viz-content.is-visible .flow-out { animation: viz-rise 0.6s ease both 1.3s, warm-glow-green 4s ease-in-out infinite alternate 2s; }
@keyframes warm-glow-green { from { box-shadow: none; } to { box-shadow: 0 0 24px rgba(143, 184, 168, 0.16); } }

/* Living Library retry */
.retry { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.retry li { position: relative; display: flex; flex-direction: column; gap: 5px; padding: 12px; background: var(--card-2); border: 1px solid var(--line); border-radius: 10px; }
.retry li:not(:last-child)::after { content: "→"; position: absolute; top: 14px; right: -13px; color: var(--brass-dim); font: 0.9rem/1 var(--mono); }
.retry p { margin: 0; color: var(--soft); font-size: 0.8rem; line-height: 1.4; }
.retry .retry-title { color: var(--cream); font: 600 0.92rem/1.3 var(--sans); }
.retry-dup { padding-bottom: 34px !important; }
.env { position: absolute; bottom: 10px; width: 22px; height: 15px; border: 1.5px solid var(--lantern); border-radius: 2px; background: linear-gradient(155deg, transparent 48%, var(--lantern) 49%, var(--lantern) 53%, transparent 54%), linear-gradient(25deg, transparent 48%, var(--lantern) 49%, var(--lantern) 53%, transparent 54%); }
.env-a { left: 12px; }
.env-b { left: 40px; opacity: 0.6; }
@media (max-width: 899px) { .retry { grid-template-columns: repeat(2, minmax(0, 1fr)); } .retry li:not(:last-child)::after { display: none; } }
@media (max-width: 479px) { .retry { grid-template-columns: minmax(0, 1fr); } }
.motion-ok .viz-retry.is-visible .retry li { animation: viz-rise 0.5s ease both; animation-delay: calc(var(--i) * 0.25s); }
.motion-ok .viz-retry.is-visible .env-b { animation: merge-env 3.2s ease-in-out infinite 1.4s; }
@keyframes merge-env { 0%, 20% { transform: none; opacity: 0.6; } 60%, 80% { transform: translateX(-28px); opacity: 0; } 100% { transform: none; opacity: 0.6; } }

/* The system map */
.jobs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.job { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 16px 14px 12px; background: var(--card-2); border: 1px solid var(--line); border-top: 3px solid var(--job); border-radius: 10px; }
.job-build { --job: var(--lantern); }
.job-check { --job: var(--slate); }
.job-context { --job: var(--verdigris); }
.job-recover { --job: var(--amber); }
.job p { margin: 0; }
.job-num { color: var(--job); font: 500 0.75rem/1 var(--mono); letter-spacing: 0.08em; }
.job-name { color: var(--cream); font: 500 1.3rem/1.2 var(--display); text-wrap: balance; }
.job-what { color: var(--soft); font-size: 0.85rem; line-height: 1.45; }
.job-tools { display: flex; flex-direction: column; gap: 0; margin: auto 0 0; padding: 6px 0 0; list-style: none; border-top: 1px dashed var(--line-2); }
.job-tools li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; }
.job-tools a { display: inline-flex; align-items: center; min-height: 46px; min-width: 48px; color: var(--cream); font-weight: 600; font-size: 0.92rem; text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 4px; }
.job-tools a:hover { color: var(--lantern); text-decoration-color: var(--lantern); }
.job-tools span { color: var(--soft); font: 0.72rem/1.3 var(--mono); }
.system-proof { margin: 16px 0 0; color: var(--soft); font-size: 0.88rem; line-height: 1.6; }
.system-proof b { color: var(--cream); font-weight: 600; }
.system-proof a { color: var(--cream); text-underline-offset: 3px; }
@media (max-width: 1099px) { .jobs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 559px) { .jobs { grid-template-columns: minmax(0, 1fr); } }
.motion-ok .viz-system.is-visible .job { animation: viz-rise 0.55s ease both, baton 10s ease-in-out infinite; animation-delay: calc(var(--i) * 0.2s), calc(1.4s + var(--i) * 2.5s); }

/* Where it fits (tool pages) */
.fits { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 18px 0 4px; }
.fits-label { margin: 0; color: var(--brass); font: 500 0.72rem/1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; }
.fits-jobs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.fits-jobs li { padding: 3px 10px; border: 1px solid var(--line); border-radius: 999px; color: var(--brass-dim); font-size: 0.8rem; line-height: 1.5; }
.fits-jobs li.is-on { border-color: var(--lantern); color: var(--cream); background: rgba(226, 180, 90, 0.1); }
.fits-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--soft); font-size: 0.85rem; text-underline-offset: 3px; }
.fits-link:hover { color: var(--lantern); }

/* Continuity */
.cont { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.cont-step { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 14px; background: var(--card-2); border: 1px solid var(--line); border-radius: 10px; }
.cont-step:not(:last-child)::after { content: "→"; position: absolute; top: 14px; right: -14px; color: var(--brass-dim); font: 0.9rem/1 var(--mono); }
.cont-step p { margin: 0; color: var(--soft); font-size: 0.82rem; line-height: 1.45; }
.cont .cont-when { color: var(--brass); font: 500 0.72rem/1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; }
.convo { display: flex; flex-direction: column; gap: 4px; height: 64px; justify-content: center; }
.convo i { display: block; height: 6px; border-radius: 3px; background: var(--slate); opacity: 0.55; }
.convo i:nth-child(odd) { width: 86%; }
.convo i:nth-child(even) { width: 64%; margin-left: 14%; background: var(--verdigris); }
.convo.is-squeezed { gap: 1px; }
.convo.is-squeezed i { height: 3px; opacity: 0.35; }
.convo.is-summary i { width: 50%; opacity: 0.6; }
.notebook { display: flex; align-items: flex-start; gap: 12px; margin-top: 16px; padding: 12px 14px; border: 1px solid rgba(226, 180, 90, 0.55); border-radius: 10px; background: rgba(226, 180, 90, 0.06); }
.notebook p { margin: 0; color: var(--soft); font-size: 0.85rem; line-height: 1.5; }
.notebook b { color: var(--cream); font-weight: 600; }
.nb-icon { flex-shrink: 0; width: 24px; height: 30px; border-radius: 3px 5px 5px 3px; background: var(--lantern); box-shadow: inset 5px 0 0 rgba(0, 0, 0, 0.25); }
@media (max-width: 719px) {
  .cont { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .cont-step:not(:last-child)::after { content: "↓"; top: auto; right: auto; bottom: -18px; left: 18px; }
}
.motion-ok .viz-continuity.is-visible .cont-step { animation: viz-rise 0.5s ease both; animation-delay: calc(var(--i) * 0.3s); }
.motion-ok .viz-continuity.is-visible .convo.is-squeezed { animation: squeeze 3.6s ease-in-out infinite 1s; }
.motion-ok .viz-continuity.is-visible .nb-icon { animation: nb-glow 3s ease-in-out infinite alternate 1.2s; }
@keyframes squeeze { 0%, 15% { gap: 4px; } 50%, 85% { gap: 1px; } 100% { gap: 4px; } }
@keyframes nb-glow { from { box-shadow: inset 5px 0 0 rgba(0, 0, 0, 0.25); } to { box-shadow: inset 5px 0 0 rgba(0, 0, 0, 0.25), 0 0 16px rgba(226, 180, 90, 0.45); } }

/* Proof strip (real screens with captions) */
.viz-shots-proof .shot-strip li { width: min(82%, 380px); }
.viz-shots-proof .shot-strip img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-position: top left; }
.viz-shots-proof .shot-strip p { display: block; color: var(--soft); font-size: 0.84rem; line-height: 1.45; }
.viz-shots-proof .shot-strip p b { color: var(--cream); font-weight: 600; }
.viz-shots-proof .shot-strip p span { margin-right: 6px; }

/* Milestones after the repair */
.milestones { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.milestones li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.milestones li:not(:last-child)::after { content: ""; position: absolute; top: 9px; left: calc(50% + 12px); right: calc(-50% + 12px); height: 2px; background: var(--verdigris); opacity: 0.6; }
.ms-dot { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--verdigris); background: var(--verdigris); }
.is-waiting .ms-dot { background: transparent; border-color: var(--lantern); box-shadow: 0 0 0 4px rgba(226, 180, 90, 0.15); }
.ms-name { color: var(--cream); font-size: 0.82rem; font-weight: 600; line-height: 1.25; }
.ms-state { color: var(--soft); font: 0.7rem/1.3 var(--mono); }
.is-waiting .ms-state { color: var(--lantern); }
.ms-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 22px 0 0; padding: 0; list-style: none; }
.ms-stats li { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; background: var(--card-2); border: 1px solid var(--line); border-radius: 8px; color: var(--soft); font-size: 0.8rem; line-height: 1.35; }
.ms-stats b { color: var(--cream); font: 500 1.4rem/1.1 var(--display); font-variant-numeric: tabular-nums; }
.ms-note { margin: 16px 0 0; color: var(--soft); font-size: 0.88rem; line-height: 1.5; }
@media (max-width: 719px) {
  .milestones { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 16px; }
  .milestones li:nth-child(3)::after { display: none; }
  .ms-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.motion-ok .viz-vee-result.is-visible .milestones li { animation: viz-rise 0.45s ease both; animation-delay: calc(var(--i) * 0.18s); }
.motion-ok .viz-vee-result.is-visible .is-waiting .ms-dot { animation: wait-pulse 2.4s ease-in-out infinite 1.4s; }
@keyframes wait-pulse { 0%, 100% { box-shadow: 0 0 0 4px rgba(226, 180, 90, 0.15); } 50% { box-shadow: 0 0 0 8px rgba(226, 180, 90, 0.05); } }

/* Run timeline bars grow into place */
.motion-ok .run-timeline.is-visible .wave-bar { animation: bar-grow 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) both; transform-origin: left center; }
.motion-ok .run-timeline.is-visible .wave:nth-child(2) .wave-bar { animation-delay: 0.15s; }
.motion-ok .run-timeline.is-visible .wave:nth-child(3) .wave-bar { animation-delay: 0.3s; }
.motion-ok .run-timeline.is-visible .wave:nth-child(4) .wave-bar { animation-delay: 0.7s; }
@keyframes bar-grow { from { transform: scaleX(0); } to { transform: none; } }

/* The top bar stays with you as you scroll (every page) */
.site-header, .home .site-header { position: sticky; top: 0; z-index: 30; padding-top: env(safe-area-inset-top, 0px); background: rgba(13, 11, 12, 0.92); border-bottom: 1px solid var(--line); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
[id] { scroll-margin-top: 84px; }
.nav-toggle::before { content: ""; display: inline-block; width: 16px; height: 2px; margin-right: 10px; border-radius: 1px; background: currentColor; box-shadow: 0 -5px 0 currentColor, 0 5px 0 currentColor; vertical-align: middle; }
@media (max-width: 859px) { .js .site-nav.is-open { max-height: calc(100vh - 80px); overflow-y: auto; } }
/* Open-source pair (home) */
.oss-pair { display: grid; gap: 18px; }
@media (min-width: 820px) { .oss-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.oss-card { display: flex; flex-direction: column; gap: 10px; padding: 20px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
.oss-card h3 { margin: 0; font-size: 1.6rem; }
.oss-card p { margin: 0; }
.oss-card .actions { margin-top: auto; padding-top: 6px; }

/* How I work */
.principles { display: grid; gap: 18px; margin: 0 0 var(--section); padding: 0; list-style: none; }
@media (min-width: 900px) { .principles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.principle { display: flex; flex-direction: column; gap: 10px; padding: 22px 22px 14px; background: var(--card); border: 1px solid var(--line); border-top: 3px solid var(--lantern); border-radius: var(--radius); }
.principle p { margin: 0; color: var(--soft); line-height: 1.55; }
.principle .pr-num { color: var(--brass); font: 500 0.8rem/1 var(--mono); letter-spacing: 0.1em; }
.principle .pr-title { margin: 0; color: var(--cream); font: 500 clamp(1.4rem, 2.4vw, 1.75rem)/1.2 var(--display); text-wrap: balance; }
.pr-see { display: flex; flex-wrap: wrap; align-items: center; gap: 0 18px; margin-top: auto !important; padding-top: 8px; border-top: 1px dashed var(--line-2); }
.pr-see a { min-width: 48px; min-height: 46px; }
.pr-see span { color: var(--brass); font: 500 0.72rem/1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; }
.motion-ok .principle.reveal { transition-delay: calc(var(--i) * 70ms); }

/* ---------- October 1: products first, real screens, status breakdown ---------- */
.products .featured { display: grid; gap: 22px; margin: 32px 0 0; padding: 0; list-style: none; }
@media (min-width: 700px) { .products .featured { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .products .featured { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pcard { display: flex; flex-direction: column; height: 100%; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.pcard-shot { position: relative; margin: 0; background: #0b0a0a; border-bottom: 1px solid var(--line); }
.pcard-shot img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: left top; }
.pcard-shot figcaption { padding: 8px 14px; color: var(--soft); font: 500 0.74rem/1.4 var(--mono); letter-spacing: 0.02em; }
.pcard-body { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; flex: 1; padding: 18px 20px 12px; }
.pcard-body p { margin: 0; color: var(--soft); line-height: 1.55; }
.pcard-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; width: 100%; }
.pcard-head h3, .pcard-head h4 { margin: 0; }
.pcard-head a { display: inline-flex; align-items: center; min-height: 44px; color: var(--cream); text-decoration: none; font: 600 1.45rem/1.2 var(--display); }
.pcard-head a:hover { color: var(--lantern); }
.pcard .pcard-why, .oss-card .pcard-why { color: var(--cream); font: 500 1.2rem/1.3 var(--display); text-wrap: balance; }
.pcard-note { font-size: 0.86rem; padding-left: 10px; border-left: 2px solid var(--line-2); }
.pcard-body .text-link { margin-top: auto; }
.oss-block { margin-top: 40px; }
.oss-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; margin-bottom: 14px; }
.oss-head .kicker { margin: 0; }
.oss-head .oss-title { margin: 0; font-size: clamp(1.3rem, 2.2vw, 1.6rem); }
.oss-card .pcard-head a { font-size: 1.45rem; }
.more-tools { margin-top: 40px; }
.more-tools .more-title { margin: 0 0 12px; font-size: 0.95rem; font-weight: 500; }
.tool-grid { display: grid; gap: 0 32px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 760px) { .tool-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .tool-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tool-grid li { display: flex; flex-direction: column; gap: 6px; padding: 10px 0 16px; border-top: 1px solid var(--line); }
.tool-grid li p { margin: 0; color: var(--soft); font-size: 0.88em; line-height: 1.5; }
.tool-grid li p.tool-why { color: var(--cream); font: 500 1.2rem/1.3 var(--display); text-wrap: balance; }
.proof-receipts { margin: 22px 0 6px; color: var(--soft); line-height: 1.6; max-width: 70ch; }
.proof-links { display: flex; flex-wrap: wrap; gap: 0 28px; }
/* Where it stands (tool pages) */
.tool-hero .grid-hero { align-items: start; }
.stands { display: flex; flex-direction: column; gap: 14px; padding: 20px 22px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
.stands > .kicker { margin: 0; }
.stands dl { display: grid; gap: 14px; margin: 0; }
.stands .st { display: grid; gap: 4px; padding-left: 14px; border-left: 3px solid var(--line-2); }
.stands dt { color: var(--cream); font: 600 0.76rem/1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; }
.stands dd { margin: 0; color: var(--soft); font-size: 0.95rem; line-height: 1.55; }
.stands dd a { color: var(--lantern); }
.stands .st-completed { border-left-color: var(--verdigris); }
.stands .st-completed dt { color: var(--verdigris); }
.stands .st-tested { border-left-color: var(--slate); }
.stands .st-tested dt { color: var(--slate); }
.stands .st-experimental { border-left-color: var(--amber); border-left-style: dashed; }
.stands .st-experimental dt { color: var(--amber); }
.stands .st-planned { border-left-color: var(--brass); border-left-style: dotted; }
.stands .st-planned dt { color: var(--brass); }
.stands .st-not-yet dt { color: var(--soft); }
.stands .notice { margin: 4px 0 0; }
/* Video Evidence Engine: what goes in, what comes out */
.vio { display: grid; gap: 14px; }
@media (min-width: 760px) { .vio { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.1fr); align-items: stretch; } }
.vio-in, .vio-out { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 16px; background: var(--bg-deep); border: 1px solid var(--line-2); border-radius: 10px; }
.vio-out { border-left: 3px solid var(--verdigris); }
.vio-label { margin: 0; color: var(--brass); font: 500 0.72rem/1.4 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; }
.vio-out .vio-label { color: var(--verdigris); }
.vio-src { margin: 0; color: var(--soft); font: 0.78rem/1.4 var(--mono); }
.vio .vid-quote { font-size: 1.1rem; }
.vio-ask { display: flex; flex-direction: column; gap: 4px; margin: 4px 0 0; padding-top: 10px; border-top: 1px dashed var(--line-2); color: var(--cream); font-size: 0.95rem; line-height: 1.45; }
.vio-ask span { color: var(--soft); font: 500 0.72rem/1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; }
.vio-arrow { display: flex; align-items: center; justify-content: center; margin: 0; color: var(--lantern); font: 500 1.6rem/1 var(--sans); }
@media (max-width: 759px) { .vio-arrow span { display: inline-block; transform: rotate(90deg); } }
.vio-out dl { display: grid; gap: 12px; margin: 0; }
.vio-out dl > div { display: grid; grid-template-columns: 5.2rem minmax(0, 1fr); gap: 10px; align-items: start; }
.vio-out dt { color: var(--soft); font: 0.78rem/1.6 var(--mono); }
.vio-out dd { margin: 0; min-width: 0; color: var(--cream); font-size: 0.9rem; line-height: 1.5; }
.vio-out dd b { color: var(--lantern); font-weight: 600; }
.motion-ok .viz-video.is-visible .vio-out { animation: viz-rise 0.6s ease both 1.2s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .room, .reel-stage, .path { transform: none !important; }
  .reel [data-on] { transform: none !important; }
}

@media print {
  .site-header, .site-footer, .doorway-art, .orrery { display: none; }
  body { background: #fff; color: #000; }
}

/* Where it stands: status line, repo button and status card, evenly spaced */
#where-it-stands .plate-body { display: grid; gap: 16px; }
#where-it-stands .plate-body > .tool-status,
#where-it-stands .plate-body > .actions,
#where-it-stands .plate-body > .fits { margin: 0; }

/* ---------- Stories list and footer contact (added 2026-10-14) ---------- */
.story-list { display: grid; margin: 0; padding: 0; list-style: none; }
.story-list li { padding: 16px 0; border-top: 1px solid var(--line); }
.story-list li:first-child { border-top: 0; padding-top: 0; }
.story-list h3 { margin: 0 0 6px; }
.story-list h3 a { color: var(--cream); text-underline-offset: 3px; }
.story-list h3 a:hover { color: var(--lantern); }
.story-list p { margin: 0; color: var(--soft); line-height: 1.6; max-width: 68ch; }
.story-list p a { color: var(--lantern); text-underline-offset: 3px; }
.site-footer .footer-contact { margin-top: 10px; }
.footer-contact a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; color: var(--soft); text-underline-offset: 3px; }
.footer-contact a:hover { color: var(--lantern); }

/* Standalone project titles and contact actions retain their typography. */
#selected-work .story-list h3 a,
#contact .claims a {
  display: inline-flex; align-items: center; min-width: 44px; min-height: 44px;
}

/* Two-card product groups stay balanced at wide desktop widths. */
@media (min-width: 1100px) {
  #catalog.products .featured, #creator-tools.products .featured { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Soft charcoal notebook diagrams: presentation only, original assets retained. */
img[src="/assets/redesign/claim-detector.webp"],
img[src="/assets/redesign/continuity-notebook.webp"],
img[src="/assets/redesign/foundry-job-to-proof.webp"],
img[src="/assets/redesign/foundry-loop.webp"],
img[src="/assets/redesign/haircut-fact-sheet.webp"],
img[src="/assets/redesign/how-we-test.webp"],
img[src="/assets/redesign/independent-review.webp"],
img[src="/assets/redesign/mistake-next-test.webp"],
img[src="/assets/redesign/model-seat-routes.webp"],
img[src="/assets/redesign/one-brief-one-crew.webp"],
img[src="/assets/redesign/one-review-sept-26.webp"],
img[src="/assets/redesign/sealed-chain.webp"],
img[src="/assets/redesign/suit-and-toolbox.webp"],
img[src="/assets/redesign/two-computers-one-hub.webp"] {
  filter: grayscale(1) invert(1) brightness(.85) sepia(.15);
  background: #f0ead7;
  border-color: #cfc9b7;
}