/* mira-site/site.css, Agent A. Colors, type and spacing come ONLY from
   tokens.css custom properties. Mobile-first at 390px; desktop enrichment
   at 900px. Every animation has a static fallback: both the
   prefers-reduced-motion media query and html[data-motion="off"], which
   site.js sets so the fallback is testable with /site/?static=1. */

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
html[data-motion="off"] { scroll-behavior: auto; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

/* ---------- chrome ---------- */
.skip {
  position: absolute; left: -999px; top: 0; z-index: 20;
  background: var(--ink); color: var(--paper);
  padding: 0.6rem 1rem; border-radius: var(--radius);
}
.skip:focus { left: 0.5rem; top: 0.5rem; }

.top {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.65rem 1.25rem;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.wordmark {
  font-family: var(--font-law);
  font-size: 1.5rem; font-weight: 700;
  color: var(--ink); text-decoration: none;
}
.wordmark .dot, .hero-name .dot { color: var(--accent); }

.lang {
  display: flex; border: 1.5px solid var(--line);
  border-radius: var(--radius-chip); overflow: hidden;
  background: var(--paper-raised);
}
.lang button {
  font-family: var(--font-ui); font-size: var(--fs-small); font-weight: 600;
  padding: 0.55rem 0.9rem; min-height: 44px; min-width: 44px;
  border: 0; background: transparent; color: var(--ink-soft); cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.lang button:hover { background: var(--accent-wash); color: var(--ink); }
.lang button:active { background: var(--line); }
.lang button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.lang button[aria-pressed="true"]:hover { background: var(--ink); color: var(--paper); }

a { color: var(--accent-deep); text-underline-offset: 3px; }
a:hover { color: var(--accent); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* ---------- shared section rhythm ---------- */
.section { padding: var(--space-section) 1.25rem; }
.prose { max-width: var(--maxw-prose); margin: 0 auto; }
.prose h2 {
  font-family: var(--font-law);
  font-size: var(--fs-h2); line-height: 1.15; font-weight: 700;
  margin-bottom: 1.1rem;
}
.prose p { margin-bottom: 0.9rem; }
.prose p:last-child { margin-bottom: 0; }
.sub { color: var(--ink-soft); }
.landing { font-weight: 600; }
.fallback { color: var(--ink-faint); font-size: var(--fs-small); }

/* ---------- hero ---------- */
.hero {
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  padding: 4.5rem 1.25rem 3rem;
  position: relative;
}
.hero-inner { max-width: var(--maxw-prose); margin: 0 auto; width: 100%; }
.kicker {
  font-size: var(--fs-small); font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-faint); margin-bottom: 0.4rem;
}
.hero-name {
  font-family: var(--font-law);
  font-size: var(--fs-hero); line-height: 1.02; font-weight: 700;
  margin-bottom: 0.6rem;
}
.hero-promise {
  font-size: var(--fs-h3); color: var(--ink-soft);
  max-width: 30em; margin-bottom: 2.2rem;
}
.hero-q {
  font-size: var(--fs-h3); font-weight: 600; min-height: 1.8em;
  margin-bottom: 0.6rem;
}
.hero-q .qmark { color: var(--accent); margin-right: 0.45em; }
.caret {
  display: inline-block; width: 2px; height: 1.05em;
  background: var(--accent); vertical-align: text-bottom; margin-left: 2px;
  animation: blink 1s steps(2) infinite;
}
.caret[hidden] { display: none; }
@keyframes blink { 50% { opacity: 0; } }
.hero-checking {
  font-size: var(--fs-small); color: var(--ink-faint);
  min-height: 1.4em; margin-bottom: 0.7rem;
  opacity: 0; transition: opacity 0.35s ease;
}
.hero-checking.on { opacity: 1; }
.hero-card { min-height: 2rem; }
.hero-card .answer-card {
  opacity: 0; transform: translateY(14px);
  transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.hero-card.show .answer-card { opacity: 1; transform: none; }
.hero-note {
  font-size: var(--fs-small); color: var(--ink-faint); margin-top: 0.8rem;
  opacity: 0; transition: opacity 0.45s ease 0.2s;
}
.hero-card.show ~ .hero-note { opacity: 1; }
.scroll-cue {
  margin-top: 2.4rem;
  text-align: center; color: var(--ink-faint); font-size: var(--fs-small);
}
.scroll-cue .chev {
  display: block; font-size: 1.3rem; line-height: 0.6;
  animation: nudge 2.2s ease-in-out infinite;
}
@keyframes nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }

/* ---------- answer + refusal cards (shared language) ---------- */
.answer-card {
  background: var(--paper-raised);
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: var(--pad-card);
}
.seal {
  display: inline-flex; align-items: center; gap: 0.45rem;
  background: var(--accent-wash); color: var(--accent-deep);
  font-size: var(--fs-small); font-weight: 700;
  padding: 0.35rem 0.85rem 0.35rem 0.6rem;
  border-radius: var(--radius-chip); margin-bottom: 0.8rem;
}
.seal .tick {
  width: 1.15rem; height: 1.15rem; border-radius: 50%; flex: none;
  background: var(--accent); color: var(--paper-raised);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.7rem;
}
.answer-card .lead { margin-bottom: 0.4rem; }
blockquote.law {
  font-family: var(--font-law);
  font-size: 1.15rem; line-height: 1.5;
  background: var(--paper);
  border-left: 4px solid var(--accent);
  border-radius: 4px var(--radius) var(--radius) 4px;
  padding: 0.9rem 1rem;
  margin: 0.7rem 0 0.4rem;
}
.cite {
  display: flex; flex-wrap: wrap; gap: 0.2rem 0.7rem; align-items: baseline;
  font-size: var(--fs-small); color: var(--ink-soft);
  margin: 0.4rem 0 0.6rem;
}
.cite .sec { font-weight: 700; color: var(--gold); }
.en-note {
  font-size: var(--fs-small); color: var(--ink-soft);
  border-top: 1px dashed var(--line);
  padding-top: 0.6rem; margin-top: 0.5rem;
}
.answer-card .meta { font-size: var(--fs-small); color: var(--ink-faint); margin-top: 0.4rem; }
.asked { font-size: var(--fs-small); color: var(--ink-soft); margin-bottom: 0.6rem; }
.asked b { color: var(--ink); }

/* ---------- try it ---------- */
.mode-badge {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-size: var(--fs-small); font-weight: 700;
  border-radius: var(--radius-chip);
  padding: 0.35rem 0.9rem; margin-bottom: 1rem;
}
.mode-badge.live { background: var(--accent-wash); color: var(--accent-deep); }
.mode-badge.rec { background: var(--refuse-wash); color: var(--refuse); }
.mode-badge .pulse {
  width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--accent);
  animation: livepulse 1.6s ease-in-out infinite;
}
@keyframes livepulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }
.phone {
  width: min(390px, 100%); margin: 0 auto;
  background: var(--ink);
  border-radius: calc(var(--radius) * 2.4);
  padding: 0.7rem;
  box-shadow: var(--shadow-card);
}
@media (max-width: 520px) {
  .phone { padding: 0.4rem; }
  .phone iframe { border-radius: calc(var(--radius) * 1.2); }
}
.phone .notch {
  width: 34%; height: 5px; border-radius: var(--radius-chip);
  background: var(--ink-soft); margin: 0 auto 0.55rem;
}
.phone iframe {
  display: block; width: 100%; height: min(72svh, 700px);
  border: 0; border-radius: calc(var(--radius) * 1.6);
  background: var(--paper);
}
.gallery { display: grid; gap: 1rem; }
.gallery .answer-card .q {
  font-weight: 600; margin-bottom: 0.6rem;
}
.gallery .answer-card .q::before { content: '› '; color: var(--accent); font-weight: 700; }

/* ---------- honest no ---------- */
.refusal-wrap { max-width: var(--maxw-prose); margin: 1.4rem auto 0; }
.refusal-card {
  background: var(--paper-raised);
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: var(--pad-card);
  margin-bottom: 1.1rem;
}
.refusal-card h3 {
  font-family: var(--font-law);
  font-size: var(--fs-h3); line-height: 1.3;
  margin-bottom: 0.6rem;
}
.refusal-card .why { margin-bottom: 0.5rem; }
.refusal-card .promise { color: var(--ink-soft); font-size: var(--fs-small); margin-bottom: 1rem; }
.referral {
  background: var(--refuse-wash);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
}
.referral h4 {
  font-size: var(--fs-small); font-weight: 700;
  letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--refuse); margin-bottom: 0.4rem;
}
.referral .org { font-family: var(--font-law); font-size: var(--fs-h3); font-weight: 700; }
.referral .addr { color: var(--ink-soft); font-size: var(--fs-small); margin: 0.15rem 0 0.7rem; }
.referral .acts { display: flex; flex-wrap: wrap; gap: 0.7rem; align-items: center; }
.referral a.call {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0.5rem 1.2rem;
  border-radius: var(--radius); background: var(--accent);
  color: var(--paper-raised); font-weight: 700; text-decoration: none;
  transition: background-color 0.15s ease;
}
.referral a.call:hover { background: var(--accent-deep); color: var(--paper-raised); }
.referral a.call:active { background: var(--accent-deep); }
.referral a.ext { font-weight: 600; }

