/* ===========================================================================
   Growing, but Not Yet Steady
   ---------------------------------------------------------------------------
   An editorial ground of warm paper and dark ink. Colour carries meaning and
   is always doubled by a label, a line style or a texture:

     ember  #D45B3E   change, imbalance, departure from steady state
     teal   #167D78   intervals the paper's criteria support as steady state
     soft   #C8C2B8   context and comparison

   Two typefaces, two jobs. Satoshi (self-hosted, variable) carries both the
   display headlines and the reading argument. IBM Plex Mono carries every
   number, label and status tag, which is the vernacular of the instrument
   the original study was built on.
   ========================================================================== */

@font-face {
  font-family: "Satoshi";
  src: url("assets/fonts/Satoshi-Variable.woff2") format("woff2-variations"),
       url("assets/fonts/Satoshi-Variable.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("assets/fonts/Satoshi-VariableItalic.woff2") format("woff2-variations"),
       url("assets/fonts/Satoshi-VariableItalic.woff2") format("woff2");
  font-weight: 300 900;
  font-style: italic;
  font-display: swap;
}

:root {
  --paper:      #FFFFFF;
  --paper-deep: #EEE8DC;
  --paper-warm: #FCFAF6;
  --ink:        #20201E;
  --ink-muted:  #67645E;
  --ember:      #D45B3E;
  --ember-deep: #A63F27;
  --teal:       #167D78;
  --teal-deep:  #0E5B57;
  --soft:       #C8C2B8;
  --rule:       #D8D2C6;

  --display: "Satoshi", "Inter", -apple-system, Helvetica, Arial, sans-serif;
  --body:    "Satoshi", "Inter", -apple-system, Helvetica, Arial, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --measure:  34rem;   /* the reading column */
  --band:     58rem;   /* figures that break out of the column */
  --bleed:    76rem;   /* the widest a graphic ever gets */
  --rail:     11rem;   /* left margin rail on wide screens */

  --step: clamp(1.05rem, 0.98rem + 0.3vw, 1.175rem);
}

/* --- reset and ground ---------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background-color: var(--paper);
  /* A faint grain so the ground reads as paper rather than flat fill. */
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--step);
  line-height: 1.62;
  font-weight: 400;
  overflow-x: hidden;
}

img, svg, canvas { max-width: 100%; height: auto; display: block; }

a {
  color: var(--ink);
  text-decoration-color: var(--ember);
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}
a:hover { color: var(--ember-deep); }

