/* ============================================================================
   Commonworks Energy, commonworks.ca
   The one shared stylesheet. scrollcraft.css is the floor underneath it and is
   never edited; everything here is this site's own system.

   Order: tokens, fallback faces, base, typography, chrome (wordmark, buttons,
   links, focus, skip, masthead, nav), the page itself (folio, chapters,
   intertitles, spreads, drawing, chapter 3 stage, comparison, mono blocks,
   statement, contact, colophon), placeholders, mobile compositions, reduced
   motion, print.
   ========================================================================== */

/* ---------------------------------------------------------------- tokens -- */
:root {
  --sc-canvas: #F4F0E8;
  --sc-surface: #FFFFFF;
  --sc-ink: #14282E;
  --sc-ink-soft: #5B6668;
  --sc-accent: #A9532A;
  --sc-accent-ink: #F4F0E8;

  --sc-font-display: "Source Serif 4", "Serif Fallback", Georgia, "Times New Roman", serif;
  --sc-font-text: "IBM Plex Sans", "Sans Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
  --sc-font-mono: "IBM Plex Mono", "Mono Fallback", ui-monospace, "SF Mono", Menlo, monospace;

  --rule: #C9C2B6;
  --paper-2: #EAE4D8;

  --sc-r-sm: 3px; --sc-r-md: 3px; --sc-r-lg: 3px; --sc-r-pill: 3px;

  --sc-hairline: var(--rule);
  --sc-hairline-strong: #B5AD9F;

  --sc-shadow-color: 40 20% 30%;
  --sc-e1: 0 1px 2px hsl(var(--sc-shadow-color) / 0.14),
           0 2px 6px -1px hsl(var(--sc-shadow-color) / 0.10);
  --sc-e2: none;
  --sc-e3: none;
  --sc-edge: none;

  /* One accent hue, two lightnesses, keyed to the ground it sits on, because a
     page that hard-cuts between paper and ink cannot clear 4.5:1 on both with
     one stop. Measured: #A9532A on #F4F0E8 is 4.67:1; on #EAE4D8 it is 4.19:1,
     so the darker stop carries text on the darker paper; #D8895F on #14282E is
     5.60:1. --sc-accent itself is never changed on paper. */
  --link: var(--sc-accent);
  --link-deep: #9C4B25;

  --measure: 66ch;
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --maxw: 1100px;
  --margin-col: 8rem;

  --sc-gutter: var(--gutter);
  --sc-maxw: var(--maxw);
  --sc-measure: var(--measure);
}

/* Self-hosted display weight so the headline paints in the real face on the
   first frame (no swap, no layout shift). Latin subset of Source Serif 4,
   weight 600, built from the brand folder's OFL font. Body weights still come
   from Google Fonts. */
@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/SourceSerif4-600-latin.woff2") format("woff2");
}

/* ---------------------------------------------------- fallback metrics --
   The webfonts arrive after first paint. These local stand-ins are adjusted so
   the swap does not move a single line, which is what keeps CLS at zero. */
@font-face {
  font-family: "Serif Fallback";
  src: local("Georgia"), local("Times New Roman"), local("Times");
  size-adjust: 99.5%; ascent-override: 92%; descent-override: 24%; line-gap-override: 0%;
}
@font-face {
  font-family: "Sans Fallback";
  src: local("Helvetica Neue"), local("Helvetica"), local("Arial");
  size-adjust: 100.7%; ascent-override: 96%; descent-override: 26%; line-gap-override: 0%;
}
@font-face {
  font-family: "Mono Fallback";
  src: local("Menlo"), local("Consolas"), local("Courier New");
  size-adjust: 100%; ascent-override: 92%; descent-override: 24%; line-gap-override: 0%;
}

/* ------------------------------------------------------------------ base -- */
html { font-size: 17px; }
body {
  background: var(--sc-canvas);
  color: var(--sc-ink);
  font-family: var(--sc-font-text);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0;
}
::selection { background: var(--sc-accent); color: var(--sc-accent-ink); }

main { display: block; }

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--wide { max-width: 1320px; }

hr.rule,
.rule {
  height: 1px; border: 0; margin: 0;
  background: var(--rule);
}

/* ------------------------------------------------------------ typography -- */
h1, h2, h3, h4 {
  font-family: var(--sc-font-display);
  font-weight: 600;
  letter-spacing: 0;
  text-wrap: balance;
  margin: 0;
}
h1 { font-size: clamp(2rem, 1.2rem + 2.4vw, 3rem); line-height: 1.06; }
h2 { font-size: clamp(1.35rem, 1.1rem + 0.8vw, 1.75rem); line-height: 1.12; }
h3 { font-size: clamp(1.15rem, 1.02rem + 0.42vw, 1.4rem); line-height: 1.16; }
h4 { font-size: 1.05rem; line-height: 1.2; }

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

.prose { max-width: var(--measure); }
.prose > * + * { margin-top: 1.15em; }
.prose h3 { margin-top: 2.4rem; }
.prose h4 { margin-top: 2rem; }
.lede {
  font-size: 1.12rem;
  color: var(--sc-ink);
}
.soft { color: var(--sc-ink-soft); }

.mono, .ledger, .compare, .folio,
.drawing__legend, .label-mono {
  font-family: var(--sc-font-mono);
  font-variant-numeric: tabular-nums;
}
/* The statement block carries figures, not code: it takes the tabular numerals
   without taking the monospace face, so the paragraph under it stays body text. */