/* ---------- cities + map ---------- */
.city-list { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1rem 0 0.8rem; }
.city-pill {
  font-size: var(--fs-small); font-weight: 600;
  border: 1.5px solid var(--line); border-radius: var(--radius-chip);
  padding: 0.3rem 0.8rem; color: var(--ink-soft);
  background: var(--paper-raised);
}
.city-pill.live { background: var(--accent); border-color: var(--accent); color: var(--paper-raised); }
.legend { font-size: var(--fs-small); color: var(--ink-soft); }
.dot-live, .dot-next {
  display: inline-block; width: 0.7rem; height: 0.7rem; border-radius: 50%;
  vertical-align: baseline;
}
.dot-live { background: var(--accent); }
.dot-next { border: 2px solid var(--ink-faint); }
.map { margin-top: 1.6rem; }
.map svg { width: 100%; height: auto; display: block; }
.map .road { fill: none; stroke: var(--line); stroke-width: 3; }
.map .roadlabel, .map .reflabel { font-family: var(--font-ui); font-size: 12px; fill: var(--ink-faint); }
.map .ref { fill: none; stroke: var(--ink-faint); stroke-width: 1.5; }
.map .citydot text { font-family: var(--font-ui); font-size: 13px; fill: var(--ink-soft); }
.map .citydot .next { fill: var(--paper); stroke: var(--ink-faint); stroke-width: 2; }
.map .citydot .pilot { fill: var(--accent); }
.map .citydot .halo { fill: var(--accent-wash); }
.map .pilotlabel { font-weight: 700; fill: var(--accent-deep) !important; }
.map .citydot {
  opacity: 0;
  transition: opacity 0.5s ease;
  transition-delay: calc(var(--d) * 180ms + 150ms);
}
.map.play .citydot { opacity: 1; }

/* ---------- footer ---------- */
footer { border-top: 1px solid var(--line); padding: 2.2rem 1.25rem 3rem; }
.foot-inner {
  max-width: var(--maxw-prose); margin: 0 auto;
  font-size: var(--fs-small); color: var(--ink-soft);
}
.foot-inner p { margin-bottom: 0.7rem; }
.foot-inner .pledge { color: var(--ink); font-weight: 600; }

/* ---------- scroll reveals ---------- */
.reveal {
  opacity: 0; transform: translateY(18px);
  transition: opacity 0.45s ease, transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.reveal.in { opacity: 1; transform: none; }

/* ---------- static fallbacks: media query AND the JS-set attribute ---------- */
@media (prefers-reduced-motion: reduce) {
  .reveal, .hero-card .answer-card, .hero-note, .hero-checking,
  .map .citydot { transition: none; }
  .reveal, .map .citydot { opacity: 1; transform: none; }
  .hero-note { opacity: 1; }
  .caret, .scroll-cue .chev, .mode-badge .pulse { animation: none; }
}
html[data-motion="off"] .reveal,
html[data-motion="off"] .map .citydot { opacity: 1; transform: none; transition: none; }
html[data-motion="off"] .hero-card .answer-card { opacity: 1; transform: none; transition: none; }
html[data-motion="off"] .hero-note { opacity: 1; transition: none; }
html[data-motion="off"] .caret,
html[data-motion="off"] .scroll-cue .chev,
html[data-motion="off"] .mode-badge .pulse { animation: none; }

/* ---------- desktop enrichment ---------- */
@media (min-width: 900px) {
  .section-wide .split {
    max-width: var(--maxw-wide); margin: 0 auto;
    display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: 3.5rem; align-items: start;
  }
  .section-wide .split > .prose { margin: 0; }
  .map { margin-top: 0; }
  .gallery { grid-template-columns: 1fr; }
  .hero-inner { max-width: var(--maxw-wide); }
  .hero-demo { max-width: var(--maxw-prose); }
}

/* ================= arch-57: mission, how, arc, ownership =================
   Colors, type and spacing still come ONLY from tokens.css custom
   properties, including the appended --deep-* set. */

/* ---------- mission + ownership (shared large-type language) ---------- */
.mission-kicker {
  font-family: var(--font-ui) !important;
  font-size: var(--fs-small) !important;
  font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-faint); margin-bottom: 1.2rem;
}
.mission-line {
  font-family: var(--font-law);
  font-size: clamp(1.45rem, 3.6vw, 2.15rem);
  line-height: 1.35; font-weight: 600;
  margin-bottom: 1.1rem !important;
}
.mission-line:last-child { margin-bottom: 0 !important; }

/* ---------- the how ---------- */
.how-cards {
  list-style: none;
  max-width: var(--maxw-wide); margin: 2rem auto;
  display: grid; gap: 1rem;
}
.how-card {
  background: var(--paper-raised);
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: var(--pad-card);
}
.how-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; border-radius: 50%;
  background: var(--accent-wash); color: var(--accent-deep);
  font-weight: 700; margin-bottom: 0.7rem;
}
.how-card h3 {
  font-family: var(--font-law); font-size: var(--fs-h3);
  margin-bottom: 0.45rem;
}
.how-card p { color: var(--ink-soft); }
.how-close { margin-top: 0.4rem; }
@media (min-width: 900px) {
  .how-cards { grid-template-columns: 1fr 1fr 1fr; gap: 1.4rem; }
}

/* ---------- the arc: deepening pinned zoom-out ---------- */
.arc {
  background: var(--deep-1);
  color: var(--deep-ink);
  transition: background-color 1.1s ease;
}
.arc[data-depth="2"] { background: var(--deep-2); }
.arc[data-depth="3"] { background: var(--deep-3); }
.arc-intro { padding: var(--space-section) 1.25rem 0; }
.arc-kicker {
  font-family: var(--font-ui);
  font-size: var(--fs-small);
  font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--deep-glow); margin-bottom: 0.5rem;
}
.arc-sub { color: var(--deep-ink-soft); }

/* track + pinned stage (scroll mode). 62vh runway per beat, 6 beats. */
.arc-track { position: relative; }
/* arch-118: no authored height. Six full-viewport snap blocks carry the
   runway, so the track measures itself. Two contradictory height rules
   used to live in this file (372vh here, 168vh further down); the later
   one silently won and the earlier one read as a lie to anyone here. */
.arc.mode-scroll .arc-snaps {
  position: relative;
  margin-top: -100vh;
  margin-top: -100svh;
  /* the blocks sit above the sticky stage in paint order and would eat
     every click on the map without this */
  pointer-events: none;
}
.arc.mode-scroll .arc-snap {
  height: 100vh;
  height: 100svh;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
.arc-stage {
  position: sticky; top: 0; height: 100dvh;
  display: grid; place-items: center; overflow: hidden;
}
.arc.mode-tap .arc-track { height: auto; }
.arc.mode-tap .arc-stage { position: static; height: auto; min-height: 92dvh; padding: 1rem 0 2rem; }

/* the scene: one svg, scaled per beat. transform + opacity only. */
.arc-viz { width: min(92vmin, 880px); }
.arc-viz svg { width: 100%; height: auto; display: block; }
.arc-viz {
  transform: scale(5.5);
  transition: transform 1.15s cubic-bezier(0.22, 0.61, 0.36, 1);
}
/* will-change only while the arc is near the viewport (site.js toggles
   arc-on): the promoted layer is large at scale(5.5) and should not be
   held alive for the whole page. */
.arc.arc-on .arc-viz { will-change: transform; }
.arc-stage[data-beat="1"] .arc-viz { transform: scale(2.7); }
.arc-stage[data-beat="2"] .arc-viz { transform: scale(1.75); }
.arc-stage[data-beat="3"] .arc-viz { transform: scale(1.22); }
.arc-stage[data-beat="4"] .arc-viz { transform: scale(0.94); }
.arc-stage[data-beat="5"] .arc-viz { transform: scale(5.5); }

.arc-viz .ring { fill: none; stroke: var(--deep-line); stroke-width: 1.6; }
.arc-viz .ring-city { stroke: var(--deep-glow); stroke-opacity: 0.55; }
.arc-viz .youpt { fill: var(--deep-glow); }
.arc-viz .youglow { fill: var(--deep-glow); opacity: 0.22; }
.arc-viz .citypt { fill: var(--deep-glow); }
.arc-viz .mdot, .arc-viz .sdot { fill: var(--deep-ink-soft); opacity: 0.75; }
.arc-viz .fdot { fill: var(--deep-ink-soft); opacity: 0.5; }
.arc-viz .ga { fill: none; stroke: var(--deep-line); stroke-width: 2; }
.arc-viz .citylabel {
  font-family: var(--font-ui); font-size: 11px; font-weight: 600;
  fill: var(--deep-ink);
}
.arc-viz .ringlayer { opacity: 0; transition: opacity 0.9s ease; }
.arc-stage:is([data-beat="1"], [data-beat="2"], [data-beat="3"], [data-beat="4"]) .rl1 { opacity: 1; }
.arc-stage:is([data-beat="2"], [data-beat="3"], [data-beat="4"]) .rl2 { opacity: 1; }
.arc-stage:is([data-beat="3"], [data-beat="4"]) .rl3 { opacity: 1; }
.arc-stage[data-beat="4"] .rl4 { opacity: 1; }

/* the words, overlaid low on the stage */
.arc-copy {
  position: absolute; left: 50%; bottom: 7dvh;
  transform: translateX(-50%);
  width: min(34rem, calc(100vw - 2.5rem));
  text-align: center;
  opacity: 0; transform: translateX(-50%) translateY(14px);
  transition: opacity 0.5s ease, transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.arc-copy.in { opacity: 1; transform: translateX(-50%) translateY(0); }
.arc.mode-tap .arc-copy {
  position: static; transform: none; margin: 0 auto; padding: 0 1.25rem;
}
.arc.mode-tap .arc-copy.in { transform: none; }
.arc-label {
  font-size: var(--fs-small); font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--deep-glow); margin-bottom: 0.35rem;
}
.arc-badge {
  display: inline-block;
  font-size: var(--fs-small); font-weight: 700;
  border-radius: var(--radius-chip);
  padding: 0.22rem 0.8rem; margin-bottom: 0.55rem;
}
.arc-badge.now { border: 1.5px solid var(--deep-glow); color: var(--deep-glow); }
.arc-badge.plan { border: 1.5px solid var(--deep-line); color: var(--deep-ink-soft); }
.arc-head {
  font-family: var(--font-law);
  font-size: clamp(1.55rem, 4.5vw, 2.4rem);
  line-height: 1.18; font-weight: 700;
  color: var(--deep-ink); margin-bottom: 0.55rem;
}
.arc-body { color: var(--deep-ink-soft); margin-bottom: 0.5rem; }
.arc-body:last-child { margin-bottom: 0; }

/* tap-mode nav */
.arc-nav {
  display: flex; align-items: center; justify-content: center;
  gap: 0.8rem; flex-wrap: wrap; margin-top: 1.4rem; padding: 0 1.25rem;
}
.arc-nav button {
  font-family: var(--font-ui); font-size: var(--fs-small); font-weight: 700;
  min-height: 44px; padding: 0.55rem 1.3rem;
  border-radius: var(--radius-chip);
  border: 1.5px solid var(--deep-line);
  background: transparent; color: var(--deep-ink); cursor: pointer;
}
.arc-nav button:disabled { opacity: 0.35; cursor: default; }
.arc-count { font-size: var(--fs-small); color: var(--deep-ink-soft); }
.arc-dots { display: flex; gap: 0.45rem; justify-content: center; margin-top: 0.9rem; }
.arc-dots span {
  width: 0.55rem; height: 0.55rem; border-radius: 50%;
  border: 1.5px solid var(--deep-ink-soft); opacity: 0.6;
}
.arc-dots span.on { background: var(--deep-glow); border-color: var(--deep-glow); opacity: 1; }

/* static fallback: everything, stacked, nothing moving */
.arc-static { padding: 1.5rem 1.25rem var(--space-section); }
.arc-static .arc-viz {
  transform: none; transition: none; width: min(70vmin, 460px);
  margin: 0 auto 2rem;
}
.arc-static .ringlayer { opacity: 1; transition: none; }
.arc-static-beat {
  max-width: var(--maxw-prose); margin: 0 auto 2.2rem;
  border-left: 3px solid var(--deep-line); padding-left: 1.1rem;
}
.arc-static-beat:last-child { margin-bottom: 0; }
.arc-static-beat .arc-head { font-size: clamp(1.3rem, 3.5vw, 1.8rem); }

/* ownership block: back in daylight */
.own { border-top: 1px solid var(--line); }

/* arc static fallbacks: media query AND the JS-set attribute */
@media (prefers-reduced-motion: reduce) {
  .arc, .arc-viz, .arc-viz .ringlayer, .arc-copy { transition: none; }
  .arc-copy { opacity: 1; transform: translateX(-50%); }
}
html[data-motion="off"] .arc,
html[data-motion="off"] .arc-viz,
html[data-motion="off"] .arc-viz .ringlayer,
html[data-motion="off"] .arc-copy { transition: none; }

/* ================= arch-58: performance + polish =================
   Colors, type and spacing still come ONLY from tokens.css custom
   properties. Every new animation is covered by the reduced-motion
   fallbacks at the bottom of this block. */

/* ---------- paint containment for long below-fold sections.
   Skipped on purpose for: the hero (above the fold), #try (holds the
   live iframe), the two pinned sequences (sticky inside
   content-visibility is unreliable). ---------- */
#problem, #mission, #honest, #how, #cities, #jolt, #own, #open {
  content-visibility: auto;
  contain-intrinsic-size: auto 40rem;
}

