/* skeelx.com — DATUM system (docs/REDESIGN-SPEC.md). Brand tokens are canonical in brand/tokens.css.
   The legacy token names below are a public API: 376 inline styles and 60 SVG diagrams call them. Never rename. */

:root {
  /* palette — frozen names */
  --ink: #0F1115;
  --paper: #F6F5F1;
  --bone: #EDEBE4;
  --gunmetal: #565B64;
  --steel: #7E8795;
  --line: #DDDACF;
  --line-dark: #2A2E36;
  --beam: #FF4D00;
  --beam-deep: #C93D02;
  --sans: "Instrument Sans", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", "SF Mono", Menlo, Consolas, monospace;

  /* additions — same family, no new hue */
  --ink-2: #181B21;
  --construct: rgb(15 17 21 / 0.2);
  --datum: rgb(15 17 21 / 0.42);
  --fog: #A9AFB8;   /* body text on ink: 8.6:1 */

  /* semantic scope: paper (redefined for ink surfaces below) */
  --bg: var(--paper);
  --bg-2: var(--bone);
  --fg: var(--ink);
  --fg-2: var(--gunmetal);
  --rule: var(--line);
  --rule-strong: var(--ink);
  --accent: var(--beam-deep);
  --focus: var(--beam-deep);

  /* type */
  --t-hero: clamp(3.5rem, 0.4rem + 10.6vw, 11rem);
  --t-display: clamp(2.5rem, 1.4rem + 4.6vw, 5.25rem);
  --t-display-s: clamp(2.125rem, 1.3rem + 3vw, 4rem);
  --t-closer: clamp(2.5rem, 1rem + 4.8vw, 5.75rem);
  --t-title: clamp(1.875rem, 1.2rem + 2.6vw, 3.5rem);
  --t-index: clamp(1.625rem, 1rem + 2vw, 2.75rem);
  --t-head: clamp(1.1875rem, 1rem + 0.6vw, 1.5rem);
  --t-lede: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  --t-small: 0.9375rem;
  --t-mono: 0.75rem;
  --t-note: 0.6875rem;

  /* grid & space */
  --max: 1180px;
  --margin: clamp(1.25rem, 4vw, 2.5rem);
  --gutter: clamp(0.75rem, 0.3rem + 1.35vw, 1.5rem);
  --head-h: 56px;
  --space-section: clamp(4.5rem, 3rem + 6vw, 9rem);
  --space-block: clamp(2rem, 1.4rem + 2.4vw, 3.5rem);
  --measure: 62ch;
  --radius: 0;

  /* motion */
  --cut: -52.05deg; /* the wordmark's rising stroke: atan(100 / 78) */
  --ease: cubic-bezier(0.2, 0.6, 0.2, 1);
  --ease-draft: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-1: 160ms;
  --dur-2: 220ms;

  /* marks: the rising stroke of the wordmark x, as a tick; and the full x */
  --tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-13 -13 104 126'%3E%3Cpath d='M0 100L78 0' stroke='%23FF4D00' stroke-width='26' stroke-linecap='round'/%3E%3C/svg%3E");
  --xmark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-13 -13 104 126'%3E%3Cpath d='M0 0L78 100' stroke='%230F1115' stroke-width='18' stroke-linecap='round'/%3E%3Cpath d='M0 100L78 0' stroke='%23FF4D00' stroke-width='18' stroke-linecap='round'/%3E%3C/svg%3E");
  --xmark-ink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-13 -13 104 126'%3E%3Cpath d='M0 0L78 100' stroke='%23F6F5F1' stroke-width='18' stroke-linecap='round'/%3E%3Cpath d='M0 100L78 0' stroke='%23FF4D00' stroke-width='18' stroke-linecap='round'/%3E%3C/svg%3E");

  color-scheme: light;
}
@media (min-width: 1024px) { :root { --head-h: 64px; } }

/* ink surfaces: every descendant rule is complete by construction */
.on-ink {
  --bg: var(--ink);
  --bg-2: var(--ink-2);
  --fg: var(--paper);
  --fg-2: var(--steel);
  --rule: var(--line-dark);
  --rule-strong: var(--paper);
  --accent: var(--beam);
  --focus: var(--beam);
  --datum: rgb(246 245 241 / 0.4);
}

/* ================================================================ base */

* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.62;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
main { counter-reset: sec fig; display: block; }
strong { font-weight: 600; color: var(--fg); }
em { font-style: italic; }
p { max-width: var(--measure); text-wrap: pretty; }
h1, h2, h3, h4, h5 { text-wrap: balance; }
::selection { background: var(--ink); color: var(--paper); }

.vh {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: var(--margin); top: 0.5rem; z-index: 100;
  padding: 0.6rem 0.9rem; background: var(--paper); color: var(--ink);
  border: 1px solid var(--ink); font-weight: 560; text-decoration: none;
  transform: translateY(-160%);
}
.skip:focus { transform: none; }

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

.wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--margin); }

/* ================================================================ type */

h1 {
  font-size: var(--t-display); line-height: 0.95; letter-spacing: -0.035em;
  font-weight: 560; font-stretch: 86%;
}
h2 {
  font-size: var(--t-title); line-height: 1.02; letter-spacing: -0.025em;
  font-weight: 560; font-stretch: 90%;
}
h3 { font-size: var(--t-head); line-height: 1.2; letter-spacing: -0.012em; font-weight: 560; }
.lede { font-size: var(--t-lede); line-height: 1.45; letter-spacing: -0.005em; color: var(--fg-2); max-width: 60ch; }
.muted { color: var(--fg-2); }
.nm { text-transform: none; letter-spacing: 0.04em; } /* the name is always lowercase, even in uppercase labels */
.mono { font-family: var(--mono); font-size: 0.8125rem; letter-spacing: 0.06em; font-variant-numeric: tabular-nums; }
.idx {
  font-family: var(--mono); font-size: var(--t-mono); font-weight: 500; letter-spacing: 0.08em;
  color: var(--accent); font-variant-numeric: tabular-nums; text-transform: uppercase;
}

.eyebrow {
  font-family: var(--mono); font-size: var(--t-mono); font-weight: 500; line-height: 1.3;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-2);
  display: flex; align-items: flex-start; gap: 0.7rem; margin-bottom: 1.25rem;
}
.eyebrow::before {
  content: ""; flex: none; width: 9px; height: 11px; margin-top: 0.125rem;
  background: var(--tick) center / contain no-repeat;
}
/* numbered sections: the eyebrow prints its sheet zone first — "02 / label" */
.section:has(> .wrap > .eyebrow) { counter-increment: sec; }
.section > .wrap > .eyebrow::before {
  content: counter(sec, decimal-leading-zero);
  content: counter(sec, decimal-leading-zero) / "";
  width: auto; height: auto; color: var(--accent);
  padding-right: 1.35rem; background-position: right 0.1rem center; background-size: 9px 11px; margin-top: 0;
}
.pillar { counter-increment: sec; }
main:not(:has(> .section:not(.on-ink) > .wrap > .eyebrow, > .pillar)) > .section.on-ink { counter-increment: none; }
main:not(:has(> .section:not(.on-ink) > .wrap > .eyebrow, > .pillar)) > .section.on-ink > .wrap > .eyebrow::before {
  content: ""; width: 9px; height: 11px; padding-right: 0; background-position: center; background-size: contain; margin-top: 0.125rem;
}

/* ================================================================ links & buttons */

.text-link {
  font-weight: 500; color: var(--fg);
  text-decoration: underline 2px var(--beam);
  text-underline-offset: 0.28em; text-decoration-skip-ink: none;
  transition: color var(--dur-1) var(--ease), text-decoration-thickness var(--dur-1) var(--ease);
}
.text-link:hover { color: var(--accent); text-decoration-thickness: 3px; }
.on-ink .text-link:hover { color: var(--paper); }

.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 1.25rem; border: 1px solid transparent; border-radius: 0;
  font-size: 0.9375rem; font-weight: 560; line-height: 1.2; text-decoration: none; white-space: nowrap;
  transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.btn::after {
  content: ""; position: absolute; left: -1px; right: -1px; bottom: -1px; height: 3px;
  background: var(--beam); transform: scaleX(0); transform-origin: left;
  transition: transform 180ms var(--ease);
}
.btn:hover::after { transform: scaleX(1); }
.btn-primary { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.btn-ghost { background: transparent; color: var(--fg); border-color: var(--fg); }
.on-ink .btn-ghost[style]:is(:hover, :focus-visible) { border-color: var(--paper) !important; }
/* safety net: 117 closer buttons carry an inline beam fill (paper on beam fails AA at 3.05:1) */
.on-ink .btn-primary[style] { background: var(--paper) !important; color: var(--ink) !important; }
.on-ink .btn-ghost[style] { border-color: var(--steel) !important; color: var(--paper) !important; }
.btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; margin-top: 2rem; }

/* ================================================================ header (unchanged from v1 by request) */

/* ---------- header ---------- */
.site-head { border-bottom: 1px solid var(--line); background: var(--paper); }
.site-head .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem 2rem; flex-wrap: wrap; padding-top: 1.1rem; padding-bottom: 1.1rem;
}
.logo img { width: 118px; height: auto; }
.site-nav { display: flex; align-items: center; gap: clamp(1rem, 2.5vw, 2rem); flex-wrap: wrap; }
.site-nav a {
  text-decoration: none; font-weight: 500; font-size: 0.9375rem; color: var(--gunmetal);
  transition: color 150ms var(--ease);
}
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--ink); }

/* articles mega-menu (CSS-only: hover + keyboard focus; hidden on touch/small) */
.nav-item.has-menu { position: relative; display: flex; align-items: center; }
.mega { display: none; position: absolute; top: 100%; right: 0; z-index: 30; padding-top: 18px; }
@media (hover: hover) and (min-width: 901px) {
  .has-menu:hover .mega, .has-menu:focus-within .mega { display: block; }
}
.mega-in { width: 720px; max-width: min(92vw, 720px); background: var(--paper);
  border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 18px 50px rgba(15, 17, 21, 0.14);
  padding: 1.4rem 1.5rem 1.2rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 1.4rem; }
.mega-in h5 { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--beam-deep); font-weight: 500; margin-bottom: 0.5rem; }
.mega-in .mitem { font-size: 0.84rem; font-weight: 400; color: var(--gunmetal) !important;
  text-decoration: none; padding: 0.32rem 0; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mega-in .mitem:hover { color: var(--ink) !important; }
.mega-in .mall { grid-column: 1 / -1; margin-top: 1rem; padding-top: 0.9rem;
  border-top: 1px solid var(--line); font-size: 0.875rem; width: max-content; color: var(--ink) !important; }

/* digital capabilities mega-menu (wide variant: anchored to the header, not the item) */
.site-head .wrap { position: relative; }
.nav-item.has-menu--wide { position: static; }
.mega--digital { left: 0; right: 0; }
.mega--digital::before { content: ""; position: absolute; left: 0; right: 0; top: -20px; height: 20px; }
.mega-in--wide { width: 100%; max-width: none; gap: 0 1.2rem; }
.mega-in .mwhen { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.02em;
  color: var(--steel); margin-bottom: 0.55rem; }
.mega-in .mfoot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 0.3rem 1.5rem; margin-top: 1rem; padding-top: 0.9rem; border-top: 1px solid var(--line); }
.mega-in .mfoot .mall { margin: 0; padding: 0; border: 0; }
.mega-in .mfoot .mitem { padding: 0; }

.btn-cta {
  background: var(--ink); color: var(--paper) !important;
  padding: 0.55rem 1.1rem; border-radius: 6px;
  transition: background 150ms var(--ease);
}
.btn-cta:hover { background: var(--beam); }

/* ---------- overlay header (full-bleed hero pages) ---------- */
.site-head--overlay { position: absolute; top: 0; left: 0; right: 0; z-index: 20; background: transparent; border-bottom: none; }
.site-head--overlay .site-nav a { color: rgba(246, 245, 241, 0.78); }
.site-head--overlay .site-nav a:hover, .site-head--overlay .site-nav a[aria-current="page"] { color: var(--paper); }
.site-head--overlay .btn-cta { background: var(--beam); }
.site-head--overlay .btn-cta:hover { background: var(--ink); }

@media (max-width: 760px) {
  .site-head--overlay .btn-cta { display: none; } /* hero's own CTA is in view */
}

/* ================================================================ the rail (>= 1024): eyebrows become zone labels in a left rail */