.statement { font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------- links -- */
a { color: var(--link); text-decoration: underline; text-underline-offset: 0.15em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }

/* ---------------------------------------------------------------- focus -- */
:focus-visible {
  outline: 2px solid var(--sc-accent);
  outline-offset: 3px;
  border-radius: var(--sc-r-sm);
}

.skip {
  position: absolute; left: 0.75rem; top: 0.75rem;
  z-index: 100;
  background: var(--sc-ink); color: var(--sc-canvas);
  padding: 0.75rem 1.1rem;
  text-decoration: none;
  transform: translateY(-300%);
}
.skip:focus { transform: none; }

/* -------------------------------------------------------------- lockups -- */
/* The brand files are placed, never redrawn or restyled. Ink and paper only:
   no copper hover, border, underline or filter on a logo link, and no radius
   or shadow on a logo container. Clear space x is the height of the block's
   lower row, which is 0.081 of the file width for the two title blocks and
   0.054 of the file width for the unboxed lockup; every neighbour below keeps
   at least that much air. */
.lockup { display: block; }
.lockup__img {
  display: block;
  width: var(--lk-w);
  max-width: 100%;
  height: auto;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
a.lockup { text-decoration: none; color: inherit; }
a.lockup:hover, a.lockup:focus { text-decoration: none; }
a.lockup:hover .lockup__img, a.lockup:focus .lockup__img { filter: none; opacity: 1; }
/* the focus ring on a logo link is ink, because copper never touches the logo,
   and it is square, because the logo container carries no radius */
a.lockup:focus-visible { outline: 2px solid var(--sc-ink); outline-offset: 6px; border-radius: 0; }

.lockup--title { --lk-w: 232px; }
.lockup--masthead { --lk-w: 232px; }
.lockup--colophon { --lk-w: 329px; }
.lockup--print { --lk-w: 329px; }


/* -------------------------------------------------------------- buttons -- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.85em 1.4em;
  border: 1px solid var(--sc-ink);
  border-radius: 3px;
  background: transparent;
  color: var(--sc-ink);
  font-family: var(--sc-font-text);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 160ms var(--sc-ease-out), color 160ms var(--sc-ease-out), border-color 160ms var(--sc-ease-out);
}
.btn--primary {
  background: var(--sc-accent);        /* copper #A9532A: the one accent, on every page */
  border-color: var(--sc-accent);
  color: var(--sc-accent-ink);         /* paper #F4F0E8 */
}
.btn--primary:hover,
.btn--primary:focus-visible {
  background: var(--sc-ink);           /* ink #14282E on hover and focus */
  border-color: var(--sc-ink);
  color: var(--sc-accent-ink);
}
.btn--primary:focus-visible {
  outline: 2px solid var(--sc-ink);    /* focus ring stays ink, 2px, square */
  outline-offset: 3px;
  border-radius: 0;
}
.btn--secondary:hover,
.btn--secondary:focus-visible {
  border-color: var(--link);
  color: var(--link);
}
.btn:active { transform: translateY(1px); }
.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-top: 2.2rem;
}