/* ---------- scroll progress bar (transform-only, rAF-driven) ---------- */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px;
  z-index: 30; pointer-events: none; background: transparent;
}
.scroll-progress span {
  display: block; height: 100%; background: var(--accent);
  transform: scaleX(0); transform-origin: 0 50%;
}

/* ---------- section rail: left edge, desktop only. The walkthrough
   keeps its own step rail on the right; the two never overlap. ---------- */
.rail { display: none; }
@media (min-width: 900px) {
  .rail {
    position: fixed; left: 0.4rem; top: 50%; transform: translateY(-50%);
    z-index: 25; display: flex; flex-direction: column; gap: 0.15rem;
  }
  .rail a {
    display: flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; border-radius: 50%;
  }
  .rail a::before {
    content: ''; width: 8px; height: 8px; border-radius: 50%;
    border: 2px solid var(--ink-faint); background: transparent;
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
  }
  .rail a:hover::before { border-color: var(--accent); transform: scale(1.25); }
  .rail a.on::before { background: var(--accent); border-color: var(--accent); }
}

/* ---------- per-sequence skip links (visible on keyboard focus) ---------- */
.seq-skip {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.seq-skip:focus-visible {
  position: static; width: auto; height: auto; clip: auto;
  display: inline-block; margin-top: 0.8rem;
  padding: 0.45rem 1rem; border-radius: var(--radius);
  background: var(--ink); color: var(--paper);
  font-weight: 600; text-decoration: none; white-space: normal;
}
.seq-skip-deep:focus-visible {
  background: var(--deep-glow); color: var(--deep-3);
  outline-color: var(--deep-glow);
}

/* ---------- live demo iframe: lazy src + loading shimmer.
   The shell reserves the exact iframe height, so the swap from
   shimmer to loaded demo shifts nothing. ---------- */
.demo-shell { position: relative; }
.demo-load {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  border-radius: calc(var(--radius) * 1.6);
  background: var(--paper);
  color: var(--ink-faint); font-size: var(--fs-small);
  overflow: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}
@media (max-width: 520px) { .demo-load { border-radius: calc(var(--radius) * 1.2); } }
.demo-load::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 32%, var(--accent-wash) 50%, transparent 68%);
  background-size: 250% 100%;
  animation: shimmer 1.6s linear infinite;
}
@keyframes shimmer {
  from { background-position: 120% 0; }
  to { background-position: -120% 0; }
}
.demo-shell.loaded .demo-load { opacity: 0; visibility: hidden; }

/* ---------- daylight to deep: soften both seams of the arc ---------- */
.arc { position: relative; }
.arc-intro { position: relative; z-index: 1; }
.arc::before, .arc::after {
  content: ''; position: absolute; left: 0; right: 0;
  pointer-events: none; z-index: 0;
}
.arc::before { top: 0; height: 4.5rem; background: linear-gradient(var(--paper), transparent); }
.arc::after { bottom: 0; height: 2.5rem; background: linear-gradient(transparent, var(--paper)); opacity: 0.5; }

/* ---------- arc copy: fixed box, bottom-anchored content, so beat
   changes swap text inside a box that never moves (CLS 0). ---------- */
.arc.mode-scroll .arc-copy {
  min-height: min(19.5rem, 46dvh);
  display: flex; flex-direction: column;
  justify-content: flex-end; align-items: center;
}

/* ---------- arc tap mode: one-time affordance pulse on Next ---------- */
.arc-nav button:hover:not(:disabled) { border-color: var(--deep-glow); color: var(--deep-glow); }
.arc-nav button:active:not(:disabled) { color: var(--deep-glow); }
#arc-next.nudge { animation: nudge-pulse 1.1s ease-in-out 0.8s 2; }
@keyframes nudge-pulse {
  0%, 100% { transform: none; }
  50% { transform: scale(1.07); }
}

/* ---------- focus rings that stay visible on the deep background ---------- */
.arc :focus-visible { outline-color: var(--deep-glow); }

/* ---------- heading rhythm: the arc kicker was written to match the
   mission kicker (small caps), but .prose h2 outweighed it in the
   cascade and it rendered at full h2 size. This restores the intent. ---------- */
.prose h2.arc-kicker {
  font-family: var(--font-ui);
  font-size: var(--fs-small);
  line-height: 1.4;
}

/* ---------- arch-58 reduced-motion coverage (both belts) ---------- */
@media (prefers-reduced-motion: reduce) {
  .demo-load::after, #arc-next.nudge { animation: none; }
  .demo-load, .lang button, .referral a.call, .rail a::before { transition: none; }
}
html[data-motion="off"] .demo-load::after,
html[data-motion="off"] #arc-next.nudge { animation: none; }
html[data-motion="off"] .demo-load,
html[data-motion="off"] .lang button,
html[data-motion="off"] .referral a.call,
html[data-motion="off"] .rail a::before { transition: none; }

/* ================= arch-59: hero scoreboard + the jolt =================
   Colors, type and spacing still come ONLY from tokens.css custom
   properties. Every animation here is transform-only and covered by the
   reduced-motion fallbacks at the bottom of this block. */

/* ---------- the identity line: Mira. Your [split-flap] ----------
   The flap holds ten fixed-width cells (the longest role word in either
   language), so the line's box never changes size: zero layout shift. */
.hero-mira { display: block; }
.hero-role {
  display: block;
  font-family: var(--font-law);
  font-size: clamp(1.8rem, 5.4vw, 3.3rem);
  line-height: 1.18; font-weight: 700;
  margin-top: 0.1em;
}
.flap {
  display: inline-flex;
  perspective: 520px;
  color: var(--accent-deep);
}
.flap-cell {
  display: inline-block;
  width: 0.62em;
  text-align: center;
  backface-visibility: hidden;
  transform-origin: 50% 52%;
}
.flap-cell.flip { animation: flapflip 0.3s ease-in-out; }
@keyframes flapflip {
  0% { transform: rotateX(0); }
  49% { transform: rotateX(-90deg); }
  51% { transform: rotateX(90deg); }
  82% { transform: rotateX(-12deg); }
  100% { transform: rotateX(0); }
}
/* reduced motion: site.js writes the four roles as plain comma text */
.flap.flap-static { display: inline; }

