/* Freeman & Marx — "The Measured Record"
   Design direction chosen by independent panel, 2 Aug 2026.
   Thesis: precision is a form of respect. The site behaves like a field
   instrument — everything it shows is measured, labelled, and verified.

   Three voices, never a fourth:
     Fraunces speaks (display) · Inter explains (body) · IBM Plex Mono measures
     (context numbers, coordinates, captions, figure labels).

   Motion rule (enforced in main.js): the record never moves; only the
   instruments move. The Acknowledgement, the Supply Nation badge, the logo,
   a partner's mark, the partner record and the procurement ledger
   receive no animation, ever. */

:root {
  --ink: #14130f;
  --ink-2: #2a2720;
  --ink-3: #55503f;
  --paper: #faf7f1;
  --sand: #f0e9dc;
  --sand-2: #e2d7c3;
  --bone: #e8e2d4;            /* type on ink plates — warmer than paper */
  --ochre: #a85a33;
  --ochre-deep: #7c3f21;      /* small ochre text on paper, holds AA */
  --ochre-bright: #c97b52;    /* ochre on ink plates, holds AA */
  --moss: #3b4a3a;
  --moss-light: #9db39a;      /* small moss text on ink */
  --moss-wash: #eef0e9;       /* right-way section ground */
  --amber: #b8791f;           /* reserved: HELD / unapproved tags only */
  --line: rgba(20, 19, 15, 0.14);
  --line-light: rgba(232, 226, 212, 0.22);

  --serif: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --gut: clamp(1.25rem, 4vw, 4.5rem);
  --rail-w: 5.5rem;
  --max: 82rem;
  /* main.js overwrites this with the measured header height; the value here is
     the fallback, so the first viewport still resolves without JS. */
  --header-h: 8.5rem;
  /* the first viewport keeps this much of CONTEXT 002 in view. A cue that says
     "scroll" is a claim; a visible strip of the next record is evidence. */
  --fold-strip: 6.5rem;
}

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  /* --surface is tweened by main.js as you descend: paper → sand → ink-adjacent.
     Light sections are transparent so the descent reads through them. */
  --surface: var(--paper);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--sans);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.075rem);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

h1, h2, h3 {
  font-family: var(--serif);
  font-variation-settings: "opsz" 144;
  font-weight: 480;
  line-height: 1.05;
  letter-spacing: -0.015em;
  margin: 0 0 0.5em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.4rem, 1.2rem + 3.4vw, 4.4rem); font-weight: 420; max-width: 18ch; }
h2 { font-size: clamp(1.9rem, 1.2rem + 2.7vw, 3.2rem); }
h3 { font-size: clamp(1.2rem, 1.05rem + 0.7vw, 1.5rem); letter-spacing: -0.01em; }

p { margin: 0 0 1em; max-width: 62ch; }

a { color: inherit; }

/* the measuring voice */
.ctx {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.7;
  color: var(--ink-3);
  max-width: none;
  font-variant-numeric: tabular-nums;
}
.ctx--head { margin-bottom: 2.25rem; }

.eyebrow {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ochre-deep);
  margin-bottom: 1.25rem;
  max-width: none;
}

.lede, .section__lede {
  font-size: clamp(1.075rem, 1rem + 0.45vw, 1.3rem);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 46ch;
}

/* Fixed, not absolute: an absolutely positioned skip link sits at the top of
   the document, so it is off-screen whenever focus wraps from the footer.
   Only one can hold focus at a time, so they share the same landing spot. */
.skip {
  position: fixed; left: -9999px; top: 1rem;
  background: var(--ink); color: var(--paper); padding: 0.75rem 1.25rem; z-index: 99;
  font-family: var(--mono); font-size: 0.8rem;
}
.skip:focus { left: 1rem; }

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

/* ---------- field book margin rail ---------- */

.rail {
  position: fixed; top: 50%; left: 0; z-index: 30;
  transform: translateY(-50%);
  width: var(--rail-w);
  display: flex; flex-direction: column; align-items: center; gap: 1rem;
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  mix-blend-mode: exclusion; /* legible over both paper and ink plates */
  color: #8d8776;
}
.rail__ctx, .rail__depth { writing-mode: vertical-rl; }
.rail__rule { flex: none; width: 1px; height: 6rem; background: currentColor; opacity: 0.5; }
@media (max-width: 68rem) { .rail { display: none; } }

/* ---------- header ---------- */