@media (min-width: 1024px) {
  :is(.hero, .section, .pillar) > .wrap {
    display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 0; align-items: start;
  }
  :where(:is(.hero, .section, .pillar) > .wrap > *) { grid-column: 4 / -1; }
  :is(.hero, .section) > .wrap > .eyebrow { grid-column: 1 / 4; grid-row: 1 / span 30; align-self: start; margin: 0; padding-top: 0.6rem; }
  .section > .wrap > .eyebrow { position: sticky; top: 1.5rem; }
  .hero > .wrap > .eyebrow { grid-row: 1; }
  .hero > .wrap > h1 { grid-row: 1; }
  .hero > .wrap > .lede { grid-column: 4 / 11; }
  .hero > .wrap > .hero-img { grid-column: 1 / -1; }
  .prose > .wrap { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; }
  :where(.prose > .wrap > *) { grid-column: 4 / 11; }
  /* full-width figures: the section's eyebrow stays a single static row so the figure can use the rail */
  :is(.section, .prose) > .wrap > :is(.diagram, .home-fig, .gl-figure) { grid-column: 1 / -1; }
  .section:has(> .wrap > :is(.diagram, .home-fig, .gl-figure)) > .wrap > .eyebrow { grid-row: 1; position: static; }
  .pillar > .wrap > .sec-head { display: contents; }
  .pillar .sec-head > .idx { grid-column: 1 / 4; grid-row: 1 / span 30; align-self: start; position: sticky; top: 1.5rem; }
  .pillar .sec-head > h2 { grid-column: 4 / -1; grid-row: 1; }
  .pillar > .wrap > .thesis { grid-column: 4 / 11; }
  .proc-detail > .wrap > .step { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: start; }
  .proc-detail .step > .sec-head { display: contents; }
  .proc-detail .step .sec-head > .idx { grid-column: 1 / 4; grid-row: 1 / span 3; }
  .proc-detail .step .sec-head > h2 { grid-column: 4 / -1; grid-row: 1; margin-bottom: 1rem; }
  .proc-detail .step > p { grid-column: 4 / 11; }
}

/* ================================================================ inner hero */

.hero { position: relative; padding: clamp(3rem, 7vw, 6.5rem) 0 clamp(3rem, 6vw, 5.5rem); border-bottom: 1px solid var(--ink); }
/* the crossing mark: a small drawn x where the hero's base rule meets column 1 */
.hero::after {
  content: ""; position: absolute; bottom: -6.5px; width: 10px; height: 12px;
  left: max(var(--margin), calc((100% - var(--max)) / 2 + var(--margin)));
  background: var(--xmark) center / contain no-repeat;
}
.hero:has(+ .on-ink) { border-bottom: 0; }
.hero:has(+ .on-ink)::after { content: none; }   /* an ink sheet next: the edge is the datum, no mark to half-hide */
.hero h1 { max-width: 22ch; }
.hero:has(+ .prose) h1 { font-size: var(--t-display-s); line-height: 1; letter-spacing: -0.03em; font-stretch: 88%; max-width: 26ch; }
.hero .lede { margin-top: 1.5rem; }
.hero .mono.muted { color: var(--gunmetal); }
.hero-img {
  position: relative; margin-top: clamp(2rem, 4vw, 3.25rem); border: 1px solid var(--line); overflow: hidden;
  aspect-ratio: 2400 / 1018; background: var(--bone);
}
.hero-img img { width: 100%; height: 100%; object-fit: cover; }
/* registration ticks at the frame's corners, as on every drawing sheet: the photo reads as a plate on the sheet */
.hero-img::after {
  content: ""; position: absolute; inset: 8px; pointer-events: none;
  background:
    linear-gradient(var(--ink), var(--ink)) left top / 12px 1px no-repeat,
    linear-gradient(var(--ink), var(--ink)) left top / 1px 12px no-repeat,
    linear-gradient(var(--ink), var(--ink)) right top / 12px 1px no-repeat,
    linear-gradient(var(--ink), var(--ink)) right top / 1px 12px no-repeat,
    linear-gradient(var(--ink), var(--ink)) left bottom / 12px 1px no-repeat,
    linear-gradient(var(--ink), var(--ink)) left bottom / 1px 12px no-repeat,
    linear-gradient(var(--ink), var(--ink)) right bottom / 12px 1px no-repeat,
    linear-gradient(var(--ink), var(--ink)) right bottom / 1px 12px no-repeat;
}
.hero-img--framed::after { content: none; }   /* the photo carries its own drawn frame */

/* the 404 has no chrome: one sheet the height of the viewport, the wordmark on the rail, ticks at the corners */
.nf { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding-block: 7rem 5rem; border-bottom: 0; }
.nf::after { content: none; }
.nf > .wrap { width: 100%; }
.nf::before {
  content: ""; position: absolute; inset: 14px; pointer-events: none;
  background:
    linear-gradient(var(--ink), var(--ink)) left top / 16px 1px no-repeat,
    linear-gradient(var(--ink), var(--ink)) left top / 1px 16px no-repeat,
    linear-gradient(var(--ink), var(--ink)) right top / 16px 1px no-repeat,
    linear-gradient(var(--ink), var(--ink)) right top / 1px 16px no-repeat,
    linear-gradient(var(--ink), var(--ink)) left bottom / 16px 1px no-repeat,
    linear-gradient(var(--ink), var(--ink)) left bottom / 1px 16px no-repeat,
    linear-gradient(var(--ink), var(--ink)) right bottom / 16px 1px no-repeat,
    linear-gradient(var(--ink), var(--ink)) right bottom / 1px 16px no-repeat;
}
.nf-mark { position: absolute; top: 2.75rem; left: max(var(--margin), calc((100% - var(--max)) / 2 + var(--margin))); }
.nf-mark img { width: 118px; height: auto; }
.nf-more { margin-top: 1.75rem; font-family: var(--mono); font-size: var(--t-note); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-2); }
.nf-more a { color: var(--fg); text-decoration: underline 1px var(--datum); text-underline-offset: 0.3em; }
.nf-more a:is(:hover, :focus-visible) { text-decoration: underline 2px var(--beam); }

/* ================================================================ small delights (v8 r2): the 404 drawing and the contact sheet */

/* 404 — the unmakeable part: an impossible fork in ISO linework, a revision cloud (the one beam element), a title block */
.nf-fig {
  margin-top: clamp(1.75rem, 4vh, 2.75rem); max-width: 54rem;
  display: grid; grid-template-columns: minmax(0, 1fr) 13.5rem; column-gap: clamp(1rem, 2.5vw, 2rem); align-items: end;
}
.nf-fig svg { display: block; width: 100%; height: auto; overflow: visible; }
.nf-fig text { font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.02em; }
.nf-fig .nf-note { font-size: 11.5px; }
.nf-fig .nf-rev { font-size: 10px; font-weight: 500; }
.tblock {
  display: grid; grid-template-columns: 1fr auto; gap: 1px; margin: 0;
  background: var(--ink); border: 1.5px solid var(--ink); font-family: var(--mono); color: var(--ink);
}
.tblock > div { background: var(--paper); padding: 0.4rem 0.6rem 0.5rem; min-width: 0; }
.tblock dt { font-size: 0.625rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gunmetal); }
.tblock dd { margin: 0.15rem 0 0; font-size: 0.8125rem; letter-spacing: 0.02em; white-space: nowrap; }
.tblock .tblock-wide dd { font-size: 1rem; font-weight: 500; letter-spacing: 0.04em; }
@media (max-width: 639.98px) {
  .nf-fig { grid-template-columns: 1fr; row-gap: 1.25rem; }
  .nf-fig text { font-size: 17px; }
  .nf-fig .nf-note { font-size: 14.5px; }
  .nf-fig .nf-rev { font-size: 11px; }
  .nf-tb { max-width: 16rem; }
}
@media (min-width: 1024px) and (max-height: 820px) { .nf { padding-block: 6rem 2.5rem; } .nf-fig { max-width: 46rem; } }
@media (prefers-reduced-motion: no-preference) {
  .nf-ol path { stroke-dasharray: 1; animation: nf-draw 0.7s var(--ease-draft) calc(300ms + var(--d, 0) * 1ms) both; }
  .nf-cl, .nf-dm { animation: nf-fade 0.6s var(--ease) 1.15s both; }
  .nf-cloud { stroke-dasharray: 1; animation: nf-draw 1s var(--ease-draft) 1.7s both; }
  .nf-tb { animation: nf-fade 0.6s var(--ease) 1.3s both; }
}
@keyframes nf-draw { from { stroke-dashoffset: 1; } }
@keyframes nf-fade { from { opacity: 0; } }