:focus-visible {
  outline: 2px solid var(--ember);
  outline-offset: 3px;
  border-radius: 2px;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.skip-link {
  position: absolute; left: 0.5rem; top: -3rem; z-index: 100;
  background: var(--ink); color: var(--paper); padding: 0.5rem 0.9rem;
  font-family: var(--mono); font-size: 0.8rem; transition: top 0.15s;
}
.skip-link:focus { top: 0.5rem; }

/* --- Quarto chrome ------------------------------------------------------- */

#quarto-content > * { padding-top: 0; padding-bottom: 0; }
main.content { padding: 0; margin: 0; max-width: none; }
#title-block-header { display: none; }

.navbar {
  background: transparent;
  border-bottom: 1px solid var(--rule);
  padding: 0.6rem 1.25rem;
  display: flex; align-items: baseline; gap: 1rem;
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  position: relative; z-index: 20;
}
.navbar a { color: var(--ink-muted); text-decoration: none; }
.navbar a:hover { color: var(--ember-deep); text-decoration: underline; }
.navbar .navbar-nav { display: flex; gap: 1.1rem; list-style: none; margin: 0; padding: 0; }
.navbar > .navbar-nav:last-child, .navbar .navbar-nav.ms-auto { margin-left: auto; }
.navbar-brand-container .navbar-brand { display: none; }

footer.footer {
  border-top: 1px solid var(--rule);
  margin-top: 5rem; padding: 2rem 1.25rem 3.5rem;
  font-family: var(--mono); font-size: 0.72rem; line-height: 1.7;
  color: var(--ink-muted);
  display: flex; flex-wrap: wrap; gap: 1.5rem; justify-content: space-between;
}
footer.footer p { margin: 0; max-width: 34em; }
footer.footer em { font-style: italic; }

/* --- layout scaffolding -------------------------------------------------- */

.essay { padding: 0 1.25rem; }

.col,
.essay > p, .essay > h2, .essay > h3, .essay > ul, .essay > ol,
.essay > blockquote, .essay > .callout {
  max-width: var(--measure);
  margin-left: auto; margin-right: auto;
}

.band  { max-width: var(--band);  margin: 3.25rem auto; }
.bleed { max-width: var(--bleed); margin: 3.75rem auto; }

/* --- opening ------------------------------------------------------------- */

.opener {
  max-width: var(--bleed);
  margin: 0 auto;
  padding: clamp(3rem, 9vh, 6.5rem) 1.25rem 2rem;
}

.eyebrow {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 0 1.6rem;
}
.eyebrow .sep { color: var(--soft); padding: 0 0.45em; }

.opener h1 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(3rem, 10.5vw, 7.5rem);
  line-height: 0.92;
  letter-spacing: -0.015em;
  margin: 0 0 0.4em;
  max-width: 13ch;
}
.opener h1 em { font-style: italic; color: var(--ember); }

.standfirst {
  font-family: var(--body);
  font-size: clamp(1.15rem, 1.02rem + 0.6vw, 1.5rem);
  line-height: 1.45;
  font-weight: 300;
  color: var(--ink-muted);
  max-width: 34ch;
  margin: 0;
}

.byline {
  font-family: var(--mono); font-size: 0.72rem; line-height: 1.75;
  color: var(--ink-muted); margin-top: 3rem;
  padding-top: 1rem; border-top: 1px solid var(--rule);
  max-width: 46rem;
}
.byline strong { font-weight: 500; color: var(--ink); }

/* --- typography ---------------------------------------------------------- */

.essay h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.9rem, 1.5rem + 1.7vw, 2.9rem);
  line-height: 1.06;
  letter-spacing: -0.01em;
  margin: 4.5rem auto 1.1rem;
  max-width: 20ch;
}

.essay h3 {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.8rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 2.75rem auto 0.7rem;
}

.essay p { margin: 0 auto 1.25rem; }

.essay > ul, .essay > ol { margin: 0 auto 1.4rem; padding-left: 1.15rem; }
.essay li { margin-bottom: 0.5rem; }

.lead {
  font-size: 1.18em;
  line-height: 1.5;
  font-weight: 300;
}

em.term {
  font-style: normal;
  border-bottom: 1px dotted var(--soft);
  font-family: var(--mono);
  font-size: 0.88em;
}

.num { font-family: var(--mono); font-size: 0.92em; font-variant-numeric: tabular-nums; }

.ember  { color: var(--ember-deep); }
.tealed { color: var(--teal-deep); }

/* Section rule: a hairline that carries the section's own eyebrow. */
.section-open {
  max-width: var(--band);
  margin: 6rem auto 0;
  padding-top: 0.6rem;
  border-top: 1px solid var(--ink);
  display: flex; justify-content: space-between; gap: 1rem;
  font-family: var(--mono); font-size: 0.7rem;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-muted);
}

/* --- epistemic status tags ----------------------------------------------
   The one structural device on the page. Every claim block is marked as an
   observation, an interpretation, a recommendation or an open question,
   because keeping those apart is the whole point of the exercise.
   ------------------------------------------------------------------------ */

.claim { position: relative; max-width: var(--measure); margin: 2.25rem auto; }