/* ------------------------------------------------------------- masthead -- */
.masthead {
  border-bottom: 1px solid var(--rule);
  padding-block: 1.4rem;
}
.masthead__inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.masthead .lockup { margin-right: auto; }
.masthead--home .lockup--title { --lk-w: 232px; }
.masthead--home .nav { margin-left: auto; }
.nav__toggle { display: none; }
.nav__list {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav__list a {
  color: var(--sc-ink);
  text-decoration: none;
  font-size: 1rem;
  padding-block: 0.4rem;
  display: inline-block;
}
.nav__list a:hover { color: var(--link); text-decoration: underline; text-underline-offset: 0.15em; }
.nav__list a[aria-current="page"] {
  color: var(--link);
  border-bottom: 1px solid var(--link);
}

/* --------------------------------------------------------------- folio -- */
.folio {
  font-size: 0.74rem;
  color: var(--link);
  line-height: 1.35;
  letter-spacing: 0.02em;
}
.folio__n { display: block; }
.folio__t { display: block; }

/* ------------------------------------------------- chapters and grounds -- */
.chapter {
  background: var(--sc-canvas);
  border-top: 1px solid var(--rule);
  padding-block: clamp(4rem, 7vw, 8rem);
}
.chapter:first-child { border-top: 0; }
.chapter--paper2 {
  background: var(--paper-2);
  --link: var(--link-deep);
}
.chapter--paper2 .chapter,
.chapter--paper2 section { background: transparent; border-top: 0; }

.chapter--ink {
  --sc-ink: #F4F0E8;
  --sc-ink-soft: #C9C2B6;
  --sc-accent: #D8895F;
  --link: #D8895F;
  --sc-canvas: #14282E;
  --rule: #4A5A5F;
  --sc-hairline: #4A5A5F;
  color: var(--sc-ink);
  background: #14282E;
  border-top: 0;
}
.chapter--ink h1, .chapter--ink h2, .chapter--ink h3, .chapter--ink p,
.chapter--ink li, .chapter--ink figcaption {
  color: var(--sc-ink);
}
.chapter--ink .soft, .chapter--ink figcaption { color: var(--sc-ink-soft); }

.chapter__grid {
  display: grid;
  grid-template-columns: var(--margin-col) minmax(0, 1fr);
  gap: clamp(1.25rem, 2.5vw, 2.5rem);
  align-items: start;
}
.chapter__margin { position: sticky; top: 1.25rem; }

/* Chapter 2 does not repeat the one-column stack of chapters 1, 5 and 6. The
   margin column, empty everywhere else, carries the figures the chapter is
   about, set in mono against each paragraph's first line; the paragraph gaps
   tighten as the chapter closes in and the last line is then given a long
   drop, so the chapter tightens and stops. The figures are lifted word for
   word out of the paragraph beside them and are hidden from screen readers,
   which hear the sentence itself. */
.ch2-run {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: var(--margin-col) minmax(0, 1fr);
  column-gap: clamp(1.25rem, 2.5vw, 2.5rem);
  row-gap: 0.9rem;
  align-items: start;
}
.ch2-run > .prose { margin: 0; }
.ch2-fig {
  margin: 0;
  padding-top: 0.34rem;
  font-family: var(--sc-font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.74rem;
  line-height: 1.4;
  color: var(--sc-ink-soft);
  text-align: right;
}
.chapter__body > * + * { margin-top: 1.15em; }

/* ---------------------------------------------------------- intertitles -- */
.intertitle-wrap {
  padding-block: 0.12em 0.2em;
  margin-bottom: clamp(1.6rem, 3vw, 2.6rem);
}
.intertitle {
  font-size: clamp(1.9rem, 1.2rem + 2vw, 3rem);
  line-height: 1.1;
  max-width: 18ch;
}

/* -------------------------------------------------------------- spreads -- */
.spread {
  display: grid;
  gap: clamp(1.5rem, 3vw, 3rem);
  margin-top: clamp(2.5rem, 5vw, 4.5rem);
}
@media (min-width: 900px) {
  .spread { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; }
  .spread__lead { grid-column: 1 / span 4; }
  .spread__trail { grid-column: 5 / span 8; }
  .spread__wide { grid-column: 1 / span 12; }
  .spread--flip .spread__lead { grid-column: 9 / span 4; grid-row: 1; }
  .spread--flip .spread__trail { grid-column: 1 / span 8; grid-row: 1; }
}

.block { margin-top: clamp(2.5rem, 5vw, 4.5rem); }
/* Chapter 4 is the mechanism and the credentials: substance, not argument, and
   the longest run of blocks on the page. It is set on a tighter vertical
   rhythm than the chapters that carry feeling, so it reads as a reference
   section rather than as the second-longest act. No sentence is cut. */
#ch4 .block,
#ch4 .spread { margin-top: clamp(1.7rem, 3.1vw, 2.8rem); }
#ch4 .block--ruled { padding-top: clamp(1.1rem, 2.1vw, 1.7rem); }
#ch4 .photo-slot { max-width: 420px; margin-top: 1.25rem; }
#ch4 .prose > * + * { margin-top: 0.95em; }
/* The last viewport of chapter 2 is authored silence: the closing line holds a
   screen on paper with no ink in frame, so the hard cut to chapter 3 arrives
   from quiet instead of being pre-announced at the bottom of the window. */
.ch2__last { grid-column: 2; margin-top: clamp(5rem, 18vh, 12rem); }
#ch2 { padding-bottom: clamp(7rem, 30vh, 16rem); }
.block > h3 + * { margin-top: 1rem; }
.block--ruled { border-top: 1px solid var(--rule); padding-top: clamp(1.6rem, 3vw, 2.4rem); }

/* --------------------------------------------------------------- lists -- */
.plain-list {
  list-style: none;
  margin: 1.2rem 0 0;
  padding: 0;
  max-width: var(--measure);
}
.plain-list > li {
  border-top: 1px solid var(--rule);
  padding-block: 0.55rem;
}
.plain-list > li:last-child { border-bottom: 1px solid var(--rule); }

.steps { counter-reset: none; margin-top: 1.5rem; }
.step { border-top: 1px solid var(--rule); padding-block: 1.5rem; max-width: var(--measure); }
.step__n {
  font-family: var(--sc-font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.85rem;
  color: var(--link);
  display: block;
  margin-bottom: 0.4rem;
}
.step h4 { margin-bottom: 0.5rem; }

/* The five steps are the longest run of repeated units on the page, so from
   900px they stop being five identical blocks: the number moves out of the
   text column into its own margin figure, the measure alternates between the
   full eight columns and a shorter six set in one, and the hairlines between
   steps give way to air, leaving one rule above the first and one below the
   last the way a ruled schedule is closed. */
@media (min-width: 900px) {
  .steps { border-top: 1px solid var(--rule); }
  .steps > .step {
    border-top: 0;
    max-width: none;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: clamp(1.25rem, 2.4vw, 2.25rem);
    align-items: baseline;
    padding-block: clamp(1.1rem, 2vw, 1.6rem);
  }
  .steps > .step:last-child { border-bottom: 1px solid var(--rule); }
  /* the two long ruled lists in chapter 4 are information, not argument, so
     from 900px they are set in two columns and read as one block each */
  .plain-list--two {
    columns: 2;
    column-gap: clamp(2rem, 4vw, 3.5rem);
    max-width: none;
  }
  .plain-list--two > li { break-inside: avoid; }
  .step .step__n { grid-column: 1 / span 1; grid-row: 1; text-align: right; margin-bottom: 0; }
  .step h4 { grid-column: 2 / span 8; grid-row: 1; }
  .step p { grid-column: 2 / span 8; grid-row: 2; max-width: var(--measure); }
}

/* -------------------------------------------------------------- drawing -- */
.drawing { margin: 0; }
.drawing__svg { color: var(--sc-ink); }
.drawing__svg svg { width: 100%; height: auto; display: block; }
.drawing figcaption {
  margin-top: 1rem;
  font-size: 0.95rem;
  color: var(--sc-ink-soft);
  max-width: 44ch;
}
.drawing--page {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  max-width: 620px;
}
.cw-drawing text {
  font-family: var(--sc-font-mono);
  font-size: 17px;
  font-variant-numeric: tabular-nums;
  fill: currentColor;
  stroke: none;
  letter-spacing: 0;
}
/* Uppercase mono labels on a drawing carry 8% tracking. The title block holds
   the mark in a left cell and runs from x=316 to the sheet edge, so its longest
   tracked row fits at 16px with air to spare. */
.cw-drawing .titleblock text { font-size: 16px; letter-spacing: 0.08em; }
/* 8% tracking on the uppercase callouts costs about a character and a half of
   line, so they drop from 17px to 15px to stay inside the sheet edge. At the
   scale the drawing paints they still land above 12px. */
.cw-drawing .cal { font-size: 15px; letter-spacing: 0.08em; }
.cw-drawing .marker__n { font-size: 16px; }
.cw-drawing .boundary__label { font-size: 19px; }
.cw-drawing .lbl-leader, .cw-drawing .cal-leader { stroke-width: 1; }
.cw-drawing circle.lbl-leader, .cw-drawing circle.cal-leader { fill: currentColor; stroke: none; }
.cw-drawing .boundary { stroke: var(--sc-accent); stroke-width: 2.5; }
/* the enclosed region, washed at nine per cent, so the boundary encloses
   something rather than merely passing through the drawing */
.cw-drawing .boundary-wash { fill: var(--sc-accent); }
.drawing--existing .boundary-wash { display: none; }
/* in the peak the shell drops back so the copper line is the largest change */
.drawing--flip .plane--shell { opacity: 0.5; }
.drawing .ph-svg { fill: var(--sc-accent); }
.drawing .marker, .drawing__legend { display: none; }
.cw-drawing .marker circle:first-child { stroke: none; }

/* the two inlined copies */
.drawing--existing .lbl,
.drawing--existing .lbl-leader,
.drawing--existing .boundary,
.drawing--existing .boundary__label { display: none; }
/* The peak's margin belongs to the seven flip labels alone. The uppercase
   survey callouts are chapter 1's work and their slots interleave with the
   flip ladder, so only the one label set inside the drawing body stays. */
.drawing--flip .cal:not(.cal--area),
.drawing--flip .cal-leader { display: none; }

/* --------------------------------------------- chapter 3, the dash stage -- */
#ch3 { position: relative; }
.dash-stage {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: 0;
}
.dash-stage > .folio { position: absolute; top: 1.5rem; left: var(--gutter); }
.dash-stage__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 3.5rem);
  align-items: center;
  min-height: 0;
}
.dash-stage .drawing__svg svg {
  width: auto;
  height: min(94svh, 1000px);
  max-width: 100%;
  margin-inline: auto;
}
.dash-stage__side {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  max-width: 46ch;
}
.dash-stage__side p { max-width: 42ch; }

/* The drawing paints at about seven tenths of its 720-unit width inside the
   pinned stage, so its type is sized for that scale instead of inheriting the
   full-size copy's. At 0.72 the flip labels land at 16.6px and every mono label
   on the sheet, the title block included, stays above the 12px floor. */
.dash-stage .cw-drawing text { font-size: 21px; }
.dash-stage .cw-drawing .lbl { font-size: 23px; }
.dash-stage .cw-drawing .cal { font-size: 18px; }
.dash-stage .cw-drawing .titleblock text { font-size: 18px; }
/* the label is a sentence, not a code label, so it is set larger than the
   tracked rows and wrapped over four short lines to keep clear of the block */
.dash-stage .cw-drawing .boundary__label { font-size: 20px; }
.dash-stage .cw-drawing .marker__n { font-size: 22px; }

.dash-stage .intertitle { margin-bottom: 0.4rem; }
/* The chapter's title leads its own payoff in the DOM, so a phone reader meets
   the heading before the cross-section and the legend. From 768px named areas
   put it back at the head of the right column, where the composition wants it. */
@media (min-width: 768px) {
  .dash-stage__grid {
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas: "fig title" "fig side";
  }
  .dash-stage__title { grid-area: title; align-self: end; }
  .dash-stage .drawing--flip { grid-area: fig; }
  .dash-stage__side { grid-area: side; }
}

/* ledger */
.ledger {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  margin-top: 0.6rem;
  font-size: 0.82rem;
  border-top: 1px solid var(--rule);
  padding-top: 1rem;
}
.ledger__h {
  font-family: var(--sc-font-mono);
  font-weight: 400;
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sc-ink-soft);
  margin-bottom: 0.7rem;
}
.ledger ul { list-style: none; margin: 0; padding: 0; }
.ledger li {
  padding-block: 0.28rem;
  line-height: 1.35;
  transition: opacity 140ms var(--sc-ease-out), transform 200ms var(--sc-ease-out);
}
.ledger__col:not(.ledger__col--ours) li[data-moves] { color: var(--sc-ink); }
.ledger li.is-leaving { opacity: 0; }
.ledger li.is-entering { opacity: 0; transform: translateY(6px); }
.ledger__col--ours li,
.ledger__col--ours li[data-moves] { color: var(--sc-accent); }
/* the destination is legible before anything lands in it */
.ledger__slot { height: 1.35em; border-bottom: 1px dashed var(--rule); }
.ledger__note {
  margin-top: 1rem;
  font-size: 0.95rem;
  color: var(--sc-ink-soft);
  max-width: 44ch;
}
.ledger__col--ours { border-left: 1px solid var(--rule); padding-left: 1.25rem; }