/* contact — a drawing sheet whose title block is the enquiry; the revision triangle fills once a stage is picked */
.hero > .wrap > .enq { grid-column: 1 / -1; }
.enq {
  position: relative; margin-top: clamp(2rem, 4vw, 3.25rem); padding: 14px; border: 1px solid var(--line); color: var(--ink);
  background:
    /* centring marks at the middle of each edge (ISO 5457), crossing the margin into the frame */
    linear-gradient(var(--ink), var(--ink)) 50% 0 / 1.5px 22px no-repeat,
    linear-gradient(var(--ink), var(--ink)) 50% 100% / 1.5px 22px no-repeat,
    linear-gradient(var(--ink), var(--ink)) 0 50% / 22px 1.5px no-repeat,
    linear-gradient(var(--ink), var(--ink)) 100% 50% / 22px 1.5px no-repeat,
    /* zone ticks in the margin */
    linear-gradient(to right, transparent calc(50% - 0.5px), var(--steel) 0 calc(50% + 0.5px), transparent 0) 0 4px / 12.5% 6px repeat-x,
    linear-gradient(to right, transparent calc(50% - 0.5px), var(--steel) 0 calc(50% + 0.5px), transparent 0) 0 calc(100% - 4px) / 12.5% 6px repeat-x,
    linear-gradient(transparent calc(50% - 0.5px), var(--steel) 0 calc(50% + 0.5px), transparent 0) 4px 0 / 6px 25% repeat-y,
    linear-gradient(transparent calc(50% - 0.5px), var(--steel) 0 calc(50% + 0.5px), transparent 0) calc(100% - 4px) 0 / 6px 25% repeat-y,
    var(--paper);
}
.enq-frame {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 31rem); min-height: clamp(18rem, 27vw, 21.5rem);
  border: 1px solid var(--ink);
}
.enq-notes { grid-column: 1; grid-row: 1; align-self: start; padding: clamp(1rem, 2.4vw, 1.75rem) clamp(1rem, 2.4vw, 1.75rem) 0; }
.enq-draw { grid-column: 1; grid-row: 2; align-self: end; padding: 1rem clamp(1rem, 2.4vw, 1.75rem) clamp(0.9rem, 2vw, 1.4rem); }
.enq-draw svg { display: block; width: 100%; max-width: 330px; height: auto; overflow: visible; }
.enq-draw text { font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em; }
.enq-cap { margin-top: 0.5rem; font-family: var(--mono); font-size: 0.625rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gunmetal); }
/* the envelope firms up with the stage: phantom (no stage / idea), hidden (prototype), visible outline (in production) */
.enq-env { stroke: var(--steel); stroke-width: 1; stroke-dasharray: 20 3 2 3 2 3; transition: stroke var(--dur-2) var(--ease), stroke-width var(--dur-2) var(--ease); }
.enq[data-stage="idea"] .enq-env { stroke: var(--ink); stroke-width: 1.1; }
.enq[data-stage="prototype"] .enq-env { stroke: var(--ink); stroke-width: 1.4; stroke-dasharray: 7 4; }
.enq[data-stage="in production"] .enq-env { stroke: var(--ink); stroke-width: 2.2; stroke-dasharray: none; }
.enq-k { font-family: var(--mono); font-size: 0.625rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gunmetal); }
.enq-v { font-family: var(--mono); font-size: 0.8125rem; letter-spacing: 0.02em; color: var(--ink); }
.enq-list { list-style: none; counter-reset: enq; margin: 0.7rem 0 0; padding: 0; font-family: var(--mono); font-size: 0.8125rem; line-height: 1.5; color: var(--ink); }
.enq-list li { counter-increment: enq; position: relative; padding-left: 2em; margin-top: 0.25rem; }
.enq-list li::before { content: counter(enq) "."; position: absolute; left: 0; color: var(--gunmetal); }
.enq-list li[hidden] { display: none; }
.enq-fine { margin-top: 1.25rem; max-width: 46ch; font-family: var(--mono); font-size: 0.6875rem; line-height: 1.6; letter-spacing: 0.02em; color: var(--gunmetal); }
html:not(.js) .enq-js { display: none; }
.enq-tb { grid-column: 2; grid-row: 1 / span 2; align-self: end; border-top: 1.5px solid var(--ink); border-left: 1.5px solid var(--ink); background: var(--paper); }
.enq-row {
  display: grid; grid-template-columns: 4.25rem minmax(0, 1fr); column-gap: 0.75rem; align-items: center;
  min-height: 3rem; padding: 0.45rem 0.75rem; border-bottom: 1px solid var(--ink);
}
.enq-row--title .enq-v { font-family: var(--sans); font-size: 1.0625rem; font-weight: 540; letter-spacing: -0.005em; line-height: 1.3; }
.enq-chips { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.enq-chip {
  min-height: 2rem; padding: 0.4rem 0.7rem; border: 1px solid var(--steel); border-radius: 0; background: transparent;
  font: 500 0.75rem/1 var(--mono); letter-spacing: 0.03em; color: var(--ink); cursor: pointer;
  transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.enq-chip:hover { border-color: var(--ink); }
.enq-chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.enq-chip:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.enq-foot { display: grid; grid-template-columns: auto auto minmax(0, 1fr); }
.enq-foot > div { display: flex; flex-direction: column; gap: 0.3rem; padding: 0.45rem 0.75rem 0.55rem; border-right: 1px solid var(--ink); }
.enq-foot > div:last-child { border-right: 0; }
.enq-foot .enq-v:not(a) { font-weight: 500; letter-spacing: 0.06em; }
.enq-to { text-decoration: underline 1px var(--datum); text-underline-offset: 0.3em; overflow-wrap: anywhere; }
.enq-to:is(:hover, :focus-visible) { text-decoration-color: var(--ink); }
.enq-rev { display: block; overflow: visible; }
.enq-rev path { fill: transparent; stroke: var(--ink); stroke-width: 1.2; stroke-linejoin: round; transition: fill var(--dur-2) var(--ease), stroke var(--dur-2) var(--ease); }
.enq-rev text { font: 500 8.5px var(--mono); fill: var(--ink); opacity: 0; transition: opacity var(--dur-2) var(--ease); }
.enq.is-staged .enq-rev path { fill: var(--beam); stroke: var(--beam); }
.enq.is-staged .enq-rev text { opacity: 1; }
@media (max-width: 899.98px) {
  .enq-frame { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .enq-tb { grid-column: 1; grid-row: 3; border-left: 0; }
}
@media (max-width: 479.98px) {
  .enq { padding: 12px; }
  .enq-row { grid-template-columns: 3.5rem minmax(0, 1fr); padding-inline: 0.6rem; }
  .enq-chip { min-height: 2.25rem; }
  .enq-foot > div { padding-inline: 0.6rem; }
}
/* ================================================================ end small delights */

/* ================================================================ sections */

.section, .pillar { position: relative; padding: var(--space-section) 0; }
:is(.section, .pillar)::before { content: ""; position: absolute; inset: 0 0 auto; height: 1px; background: var(--rule); transform-origin: left; }
/* the closing ink sheet meets the (unchanged) ink footer without a paper gap */
main > .section.on-ink:last-of-type { margin-bottom: calc(-1 * var(--space-section)); border-bottom: 1px solid var(--line-dark); }
.hero + :is(.section, .pillar)::before, .section.on-ink::before, .band-ink + .section::before, .section + .band-ink::before { content: none; }
.section h2 { max-width: 22ch; }
.section h2 + p, .section h2 + .muted { margin-top: 1.4rem; }
.section .lede { margin-top: 1.4rem; }

.section.on-ink { background: var(--ink); color: var(--paper); }
.on-ink h2, .on-ink h3 { color: var(--paper); }
.on-ink p:not(.eyebrow), .on-ink .muted { color: var(--fog); }
.on-ink > .wrap > h2 { font-size: var(--t-closer); line-height: 0.92; letter-spacing: -0.035em; font-weight: 540; font-stretch: 84%; max-width: 16ch; }
:is(.on-ink, .band-ink)::after {
  content: ""; position: absolute; inset: 14px; pointer-events: none;
  background:
    linear-gradient(var(--beam), var(--beam)) left top / 16px 1px no-repeat,
    linear-gradient(var(--beam), var(--beam)) left top / 1px 16px no-repeat,
    linear-gradient(var(--beam), var(--beam)) right top / 16px 1px no-repeat,
    linear-gradient(var(--beam), var(--beam)) right top / 1px 16px no-repeat,
    linear-gradient(var(--beam), var(--beam)) left bottom / 16px 1px no-repeat,
    linear-gradient(var(--beam), var(--beam)) left bottom / 1px 16px no-repeat,
    linear-gradient(var(--beam), var(--beam)) right bottom / 16px 1px no-repeat,
    linear-gradient(var(--beam), var(--beam)) right bottom / 1px 16px no-repeat;
}

/* ================================================================ tiles */

.tiles {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
  margin-top: 2.5rem; border-top: 1px solid var(--rule); border-left: 1px solid var(--rule);
  box-shadow: inset -1px -1px 0 var(--rule);   /* closes the sheet where a last row runs short: the tiles paint over it everywhere else */
}
/* an even set (four sectors) reads as a 2 × 2 sheet, never three and an orphan */
@media (min-width: 640px) { .tiles--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* a set of three stays one row of three from tablet up, never two and an orphan */
@media (min-width: 760px) { .tiles--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tile {
  position: relative; display: flex; flex-direction: column; min-width: 0;
  padding: 1.5rem 1.4rem 1.75rem; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  text-decoration: none; color: var(--fg); background: var(--bg);
  transition: background-color var(--dur-1) var(--ease);
}
.tile::before { content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 2px; background: var(--fg); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-2) var(--ease); }
.tile::after {
  content: ""; position: absolute; inset: 7px; pointer-events: none;
  background:
    linear-gradient(var(--fg), var(--fg)) left top / 0 1px no-repeat,
    linear-gradient(var(--fg), var(--fg)) left top / 1px 0 no-repeat,
    linear-gradient(var(--fg), var(--fg)) right bottom / 0 1px no-repeat,
    linear-gradient(var(--fg), var(--fg)) right bottom / 1px 0 no-repeat;
  transition: background-size var(--dur-1) var(--ease);
}
.tile:is(:hover, :focus-visible) { background: var(--bg-2); }
.tile:is(:hover, :focus-visible) .idx { color: var(--fg); } /* beam-deep on bone is 4.24:1 — swap to ink on the wash */
.tile:is(:hover, :focus-visible)::before { transform: scaleX(1); }
.tile:is(:hover, :focus-visible)::after { background-size: 10px 1px, 1px 10px, 10px 1px, 1px 10px; }
.tile .idx { display: block; margin-bottom: 1.25rem; }
.tile h3 { font-size: var(--t-head); margin-bottom: 0.5rem; }
.tile p { font-size: var(--t-small); line-height: 1.55; color: var(--fg-2); max-width: none; }
@media (min-width: 1024px) { .tile h3 { font-size: 1.25rem; line-height: 1.22; text-wrap: pretty; } }
@media (max-width: 559.98px) { .tile { padding: 1.1rem 1.1rem 1.25rem; } .tile .idx { margin-bottom: 0.7rem; } .tiles { margin-top: 2rem; } }
.tile:focus-visible, .route:focus-visible { z-index: 1; }

/* ================================================================ articles as drawings (v8 r2) — card plates, the lead sheet, the home register */
/* the drawings are build output (site/build.py → assets/articles/fig/): ink-only plates on paper, one 2:1 sheet each */

.tile-fig {
  position: relative; display: block; margin-bottom: 1.3rem; overflow: hidden;
  aspect-ratio: 2 / 1; border: 1px solid var(--line);
  background:
    linear-gradient(var(--ink), var(--ink)) 4px 4px / 7px 1px no-repeat,
    linear-gradient(var(--ink), var(--ink)) 4px 4px / 1px 7px no-repeat,
    linear-gradient(var(--ink), var(--ink)) calc(100% - 4px) calc(100% - 4px) / 7px 1px no-repeat,
    linear-gradient(var(--ink), var(--ink)) calc(100% - 4px) calc(100% - 4px) / 1px 7px no-repeat,
    var(--paper);
  transition: border-color var(--dur-1) var(--ease);
}
.tile-fig img { width: 100%; height: 100%; transform-origin: 50% 50%; transition: transform 700ms var(--ease-draft); }
.tile--fig:is(:hover, :focus-visible) .tile-fig { border-color: var(--datum); }
@media (prefers-reduced-motion: no-preference) {
  .tile--fig:is(:hover, :focus-visible) .tile-fig img { transform: scale(1.06); }   /* the reader leans in to the plate */
}
@media (max-width: 559.98px) { .tile-fig { margin-bottom: 1rem; } }

/* the lead sheet: the newest article's drawing at reading size, its title block hung on the rail */
.lead-sheet { display: block; margin-top: clamp(2.25rem, 4vw, 3.5rem); color: var(--fg); text-decoration: none; }
.lead-fig {
  position: relative; display: block; aspect-ratio: 1200 / 520; border: 1px solid var(--line);
  background:
    linear-gradient(var(--ink), var(--ink)) 8px 8px / 12px 1px no-repeat,
    linear-gradient(var(--ink), var(--ink)) 8px 8px / 1px 12px no-repeat,
    linear-gradient(var(--ink), var(--ink)) calc(100% - 8px) 8px / 12px 1px no-repeat,
    linear-gradient(var(--ink), var(--ink)) calc(100% - 8px) 8px / 1px 12px no-repeat,
    linear-gradient(var(--ink), var(--ink)) 8px calc(100% - 8px) / 12px 1px no-repeat,
    linear-gradient(var(--ink), var(--ink)) 8px calc(100% - 8px) / 1px 12px no-repeat,
    linear-gradient(var(--ink), var(--ink)) calc(100% - 8px) calc(100% - 8px) / 12px 1px no-repeat,
    linear-gradient(var(--ink), var(--ink)) calc(100% - 8px) calc(100% - 8px) / 1px 12px no-repeat,
    var(--paper);
  transition: border-color var(--dur-1) var(--ease);
}
.lead-fig img { width: 100%; height: 100%; }
.lead-meta {
  display: flex; flex-wrap: wrap; gap: 0.3rem 1.1rem; margin-top: 1.25rem;
  font-family: var(--mono); font-size: var(--t-mono); font-weight: 500; line-height: 1.5; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--fg-2); font-variant-numeric: tabular-nums;
}
.lead-k { color: var(--fg); }   /* the sheet's one beam is in its drawing */
.lead-copy { display: block; margin-top: 0.9rem; }
.lead-h {
  display: block; max-width: 24ch; text-wrap: balance;
  font-size: clamp(1.625rem, 1.1rem + 1.7vw, 2.625rem); line-height: 1.05; letter-spacing: -0.025em; font-weight: 560; font-stretch: 90%;
}
.lead-line { display: block; margin-top: 0.9rem; max-width: 52ch; font-size: var(--t-lede); line-height: 1.45; color: var(--fg-2); text-wrap: pretty; }
.lead-go {
  display: inline-block; margin-top: 1.1rem; font-weight: 500;
  text-decoration: underline 2px var(--beam); text-underline-offset: 0.28em; text-decoration-skip-ink: none;
  transition: color var(--dur-1) var(--ease), text-decoration-thickness var(--dur-1) var(--ease);
}
.lead-sheet:is(:hover, :focus-visible) .lead-fig { border-color: var(--datum); }
.lead-sheet:is(:hover, :focus-visible) .lead-go { color: var(--accent); text-decoration-thickness: 3px; }
@media (min-width: 1024px) {
  .hero > .wrap > .lead-sheet { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: start; }
  .lead-fig { grid-column: 1 / -1; }
  .lead-meta { grid-column: 1 / 4; grid-row: 2; flex-direction: column; gap: 0.35rem; margin-top: 1.75rem; padding-top: 0.6rem; }
  .lead-copy { grid-column: 4 / 11; grid-row: 2; margin-top: 1.75rem; }
}

/* the homepage articles strip: a drawing register of three recent articles */
.art-reg { list-style: none; margin-top: 2.25rem; border-top: 1px solid var(--rule-strong); }
.art-reg li {
  display: grid; grid-template-columns: 4.25rem 9rem minmax(0, 1fr) auto; column-gap: var(--gutter); align-items: baseline;
  padding: 0.9rem 0; border-bottom: 1px solid var(--rule);
}
.art-reg :is(.ar-no, .ar-grp, .ar-d), .art-reg .ar-head span {
  font-family: var(--mono); font-size: var(--t-mono); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--fg-2); font-variant-numeric: tabular-nums;
}
.art-reg .ar-head { padding: 0.55rem 0; }
.art-reg .ar-head span { font-size: var(--t-note); letter-spacing: 0.12em; }
.art-reg .ar-no { color: var(--fg); }
.ar-h {
  font-weight: 500; line-height: 1.35; color: var(--fg); text-decoration: underline 1px transparent; text-underline-offset: 0.28em;
  transition: text-decoration-color var(--dur-1) var(--ease);
}
.ar-h:is(:hover, :focus-visible) { text-decoration: underline 2px var(--beam); }
.art-reg .ar-d { text-align: right; }
@media (min-width: 1024px) { .home-strip > .wrap > .art-reg { grid-column: 5 / -1; grid-row: 2; } }
@media (max-width: 639.98px) {
  .art-reg li { grid-template-columns: auto minmax(0, 1fr) auto; row-gap: 0.4rem; }
  .art-reg .ar-h { grid-column: 1 / -1; grid-row: 2; }
  .art-reg .ar-head span:nth-child(3) { display: none; }
}

/* ================================================================ subs (spec rows, FAQs) */

.subs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem 3rem; margin-top: 3rem; counter-reset: sub; }
@media (min-width: 760px) { .subs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem 3rem; } }
.sub { counter-increment: sub; border-top: 1px solid var(--rule); padding-top: 1rem; min-width: 0; }
.sub h3 { margin-bottom: 0.6rem; }
.sub h3::before {
  content: counter(sub, decimal-leading-zero);
  content: counter(sub, decimal-leading-zero) / "";
  display: block; margin-bottom: 0.65rem;
  font-family: var(--mono); font-size: var(--t-note); font-weight: 500; letter-spacing: 0.1em; color: var(--fg-2);
  font-variant-numeric: tabular-nums;
}
.pillar .sub h3::before,
.section:has(> .wrap > .eyebrow) .sub h3::before {
  content: counter(sec, decimal-leading-zero) "." counter(sub);
  content: counter(sec, decimal-leading-zero) "." counter(sub) / "";
}
.sub p { font-size: 0.96875rem; line-height: 1.6; color: var(--fg-2); max-width: none; }
.sub p + p { margin-top: 0.75rem; }