.claim > .tag {
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
  display: block;
  margin-bottom: 0.45rem;
  padding-left: 1.15rem;
  position: relative;
}
.claim > .tag::before {
  content: ""; position: absolute; left: 0; top: 0.52em;
  width: 0.65rem; height: 1px; background: var(--ink-muted);
}
.claim[data-kind="observation"]    > .tag::before { background: var(--ink); }
.claim[data-kind="interpretation"] > .tag::before { background: var(--soft); height: 3px; top: 0.4em; }
.claim[data-kind="recommendation"] > .tag::before { background: var(--teal); height: 3px; top: 0.4em; }
.claim[data-kind="open"]           > .tag::before {
  background: none; border-top: 1px dashed var(--ember); top: 0.55em;
}
.claim > p:last-child { margin-bottom: 0; }

@media (min-width: 1180px) {
  .claim > .tag {
    position: absolute;
    left: calc(-1 * var(--rail));
    top: 0.3em;
    width: calc(var(--rail) - 1.5rem);
    text-align: right;
    padding-left: 0;
    margin: 0;
  }
  .claim > .tag::before {
    left: auto; right: -1.05rem; top: 0.55em; width: 0.7rem;
  }
}

/* --- figures ------------------------------------------------------------- */

figure { margin: 0; }

.fig {
  max-width: var(--band);
  margin: 3.25rem auto;
}
.fig.wide { max-width: var(--bleed); }

.fig-head {
  font-family: var(--mono);
  font-size: 0.7rem; letter-spacing: 0.11em; text-transform: uppercase;
  color: var(--ink-muted);
  padding-bottom: 0.5rem; margin-bottom: 1rem;
  border-bottom: 1px solid var(--rule);
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}

figcaption, .fig-note {
  font-family: var(--mono);
  font-size: 0.72rem;
  line-height: 1.65;
  color: var(--ink-muted);
  max-width: 44rem;
  margin-top: 0.9rem;
}
figcaption b, .fig-note b { font-weight: 500; color: var(--ink); }

/* Quarto wraps knitr output in .cell / .cell-output-display */
.cell { margin: 0; }
.cell-output-display { margin: 0; }
.cell-output-display img { margin: 0 auto; }

/* --- callouts ------------------------------------------------------------ */

.note {
  max-width: var(--measure);
  margin: 2.5rem auto;
  padding: 1.1rem 1.25rem;
  background: var(--paper-warm);
  border-left: 3px solid var(--soft);
  font-size: 0.93em;
  line-height: 1.58;
}
.note .tag {
  font-family: var(--mono); font-size: 0.65rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-muted); display: block;
  margin-bottom: 0.4rem;
}
.note p:last-child { margin-bottom: 0; }
.note.caution { border-left-color: var(--ember); }
.note.rule    { border-left-color: var(--teal); }

/* --- the equation ---------------------------------------------------------
   Set as a display line rather than as maths, because it is a sentence.
   ------------------------------------------------------------------------ */

.equation {
  max-width: var(--band);
  margin: 2.5rem auto 2.75rem;
  padding: 1.6rem 1rem;
  text-align: center;
  font-family: var(--display);
  font-size: clamp(1.15rem, 0.9rem + 1.4vw, 1.9rem);
  line-height: 1.5;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.equation .q { white-space: nowrap; }
.equation .op { color: var(--soft); padding: 0 0.35em; }
.equation .n { color: var(--ink); border-bottom: 3px solid var(--soft); }
.equation .m { color: var(--ember-deep); border-bottom: 3px solid var(--ember); }
.equation .t { color: var(--ink); }
.equation .legend {
  display: block; margin-top: 1rem;
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.06em;
  color: var(--ink-muted); text-transform: uppercase;
}

/* --- interactive components ---------------------------------------------- */

.panel {
  background: var(--paper-warm);
  border: 1px solid var(--rule);
  border-radius: 2px;
}

button.ui, .seg button {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--ink);
  border-radius: 2px;
  padding: 0.5rem 0.85rem;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
button.ui:hover, .seg button:hover { background: var(--paper-deep); }
button.ui[aria-pressed="true"], .seg button[aria-pressed="true"] {
  background: var(--ink); color: var(--paper); border-color: var(--ink);
}

.seg { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.seg button { border-color: var(--soft); color: var(--ink-muted); }
.seg button[aria-pressed="true"] { color: var(--paper); }

input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 1.6rem; background: transparent; cursor: pointer; margin: 0;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 2px; background: var(--soft);
}
input[type="range"]::-moz-range-track { height: 2px; background: var(--soft); }
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 1.15rem; height: 1.15rem; border-radius: 50%;
  background: var(--ink); border: 3px solid var(--paper);
  box-shadow: 0 0 0 1px var(--ink);
  margin-top: -0.55rem;
}
input[type="range"]::-moz-range-thumb {
  width: 1.15rem; height: 1.15rem; border-radius: 50%;
  background: var(--ink); border: 3px solid var(--paper);
  box-shadow: 0 0 0 1px var(--ink);
}

