/* ============================================================
   Brain Radar — Brutalist Swiss Editorial
   Source: ~/.claude/design-base/brutalist-swiss-editorial/
   Cream + ink + indigo. Inter Tight + JetBrains Mono only.
   Hairline rules, no rounded corners, no shadows, no gradients.
   Tabular nums everywhere. The brain canvas sits in an ink-black
   inset plate (the magazine-photo move) so its white points stay
   legible against the cream page.
   ============================================================ */

:root {
  --cream:   #efece4;
  --cream-2: #e8e4d9;
  --ink:     #0a0a0a;
  --ink-2:   #1a1a1a;
  --indigo:  #5446ff;
  --rule:    rgba(10, 10, 10, 0.18);
  --rule-strong: rgba(10, 10, 10, 0.36);

  /* Per-axis colors — must match AXIS_COLORS in brain.js exactly. */
  --axis-synthetic:   #4cc9f0;   /* cyan       — top */
  --axis-kinetic:     #ef476f;   /* magenta    — lower-left */
  --axis-inanimate:   #ffd166;   /* amber      — lower-right */
  --axis-narrative:   #06d6a0;   /* teal-green — upper-right */
  --axis-atmospheric: #b794f6;   /* lavender   — upper-left */

  /* Semantic deltas — used only for axis-chip hairlines and brain-mesh
     point tints. Axis chip values stay in --ink; the hairline at the chip
     edge encodes direction. Keeps the page's single-accent discipline
     (indigo) intact. */
  --above: #ef476f;   /* magenta-red — matches --axis-kinetic */
  --below: #06d6a0;   /* teal-green — matches --axis-narrative */
  --agree: var(--ink);

  /* Motion — editorial restraint. Only fluid CSS, no scroll choreography. */
  --ease:        cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:    140ms;
  --dur-norm:    240ms;

  --font-sans:  'Inter Tight', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-mono:  'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --pad-x:    32px;
  --pad-x-md: 22px;
  --pad-x-sm: 18px;
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; padding: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-sans);
  font-feature-settings: 'ss01', 'cv11';
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body { display: flex; flex-direction: column; min-height: 100dvh; }

img { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; background: transparent; border: 0; cursor: pointer; }

kbd {
  font-family: var(--font-mono);
  font-size: 10.5px;
  padding: 2px 6px;
  border: 1px solid var(--ink);
  border-radius: 0;
  color: var(--ink);
  background: var(--cream);
  letter-spacing: 0.04em;
}

/* ============================================================
   Screen scaffold
   ============================================================ */
.screen { display: flex; flex-direction: column; flex: 1 1 auto; }
.screen[hidden] { display: none !important; }

/* ============================================================
   MASTHEAD (canonical: solid ink block, cream text, big stacked
   title + hairline rule + right-side meta in monospace caps)
   ============================================================ */
.masthead {
  background: var(--ink);
  color: var(--cream);
  padding: 32px var(--pad-x) 36px;
}
.masthead--compact { padding: 22px var(--pad-x) 26px; }

/* Editorial masthead — cream bg, ink text, two-line uppercase title with
   a right-aligned mono caps meta strip. Replaces the old black wordmark
   block + indigo title-strip. */
.masthead--editorial {
  background: var(--cream);
  color: var(--ink);
  padding: 22px var(--pad-x) 18px;
  border-bottom: 1px solid var(--rule);
}
.masthead--editorial .mast-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 32px;
}
.mast-stack { display: grid; gap: 4px; }
.mast-line {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(22px, 3.4vw, 44px);
  letter-spacing: -0.025em;
  line-height: 1.0;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0;
  white-space: nowrap;
}
.mast-line--sub { font-weight: 700; }
.masthead--editorial .mast-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: right;
  white-space: nowrap;
  align-self: end;
  padding-bottom: 4px;
}
.mast-dot { opacity: 0.4; padding: 0 4px; }

@media (max-width: 880px) {
  .masthead--editorial .mast-row {
    grid-template-columns: 1fr;
  }
  .masthead--editorial .mast-meta {
    text-align: left;
    white-space: normal;
    padding-top: 8px;
    padding-bottom: 0;
  }
  .mast-line { white-space: normal; }
}
.mast-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 32px;
}
.mast-eyebrow {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  opacity: 0.62;
  margin-bottom: 18px;
}
.mast-title {
  font-family: var(--font-sans);
  font-size: clamp(56px, 9.5vw, 152px);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 0.86;
  text-transform: none;
  word-break: normal;
}
.mast-title--small {
  font-size: clamp(40px, 6vw, 96px);
  letter-spacing: -0.03em;
}
.mast-q { color: var(--cream); opacity: 0.55; }
.mast-slash { opacity: 0.4; padding: 0 6px; }
.mast-rule {
  height: 1px;
  background: var(--cream);
  opacity: 0.85;
  margin: 14px 0 14px;
}
.mast-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: right;
  line-height: 1.55;
  align-self: end;
  padding-bottom: 8px;
  white-space: nowrap;
}