/* visually hidden, read by screen readers (the moving line is aria-hidden) */
.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------- the jolt: five imagined vignettes ---------- */
.jolt h2 {
  font-size: clamp(1.9rem, 5.5vw, 3.1rem);
  max-width: 14em;
}
.jolt-frame {
  font-weight: 600; color: var(--ink-soft);
  border-left: 3px solid var(--gold);
  padding-left: 0.9rem;
}
.jolt-cards {
  list-style: none;
  max-width: var(--maxw-wide);
  margin: 2.2rem auto;
  display: grid; gap: 1rem;
}
.jolt-card {
  background: var(--paper-raised);
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: var(--pad-card);
}
.imagined {
  display: inline-block;
  font-size: var(--fs-small); font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--gold);
  border: 1.5px dashed var(--gold);
  border-radius: var(--radius-chip);
  padding: 0.16rem 0.7rem;
  margin-bottom: 0.7rem;
}
.jolt-card h3 {
  font-family: var(--font-law);
  font-size: clamp(1.35rem, 3vw, 1.7rem);
  margin-bottom: 0.5rem;
}
.jolt-card p { color: var(--ink-soft); }
.jolt-card .jolt-never, .jolt-never {
  margin-top: 0.5rem;
  font-weight: 700; color: var(--ink);
}
.jolt-close { margin-top: 1.2rem; }
@media (min-width: 900px) {
  .jolt-cards { grid-template-columns: 1fr 1fr; gap: 1.4rem; }
  .jolt-card:last-child { grid-column: 1 / -1; }
}

/* ---------- arch-59 reduced-motion coverage (both belts) ---------- */
@media (prefers-reduced-motion: reduce) {
  .flap-cell.flip { animation: none; }
}
html[data-motion="off"] .flap-cell.flip { animation: none; }

/* ================= arch-98: the third leg + the in-build chip =================
   Colors, type and spacing still come ONLY from tokens.css custom
   properties. Nothing in this block animates on its own; #people rides
   the existing .reveal transitions, which the reduced-motion belts above
   already cover. */

/* ---------- the in-build chip: one vignette has left the imagined
   column. Solid accent instead of dashed gold: further along than a
   dream, still not in residents' hands. ---------- */
.imagined.build {
  color: var(--accent-deep);
  border: 1.5px solid var(--accent);
  background: var(--accent-wash);
}

/* ---------- the build status line on that one card (same double
   selector trick as .jolt-never: .jolt-card p outweighs a lone class) ---------- */
.jolt-card .jolt-build, .jolt-build {
  margin-top: 0.5rem;
  font-weight: 700; color: var(--accent-deep);
}

/* ---------- by the people: mission-language section after #own ---------- */
.people { border-top: 1px solid var(--line); }
.people-note {
  font-size: var(--fs-small); color: var(--ink-faint);
  margin-top: 1.4rem !important;
}
/* same paint containment as the other long below-fold sections. The
   estimate is measured, not the shared 40rem: at desktop width the
   section lays out at ~67rem, and a close placeholder keeps the first
   render from shifting the page when a rail jump lands here. The auto
   keyword then remembers the real size for every later pass. */
#people { content-visibility: auto; contain-intrinsic-size: auto 68rem; }

/* ================= arch-100: the open door (explore) =================
   Colors, type and spacing still come ONLY from tokens.css custom
   properties. The section rides the existing .reveal transitions; the
   only new animated property is the link's background-color hover, and
   both reduced-motion belts below cover it. */
.explore-cta { border-top: 1px solid var(--line); }
.explore-link {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0.55rem 1.4rem; margin-top: 0.3rem;
  border-radius: var(--radius); background: var(--accent);
  color: var(--paper-raised); font-weight: 700; text-decoration: none;
  transition: background-color 0.15s ease;
}
.explore-link:hover { background: var(--accent-deep); color: var(--paper-raised); }
.explore-link:active { background: var(--accent-deep); }
.explore-note { font-size: var(--fs-small); color: var(--ink-faint); }
/* same paint containment as the other short below-fold prose sections */
#explore { content-visibility: auto; contain-intrinsic-size: auto 24rem; }
@media (prefers-reduced-motion: reduce) {
  .explore-link { transition: none; }
}
html[data-motion="off"] .explore-link { transition: none; }

/* ================= arch-102: the density pass =================
   Daniel's read of the live page: far too much scrolling, one narrow
   centered ribbon, and stacked tiles that want to be carousels. This
   block only APPENDS at the end of the cascade: the tighter rhythm and
   wider measures come from the arch-102 tokens appended to tokens.css;
   desktop gains two-column "duo" compositions; own+people and
   explore+open are composed pairs; the jolt vignettes and the recorded
   gallery ride the shared mcar carousel (carousel.css/.js); and the arc
   runway drops from 62vh to 32vh per beat (same six beats; verify-walk.js
   makes the same cut for its eleven). Colors, type and spacing still
   come ONLY from tokens.css custom properties. Mobile (<900px) keeps
   the single comfortable column. */

/* ---------- rhythm: tighter vertical air ---------- */
.section { padding: var(--space-section-2) 1.25rem; }
.arc-intro { padding: var(--space-section-2) 1.25rem 0; }
.arc-static { padding: 1.5rem 1.25rem var(--space-section-2); }
footer { padding: 1.9rem 1.25rem 2.5rem; }

/* ---------- canvas: wider readable measure ---------- */
.prose, .refusal-wrap, .foot-inner { max-width: var(--maxw-prose-2); }

/* ---------- the arc: same six beats, fewer scroll pixels per beat
   (28vh per beat, matching verify-walk's arch-102 runway) ---------- */
/* arch-118: removed, see .arc-snaps above. */
/* the walk's heading section hands straight into the pinned stage */
#verify-intro { padding-bottom: 1.2rem; }

/* ---------- the jolt as a carousel row ---------- */
.mcar-jolt { max-width: var(--maxw-wide-2); margin: 1.5rem auto 0.6rem; }
.mcar-jolt .mcar-slide { --mcar-slide: min(86%, 26rem); }
.jolt-card { padding: var(--pad-card-2) 1.25rem; }
.jolt-close { margin-top: 0.6rem; }

/* ---------- the recorded gallery as a carousel row ---------- */
.try-body { max-width: var(--maxw-wide-2); margin: 1.3rem auto 0; }
.gallery.mcar-track { display: flex; }   /* belt over the earlier grid */
.mcar-gallery .mcar-slide { --mcar-slide: min(88%, 36rem); }
.mcar-gallery .answer-card { padding: var(--pad-card-2) 1.25rem; height: 100%; }
/* very long quotes (the R60 table) scroll inside the card; the full
   text stays reachable, the row stays one screen tall */
.mcar-gallery blockquote.law { max-height: 11rem; overflow-y: auto; scrollbar-width: thin; }

/* ---------- how-cards on the wider shell ---------- */
.how-cards { max-width: var(--maxw-wide-2); margin: 1.6rem auto 1.2rem; }

/* ---------- own + people, one composed movement ---------- */
.duo-mission { max-width: var(--maxw-wide-2); margin: 0 auto; display: grid; gap: 2.6rem; }
.duo-mission .people { border-top: 0; }
#people { content-visibility: visible; contain-intrinsic-size: none; }

/* ---------- explore + the open-build receipts ---------- */
.open-receipts { border-left: 3px solid var(--line); padding-left: 1.3rem; color: var(--ink-soft); }
.open-receipts h2.mission-kicker { margin-bottom: 0.8rem; }
.open-receipts p { margin-bottom: 0.7rem; }
.open-receipts p:last-child { margin-bottom: 0; }
#open { content-visibility: visible; contain-intrinsic-size: none; }
.explore-cta { margin-top: 0; }

/* ---------- desktop compositions ---------- */
@media (min-width: 900px) {
  /* a gutter so the wide shells always clear the fixed section rail */
  .section, .arc-intro, .arc-static { padding-left: 3rem; padding-right: 3rem; }

  /* the duo: heading rail left, body right, on the wide shell */
  .duo {
    max-width: var(--maxw-wide-2);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 1.2rem 4.5rem;
    align-items: start;
  }
  .duo-end { align-items: end; }
  .duo > .duo-head { grid-column: 1; }
  .duo > .duo-body { grid-column: 2; max-width: 48rem; }
  .duo .prose, .duo .refusal-wrap { margin: 0; }
  .duo .duo-head h2 { margin-bottom: 0.8rem; }
  .duo-end .duo-body > p:last-child { margin-bottom: 0.35rem; }

  /* wider split for the cities map; the map keeps its size and sits
     to the right edge of its column */
  .section-wide .split { max-width: var(--maxw-wide-2); gap: 4.5rem; }
  .map { max-width: 38rem; margin-left: auto; }

  /* the mission lines breathe on a wider measure and wrap less */
  .mission .prose { max-width: 62rem; }

  /* own + people side by side; the large type steps down one notch so
     two columns of it stay calm */
  .duo-mission { grid-template-columns: 1fr 1fr; gap: 5rem; align-items: start; }
  .duo-mission .mission-line { font-size: clamp(1.25rem, 1.8vw, 1.6rem); line-height: 1.42; }

  .open-receipts { align-self: center; }
}

/* ---------- the wide hero: words left, the working demo right ---------- */
@media (min-width: 1080px) {
  .hero { padding-left: 3rem; padding-right: 3rem; }
  .hero-inner {
    max-width: var(--maxw-wide-2);
    display: grid;
    grid-template-columns: minmax(0, 11fr) minmax(0, 9fr);
    gap: 2rem 5rem;
    align-items: center;
  }
  .hero-promise { margin-bottom: 0; }
  /* reserved height: the typed question, the checking line and the
     landed answer card all fit inside, so nothing below ever shifts */
  .hero-demo { max-width: none; margin: 0; min-height: 32rem; }
  .scroll-cue { margin-top: 1.4rem; }
}