/* the opening question */

.quiz { max-width: var(--measure); margin: 2.5rem auto 0; }
.quiz .q {
  font-family: var(--display);
  font-size: clamp(1.35rem, 1.1rem + 1.1vw, 2rem);
  line-height: 1.25; margin: 0 0 1.25rem;
}
.quiz .choices { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.quiz .answer {
  margin-top: 1.4rem; padding-top: 1.1rem;
  border-top: 1px solid var(--rule);
  font-size: 0.97em;
}
.quiz .answer[hidden] { display: none; }
.quiz .tally {
  font-family: var(--mono); font-size: 0.7rem; color: var(--ink-muted);
  margin-top: 0.7rem;
}

/* the cell field */

.cellfield { max-width: var(--bleed); margin: 3.5rem auto; }

.cf-stage {
  position: relative;
  background: var(--paper-warm);
  border: 1px solid var(--rule);
  overflow: hidden;
}
.cf-canvas { display: block; width: 100%; }
.cf-empty {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 0.75rem; color: var(--soft);
  letter-spacing: 0.08em; text-transform: uppercase;
  pointer-events: none; opacity: 0; transition: opacity 0.4s;
}
.cf-empty.on { opacity: 1; }

.cf-readout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
  gap: 0.25rem 1.5rem;
  margin-top: 1rem;
  font-family: var(--mono);
}
.cf-readout div { border-top: 1px solid var(--rule); padding-top: 0.45rem; }
.cf-readout dt {
  font-size: 0.63rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-muted); margin: 0 0 0.15rem;
}
.cf-readout dd {
  margin: 0; font-size: 1.15rem; font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
.cf-readout dd small {
  font-size: 0.62rem; letter-spacing: 0.06em; color: var(--ink-muted);
  text-transform: uppercase; display: block; margin-top: 0.1rem;
}
.cf-readout .is-ember dd { color: var(--ember-deep); }
.cf-readout .is-teal  dd { color: var(--teal-deep); }

.cf-controls {
  display: flex; align-items: center; gap: 1rem;
  margin-top: 1.5rem; flex-wrap: wrap;
}
.cf-controls .track { flex: 1 1 16rem; min-width: 12rem; }
.cf-scale {
  display: flex; justify-content: space-between;
  font-family: var(--mono); font-size: 0.65rem; color: var(--ink-muted);
  margin-top: -0.2rem;
}

/* the state strip: steady state marked by fill AND label AND rule */
.cf-strip { display: flex; height: 0.6rem; margin-top: 0.75rem; border: 1px solid var(--rule); }
.cf-strip span { flex: 1; }
.cf-strip span.pre  { background: repeating-linear-gradient(45deg, var(--paper-warm) 0 3px, var(--paper-deep) 3px 6px); }
.cf-strip span.ss   { background: var(--teal); opacity: 0.45; }
.cf-strip span.post { background: repeating-linear-gradient(45deg, var(--paper-warm) 0 3px, var(--paper-deep) 3px 6px); }
.cf-strip-labels {
  display: flex; justify-content: space-between;
  font-family: var(--mono); font-size: 0.63rem; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ink-muted); margin-top: 0.3rem;
}