/* ------------------------------------------------ chapter 5, comparison -- */
.compare { position: relative; background: var(--paper-2); }
.compare__stage {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.compare__grid {
  display: grid;
  grid-template-columns: calc(50% - var(--sc-p, 1) * 16.7%) 1fr;
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: stretch;
}
.compare__col--ours {
  border-left: 1px solid var(--sc-accent);
  padding-left: clamp(1.5rem, 3vw, 3rem);
}
.compare h3 {
  font-size: clamp(1.3rem, 1.1rem + 0.6vw, 1.65rem);
  margin-bottom: 1rem;
}
.compare ul { list-style: none; margin: 0; padding: 0; }
.compare li {
  border-top: 1px solid var(--rule);
  padding-block: clamp(1rem, 2vw, 1.5rem);
  font-family: var(--sc-font-text);
  font-size: 1.0625rem;
}
.compare li:last-child { border-bottom: 1px solid var(--rule); }
.compare__rule { display: none; }

/* ------------------------------------------------ mono blocks, statement -- */
pre.mono {
  max-width: 100%;
  font-variant-numeric: tabular-nums;
  background: var(--sc-surface);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: clamp(1rem, 2.4vw, 1.75rem);
  margin: 1.5rem 0 0;
  overflow-x: auto;
  font-size: 0.82rem;
  line-height: 1.55;
  white-space: pre;
  color: var(--sc-ink);
}
/* The worked example is the one block whose whole argument is that the figures
   line up, so it is given the full 1100px wrap instead of the 804px text
   column and is not made to scroll sideways on a desktop monitor. */
.example { grid-column: 1 / -1; }
.statement { position: relative; }

/* ------------------------------------------------- the monthly statement --
   The statement application from the brand sheet: the identity block top left
   at 220px or wider, right-aligned mono meta, ruled rows, the total in medium
   weight, all on the white surface. Every content line of the approved
   statement is here; only its shape comes from the sheet. */
.stmt {
  background: var(--sc-surface);
  border: 1px solid var(--rule);
  border-radius: 3px;
  box-shadow: var(--sc-e1);
  max-width: 660px;
  padding: clamp(1.5rem, 3vw, 2rem);
  font-variant-numeric: tabular-nums;
}
.stmt__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.75rem;
  margin-bottom: clamp(1.6rem, 3vw, 2.2rem);
}
.stmt__id { margin: 0; }
/* never under 220px; below 768px the block takes the full column */
.stmt__idimg {
  display: block;
  width: min(100%, 260px);
  height: auto;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.stmt__meta {
  font-family: var(--sc-font-mono);
  font-size: 0.78rem;
  line-height: 1.7;
  text-align: right;
  color: var(--sc-ink-soft);
}
.stmt__meta p { margin: 0; }
.stmt__kicker {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--sc-ink);
}
.stmt__rows { margin: 0; }
.stmt__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 0.7rem;
  border-bottom: 1px solid var(--rule);
}
.stmt__row dt { margin: 0; }
.stmt__row dd {
  margin: 0;
  font-family: var(--sc-font-mono);
  font-size: 0.92rem;
  white-space: nowrap;
}
/* the rule the approved statement draws above the total */
.stmt__row--sum { border-bottom-color: var(--sc-ink); }
.stmt__row--total { border-bottom: 0; }
.stmt__row--total dt, .stmt__row--total dd { font-weight: 500; }
.stmt__foot {
  margin-top: 1.5rem;
  font-family: var(--sc-font-mono);
  font-size: 0.8rem;
  color: var(--sc-ink-soft);
}
.statement__stamp {
  display: inline-block;
  font-family: var(--sc-font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--link);
  border: 1px solid var(--link);
  border-radius: 3px;
  padding: 0.3rem 0.6rem;
  margin-bottom: 0.9rem;
}

/* ------------------------------------------------------------- contact -- */
.contact {
  background: var(--sc-canvas);
  border-top: 1px solid var(--rule);
  padding-block: clamp(4rem, 7vw, 7rem);
}
.contact__grid {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  margin-top: 2rem;
}
/* One column on a phone. From 900px the address is printed beside the form,
   the way the contract asks, and it stays with the reader while the fields
   scroll. The note stays under the form, where it belongs. */