/* ================= arch-103: the live preview windows =================
   The #explore section now carries the pv-grid (previews.css): five
   same-origin iframes of the real working screens as scaled miniatures,
   in one fixed two-row grid. This block only APPENDS at the end of the
   cascade. Colors, type and spacing still come ONLY from tokens.css
   custom properties.

   content-visibility: the arch-58 auto + 24rem estimate fit the old
   short CTA; with the grid inside, skipped rendering would both misfit
   the placeholder and starve the preview loader's IntersectionObserver
   of honest geometry. Rendered normally, like #people and #open. */
#explore { content-visibility: visible; contain-intrinsic-size: none; }
.explore-cta .pv-grid { margin-top: 2rem; }

/* ================= arch-104: narrow-width fixes, the how upsold,
   jolt previews, the builder's note + the call =================
   This block only APPENDS at the end of the cascade. Colors, type and
   spacing still come ONLY from tokens.css custom properties. Every new
   animated property is covered by the reduced-motion belts at the end
   of the block. */

/* ---------- 1 · the intermediate-width overlap ----------
   The section rail turns on at 900px, but the hero only gains its 3rem
   side gutter (and its two-column layout) at 1080px: between 900 and
   1079px the fixed dots sat ON the left edge of the hero words. The
   hero now carries the same 3rem gutter as every section from 900 up,
   and the rail waits for the wide layout at 1080. */
@media (min-width: 900px) {
  .hero { padding-left: 3rem; padding-right: 3rem; }
}
@media (min-width: 900px) and (max-width: 1079px) {
  .rail { display: none; }
}
/* long words in display type never force horizontal overflow */
.hero-name, .hero-role, .prose h2, .vw-question { overflow-wrap: break-word; }
/* below ~250px (extreme split screens) the ten flap cells get a fixed
   smaller size so the identity line still fits its column; the header
   row is allowed to wrap. 250px and up needs neither. */
@media (max-width: 249px) {
  .hero-role { font-size: 1.5rem; }
  .top { flex-wrap: wrap; }
}

/* ---------- 3 · the how, upsold: ownership leads ---------- */
.prose.how-lead { max-width: var(--maxw-wide-2); }
.prose h2.how-headline {
  font-size: clamp(2.1rem, 6vw, 3.6rem);
  line-height: 1.04;
  max-width: 13em;
  margin-bottom: 1rem;
}
.how-sub {
  color: var(--ink-soft);
  font-size: var(--fs-h3); line-height: 1.55;
  max-width: 36em;
}
.how-cards { margin: 2rem auto 0.4rem; }
.how-card { padding: var(--pad-card-2) 1.25rem; }
.prose.how-close-wrap { max-width: var(--maxw-wide-2); }
.prose p.how-close {
  font-family: var(--font-law);
  font-size: clamp(1.4rem, 3vw, 2.15rem);
  line-height: 1.4; font-weight: 600;
  max-width: 26em;
  margin-top: 1.4rem;
}

/* ---------- 4 · the jolt cards show their future ----------
   Four Planned cards carry a designed sketch (dashed frame, Sketch tag,
   aria-hidden); the In-build card carries the real watcher in a live
   pv window at zoom 2. The section estimate grows with the cards. */