/* the distribution strip under the field */
.cf-dist { margin-top: 1.75rem; }

/* the scrolling steps beside a sticky graphic */

.scrolly { max-width: var(--bleed); margin: 3.5rem auto; }
.scrolly-inner { display: block; }
.scrolly-graphic { position: sticky; top: 1rem; }
.scrolly-steps { margin-top: 1.5rem; }
.step {
  max-width: 30rem;
  margin: 0 auto 55vh;
  padding: 1.1rem 1.25rem;
  background: var(--paper);
  border-left: 2px solid var(--soft);
  opacity: 0.45;
  transition: opacity 0.3s, border-color 0.3s;
}
.step:last-child { margin-bottom: 12vh; }
.step.active { opacity: 1; border-left-color: var(--ember); }
.step p { margin: 0; }
.step .when {
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.09em;
  color: var(--ink-muted); text-transform: uppercase; display: block;
  margin-bottom: 0.35rem;
}

@media (min-width: 900px) {
  .scrolly-inner {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(17rem, 0.85fr);
    gap: 2.5rem;
    align-items: start;
  }
  .scrolly-graphic {
    top: 3.5rem;
    /* The graphic (canvas + readout + controls + distribution strip) can be
       taller than short browser windows. Cap it to the viewport and let it
       scroll internally, so the play button and distribution chart stay
       reachable instead of being clipped below the fold for the whole
       pinned scroll. */
    max-height: calc(100vh - 5rem);
    overflow-y: auto;
  }
  .scrolly-steps { margin-top: 0; }
  .step { margin-left: 0; margin-right: 0; }
}

/* the biomass decomposition toy */

.split { max-width: var(--band); margin: 3rem auto; }
.split-row { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 720px) { .split-row { grid-template-columns: 1fr 1fr; } }
.split-cell { border: 1px solid var(--rule); background: var(--paper-warm); padding: 0.9rem; }
.split-cell h4 {
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-muted); margin: 0 0 0.7rem;
  font-weight: 400;
}
.split-cell canvas { width: 100%; }
.split-foot {
  font-family: var(--mono); font-size: 0.72rem; color: var(--ink-muted);
  margin-top: 0.6rem; display: flex; justify-content: space-between; gap: 0.75rem;
}
.split-foot b { color: var(--ink); font-weight: 500; }

/* coordinated small multiples */