/* ================================================================ expertise pillars */

.sec-head { display: flex; align-items: baseline; gap: 1.2rem; margin-bottom: 1rem; }
.pillar .sec-head .idx, .proc-detail .sec-head .idx { font-size: var(--t-title); font-weight: 500; letter-spacing: -0.02em; line-height: 1; }
.thesis {
  margin-top: 1rem; padding-left: 1rem; border-left: 1px solid var(--ink);
  font-size: var(--t-lede); line-height: 1.45; color: var(--fg-2); max-width: 52ch;
}
/* engagement models: a short parts list — zone.item, the model, when it fits */
.models { list-style: none; margin-top: 2.25rem; max-width: 54rem; border-top: 1px solid var(--rule-strong); counter-reset: model; }
.models > li {
  counter-increment: model; display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); column-gap: 0.75rem; row-gap: 0.1rem;
  align-items: baseline; padding: 0.85rem 0 0.95rem; border-bottom: 1px solid var(--rule);
}
.models > li::before {
  content: counter(sec, decimal-leading-zero) "." counter(model);
  content: counter(sec, decimal-leading-zero) "." counter(model) / "";
  grid-row: 1 / span 2; font: 500 var(--t-note)/1.6 var(--mono); letter-spacing: 0.08em; color: var(--accent); font-variant-numeric: tabular-nums;
}
.models strong { font-size: 1.0625rem; font-weight: 560; line-height: 1.35; color: var(--fg); }
.models span { font-size: var(--t-small); line-height: 1.5; color: var(--fg-2); }
.on-ink .models span { color: var(--fog); }
@media (min-width: 760px) {
  .models > li { grid-template-columns: 2.75rem minmax(0, 18rem) minmax(0, 1fr); column-gap: var(--gutter); }
  .models > li::before { grid-row: 1; }
}

/* ================================================================ process */

.proc {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem var(--gutter);
  margin-top: 3rem; padding-top: 2.25rem;
}
@media (min-width: 640px) { .proc { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .proc { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 0; } .proc .step { display: grid; grid-row: span 4; grid-template-rows: subgrid; align-content: start; } }
@media (max-width: 639.98px) { .proc .step:not(:first-child)::before { content: none; } }
@media (min-width: 640px) and (max-width: 1023.98px) { .proc .step:nth-child(n+3)::before { content: none; } }
/* the dimension chain: one line, arrowheads at both ends, a gate tick at each step */
.proc::before { content: ""; position: absolute; left: 0; right: 0; top: 0.5rem; height: 1px; background: var(--rule-strong); transform-origin: left; }
.proc::after {
  content: ""; position: absolute; left: -1px; right: -1px; top: calc(0.5rem - 4px); height: 9px;
  background:
    conic-gradient(from 225deg at 0 50%, var(--rule-strong) 0 90deg, transparent 0) left / 9px 9px no-repeat,
    conic-gradient(from 45deg at 100% 50%, var(--rule-strong) 0 90deg, transparent 0) right / 9px 9px no-repeat;
}
.proc .step { position: relative; min-width: 0; }
.proc .step::before { content: ""; position: absolute; left: 0; top: calc(-2.25rem + 0.5rem - 6px); width: 1px; height: 13px; background: var(--rule-strong); }
.proc .step .idx { display: block; margin-bottom: 0.8rem; }
.proc .step h3 { font-size: var(--t-head); margin-bottom: 0.45rem; }
.proc .step p { font-size: var(--t-small); line-height: 1.55; max-width: none; color: var(--fg-2); }
.proc .step .you-get { margin-top: 0.9rem; font-family: var(--mono); font-size: var(--t-note); line-height: 1.55; letter-spacing: 0.04em; }
.proc .step .you-get b { font-weight: 500; color: var(--fg); letter-spacing: 0.1em; text-transform: uppercase; }

.proc-detail .step { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.proc-detail .step .sec-head { margin-bottom: 1rem; }
.proc-detail .step .roles { margin-top: 1.1rem; font-size: 0.96875rem; line-height: 1.65; color: var(--fg-2); }
.proc-detail .step .roles strong {
  font-family: var(--mono); font-size: var(--t-note); font-weight: 500; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--accent);
}

/* ================================================================ prose (articles, legal, studio, contact) */

.prose { position: relative; padding: var(--space-section) 0; counter-reset: para; }
.hero + .prose > .wrap { padding-top: clamp(3rem, 6vw, 5.5rem); }
main > .prose:last-child { padding-bottom: var(--space-block); }
.prose > .wrap > h2 + :is(p, ul, ol) { margin-top: 0; }
.prose > .wrap > :first-child { margin-top: 0; }
.prose p { font-size: 1.125rem; line-height: 1.65; max-width: 66ch; }
.prose p + p { margin-top: 1rem; }
.prose .cta-inline + p { margin-top: 0; }
.prose h2 {
  position: relative; counter-increment: para; margin: 3rem 0 0.9rem; max-width: 30ch;
  font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.75rem); line-height: 1.15; letter-spacing: -0.015em; font-stretch: 94%;
}
.prose h2::before {
  content: "§ " counter(para, decimal-leading-zero);
  content: "§ " counter(para, decimal-leading-zero) / "";
  display: block; margin-bottom: 0.5rem;
  font-family: var(--mono); font-size: var(--t-note); font-weight: 500; letter-spacing: 0.1em; color: var(--gunmetal); font-stretch: 100%;
}
.prose ul:not(.ticks) { margin: 0.6rem 0 1rem; padding-left: 1.25em; list-style: square; max-width: 66ch; }
.prose ul:not(.ticks) li { margin-top: 0.4rem; font-size: 1.125rem; }
.prose ul:not(.ticks) li::marker { color: var(--gunmetal); }
@media (min-width: 1024px) {
  .prose h2::before { position: absolute; right: calc(100% + var(--gutter)); top: 0.45em; margin: 0; white-space: nowrap; }
}

/* ================================================================ diagrams — pinned to a light surface */