.contact__grid { max-width: 46rem; }
@media (min-width: 900px) {
  .contact__grid {
    max-width: none;
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    align-items: start;
  }
  .contact__aside { position: sticky; top: 2rem; }
}
.field--short input { max-width: 12ch; }
.field { display: block; margin-top: 1.1rem; }
.field__label { display: block; font-size: 0.95rem; margin-bottom: 0.35rem; }
.field input, .field select, .field textarea {
  width: 100%;
  min-height: 44px;
  background: var(--sc-surface);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 0.6rem 0.75rem;
  font-family: var(--sc-font-text);
  font-size: 1rem;
  color: var(--sc-ink);
}
.field textarea { min-height: 7rem; resize: vertical; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--sc-hairline-strong); }
.field__error {
  display: none;
  margin-top: 0.3rem;
  font-size: 0.95rem;
  color: var(--link);
}
.field.is-invalid .field__error { display: block; }
.field.is-invalid input, .field.is-invalid select, .field.is-invalid textarea { border-color: var(--link); }
.hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; margin: 0; }
.contact form .btn { margin-top: 1.6rem; }
.contact__note { margin-top: 1rem; font-size: 0.95rem; color: var(--sc-ink-soft); max-width: 46ch; }
.contact__aside p { margin-top: 0.4rem; }
.contact__aside .contact__line {
  font-family: var(--sc-font-mono);
  font-size: 0.95rem;
}

/* ------------------------------------------------------------ colophon -- */
.colophon {
  background: var(--sc-canvas);
  border-top: 1px solid var(--rule);
  padding-block: clamp(4rem, 7vw, 7rem);
  min-height: 100svh;
  display: flex;
  align-items: center;
}
.colophon > .wrap { width: 100%; }
.colophon__plate > * + * { margin-top: 0.6rem; }
/* clear space x under the block: 0.081 of 329px is 27px */
.colophon__plate .lockup--colophon { margin-bottom: 1.8rem; }
.colophon__line { font-family: var(--sc-font-mono); font-size: 0.95rem; }
.colophon__nav {
  margin-top: 1.6rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.75rem;
  font-family: var(--sc-font-mono);
  font-size: 0.9rem;
}
.colophon__nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--sc-accent);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
.colophon__nav a:hover, .colophon__nav a:focus-visible { color: var(--sc-ink); }
.colophon .folio { margin-bottom: 1.6rem; }

/* ---------------------------------------------------------- title page -- */
.titlepage {
  background: var(--sc-canvas);
  padding-block: clamp(2.5rem, 6vh, 4.5rem) clamp(3rem, 8vh, 6rem);
}
/* The headline is 68 characters. Holding it to two lines from 480px up is
   what sets this ramp; it is flatter at the bottom than a normal display
   clamp for exactly that reason. */
.titlepage h1 {
  margin-top: clamp(2.5rem, 6vh, 4.5rem);
  font-size: clamp(1.6rem, 0.3rem + 4.4vw, 3.6rem);
  line-height: 1.04;
}
.titlepage__sub {
  margin-top: 1.4rem;
  max-width: 54ch;
  font-size: 1.08rem;
  color: var(--sc-ink-soft);
}

/* ------------------------------------------------------- placeholders -- */
.ph {
  font-family: var(--sc-font-mono);
  font-size: 0.92em;
  color: var(--link);
  overflow-wrap: anywhere;
}
.photo-slot {
  margin: 1.75rem 0 0;
  border: 1px solid var(--rule);
  border-radius: 3px;
  aspect-ratio: 3 / 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  max-width: 560px;
}
.photo-slot span {
  font-family: var(--sc-font-mono);
  font-size: 0.82rem;
  color: var(--sc-ink-soft);
  text-align: center;
}

/* ------------------------------------------------------------- motion -- */
[data-sc-in], [data-sc-stagger] > * { transition-duration: 260ms; }

/* ------------------------------------------- mobile compositions (<768) -- */
@media (max-width: 767.98px) {
  html { font-size: 16px; }

  .chapter__grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  /* no margin column on a phone, so the chapter 2 figures go with it and the
     paragraphs run as one stack again */
  .ch2-run { grid-template-columns: minmax(0, 1fr); row-gap: 1rem; }
  .ch2-fig { display: none; }
  .ch2__last { grid-column: 1; }
  .chapter__margin {
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--sc-canvas);
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    border-bottom: 1px solid var(--rule);
    padding-block: 0.5rem;
    margin-bottom: 1.5rem;
  }
  .chapter--paper2 .chapter__margin { background: var(--paper-2); }
  .chapter--ink .chapter__margin { background: #14282E; }
  .folio { display: flex; gap: 0.6rem; }
  .folio__n::after { content: "."; }

  .titlepage h1 { max-width: none; }

  .drawing--page { max-width: none; }
  /* mobile recomposition: crop the label column and the empty sheet foot,
     scale the drawing up, and carry the names in the numbered legend below. */
  .drawing__svg { margin-inline: calc(var(--gutter) * -1); overflow: hidden; }
  .drawing__svg svg { width: 164%; max-width: none; height: auto; margin-bottom: -28.5%; }
  .cw-drawing .sheet { display: none; }
  .drawing .marker { display: block; }
  .cw-drawing .marker { transform-box: fill-box; transform-origin: center; transform: scale(1.25); }
  .drawing--existing .marker--lbl { display: none !important; }
  .drawing--flip .marker--cal { display: none !important; }
  .drawing .lbl, .drawing .cal, .drawing .lbl-leader, .drawing .cal-leader,
  .drawing .titleblock, .drawing .boundary__label { display: none; }
  .drawing__legend {
    display: block;
    list-style: none;
    margin: 1.1rem 0 0;
    padding: 0;
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--sc-ink-soft);
  }
  .drawing__legend li { display: flex; gap: 0.6rem; padding-block: 0.15rem; }
  .drawing__legend b { font-weight: 400; color: var(--link); min-width: 1.4em; }

  .dash-stage__grid { grid-template-columns: minmax(0, 1fr); gap: 0.9rem; align-items: stretch; }
  .dash-stage .drawing__svg svg { width: 164%; max-width: none; height: auto; margin-bottom: -28.5%; }
  .dash-stage__side { gap: 0.6rem; max-width: none; }
  .dash-stage__side p { max-width: none; }
  .ledger { gap: 0.9rem; padding-top: 0.7rem; }
  .ledger__note { font-size: 1rem; max-width: none; }
  .ledger__col--ours { padding-left: 0.9rem; }

  .compare__grid { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .compare__col--ours { border-left: 0; padding-left: 0; }
  .compare__rule {
    display: block;
    height: 1px;
    background: var(--sc-accent);
    width: calc(50% + var(--sc-p, 1) * 17%);
    margin-top: 1.25rem;
  }

  /* the type floors are absolute, not relative: at a 16px root the rem sizes
     that clear 16px sans and 12px mono on desktop fall under both. */
  .drawing figcaption, .contact__note, .field__label, .field__error,
  .contact__aside .contact__line, .colophon__line,
  .dash-stage__side p { font-size: 1rem; }
  .folio, .ledger__h, .statement__stamp, .drawing__legend { font-size: 0.78rem; }
  .ledger { font-size: 0.8rem; }
  .drawing__legend .ph, .ledger .ph, .stmt .ph { font-size: 1em; }
  .spread { margin-top: 2.25rem; }
  pre.mono { font-size: 0.75rem; }
  /* The wide tables cannot be set at a legible size inside a 390px measure, so
     on a phone they run out to the edge of the sheet. A line cut by the paper
     edge reads as continuing; a line cut flush inside a tidy border reads as
     finished. They still scroll. The statement keeps its card, because it is a
     printed statement and its lines are short enough to nearly fit. */
  :not(.statement) > pre.mono {
    max-width: none;
    margin-inline: calc(var(--gutter) * -1);
    border-inline: 0;
    border-radius: 0;
    padding-inline: var(--gutter) 0;
  }
  /* the identity block takes the full column below 768px, and the meta drops
     under it rather than fighting it for the line */
  .stmt__head { display: block; }
  .stmt__idimg { width: 100%; }
  .stmt__meta { margin-top: 1.2rem; }
  /* padding holds clear space x around the full-width identity block */
  .stmt { padding: 1.75rem; }
  /* 240px keeps x (19px) inside the 20px gutter, and stays above 220px */
  .lockup--colophon .lockup__img { width: 240px; }
  .colophon__plate .lockup--colophon { margin-bottom: 1.3rem; }
  /* the peak cannot be made the longest act on a phone without either blank
     scroll or an illegible drawing, but it is given more travel than the flow
     it fell back to, so the four phases are not crowded */
  #ch3 { padding-block: clamp(2rem, 14svh, 8rem); }
  .dash-stage { padding-block: 1rem; }
  .dash-stage > .folio { position: static; margin-bottom: 0.75rem; }
  .masthead__inner { gap: 0.9rem; }
  .nav { width: 100%; }
  .nav__toggle {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0.5rem 0.9rem;
    border: 1px solid var(--sc-ink);
    border-radius: 3px;
    background: transparent;
    color: var(--sc-ink);
    cursor: pointer;
  }
  .nav__list { display: none; flex-direction: column; gap: 0; width: 100%; margin-top: 0.75rem; }
  .nav__list.is-open { display: flex; }
  .nav__list li { border-top: 1px solid var(--rule); }
  .nav__list a { padding-block: 0.75rem; width: 100%; }
  .masthead .btn { width: 100%; }
}

