/* =========================================================================
   Tshumu Advisory & Consulting — financial broadsheet
   Grammar: chaptered editorial. Grounds hard-cut per chapter, never drift.
   ========================================================================= */

:root {
  /* paper */
  --sc-canvas:     #F4F0E6;
  --sc-surface:    #EBE4D2;
  --sc-ink:        #17140E;
  --sc-ink-soft:   #57503F;
  --sc-accent:     #0E6E67;
  --sc-accent-ink: #F4F0E6;

  --sc-font-display: "Zodiak", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sc-font-text:    "General Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;

  --sc-hairline:        color-mix(in srgb, var(--sc-ink) 16%, transparent);
  --sc-hairline-strong: color-mix(in srgb, var(--sc-ink) 34%, transparent);
  --sc-shadow-color:    32 26 12;
  --sc-r-sm: 0; --sc-r-md: 0; --sc-r-lg: 0; --sc-r-pill: 0;

  --folio-w: 15.5rem;
  --gut: clamp(1.25rem, 4vw, 3.25rem);
  --measure: 34rem;
}

/* the one inversion, and the colophon that bookends it */
.ch--ink {
  --sc-canvas:     #17140E;
  --sc-surface:    #211D14;
  --sc-ink:        #F2EDDF;
  --sc-ink-soft:   #A79C84;
  --sc-accent:     #4FC7B9;
  --sc-accent-ink: #17140E;
  --sc-hairline:        color-mix(in srgb, var(--sc-ink) 20%, transparent);
  --sc-hairline-strong: color-mix(in srgb, var(--sc-ink) 40%, transparent);
  /* colour resolves on body, so restating the token is not enough */
  color: var(--sc-ink);
}