#jolt { contain-intrinsic-size: auto 56rem; }
.jolt-mock {
  position: relative;
  display: flex; flex-direction: column; gap: 0.5rem;
  background: var(--paper);
  border: 1.5px dashed var(--line);
  border-radius: calc(var(--radius) - 6px);
  /* the top padding reserves a strip for the Sketch label, so full-width
     rows (the Met / Needs info list) never run under it */
  padding: 1.55rem 0.95rem 0.8rem;
  margin: 0.15rem 0 0.9rem;
}
.jm-sketch {
  position: absolute; top: 0.55rem; right: 0.65rem;
  font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-faint);
}
.jm-bar { display: block; height: 0.5rem; border-radius: var(--radius-chip); background: var(--line); }
.jm-w3 { width: 30%; } .jm-w4 { width: 40%; } .jm-w5 { width: 50%; }
.jm-w6 { width: 60%; } .jm-w7 { width: 70%; } .jm-w8 { width: 80%; } .jm-w9 { width: 88%; }
.jm-hl {
  display: block; background: var(--accent-wash);
  border-left: 3px solid var(--accent);
  border-radius: 4px; padding: 0.3rem 0.5rem;
}
.jm-hl .jm-bar { background: var(--accent); opacity: 0.4; }
.jm-note { font-size: 0.72rem; font-weight: 700; color: var(--accent-deep); }
.jm-tags { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.jm-tag {
  font-size: 0.72rem; font-weight: 600; color: var(--ink-soft);
  border: 1px solid var(--line); border-radius: var(--radius-chip);
  padding: 0.1rem 0.55rem; background: var(--paper-raised);
}
.jm-row { display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
.jm-row .jm-bar { flex: 1; }
.jm-dot { flex: none; width: 0.7rem; height: 0.7rem; border-radius: 50%; }
.jm-ok { background: var(--accent); }
.jm-ask { background: var(--refuse); }
.jm-pin { background: var(--paper-raised); border: 2px solid var(--accent); }
.jm-state { flex: none; font-size: 0.72rem; font-weight: 700; }
.jm-ok-t { color: var(--accent-deep); }
.jm-ask-t { color: var(--refuse); }
.jm-title { font-size: 0.78rem; font-weight: 700; color: var(--ink); }
.jm-lab { flex: none; font-size: 0.78rem; font-weight: 600; color: var(--ink-soft); }
.jolt-card .jolt-mini {
  display: block;
  margin: 0.15rem 0 0.9rem;
  color: inherit; text-decoration: none;
  transition: border-color 0.18s ease;
}
.jolt-card .jolt-mini:hover { border-color: var(--accent); }
.jolt-mini .pv-frame { width: 1000px; height: 625px; transform: scale(0.34); }
@supports (width: 100cqw) {
  .jolt-mini .pv-frame {
    width: calc(100cqw * 2);
    height: calc(100cqh * 2);
    transform: scale(calc(1 / 2));
  }
}

/* ---------- 6 · the builder's note + the call ---------- */
.builder { border-top: 1px solid var(--line); }
#builder { content-visibility: auto; contain-intrinsic-size: auto 34rem; }
.prose p.builder-note {
  font-family: var(--font-law);
  font-size: clamp(1.15rem, 1.9vw, 1.4rem);
  line-height: 1.55;
  margin-bottom: 0.8rem;
}
.prose p.builder-sign {
  margin-top: 1.2rem;
  font-weight: 700; color: var(--ink-soft);
}
.builder-sign::before {
  content: ''; display: block;
  width: 3rem; border-top: 3px solid var(--accent);
  margin-bottom: 0.6rem;
}
.cta-h {
  font-family: var(--font-law);
  font-size: clamp(2rem, 5vw, 3.2rem);
  line-height: 1.06; font-weight: 700;
  margin-bottom: 0.8rem;
  overflow-wrap: break-word;
}
.cta-p { color: var(--ink-soft); max-width: 38em; }
.cta-acts { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.3rem; }
.cta-mail, .cta-city {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0.6rem 1.5rem;
  border-radius: var(--radius); font-weight: 700; text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.cta-mail { background: var(--accent); color: var(--paper-raised); }
.cta-mail:hover { background: var(--accent-deep); color: var(--paper-raised); }
.cta-mail:active { background: var(--accent-deep); }
.cta-city { border: 1.5px solid var(--accent); color: var(--accent-deep); background: var(--paper-raised); }
.cta-city:hover { background: var(--accent-wash); color: var(--accent-deep); }
.cta-city:active { background: var(--accent-wash); }
.cta-wrap { margin-top: 1.8rem; border-top: 1px solid var(--line); padding-top: 1.6rem; }
@media (min-width: 900px) {
  .builder .duo { align-items: center; }
  .cta-wrap {
    margin-top: 0; border-top: 0; padding-top: 0;
    border-left: 3px solid var(--line); padding-left: 2.4rem;
  }
}

/* ---------- arch-104 reduced-motion coverage (both belts) ---------- */
@media (prefers-reduced-motion: reduce) {
  .cta-mail, .cta-city, .jolt-card .jolt-mini { transition: none; }
}
html[data-motion="off"] .cta-mail,
html[data-motion="off"] .cta-city,
html[data-motion="off"] .jolt-card .jolt-mini { transition: none; }

/* ================= arch-105: the how above the demo + its signature
   diagram, the real-map arc, the vignette grid + the sixth card =================
   This block only APPENDS at the end of the cascade. Colors, type and
   spacing still come ONLY from tokens.css custom properties (fill- and
   stroke-opacity modulate token colors, the established pattern). Every
   animated property in this block is transform or opacity and is
   covered by the reduced-motion belts at the end of the block. */

/* ---------- 1 · the ownership diagram (the how's signature) ----------
   The intrinsic estimates here were MEASURED at desktop (1512px, ES,
   the taller language): #how lays out at ~73rem, #jolt at ~95rem.
   Close estimates keep the first render of each section from shifting
   anything while it scrolls in; the auto keyword then remembers the
   real size for every later pass. */
#how { contain-intrinsic-size: auto 73rem; }
/* the arch-58 shared 40rem estimate was far off for these (measured
   19 / 41 / 31.5 / 29 / 40rem at desktop, EN and ES within a line of
   each other). A fast first scroll-through was shifting the section
   below whichever one rendered ~11rem smaller than its placeholder;
   with measured estimates the pass reads layout-shift 0. */
#problem { contain-intrinsic-size: auto 19rem; }
#mission { contain-intrinsic-size: auto 41rem; }
#honest { contain-intrinsic-size: auto 31.5rem; }
#cities { contain-intrinsic-size: auto 29rem; }
#builder { contain-intrinsic-size: auto 40rem; }
.how-duo {
  max-width: var(--maxw-wide-2);
  margin: 1.8rem auto 0;
  display: grid; gap: 2.2rem;
}
.how-fig { margin: 0; }
.how-svg {
  display: block; width: 100%; max-width: 33rem; height: auto;
  margin: 0 auto;
}
.how-fig-cap {
  font-size: var(--fs-small); color: var(--ink-soft);
  max-width: 30em; margin: 0.9rem auto 0; text-align: center;
}
/* the device */
.hd-phone { fill: var(--paper-raised); stroke: var(--ink); stroke-width: 3; }
.hd-spk, .hd-home { fill: var(--line); }
.hd-screen { fill: var(--paper); stroke: var(--line); stroke-width: 1.5; }
/* the three pieces inside it */
.hd-box { fill: var(--paper-raised); stroke: var(--line); stroke-width: 1.5; }
.hd-reader { fill: var(--accent-wash); stroke: var(--accent); }
.hd-checker { stroke: var(--ink-soft); }
.hd-cartslot { fill: var(--paper); stroke: var(--line); stroke-width: 1.5; stroke-dasharray: 5 4; }
.hd-cartbody { fill: var(--gold); fill-opacity: 0.16; stroke: var(--gold); stroke-width: 1.5; }
.hd-t { font-family: var(--font-ui); font-size: 15px; font-weight: 600; fill: var(--ink); }
.hd-tc { font-family: var(--font-ui); font-size: 13.5px; font-weight: 700; fill: var(--gold); }
.hd-guide { fill: none; stroke: var(--ink-faint); stroke-width: 2; stroke-dasharray: 2 5; stroke-linecap: round; }
.hd-guide-side { opacity: 0.55; }
.hd-check { fill: none; stroke: var(--accent); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
/* the proven-answer seal */
.hd-seal-c { fill: var(--accent); }
.hd-seal-t { fill: none; stroke: var(--paper-raised); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.hd-seal { transform-box: fill-box; transform-origin: center; }
/* the flow dots */
.hd-dq, .hd-da { fill: var(--accent); }
.hd-dcl, .hd-dcr { fill: var(--gold); }
.hd-dq, .hd-da, .hd-dcl, .hd-dcr { opacity: 0; }
/* the path that does NOT exist */
.hd-leak { fill: none; stroke: var(--ink-faint); stroke-width: 2; stroke-dasharray: 3 6; stroke-linecap: round; }
.hd-x { fill: none; stroke: var(--refuse); stroke-width: 4; stroke-linecap: round; }
.hd-cloud circle, .hd-cloud rect { fill: var(--line); }
.hd-tf { font-family: var(--font-ui); font-size: 13px; fill: var(--ink-faint); }
.hd-tno { font-family: var(--font-ui); font-size: 14px; font-weight: 700; fill: var(--refuse); }
/* the loop: question down, the law up from the cartridge, the check,
   the proven answer back. Runs ONLY under .play (site.js adds it while
   the figure is on screen and motion is allowed); transform/opacity
   only. Idle and static states park the seal visible so the drawing
   always reads complete. */
.how-fig:not(.play) .hd-seal { opacity: 1; }
.how-fig.play .hd-dq { animation: hd-q 7.5s linear infinite; }
.how-fig.play .hd-dcl { animation: hd-cl 7.5s linear infinite; }
.how-fig.play .hd-dcr { animation: hd-cr 7.5s linear infinite; }
.how-fig.play .hd-da { animation: hd-a 7.5s linear infinite; }
.how-fig.play .hd-check { animation: hd-chk 7.5s linear infinite; }
.how-fig.play .hd-seal { animation: hd-seal 7.5s linear infinite; }
@keyframes hd-q {   /* your question: bubble, reader, checker */
  0%, 4% { transform: translateY(0); opacity: 0; }
  7% { opacity: 1; }
  24% { transform: translateY(61px); opacity: 1; }
  32% { transform: translateY(61px); opacity: 1; }
  50% { transform: translateY(149px); opacity: 1; }
  54%, 100% { transform: translateY(149px); opacity: 0; }
}
@keyframes hd-cl {  /* the law rises from the cartridge to the reader */
  0%, 22% { transform: translateY(0); opacity: 0; }
  25% { opacity: 1; }
  36% { transform: translateY(-118px); opacity: 1; }
  40%, 100% { transform: translateY(-118px); opacity: 0; }
}
@keyframes hd-cr {  /* the official text again, for the checker */
  0%, 44% { transform: translateY(0); opacity: 0; }
  47% { opacity: 1; }
  56% { transform: translateY(-40px); opacity: 1; }
  60%, 100% { transform: translateY(-40px); opacity: 0; }
}
@keyframes hd-chk { /* the tick nods while the checker compares */
  0%, 50% { transform: translateY(0); }
  56% { transform: translateY(-2.5px); }
  62%, 100% { transform: translateY(0); }
}
@keyframes hd-a {   /* the proven answer returns to you */
  0%, 58% { transform: translateY(0); opacity: 0; }
  62% { opacity: 1; }
  80% { transform: translateY(-149px); opacity: 1; }
  84%, 100% { transform: translateY(-149px); opacity: 0; }
}
@keyframes hd-seal { /* the seal lands when the answer does */
  0%, 80% { opacity: 0; transform: scale(0.6); }
  86% { opacity: 1; transform: scale(1.1); }
  90%, 97% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1); }
}
/* the pieces column beside the figure */
.how-side .how-cards {
  grid-template-columns: 1fr; gap: 0.8rem;
  max-width: none; margin: 0 0 1.1rem;
}
.how-side .how-card {
  padding: 0.95rem 1.1rem;
  display: grid; grid-template-columns: auto 1fr;
  gap: 0.15rem 0.9rem; align-items: start;
}
.how-side .how-card .how-num { margin-bottom: 0; grid-row: 1 / span 2; }
.how-side .how-card h3 { font-size: 1.15rem; margin-bottom: 0.15rem; }
.how-side .how-card p { font-size: var(--fs-small); }
/* the proof rows: four true-today facts, tight and labeled */
.how-proof {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 0.6rem;
}
.how-proof li {
  display: flex; flex-direction: column; gap: 0.12rem;
  border-left: 3px solid var(--accent);
  background: var(--paper-raised);
  border-radius: 0 var(--radius) var(--radius) 0;
  box-shadow: var(--shadow-card);
  padding: 0.55rem 0.9rem 0.6rem;
}
.hp-k {
  font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--accent-deep);
}
.hp-v { font-size: var(--fs-small); font-weight: 600; color: var(--ink); }
@media (min-width: 600px) {
  .how-proof { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 900px) {
  .how-duo {
    grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
    gap: 4rem; align-items: center;
  }
}

/* ---------- 2 · the vignette grid (replaces the jolt carousel) ---------- */
#jolt { contain-intrinsic-size: auto 95rem; }
.jv-grid {
  list-style: none; padding: 0;
  max-width: var(--maxw-wide-2);
  margin: 1.8rem auto 0.6rem;
  display: grid; gap: 1rem;
}
.jv {
  background: var(--paper-raised);
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 0.85rem 0.9rem 0.95rem;
  display: flex; flex-direction: column; gap: 0.6rem;
  min-width: 0;
}
.jv-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.3rem 0.7rem; flex-wrap: wrap;
}
.jv-head h3 {
  font-family: var(--font-law);
  font-size: 1.12rem; line-height: 1.25; font-weight: 700;
  margin: 0;
}
.jv-head .imagined { margin-bottom: 0; padding: 0.12rem 0.6rem; font-size: 0.67rem; }
.jv-win {
  position: relative; display: block; flex: none;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) - 6px);
  background: var(--paper);
  container-type: size;
}
.jv-win.jv-sketch { border-style: dashed; }
/* the sketch fills its window; the dashed window frame now carries the
   sketch look, so the inner mock sheds its own frame and margins */
.jv-win .jolt-mock {
  position: absolute; inset: 0;
  margin: 0; border: 0; border-radius: 0;
  justify-content: center;
  padding: 1.6rem 1.05rem 0.9rem;
}
.jv > p {
  color: var(--ink-soft);
  font-size: var(--fs-small); line-height: 1.55;
  margin: 0;
}
.jv > p.jolt-never, .jv > p.jolt-build { margin-top: -0.2rem; }
.jv .jolt-mini { margin: 0; transition: border-color 0.18s ease; }
.jv .jolt-mini:hover { border-color: var(--accent); }
@media (min-width: 720px) { .jv-grid { grid-template-columns: 1fr 1fr; gap: 1.1rem; } }
@media (min-width: 1020px) { .jv-grid { grid-template-columns: 1fr 1fr 1fr; gap: 1.2rem; } }
/* the case-timeline sketch (the immigration card) */
.jm-case { position: relative; }
.jm-case::before {
  content: ''; position: absolute;
  left: calc(1.05rem + 0.33rem); top: 2.1rem; bottom: 1.1rem;
  border-left: 2px dashed var(--line);
}
.jm-case .jm-row { position: relative; }
.jm-mail { background: var(--paper-raised); border: 2px solid var(--ink-faint); }
.jm-date { background: var(--gold); }
.jm-chipk {
  flex: none; font-size: 0.72rem; font-weight: 700; color: var(--ink-soft);
  border: 1px solid var(--line); border-radius: var(--radius-chip);
  padding: 0.08rem 0.55rem; background: var(--paper-raised);
}
.jm-chipk.jm-help { color: var(--accent-deep); border-color: var(--accent); background: var(--accent-wash); }

/* ---------- 3 · the arc: real-map scenes ---------- */
.arc-map {
  position: relative;
  width: min(88vmin, 760px);
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  pointer-events: none;
}
.arc.mode-tap .arc-map { width: min(78vmin, 420px); }
.arc-scene {
  position: absolute; inset: 0;
  opacity: 0;
  transform-origin: 50% 50%;
  transition: transform 1.15s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.85s ease;
}
/* will-change only near the viewport AND only on the camera layer and
   its neighbors (site.js toggles .live), so at most three small layers
   are ever promoted */