/* ============================================================
   SUBHEAD (key/value monospace caps strip with U+00B7 dots)
   ============================================================ */
.subhead {
  border-bottom: 1px solid var(--rule);
  padding: 14px var(--pad-x);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--cream);
}
.subhead .dot { opacity: 0.4; padding: 0 2px; }
.subhead span.k { opacity: 0.55; padding-right: 6px; }
.subhead .btn-ghost--inline { margin-left: auto; }

/* ============================================================
   BUTTONS — square, ink-block primary; hairline ghost
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 20px;
  border-radius: 0;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -0.005em;
  transition: transform var(--dur-fast) var(--ease),
              opacity var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: var(--ink);
  color: var(--cream);
  border: 1px solid var(--ink);
}
.btn-primary:hover { opacity: 0.88; }
.btn-primary:disabled { opacity: 0.35; cursor: not-allowed; }
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
}
.btn-ghost:hover { background: var(--ink); color: var(--cream); }
.btn-ghost--inline {
  padding: 6px 12px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
}
.btn-ghost--inline.is-active {
  background: var(--ink);
  color: var(--cream);
}

/* ============================================================
   INTRO BODY (2-col on desktop, copy + brain plate)
   ============================================================ */
.intro-body {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "copy"
    "brain"
    "test";
  gap: 0;
  align-items: start;
}
.intro-copy { grid-area: copy; }
.intro-aside { grid-area: brain; }
#test-section.test-inline,
#result-section.result-inline { grid-area: test; }

@media (min-width: 880px) {
  .intro-body {
    grid-template-columns: minmax(0, 1.15fr) minmax(320px, 1fr);
    /* Row 2 minimum locks intro-body's total height regardless of which left-
       column section is rendered (test images vs result chips/dominant). With
       row sizes phase-invariant, the brain plate (col 2 row 1+2 span,
       align-self: start) sits at exactly the same y in both phases, and the
       footer doesn't reposition between test and result. */
    grid-template-rows: max-content minmax(560px, 1fr);
    grid-template-areas:
      "copy  brain"
      "test  brain";
  }
  .intro-copy {
    align-self: start;
    border-right: 1px solid var(--rule);
  }
  #test-section.test-inline,
  #result-section.result-inline {
    align-self: stretch;
    border-right: 1px solid var(--rule);
  }
  .intro-aside {
    /* Pin the plate height so phase-driven row 2 resolution can never resize
       the plate's visible box. */
    min-height: 640px;
  }
}

.intro-copy {
  padding: 40px var(--pad-x) 36px;
  display: grid;
  gap: 28px;
  align-content: start;
  /* Bottom rule moved into .test-inline > .subhead so the right border-right
     runs uninterrupted to the corner — avoids the 1px corner gap. */
}
.lede-heading {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(20px, 2.6vw, 32px);
  letter-spacing: -0.02em;
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 12px;
}
.lede {
  font-family: var(--font-sans);
  font-size: clamp(17px, 2.1vw, 22px);
  line-height: 1.42;
  letter-spacing: -0.01em;
  font-weight: 500;
  max-width: 38ch;
}
.intro-cta { display: flex; gap: 12px; flex-wrap: wrap; }

.def-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--rule);
  padding-top: 18px;
}
.def-list dt {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  opacity: 0.6;
  padding-top: 14px;
}
.def-list dt:first-of-type { padding-top: 0; }
.def-list dd {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.55;
  margin: 6px 0 14px;
  max-width: 56ch;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 14px;
}
.def-list dd:last-of-type { border-bottom: 0; padding-bottom: 0; }

/* ============================================================
   BRAIN PLATE — ink-black inset where the canvas lives.
   The plate gives white points a legible ground on a cream page,
   matching the masthead's black-block contrast logic.
   ============================================================ */
