/* pairwisedata: page styles on top of scrollcraft.css.
   Brand v1.0: ultramarine field, amber signal, ink, paper, slate, mist. IBM Plex Sans + Mono.
   Chaptered editorial: every chapter sits on its own ground and the ground changes on a hard edge. */

/* ------------------------------------------------------------------ fonts -- */
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(fonts/ibm-plex-sans-latin-400-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(fonts/ibm-plex-sans-latin-ext-400-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap;
  src: url(fonts/ibm-plex-sans-latin-500-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap;
  src: url(fonts/ibm-plex-sans-latin-ext-500-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap;
  src: url(fonts/ibm-plex-sans-latin-600-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap;
  src: url(fonts/ibm-plex-sans-latin-ext-600-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(fonts/ibm-plex-mono-latin-ext-400-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url(fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url(fonts/ibm-plex-mono-latin-ext-500-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ----------------------------------------------------------------- tokens -- */
:root {
  --blue:  #264AC9;
  --amber: #F8AC3D;
  --inkc:  #0D1321;
  --paper: #F1F4F6;
  --slate: #616978;
  --mist:  #D8DBE0;

  --sc-canvas: var(--paper);
  --sc-surface: #FBFCFD;
  --sc-ink: var(--inkc);
  --sc-ink-soft: var(--slate);
  --sc-accent: var(--blue);
  --sc-accent-ink: var(--paper);
  --sc-font-display: "IBM Plex Sans", system-ui, sans-serif;
  --sc-font-text: "IBM Plex Sans", system-ui, sans-serif;
  --sc-font-mono: "IBM Plex Mono", ui-monospace, monospace;
  --sc-shadow-color: 224 45% 9%;
  --sc-r-sm: 4px;

  --rail: 64px;
  --hair: color-mix(in oklab, var(--sc-ink) 14%, transparent);
  --line: var(--blue);         /* the rule colour that carries meaning: links, the pipeline */
  --cols: 12;
  --col-gap: clamp(1rem, 2.2vw, 2.5rem);
}

/* One block per ground. Restate `color` with the token or inherited text keeps the old ink. */
[data-ground="blue"] {
  --sc-canvas: var(--blue); --sc-ink: var(--paper); --sc-ink-soft: #D3DBF8;
  --sc-accent: var(--amber); --sc-accent-ink: var(--inkc);
  --hair: rgb(241 244 246 / 0.24); --line: var(--amber);
  --sc-shadow-color: 226 70% 18%;
  background: var(--blue); color: var(--sc-ink);
}
[data-ground="ink"] {
  --sc-canvas: var(--inkc); --sc-ink: var(--paper); --sc-ink-soft: #A3ACBE;
  --sc-accent: var(--amber); --sc-accent-ink: var(--inkc);
  --hair: rgb(241 244 246 / 0.16); --line: var(--amber);
  background: var(--inkc); color: var(--sc-ink);
}
[data-ground="paper"] {
  --sc-canvas: var(--paper); --sc-ink: var(--inkc); --sc-ink-soft: var(--slate);
  --sc-accent: var(--blue); --sc-accent-ink: var(--paper);
  background: var(--paper); color: var(--sc-ink);
}
[data-ground="white"] {
  --sc-canvas: #FBFCFD; --sc-ink: var(--inkc); --sc-ink-soft: #5B6372;
  --sc-accent: var(--blue); --sc-accent-ink: var(--paper);
  background: #FBFCFD; color: var(--sc-ink);
}
[data-ground="mist"] {
  --sc-canvas: #E3E7ED; --sc-ink: var(--inkc); --sc-ink-soft: #4F5767;
  --sc-accent: var(--blue); --sc-accent-ink: var(--paper);
  --hair: color-mix(in oklab, var(--inkc) 16%, transparent);
  background: #E3E7ED; color: var(--sc-ink);
}
/* Light type on a dark ground needs a little more of everything. */
[data-ground="blue"], [data-ground="ink"] { letter-spacing: 0.002em; }
[data-ground="blue"] :is(p, li, dd), [data-ground="ink"] :is(p, li, dd) { line-height: 1.66; }

body { font-size: clamp(1rem, 0.97rem + 0.18vw, 1.0938rem); }
:focus-visible { outline-color: var(--sc-accent); }
a { text-decoration-color: color-mix(in oklab, currentColor 45%, transparent); }
a:hover { text-decoration-color: var(--line); }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.skip {
  position: fixed; left: 12px; top: 12px; z-index: 100; padding: 10px 14px;
  background: var(--inkc); color: var(--paper); border-radius: var(--sc-r-sm);
  font: 500 var(--sc-t-sm)/1 var(--sc-font-text); text-decoration: none;
  transform: translateY(-160%); transition: transform var(--sc-d-fast) var(--sc-ease-out);
}
.skip:focus { transform: none; }

/* ----------------------------------------------------------------- layout -- */
.wrap { width: 100%; max-width: 80rem; margin-inline: auto; padding-inline: var(--sc-gutter); }
@media (min-width: 861px) {
  .wrap { padding-left: max(var(--sc-gutter), calc(var(--rail) + 1.75rem)); }
}
.grid {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  column-gap: var(--col-gap);
}
.chapter { position: relative; padding-block: var(--sc-section); }
.chapter:focus { outline: none; }

/* --------------------------------------------------------------- type kit -- */
.label {
  font: 500 var(--sc-t-xs)/1.35 var(--sc-font-mono);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--sc-ink-soft);
  margin: 0;
}
.ch-title {
  font: 500 var(--sc-t-3xl)/1.02 var(--sc-font-display);
  letter-spacing: -0.032em;
  text-wrap: balance;
  margin: 0;
  max-width: 15ch;
}
.lede {
  font-size: var(--sc-t-lg);
  line-height: 1.5;
  letter-spacing: -0.012em;
  max-width: 40ch;
  text-wrap: pretty;
  margin: 0;
}
.prose p { max-width: 60ch; margin: 0; text-wrap: pretty; }
.prose p + p { margin-top: var(--sc-4); }
.soft { color: var(--sc-ink-soft); }
.stack-line {
  font: 400 var(--sc-t-xs)/1.7 var(--sc-font-mono);
  letter-spacing: 0.01em;
  color: var(--sc-ink-soft);
  margin: 0;
}
.nums { font-family: var(--sc-font-mono); font-variant-numeric: tabular-nums; letter-spacing: 0; }

/* The one call to action, set as running text. Same label everywhere. */
.cta {
  display: inline-flex; align-items: baseline; gap: 0.45em;
  font-weight: 500;
  color: var(--sc-ink);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.3em;
  text-decoration-color: var(--line);
  transition: text-underline-offset var(--sc-d-fast) var(--sc-ease-out);
}
.cta span { display: inline-block; transition: transform var(--sc-d-fast) var(--sc-ease-out); }
@media (hover: hover) and (pointer: fine) {
  .cta:hover span { transform: translateX(4px); }
}
.cta:active span { transform: translateX(2px); }

/* ------------------------------------------------------------------- rail --
   The folio. Six cells of the mark, one per chapter, filled as you read.
   Desktop: a spine in the left margin. Phone: a chip in the corner. */
.rail {
  position: fixed; left: 0; top: 0; bottom: 0; width: var(--rail);
  z-index: var(--sc-z-chrome);
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  padding: 26px 0 22px;
  color: var(--rail-ink);
  opacity: 0; visibility: hidden;
  transition: opacity var(--sc-d-base) var(--sc-ease-out), visibility 0s linear var(--sc-d-base);
  --rail-ink: var(--inkc); --rail-on: var(--blue); --rail-off: rgb(38 74 201 / 0.34);
  --rail-amber: var(--amber); --rail-bg: var(--paper);
}
html.rail-on .rail { opacity: 1; visibility: visible; transition: opacity var(--sc-d-base) var(--sc-ease-out); }
html[data-rail="blue"] .rail { --rail-ink: var(--paper); --rail-on: var(--paper); --rail-off: rgb(241 244 246 / 0.42); --rail-bg: #2140AE; }
html[data-rail="ink"]  .rail { --rail-ink: var(--paper); --rail-on: var(--paper); --rail-off: rgb(241 244 246 / 0.34); --rail-bg: #1A2236; }
html[data-rail="white"] .rail { --rail-bg: #FBFCFD; }
html[data-rail="mist"] .rail { --rail-bg: #E3E7ED; --rail-off: rgb(38 74 201 / 0.42); }

.rail__toggle {
  display: flex; flex-direction: column; align-items: center; gap: 18px;
  background: none; border: 0; padding: 6px; margin: 0; cursor: pointer;
  color: inherit; border-radius: var(--sc-r-sm);
}
.rail__mark { position: relative; display: block; width: 34px; height: 34px; flex: none; }
.rail__mark i {
  position: absolute; width: 10px; height: 10px;
  left: calc(var(--x) * 12px); top: calc(var(--y) * 12px);
  box-shadow: inset 0 0 0 1px var(--rail-off);
  transition: background-color var(--sc-d-base) var(--sc-ease-out), box-shadow var(--sc-d-base) var(--sc-ease-out);
}
.rail__mark i.is-on { background: var(--rail-on); box-shadow: inset 0 0 0 1px var(--rail-on); }
.rail__mark i.is-amber.is-on { background: var(--rail-amber); box-shadow: inset 0 0 0 1px var(--rail-amber); }
.rail__mark i.is-here { box-shadow: inset 0 0 0 1px var(--rail-on), 0 0 0 2px var(--rail-bg), 0 0 0 3px var(--rail-on); }
.rail__mark i.is-amber.is-here { box-shadow: 0 0 0 2px var(--rail-bg), 0 0 0 3px var(--rail-amber); }
.rail__label {
  writing-mode: vertical-rl; transform: rotate(180deg);
  font: 500 11px/1 var(--sc-font-mono); letter-spacing: 0.12em; text-transform: uppercase;
  white-space: nowrap;
}
.rail__num { margin-bottom: 0.9em; display: inline-block; }
.rail__lang {
  font: 500 11px/1 var(--sc-font-mono); letter-spacing: 0.12em; text-transform: uppercase;
  color: inherit; text-decoration: none; padding: 8px 6px; border-radius: var(--sc-r-sm);
}
html[data-rail-foot="blue"] .rail__lang, html[data-rail-foot="ink"] .rail__lang { color: var(--paper); }
html[data-rail-foot="paper"] .rail__lang, html[data-rail-foot="white"] .rail__lang, html[data-rail-foot="mist"] .rail__lang { color: var(--inkc); }
.rail__lang:hover { text-decoration: underline; text-decoration-color: var(--rail-on); }

.rail__index {
  position: absolute; left: calc(100% - 6px); top: 16px;
  min-width: 15rem;
  background: var(--rail-bg); color: var(--rail-ink);
  border-radius: 6px; padding: 10px;
  box-shadow: var(--sc-edge), var(--sc-e2);
  opacity: 0; visibility: hidden; transform: translateX(-6px);
  transition: opacity var(--sc-d-fast) var(--sc-ease-out), transform var(--sc-d-fast) var(--sc-ease-out), visibility 0s linear var(--sc-d-fast);
}
.rail.is-open .rail__index, .rail:focus-within .rail__index {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity var(--sc-d-fast) var(--sc-ease-out), transform var(--sc-d-fast) var(--sc-ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .rail__toggle:hover + .rail__index, .rail__index:hover {
    opacity: 1; visibility: visible; transform: none;
    transition: opacity var(--sc-d-fast) var(--sc-ease-out), transform var(--sc-d-fast) var(--sc-ease-out);
  }
}
.rail__index ol { list-style: none; margin: 0; padding: 0; }
.rail__index a {
  display: grid; grid-template-columns: 2.2em 1fr; align-items: baseline;
  padding: 9px 10px; border-radius: var(--sc-r-sm);
  color: inherit; text-decoration: none; font-size: var(--sc-t-sm); line-height: 1.3;
}
.rail__index a span { font: 500 11px/1 var(--sc-font-mono); letter-spacing: 0.08em; opacity: 0.8; }
.rail__index a:hover { background: color-mix(in oklab, var(--rail-ink) 8%, transparent); }
.rail__index a[aria-current="true"] { font-weight: 600; }
.rail__index .rail__index-lang { display: none; }

@media (max-width: 860px) {
  .rail {
    top: auto; bottom: max(12px, env(safe-area-inset-bottom)); left: 12px; width: auto;
    flex-direction: row; padding: 0;
    background: var(--rail-bg); border-radius: 8px;
    box-shadow: var(--sc-edge), var(--sc-e2);
  }
  .rail__toggle { flex-direction: row; gap: 12px; padding: 10px 14px 10px 11px; min-height: 44px; }
  .rail__mark { width: 25px; height: 25px; }
  .rail__mark i { width: 7px; height: 7px; left: calc(var(--x) * 9px); top: calc(var(--y) * 9px); }
  .rail__label { writing-mode: horizontal-tb; transform: none; font-size: 11px; }
  .rail__num { margin: 0 0.7em 0 0; }
  .rail__lang { display: none; }
  .rail__index { left: 0; top: auto; bottom: calc(100% + 8px); transform: translateY(6px); min-width: min(18rem, calc(100vw - 24px)); }
  .rail__index a { padding-block: 12px; }
  .rail__index .rail__index-lang { display: block; margin-top: 6px; padding-top: 6px; border-top: 1px solid color-mix(in oklab, var(--rail-ink) 14%, transparent); }
}

/* ------------------------------------------------------------------ cover -- */
.cover {
  position: relative; isolation: isolate; overflow: clip;
  display: flex; flex-direction: column;
  min-height: clamp(620px, 100svh, 58rem);
}
.cover__far {
  position: absolute; inset: auto 0 0 0; height: 56%; z-index: 0;
  -webkit-mask-image: linear-gradient(to right, transparent 0, transparent var(--m0, 46%), #000 var(--m1, 74%));
          mask-image: linear-gradient(to right, transparent 0, transparent var(--m0, 46%), #000 var(--m1, 74%));
  will-change: transform;
}
@media (max-width: 1200px) { .cover__far { --m0: 54%; --m1: 80%; } }
.cover__far canvas { width: 100%; height: 100%; }
.cover__mast {
  position: relative; z-index: 4;
  display: flex; align-items: center; justify-content: space-between;
  padding-top: clamp(20px, 3.6vh, 38px);
}
.cover__logo { display: block; line-height: 0; border-radius: var(--sc-r-sm); }
.cover__logo img { height: clamp(22px, 1.9vw, 28px); width: auto; }
.lang {
  display: flex; gap: 2px;
  font: 500 var(--sc-t-xs)/1 var(--sc-font-mono); letter-spacing: 0.1em; text-transform: uppercase;
}
.lang a, .lang span { padding: 10px 8px; border-radius: var(--sc-r-sm); color: inherit; }
.lang span { text-decoration: underline; text-decoration-color: var(--line); text-decoration-thickness: 2px; text-underline-offset: 0.45em; }
.lang a { text-decoration: none; color: var(--sc-ink-soft); }
.lang a:hover { color: var(--sc-ink); }

.cover__copy {
  position: relative; z-index: 3;
  margin-block: auto;
  padding-block: clamp(2.5rem, 6vh, 4.5rem) clamp(3.5rem, 9vh, 6rem);
}
.cover__copy > div { max-width: min(48rem, 58vw); }
.cover h1 {
  font: 500 clamp(3rem, 1.4rem + 5.4vw, 7rem)/0.98 var(--sc-font-display);
  letter-spacing: -0.038em;
  margin: var(--sc-4) 0 0;
  text-wrap: balance;
}
.cover .deck { margin: var(--sc-6) 0 0; font-size: var(--sc-t-lg); line-height: 1.5; max-width: 34ch; color: var(--sc-ink-soft); text-wrap: pretty; }
.cover .cta { margin-top: var(--sc-6); font-size: var(--sc-t-lg); }

.cover__mark {
  position: absolute; z-index: 2;
  right: var(--sc-gutter); top: 50%; translate: 0 -42%;
  width: min(46vh, 31vw, 27rem); aspect-ratio: 1;
  will-change: transform;
}
.cover__mark i {
  position: absolute; width: calc(100% / 3.4); aspect-ratio: 1;
  left: calc(var(--x) * 100% * 1.2 / 3.4); top: calc(var(--y) * 100% * 1.2 / 3.4);
  background: var(--paper);
  translate: calc(var(--x) * var(--open, 0px)) calc((var(--y) - 2) * var(--open, 0px));
  box-shadow: 0 18px 40px -18px rgb(8 20 70 / 0.55);
}
.cover__mark i.is-amber { background: var(--amber); }
.cover__grain, .peak__grain, .colophon__grain {
  position: absolute; inset: 0; pointer-events: none; z-index: 1; opacity: 0.06; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
}

@media (max-width: 860px) {
  .cover { min-height: max(100svh, 600px); }
  .cover__far { height: 30%; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 45%); mask-image: linear-gradient(to bottom, transparent, #000 45%); }
  .cover__copy { margin-block: auto 0; padding-block: var(--sc-6) clamp(5.5rem, 21svh, 11rem); }
  .cover__copy > div { max-width: none; }
  .cover h1 { font-size: var(--sc-t-3xl); }
  .cover .deck, .cover .cta { font-size: var(--sc-t-base); }
  .cover .deck { margin-top: var(--sc-5); }
  .cover .cta { margin-top: var(--sc-5); }
  .cover__mark { width: min(34vw, 19svh); top: clamp(4.5rem, 11svh, 7.5rem); translate: none; }
}

/* ------------------------------------------------------- chapter 1: problem */
.problem .grid { row-gap: var(--sc-7); align-items: start; }
.problem__text { grid-column: 1 / span 6; }
.problem__text .ch-title { margin-bottom: var(--sc-7); }
.problem__text .lede { margin-bottom: var(--sc-5); }
.problem__text .prose p:last-child { font-weight: 600; }
.fig { margin: 0; }
.fig figcaption { margin-top: var(--sc-3); max-width: 46ch; }
.fig__frame { position: relative; overflow: hidden; background: #FBFCFD; border-radius: 2px; box-shadow: 0 1px 0 var(--hair); }
.fig__frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fig__frame img[data-drift] { scale: 1.1; will-change: transform; }
.case__fig { margin-top: var(--sc-7); }
.case__fig .fig__frame, .approach__fig .fig__frame { aspect-ratio: 16 / 9; }
.approach__fig { margin-top: var(--sc-7); max-width: 34rem; }
.problem__fig { grid-column: 8 / -1; margin-top: var(--sc-9); }
.problem__fig .fig__frame { aspect-ratio: 3 / 4; }
@media (max-width: 860px) {
  .problem__text, .problem__fig { grid-column: 1 / -1; }
  .problem__fig { margin-top: 0; max-width: 30rem; }
}

/* ---------------------------------------------------------- chapter 2: peak */
.peak { padding: 0; }
.peak__stage { overflow: clip; }
.peak__inner {
  height: 100%;
  display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); column-gap: var(--col-gap);
  align-items: center;
}
.peak__copy { grid-column: 1 / span 5; position: relative; z-index: 2; }
.peak__copy .ch-title { font-size: var(--sc-t-2xl); letter-spacing: -0.028em; max-width: 13ch; }
.peak__intro { margin: var(--sc-5) 0 0; color: var(--sc-ink-soft); max-width: 36ch; }
.notes { list-style: none; margin: var(--sc-7) 0 0; padding: 0; counter-reset: n; }
.notes li {
  display: grid; grid-template-columns: 14px 1fr; column-gap: 16px; align-items: baseline;
  color: var(--sc-ink-soft);
  transition: color var(--sc-d-base) var(--sc-ease-out);
  max-width: 38ch;
}
.notes li + li { margin-top: var(--sc-4); }
.notes li::before {
  content: ""; width: 10px; height: 10px; translate: 0 0.05em;
  box-shadow: inset 0 0 0 1px currentColor;
  transition: background-color var(--sc-d-base) var(--sc-ease-out), box-shadow var(--sc-d-base) var(--sc-ease-out);
}
.notes li.is-on { color: var(--sc-ink); }
.notes li.is-on::before { background: var(--paper); box-shadow: inset 0 0 0 1px var(--paper); }
.notes li.is-on.is-signal::before { background: var(--amber); box-shadow: inset 0 0 0 1px var(--amber); }
/* The page's one amber highlight band, behind ink text, as the brand book asks. */
.notes mark {
  color: inherit; padding: 0.04em 0.18em; margin: 0 -0.18em;
  background-color: transparent;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  transition: background-color 240ms var(--sc-ease-out), color 240ms var(--sc-ease-out);
}
.notes li.is-on mark { background-color: var(--amber); color: var(--inkc); }
.peak__caption { margin-top: var(--sc-7); max-width: 44ch; }

.peak__fig { grid-column: 7 / -1; justify-self: center; position: relative; z-index: 1; }
.matrix { position: relative; width: calc(var(--S, 420px) + var(--lw, 96px)); height: calc(var(--S, 420px) + var(--lh, 34px)); }
.matrix canvas { position: absolute; left: var(--lw, 96px); top: 0; width: var(--S, 420px); height: var(--S, 420px); }
.matrix__lab {
  position: absolute; margin: 0;
  font: 500 11px/1.25 var(--sc-font-mono); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--sc-ink-soft);
  opacity: var(--labels, 0);
}
.matrix__lab--row { left: 0; width: calc(var(--lw, 96px) - 14px); text-align: right; translate: 0 -50%; }
.matrix__lab--col { top: calc(var(--S, 420px) + 12px); translate: -50% 0; text-align: center; white-space: nowrap; }
.matrix__lab.is-signal { color: var(--amber); }

@media (max-width: 860px) {
  .peak__inner { display: flex; flex-direction: column; justify-content: center; gap: var(--sc-5); padding-block: var(--sc-6) 4.5rem; }
  .peak__fig { order: -1; align-self: center; }
  .peak__copy .ch-title { font-size: var(--sc-t-xl); }
  .peak__intro { margin-top: var(--sc-3); font-size: var(--sc-t-sm); }
  .notes { margin-top: var(--sc-4); font-size: var(--sc-t-sm); }
  .notes li + li { margin-top: var(--sc-2); }
  .peak__caption { margin-top: var(--sc-4); }
  .peak__caption .cap-more { display: none; }
  .matrix__lab { font-size: 10px; letter-spacing: 0.03em; }
  .matrix__lab--col { white-space: normal; width: var(--colw, 80px); line-height: 1.15; }
}
@media (max-width: 860px) and (max-height: 700px) {
  .peak__copy .ch-title { font-size: 1.35rem; }
  .peak__intro, .notes { font-size: 0.8125rem; }
  .notes li + li { margin-top: 6px; }
}

/* ------------------------------------------------------ chapter 3: services */
.services .grid { align-items: start; row-gap: var(--sc-7); }
.services__head { grid-column: 1 / span 4; position: sticky; top: 18vh; }
.services__head .lede { margin-top: var(--sc-6); color: var(--sc-ink-soft); }
.ledger { grid-column: 6 / -1; list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hair); }
.ledger > li {
  display: grid; grid-template-columns: minmax(0, 13.5rem) minmax(0, 1fr);
  column-gap: var(--sc-6); row-gap: var(--sc-3);
  padding-block: var(--sc-6);
  border-bottom: 1px solid var(--hair);
}
.ledger h3 { margin: 0; font: 600 var(--sc-t-lg)/1.25 var(--sc-font-display); letter-spacing: -0.015em; text-wrap: balance; }
.ledger p { margin: 0; max-width: 54ch; text-wrap: pretty; }
.ledger .stack-line { grid-column: 2; }
@media (max-width: 1100px) {
  .services__head { grid-column: 1 / span 5; }
  .ledger { grid-column: 6 / -1; }
  .ledger > li { grid-template-columns: 1fr; }
  .ledger .stack-line { grid-column: 1; }
}
@media (max-width: 860px) {
  .services__head { grid-column: 1 / -1; position: static; }
  .ledger { grid-column: 1 / -1; }
}

/* ---------------------------------------------------------- chapter 4: work */
.work__head { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: var(--sc-5); align-items: end; }
.work__head .ch-title { grid-column: 1 / span 7; }
.work__head .lede { grid-column: 8 / -1; color: var(--sc-ink-soft); font-size: var(--sc-t-base); line-height: 1.6; }
.case { margin-top: var(--sc-10); padding-top: var(--sc-6); border-top: 1px solid var(--hair); row-gap: var(--sc-6); }
.case + .case { margin-top: var(--sc-9); }
.case__meta { grid-column: 1 / span 4; }
.case__meta > .label { color: var(--sc-ink); }
.facts { margin: var(--sc-4) 0 0; padding: 0; }
.facts div { padding-block: var(--sc-3); border-bottom: 1px solid var(--hair); }
.facts dt { font: 500 var(--sc-t-xs)/1.3 var(--sc-font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--sc-ink-soft); }
.facts dd { margin: 4px 0 0; font-size: var(--sc-t-lg); font-weight: 500; letter-spacing: -0.01em; }
.case__body { grid-column: 6 / -1; }
.case__body h3 { margin: 0 0 var(--sc-5); font: 500 var(--sc-t-xl)/1.18 var(--sc-font-display); letter-spacing: -0.022em; max-width: 24ch; text-wrap: balance; }
.case__body .stack-line { margin-top: var(--sc-5); }

.pipe {
  grid-column: 1 / -1;
  list-style: none; margin: var(--sc-4) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--col-gap);
  position: relative;
  --q: 1;
}
.pipe::before {
  content: ""; position: absolute; left: 14px; right: 14px; top: 13px; height: 2px;
  background: var(--blue);
  transform-origin: 0 50%; transform: scaleX(var(--q));
}
.pipe li { position: relative; padding-right: var(--sc-4); }
.pipe__n {
  position: relative; display: grid; place-items: center;
  width: 28px; height: 28px;
  background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--blue);
  font: 500 12px/1 var(--sc-font-mono); color: var(--blue);
  transition: background-color var(--sc-d-base) var(--sc-ease-out), color var(--sc-d-base) var(--sc-ease-out);
}
.pipe li.is-on .pipe__n { background: var(--blue); color: var(--paper); }
.pipe h4 { margin: var(--sc-4) 0 var(--sc-2); font: 600 var(--sc-t-base)/1.3 var(--sc-font-display); letter-spacing: -0.01em; }
.pipe p { margin: 0; font-size: var(--sc-t-sm); line-height: 1.5; color: var(--sc-ink-soft); max-width: 28ch; }
.pipe li > :not(.pipe__n) { opacity: var(--o, 1); translate: 0 calc((1 - var(--o, 1)) * 10px); }
.case__note { grid-column: 6 / -1; margin: 0; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); max-width: 62ch; }

.sectors { margin-top: var(--sc-10); padding-top: var(--sc-6); border-top: 1px solid var(--hair); align-items: baseline; row-gap: var(--sc-4); }
.sectors h3 { grid-column: 1 / span 4; margin: 0; font: 500 var(--sc-t-xl)/1.15 var(--sc-font-display); letter-spacing: -0.02em; }
.sectors h3 .nums { font-size: 1.04em; }
.sectors__list { grid-column: 6 / -1; margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 0.35em 0; }
.sectors__list li { white-space: nowrap; }
.sectors__list li:not(:last-child)::after { content: "·"; margin-inline: 0.6em; color: var(--sc-ink-soft); }

@media (max-width: 860px) {
  .work__head .ch-title, .work__head .lede, .case__meta, .case__body, .case__note,
  .sectors h3, .sectors__list { grid-column: 1 / -1; }
  .case { margin-top: var(--sc-8); }
  .pipe { grid-template-columns: 1fr; row-gap: var(--sc-5); padding-left: 44px; }
  .pipe::before { left: 13px; right: auto; top: 14px; bottom: 14px; width: 2px; height: auto; transform-origin: 50% 0; transform: scaleY(var(--q)); }
  .pipe__n { position: absolute; left: -44px; top: 0; }
  .pipe h4 { margin-top: 3px; }
}

/* ------------------------------------------------------ chapter 5: approach */
.approach .grid { align-items: start; row-gap: var(--sc-7); }
.approach__head { grid-column: 1 / span 5; position: sticky; top: 16vh; }
.approach__quote {
  margin: var(--sc-7) 0 0; padding: 0;
  font: 500 var(--sc-t-xl)/1.3 var(--sc-font-display); letter-spacing: -0.02em;
  max-width: 24ch; text-wrap: pretty;
}
.steps { grid-column: 7 / -1; list-style: none; margin: 0; padding: 0; counter-reset: step; }
.steps li { display: grid; grid-template-columns: 3.2rem 1fr; column-gap: var(--sc-4); padding-block: var(--sc-6); border-top: 1px solid var(--hair); }
.steps li:last-child { border-bottom: 1px solid var(--hair); }
.steps li::before { counter-increment: step; content: "0" counter(step); font: 500 var(--sc-t-sm)/1.9 var(--sc-font-mono); color: var(--blue); }
.steps h3 { margin: 0 0 var(--sc-2); font: 600 var(--sc-t-lg)/1.3 var(--sc-font-display); letter-spacing: -0.012em; }
.steps p { margin: 0; color: var(--sc-ink-soft); max-width: 46ch; }
.steps li > div { min-width: 0; }
@media (max-width: 860px) {
  .approach__head, .steps { grid-column: 1 / -1; position: static; }
}

/* --------------------------------------------------------------- colophon */
.colophon { position: relative; isolation: isolate; overflow: clip; padding-block: var(--sc-9) var(--sc-6); }
.colophon .grid { margin-bottom: var(--sc-9); align-items: end; row-gap: var(--sc-8); }
.colophon__main { grid-column: 1 / span 7; position: relative; z-index: 2; }
.colophon__main .ch-title { font-size: var(--sc-t-2xl); max-width: 16ch; }
.colophon__main .lede { margin-top: var(--sc-5); color: var(--sc-ink-soft); font-size: var(--sc-t-base); line-height: 1.6; max-width: 46ch; }
.colophon__ask { margin: var(--sc-6) 0 0; font-size: var(--sc-t-lg); line-height: 1.6; }
.colophon__ask .cta { font-size: inherit; }
.colophon__mail { color: var(--sc-ink); }
.colophon__mark { grid-column: 9 / -1; justify-self: end; width: min(100%, 22rem); aspect-ratio: 1; position: relative; z-index: 2; }
.colophon__mark i {
  position: absolute; width: calc(100% / 3.4); aspect-ratio: 1;
  left: calc(var(--x) * 100% * 1.2 / 3.4); top: calc(var(--y) * 100% * 1.2 / 3.4);
  background: var(--paper);
}
.colophon__mark i.is-amber { background: var(--amber); }
.legal {
  margin: 0; padding-top: var(--sc-5); border-top: 1px solid var(--hair);
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: var(--sc-4);
  position: relative; z-index: 2;
}
.legal dt { font: 500 var(--sc-t-xs)/1.3 var(--sc-font-mono); letter-spacing: 0.07em; text-transform: uppercase; color: var(--sc-ink-soft); }
.legal dd { margin: 6px 0 0; font-size: var(--sc-t-sm); line-height: 1.5; }
.smallprint {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sc-3) var(--sc-6);
  margin-top: var(--sc-7); font-size: var(--sc-t-xs); color: var(--sc-ink-soft); position: relative; z-index: 2;
}
.smallprint p { margin: 0; }
.smallprint a { color: var(--sc-ink); }
@media (max-width: 860px) {
  .colophon { padding-bottom: 5.5rem; }
  .colophon__main, .colophon__mark { grid-column: 1 / -1; }
  .colophon__mark { justify-self: start; width: 7.5rem; order: -1; }
  .legal { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 420px) { .legal { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  .cover__far, .cover__mark { transform: none !important; }
  .cover__mark i { translate: none; }
  .services__head, .approach__head { position: static; }
  .notes mark, .notes li, .notes li::before { transition: none; }
}