.arc.arc-on .arc-scene.live { will-change: transform, opacity; }
.arc-scene svg { width: 100%; height: 100%; display: block; }
/* the shapes: token colors only, opacities modulating them */
.agm-city { fill: var(--deep-glow); fill-opacity: 0.13; stroke: var(--deep-glow); stroke-width: 2.5; }
.agm-city-fill { fill: var(--deep-glow); fill-opacity: 0.6; stroke: var(--deep-glow); stroke-width: 1; }
.agm-county { fill: var(--deep-ink); fill-opacity: 0.03; stroke: var(--deep-line); stroke-width: 1.6; }
.agm-county-hl { fill: var(--deep-ink); fill-opacity: 0.06; stroke: var(--deep-ink-soft); stroke-width: 2.6; }
.agm-state { fill: var(--deep-ink); fill-opacity: 0.05; stroke: var(--deep-ink-soft); stroke-width: 2; stroke-opacity: 0.85; }
.agm-state-fill { fill: var(--deep-glow); fill-opacity: 0.3; stroke: var(--deep-glow); stroke-width: 1.5; }
.agm-nation { fill: var(--deep-ink); fill-opacity: 0.05; stroke: var(--deep-ink-soft); stroke-width: 2.2; stroke-opacity: 0.9; }
.agm-faint { fill: none; stroke: var(--deep-line); stroke-width: 1.4; }
.agm-dot { fill: var(--deep-ink-soft); opacity: 0.8; }
.agm-you { fill: var(--deep-glow); }
.agm-youglow { fill: var(--deep-glow); opacity: 0.22; }
.agm-label {
  font-family: var(--font-ui); font-size: 30px; font-weight: 600;
  fill: var(--deep-ink); opacity: 0.92;
}
.agm-sublabel { font-family: var(--font-ui); font-size: 22px; font-weight: 600; fill: var(--deep-ink-soft); }
/* static mode: each beat rests on its own real scene */
.arc-static-map { width: min(58vmin, 330px); margin: 0 0 1rem; }
.arc-static-map svg { width: 100%; height: auto; display: block; }

/* ---------- arch-105 reduced-motion coverage (both belts). site.js
   never adds .play or animates scenes under reduced motion (static arc
   mode; no .play class); these belts are the second lock. ---------- */
@media (prefers-reduced-motion: reduce) {
  .arc-scene, .jv .jolt-mini { transition: none; }
  .how-fig .hd-dq, .how-fig .hd-dcl, .how-fig .hd-dcr,
  .how-fig .hd-da, .how-fig .hd-check, .how-fig .hd-seal { animation: none; }
  .how-fig .hd-seal { opacity: 1; transform: none; }
}
html[data-motion="off"] .arc-scene,
html[data-motion="off"] .jv .jolt-mini { transition: none; }
html[data-motion="off"] .how-fig .hd-dq,
html[data-motion="off"] .how-fig .hd-dcl,
html[data-motion="off"] .how-fig .hd-dcr,
html[data-motion="off"] .how-fig .hd-da,
html[data-motion="off"] .how-fig .hd-check,
html[data-motion="off"] .how-fig .hd-seal { animation: none; }
html[data-motion="off"] .how-fig .hd-seal { opacity: 1; transform: none; }

/* ================= arch-106: the data choice, the population beat,
   the left-aligned closings and the walk's sticky identity =================
   APPENDS at the end of the cascade only. Colors, type and spacing still
   come ONLY from tokens.css custom properties (no new tokens: every value
   here is component level, the established precedent). Every animated
   property in this block is transform or opacity, and both reduced-motion
   belts at the end of the block cover them.
   The consent bar itself is NOT styled here: it must look the same on the
   explore pages, which never load this file, so consent.js carries its own
   small style block and uses the same tokens. */

/* ---------- 1 · the federal beat's population dots ----------
   Real data: one circle per conterminous-US county, from the US Census
   Bureau Vintage 2024 county population estimates, sized so dot AREA is
   proportional to population (provenance and the exact encoding are in
   arc-geo.js's generated header). site.js fills the group after first
   paint; the group is inside the US scene, so it scales and translates
   with the camera like every other shape, and it blooms in on the beat
   that names it. Nothing here animates per frame. */
.agm-pop circle { fill: var(--deep-glow); fill-opacity: 0.5; }
.arc-scene[data-scene="us"] .agm-pop {
  opacity: 0;
  transition: opacity 0.75s ease 0.35s;
}
.arc-stage[data-beat="4"] .arc-scene[data-scene="us"] .agm-pop,
.arc-stage[data-beat="5"] .arc-scene[data-scene="us"] .agm-pop { opacity: 1; }
/* static mode: the resting federal scene shows its dots, no motion */
.arc-static-map .agm-pop { opacity: 1; transition: none; }
/* the caption that names the source, on the deep background */
.arc-src {
  font-size: var(--fs-small);
  line-height: 1.45;
  color: var(--deep-ink-soft);
  opacity: 0.8;
  margin-top: 0.55rem;
  max-width: 44em;
}

/* ---------- 2 · the closing line of the vignettes, flush left ----------
   It was a centered 46rem column under an 86rem grid, so it read as
   centered type. Now its block starts at the grid's own left edge and
   the line keeps a readable measure. Same for the walk's heading below. */
.jolt > .prose { max-width: var(--maxw-wide-2); }
.jolt .jolt-close { max-width: 26em; text-align: left; }

/* ---------- 3 · How Mira earns trust: left aligned, and the dead
   space before the pinned question removed ----------
   The gap was structural: the pinned stage is one full viewport tall and
   its layers are vertically centered, so with the intro still on screen
   the first beat sat half a screen below it, under a band of nothing.
   The first layer (the question) now sits at the TOP of the stage, so the
   sequence starts where the intro ends; every later beat stays centered.
   That rule is the one place site.css reaches into the walkthrough
   module's markup, and it changes alignment only. */
#verify-intro .prose { max-width: var(--maxw-wide-2); }
#verify-intro h2,
#verify-intro p { max-width: 34em; }
#verify-intro { padding-bottom: 0.4rem; }
/* arch-113: layer 0 used to be pushed to the top of the stage, back when
   the heading sat above the stage in normal flow and the top of the panel
   was free. The heading is now pinned in that exact corner, so holding
   this layer at flex-start drove the opening question straight through
   the title. Every layer centres in the space below the heading now,
   which is also what makes the panel read as one composition. */
#verify-walk.vw-mode-scroll .vw-layer[data-layer="0"] {
  justify-content: center;
}

/* ---------- 4 · the section's identity, sticky through the sequence ----
   A zero-height sticky row: it reserves no space (CLS 0), rides the top
   right while the pinned sequence plays, and stops at the end of the
   block. Hidden below 1100px, where the stage content would reach it and
   where the walkthrough runs in tap mode anyway. */
/* arch-113: the section heading is the sticky anchor for the whole
   walkthrough. It pins to the top left and stays for all 11 panels, so
   the sequence reads as one section with a title in its corner instead
   of a heading that scrolls away and a pinned stage that arrives after
   it. It is pointer-events:none so it never eats a click aimed at the
   panel underneath; the skip link inside it takes pointers back. */
.verify-block { position: relative; }
@media (min-width: 1100px) {
  #verify-intro {
    position: sticky;
    top: 5.2rem;
    z-index: 5;
    pointer-events: none;
    padding-bottom: 0;
  }
  #verify-intro .seq-skip { pointer-events: auto; }
  /* the pinned stage centres its beat in the space BELOW the title
     rather than behind it */
  .verify-block .vw-stage { padding-top: 7.5rem; }

  /* Once the sequence is actually running, the heading becomes a running
     header. At full size it eats about 250px of the panel, and the five
     checks need 694px of a 900px screen, so the two collided. Compact, it
     costs about 40px and every panel clears it. The h2 stays an h2, so
     the document outline and the skip link are untouched. */
  .verify-block:has(#verify-walk.vw-running) #verify-intro {
    top: 4.6rem;
  }
  .verify-block:has(#verify-walk.vw-running) #verify-intro h2 {
    font-size: 1.02rem;
    letter-spacing: 0.02em;
    line-height: 1.25;
  }
  /* display:none, not visibility:hidden. Hidden still reserves the box,
     which left the heading measuring 143px tall while looking like one
     line, and every panel kept colliding with space nothing occupied. */
  .verify-block:has(#verify-walk.vw-running) #verify-intro .sub,
  .verify-block:has(#verify-walk.vw-running) #verify-intro .seq-skip {
    display: none;
  }
  .verify-block #verify-intro h2,
  .verify-block #verify-intro .sub { transition: font-size 0.25s ease, opacity 0.25s ease; }

  /* Browsers without :has() never get the compact state, so give them a
     heading that cannot collide in the first place: drop the supporting
     line for the whole block and keep the stage padding generous. */
  @supports not (selector(:has(*))) {
    #verify-intro .sub { display: none; }
    .verify-block .vw-stage { padding-top: 4rem; }
  }
}
/* arch-113: the section-identity chip that used to live here is gone,
   and its CSS goes with it. Worth recording why the removal matters
   beyond tidiness: verify-walk.js uses the same .vw-tag class for the
   'keep an eye on this one' label inside a winning card. These rules
   were global, so on wide screens they were quietly applying
   position:sticky and height:0 to that label. The card rule only sets
   display and type, so it never overrode them. Deleting the dead block
   removes a real collision, not just dead weight. */

/* ---------- 5 · the footer's data line ---------- */
.foot-privacy a { font-weight: 600; }

/* ---------- arch-106 reduced-motion coverage (both belts) ---------- */
@media (prefers-reduced-motion: reduce) {
  .arc-scene[data-scene="us"] .agm-pop { transition: none; opacity: 1; }
}
html[data-motion="off"] .arc-scene[data-scene="us"] .agm-pop {
  transition: none;
  opacity: 1;
}