.intro-aside {
  padding: 36px var(--pad-x) 40px;
  display: grid;
  align-items: start;
  align-self: start;     /* don't stretch the aside to fill both grid rows */
  gap: 16px;
}
.brain-plate {
  position: relative;
  background: var(--ink);
  color: var(--cream);
  border: 1px solid var(--ink);
  padding: 24px;
  display: grid;
  gap: 12px;
  align-content: stretch;
  justify-items: stretch;
}
.brain-plate canvas {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 / 1;
  display: block;
  background: var(--ink);
  cursor: default;
  touch-action: none;
}
/* Five-axis radar labels arranged in a pentagon around the brain canvas.
   Pentagon vertices at angles -90 + i*72°. Positions are hardcoded as
   percentages of the parent .brain-radar (which is the canvas's bounding
   box) so percent-translate ambiguity doesn't apply. */
/* Padding-top aspect-ratio frame + position:absolute INNER wrapper.
   The labels are positioned against .brain-radar-inner (a real square box),
   not against the padding-collapsed .brain-radar — eliminates the % top
   ambiguity that was clumping all five labels in one corner. */
.brain-radar {
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 100%;
  align-self: start;
}
.brain-radar-inner {
  position: absolute;
  inset: 0;
  isolation: isolate;
}
.brain-radar-inner > canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100% !important;
  height: 100% !important;
}
.axis-label {
  position: absolute;
  z-index: 2;
  transform: translate3d(0, 0, 0) translate(-50%, -50%);
  /* will-change forces a compositor layer so sub-pixel transforms render
     smoothly each frame — without it, browsers re-rasterize text glyphs
     and snap to integer pixels, producing visible jitter on rotation. */
  will-change: transform, opacity;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: lowercase;
  pointer-events: none;
  white-space: nowrap;
  padding: 2px 6px;
  /* Stack name + percentile under the orbit-anchor center. */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  /* Halo for legibility against the morphed brain — tight 1px outline +
     a soft outer glow. Reads cleanly over light spike fills, dark voids,
     and translucent overlap regions alike. */
  text-shadow:
    -1px -1px 0 rgba(0, 0, 0, 0.95),
     1px -1px 0 rgba(0, 0, 0, 0.95),
    -1px  1px 0 rgba(0, 0, 0, 0.95),
     1px  1px 0 rgba(0, 0, 0, 0.95),
     0 0 3px rgba(0, 0, 0, 0.85),
     0 0 6px rgba(0, 0, 0, 0.55);
  paint-order: stroke fill;
}
.axis-label-pct {
  /* Inherit per-axis color via currentColor — --ink would be invisible
     against the ink-black brain canvas. Sign tinting is via opacity, not hue,
     to keep contrast against the plate. */
  color: currentColor;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  /* Visible from boot. Default opacity is the placeholder/zero state; the
     "—" character carries the not-yet-measured signal. After computeResult,
     data-state="pos|neg|zero" lifts opacity for the live numeric. */
  opacity: 0.45;
}
.axis-label-pct[data-state="pos"],
.axis-label-pct[data-state="neg"] { opacity: 0.92; }
.axis-label-pct[data-state="zero"] { opacity: 0.45; }
/* Hide the em-dash placeholder pre-test. data-state is only set AFTER
   computeResult() runs, so before then the percentile span is invisible. */
.axis-label-pct:not([data-state]) { display: none; }
@media (max-width: 560px) {
  .axis-label-pct { display: none !important; }
}
/* Per-axis colors — must match brain.js AXIS_COLORS exactly. */
.axis-label[data-axis="synthetic"]   { color: var(--axis-synthetic); }
.axis-label[data-axis="kinetic"]     { color: var(--axis-kinetic); }
.axis-label[data-axis="inanimate"]   { color: var(--axis-inanimate); }
.axis-label[data-axis="narrative"]   { color: var(--axis-narrative); }
.axis-label[data-axis="atmospheric"] { color: var(--axis-atmospheric); }
/* Axis label positions are set per-frame by brain.js (camera-projected from
   the 3D anchor points). The previous hardcoded percent rules are replaced
   by inline transforms set in updateLabelPositions(). */