.diagram {
  --ink: #0F1115; --paper: #F6F5F1; --bone: #EDEBE4; --gunmetal: #565B64; --steel: #626A78;
  --line: #DDDACF; --line-dark: #2A2E36; --beam: #FF4D00; --beam-deep: #C93D02;
  --sans: "Instrument Sans", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", "SF Mono", Menlo, Consolas, monospace;
  position: relative; counter-increment: fig;
  margin-top: 2.75rem; padding: clamp(1rem, 3vw, 2rem); overflow-x: auto;
  color: #0F1115; border: 1px solid #DDDACF;
  /* registration ticks as background layers: they stay with the frame when the drawing scrolls */
  background:
    linear-gradient(#0F1115, #0F1115) 6px 6px / 10px 1px no-repeat,
    linear-gradient(#0F1115, #0F1115) 6px 6px / 1px 10px no-repeat,
    linear-gradient(#0F1115, #0F1115) calc(100% - 6px) 6px / 10px 1px no-repeat,
    linear-gradient(#0F1115, #0F1115) calc(100% - 6px) 6px / 1px 10px no-repeat,
    linear-gradient(#0F1115, #0F1115) 6px calc(100% - 6px) / 10px 1px no-repeat,
    linear-gradient(#0F1115, #0F1115) 6px calc(100% - 6px) / 1px 10px no-repeat,
    linear-gradient(#0F1115, #0F1115) calc(100% - 6px) calc(100% - 6px) / 10px 1px no-repeat,
    linear-gradient(#0F1115, #0F1115) calc(100% - 6px) calc(100% - 6px) / 1px 10px no-repeat,
    #F6F5F1;
  font-stretch: 100%; font-weight: 400; font-variant-numeric: normal; font-feature-settings: normal;
  letter-spacing: normal; line-height: normal;
}
/* the narrow rail range gives the sheet back its padding (declared after the base rule so it actually applies) */
@media (min-width: 1024px) and (max-width: 1199.98px) { .diagram { padding-inline: 1rem; } }
.diagram svg { display: block; width: 100%; height: auto; }
.diagram text { font-family: var(--sans); } /* never fill/stroke/color here: CSS would beat the SVG attributes */
.diagram .dm { font-family: var(--mono); letter-spacing: 0.05em; }
.diagram figcaption {
  position: sticky; left: 0; margin-top: 1rem; padding-top: 0.75rem; border-top: 1px solid #DDDACF; max-width: none;
  font-family: var(--mono); font-size: var(--t-note); line-height: 1.5; letter-spacing: 0.1em; text-transform: uppercase; color: #565B64;
  text-wrap: balance;   /* phone captions break evenly instead of leaving "out · scroll →" alone on a line */
}
.diagram figcaption::before {
  content: "fig. " counter(fig, decimal-leading-zero) " · ";
  content: "fig. " counter(fig, decimal-leading-zero) " · " / "";
  color: #0F1115; font-weight: 500;
}

@media (max-width: 899.98px) {
  .diagram figcaption::after { content: " · scroll →"; content: " · scroll →" / ""; color: #0F1115; white-space: nowrap; }
}
/* sheets drawn with a wider min-width still scroll above 900: --mid (≤ 900px) until the rail opens, --wide (960–980px) until ~1094 */
@media (min-width: 900px) and (max-width: 1023.98px) {
  .diagram--mid figcaption::after { content: " · scroll →"; content: " · scroll →" / ""; color: #0F1115; white-space: nowrap; }
}
@media (min-width: 900px) and (max-width: 1093.98px) {
  .diagram--wide figcaption::after { content: " · scroll →"; content: " · scroll →" / ""; color: #0F1115; white-space: nowrap; }
}

/* ================================================================ inline note, tick lists */

.cta-inline {
  margin: 2.25rem 0; padding: 1rem 0 1.1rem; border-top: 1px solid var(--rule-strong); border-bottom: 1px solid var(--rule-strong);
  max-width: 66ch;
}
/* the label is one run of text (the tick hangs in the indent): as a flex row, the lowercase name span and the
   words after it became separate items and the gap doubled the space after "skeelx" */
.cta-inline .mono {
  display: block; position: relative; padding-left: calc(8px + 0.6rem); margin-bottom: 0.5rem;
  font-size: var(--t-note); font-weight: 500; line-height: 1.5; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent);
}
.cta-inline .mono::before { content: ""; position: absolute; left: 0; top: calc(0.75em - 5px); width: 8px; height: 10px; background: var(--tick) center / contain no-repeat; }
.cta-inline p { font-size: 0.96875rem; line-height: 1.6; color: var(--fg-2); max-width: none; }
/* on service pages the note closes a two-column offer grid: its rules run the grid's full width, the text keeps its measure */
.section > .wrap > .cta-inline { max-width: none; }
.section > .wrap > .cta-inline p { max-width: 66ch; }
.section > .wrap > .cta-inline:last-child { margin-bottom: 0; }

.ticks { list-style: none; max-width: 66ch; margin-top: 1.5rem; }
.ticks li { position: relative; padding-left: 1.5rem; margin-bottom: 0.6rem; font-size: 0.96875rem; line-height: 1.55; color: var(--fg-2); }
.ticks li::before { content: ""; position: absolute; left: 0.1rem; top: 0.42em; width: 8px; height: 10px; background: var(--tick) center / contain no-repeat; }
/* a deliverables list under the offerings is its own block, not a tail on the last offering */
.subs + .ticks { max-width: none; padding-top: 1.4rem; border-top: 1px solid var(--rule-strong); }
/* a short mono promise row: every item leads with its own tick, so a wrapped row never strands a "·" */
.ticks--mono { display: flex; flex-wrap: wrap; gap: 0.35rem 1.75rem; max-width: none; margin-top: 1.25rem; }
.ticks--mono li { margin: 0; padding-left: 1.15rem; white-space: nowrap; font-family: var(--mono); font-size: 0.8125rem; line-height: 1.5; letter-spacing: 0.04em; color: var(--gunmetal); }
.ticks--mono li::before { left: 0; top: 0.38em; width: 7px; height: 9px; }
@media (max-width: 479.98px) { .ticks--mono li { white-space: normal; } }

/* ================================================================ held blocks (restore needs no new CSS) */

.logo-strip { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 1.4rem; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
@media (max-width: 760px) { .logo-strip { grid-template-columns: repeat(2, 1fr); } }
.logo-slot { min-height: 92px; display: flex; align-items: center; justify-content: center; padding: 1rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.logo-slot .mono { color: var(--gunmetal); font-size: var(--t-note); letter-spacing: 0.12em; text-transform: uppercase; text-align: center; }
.logo-slot img { max-height: 44px; width: auto; max-width: 82%; filter: grayscale(1); opacity: 0.8; mix-blend-mode: multiply; }
.logo-slot img.lg-tall { max-height: 62px; }
.logo-slot img.lg-wide { max-height: 30px; }
.cases { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: var(--gutter); margin-top: 2.6rem; }
.case-slot { border: 1px dashed var(--line); padding: 2rem 1.6rem; min-height: 220px; display: flex; flex-direction: column; justify-content: flex-end; color: var(--fg-2); }
.case-slot .mono { color: var(--gunmetal); margin-bottom: 0.6rem; }

/* ================================================================ home — ink scope for the hero and the ink chapters */

.hero-gl, .chapter--ink {
  --bg: var(--ink); --bg-2: var(--ink-2); --fg: var(--paper); --fg-2: var(--fog); --rule: var(--line-dark);
  --rule-strong: var(--paper); --accent: var(--beam); --focus: var(--beam); --datum: rgb(246 245 241 / 0.4);
  background: var(--ink); color: var(--paper);
}

/* ================================================================ home — the hero drawing */

.hero-gl {
  position: relative; isolation: isolate; overflow: clip;
  min-height: max(660px, 100svh); display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: 1fr auto; padding-top: 6.5rem;
}
/* the construction grid: column hairlines aligned to the page grid, behind the drawing */
.hero-gl::before {
  content: ""; position: absolute; top: 0; bottom: 0; z-index: -1; pointer-events: none;
  left: max(var(--margin), calc((100% - var(--max)) / 2 + var(--margin)));
  right: max(var(--margin), calc((100% - var(--max)) / 2 + var(--margin)));
  background:
    linear-gradient(90deg, rgb(246 245 241 / 0.055) 0 1px, transparent 1px) 0 0 / calc((100% + var(--gutter)) / 12) 100% repeat-x,
    linear-gradient(90deg, rgb(246 245 241 / 0.055) 0 1px, transparent 1px) 100% 0 / 1px 100% no-repeat;
}
.gl-stage { position: relative; }
.gl-stage .gl-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hero-gl-stage { position: absolute; inset: 0; z-index: 0; }
.gl-labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; contain: strict; }
.gl-off > .gl-labels { display: none; }
.gl-label {
  position: absolute; left: 0; top: 0; white-space: nowrap; opacity: 0;
  font: 500 0.625rem/1.2 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-2);
}
.gl-label--beam { color: var(--accent); }
.gl-label--code { text-transform: none; }
.gl-label--cut {
  display: grid; place-items: center; width: 18px; height: 18px; border: 1px solid var(--accent);
  color: var(--accent); letter-spacing: 0; background: var(--bg);
}
.gl-label--title { color: var(--fg); letter-spacing: 0.14em; }
.gl-leaders { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.gl-leader path { fill: none; stroke: var(--fg-2); stroke-width: 1; }
.gl-leader circle { fill: var(--bg); stroke: var(--fg-2); stroke-width: 1; }
.gl-leader--beam path, .gl-leader--beam circle { stroke: var(--beam); }
.still *, .still *::before, .still *::after { animation: none !important; transition: none !important; }
html.still { scroll-behavior: auto; }
.reg { position: absolute; width: 16px; height: 16px; z-index: 1; pointer-events: none; }
.reg::before, .reg::after { content: ""; position: absolute; background: var(--beam); }
.reg::before { width: 16px; height: 1px; }
.reg::after { width: 1px; height: 16px; }
.reg--tl { left: 14px; top: 14px; }
.reg--tr { right: 14px; top: 14px; } .reg--tr::before, .reg--tr::after { right: 0; }
.reg--bl { left: 14px; bottom: 14px; } .reg--bl::before, .reg--bl::after { bottom: 0; }
.reg--br { right: 14px; bottom: 14px; } .reg--br::before, .reg--br::after { right: 0; bottom: 0; }

.hero-gl-copy { position: relative; z-index: 2; align-self: center; width: 100%; pointer-events: none; padding-bottom: 2.5rem; }
.hero-gl-copy > * { pointer-events: auto; max-width: 40rem; }
.hero-gl-copy .eyebrow { color: var(--steel); margin-bottom: 1.5rem; }
.hero-gl-h1 {
  font-size: clamp(3.25rem, 1rem + 6.9vw, 8rem); line-height: 0.86; letter-spacing: -0.042em;
  font-weight: 540; font-stretch: 84%; color: var(--paper); max-width: none !important;
}
.hero-gl-h1 .br-sm { display: none; }
.dx { position: relative; display: inline-block; width: 0.421em; height: 0.51em; margin-left: 0.02em; vertical-align: baseline; user-select: none; }
.dx svg { width: 100%; height: 100%; overflow: visible; fill: none; stroke-width: 26; stroke-linecap: round; }
.dx .xf { stroke: var(--paper); }
.dx .xr { stroke: var(--beam); }
.hero-gl-copy .lede { margin-top: 1.75rem; color: var(--fog); max-width: 34ch; }
.hero-gl-copy .btn-row { margin-top: 2rem; }
.promise { margin-top: 1rem; font-family: var(--mono); font-size: var(--t-note); letter-spacing: 0.1em; text-transform: uppercase; color: var(--steel); }
.hero-gl-copy .promise { width: fit-content; background: var(--bg); padding-right: 0.5em; }

.hero-gl-routes { position: relative; z-index: 2; width: 100%; padding-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.routes { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 var(--gutter); }
@media (min-width: 760px) { .routes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.route {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 0.9rem; align-items: baseline;
  padding: 1rem 0 1.1rem; border-top: 1px solid var(--line-dark); background: var(--ink); text-decoration: none; color: var(--paper);
  min-height: 72px; transition: box-shadow var(--dur-1) var(--ease);
}
.route-idx { grid-column: 1; grid-row: 1; font-family: var(--mono); font-size: var(--t-mono); font-weight: 500; letter-spacing: 0.08em; color: var(--beam); }
.route-name { grid-column: 2; grid-row: 1; font-size: var(--t-index); font-weight: 520; font-stretch: 88%; letter-spacing: -0.02em; line-height: 1; }
.route-go { grid-column: 3; grid-row: 1; font-family: var(--mono); color: var(--steel); transition: transform var(--dur-1) var(--ease), color var(--dur-1) var(--ease); }
.route-title { grid-column: 2 / -1; margin-top: 0.5rem; font-size: 1.0625rem; font-weight: 560; }
.route-desc { grid-column: 2 / -1; margin-top: 0.15rem; font-size: var(--t-small); line-height: 1.5; color: var(--fog); }
.route:is(:hover, :focus-visible) { box-shadow: inset 0 2px 0 var(--paper); }
.route:is(:hover, :focus-visible) .route-go { color: var(--paper); transform: translateX(4px); }
@media (min-width: 1024px) and (max-height: 899.98px) {
  .hero-gl { padding-top: 5.5rem; }
  .hero-gl-copy { padding-bottom: 0.75rem; }
  .hero-gl-copy .eyebrow { margin-bottom: 1rem; }
  .hero-gl-h1 { font-size: min(clamp(3.25rem, 1rem + 6.9vw, 8rem), 12.5svh); }
  .hero-gl-copy .lede { margin-top: 1.25rem; font-size: 1.125rem; }
  .hero-gl-copy .btn-row { margin-top: 1.5rem; }
  .hero-gl-routes { padding-bottom: 1rem; }
  .route { padding: 0.75rem 0 0.8rem; min-height: 0; }
}

/* ---- the hero from 720 to 1023: as on desktop, the copy on the left and the drawing on the right (the stage still
   spans the hero; the scene fits the drawing clear of the copy). The H1 sets in three lines and scales with its column */
@media (min-width: 720px) and (max-width: 1023.98px) {
  .hero-gl { min-height: max(640px, 100svh); padding-top: 6rem; }
  .hero-gl-copy { padding-bottom: 2rem; }
  .hero-gl-copy > *, .hero-gl-copy .lede { max-width: min(21rem, 40vw); }
  .hero-gl-copy .eyebrow { margin-bottom: 1.25rem; }
  .hero-gl-h1 { font-size: min(clamp(3.25rem, 0.6rem + 8.2vw, 5.5rem), 11svh); }
  .hero-gl-h1 .br-sm { display: inline; }
  html:not(.js) .hero-gl-h1 .br-sm, .hero-gl:has(> .gl-off) .hero-gl-h1 .br-sm { display: none; }
  .hero-gl-copy .lede { margin-top: 1.5rem; font-size: 1.125rem; }
  .hero-gl-copy .btn-row { margin-top: 1.75rem; max-width: none; }
}
/* ---- the hero below 720: the copy first, the drawing under it in normal flow, then the routes */
@media (max-width: 719.98px) {
  .hero-gl { display: flex; flex-direction: column; min-height: 0; padding-top: 104px; }
  .hero-gl-copy { order: 1; padding-top: 1.25rem; padding-bottom: 0.5rem; }
  .hero-gl-stage { order: 2; position: relative; inset: auto; height: clamp(300px, 92vw, 460px); }
  .hero-gl-routes { order: 3; padding-bottom: 2.5rem; }
  .hero-gl-stage.gl-off, html:not(.js) .hero-gl-stage { display: none; }
  .hero-gl-copy > * { max-width: 36rem; }
}
/* ---- hero-intro: on a phone the twelve column hairlines would run through the copy; only the sheet's outer lines stay */
@media (max-width: 719.98px) {
  .hero-gl::before {
    background:
      linear-gradient(90deg, rgb(246 245 241 / 0.055) 0 1px, transparent 1px) 0 0 / 1px 100% no-repeat,
      linear-gradient(90deg, rgb(246 245 241 / 0.055) 0 1px, transparent 1px) 100% 0 / 1px 100% no-repeat;
  }
}
/* ---- end hero-intro grid */
@media (max-width: 639.98px) {
  .hero-gl-h1 { font-size: 19.5vw; }
  .hero-gl-h1 .br-sm { display: inline; }
}

/* ================================================================ home — the chapters: one pinned drawing sheet each */

/* a chapter is a tall scroll track; its stage pins for the length of the track and the drawing reads the progress.
   >= 1024 the stage carries the page's 12 columns: copy in c1–4, the drawing from c5 to the viewport's right edge */
/* chapters: pacing — about 40svh a step, and the finished sheet holds through its release (the last viewport of the track) */
.chapter { position: relative; height: 240svh; counter-increment: sec; background: var(--bg); color: var(--fg); }
.chapter:where(#digital) { height: 280svh; }   /* five stations and a pull-back: one move each */
.chapter:where(#making) { height: 280svh; }    /* six stages and a calm overview: one step each */
.chapter:where(#crossing) { height: 260svh; }  /* seven steps, intent to sign-off to the system sheet: one beat each */
.chapter:where(#process) { height: 240svh; }   /* the targets, four passes round the loop and the release: one pass each */
.chapter--paper { --reg: var(--ink); }
.chapter--ink { --reg: var(--beam); --rail: var(--steel); }   /* the progress rail: gunmetal on paper, steel on ink (fog would outshout the drawing) */
.chapter-stage {
  --edge: max(var(--margin), calc((100% - var(--max)) / 2 + var(--margin)));
  position: sticky; top: 0; height: 100svh; overflow: clip;
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr);
}
/* registration ticks at the sheet's four corners: ink on paper, beam on ink */
.chapter-stage::after {
  content: ""; position: absolute; inset: 14px; z-index: 3; pointer-events: none;
  background:
    linear-gradient(var(--reg), var(--reg)) left top / 16px 1px no-repeat,
    linear-gradient(var(--reg), var(--reg)) left top / 1px 16px no-repeat,
    linear-gradient(var(--reg), var(--reg)) right top / 16px 1px no-repeat,
    linear-gradient(var(--reg), var(--reg)) right top / 1px 16px no-repeat,
    linear-gradient(var(--reg), var(--reg)) left bottom / 16px 1px no-repeat,
    linear-gradient(var(--reg), var(--reg)) left bottom / 1px 16px no-repeat,
    linear-gradient(var(--reg), var(--reg)) right bottom / 16px 1px no-repeat,
    linear-gradient(var(--reg), var(--reg)) right bottom / 1px 16px no-repeat;
}

.chapter-copy { position: relative; z-index: 1; min-width: 0; }
/* the eyebrow prints the sheet zone first — "01 / digital" — continuing the page counter */
.chapter-copy > .eyebrow { margin-bottom: 1.75rem; }
.chapter-copy > .eyebrow::before {
  content: counter(sec, decimal-leading-zero);
  content: counter(sec, decimal-leading-zero) / "";
  width: auto; height: auto; color: var(--accent);
  padding-right: 1.35rem; background-position: right 0.1rem center; background-size: 9px 11px; margin-top: 0;
}
.chapter-copy h2 {
  font-size: clamp(2rem, 0.9rem + 2.3vw, 3.25rem); line-height: 1; letter-spacing: -0.03em;
  font-weight: 560; font-stretch: 88%; max-width: 13ch; color: var(--fg);
}
.chapter-line { margin-top: 1.25rem; font-size: 1.0625rem; line-height: 1.5; color: var(--fg-2); max-width: 31ch; }
/* the links read as a short parts list: zone.item, name, arrow */
.chapter-links { list-style: none; margin-top: 2.25rem; max-width: 21rem; border-top: 1px solid var(--rule); counter-reset: part; }
.chapter-links li { counter-increment: part; border-bottom: 1px solid var(--rule); }
.chapter-links a {
  display: grid; grid-template-columns: 2.6rem minmax(0, 1fr) auto; align-items: baseline;
  min-height: 40px; padding: 0.6rem 0; font-size: 0.9375rem; line-height: 1.3; font-weight: 500; color: var(--fg); text-decoration: none;
  transition: box-shadow var(--dur-1) var(--ease);
}
.chapter-links a::before {
  content: counter(sec, decimal-leading-zero) "." counter(part);
  content: counter(sec, decimal-leading-zero) "." counter(part) / "";
  font: 500 var(--t-note)/1 var(--mono); letter-spacing: 0.08em; color: var(--fg-2); font-variant-numeric: tabular-nums;
}
.chapter-links a::after { content: "→"; content: "→" / ""; font-family: var(--mono); font-size: 0.8125rem; color: var(--fg-2); transition: transform var(--dur-1) var(--ease), color var(--dur-1) var(--ease); }
.chapter-links a:is(:hover, :focus-visible) { box-shadow: inset 0 -1px 0 var(--fg); }
.chapter-links a:is(:hover, :focus-visible)::after { color: var(--fg); transform: translateX(3px); }
/* the stages read as a parts list too: [n] is the drawing's marker, then the stage, then what it yields in mono. Plain rows,
   not links: nothing here takes focus, so the keyboard goes from the chapter straight to "The six practices" */
.chapter-refs { list-style: none; margin-top: 2rem; max-width: 22rem; border-top: 1px solid var(--rule); counter-reset: ref; }
.chapter-refs li {
  counter-increment: ref; display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); align-items: baseline;
  padding: 0.5rem 0 0.55rem; border-bottom: 1px solid var(--rule); color: var(--fg);
}
.chapter-refs li::before {
  content: "[" counter(ref) "]";
  content: "[" counter(ref) "]" / "";
  grid-column: 1; grid-row: 1; font: 500 var(--t-note)/1 var(--mono); letter-spacing: 0.04em; color: var(--fg-2); font-variant-numeric: tabular-nums;
}
.chapter-refs .ref-layer { grid-column: 2; grid-row: 1; font-size: 0.875rem; font-weight: 500; line-height: 1.3; }
.chapter-refs .ref-desc {
  grid-column: 2; grid-row: 2; margin-top: 0.2rem; font: 400 var(--t-note)/1.45 var(--mono); letter-spacing: 0.03em; color: var(--fg-2);
}

.chapter-go { display: inline-block; margin-top: 2rem; font-size: 0.9375rem; }
.chapter-line + .chapter-go { margin-top: 1.75rem; }

/* ---- chapters: copy sync. The drawing reports the step on screen (sx:step; home.js sets data-step on the chapter, -1 at
   the overview): the matching row of the chapter's list inks to full foreground and takes a hairline tick in the margin,
   the others drop back. No step, or the overview: every row at rest. */
.chapter :is(.chapter-links, .chapter-refs) > li { position: relative; }
.chapter .chapter-links a { transition: box-shadow var(--dur-1) var(--ease), color var(--dur-2) var(--ease); }
.chapter .chapter-refs li, .chapter .chapter-links a::before, .chapter .chapter-refs li::before { transition: color var(--dur-2) var(--ease); }
/* (a step past the end of the list — a scene with more stations than rows — leaves every row at rest; :where keeps the active row's rules ahead) */
.chapter[data-step="0"]:where(:has(:is(.chapter-links, .chapter-refs) > li:nth-child(1))) :is(.chapter-links a, .chapter-refs li),
.chapter[data-step="1"]:where(:has(:is(.chapter-links, .chapter-refs) > li:nth-child(2))) :is(.chapter-links a, .chapter-refs li),
.chapter[data-step="2"]:where(:has(:is(.chapter-links, .chapter-refs) > li:nth-child(3))) :is(.chapter-links a, .chapter-refs li),
.chapter[data-step="3"]:where(:has(:is(.chapter-links, .chapter-refs) > li:nth-child(4))) :is(.chapter-links a, .chapter-refs li),
.chapter[data-step="4"]:where(:has(:is(.chapter-links, .chapter-refs) > li:nth-child(5))) :is(.chapter-links a, .chapter-refs li),
.chapter[data-step="5"]:where(:has(:is(.chapter-links, .chapter-refs) > li:nth-child(6))) :is(.chapter-links a, .chapter-refs li),
.chapter[data-step="6"]:where(:has(:is(.chapter-links, .chapter-refs) > li:nth-child(7))) :is(.chapter-links a, .chapter-refs li) { color: var(--fg-2); }
.chapter:is([data-step="0"], [data-step="1"], [data-step="2"], [data-step="3"], [data-step="4"], [data-step="5"], [data-step="6"]) .chapter-links a:is(:hover, :focus-visible) { color: var(--fg); }
.chapter[data-step="0"] .chapter-links > li:nth-child(1) a,
.chapter[data-step="1"] .chapter-links > li:nth-child(2) a,
.chapter[data-step="2"] .chapter-links > li:nth-child(3) a,
.chapter[data-step="3"] .chapter-links > li:nth-child(4) a,
.chapter[data-step="4"] .chapter-links > li:nth-child(5) a,
.chapter[data-step="5"] .chapter-links > li:nth-child(6) a,
.chapter[data-step="6"] .chapter-links > li:nth-child(7) a,
.chapter[data-step="0"] .chapter-refs > li:nth-child(1),
.chapter[data-step="1"] .chapter-refs > li:nth-child(2),
.chapter[data-step="2"] .chapter-refs > li:nth-child(3),
.chapter[data-step="3"] .chapter-refs > li:nth-child(4),
.chapter[data-step="4"] .chapter-refs > li:nth-child(5),
.chapter[data-step="5"] .chapter-refs > li:nth-child(6),
.chapter[data-step="6"] .chapter-refs > li:nth-child(7) { color: var(--fg); }
.chapter[data-step="0"] .chapter-links > li:nth-child(1) a::before,
.chapter[data-step="1"] .chapter-links > li:nth-child(2) a::before,
.chapter[data-step="2"] .chapter-links > li:nth-child(3) a::before,
.chapter[data-step="3"] .chapter-links > li:nth-child(4) a::before,
.chapter[data-step="4"] .chapter-links > li:nth-child(5) a::before,
.chapter[data-step="5"] .chapter-links > li:nth-child(6) a::before,
.chapter[data-step="6"] .chapter-links > li:nth-child(7) a::before,
.chapter[data-step="0"] .chapter-refs > li:nth-child(1)::before,
.chapter[data-step="1"] .chapter-refs > li:nth-child(2)::before,
.chapter[data-step="2"] .chapter-refs > li:nth-child(3)::before,
.chapter[data-step="3"] .chapter-refs > li:nth-child(4)::before,
.chapter[data-step="4"] .chapter-refs > li:nth-child(5)::before,
.chapter[data-step="5"] .chapter-refs > li:nth-child(6)::before,
.chapter[data-step="6"] .chapter-refs > li:nth-child(7)::before { color: var(--fg); }
@media (min-width: 1024px) {
  .chapter :is(.chapter-links, .chapter-refs) > li::after {
    content: ""; position: absolute; left: -1.25rem; top: calc(50% - 0.5px); width: 0.625rem; height: 1px; pointer-events: none;
    background: var(--fg); opacity: 0; transform: scaleX(0); transform-origin: right;
    transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
  }
  .chapter .chapter-refs > li::after { top: calc(0.5rem + 0.57em); }
  .chapter[data-step="0"] :is(.chapter-links, .chapter-refs) > li:nth-child(1)::after,
  .chapter[data-step="1"] :is(.chapter-links, .chapter-refs) > li:nth-child(2)::after,
  .chapter[data-step="2"] :is(.chapter-links, .chapter-refs) > li:nth-child(3)::after,
  .chapter[data-step="3"] :is(.chapter-links, .chapter-refs) > li:nth-child(4)::after,
  .chapter[data-step="4"] :is(.chapter-links, .chapter-refs) > li:nth-child(5)::after,
  .chapter[data-step="5"] :is(.chapter-links, .chapter-refs) > li:nth-child(6)::after,
  .chapter[data-step="6"] :is(.chapter-links, .chapter-refs) > li:nth-child(7)::after { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .chapter .chapter-links a, .chapter .chapter-refs li, .chapter .chapter-links a::before, .chapter .chapter-refs li::before,
  .chapter :is(.chapter-links, .chapter-refs) > li::after { transition: none; }
}

/* the drawing: a sheet whose border carries the chapter's progress (scroll-linked, set by home.js as --p) */
.chapter-gl { min-width: 0; min-height: 0; border-top: 1px solid var(--rule); }
.chapter-gl::after {
  content: ""; position: absolute; z-index: 2; left: 0; right: 0; top: -1px; height: 1px; pointer-events: none;
  background: var(--rail, var(--fg-2)); transform: scaleX(var(--p, 0)); transform-origin: left;
}
/* the rail's cursor: a short cross tick at the head of the progress, so a part-drawn rail reads as a gauge, not a broken rule */
.chapter-gl::before {
  content: ""; position: absolute; z-index: 2; left: 0; right: 0; top: -4px; height: 7px; pointer-events: none;
  background: linear-gradient(var(--rail, var(--fg-2)), var(--rail, var(--fg-2))) calc(var(--p, 0) * 100%) 0 / 1px 100% no-repeat;
}

@media (min-width: 1024px) {
  .chapter-stage {
    grid-template-columns: calc(var(--edge) - var(--gutter)) repeat(12, minmax(0, 1fr)) calc(var(--edge) - var(--gutter));
    grid-template-rows: minmax(0, 1fr); column-gap: var(--gutter);
  }
  .chapter-copy { grid-column: 2 / span 4; grid-row: 1; align-self: center; padding: 3rem var(--gutter) 3rem 0; }
  .chapter-gl { grid-column: 6 / -1; grid-row: 1; border-top: 0; border-left: 1px solid var(--rule); }
  .chapter-gl::after { left: -1px; right: auto; top: 0; bottom: 0; width: 1px; height: auto; transform: scaleY(var(--p, 0)); transform-origin: top; }
  .chapter-gl::before { left: -5px; right: auto; top: 0; bottom: 0; width: 9px; height: auto; background-position: 0 calc(var(--p, 0) * 100%); background-size: 9px 1px; }
}
@media (min-width: 1024px) and (max-height: 799.98px) {
  .chapter-copy > .eyebrow { margin-bottom: 1.25rem; }
  .chapter-links { margin-top: 1.5rem; }
  .chapter-links a { min-height: 0; padding: 0.45rem 0; }
  .chapter-refs { margin-top: 1.25rem; }
  .chapter-refs li { padding: 0.3rem 0 0.35rem; }
  .chapter-refs .ref-desc { margin-top: 0.1rem; }
  .chapter-go { margin-top: 1.5rem; }
}
/* short desktop viewports (a 1366 laptop under browser chrome): the stage list carries the end-to-end sheet on its own */
@media (min-width: 1024px) and (max-height: 699.98px) {
  .chapter-copy { padding-block: 1.5rem; }
}
@media (prefers-reduced-motion: no-preference) and (min-width: 1024px) and (max-height: 699.98px) {
  html.js .chapter:not(:has(> .chapter-stage > .gl-off)) .chapter-copy:has(> .chapter-refs) > .chapter-line { display: none; }
}

/* below 1024: the copy sits compact on top, the drawing fills the rest of the stage */
@media (max-width: 1023.98px) {
  .chapter-copy { padding: clamp(1.75rem, 5.5svh, 3.25rem) var(--margin) clamp(1rem, 2.6svh, 1.5rem); }
  .chapter-copy > * { max-width: 38rem; }
  .chapter-copy h2 { max-width: 18ch; }
  .chapter-gl { min-height: 52svh; }
  .chapter-copy > .eyebrow { margin-bottom: 0.9rem; }
  .chapter-line { margin-top: 0.7rem; font-size: 0.9375rem; line-height: 1.45; max-width: 40ch; }
  .chapter-links { display: flex; flex-wrap: wrap; gap: 0 1.1rem; margin-top: 0.85rem; border: 0; max-width: 38rem; }
  .chapter-links li { border: 0; }
  .chapter-links a { display: inline-flex; min-height: 32px; padding: 0; font-size: 0.875rem; text-decoration: underline 1px var(--datum); text-underline-offset: 0.28em; }
  .chapter-links a::before, .chapter-links a::after { content: none; }
  .chapter-links a:is(:hover, :focus-visible) { box-shadow: none; text-decoration: underline 2px var(--beam); }
  .chapter-go { margin-top: 0.6rem; font-size: 0.875rem; }
  .chapter-line + .chapter-go { margin-top: 0.85rem; }
  .chapter-refs + .chapter-go { margin-top: 1rem; }
}
/* below 1024, beside a pinned drawing, the stages set as the drawing's legend: a clean grid, one stage to a line — [n] and
   its name — down one column on phones and two on wider sheets, with the descriptor kept for screen readers. Reduced motion,
   or the copy alone (no script, no WebGL), keep the full list */
@media (prefers-reduced-motion: no-preference) and (max-width: 1023.98px) {
  html.js .chapter:not(:has(> .chapter-stage > .gl-off)) .chapter-refs {
    display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.1rem var(--gutter); margin-top: 0.85rem; border: 0; max-width: 38rem;
  }
  html.js .chapter:not(:has(> .chapter-stage > .gl-off)) .chapter-refs li {
    display: grid; grid-template-columns: 2.5em minmax(0, 1fr); align-items: baseline; padding: 0; border: 0; white-space: nowrap; font: 400 var(--t-note)/1.55 var(--mono); letter-spacing: 0.03em;
  }
  html.js .chapter:not(:has(> .chapter-stage > .gl-off)) .chapter-refs .ref-layer { overflow: hidden; text-overflow: ellipsis; }
  html.js .chapter:not(:has(> .chapter-stage > .gl-off)) .chapter-refs li::before { line-height: inherit; }
  html.js .chapter:not(:has(> .chapter-stage > .gl-off)) .chapter-refs .ref-layer { font: inherit; }
  html.js .chapter:not(:has(> .chapter-stage > .gl-off)) .chapter-refs .ref-desc {
    position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
}
@media (prefers-reduced-motion: no-preference) and (min-width: 640px) and (max-width: 1023.98px) {
  html.js .chapter:not(:has(> .chapter-stage > .gl-off)) .chapter-refs { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(3, auto); grid-auto-flow: column; max-width: 40rem; }
}
@media (min-width: 640px) and (max-width: 1023.98px) and (min-height: 900px) {
  .chapter-refs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gutter); max-width: 40rem; margin-top: 1.25rem; }
  .chapter-refs li { padding: 0.4rem 0 0.45rem; }
}
@media (max-width: 1023.98px) and (max-height: 700px) {
  .chapter-line { display: none; }
}
@media (max-width: 1023.98px) and (max-height: 500px) {
  .chapter-links { display: none; }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 1023.98px) and (max-height: 500px) {
  html.js .chapter:not(:has(> .chapter-stage > .gl-off)) .chapter-refs { display: none; }
}

/* reduced motion: nothing pins; each sheet is a plain section and its drawing renders finished */
@media (prefers-reduced-motion: reduce) {
  .chapter { height: auto; }
  .chapter-stage { position: relative; height: auto; min-height: 92svh; }
  .chapter-gl::after, .chapter-gl::before { content: none; }
}
/* no script, or no WebGL: the chapter collapses to its copy */
html:not(.js) .chapter, .chapter:has(> .chapter-stage > .gl-off) { height: auto; }
html:not(.js) .chapter-stage, .chapter:has(> .chapter-stage > .gl-off) .chapter-stage { position: relative; height: auto; min-height: 0; padding-block: var(--space-block); }
html:not(.js) .chapter-gl, .chapter-gl.gl-off { display: none; }
@media (min-width: 1024px) {
  html:not(.js) .chapter-copy, .chapter:has(> .chapter-stage > .gl-off) .chapter-copy { grid-column: 2 / span 8; }
}
@media print {
  .chapter { height: auto; }
  .chapter-stage { position: static; height: auto; }
  /* the ink sheets print as ink on white: printers drop backgrounds, and paper-coloured type would vanish with them */
  .hero-gl, .chapter--ink, .closer {
    --bg: #fff; --bg-2: #fff; --fg: #000; --fg-2: #444; --rule: #bbb; --rule-strong: #000; --accent: #000; --reg: #000;
    background: none !important; color: #000 !important;
  }
  .hero-gl { min-height: 0; padding-top: 1.5rem; }
  .hero-gl::before { content: none; }
  .hero-gl :is(.hero-gl-h1, .route, .route-title), .closer h2 { color: #000 !important; }
  .hero-gl :is(.lede, .route-desc, .promise), .closer :is(.closer-note, .closer-promise) { color: #444 !important; }
  .route, .hero-gl-copy .promise { background: none; }
  .dx .xf { stroke: #000; }
}

/* ================================================================ home — the articles strip */

.home-strip { padding: clamp(3.5rem, 2rem + 5vw, 6.5rem) 0; }
.chapter--ink + .section::before { content: none; }   /* a paper sheet into the paper strip keeps its hairline */
.strip-line { font-size: clamp(1.625rem, 1.1rem + 1.7vw, 2.625rem); line-height: 1.05; letter-spacing: -0.025em; font-stretch: 90%; max-width: 20ch; }
.strip-go { display: inline-block; margin-top: 1.25rem; }
@media (min-width: 1024px) {
  .home-strip > .wrap > .eyebrow { grid-column: 1 / 5; position: static; }
  .home-strip > .wrap > .strip-line { grid-column: 5 / 11; grid-row: 1; align-self: last baseline; }
  .home-strip > .wrap > .strip-go { grid-column: 11 / -1; grid-row: 1; justify-self: end; align-self: last baseline; margin: 0; }
}

/* ================================================================ home — the closer */

.closer { padding: clamp(5rem, 3rem + 8vw, 10rem) 0; }
.closer-note { margin-top: 1.5rem; font-size: var(--t-lede); line-height: 1.45; max-width: 44ch; color: var(--fog); }
.on-ink p.closer-promise { margin-top: 1.5rem; color: var(--steel); max-width: none; text-wrap: balance; }   /* chapters: the promise breaks evenly */
/* >= 1024 the strip and the closer hang from c5, the line every chapter's drawing starts on */
@media (min-width: 1024px) {
  .closer > .wrap > .eyebrow { grid-column: 1 / 5; }
  .closer > .wrap > :not(.eyebrow) { grid-column: 5 / -1; }
}

/* ================================================================ lab pages only (web/_lab): delete with _lab before commit */

.band-ink {
  --bg: var(--ink); --bg-2: var(--ink-2); --fg: var(--paper); --fg-2: var(--fog); --rule: var(--line-dark);
  --rule-strong: var(--paper); --accent: var(--beam); --focus: var(--beam); background: var(--ink); color: var(--paper);
}
.gl-figure { position: relative; margin-top: 3rem; }
.gl-figure .gl-stage { width: 100%; aspect-ratio: 16 / 7; overflow: hidden; border: 1px solid var(--rule); background: var(--bg); }
.gl-figure--tall .gl-stage { aspect-ratio: 16 / 9; }
.gl-figure--band .gl-stage { aspect-ratio: 16 / 5.5; }
@media (max-width: 759.98px) {
  .gl-figure .gl-stage { aspect-ratio: 4 / 3.4; }
  .gl-figure--tall .gl-stage { aspect-ratio: 4 / 5; }
  .gl-figure--band .gl-stage { aspect-ratio: 4 / 3; }
}
.gl-figure figcaption { margin-top: 0.75rem; max-width: none; font-family: var(--mono); font-size: var(--t-note); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-2); }

/* ================================================================ footer (unchanged from v1 by request) */

/* ---------- footer ---------- */
.site-foot { background: var(--ink); color: var(--steel); margin-top: var(--space-section); }
.site-foot .wrap { padding-top: 4rem; padding-bottom: 2.5rem; }
.foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 2.5rem; padding-bottom: 3rem; border-bottom: 1px solid var(--line-dark); }
.site-foot img { width: 110px; }
.site-foot h4 { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--paper); font-weight: 500; margin-bottom: 1rem; }
.site-foot ul { list-style: none; }
.site-foot li { margin-bottom: 0.55rem; }
.foot-bottom a { font-size: inherit; }
.site-foot a { color: var(--steel); text-decoration: none; font-size: 0.9375rem; transition: color 150ms var(--ease); }
.site-foot a:hover { color: var(--paper); }
.foot-bottom { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-top: 2rem; font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.05em; }

@media (max-width: 760px) {
  .foot-grid { grid-template-columns: 1fr 1fr; }
}

/* ================================================================ motion */

/* ---- hero-intro: the hero x. Its beam stroke is drawn on the drawing's clock: the hero scene sets --x-draw (0 → 1)
   on the section as the cutting-plane trace is drawn up the face at the same 52.05°, and marks it .x-live. Without
   the scene (no JS, no WebGL, reduced motion, ?still) it is drawn; with JS it waits for the scene, and draws by itself
   if the scene never takes over. The ink stroke is there from the first paint. */
.hero-gl .dx .xr { stroke-dasharray: 1 1; stroke-dashoffset: calc(1 - var(--x-draw, 1)); opacity: min(1, calc(var(--x-draw, 1) * 40)); }
@media (prefers-reduced-motion: no-preference) {
  html.js .hero-gl:not(.x-live) .dx .xr { animation: stroke-in 520ms var(--ease-draft) 1600ms both; }
}
/* ---- end hero-intro x */
@keyframes stroke-in { 0% { stroke-dashoffset: 1; opacity: 0; } 1% { opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 1; } }

/* scroll-driven, decorative marks only; the finished state is the default where unsupported */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    :is(.section, .pillar):not(.on-ink)::before { animation: rule-draw linear both; animation-timeline: view(); animation-range: entry 0% entry 45%; }
    .proc::before { animation: rule-draw linear both; animation-timeline: view(); animation-range: entry 5% cover 35%; }
  }
}
@keyframes rule-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* cross-document view transitions: a short crossfade, inner page titles morph */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .hero h1 { view-transition-name: title; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 180ms; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

@media (forced-colors: active) {
  .hero-gl-h1 .dx { display: none; }
  .hero-gl-h1 .vh { position: static !important; width: auto; height: auto; margin: 0; clip: auto; clip-path: none; overflow: visible; white-space: normal; }
}

/* ================================================================ print */
@media print {
  .site-head, .site-foot, .gl-stage { display: none !important; }
  .on-ink { background: none !important; color: #000 !important; }
}

/* ---- research register (inner pages) ---- */
/* the technology we design in, set as a parts list: [n] marker · layer · one plain sentence · the standard it answers to
   in mono. A standards table with its dates, and the connected system sheet, mounted on inner pages by
   /assets/page-gl.js. Scoped tokens only, so the same rules hold on paper and on ink. No academic citations (v5). */

/* the rows: an ordered list; [n] matches the marker in the drawing */
.reg-rows { list-style: none; margin-top: 2.5rem; border-top: 1px solid var(--rule-strong); counter-reset: reg; }
.reg-rows > li { counter-increment: reg; display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 0.4rem; padding: 1.05rem 0 1.15rem; border-bottom: 1px solid var(--rule); min-width: 0; }
.reg-rows .reg-k {
  display: block; margin: 0; max-width: none;
  font-family: var(--mono); font-size: var(--t-mono); font-weight: 500; line-height: 1.45; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg);
}
/* two-tier label, like a parts-list entry: the layer, then the technology under it in the secondary tone (never a
   mid-word break such as "user- / replaceable") */
.reg-rows .reg-k > span { display: block; margin-top: 0.1rem; font-weight: 400; color: var(--fg-2); }
.reg-rows .reg-k .mu { text-transform: none; }   /* μ stays the micro prefix; uppercased it would read as an M */
.reg-rows--num .reg-k { display: grid; grid-template-columns: 1.9rem minmax(0, 1fr); column-gap: 0.75rem; align-items: start; align-content: start; }
.reg-rows--num .reg-k > span { grid-column: 2; }
.reg-rows--num .reg-k::before {
  content: "[" counter(reg) "]"; content: "[" counter(reg) "]" / "";
  grid-row: 1 / span 2; color: var(--accent); letter-spacing: 0.04em; font-variant-numeric: tabular-nums;
}
.reg-rows .reg-t { margin: 0; max-width: 62ch; font-size: 1rem; line-height: 1.55; color: var(--fg); text-wrap: pretty; }
.reg-rows .reg-c { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.45rem 1.1rem; margin: 0.15rem 0 0; max-width: none; font-family: var(--mono); font-size: var(--t-note); line-height: 1.5; letter-spacing: 0.03em; color: var(--fg-2); }
.reg-rows .reg-c > * { min-width: 0; }
/* a related note reads as a sentence (sans), with its standard in mono like the first */
.reg-rows .reg-also { flex-basis: 100%; margin-top: 0.3rem; max-width: 66ch; font-family: var(--sans); font-size: 0.875rem; line-height: 1.5; letter-spacing: 0; color: var(--fg-2); text-wrap: pretty; }
.reg-rows .reg-also > b { font-family: var(--mono); font-size: var(--t-note); font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg); margin-right: 0.6rem; }
.reg-rows .reg-also .reg-std { font-family: var(--mono); font-size: var(--t-note); letter-spacing: 0.03em; white-space: nowrap; }
.reg-rows .reg-std { color: var(--fg); text-decoration: underline 1px var(--datum); text-underline-offset: 0.3em; }
.reg-rows .reg-std:is(:hover, :focus-visible) { text-decoration: underline 2px var(--beam); }
.reg-rows .reg-c > span > .reg-std + .reg-std { margin-left: 0.6rem; }   /* two standards side by side stay 24 px apart as targets */
@media (min-width: 760px) {
  .reg-rows > li { grid-template-columns: 15rem minmax(0, 1fr); column-gap: var(--gutter); }
  .reg-rows .reg-k { grid-row: 1 / span 2; padding-top: 0.2rem; }
}
/* the narrow rail range: the labels give the sentences room (every layer name still fits on one line) */
@media (min-width: 760px) and (max-width: 1179.98px) { .reg-rows > li { grid-template-columns: 13rem minmax(0, 1fr); } }
.reg-rows + .btn-row { margin-top: 1.75rem; }
.prose .reg-rows { margin-top: 1.25rem; }
@media (min-width: 760px) { .prose .reg-rows > li { grid-template-columns: 11.5rem minmax(0, 1fr); } }

/* the standards table: id · standard · what it sets · dates. Below 760 each row stacks (roles keep the semantics) */
.reg-table { width: 100%; margin-top: 2.5rem; border-collapse: collapse; font-size: 0.9375rem; line-height: 1.5; }
.reg-table caption {
  caption-side: bottom; padding-top: 0.85rem; text-align: left;
  font-family: var(--mono); font-size: var(--t-note); line-height: 1.5; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-2);
}
.reg-table thead th {
  padding: 0 1rem 0.6rem 0; border-bottom: 1px solid var(--rule-strong); text-align: left; vertical-align: bottom;
  font-family: var(--mono); font-size: var(--t-note); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-2);
}
.reg-table :is(tbody th, td) { padding: 0.95rem 1.25rem 1rem 0; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; }
.reg-table :is(th, td):last-child { padding-right: 0; }
.reg-table .reg-id { width: 3.25rem; font-family: var(--mono); font-size: var(--t-mono); font-weight: 500; letter-spacing: 0.06em; color: var(--accent); }
.reg-table tbody th { width: 30%; font-weight: 560; color: var(--fg); }
.reg-table tbody th small { display: block; margin-top: 0.2rem; font-family: var(--mono); font-size: var(--t-note); font-weight: 400; letter-spacing: 0.04em; color: var(--fg-2); }
.reg-table td { color: var(--fg-2); }
.reg-table td.reg-when { width: 11rem; font-family: var(--mono); font-size: var(--t-note); line-height: 1.55; letter-spacing: 0.04em; color: var(--fg); font-variant-numeric: tabular-nums; }
/* a small schedule: the event in the secondary tone, the date in a column of its own */
.reg-when span { display: grid; grid-template-columns: 5rem auto; column-gap: 0.5rem; color: var(--fg-2); }
.reg-when span + span { margin-top: 0.25rem; }
.reg-when b { font-weight: 500; color: var(--fg); white-space: nowrap; }
.reg-rows > li[id], .reg-table tbody tr[id] { scroll-margin-top: 2rem; }
.reg-table tbody tr:target { background: var(--bg-2); }
.reg-table tbody tr:target .reg-id { color: var(--fg); }   /* beam-deep on bone is 4.24:1 */
@media (max-width: 759.98px) {
  .reg-table, .reg-table tbody { display: block; }
  .reg-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .reg-table tbody tr { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); column-gap: 0.5rem; row-gap: 0.35rem; padding: 0.95rem 0 1rem; border-bottom: 1px solid var(--rule); }
  .reg-table tbody tr:first-child { border-top: 1px solid var(--rule-strong); }
  .reg-table :is(tbody th, td) { width: auto !important; padding: 0; border: 0; }
  .reg-table .reg-id { grid-column: 1; grid-row: 1 / span 3; padding-top: 0.15rem; }
  .reg-table tbody th { grid-column: 2; grid-row: 1; }
  .reg-table td { grid-column: 2; grid-row: 3; }
  .reg-table td.reg-when { grid-row: 2; }
  .reg-table caption { display: block; padding: 0 0 0.65rem; }
}

/* the drawing: a fixed sheet (the page never jumps when it mounts), registration ticks at the corners; with no script
   or no WebGL the whole figure goes — the rows below it carry the same content */
.reg-fig { position: relative; margin-top: 2.75rem; }
.reg-fig .page-gl { width: 100%; aspect-ratio: 16 / 10; overflow: hidden; border: 1px solid var(--rule); background: var(--bg); }
.reg-fig .page-gl::after {
  content: ""; position: absolute; inset: 8px; z-index: 3; pointer-events: none;
  background:
    linear-gradient(var(--fg), var(--fg)) left top / 12px 1px no-repeat,
    linear-gradient(var(--fg), var(--fg)) left top / 1px 12px no-repeat,
    linear-gradient(var(--fg), var(--fg)) right top / 12px 1px no-repeat,
    linear-gradient(var(--fg), var(--fg)) right top / 1px 12px no-repeat,
    linear-gradient(var(--fg), var(--fg)) left bottom / 12px 1px no-repeat,
    linear-gradient(var(--fg), var(--fg)) left bottom / 1px 12px no-repeat,
    linear-gradient(var(--fg), var(--fg)) right bottom / 12px 1px no-repeat,
    linear-gradient(var(--fg), var(--fg)) right bottom / 1px 12px no-repeat;
}
.reg-fig figcaption {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.15rem 1.5rem; margin-top: 0.75rem; max-width: none;
  font-family: var(--mono); font-size: var(--t-note); line-height: 1.5; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-2);
}
/* a plate caption: the sheet's name in full tone, what it shows, and the honesty note held to the frame's right edge */
.reg-fig figcaption > span:first-child { color: var(--fg); font-weight: 500; }
.reg-fig figcaption > span:last-child { margin-left: auto; }
@media (max-width: 759.98px) { .reg-fig figcaption { display: block; } .reg-fig figcaption > span { display: block; } }
@media (max-width: 759.98px) { .reg-fig .page-gl { aspect-ratio: auto; height: clamp(330px, 94vw, 520px); } }
@media (min-width: 1024px) {
  .section > .wrap > .reg-fig { grid-column: 1 / -1; }
  .section:has(> .wrap > .reg-fig) > .wrap > .eyebrow { grid-row: 1; position: static; }
}
html:not(.js) .reg-fig, .reg-fig:has(> .gl-off) { display: none; }
@media print { .reg-fig { display: none; } }

/* ================================================================ inner drawings (v8 r2): a drawing under an inner hero's copy
   /product (the general arrangement, scene-ga), /digital (the lifecycle loop) and /process (the evidence loop) carry a
   framed drawing as their hero plate: figure.reg-fig.hero-fig, mounted by /assets/page-gl.js. The sheet keeps a fixed
   aspect so the page never jumps when it mounts; with no script or no WebGL the figure goes, as .reg-fig does */
.hero-fig .page-gl { aspect-ratio: 16 / 9; }
.hero-fig--ga .page-gl { aspect-ratio: 16 / 10; }   /* the general arrangement: four views and the title block
   need the extra height */
@media (min-width: 1024px) { .hero > .wrap > .hero-fig { grid-column: 1 / -1; } }
@media (min-width: 760px) and (max-width: 1023.98px) { .hero-fig .page-gl { aspect-ratio: 4 / 3; } }
@media (max-width: 759.98px) { .hero-fig .page-gl { aspect-ratio: auto; height: clamp(400px, 124vw, 560px); } }
@media (max-width: 759.98px) { .hero-fig--digital .page-gl { height: clamp(360px, 108vw, 480px); } }   /* the loop is drawn wide */

/* ---- work-sheet (r2): /work's hero drawing, the withheld sheet (web/assets/gl/scene-work.js) in place of the photo.
   A fixed sheet per breakpoint (the page never jumps when it mounts), registration ticks at the corners, a plate
   caption; with no script or no WebGL the figure goes and the copy stands alone. */
.work-sheet { position: relative; margin-top: clamp(2rem, 4vw, 3.25rem); }
.work-sheet .page-gl { width: 100%; aspect-ratio: 4 / 5; overflow: hidden; border: 1px solid var(--rule); background: var(--bg); }
@media (min-width: 640px) { .work-sheet .page-gl { aspect-ratio: 4 / 3; } }
@media (min-width: 1024px) {
  .hero > .wrap > .work-sheet { grid-column: 1 / -1; }
  .work-sheet .page-gl { aspect-ratio: 2 / 1; }
}
@media (min-width: 1280px) { .work-sheet .page-gl { aspect-ratio: 2 / 1; } }
.work-sheet .page-gl::after {
  content: ""; position: absolute; inset: 8px; z-index: 3; pointer-events: none;
  background:
    linear-gradient(var(--fg), var(--fg)) left top / 12px 1px no-repeat,
    linear-gradient(var(--fg), var(--fg)) left top / 1px 12px no-repeat,
    linear-gradient(var(--fg), var(--fg)) right top / 12px 1px no-repeat,
    linear-gradient(var(--fg), var(--fg)) right top / 1px 12px no-repeat,
    linear-gradient(var(--fg), var(--fg)) left bottom / 12px 1px no-repeat,
    linear-gradient(var(--fg), var(--fg)) left bottom / 1px 12px no-repeat,
    linear-gradient(var(--fg), var(--fg)) right bottom / 12px 1px no-repeat,
    linear-gradient(var(--fg), var(--fg)) right bottom / 1px 12px no-repeat;
}
.work-sheet figcaption {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.15rem 1.5rem; margin-top: 0.75rem; max-width: none;
  font-family: var(--mono); font-size: var(--t-note); line-height: 1.5; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-2);
}
.work-sheet figcaption > span:first-child { color: var(--fg); font-weight: 500; }
.work-sheet figcaption > span:last-child { margin-left: auto; }
@media (max-width: 759.98px) { .work-sheet figcaption { display: block; } .work-sheet figcaption > span { display: block; } }
html:not(.js) .work-sheet, .work-sheet:has(> .gl-off) { display: none; }
@media print { .work-sheet { display: none; } }
/* ---- end work-sheet */