.compare { max-width: var(--bleed); margin: 3.25rem auto; }
.compare-grid { display: grid; gap: 1.5rem 1.75rem; grid-template-columns: 1fr; }
@media (min-width: 780px) { .compare-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 780px) { .compare-grid.four { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1150px) { .compare-grid.four { grid-template-columns: repeat(4, 1fr); } }
.compare-cell h4 {
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.08em;
  text-transform: uppercase; margin: 0 0 0.15rem; font-weight: 500;
}
.compare-cell .sub {
  font-family: var(--mono); font-size: 0.65rem; color: var(--ink-muted);
  margin: 0 0 0.6rem;
}
.compare-cell .verdict {
  font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.05em;
  margin-top: 0.5rem; padding-top: 0.4rem; border-top: 1px solid var(--rule);
}
.compare-cell .verdict.yes { color: var(--teal-deep); }
.compare-cell .verdict.no  { color: var(--ember-deep); }

/* the experimental guide */

.guide { max-width: var(--band); margin: 3rem auto; }
.rulecard {
  display: grid; gap: 0.75rem 1.25rem;
  grid-template-columns: 2.5rem 1fr;
  padding: 1.4rem 0;
  border-top: 1px solid var(--rule);
}
.rulecard:last-of-type { border-bottom: 1px solid var(--rule); }
.rulecard .rulenum {
  font-family: var(--mono); font-size: 0.78rem; color: var(--teal-deep);
  padding-top: 0.15rem;
}
.rulecard h4 { font-family: var(--body); font-size: 1.12rem; font-weight: 600; margin: 0 0 0.35rem; }
.rulecard p { margin: 0 0 0.4rem; font-size: 0.97em; }
.rulecard .limit {
  font-family: var(--mono); font-size: 0.7rem; line-height: 1.6;
  color: var(--ember-deep); margin: 0;
}
.rulecard .limit::before { content: "limit  "; color: var(--ink-muted); letter-spacing: 0.1em; }
.rulecard figure { grid-column: 1 / -1; }
@media (min-width: 640px) { .rulecard figure { grid-column: 2 / -1; } }

/* tables */

table {
  width: 100%; border-collapse: collapse;
  font-family: var(--mono); font-size: 0.76rem; line-height: 1.5;
  margin: 1.25rem 0;
}
th, td {
  text-align: left; padding: 0.5rem 0.7rem 0.5rem 0;
  border-bottom: 1px solid var(--rule); vertical-align: top;
}
th {
  font-weight: 500; letter-spacing: 0.07em; text-transform: uppercase;
  font-size: 0.66rem; color: var(--ink-muted);
  border-bottom: 1px solid var(--ink);
}
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; padding-right: 1rem; }
.table-scroll { overflow-x: auto; max-width: var(--band); margin: 1.5rem auto; }
.table-scroll table { min-width: 34rem; }

/* status words in the validation table, never colour alone */
.status-match   { color: var(--teal-deep); }
.status-match::before { content: "= "; }
.status-differs { color: var(--ember-deep); }
.status-differs::before { content: "\2260 "; }

/* --- secondary pages ------------------------------------------------------ */

.page { max-width: var(--band); margin: 0 auto; padding: 3.5rem 1.25rem 0; }
.page h1 {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(2.2rem, 1.7rem + 2.4vw, 3.6rem);
  line-height: 1.02; margin: 0 0 0.5em; max-width: 18ch;
}
.page h2 {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.5rem, 1.25rem + 1.1vw, 2.1rem);
  line-height: 1.15; margin: 3rem 0 0.8rem;
}
.page h3 {
  font-family: var(--mono); font-weight: 500; font-size: 0.78rem;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-muted);
  margin: 2.2rem 0 0.6rem;
}
.page p, .page ul, .page ol { max-width: 40rem; }
.page ul, .page ol { padding-left: 1.15rem; }
.page li { margin-bottom: 0.45rem; }
.page code, code {
  font-family: var(--mono); font-size: 0.85em;
  background: var(--paper-deep); padding: 0.1em 0.35em; border-radius: 2px;
}
.page pre {
  font-family: var(--mono); font-size: 0.76rem; line-height: 1.6;
  background: var(--paper-warm); border: 1px solid var(--rule);
  padding: 0.9rem 1rem; overflow-x: auto; max-width: var(--band);
}
.page pre code { background: none; padding: 0; }

/* --- motion -------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .step { opacity: 1; }
}

/* --- print --------------------------------------------------------------- */

@media print {
  body { background: #fff; }
  .navbar, .cf-controls, .quiz .choices, .seg { display: none; }
  .scrolly-graphic { position: static; }
  .step { opacity: 1; page-break-inside: avoid; }
}

/* rule card body, so the numbered mark and the text sit side by side */
.rulebody { grid-column: 2 / -1; }
@media (max-width: 639px) { .rulebody { grid-column: 1 / -1; } }

/* the opening question plot and the sparklines */
.odq-plot { margin: 0 0 1rem; }
.cp-spark { margin-bottom: 0.35rem; }
.cp-plots { margin-top: 0.25rem; }