/* ---- Appended for arch-107 (the builder's note, Daniel's own words).
   "Mira is for the next Candita." is the turn of the note: it carries the
   whole reason the project exists, so it reads as its own beat rather than
   another body line. Additive only; no rule above is modified. */
.builder-note-turn {
  font-family: var(--font-law);
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  line-height: 1.35;
  color: var(--ink);
  margin-block: 1.15rem;
}

/* ---- Appended for arch-112 (the state beat's population dots).
   Real data: one circle per incorporated Georgia place, from the US
   Census Bureau Vintage 2024 city and town population estimates, sized
   so dot AREA is proportional to population (provenance and the exact
   encoding are in arc-geo.js's generated header). Same visual language
   as the federal layer on purpose: same fill token, same fill-opacity,
   same bloom, so the two beats read as one measurement seen at two
   zooms rather than two different charts. site.js fills the group after
   first paint; it lives inside the Georgia scene, so it scales and
   translates with the camera like every other shape. Additive only; no
   rule above is modified. */
.agm-pop-ga circle { fill: var(--deep-glow); fill-opacity: 0.5; }
.arc-scene[data-scene="georgia"] .agm-pop-ga {
  opacity: 0;
  transition: opacity 0.75s ease 0.35s;
}
/* Lit on the beat that names it, and held through the next one: beat 4
   pulls the camera out to the nation while this layer is still fading,
   and a second fade inside a fade reads as a flicker. */
.arc-stage[data-beat="3"] .arc-scene[data-scene="georgia"] .agm-pop-ga,
.arc-stage[data-beat="4"] .arc-scene[data-scene="georgia"] .agm-pop-ga { opacity: 1; }
/* static mode: the resting state scene shows its dots, no motion */
.arc-static-map .agm-pop-ga { opacity: 1; transition: none; }

/* ---------- arch-112 reduced-motion coverage (both belts) ---------- */
@media (prefers-reduced-motion: reduce) {
  .arc-scene[data-scene="georgia"] .agm-pop-ga { transition: none; opacity: 1; }
}
html[data-motion="off"] .arc-scene[data-scene="georgia"] .agm-pop-ga {
  transition: none;
  opacity: 1;
}

/* ---------- the city cloud (arch-114) ----------
   Appended, additive only: no rule above is modified. Everything here
   resolves tokens.css variables, including the arch-102 density tokens
   that the rest of the page opted into at the end of its cascade.

   The cloud has to do two jobs at once. It has to feel like a crowd, so
   a person who adds their city sees that they are not alone, and it has
   to stay readable as a plain fact for anyone who cannot see it as a
   picture. So every word carries its own state in visually hidden text,
   and the same table is written out under the disclosure below. Nothing
   is only a picture. */
.cloud-head { max-width: var(--maxw-prose-2); margin: 0 auto 1.6rem; }

/* ---- the form ---- */
.cloud-form { max-width: var(--maxw-prose-2); margin: 0 auto 2.2rem; }
.cloud-label {
  display: block; font-family: var(--font-ui); font-weight: 700;
  font-size: var(--fs-body); margin-bottom: 0.3rem;
}
.cloud-hint {
  font-size: var(--fs-small); color: var(--ink-soft);
  line-height: 1.5; margin: 0 0 0.7rem; max-width: 46em;
}
.cloud-field { display: grid; gap: 0.6rem; }
.cloud-combo { position: relative; }
#cloud-input {
  width: 100%; box-sizing: border-box;
  font-family: var(--font-ui); font-size: var(--fs-body);
  min-height: 48px; padding: 0.6rem 0.9rem;
  color: var(--ink); background: var(--paper-raised);
  border: 1.5px solid var(--line); border-radius: var(--radius);
}
#cloud-input:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.cloud-options {
  list-style: none; margin: 0.35rem 0 0; padding: 0.25rem;
  position: absolute; left: 0; right: 0; top: 100%; z-index: 5;
  background: var(--paper-raised); border: 1.5px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-card);
  max-height: 19rem; overflow-y: auto;
}
.cloud-opt {
  display: flex; justify-content: space-between; gap: 0.8rem;
  align-items: baseline; cursor: pointer;
  padding: 0.5rem 0.65rem; border-radius: calc(var(--radius) - 6px);
  font-size: var(--fs-body); color: var(--ink);
}
.cloud-opt-st { font-size: var(--fs-small); color: var(--ink-faint); font-weight: 700; }
.cloud-opt.on { background: var(--accent-wash); color: var(--accent-deep); }
.cloud-opt.on .cloud-opt-st { color: var(--accent-deep); }
.cloud-go {
  justify-self: start;
  font-family: var(--font-ui); font-size: var(--fs-small); font-weight: 700;
  min-height: 48px; padding: 0.6rem 1.35rem;
  border: 1.5px solid var(--accent); border-radius: var(--radius-chip);
  background: var(--accent); color: var(--paper-raised); cursor: pointer;
  transition: background-color 0.15s ease;
}
.cloud-go:hover { background: var(--accent-deep); }
.cloud-go:focus-visible { outline: 3px solid var(--accent-deep); outline-offset: 3px; }
.cloud-go[disabled] { opacity: 0.55; cursor: progress; }
/* The status line always occupies its row, so an answer landing never
   pushes the cloud down the page. */
.cloud-say {
  min-height: 1.5em; margin: 0.7rem 0 0;
  font-size: var(--fs-small); color: var(--accent-deep); font-weight: 600;
}

/* ---- the cloud itself ---- */
.cloud-wrap { max-width: var(--maxw-wide-2); margin: 0 auto; }
.cloud-cloud {
  list-style: none; margin: 0; padding: 1.4rem 1.1rem;
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: center; gap: 0.35rem 1.1rem;
  background: var(--paper-raised);
  border: 1.5px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}
/* --s is set per word by site.js: 1 at zero asks, growing on a log scale
   so one loud city cannot flatten the rest of the crowd. */
.cloud-word {
  font-family: var(--font-ui); font-weight: 700;
  font-size: calc(var(--fs-body) * var(--s, 1));
  line-height: 1.25; color: var(--ink-soft);
  display: inline-flex; align-items: baseline; gap: 0.25em;
}
.cloud-word-st { font-size: 0.62em; font-weight: 700; color: var(--ink-faint); }
/* Four states, four different marks, so the difference does not rest on
   color alone: the pilot is solid, the built cartridge is outlined, a
   city Mira already drew on its own map is underlined, and a city a
   visitor asked for carries nothing but its own weight. */
.cloud-word.is-live { color: var(--accent-deep); }
.cloud-word.is-live .cloud-word-name {
  background: var(--accent-wash); border-radius: var(--radius-chip);
  padding: 0.05em 0.5em;
}
.cloud-word.is-built { color: var(--accent-deep); }
.cloud-word.is-built .cloud-word-name {
  border: 1.5px solid var(--accent); border-radius: var(--radius-chip);
  padding: 0.05em 0.5em;
}
.cloud-word.is-seed .cloud-word-name {
  border-bottom: 2px dashed var(--ink-faint);
}
.cloud-word.is-asked { color: var(--ink); }
.cloud-word.is-you .cloud-word-name { box-shadow: 0 3px 0 0 var(--gold); }
.cloud-empty {
  text-align: center; color: var(--ink-soft); font-size: var(--fs-small);
  margin: 1rem 0 0;
}
.cloud-legend {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 0.35rem 1.1rem; margin: 0.9rem 0 0;
  font-size: var(--fs-small); color: var(--ink-soft);
}
.cloud-key {
  display: inline-block; width: 1.15rem; height: 0.75rem;
  margin-right: 0.35rem; vertical-align: middle; border-radius: var(--radius-chip);
}
.cloud-key.is-live { background: var(--accent); }
.cloud-key.is-built { border: 1.5px solid var(--accent); }
.cloud-key.is-seed { border-bottom: 2px dashed var(--ink-faint); border-radius: 0; }
.cloud-key.is-asked { background: var(--ink-faint); }

/* ---- the same data, as words ---- */
.cloud-details { margin: 1.3rem auto 0; max-width: var(--maxw-prose-2); }
.cloud-details summary {
  cursor: pointer; font-size: var(--fs-small); font-weight: 700;
  color: var(--accent-deep); padding: 0.35rem 0;
}
.cloud-details summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.cloud-table { width: 100%; border-collapse: collapse; margin-top: 0.7rem; font-size: var(--fs-small); }
.cloud-table caption { text-align: left; color: var(--ink-soft); padding-bottom: 0.5rem; }
.cloud-table th, .cloud-table td {
  text-align: left; padding: 0.45rem 0.6rem; border-bottom: 1px solid var(--line);
}
.cloud-table thead th { color: var(--ink-soft); font-weight: 700; }
.cloud-table tbody th { font-weight: 700; color: var(--ink); }
.cloud-note, .cloud-src {
  max-width: var(--maxw-prose-2); margin: 1rem auto 0;
  font-size: var(--fs-small); line-height: 1.55; color: var(--ink-soft);
}
.cloud-src { color: var(--ink-faint); }

@media (min-width: 720px) {
  .cloud-field {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end; column-gap: 0.8rem;
  }
  .cloud-label { grid-column: 1 / -1; margin-bottom: 0; }
  .cloud-hint { grid-column: 1 / -1; margin-bottom: 0.2rem; }
  .cloud-go { align-self: end; }
}

/* Reduced motion belt for the city cloud, same discipline as every other
   block above: the only transition in the section is the button's hover
   color, and it comes off with the OS setting and with ?static=1. */
@media (prefers-reduced-motion: reduce) {
  .cloud-go { transition: none; }
}
html[data-motion="off"] .cloud-go { transition: none; }