.site-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 2rem; flex-wrap: wrap;
  padding: 1.15rem var(--gut) 1rem;
  border-bottom: 1px solid var(--line);
  position: relative; z-index: 10;
  background: var(--paper); /* the logo sits on light surfaces only */
}
.brand img { width: clamp(9rem, 14vw, 12.5rem); }
.site-nav { display: flex; align-items: center; gap: clamp(1rem, 2vw, 2rem); flex-wrap: wrap; }
.site-nav a { text-decoration: none; color: var(--ink-2); }
/* :not(.btn) so the ruled underline never overrides the button's own padding —
   and so every link clears the 24px minimum target height on its own. */
.site-nav a:not(.btn) {
  font-size: 0.9rem;
  padding: 0.25rem 0 0.3rem; border-bottom: 1px solid transparent;
}
.site-nav a:not(.btn):hover { border-bottom-color: var(--ochre); color: var(--ink); }
/* the buyer's shortcut is set in the measuring voice */
.site-nav__proc {
  font-family: var(--mono); font-size: 0.72rem !important;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ochre-deep) !important;
}

/* the mobile disclosure — set in the measuring voice, sized as a real target */
.nav-toggle { display: none; }
@media (max-width: 60rem) {
  .has-js .nav-toggle {
    display: inline-flex; align-items: center; gap: 0.6rem;
    min-height: 44px; padding: 0.5rem 0.9rem;
    background: transparent; color: var(--ink-2);
    border: 1px solid var(--line); border-radius: 2px; cursor: pointer;
    font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.12em;
    text-transform: uppercase;
  }
  .nav-toggle__rule {
    width: 1.15rem; height: 7px;
    border-top: 1px solid currentColor; border-bottom: 1px solid currentColor;
  }
  .nav-toggle[aria-expanded="true"] .nav-toggle__rule { height: 1px; border-bottom: 0; }

  .has-js .site-nav {
    display: none; order: 3; flex-basis: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    margin-top: 0.9rem; padding-top: 0.4rem; border-top: 1px solid var(--line);
  }
  .has-js .site-nav[data-open="true"] { display: flex; }
  .has-js .site-nav a {
    display: flex; align-items: center; min-height: 44px;
    padding: 0.55rem 0; font-size: 0.95rem;
    border-bottom: 1px solid var(--line);
  }
  .has-js .site-nav a.btn {
    justify-content: center; margin-top: 0.9rem;
    border: 1px solid var(--ink);
  }
}

/* ---------- buttons ---------- */