@media (max-width: 479.98px) {
  /* The two-line cap is deliberately broken here: three lines. One sentence
     per line is impossible below 480px, because the 43-character first
     sentence only fits one line at about 15px, under the 16px floor this site
     sets for body type. So the first sentence takes two lines and the two
     short sentences share the third, and no sentence is split across a line
     break in the middle of a clause. */
  .titlepage h1 { font-size: 1.5rem; }
  .titlepage h1 .line { display: inline; }
  .titlepage h1 .line + .line { white-space: nowrap; }
}

/* ----------------------------------------------------- reduced motion -- */
@media (prefers-reduced-motion: reduce) {
  .compare__grid { grid-template-columns: 33.3% 1fr; }
  .compare__rule { width: 67%; }
  .ledger li { transition: none; }
  .btn:active { transform: none; }
}

/* -------------------------------------------------------------- print -- */
@media print {
  :root { --sc-canvas: #FFFFFF; }
  html { font-size: 11pt; }
  body { background: #FFFFFF; color: #000; font-family: var(--sc-font-display); }
  .skip, .nav, .nav__toggle, .folio, .btn, .btn-row,
  .masthead .btn, .contact form, .drawing__legend { display: none !important; }
  .chapter, .contact, .colophon, .compare { background: #FFFFFF !important; border-color: #999 !important; }
  .chapter--ink { color: #000 !important; }
  .chapter--ink * { color: #000 !important; }
  .sc-stage, .dash-stage, .compare__stage { position: static !important; height: auto !important; overflow: visible !important; }
  [data-sc-act] { height: auto !important; }
  [data-sc-in], [data-sc-stagger] > * { opacity: 1 !important; transform: none !important; }
  [data-sc-reveal] { clip-path: none !important; }
  [data-sc-parallax] { transform: none !important; }
  a { color: #000; text-decoration: underline; }
  a[href]::after { content: ""; }
  h1, h2, h3, h4 { page-break-after: avoid; break-after: avoid; }
  p, li, pre { page-break-inside: avoid; break-inside: avoid; }

  @page { margin: 2cm; }

  /* The council briefing prints alone. The page sets body.page-councils. */
  body.page-councils main > *:not(#briefing),
  body.page-councils .masthead,
  body.page-councils .contact,
  body.page-councils .colophon { display: none !important; }
  body.page-councils #briefing { display: block !important; background: #FFFFFF !important; }
  #briefing .briefing__printhead { display: none; }
  body.page-councils #briefing .briefing__printhead {
    display: block;
    margin-bottom: 1.2rem;
    border-bottom: 1px solid #000;
    padding-bottom: 0.6rem;
  }
  #briefing h2 { font-size: 14pt; }
  #briefing h3 { font-size: 12pt; }
  #briefing, #briefing p, #briefing li { font-size: 11pt; line-height: 1.35; }
  #briefing section { page-break-inside: avoid; break-inside: avoid; }
}

/* ============================================================================
   SUBPAGE BLOCK, merged by the integrator.

   Everything below belongs to a single subpage, except the one shared-chrome
   rule set at the end of this block, which the how-it-works and about builders
   both asked for and which is applied once here. No new colours, no new type
   sizes, no radius above 3px, no shadows: every rule uses tokens and classes
   that already exist above.
   ========================================================================== */

/* -------------------------------------------- how it works (/how-it-works) --
   Two compositions on one page. The five steps run the full wrap width, because
   the drawing beside step 01 is capped at 22rem and the prose column beside it
   still has to carry 60ch. The agreement clauses use the folio margin and the
   4/8 spread, so ten short clauses read as a ruled schedule rather than as a
   second long list. */
.pagehead {
  background: var(--sc-canvas);
  padding-block: clamp(3rem, 6vw, 5.5rem) clamp(2.5rem, 5vw, 4.5rem);
}
.pagehead h1 { max-width: 16ch; }

.hiw-head { margin-bottom: clamp(1.4rem, 2.6vw, 2.2rem); }
.hiw-folio { margin-bottom: 1rem; }

/* the five steps */
.hiw-steps { margin-top: clamp(1.5rem, 3vw, 2.25rem); }
.hiw-step {
  border-top: 1px solid var(--rule);
  padding-block: clamp(1.6rem, 3vw, 2.4rem);
}
.hiw-steps > .hiw-step:last-child { border-bottom: 1px solid var(--rule); }
.hiw-step h3 { margin-bottom: 0.9rem; }
.hiw-step p { max-width: var(--measure); }
.hiw-step .spec + .spec,
.hiw-step__note { margin-top: 1.15em; }
.spec__k {
  font-family: var(--sc-font-mono);
  font-size: 0.88em;
  color: var(--sc-ink-soft);
}

/* the small drawing. At 22rem the leader callouts render at about 9px, under
   the 12px mono floor, so this copy uses the numbered markers and the legend
   at every width, the way the phone composition does. */
.hiw-fig { margin-top: clamp(1.6rem, 3vw, 2.4rem); max-width: 22rem; }
.hiw-fig .drawing__svg { overflow: hidden; }
.hiw-fig .drawing__svg svg { width: 164%; max-width: none; margin-bottom: -28.5%; }
.hiw-fig .sheet,
.hiw-fig .cal,
.hiw-fig .cal-leader,
.hiw-fig .titleblock { display: none; }
.hiw-fig .marker {
  display: block;
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(1.25);
}
.hiw-fig .marker.marker--lbl { display: none; }
.hiw-fig .drawing__legend {
  display: block;
  list-style: none;
  margin: 1.1rem 0 0;
  padding: 0;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--sc-ink-soft);
}
.hiw-fig .drawing__legend li { display: flex; gap: 0.6rem; padding-block: 0.15rem; }
.hiw-fig .drawing__legend b { font-weight: 400; color: var(--link); min-width: 1.4em; }
.hiw-fig .drawing__legend .ph { font-size: 1em; }

@media (min-width: 1080px) {
  .hiw-steps {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 22rem;
    column-gap: clamp(2rem, 4vw, 3.25rem);
    align-items: start;
  }
  .hiw-steps > .hiw-step { grid-column: 1; }
  .hiw-steps > .hiw-step:nth-of-type(1) { grid-row: 1; }
  .hiw-steps > .hiw-step:nth-of-type(2) { grid-row: 2; }
  .hiw-steps > .hiw-step:nth-of-type(3) { grid-row: 3; }
  .hiw-steps > .hiw-step:nth-of-type(4) { grid-row: 4; }
  .hiw-steps > .hiw-step:nth-of-type(5) { grid-row: 5; }
  /* the sheet carries 84 user units of air above the roof line, so the figure
     box starts level with the step rule and the drawing reads level with the
     step title */
  .hiw-steps > .hiw-fig { grid-column: 2; grid-row: 1 / span 3; margin-top: 0; }
}

/* the agreement clauses */
.clauses { margin-top: clamp(1.8rem, 3.5vw, 2.6rem); }
.spread.clause {
  margin-top: 0;
  column-gap: clamp(1.5rem, 3vw, 3rem);
  row-gap: 0.7rem;
  border-top: 1px solid var(--rule);
  padding-block: clamp(1.4rem, 2.6vw, 2rem);
}
.clauses > .clause:last-child { border-bottom: 1px solid var(--rule); }
.clause h3 { font-size: clamp(1.1rem, 1rem + 0.35vw, 1.3rem); }

@media (max-width: 767.98px) {
  /* the folio moves to the top edge here as it does inside a chapter margin.
     It is a direct child of .wrap so it stays stuck for the whole section. */
  .hiw-folio {
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--sc-canvas);
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    border-bottom: 1px solid var(--rule);
    padding-block: 0.5rem;
    margin-bottom: 1.5rem;
  }
  .hiw-fig { max-width: none; }
}

/* =================================== For councils and boards (/councils/) ==
   A subpage is a reference document, not a scroll: the same hairline-ruled
   rhythm as a home chapter, at about two thirds the vertical air. Nothing in
   this block is used by any other page.
   ========================================================================= */

.councils-head {
  background: var(--sc-canvas);
  padding-block: clamp(2.75rem, 6vw, 5.5rem) clamp(2rem, 4vw, 3.5rem);
}

.councils-section {
  background: var(--sc-canvas);
  border-top: 1px solid var(--rule);
  padding-block: clamp(2.75rem, 5vw, 5rem);
}

/* the jump list reads as a printed index: one line per question, no numbers,
   because numbers on this site belong to the folio and the five steps. */
.councils-jumps { margin-top: clamp(1.4rem, 2.5vw, 2rem); }
.councils-jumps ul {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 1;
  column-gap: clamp(1.5rem, 3vw, 3rem);
}
.councils-jumps li {
  break-inside: avoid;
  padding-block: 0.3rem;
}
.councils-jumps a {
  font-size: 1rem;
  line-height: 1.45;
  text-decoration: none;
}
.councils-jumps a:hover,
.councils-jumps a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
@media (min-width: 640px)  { .councils-jumps ul { columns: 2; } }
@media (min-width: 1000px) { .councils-jumps ul { columns: 3; } }
/* on a phone every entry in the index is a tap target, so each one is given
   the full 44px the rest of the site's controls have */
@media (max-width: 820px) {
  .councils-jumps li { padding-block: 0; }
  .councils-jumps a { display: block; padding-block: 0.65rem; }
}

/* the fourteen questions: a heading column, an answer column at measure,
   one hairline per question, the way a ruled table carries a bill. */
.councils-qa { margin-top: clamp(2rem, 4vw, 3.25rem); }
.councils-qa__item {
  display: grid;
  gap: 0.55rem;
  border-top: 1px solid var(--rule);
  padding-block: clamp(1.4rem, 2.6vw, 2rem);
  scroll-margin-top: 1.25rem;
}
.councils-qa__item:last-child { border-bottom: 1px solid var(--rule); }
.councils-qa__item:focus-visible { outline-offset: 6px; }
.councils-qa__q { font-size: clamp(1.05rem, 0.96rem + 0.34vw, 1.22rem); }
.councils-qa__a { max-width: var(--measure); }
@media (min-width: 900px) {
  .councils-qa__item {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: clamp(1.5rem, 3vw, 3rem);
    align-items: start;
  }
  .councils-qa__q { grid-column: 1 / span 4; }
  .councils-qa__a { grid-column: 5 / span 8; }
}

/* the two audience spreads sit directly under the section's own top rule */
.councils-spread--first { margin-top: 0; }

/* the printable briefing. The ground and padding come from .chapter and
   .chapter--paper2; only the document furniture is new. The printhead is
   hidden on screen here because styles.css only hides it inside @media print. */
.briefing__printhead { display: none; }
.briefing > .wrap > h2 { max-width: 44ch; }
.briefing__sec { margin-top: clamp(1.9rem, 3.4vw, 2.75rem); }
.briefing__sec > h3:first-child { margin-top: 0; }
.briefing .plain-list { margin-top: 1rem; }

/* ------------------------------------------- technology page (/technology) --
   A title block and one statement at measure, then eight ruled sections with
   the heading set in the margin column. Position carries the hierarchy: no new
   type sizes, no new colours, no new devices. All four rules below use tokens
   and classes that already exist; nothing here restyles a data-sc-* selector. */
.tech-head {
  padding-block: clamp(2.6rem, 5.5vw, 4.5rem) clamp(2rem, 3.6vw, 3.1rem);
}
.tech-open { padding-bottom: clamp(3rem, 6vw, 5rem); }
.tech-open .prose { margin-top: 1.3rem; }
.tech-section {
  border-top: 1px solid var(--rule);
  padding-block: clamp(2.2rem, 4.5vw, 3.6rem);
}
.tech-section .spread { margin-top: 0; }
@media (min-width: 900px) {
  /* a heading column wide enough for two lines, instead of four columns of a
     twelve-column grid that force three and four */
  .tech-section .spread { grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); }
  .tech-section .spread__lead { grid-column: 1; }
  .tech-section .spread__trail { grid-column: 2; }
  /* two of the seven are set the other way up, heading above text at measure,
     so the page is not one shape repeated seven times */
  .tech-section .spread--stack { grid-template-columns: minmax(0, 1fr); row-gap: 1.1rem; }
  .tech-section .spread--stack .spread__lead,
  .tech-section .spread--stack .spread__trail { grid-column: 1; }
}
@media (max-width: 899.98px) {
  /* the spread has collapsed to one column, so its gap is now the space
     between a heading and its own paragraphs: tighten it so the section
     boundary above the heading stays the larger interval. */
  .tech-section .spread { gap: 1rem; }
}

/* ---------------------------------------------------------- about page -- */
/* /about/ only. The page is one .chapter of ruled blocks, so its section
   headings are h2 (the page h1 is the title). styles.css only spaces
   `.block > h3 + *`, so an h2 followed by a paragraph has no gap. Lists are
   left alone: .plain-list carries its own 1.2rem. */
.page-about .block > h2 + p { margin-top: 1rem; }

/* the three per-firm groups inside the Projects block */
.about__group { margin-top: 2.4rem; }

/* the investor line: the last thing before the contact block, set small and
   quiet. 0.95rem is 16.15px at the 17px desktop root but 15.2px at the 16px
   mobile root, so it is re-raised under 768px exactly like .contact__note. */
.about__investor {
  margin-top: clamp(2.5rem, 5vw, 4.5rem);
  font-size: 0.95rem;
  color: var(--sc-ink-soft);
  max-width: 52ch;
}
@media (max-width: 767.98px) {
  .about__investor { font-size: 1rem; }
}

/* -------------------------------------------------- shared subpage chrome --
   Not one page: every subpage. The masthead carries a wordmark, five nav links
   and a 43-character button, which do not fit on one 1100px line at any
   viewport, so the button always wraps to a second row. Left alone it sits
   flush left under the wordmark and reads as a mistake. These three rules give
   that second row a shape (wordmark left and nav right on line one, button
   under the nav) and raise the desktop nav links from 41px to the 44px tap
   target the rest of the site's controls have, including at exactly 768px
   where the mobile nav has not yet taken over. */
@media (min-width: 768px) {
  .masthead__inner {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    column-gap: 1.5rem;
    row-gap: 1.1rem;
  }
  .masthead .lockup { grid-column: 1; grid-row: 1; margin-right: 0; }
  .masthead .nav { grid-column: 2; grid-row: 1; justify-self: end; margin-left: 0; }
  .masthead .btn { grid-column: 2; grid-row: 2; justify-self: end; margin-left: 0; }
  .nav__list a { padding-block: 0.55rem; }
}

/* ---------------------------------------- print: the council briefing -- */
/* The briefing is the one thing on this site that is meant to leave the
   screen on paper. On a Letter sheet inside 2cm margins the screen measure
   wastes about a third of the line, which is what turns a two-page briefing
   into four. Printed, the document takes the whole text block. */
@media print {
  body.page-councils #briefing {
    padding-block: 0 !important;
    border-top: 0 !important;
  }
  body.page-councils #briefing .wrap {
    max-width: none;
    padding-inline: 0;
  }
  body.page-councils #briefing .prose,
  body.page-councils #briefing .plain-list,
  body.page-councils #briefing > .wrap > h2 { max-width: none; }
  body.page-councils #briefing,
  body.page-councils #briefing p,
  body.page-councils #briefing li { line-height: 1.3; }
  body.page-councils #briefing .briefing__sec { margin-top: 0.9rem; }
  body.page-councils #briefing .briefing__sec h3 { margin-top: 0; }
  body.page-councils #briefing .prose > * + * { margin-top: 0.5em; }
  body.page-councils #briefing .plain-list { margin-top: 0.4rem; }
  body.page-councils #briefing .plain-list > li { padding-block: 0.28rem; }
}


/* ------------------------------------------------------------- footer -- */
.footer { border-top: 1px solid var(--rule); background: var(--sc-canvas); padding-block: 3rem 1.5rem; }
.footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 2.5rem; align-items: start; }
.footer__brand .lockup--colophon { margin: 0; }
.footer__line { margin-top: 1.1rem; max-width: 34ch; font-size: 0.95rem; color: var(--sc-ink-soft); }
.footer__h { margin: 0 0 0.5rem; font-family: var(--sc-font-mono); font-weight: 400; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sc-ink-soft); }
.footer__list { list-style: none; margin: 0; padding: 0; }
.footer__list a { display: inline-flex; align-items: center; min-height: 44px; color: var(--sc-ink); text-decoration: none; }
.footer__list a:hover, .footer__list a:focus-visible { color: var(--sc-accent); text-decoration: underline; text-underline-offset: 0.15em; }
.footer__list a[aria-current="page"] { color: var(--sc-accent); }
.footer__legal { margin-top: 2.5rem; padding-top: 1rem; border-top: 1px solid var(--rule); font-family: var(--sc-font-mono); font-size: 0.85rem; color: var(--sc-ink-soft); }
@media (max-width: 767.98px) {
  .footer__grid { grid-template-columns: 1fr; gap: 1.6rem; }
  .footer__brand .lockup--colophon .lockup__img { width: 240px; }
}
@media print { .footer { display: none !important; } }