html { background: #F4F0E6; }
body {
  background: var(--sc-canvas);
  color: var(--sc-ink);
  font-family: var(--sc-font-text);
  font-size: clamp(1rem, 0.94rem + 0.28vw, 1.125rem);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
::selection { background: var(--sc-accent); color: var(--sc-accent-ink); }
:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 3px; }

.skip {
  position: fixed; top: 0; left: 0; z-index: 999;
  padding: 0.7rem 1.1rem; background: var(--sc-ink); color: var(--sc-canvas);
  translate: 0 -110%;
}
.skip:focus-visible { translate: 0 0; }

/* ------------------------------------------------------------- typography */
.h-lg, .h-md, .mast__title {
  font-family: var(--sc-font-display);
  font-weight: 500;
  line-height: 0.98;
  letter-spacing: -0.022em;
  text-wrap: balance;
  margin: 0;
}
.mast__title { font-size: clamp(3rem, 1.4rem + 7.2vw, 8.5rem); line-height: 0.92; letter-spacing: -0.03em; max-width: 14ch; }
.h-lg        { font-size: clamp(2.3rem, 1.4rem + 3.5vw, 4.6rem); }
.h-md        { font-size: clamp(1.9rem, 1.3rem + 2.2vw, 3.1rem); }

p { margin: 0; text-wrap: pretty; }

.rubric, .chapno, .plate__no, .plate__spec, .folio__index, .ledger, .masthead-plate dt {
  font-family: var(--sc-font-text);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.rubric, .chapno { color: var(--sc-accent); margin: 0 0 var(--sc-6); }
.chapno { padding-bottom: 0.6rem; border-bottom: 1px solid var(--sc-hairline-strong); }

.deck    { font-size: clamp(1.15rem, 1rem + 0.7vw, 1.5rem); line-height: 1.48; max-width: var(--measure); }
.lede    { font-size: clamp(1.05rem, 0.98rem + 0.4vw, 1.24rem); line-height: 1.55; max-width: var(--measure); color: var(--sc-ink-soft); }
.note    { max-width: 30rem; color: var(--sc-ink-soft); }
.byline  { max-width: var(--measure); color: var(--sc-ink-soft); }
.byline b { color: var(--sc-ink); font-weight: 600; }
.fine    { font-size: 0.82rem; line-height: 1.55; color: var(--sc-ink-soft); max-width: 44rem; }

.link {
  color: var(--sc-ink); text-decoration: underline;
  text-decoration-color: var(--sc-accent);
  text-decoration-thickness: 1px; text-underline-offset: 0.28em;
  transition: text-decoration-thickness 140ms var(--sc-ease-out), color 140ms var(--sc-ease-out);
}
.link:hover { color: var(--sc-accent); text-decoration-thickness: 2px; }
.link--strong { font-weight: 600; }
.rule { display: inline-block; width: 2.5rem; height: 1px; background: var(--sc-hairline-strong); vertical-align: middle; margin: 0 1rem; }

/* --------------------------------------------------------------- the grid */
.ch { position: relative; background: var(--sc-canvas); }
.ch--paper { background: #F4F0E6; }
.ch--tint  { background: #EBE4D2; }
.ch--ink   { background: #17140E; }

/* --folio-w is the fixed nav's own width. Clearing it takes folio-w PLUS a
   real gutter: max(gut, folio-w) collapses to folio-w alone whenever the
   folio is wider than the gutter (it always is), which butts the content
   flush against the nav with no air at all. */
.col {
  width: 100%; max-width: 72rem;
  margin-inline: auto;
  padding-inline: var(--gut);
  padding-left: calc(var(--folio-w) + var(--gut));
}
.col--wide { max-width: 84rem; }
.ch[data-sc-act="flow"] > .col { padding-block: clamp(4.5rem, 11vh, 9rem); }

.stage { display: grid; align-content: center; padding-inline: var(--gut); }
/* Apply to any pinned stage whose content sits directly in the grid (not the
   pan rail, which clears the folio on its own scrolling element instead: see
   below, and devices.md's overflow-measurement note on why). */
.stage--split, .stage--wall, .stage--colophon { padding-left: calc(var(--folio-w) + var(--gut)); }

/* ============================================================== THE FOLIO */
.folio {
  position: fixed; inset-block: 0; left: 0; z-index: 60;
  width: var(--folio-w);
  display: flex; flex-direction: column; gap: var(--sc-5);
  padding: clamp(1.25rem, 3vh, 2rem) 1.1rem clamp(1.25rem, 3vh, 2rem) var(--gut);
  border-right: 1px solid var(--sc-hairline);
  background: color-mix(in srgb, var(--sc-canvas) 88%, transparent);
  backdrop-filter: blur(9px);
  color: var(--sc-ink);
  transition: background 420ms linear, color 420ms linear, border-color 420ms linear;
}
.folio.is-ink {
  --sc-ink: #F2EDDF; --sc-ink-soft: #A79C84; --sc-accent: #4FC7B9;
  --sc-hairline: rgba(242,237,223,0.2); --sc-hairline-strong: rgba(242,237,223,0.4);
  color: #F2EDDF;
  background: color-mix(in srgb, #17140E 88%, transparent);
}
.folio__mark { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; color: inherit; }
.folio__mark img { width: 1.65rem; height: 1.65rem; object-fit: contain; }
.folio__mark span { font-family: var(--sc-font-display); font-size: 1.12rem; line-height: 1.05; letter-spacing: -0.01em; }
.folio__mark i { display: block; font-style: normal; font-family: var(--sc-font-text); font-size: 0.56rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sc-ink-soft); margin-top: 0.22rem; }

.folio__index { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.1rem; }
.folio__index a {
  display: grid; grid-template-columns: 1.6rem 1fr; align-items: baseline;
  padding: 0.42rem 0; color: var(--sc-ink-soft); text-decoration: none;
  border-top: 1px solid var(--sc-hairline);
  transition: color 150ms var(--sc-ease-out);
}
.folio__index li:last-child a { border-bottom: 1px solid var(--sc-hairline); }
.folio__index em { font-style: normal; color: var(--sc-accent); }
.folio__index a:hover { color: var(--sc-ink); }
.folio__index a.is-here { color: var(--sc-ink); }
.folio__index a.is-here em { text-decoration: underline; text-underline-offset: 0.2em; }

.folio__cta {
  margin-top: auto;
  display: inline-block; text-align: center;
  padding: 0.72rem 0.9rem;
  background: var(--sc-accent); color: var(--sc-accent-ink);
  font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600;
  text-decoration: none;
  transition: transform 120ms var(--sc-ease-out), background 150ms var(--sc-ease-out);
}
.folio.is-ink .folio__cta { color: #17140E; }
.folio__cta:hover { background: color-mix(in srgb, var(--sc-accent) 82%, var(--sc-ink)); }
.folio__cta:active { transform: translateY(1px); }

/* ------------------------------- THE SIGNATURE MOVE: the margin apparatus */
.ledger { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.ledger__head {
  display: flex; justify-content: space-between; align-items: baseline;
  color: var(--sc-ink-soft); padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--sc-hairline);
}
.ledger__head b { color: var(--sc-accent); font-weight: 600; }
.ledger__list { list-style: none; margin: 0.7rem 0 0; padding: 0; display: grid; gap: 0.62rem; align-content: start; }
.ledger__list li {
  position: relative;
  font-size: 0.7rem; line-height: 1.35; letter-spacing: 0.005em;
  color: var(--sc-ink-soft);
  padding-left: 1.15rem;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 420ms var(--sc-ease-out), transform 420ms var(--sc-ease-out);
}
.ledger__list li.is-in { opacity: 1; transform: none; }
.ledger__list li.is-gone { opacity: 0; transform: none; transition: opacity 220ms linear; }
.ledger__list li::before {
  content: counter(list-item);
  position: absolute; left: 0; top: 0.05em;
  font-size: 0.58rem; font-variant-numeric: tabular-nums;
  color: var(--sc-accent);
}

/* the marker in the running text */
[data-tsh-ev] {
  position: relative;
  box-shadow: inset 0 -1px 0 var(--sc-hairline-strong);
}
[data-tsh-ev] sup {
  font-size: 0.58em; font-weight: 600; color: var(--sc-accent);
  vertical-align: super; line-height: 0; margin-left: 0.15em;
  font-variant-numeric: tabular-nums;
}
[data-tsh-ev].is-logged { box-shadow: inset 0 -1px 0 var(--sc-accent); }

/* the flight layer the ledger lines cross on their way to the wall */
.flight { position: fixed; inset: 0; z-index: 70; pointer-events: none; }
.flight .fl {
  position: fixed;
  font-family: var(--sc-font-text);
  font-size: 0.7rem; line-height: 1.35; letter-spacing: 0.005em;
  color: #A79C84;
  will-change: transform, opacity;
}

/* ============================================================= 1 MASTHEAD */
.masthead .col { padding-block: clamp(5rem, 14vh, 10rem) clamp(3.5rem, 9vh, 6rem); }
.mast__deck {
  display: grid; gap: var(--sc-5);
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  margin-top: clamp(2rem, 5vh, 3.4rem);
  padding-top: var(--sc-5);
  border-top: 1px solid var(--sc-hairline-strong);
}
.mast__foot { margin-top: clamp(2rem, 5vh, 3rem); }

/* ============================================================ 2 CHAPTER I */
.stage--split {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.ch__head { display: grid; align-content: start; gap: var(--sc-4); }
.ch__head .lede, .ch__head .note { margin-top: 0.2rem; }
.ch__head--flat { gap: var(--sc-4); margin-bottom: clamp(2.5rem, 6vh, 4rem); }

.fig { margin: 0; display: grid; gap: var(--sc-4); }
.fig figcaption, .method__fig figcaption {
  font-size: 0.74rem; color: var(--sc-ink-soft); letter-spacing: 0.01em;
  padding-top: 0.6rem; border-top: 1px solid var(--sc-hairline);
  max-width: 26rem;
}
.tangle { width: 100%; height: auto; overflow: visible; }
.tangle__strands path {
  stroke: var(--sc-ink-soft); stroke-width: 1.4;
  stroke-dasharray: 1;
  --t: calc((var(--sc-p, 0) - var(--s)) / 0.42);
  stroke-dashoffset: clamp(0, calc(1 - var(--t)), 1);
  opacity: clamp(0.25, calc(0.25 + var(--t) * 0.75), 1);
}
.tangle__out {
  stroke: var(--sc-accent); stroke-width: 3.4; stroke-linecap: round;
  stroke-dasharray: 1;
  --t: calc((var(--sc-p, 0) - 0.58) / 0.3);
  stroke-dashoffset: clamp(0, calc(1 - var(--t)), 1);
}
.tangle__node circle { fill: none; stroke: var(--sc-ink); stroke-width: 1.4;
  opacity: clamp(0, calc((var(--sc-p, 0) - 0.5) / 0.1), 1);
  transform-box: fill-box; transform-origin: center;
  scale: clamp(0.6, calc(0.6 + (var(--sc-p, 0) - 0.5) / 0.1 * 0.4), 1);
}
.tangle__pip { fill: var(--sc-accent); stroke: none; }
.tangle__ticks path {
  stroke: var(--sc-hairline-strong); stroke-width: 1; stroke-dasharray: 1;
  --t: calc((var(--sc-p, 0) - 0.74) / 0.2);
  stroke-dashoffset: clamp(0, calc(1 - var(--t)), 1);
}

/* =========================================================== 3 CHAPTER II */
.rail {
  display: flex; align-items: stretch; gap: clamp(2rem, 3.4vw, 3.4rem);
  padding-block: clamp(3rem, 8vh, 5rem);
  /* The pan device translates THIS element by exactly (scrollWidth - viewport
     width), so the folio clearance has to be padding on the rail itself, not
     on an ancestor. Padding on .stage instead is invisible to that formula:
     the rail starts already shifted right by the ancestor's padding, the
     engine's travel does not know about that shift, and the rail overshoots
     past the right edge by the same amount at p=1, clipping whatever was
     last (here, the CTA in .rail__end). See devices.md: "measure the
     overflow, do not assume it." */
  padding-left: calc(var(--folio-w) + var(--gut));
  padding-right: var(--gut);
}
.rail > * { flex: 0 0 auto; }
.rail__lead { width: clamp(17rem, 26vw, 24rem); display: grid; align-content: center; gap: var(--sc-4); }
.rail__end  { width: clamp(16rem, 22vw, 21rem); display: grid; align-content: center; gap: var(--sc-5);
              padding-left: clamp(1.5rem, 2.4vw, 2.4rem); border-left: 1px solid var(--sc-hairline); }

.plate {
  width: clamp(16.5rem, 23vw, 21.5rem);
  display: grid; align-content: start; gap: var(--sc-3);
  padding-top: 1.1rem;
  border-top: 2px solid var(--sc-ink);
}
.plate__no { color: var(--sc-ink-soft); margin: 0; }
.plate h3 {
  font-family: var(--sc-font-display); font-weight: 500;
  font-size: clamp(2.1rem, 1.5rem + 1.7vw, 3rem); line-height: 0.98;
  letter-spacing: -0.02em; margin: 0.2rem 0 0;
}
.plate__sub { font-weight: 600; font-size: 0.95rem; }
.plate p { font-size: 0.95rem; line-height: 1.58; color: var(--sc-ink-soft); }
.plate__spec {
  margin-top: 0.4rem; padding-top: 0.7rem;
  border-top: 1px solid var(--sc-hairline);
  color: var(--sc-accent) !important; font-size: 0.68rem !important;
}

@media (prefers-reduced-motion: no-preference) {
  .rail > :not(.rail__lead) {
    --d: calc((var(--sc-p, 0) - var(--i, 0) * 0.09) / 0.4);
    opacity: clamp(0.55, var(--d), 1);
    transform: translateY(clamp(0px, calc((1 - var(--d)) * 16px), 16px));
  }
}
@media (prefers-reduced-motion: reduce) {
  .rail { padding-inline: var(--gut); }
}

/* ========================================================== 4 CHAPTER III */
.method {
  display: grid; gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  align-items: start;
}
.method__steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.method__steps li {
  counter-increment: step;
  display: grid; grid-template-columns: 2.6rem 1fr; gap: 0 var(--sc-4);
  padding: var(--sc-5) 0;
  border-top: 1px solid var(--sc-hairline);
}
.method__steps li:last-child { border-bottom: 1px solid var(--sc-hairline); }
.method__steps li::before {
  content: counter(step, decimal-leading-zero);
  grid-row: 1 / span 2;
  font-size: 0.7rem; letter-spacing: 0.14em; font-weight: 600;
  color: var(--sc-accent); font-variant-numeric: tabular-nums;
  padding-top: 0.35em;
}
.method__steps b { font-family: var(--sc-font-display); font-weight: 500; font-size: 1.5rem; letter-spacing: -0.015em; }
.method__steps span { color: var(--sc-ink-soft); font-size: 0.97rem; }
.method__fig { margin: 0; display: grid; gap: var(--sc-4); }
.method__fig img { width: 100%; height: auto; mix-blend-mode: multiply; }

.outcomes {
  list-style: none; margin: clamp(2.5rem, 6vh, 4rem) 0 var(--sc-5); padding: var(--sc-5) 0 0;
  border-top: 2px solid var(--sc-ink);
  display: grid; gap: var(--sc-5);
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}
.outcomes b { display: block; font-family: var(--sc-font-display); font-weight: 500;
  font-size: clamp(1.7rem, 1.2rem + 1.4vw, 2.5rem); letter-spacing: -0.02em; line-height: 1; }
.outcomes span { display: block; margin-top: 0.5rem; color: var(--sc-ink-soft); font-size: 0.92rem; }
.standing { max-width: var(--measure); margin-bottom: var(--sc-4); }

/* ============================================================== 5 THE PLATE */
.plate-quiet .col { padding-block: clamp(5rem, 16vh, 11rem); }
.quiet {
  font-family: var(--sc-font-display); font-weight: 400;
  font-size: clamp(1.7rem, 1rem + 3vw, 3.6rem);
  line-height: 1.12; letter-spacing: -0.022em;
  max-width: 22ch; text-wrap: balance;
}

/* =================================== 6 CHAPTER IV — the peak, the collation */
.stage--wall {
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  padding-block: clamp(2rem, 6vh, 4rem);
}
.wall__head { display: grid; align-content: center; gap: var(--sc-4); }
.wall { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.wall li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline; gap: 0.3rem 1.5rem;
  padding: clamp(0.55rem, 1.4vh, 0.95rem) 0;
  border-top: 1px solid var(--sc-hairline);
  opacity: 0;
}
.wall li:last-child { border-bottom: 1px solid var(--sc-hairline); }
.wall li.is-set { opacity: 1; transition: opacity 460ms var(--sc-ease-out); }
.wall b {
  grid-column: 1; font-family: var(--sc-font-display); font-weight: 500;
  font-size: clamp(1.15rem, 0.9rem + 0.9vw, 1.72rem); letter-spacing: -0.018em; line-height: 1.1;
}
.wall span { grid-column: 1; font-size: 0.86rem; color: var(--sc-ink-soft); }
.wall i {
  grid-column: 2; grid-row: 1 / span 2; font-style: normal;
  font-size: 0.7rem; letter-spacing: 0.13em; text-transform: uppercase; font-weight: 600;
  color: var(--sc-accent); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.wall__foot { margin-top: var(--sc-5); grid-column: 1 / -1; max-width: 42rem;
  color: var(--sc-ink-soft); font-size: 0.92rem; }

/* ============================================================= 7 CHAPTER V */
/* the assessment. Markup and field names are unchanged: the Netlify function
   keys off them. */
.quiz { max-width: 46rem; }
.quiz__panel { display: none; }
.quiz__panel.is-active { display: block; }
.quiz__kicker { font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; color: var(--sc-accent); margin-bottom: var(--sc-4); }
.quiz__lede { color: var(--sc-ink-soft); max-width: var(--measure); margin-bottom: var(--sc-5); }
.quiz__ready { font-family: var(--sc-font-display); font-size: 1.5rem; letter-spacing: -0.015em; margin-bottom: var(--sc-3); }
.quiz__fine { font-size: 0.8rem; color: var(--sc-ink-soft); margin-top: var(--sc-4); }
.quiz__disclaimer { display: none; }
.quiz__link { color: var(--sc-accent); }

.btn {
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 0.85rem 1.4rem; border: 0; cursor: pointer;
  background: var(--sc-ink); color: var(--sc-canvas);
  font-family: inherit; font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none;
  transition: background 150ms var(--sc-ease-out), transform 110ms var(--sc-ease-out);
}
.btn:hover { background: var(--sc-accent); color: var(--sc-accent-ink); }
.btn:active { transform: translateY(1px); }
.btn--block { width: 100%; justify-content: center; }

.quiz__bar { height: 2px; background: var(--sc-hairline); margin-bottom: var(--sc-4); }
.quiz__bar span { display: block; height: 100%; width: 0; background: var(--sc-accent); transition: width 320ms var(--sc-ease-out); }
.quiz__count { font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; color: var(--sc-ink-soft); margin-bottom: var(--sc-5); }

.qq { border: 0; margin: 0; padding: 0; }
.qq__q { font-family: var(--sc-font-display); font-weight: 500; font-size: clamp(1.35rem, 1.1rem + 1vw, 2rem);
  line-height: 1.16; letter-spacing: -0.018em; padding: 0; margin-bottom: var(--sc-5); display: block; }
.qq__n { display: block; text-transform: uppercase; font-family: var(--sc-font-text); font-size: 0.68rem; letter-spacing: 0.16em;
  color: var(--sc-accent); margin-bottom: 0.9rem; font-weight: 600; }
.qq__opts { display: grid; gap: 0; }
.qq__opt {
  display: grid; grid-template-columns: 1.9rem 1fr; align-items: baseline; gap: 0.8rem;
  padding: var(--sc-4) 0.6rem var(--sc-4) 0;
  border-top: 1px solid var(--sc-hairline); cursor: pointer;
  transition: background 130ms var(--sc-ease-out), padding-left 130ms var(--sc-ease-out);
}
.qq__opts label:last-of-type { border-bottom: 1px solid var(--sc-hairline); }
.qq__opt:hover { background: color-mix(in srgb, var(--sc-accent) 8%, transparent); }
.qq__opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.qq__opt input:focus-visible + span, .qq__opt:focus-within { outline: 2px solid var(--sc-accent); outline-offset: 2px; }
.qq__opt .qq__key { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.12em; color: var(--sc-accent); }
.qq__opt input:checked ~ * { color: var(--sc-ink); }
.quiz__nav { margin-top: var(--sc-5); }
.quiz__back, .quiz__retake {
  background: none; border: 0; cursor: pointer; font: inherit; font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--sc-ink-soft);
  display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.5rem 0;
}
.quiz__back:hover, .quiz__retake:hover { color: var(--sc-accent); }

.qform { display: grid; gap: var(--sc-5); margin-top: var(--sc-5); }
.qform__row { display: grid; gap: var(--sc-4); grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.qform__hp { position: absolute; left: -9999px; }
.qfield { display: grid; gap: 0.45rem; }
.qfield label, .qfield legend { font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; color: var(--sc-ink-soft); }
.qfield input[type="text"], .qfield input[type="email"], .qfield input[type="tel"], .qfield select {
  font: inherit; font-size: 0.98rem; padding: 0.7rem 0.2rem;
  background: transparent; color: var(--sc-ink);
  border: 0; border-bottom: 1px solid var(--sc-hairline-strong);
  transition: border-color 150ms var(--sc-ease-out);
}
.qfield input:focus, .qfield select:focus { outline: none; border-bottom-color: var(--sc-accent); }
.qfield--checks { border: 0; margin: 0; padding: 0; }
.qfield--checks legend small { text-transform: none; letter-spacing: 0.02em; font-weight: 400; }
.qchecks { display: grid; gap: 0.15rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); margin-top: 0.7rem; }
.qchecks label, .qconsent { display: flex; gap: 0.65rem; align-items: flex-start; cursor: pointer; font-size: 0.92rem; padding: 0.35rem 0; }
.qconsent { color: var(--sc-ink-soft); }
.req { color: var(--sc-accent); }
.qform__note { font-size: 0.85rem; color: var(--sc-accent); }

.qresult { border-top: 2px solid var(--sc-ink); padding-top: var(--sc-5); display: grid; gap: var(--sc-4); justify-items: start; }
.qresult__dot { width: 0.7rem; height: 0.7rem; background: var(--sc-accent); display: block; }
.qresult__dot[data-band="red"]   { background: #C0453B; }
.qresult__dot[data-band="amber"] { background: #B4762A; }
.qresult__dot[data-band="green"] { background: #0E6E67; }
.qresult__score { font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; color: var(--sc-ink-soft); }
.qresult__title { font-family: var(--sc-font-display); font-weight: 500; font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.7rem); line-height: 1.06; letter-spacing: -0.02em; margin: 0; }
.qresult__body p { color: var(--sc-ink-soft); max-width: var(--measure); }
.qresult__body p + p { margin-top: var(--sc-3); }

/* ============================================================= 8 COLOPHON */
.stage--colophon { align-content: center; }
.colophon .col { padding-inline: 0; }
.cform-grid {
  display: grid; gap: clamp(2.5rem, 5vw, 5rem);
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.86fr);
  align-items: start;
}
.colophon .running { max-width: 32rem; margin-top: var(--sc-5); font-size: clamp(1.02rem, 0.95rem + 0.4vw, 1.2rem); color: var(--sc-ink-soft); }
.colophon .running a { color: var(--sc-ink); }
.fine--foot { margin-top: clamp(2rem, 5vh, 3rem); }

.cform-links {
  margin-top: clamp(1.75rem, 4vh, 2.5rem); padding-top: var(--sc-5);
  border-top: 1px solid var(--sc-hairline);
  display: grid; gap: var(--sc-4);
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}
.cform-link { display: block; text-decoration: none; color: inherit; }
.cform-link small {
  display: block; font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase;
  font-weight: 600; color: var(--sc-accent); margin-bottom: 0.35rem;
}
.cform-link b { font-weight: 500; font-size: 1rem; color: var(--sc-ink); }
a.cform-link:hover b { color: var(--sc-accent); }

/* the restored review-request form, set in the same document idiom as the
   assessment: underline fields, no boxes, no card. */
.cform { display: grid; gap: var(--sc-4); padding-top: clamp(0.5rem, 2vh, 1.4rem); }
.cfield { display: grid; gap: 0.4rem; }
.cfield label {
  font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase;
  font-weight: 600; color: var(--sc-ink-soft);
}
.cfield input, .cfield textarea {
  font: inherit; font-size: 0.98rem; padding: 0.6rem 0.1rem;
  background: transparent; color: var(--sc-ink);
  border: 0; border-bottom: 1px solid var(--sc-hairline-strong);
  transition: border-color 150ms var(--sc-ease-out);
  resize: vertical;
}
.cfield input::placeholder, .cfield textarea::placeholder { color: var(--sc-ink-soft); opacity: 0.7; }
.cfield input:focus, .cfield textarea:focus { outline: none; border-bottom-color: var(--sc-accent); }
.cform .btn { margin-top: var(--sc-2); background: var(--sc-accent); color: var(--sc-accent-ink); }
.cform .btn:hover { background: color-mix(in srgb, var(--sc-accent) 82%, white); }
.cform__note { font-size: 0.85rem; color: var(--sc-accent); min-height: 1.2em; }

/* ============================================================ RESPONSIVE  */
@media (max-width: 1080px) {
  :root { --folio-w: 0rem; }
  .folio {
    inset: auto 0 0 0; width: 100%; height: auto;
    flex-direction: row; align-items: center; gap: 0.9rem;
    padding: 0.6rem var(--gut);
    border-right: 0; border-top: 1px solid var(--sc-hairline);
  }
  .folio__mark i, .folio__index { display: none; }
  .folio__cta { margin-top: 0; padding: 0.6rem 0.85rem; }
  .ledger { flex: 1 1 auto; min-width: 0; }
  .ledger__head { border: 0; padding: 0; }
  .ledger__head span { display: none; }
  .ledger__head::before { content: "On the record"; font-size: 0.6rem; letter-spacing: 0.14em; }
  .ledger__list { margin: 0; gap: 0; grid-auto-flow: column; }
  .ledger__list li { display: none; font-size: 0.64rem; padding-left: 0.9rem; }
  .ledger__list li:last-child { display: block; }
  main { padding-bottom: 4.2rem; }
  .stage--split, .stage--wall, .method, .cform-grid { grid-template-columns: minmax(0, 1fr); }
  .stage--split { align-content: center; gap: var(--sc-5); }
  .fig { display: none; }
  .method__fig { max-width: 18rem; }

  /* The pinned close is a fixed 100vh stage, and a stacked intro-plus-form
     routinely runs taller than a phone viewport once the fixed folio bar
     claims its own strip at the bottom. Let the column scroll internally
     rather than clip the submit button off the bottom of the screen. */
  .stage--colophon { align-content: stretch; padding-block: clamp(1.25rem, 4vh, 2rem); }
  .cform-grid {
    max-height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch;
    padding-bottom: clamp(4.5rem, 14vh, 6rem);
    gap: clamp(2rem, 6vh, 3rem);
  }
}
@media (max-width: 700px) {
  .mast__title { font-size: clamp(2.5rem, 1.4rem + 6.4vw, 3.4rem); }
  .stage--wall { padding-block: var(--sc-5); }
  .wall li { padding: 0.5rem 0; grid-template-columns: minmax(0, 1fr); }
  .wall i { grid-column: 1; grid-row: auto; }
  .wall b { font-size: 1.1rem; }
  .wall__foot { display: none; }
  .rail__lead { width: 78vw; }
  .plate { width: 74vw; }
  .rail__end { width: 78vw; }
}

@media (prefers-reduced-motion: reduce) {
  .ledger__list li { opacity: 1; transform: none; }
  .wall li { opacity: 1; }
  .tangle__strands path, .tangle__out, .tangle__ticks path { stroke-dashoffset: 0; opacity: 1; }
  .tangle__node circle { opacity: 1; scale: 1; }
}