.brain-plate--hero .axis-label { font-size: 13px; }
.plate-meta {
  display: none;  /* footer credit + plate-marker square hidden per spec */
}
.plate-meta a {
  color: var(--cream);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.plate-meta a:hover { opacity: 0.8; }
.plate-marker {
  width: 10px; height: 10px;
  background: var(--cream);
}
.brain-plate--hero {
  padding: 18px;
  grid-column: 1 / -1;
}
.brain-canvas--parked {
  position: fixed;
  left: 0; top: 0;
  width: 1px !important; height: 1px !important;
  opacity: 0;
  pointer-events: none;
}
.brain-error {
  font-family: var(--font-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--cream);
  opacity: 0.7;
}

/* ============================================================
   TEST + INLINE RESULT — both occupy the same left-column grid area.
   The brain plate stays mounted in the persistent right column.
   ============================================================ */
.test-inline,
.result-inline {
  scroll-margin-top: 12px;
  background: var(--cream);
}
.test-inline {
  border-top: 0;                                  /* no rule above the subhead */
  align-self: stretch;                            /* fill row so right border is continuous to brain plate bottom */
}
.result-inline {
  display: grid;
  align-content: start;
  gap: 0;
  border-top: 1px solid var(--rule);
}
.result-inline[hidden] { display: none !important; }
.test-inline > .pair > .tile { border-top: 0; }
/* Subhead carries the horizontal rule above it (acts as the divider that was
   on .intro-copy's border-bottom). No rule below, so subhead+images stack
   directly without a line between them. */
.test-inline > .subhead { border-top: 1px solid var(--rule); border-bottom: 0; }
/* Hide the vestigial 2px progress bar — was rendering as a visible hairline
   between subhead and images. */
.test-inline > .bar { display: none; }
/* Breathing room above + below the test images — no rule. */
.test-inline > .pair {
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 28px;
  padding-bottom: 32px;
}
.test-inline > .subhead { padding-top: 22px; padding-bottom: 22px; }
.result-inline > .subhead { border-bottom: 1px solid var(--rule); }
.result-inline > .dominant {
  width: 100%;
  padding: 34px var(--pad-x) 38px;
  border-bottom: 1px solid var(--rule);
}
.dominant {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 0.22em;
  row-gap: 8px;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(72px, 10vw, 120px);
  letter-spacing: -0.03em;
  line-height: 0.9;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.dominant-value { white-space: nowrap; }
.result-inline > .block {
  padding: 28px var(--pad-x);
  border-bottom: 1px solid var(--rule);
}
.result-inline .accent {
  border-top: 0;
  padding: 28px var(--pad-x) 32px;
}
.result-summary .btn-ghost--inline { margin-left: 0; }
.result-summary #btn-share { margin-left: auto; }
.view-toggle--hud {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 4;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
  padding: 0;
  background: transparent;
  pointer-events: auto;
}
.btn-copy-brain {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--cream);
  opacity: 0.7;
  cursor: pointer;
  pointer-events: auto;
  transition: opacity var(--dur-fast) var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.btn-copy-brain:focus,
.btn-copy-brain:focus-visible { outline: none; box-shadow: none; }
.btn-copy-brain:hover { opacity: 1; }
.btn-copy-brain.is-copied { opacity: 1; color: var(--axis-narrative); }
.btn-copy-brain[hidden] { display: none !important; }
.view-toggle--hud[hidden] { display: none !important; }
.view-toggle--hud .k {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--cream);
  opacity: 0.55;
}
.view-toggle--hud .btn-ghost--inline {
  margin-left: 0;
  padding: 3px 8px;
  border-color: var(--cream);
  color: var(--cream);
  background: rgba(239, 236, 228, 0.08);
  font-size: 9px;
  line-height: 1.2;
  opacity: 0.55;
}
.view-toggle--hud .btn-ghost--inline:hover,
.view-toggle--hud .btn-ghost--inline.is-active {
  background: var(--cream);
  color: var(--ink);
  opacity: 1;
}

@media (max-width: 560px) {
  .result-summary #btn-share { margin-left: 0; }
  .result-inline .accent { grid-template-columns: 1fr; }
  .result-inline .accent-meta { text-align: left; }
}

[data-screen="test"] { gap: 0; }

.bar {
  height: 2px;
  background: var(--rule);
  border-bottom: 1px solid var(--rule);
}
.bar-fill {
  height: 100%;
  width: 0%;
  background: var(--ink);
  transition: width var(--dur-norm) var(--ease);
}

.pair {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
.tile {
  position: relative;
  display: block;
  box-sizing: border-box;
  padding-left: 14px;
  border: 0;
  background: var(--cream);
  aspect-ratio: 1 / 1;
  border-radius: 0;
  transition: opacity var(--dur-fast) var(--ease);
  overflow: hidden;
}
.tile:hover { opacity: 0.92; }
.tile:active { transform: scale(0.992); }
.tile-img {
  width: 100%; height: 100%;
  /* contain: full composition matters for taste judgment; .tile bg letterboxes. */
  object-fit: contain;
  transition: opacity var(--dur-norm) var(--ease);
}
.tile-letter {
  position: absolute; top: 14px; left: 14px;
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 500;
  color: var(--cream);
  background: var(--ink);
  padding: 4px 8px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}
.tile.is-fading .tile-img { opacity: 0; }

@media (min-width: 720px) {
  .pair { grid-template-columns: 1fr 1fr; }
  .tile { aspect-ratio: auto; min-height: 0; height: clamp(280px, 36vh, 420px); }
}

/* ============================================================
   RESULT MODULES (axis chips, agreement, accent block — see
   .result-inline above for layout)
   ============================================================ */
.block { display: grid; gap: 16px; }
.block-head { display: grid; gap: 4px; }
.block-head h3 {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 600;
}
.block-sub {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--ink);
  opacity: 0.62;
  line-height: 1.5;
}

/* axis chips — flat tiles, hairline border encodes sign */
.axis-chips {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border-top: 1px solid var(--rule);
}
@media (min-width: 540px) { .axis-chips { grid-template-columns: repeat(5, 1fr); } }
.axis-chips li {
  display: grid;
  gap: 8px;
  padding: 16px 14px;
  background: var(--cream);
  border: 1px solid var(--rule);
  border-top: 4px solid var(--ink);
}
/* No sign-tinted top border — monochrome ink for all chips. */
.axis-chips .name {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  opacity: 0.62;
}
.axis-chips .value {
  font-family: var(--font-sans);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--ink);
}