.btn {
  display: inline-block;
  font-family: var(--sans); font-size: 0.92rem; font-weight: 500;
  background: var(--ink); color: var(--paper);
  border: 1px solid var(--ink); border-radius: 2px;
  padding: 0.85rem 1.5rem; text-decoration: none; cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.btn:hover { background: var(--ochre); border-color: var(--ochre); color: #fff; }
.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.btn--sm { padding: 0.5rem 1rem; font-size: 0.85rem; }
.btn--ochre { background: var(--ochre); border-color: var(--ochre); color: #fff; }
.btn--ochre:hover { background: var(--ochre-bright); border-color: var(--ochre-bright); }
.btn--ghost-light { background: transparent; color: var(--bone); border-color: var(--line-light); }
.btn--ghost-light:hover { background: var(--bone); border-color: var(--bone); color: var(--ink); }
.site-nav a.btn { color: var(--paper); border-bottom: 1px solid var(--ink); }
.site-nav a.btn:hover { color: #fff; border-color: var(--ochre); }

/* ---------- plates (full-ink figure sections) ---------- */

.plate { background: var(--ink); color: var(--bone); }
.plate .ctx { color: #8d8776; }
.plate .eyebrow { color: var(--ochre-bright); }
.plate .section__lede { color: #b6ae9b; }

/* ---------- hero · CONTEXT 001 ---------- */

.hero { position: relative; overflow: clip; }
.hero__stage {
  position: relative;
  /* The header is above the fold, and so is the head of CONTEXT 002. The stage
     takes what is left of the first viewport after both — the hero must not be
     the whole screen, or nothing on the page announces that a record follows. */
  min-height: max(calc(100svh - var(--header-h) - var(--fold-strip)), 30rem);
  display: grid;
  align-items: center;
}
.hero__canvas, .hero__canvas canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
}
.hero__canvas { z-index: 1; }

.hero__section {
  position: absolute; z-index: 2;
  right: var(--gut); top: 50%; transform: translateY(-50%);
  width: min(52vw, 46rem); height: auto;
  pointer-events: none;
}
.hero__section text { font-family: var(--mono); letter-spacing: 0.08em; }
.sec__scale, .sec__scale-labels text { color: rgba(232, 226, 212, 0.4); fill: rgba(232, 226, 212, 0.4); }
.sec__datum-line { stroke: var(--ochre-bright); }
.sec__datum-label { fill: var(--ochre-bright); }
.sec__stratum { stroke: rgba(232, 226, 212, 0.65); }
.sec__stratum--base { stroke: var(--ochre-bright); }
.sec__label { fill: rgba(232, 226, 212, 0.75); }

.hero__body {
  position: relative; z-index: 3;
  padding: clamp(1.75rem, 3vw, 3rem) var(--gut);
  padding-left: max(var(--gut), var(--rail-w) + 1rem);
  max-width: 46rem;
}
.hero__body .ctx { margin-bottom: 1.5rem; color: #8d8776; }
.hero h1 {
  margin-bottom: 1rem; color: var(--bone);
  font-size: clamp(1.95rem, 1.35rem + 2.4vw, 3.75rem);
  max-width: 22ch;
}
.hero .lede { color: #b6ae9b; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.6rem; }

figure.hero__plate {
  position: absolute; z-index: 3; margin: 0;
  right: var(--gut); bottom: clamp(4.5rem, 8vh, 6.5rem);
  width: clamp(11rem, 16vw, 15rem);
}
.hero__plate img { width: 100%; }
.plate-cap { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.1em; color: #8d8776; margin-top: 0.5rem; }

.hero__fig { position: absolute; z-index: 3; left: max(var(--gut), var(--rail-w) + 1rem); bottom: 1.5rem; margin: 0; }
.hero__coords { position: absolute; z-index: 3; right: var(--gut); top: 1.25rem; margin: 0; }
/* The cue sits at the far end of the sheet's bottom rule, opposite FIG. 01.
   Centred, it ran into that caption once the stage stopped overshooting. */
.hero__scrollcue { position: absolute; z-index: 3; right: var(--gut); bottom: 1.5rem; margin: 0; color: var(--ochre-bright); }

/* the instrument's crosshair — decorative, JS-driven, hidden without it */
.reticle { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; }
.reticle__h, .reticle__v { position: absolute; background: rgba(201, 123, 82, 0.35); }
.reticle__h { left: 0; right: 0; top: var(--ry, 50%); height: 1px; }
.reticle__v { top: 0; bottom: 0; left: var(--rx, 50%); width: 1px; }
.reticle__ring {
  position: absolute; left: var(--rx, 50%); top: var(--ry, 50%);
  width: 22px; height: 22px; margin: -11px 0 0 -11px;
  border: 1px solid rgba(201, 123, 82, 0.55); border-radius: 50%;
}

@media (max-width: 86rem) {
  /* There is no canvas through the tablet range, so the static measured drawing is the whole
     figure — message first, figure second. Everything in this block is sized
     so the head of CONTEXT 002 still lands inside the first viewport. */
  .hero__stage { min-height: 0; padding-bottom: 1.25rem; display: flex; flex-direction: column; align-items: stretch; }
  .hero__canvas, .reticle { display: none; }
  .hero__body { order: 1; padding: 1rem var(--gut) 0; max-width: none; }
  .hero__body .ctx { margin-bottom: 0.6rem; }
  .hero h1 { margin-bottom: 0.55rem; }
  .hero .lede { font-size: 1rem; line-height: 1.45; margin-bottom: 0; }
  /* stacked, the two actions cost more height than the figure does */
  .hero__actions { margin-top: 1rem; gap: 0.5rem; flex-wrap: nowrap; }
  .hero__actions .btn { flex: 1 1 0; text-align: center; padding: 0.7rem 0.6rem; }
  /* No cue. An instruction to scroll is a claim about what follows; the strip
     of CONTEXT 002 held below the fold line is the record of it. */
  .hero__scrollcue { display: none; }
  /* height-bound, not width-bound: a wide-but-short screen would otherwise
     scale this drawing by column width and push the next record off the page */
  .hero__section {
    order: 3; position: relative; inset: auto; transform: none;
    width: calc(100% - 2 * var(--gut)); margin: 0.85rem auto 0;
    max-height: 19svh;
  }
  .hero__fig { order: 4; position: static; padding: 0.6rem var(--gut) 0; }
  figure.hero__plate, .hero__coords { display: none; }
}

/* The margin rail remains visible on wider tablets. Preserve its reserved
   column after the fallback switches the hero body to the stacked layout. */
@media (min-width: 68.0625rem) and (max-width: 86rem) {
  .hero__body { padding-left: max(var(--gut), var(--rail-w) + 1rem); }
}

/* FIG. 01 and the cue are absolutely placed on the sheet's bottom rule. While
   the stage was a full viewport tall the body was centred inside it and never
   reached them; now that the stage is sized to its content, the band has to be
   reserved explicitly or the actions print straight over the caption. */
@media (min-width: 86.0625rem) {
  .hero__stage { padding-bottom: 3.5rem; }
  .hero__body { padding-bottom: 0; }
}

/* A short desktop viewport is the tightest case: full-size display type, no
   mobile reflow, and a header. Tighten the hero's vertical rhythm rather than
   let it eat the head of the next record. */
@media (min-width: 86.0625rem) and (max-height: 47rem) {
  .hero__body { padding-top: 1.25rem; }
  .hero__body .ctx { margin-bottom: 0.9rem; }
  .hero__actions { margin-top: 0.9rem; }
}

/* A short screen cannot hold the offer, both actions and the figure and still
   show the next record. The figure is what goes: the datum survives, because
   CONTEXT 002 re-strikes it immediately under the fold line. */
@media (max-width: 86rem) and (max-height: 46rem) {
  .hero__section, .hero__fig { display: none; }
}

/* ---------- trust strip · CONTEXT 002 ---------- */

.trust { padding: clamp(2.5rem, 5vw, 4rem) var(--gut); }
/* CONTEXT 002 is the section the first viewport has to reach, so its head sits
   nearer its own top edge than the section rhythm alone would put it. Declared
   after the shorthand above, or the shorthand resets it. */
@media (max-width: 60rem) { .trust { padding-top: 1.5rem; } }
@media (min-width: 60.0625rem) and (max-height: 47rem) { .trust { padding-top: 1.75rem; } }
.trust > .ctx--head { max-width: var(--max); margin-inline: auto; margin-bottom: 1.25rem; }
.trust__datum { display: block; width: 100%; max-width: var(--max); margin: 0 auto 2rem; height: 10px; }
.trust__datum-line { stroke: var(--ochre-bright); }
.trust__list {
  list-style: none; margin: 0 auto; padding: 0; max-width: var(--max);
  display: grid; gap: clamp(1.5rem, 3vw, 3rem);
  grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
}
/* min-width: 0 — a grid item defaults to min-content, so one long stat pushes
   the whole ledger past the viewport instead of wrapping inside its cell. */
.trust__list li { position: relative; min-width: 0; padding-left: 1.1rem; border-left: 1px solid var(--line-light); }
/* Official Supply Nation artwork, used as issued — no border-radius clip, no
   effects. The margin is the guide's clear space: 20% of the mark's width
   (0.9rem at 4.5rem) on all sides; the ledger's own gaps cover the rest. */
.trust__badge { width: 4.5rem; margin-bottom: 0.9rem; }
.trust__stat {
  display: block; font-family: var(--serif); font-variation-settings: "opsz" 60;
  font-size: 2rem; line-height: 1;
  color: var(--ochre-bright); margin-bottom: 0.55rem;
  font-variant-numeric: tabular-nums;
  /* last resort only: the stats are set to wrap at their own hyphen first */
  overflow-wrap: break-word;
}
.trust__label { display: block; font-weight: 600; font-size: 0.95rem; margin-bottom: 0.25rem; }
.trust__meta { display: block; font-size: 0.83rem; color: #ada592; line-height: 1.45; }

/* ---------- sections ---------- */

.section { padding: clamp(4rem, 9vw, 8rem) var(--gut); position: relative; }
.section > * { max-width: var(--max); margin-inline: auto; }
.section__head { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section__head h2 { max-width: 22ch; }

/* light sections are transparent — the descent (body --surface) shows through */
.difference, .procurement { background: transparent; }
.section--sand { background: var(--sand); }
.rightway { background: var(--moss-wash); }
.section--ink .eyebrow { color: var(--ochre-bright); }

/* stratigraphic rules stay structural */
.difference::before, .procurement::before {
  content: ""; position: absolute; top: 0; left: var(--gut); right: var(--gut);
  height: 1px; background: var(--line);
}

/* ---------- the difference · CONTEXT 003 ---------- */

.split {
  display: grid; gap: clamp(2rem, 5vw, 4.5rem);
  /* Clive's profile leads and carries fractionally more width — deliberate */
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  position: relative;
}
@media (max-width: 54rem) { .split { grid-template-columns: 1fr; } }
/* the baulk: the drawn line between the two profiles */
.split::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 51.5%;
  width: 1px; background: var(--line);
}
@media (max-width: 54rem) { .split::before { display: none; } }
.split__col { border-top: 2px solid var(--ink); padding-top: 1.5rem; }
.split__col--lead { border-top-color: var(--ochre); }
.split__kicker {
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 0.6rem;
}
.ticks { list-style: none; margin: 1.5rem 0 0; padding: 0; }
.ticks li {
  position: relative; padding-left: 1.5rem; margin-bottom: 0.6rem;
  font-size: 0.95rem; color: var(--ink-2);
}
.ticks li::before {
  content: ""; position: absolute; left: 0; top: 0.62em;
  width: 0.6rem; height: 1px; background: var(--ochre);
}

/* ---------- who we are · closing note ---------- */

.note--rule {
  margin-block: clamp(2rem, 4vw, 3rem) 0;
  margin-inline: auto;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  font-size: 0.95rem; color: var(--ink-2); max-width: 68ch;
}

/* ---------- capabilities · CONTEXT 004 · three passes from one datum ----------
   Culture is the datum, not the top layer. Each pass carries the SAME datum
   line at its head: the repetition is the point — every pass is measured from
   one reference, none sits beneath another. */

.passes { display: grid; gap: clamp(3rem, 6vw, 5rem); }

.pass__head { margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.pass__datum { display: block; width: 100%; height: 8px; margin-bottom: 0.9rem; }
.pass__datum-line { stroke: var(--ochre); }
.pass__ref { margin: 0 0 0.75rem; color: var(--ochre-deep); }
/* The descriptor sits beside the heading, not inside it, so the accessible
   heading name stays "Culture" rather than "Culture the frame". */
.pass__titlerow {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.65rem;
  margin-bottom: 0.5rem;
}
.pass__title {
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.35rem);
  margin: 0;
}
.pass__role {
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-3);
}
.pass__lede { font-size: 1rem; color: var(--ink-2); max-width: 60ch; margin: 0; }

.cards {
  display: grid; gap: 1px; background: var(--line);
  border: 1px solid var(--line);
  grid-template-columns: 1fr;
}
/* auto-fit, not a fixed 3-up: passes carry 2 or 3 cards and each must fill its
   own row. A fixed grid left an empty grey cell beside the two-card passes. */
@media (min-width: 38rem) {
  .cards { grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); }
}
.card {
  background: var(--sand); padding: clamp(1.5rem, 2.5vw, 2.25rem);
  display: flex; flex-direction: column; position: relative;
  transition: background 0.15s ease;
}
.card:hover { background: #f7f2e9; }
/* survey-grid cell reference etched in the corner */
.card::after {
  content: attr(data-cell);
  position: absolute; top: 1rem; right: 1.1rem;
  font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.12em;
  color: var(--ink-3); opacity: 0.55;
}
.card__num {
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.1em;
  color: var(--ochre-deep); display: block; margin-bottom: 1.75rem;
}
/* cards sit under a pass heading, so their titles are h4 — styled to match h3 */
.card h4 {
  font-family: var(--serif); font-variation-settings: "opsz" 144;
  font-weight: 480; line-height: 1.15; letter-spacing: -0.01em;
  font-size: clamp(1.15rem, 1.05rem + 0.55vw, 1.4rem);
  margin: 0 0 0.6rem; text-wrap: balance;
}
.card p { font-size: 0.95rem; color: var(--ink-2); }
.card__out {
  margin: auto 0 0; padding-top: 1rem; border-top: 1px solid var(--line);
  font-size: 0.87rem; color: var(--ink-3);
}
.card__out span {
  font-family: var(--mono); font-size: 0.65rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ochre-deep); display: block; margin-bottom: 0.2rem;
}

/* ---------- right-way science · CONTEXT 005 ---------- */

.rightway__grid {
  display: grid; gap: clamp(2rem, 5vw, 4.5rem);
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  align-items: start;
}
@media (max-width: 58rem) { .rightway__grid { grid-template-columns: 1fr; } }

.steps { list-style: none; counter-reset: s; margin: 2rem 0 0; padding: 0; }
.steps li {
  counter-increment: s; position: relative;
  padding: 1.1rem 0 1.1rem 3.25rem;
  border-top: 1px solid var(--line);
  font-size: 0.97rem; color: var(--ink-2); max-width: 54ch;
}
.steps li:last-child { border-bottom: 1px solid var(--line); }
.steps li::before {
  content: "STN " counter(s);
  position: absolute; left: 0; top: 1.3rem;
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.08em; color: var(--ochre-deep);
}
.steps span {
  display: block; font-family: var(--sans); font-weight: 600;
  color: var(--ink); margin-bottom: 0.15rem;
}

.rightway__side { display: grid; gap: 2rem; }
.rightway__diagram { margin: 0; }
.rightway__diagram svg { width: 100%; height: auto; }
.rightway__diagram figcaption { margin-top: 0.5rem; }
#triangulation text { font-family: var(--mono); letter-spacing: 0.08em; fill: var(--ink-3); }
.tri__line { stroke: var(--moss); }
.tri__station circle { stroke: var(--ochre-deep); fill: none; }
.tri__station circle:last-child { fill: var(--ochre-deep); stroke: none; }

.rightway__figure { margin: 0; position: relative; }
.rightway__figure img { width: 100%; }
.rightway__figure figcaption {
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.04em;
  color: var(--ink-3); padding-top: 0.7rem; border-top: 1px solid var(--line); margin-top: 0.7rem;
}

/* The selected-work grid and the withheld/reserved placeholder panels were
   removed with the placeholder case studies in v2. Their styles are deleted
   rather than parked — v1 holds them at tag v1.0-stage1-approved. */

/* ---------- what this means for clients · CONTEXT 006 ---------- */

.readings {
  list-style: none; margin-block: 0; margin-inline: auto; padding: 0;
  display: grid; gap: 1px; background: var(--line-light);
  border-top: 1px solid var(--line-light); border-bottom: 1px solid var(--line-light);
  grid-template-columns: 1fr;
}
@media (min-width: 46rem) { .readings { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 74rem) { .readings { grid-template-columns: repeat(4, 1fr); } }
.readings li {
  background: var(--ink);
  padding: clamp(1.5rem, 2.5vw, 2.25rem) clamp(1.25rem, 2vw, 1.75rem);
  display: flex; flex-direction: column;
}
.readings__num { margin: 0 0 1.5rem; color: var(--ochre-bright); }
.readings h3 { color: var(--bone); font-size: clamp(1.1rem, 1rem + 0.5vw, 1.32rem); margin-bottom: 0.55rem; }
.readings p { font-size: 0.93rem; color: #b6ae9b; margin: 0; }

/* ---------- partner record · CONTEXT 006 ----------
   Our copy about a live relationship, typeset as record rather than as a pull
   quote: it opens on the same datum rule the ledger and every capability pass
   open on, and the mark sits in a spec column beside it, the way a sheet
   carries its issuing party. The mark is mounted on paper because a partner's
   colours are never restated in ours, and because this crimson would fall
   below contrast laid straight on ink. */

.partner { margin: clamp(3rem, 6vw, 5rem) auto 0; padding: 0; }
.partner__ctx { margin: 0 0 1.25rem; }
.partner__datum {
  display: block; width: 100%; height: 10px;
  margin: 0 0 clamp(1.75rem, 3vw, 2.5rem);
}
.partner__datum-line { stroke: var(--ochre-bright); }

.partner__body {
  display: grid; gap: clamp(1.75rem, 4vw, 3.5rem);
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.42fr);
  align-items: start;
}
@media (max-width: 58rem) { .partner__body { grid-template-columns: 1fr; } }

/* min-width: 0 in both columns so a long line wraps inside its cell instead of
   pushing the grid past the viewport — the failure the ledger hit at CTX 002 */
.partner__copy { min-width: 0; }
.partner__lede {
  font-family: var(--serif); font-variation-settings: "opsz" 40;
  font-size: clamp(1.08rem, 0.98rem + 0.5vw, 1.4rem);
  line-height: 1.46; color: var(--bone); max-width: 52ch;
}
.partner__copy p + p { font-size: 0.95rem; color: #b6ae9b; max-width: 58ch; margin-bottom: 0; }

.partner__source { min-width: 0; display: flex; flex-direction: column; }
/* align-self, not just inline-block: as a flex item the mount would stretch to
   the column and the mark would sit in a full-width white band. It hugs. */
.partner__mount {
  display: inline-block; align-self: flex-start; background: var(--paper);
  padding: 0.95rem 1.15rem; border-radius: 2px; margin-bottom: 1.35rem;
}
.partner__mark { display: block; width: clamp(7.5rem, 11vw, 9.5rem); height: auto; }
.partner__spec { margin: 0 0 1.15rem; display: grid; gap: 0.7rem; }
.partner__spec > div { display: grid; gap: 0.15rem; }
.partner__spec dt { color: var(--ochre-bright); }
.partner__spec dd { margin: 0; font-size: 0.9rem; color: var(--bone); line-height: 1.45; }
.partner__stamp {
  display: block; border-top: 1px solid var(--line-light);
  padding-top: 0.75rem; margin: 0;
}

/* The fixed margin rail is on above 68rem and the reading cards clear it on
   their own padding; this block starts at the section gutter, so between
   68.0625rem and 86rem it reserves the rail column itself — the same clearance
   the tablet hero takes. Above 86rem the gutter is already wider than the
   rail. Placed after the base rules so the override is not discarded. */
@media (min-width: 68.0625rem) and (max-width: 86rem) {
  .partner { padding-left: max(0px, var(--rail-w) + 1rem - var(--gut)); }
}

/* ---------- people · CONTEXT 007 ---------- */

.people { display: grid; gap: clamp(3rem, 6vw, 5rem); }
.person {
  display: grid; gap: clamp(1.5rem, 4vw, 3.5rem);
  grid-template-columns: minmax(0, 0.62fr) minmax(0, 1fr);
  align-items: start;
  border-top: 2px solid var(--ink); padding-top: clamp(1.5rem, 3vw, 2.5rem);
}
@media (max-width: 54rem) { .person { grid-template-columns: 1fr; } }
.person__portrait { margin: 0; position: relative; aspect-ratio: 4 / 5; background: var(--sand-2); }
.person__portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.person__role {
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 1.25rem;
}
.person__quote {
  font-family: var(--serif); font-variation-settings: "opsz" 40;
  font-size: clamp(1.1rem, 1rem + 0.5vw, 1.35rem);
  line-height: 1.42; color: var(--ink); max-width: 44ch; margin-bottom: 1.75rem;
}
.person__body { position: relative; }

.facts { margin: 0; }
/* Flex, not a fixed 8.5rem grid track. The label column has to hold its width
   so the values line up, but a fixed track cannot: text-only enlargement grows
   the label and leaves the track, and the label prints over its own value. The
   floor keeps the alignment, the row wraps when the label outgrows it. */
.facts > div {
  display: flex; flex-wrap: wrap; column-gap: 1rem; row-gap: 0.25rem;
  padding: 0.85rem 0; border-top: 1px solid var(--line);
}
@media (max-width: 34rem) { .facts > div { flex-direction: column; } }
.facts dt {
  flex: 0 0 auto; min-width: 8.5rem; max-width: 100%;
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ochre-deep); padding-top: 0.2em;
}
.facts dd { flex: 1 1 14rem; min-width: 0; margin: 0; font-size: 0.9rem; color: var(--ink-2); line-height: 1.5; }

/* ---------- procurement · CONTEXT 008 — the stillest section ---------- */

.proc { margin-block: 0; border-top: 2px solid var(--ink); }
.proc > div {
  display: grid; grid-template-columns: minmax(10rem, 16rem) 1fr; gap: 1.5rem;
  padding: 1.15rem 0; border-bottom: 1px solid var(--line); align-items: baseline;
}
@media (max-width: 40rem) { .proc > div { grid-template-columns: 1fr; gap: 0.3rem; } }
.proc dt { font-weight: 600; font-size: 0.95rem; }
.proc dd { margin: 0; color: var(--ink-2); font-size: 0.95rem; }
.chip {
  display: inline-block; margin-left: 0.5rem;
  font-family: var(--mono); font-size: 0.63rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--amber); border: 1px solid rgba(184, 121, 31, 0.5); border-radius: 2px;
  padding: 0.12rem 0.45rem; vertical-align: 0.1em;
}
.chip--ok { color: var(--moss); border-color: rgba(59, 74, 58, 0.45); }

/* ---------- contact · CONTEXT 009 ---------- */

.contact__grid {
  display: grid; gap: clamp(2rem, 5vw, 4.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr));
  align-items: start;
}
/* same reason as the trust ledger: a grid item is min-content wide by default,
   and a text input's min-content width is its intrinsic character size, which
   grows with the font. Without this the form pushes the page sideways under
   text-only enlargement — 26px on Chromium, 121px on WebKit at 375. */
.contact__grid > * { min-width: 0; }
.contact__benchline { width: min(20rem, 100%); height: auto; margin-top: 2.5rem; display: block; }
.bench__line { stroke: var(--ochre-bright); }
.bench__mark circle, .bench__mark line { stroke: var(--ochre-bright); }
.bench__mark circle:last-of-type { fill: var(--ochre-bright); stroke: none; }

.form { display: grid; gap: 1rem; position: relative; }
.form > * { min-width: 0; }
.form label {
  display: grid; gap: 0.35rem;
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: #b6ae9b;
}
.form__label-copy { display: inline-flex; align-items: baseline; gap: 0.55rem; }
.form input, .form textarea {
  /* width, not the control's intrinsic character size — otherwise the field
     sets the column width and the column cannot shrink back */
  width: 100%; min-width: 0;
  font: inherit; font-family: var(--sans); font-size: 0.95rem; letter-spacing: normal; text-transform: none;
  background: rgba(250, 247, 241, 0.06); color: #f2ece0;
  border: 1px solid var(--line-light); border-radius: 2px; padding: 0.7rem 0.85rem;
}
/* The ruled underline is the designed focus state, but it is not sufficient on
   its own — the outline stays so the indicator survives forced-colours and
   meets the non-text contrast requirement. */
.form input:focus-visible, .form textarea:focus-visible {
  border-color: var(--ochre-bright);
  border-bottom-width: 2px;
  background: rgba(250, 247, 241, 0.1);
  outline: 2px solid var(--ochre-bright);
  outline-offset: 2px;
}
/* collection notice: designed into the form, not bolted on at launch */
.form__notice {
  margin: 0; font-size: 0.8rem; line-height: 1.55; color: #a8a08d;
  max-width: 52ch; padding-top: 0.85rem; border-top: 1px solid var(--line-light);
}
.form__notice a { color: var(--ochre-bright); text-underline-offset: 2px; }
.form__opt {
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.1em;
  color: #8d8776; text-transform: uppercase;
}
/* Submission feedback stays visible and is announced by the live region. */
.form__state {
  margin: 0; font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--amber);
  border: 1px dashed rgba(184, 121, 31, 0.5); border-radius: 2px;
  padding: 0.5rem 0.7rem; max-width: none;
}
.form .btn { justify-self: start; }
.form .btn:disabled { opacity: 0.65; cursor: wait; }

/* ---------- footer ---------- */

.site-footer { background: var(--sand); padding: clamp(2.5rem, 5vw, 4rem) var(--gut) 2rem; position: relative; z-index: 5; }
/* the firm's line closes the record in the reading voice, not the mono
   instrument voice — it is a statement, not a measurement */
.footer__creed {
  max-width: var(--max); margin: 0 auto clamp(2.5rem, 5vw, 4rem);
  font-family: var(--serif); font-variation-settings: "opsz" 60;
  font-weight: 340; font-size: clamp(1.35rem, 1.1rem + 1.2vw, 2rem);
  line-height: 1.35; color: var(--ink); letter-spacing: 0.005em;
}
.acknowledgement {
  max-width: var(--max); margin: 0 auto clamp(2rem, 4vw, 3rem);
  border-left: 2px solid var(--ochre); padding-left: clamp(1rem, 2vw, 1.75rem);
  position: relative;
}
.acknowledgement p {
  max-width: 60ch;
  font-family: var(--serif); font-variation-settings: "opsz" 30;
  font-size: clamp(1.05rem, 1rem + 0.4vw, 1.25rem); line-height: 1.55;
  color: var(--ink-2); margin: 0;
}
.acknowledgement strong { font-weight: 560; color: var(--ink); }
.footer__bar {
  max-width: var(--max); margin: 0 auto; padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 1rem; align-items: baseline; justify-content: space-between;
}
.footer__mark {
  font-family: var(--serif); font-size: 1.3rem; letter-spacing: 0.02em; margin: 0;
}
.footer__close { margin: 0; color: var(--ochre-deep); }
.footer__meta { font-size: 0.78rem; color: var(--ink-3); margin: 0; max-width: none; }
.footer__meta code { font-family: var(--mono); font-size: 0.95em; }

/* ---------- document pages (privacy) ---------- */

.doc__body { max-width: 68ch; }
.doc__body h2 { margin-top: 2.5rem; font-size: clamp(1.35rem, 1.15rem + 0.9vw, 1.75rem); }
.doc__body a { color: var(--ochre-deep); }

/* ---------- split-text masking (set up by main.js) ---------- */

[data-split] .split-line { display: block; overflow: hidden; }
[data-split] .split-line > div { display: block; }

@media print {
  .rail, .hero__canvas, .reticle { display: none !important; }
  .plate, .section--ink, .trust { background: #fff !important; color: #000 !important; }

  /* An ink plate printed on paper inverts its ground, so every colour tuned
     for ink — bone body text, the muted greys, the ochre labels — has to be
     re-stated or it prints at 1.3:1 and the section comes out blank. This is
     wider than the partner record because CONTEXT 006 and 009 already lost
     their headings and body copy the same way. Quiet type goes to grey, not
     black, so the hierarchy survives the ground change. */
  .plate p, .plate h2, .plate h3, .plate li, .plate dd, .plate a,
  .trust p, .trust li, .trust dd { color: #000 !important; }
  .plate .ctx, .plate .eyebrow, .plate dt, .trust .ctx,
  .trust .trust__meta { color: #4a4a4a !important; }
  .plate .btn { color: #000 !important; background: transparent !important; border-color: rgba(0, 0, 0, 0.45) !important; }

  /* hairlines and cell grounds were rgba(bone) — invisible once the ground is
     paper. The GRS mark keeps its own paper mount, as issued. */
  .readings { background: rgba(0, 0, 0, 0.22) !important; border-color: rgba(0, 0, 0, 0.22) !important; }
  .readings li { background: #fff !important; }
  .partner__stamp { border-top-color: rgba(0, 0, 0, 0.22) !important; }
  .partner__datum-line { stroke: #000 !important; }
}