/* agreement — labeled meter rows on hairlines */
.agreement {
  list-style: none;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--rule);
}
.agreement li {
  display: grid;
  grid-template-columns: 110px 1fr 84px;
  align-items: center;
  gap: 18px;
  padding: 18px 0;
  border-bottom: 1px solid var(--rule);
}
.agreement li:last-child { border-bottom: 0; }
.agreement .label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  font-weight: 500;
}
.agreement .meter {
  height: 3px;
  background: var(--rule);
  position: relative;
}
.agreement .meter-fill {
  height: 100%;
  background: var(--ink);
  width: 0%;
  transition: width 600ms var(--ease);
}
.agreement .pct {
  font-family: var(--font-sans);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--ink);
}
.agreement li.skipped .meter-fill { background: var(--rule-strong); }
.agreement li.skipped .pct { opacity: 0.4; }

/* ============================================================
   ACCENT BLOCK (canonical: full-width single solid color band,
   one big lowercase title + right-aligned meta + small marker)
   ============================================================ */
.accent {
  background: var(--cream);
  color: var(--ink);
  padding: 56px var(--pad-x) 64px;
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 24px;
  border-top: 1px solid var(--rule);
}
.accent[data-variant="quiet"] { padding: 28px var(--pad-x) 32px; }
.accent-title {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(40px, 7vw, 112px);
  letter-spacing: -0.03em;
  line-height: 0.9;
  text-transform: lowercase;
  word-break: break-word;
}
.accent[data-variant="quiet"] .accent-title { font-size: clamp(28px, 4.5vw, 68px); }
.accent-meta {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(24px, 3.6vw, 52px);
  letter-spacing: -0.02em;
  line-height: 1;
  align-self: end;
  text-align: right;
  padding-bottom: 4px;
  font-variant-numeric: tabular-nums;
}
.accent[data-variant="quiet"] .accent-meta { font-size: clamp(18px, 2.6vw, 32px); }
.accent-marker {
  position: absolute;
  top: 24px; right: var(--pad-x);
  width: 14px; height: 14px;
  background: var(--ink);
}

/* ============================================================
   FOOTER (canonical: hairline-bordered mono caps strip)
   ============================================================ */
.footer {
  padding: 16px var(--pad-x);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  text-align: center;
  border-top: 1px solid var(--rule);
  background: var(--cream);
}
.footer a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.footer a:hover { opacity: 0.7; }

/* ============================================================
   RESPONSIVE COLLAPSE
   ============================================================ */
@media (max-width: 900px) {
  :root { --pad-x: var(--pad-x-md); }
  .mast-meta { font-size: 10px; }
}
@media (max-width: 560px) {
  :root { --pad-x: var(--pad-x-sm); }
  .mast-row { grid-template-columns: 1fr; }
  .mast-meta { text-align: left; padding-bottom: 0; padding-top: 12px; }
  .axis-chips { grid-template-columns: repeat(2, 1fr); }
  .axis-chips li { border-right: 1px solid var(--rule); }
  .axis-chips li:nth-child(2n) { border-right: 0; }
  .agreement li { grid-template-columns: 80px 1fr 64px; gap: 12px; }
  .accent { padding: 36px var(--pad-x) 44px; }
}

/* ============================================================
   CAPTURE FOOTER NOTICE (passive disclosure, no banner)
   ============================================================ */
.footer-privacy {
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: none;
  opacity: 0.7;
  max-width: 760px;
  margin: 8px auto 0;
  line-height: 1.45;
}