/* buildingsoftware.ai: "The Catch" (art/Direction.md).
   A field manual on colored stock. Oxide ground; Brass marks the core path and
   nothing else; Fault marks mistakes and nothing else. Literata carries
   everything readable across its optical-size axis; Azeret Mono appears only
   in drills and code. Labels are sentence-case headings, never small caps or
   tracked capitals. Italic has one job sitewide: the one-line tagline under
   a name (the site's, and each section's). The course map is the recurring
   instrument; operational panels (the map, the position rail, the drill) get
   restrained tonal depth from ground tone and 1px rules, never shadows,
   gradients or glass. The one motion is the red pencil: a Fault rule in the
   margin of each finding that draws once. */

:root {
  --oxide: #13332C;
  --oxide-deep: #0D241F;
  /* Raised instrument panels (course map, position rail) and the inset drill field. */
  --panel: #183C34;
  --inset: #0A1C18;
  /* The shadow-side edge of an inset field. */
  --shade: #04100D;
  --stock: #EDE6D6;
  --lichen: #9DB3A8;
  /* Lichen raised for utility labels that must read at a glance: crumbs, taglines. */
  --lichen-hi: #BCCDC4;
  --brass: #D9A441;
  --fault: #E4573A;
  /* Fault for text set under 24px. #E4573A is 3.7:1 on Oxide, which passes
     AA for large text only; this lighter step of the same red is 5.1:1. */
  --fault-text: #F47C5C;
  /* A muted Fault for quoted mistakes set as supporting text: 6.0:1 on Oxide. */
  --fault-soft: #E39A85;
  --rule: #3D6358;
  --rule-deep: #33564E;
  --rule-strong: #4F766B;
  --rule-link: #6E8C82;
  --serif: "Literata", "Iowan Old Style", Georgia, serif;
  --mono: "Azeret Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --wrap: 78rem;
  --gutter: clamp(1rem, 4vw, 3rem);
  --band: clamp(2.5rem, 4.5vw, 3.75rem);
  --step-w: 4.75rem;
  --depth-w: 8.5rem;
  --cmap-gap: 0.75rem;
  color-scheme: dark;
}

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

html {
  background: var(--oxide);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--oxide);
  color: var(--stock);
  font-family: var(--serif);
  font-size: 1.125rem;
  line-height: 1.6;
  font-optical-sizing: auto;
  font-kerning: normal;
  font-variant-numeric: oldstyle-nums proportional-nums;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: normal;
  hyphens: manual;
}

h1, h2, h3, h4, p, ul, ol, dl, dd { margin: 0; }
h1, h2, h3, h4 { font-weight: 500; }
ul, ol { padding: 0; list-style: none; }
img { display: block; max-width: 100%; }
/* Book titles are links set in the title weight; italic is kept for taglines. */
cite { font-style: normal; }

/* The one italic role: the tagline under a name. */
.masthead-tag,
.chart-tagline,
.section-tagline { font-style: italic; }

a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-color: var(--rule-link);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: text-decoration-color 0.15s ease, color 0.15s ease;
}
a:hover { text-decoration-color: currentColor; }

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

::selection { background: var(--lichen); color: var(--oxide-deep); }

code {
  font-family: var(--mono);
  font-size: 0.86em;
  font-variant-numeric: normal;
  padding: 0.05em 0.3em;
  background: var(--oxide-deep);
  border-radius: 3px;
}

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

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

.band {
  padding-block: var(--band);
  background: var(--oxide);
  border-top: 1px solid var(--rule);
}
.band-deep {
  background: var(--oxide-deep);
  border-top-color: var(--rule-deep);
}

/* A band's own heading: sentence case at reading size. */
.band-head {
  margin-bottom: 1.1rem;
  font-size: clamp(1.35rem, 1.1rem + 0.7vw, 1.7rem);
  font-weight: 500;
  line-height: 1.2;
}

.num {
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--lichen);
}

/* The core path. Always a labeled step ("Core 3"), always Brass. */
.core-step {
  color: var(--brass);
  font-weight: 600;
  font-style: normal;
  font-variant-numeric: lining-nums tabular-nums;
  white-space: nowrap;
}

/* Depth: a compact marker, quieter than the core step. A three-step scale
   (recognize, explain, do) filled to the step, and the step's word, both in
   Lichen; the map key names the scale once. The scale sits on the text
   baseline so the marker aligns with the line beside it. */
.depth {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45rem;
  font-size: 0.9375rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.3;
  color: var(--lichen);
  white-space: nowrap;
}
.depth-scale {
  display: inline-flex;
  gap: 2px;
}
.depth-scale > span {
  display: block;
  width: 0.7rem;
  height: 0.4rem;
  border: 1px solid var(--lichen);
}
.depth-scale[data-level="1"] > span:nth-child(-n + 1),
.depth-scale[data-level="2"] > span:nth-child(-n + 2),
.depth-scale[data-level="3"] > span:nth-child(-n + 3) { background: var(--lichen); }

/* An arrow drawn with rules: a line and a head, no glyph, at the weight of the
   strong rules. Horizontal by default; stacked layouts turn it down. */
.arrow {
  position: relative;
  display: block;
  min-width: 1.5rem;
}
.arrow::before {
  content: "";
  position: absolute;
  left: 0.5rem;
  right: 4px;
  top: var(--arrow-y, 50%);
  transform: translateY(-1px);
  border-top: 2px solid var(--lichen);
}
.arrow::after {
  content: "";
  position: absolute;
  right: 0;
  top: var(--arrow-y, 50%);
  transform: translateY(-50%);
  border-left: 11px solid var(--lichen);
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
}

/* ---------------------------------------------------------------- masthead and footer */

.masthead {
  background: var(--oxide);
  border-bottom: 1px solid var(--rule);
}
.masthead-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem 2rem;
  padding-block: 0.9rem;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  text-decoration: none;
}
.brand img { width: 32px; height: 32px; }
.brand:hover span { text-decoration: underline; text-decoration-color: currentColor; text-underline-offset: 0.2em; }
.masthead-tag {
  color: var(--lichen-hi);
  font-size: 1rem;
}

.site-foot {
  background: var(--oxide-deep);
  border-top: 1px solid var(--rule-deep);
  padding-block: 2.5rem 3rem;
}
.foot-sections {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem 2.25rem;
  padding-bottom: 1.75rem;
  border-bottom: 1px solid var(--rule-deep);
}
.foot-sections a {
  display: block;
  font-size: 1.0625rem;
  line-height: 1.3;
  white-space: nowrap;
  text-decoration: none;
}
.foot-sections a:hover { text-decoration: underline; text-decoration-color: currentColor; }
.colophon {
  max-width: 64ch;
  margin-inline: auto;
  color: var(--lichen);
  font-size: 1rem;
  line-height: 1.5;
  text-align: center;
  text-wrap: balance;
}
.colophon:first-of-type { margin-top: 1.5rem; color: var(--stock); }
.colophon + .colophon { margin-top: 0.35rem; }

/* ---------------------------------------------------------------- course map */

/* The site's recurring instrument: a raised panel with a 1px inner border.
   Nine segments, each as wide as its subsection count (--n, set per segment);
   every subsection is a tick standing on the segment's baseline. */
.cmap {
  padding: 1rem 1.25rem 0.9rem;
  background: var(--panel);
  border: 1px solid var(--rule-strong);
}
.cmap-secs {
  display: flex;
  gap: var(--cmap-gap);
}
.cmap-sec {
  flex: var(--n) 1 0;
  min-width: 0;
  display: grid;
  grid-template-rows: 1fr auto;
}
.cmap-label {
  align-self: end;
  display: block;
  padding: 0 0.1rem 0.5rem calc(50% / var(--n) - 0.2rem);
  font-size: 0.9375rem;
  line-height: 1.2;
  color: var(--lichen-hi);
  text-decoration: none;
}
.cmap-label:hover { color: var(--stock); text-decoration: underline; text-decoration-color: currentColor; }
.cmap-num {
  font-weight: 600;
  font-variant-numeric: lining-nums tabular-nums;
}
.cmap-sec.is-current .cmap-label { color: var(--stock); font-weight: 600; }
.cmap-ticks {
  display: grid;
  grid-template-columns: repeat(var(--n), minmax(0, 1fr));
}
.cmap-cell {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.cmap-tick {
  position: relative;
  display: block;
  height: 2.1rem;
  border-bottom: 1px solid var(--rule-strong);
  text-decoration: none;
}
.cmap-sec.is-current .cmap-tick { border-bottom: 3px solid var(--stock); }
.cmap-tick::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  height: 0.85rem;
  margin-left: -1px;
  border-left: 2px solid var(--lichen);
}
.cmap-tick.is-core::before {
  height: 1.4rem;
  border-left-color: var(--brass);
}
.cmap-cell.is-this .cmap-tick::before {
  top: 0;
  height: auto;
  margin-left: -2px;
  border-left: 4px solid var(--stock);
}
.cmap-tick:hover::before { border-left-color: var(--stock); }
.cmap-tick:focus-visible { outline-offset: 1px; }

/* The tick's name: read by assistive technology, shown as a readout on keyboard focus. */
.cmap-tip {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.cmap-tick:focus-visible .cmap-tip {
  z-index: 2;
  left: calc(50% - 1rem);
  bottom: calc(100% + 0.5rem);
  width: max-content;
  max-width: 18rem;
  height: auto;
  padding: 0.4rem 0.65rem;
  overflow: visible;
  clip-path: none;
  white-space: normal;
  background: var(--oxide-deep);
  border: 1px solid var(--rule-strong);
  font-size: 0.9375rem;
  line-height: 1.35;
  color: var(--stock);
}
.cmap-tick.tip-end:focus-visible .cmap-tip { left: auto; right: calc(50% - 1rem); }

/* The dependency lane (subsection pages): one Lichen rule joining this
   subsection to what it comes after, on its left, and what it unlocks, on its
   right, with a drop to each of those ticks. */
.cmap-lane {
  position: relative;
  display: block;
  height: 0.85rem;
}
.cmap-cell:is(.ln-l, .ln-r) .cmap-lane::before {
  content: "";
  position: absolute;
  left: 50%;
  right: 50%;
  bottom: 0;
  border-bottom: 2px solid var(--lichen);
}
.cmap-cell.ln-l .cmap-lane::before { left: 0; }
.cmap-cell.ln-r .cmap-lane::before { right: 0; }
.cmap-cell.ln-r:last-child .cmap-lane::before { right: calc(-1 * var(--cmap-gap)); }
.cmap-cell.ln-drop .cmap-lane::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  margin-left: -1px;
  border-left: 2px solid var(--lichen);
}
.cmap-cell.is-this.ln-drop .cmap-lane::after {
  margin-left: -2px;
  border-left: 4px solid var(--stock);
}

/* The key, drawn with the map's own marks. */
.cmap-key {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.45rem 1.75rem;
  margin-top: 0.85rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--rule);
  font-size: 0.9375rem;
  line-height: 1.35;
  color: var(--lichen-hi);
}
.cmap-key li {
  display: inline-flex;
  align-items: baseline;
  gap: 0.55rem;
}
.key-tick {
  display: inline-block;
  width: 2px;
  height: 0.8rem;
  border-left: 2px solid var(--lichen);
}
.key-core {
  height: 1.05rem;
  border-left-color: var(--brass);
}
.key-this {
  width: 4px;
  height: 1.05rem;
  border-left: 4px solid var(--stock);
}
.key-base {
  display: inline-block;
  width: 1.5rem;
  border-bottom: 3px solid var(--stock);
}
.key-lane {
  display: inline-block;
  width: 1.75rem;
  height: 0.6rem;
  border: 2px solid var(--lichen);
  border-top: 0;
}
.key-fault {
  display: inline-block;
  width: 3px;
  height: 1.05rem;
  border-left: 3px solid var(--fault);
}
.key-depth { gap: 0.55rem 1rem; flex-wrap: wrap; }
.key-depth-name { color: var(--stock); }
.key-step {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45rem;
}

/* ---------------------------------------------------------------- home: thesis */

.thesis {
  border-top: 0;
  padding-block: clamp(2.5rem, 5.5vw, 4.25rem) clamp(2.25rem, 4vw, 3.25rem);
}
.thesis-claim {
  display: block;
  font-size: clamp(2.05rem, 1.2rem + 3.3vw, 4.1rem);
  font-weight: 430;
  line-height: 1.06;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.thesis-work {
  display: block;
  margin-top: clamp(0.75rem, 1.5vw, 1.1rem);
  max-width: 60rem;
  font-size: clamp(1.3rem, 1rem + 1.3vw, 2.15rem);
  font-weight: 340;
  line-height: 1.28;
  color: var(--lichen-hi);
  text-wrap: balance;
}

/* ---------------------------------------------------------------- home: division of labor */

.handoff-band {
  --act-w: clamp(9rem, 15vw, 12.5rem);
  --arrow-w: clamp(2.75rem, 4.5vw, 4rem);
  --cell-y: 1.35rem;
}
.handoff-intro {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem clamp(2rem, 5vw, 4.5rem);
  align-items: end;
  margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem);
}
.handoff-head {
  font-size: clamp(1.6rem, 1.15rem + 1.5vw, 2.45rem);
  font-weight: 450;
  line-height: 1.12;
  text-wrap: balance;
}
.handoff-how {
  font-size: 1.1rem;
  line-height: 1.5;
  color: var(--lichen-hi);
  max-width: 46ch;
}

.handoff-cols {
  display: grid;
  grid-template-columns: var(--act-w) minmax(0, 1fr) var(--arrow-w) minmax(0, 1.75fr);
  border-bottom: 1px solid var(--lichen);
}
.handoff-col {
  padding-bottom: 0.75rem;
  font-size: clamp(1.25rem, 1.05rem + 0.5vw, 1.5rem);
  font-weight: 600;
  line-height: 1.2;
}
.handoff-col-agent { grid-column: 1 / 4; }
.handoff-col-you {
  grid-column: 4;
  padding-left: 1.5rem;
  border-left: 2px solid var(--stock);
}

.handoff-group {
  display: grid;
  grid-template-columns: var(--act-w) minmax(0, 1fr);
  border-top: 1px solid var(--rule);
}
.handoff-group:first-child { border-top: 0; }
.handoff-act {
  padding: var(--cell-y) 1.25rem var(--cell-y) 0;
  font-size: clamp(1.2rem, 1rem + 0.5vw, 1.45rem);
  font-weight: 500;
  line-height: 1.2;
}
.handoff-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--arrow-w) minmax(0, 1.75fr);
}
.handoff-row + .handoff-row { border-top: 1px solid var(--rule-deep); }
.handoff-catch {
  padding-block: var(--cell-y);
  font-size: 1.0625rem;
  line-height: 1.45;
  color: var(--fault-soft);
}
.handoff-arrow { --arrow-y: calc(var(--cell-y) + 0.8rem); }
.owned {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-content: start;
  column-gap: 1rem;
  padding: var(--cell-y) 0 var(--cell-y) 1.5rem;
  border-left: 2px solid var(--stock);
}
.owned-name {
  grid-column: 1;
  font-size: clamp(1.25rem, 1rem + 0.6vw, 1.5rem);
  font-weight: 500;
  line-height: 1.2;
  overflow-wrap: normal;
  word-break: keep-all;
  hyphens: manual;
}
.owned-name a { text-decoration: none; }
.owned-name a:hover { text-decoration: underline; text-decoration-color: currentColor; }
.own-who { font-weight: 400; color: var(--lichen); }
.owned-core {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  font-size: 1.0625rem;
}
.owned-note,
.owned-links {
  grid-column: 1 / -1;
  margin-top: 0.4rem;
  font-size: 1.0625rem;
  line-height: 1.5;
}
.owned-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 1.25rem;
}
.owned-links a { white-space: nowrap; }

@media (min-width: 861px) {
  .act-full {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .own-who { display: none; }
}

/* ---------------------------------------------------------------- home: argument, read first */

.argument-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.argument-lead,
.epigraph p:first-child {
  font-size: clamp(1.15rem, 1rem + 0.4vw, 1.35rem);
  line-height: 1.55;
}
.epigraph {
  border-left: 2px solid var(--lichen);
  padding-left: clamp(1rem, 2vw, 1.75rem);
}
.epigraph p:first-child { color: var(--lichen-hi); }
.epigraph-source {
  margin-top: 1rem;
  font-size: 1rem;
  color: var(--lichen);
}

.readfirst-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
  text-align: center;
}
.readfirst-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  max-width: 30ch;
  font-size: clamp(1.7rem, 1.15rem + 2vw, 2.75rem);
  font-weight: 450;
  line-height: 1.15;
  text-wrap: balance;
}
.readfirst-lead {
  font-size: clamp(1.1rem, 1rem + 0.3vw, 1.25rem);
  font-weight: 500;
  color: var(--lichen-hi);
}
.readfirst-why { max-width: 58ch; font-size: 1.1rem; }
.readfirst-catch {
  max-width: 58ch;
  font-size: 1.1rem;
  color: var(--fault-soft);
}

/* ---------------------------------------------------------------- home: contents chart */

.contents-intro-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 1rem clamp(2rem, 5vw, 4.5rem);
  align-items: end;
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}
.contents-head {
  font-size: clamp(2.3rem, 1.4rem + 2.8vw, 3.75rem);
  font-weight: 400;
  line-height: 1;
}
.contents-how { font-size: 1.1rem; color: var(--lichen-hi); }

/* The contents chart. Every row and each section head share one grid:
   the core step, the title (with its depth under it), and the lead catch
   across the rest of the width, so a row reads in two lines and the right of
   the page carries the mistake, not empty ground. */
.chart-row {
  --title-w: minmax(0, 0.66fr);
  padding-block: clamp(1.25rem, 2vw, 1.6rem);
}
.chart-head,
.entries > li {
  display: grid;
  grid-template-columns: var(--step-w) var(--title-w) minmax(0, 1fr);
  column-gap: clamp(1rem, 2vw, 1.75rem);
}
.chart-head {
  align-items: baseline;
  padding: 0 0 0.8rem calc(0.85rem + 2px);
  border-bottom: 1px solid var(--rule-strong);
}
.sec-num {
  font-size: 2.3rem;
  font-weight: 350;
  line-height: 1;
  font-variant-numeric: lining-nums;
  color: var(--lichen);
}
.chart-head h3 {
  font-size: clamp(1.35rem, 1.1rem + 0.6vw, 1.7rem);
  font-weight: 500;
  line-height: 1.2;
  text-wrap: balance;
}
.chart-head h3 a { text-decoration: none; }
.chart-head h3 a:hover { text-decoration: underline; text-decoration-color: currentColor; }
.chart-tagline {
  font-size: 1.0625rem;
  line-height: 1.45;
  color: var(--lichen-hi);
  text-wrap: pretty;
}

.entries > li {
  grid-template-areas:
    "step title catch"
    ". depth catch";
  grid-template-rows: auto 1fr;
  align-items: baseline;
  row-gap: 0.2rem;
  padding: 0.7rem 0 0.75rem 0.85rem;
  border-left: 2px solid transparent;
  border-bottom: 1px solid var(--rule);
}
.entries .entry-body { display: contents; }
.entries .entry-step { grid-area: step; }
.entries .entry-title { grid-area: title; }
.entries .entry-catch { grid-area: catch; }
.entries .depth { grid-area: depth; align-self: start; }
.chart-row.band-deep .entries > li { border-bottom-color: var(--rule-deep); }

/* Section rows: the metadata (core step, depth) is one aligned group on the
   left, on the title's baseline; the title leads, the summary and the lead
   catch sit under it side by side. */
.sub-rows > li {
  display: grid;
  grid-template-columns: var(--step-w) var(--depth-w) minmax(0, 1fr);
  grid-template-areas: "step depth body";
  column-gap: 0.75rem;
  align-items: baseline;
  padding-left: 0.85rem;
  border-left: 2px solid transparent;
  border-bottom: 1px solid var(--rule-deep);
}
.entries > li.is-core,
.sub-rows > li.is-core { border-left-color: var(--brass); }
.entries > li:last-child,
.sub-rows > li:last-child { border-bottom: 0; }
.entry-step { grid-area: step; font-size: 1.0625rem; }
.sub-rows .depth { grid-area: depth; }
.entry-body { grid-area: body; }
.entry-title {
  font-size: clamp(1.2rem, 1.05rem + 0.3vw, 1.3rem);
  font-weight: 500;
  line-height: 1.3;
  text-decoration: none;
}
.entry-title:hover { text-decoration: underline; text-decoration-color: currentColor; }
.entry-catch {
  max-width: 76ch;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--fault-soft);
}

.rows .row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr);
  gap: 0.35rem clamp(1.5rem, 4vw, 3.5rem);
  padding-block: 0.95rem;
  border-top: 1px solid var(--rule);
}
.rows dt {
  font-size: 1.15rem;
  font-weight: 500;
  line-height: 1.4;
}

/* ---------------------------------------------------------------- section */

.section-lead { border-top: 0; }
.crumb {
  font-size: 1.0625rem;
  color: var(--lichen-hi);
}
.crumb a { color: var(--stock); text-decoration-color: var(--lichen); }
.crumb-sep { margin-inline: 0.3rem; }
.section-lead-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-areas:
    "id why"
    "map map";
  gap: 2.25rem clamp(2rem, 5vw, 5rem);
  align-items: end;
}
.section-id { grid-area: id; }
.section-lead-grid > .cmap { grid-area: map; }
.section-why-col { grid-area: why; }
.section-id .crumb { margin-bottom: 1.25rem; }
.sec-num-big {
  margin-bottom: 0.35rem;
  font-size: clamp(2.6rem, 1.8rem + 3vw, 4.5rem);
}
.section-title {
  font-size: clamp(2rem, 1.3rem + 2.3vw, 3.3rem);
  font-weight: 420;
  line-height: 1.06;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.section-tagline {
  margin-top: 0.9rem;
  font-size: clamp(1.15rem, 1rem + 0.5vw, 1.4rem);
  line-height: 1.4;
  color: var(--lichen-hi);
}
.section-why-col {
  border-left: 1px solid var(--rule-strong);
  padding-left: clamp(1.5rem, 3vw, 2.5rem);
}
.section-why-head {
  margin-bottom: 0.75rem;
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.3;
}
.section-why {
  font-size: clamp(1.15rem, 1rem + 0.5vw, 1.4rem);
  line-height: 1.5;
  text-wrap: pretty;
}

.sub-rows > li { padding-block: 1.6rem; }
.sub-rows > li:first-child { padding-top: 0.35rem; }
.sub-rows .entry-step { font-size: 1.125rem; }
.sub-row-main {
  grid-area: body;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 0.6rem clamp(1.5rem, 3vw, 2.5rem);
}
.sub-row-title {
  grid-column: 1 / -1;
  font-size: clamp(1.3rem, 1.05rem + 0.75vw, 1.75rem);
  font-weight: 500;
  line-height: 1.2;
}
.sub-row-title a { text-decoration: none; }
.sub-row-title a:hover { text-decoration: underline; text-decoration-color: currentColor; }
.sub-row-catch {
  padding-left: 0.9rem;
  border-left: 2px solid var(--fault);
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--fault-soft);
}

.pager { padding-block: clamp(1.75rem, 3.5vw, 2.5rem); }
.pager-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
}
.pager-link {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  text-decoration: none;
}
.pager-next { align-items: flex-end; text-align: right; }
.pager-dir { font-size: 1rem; color: var(--lichen-hi); }
.pager-title {
  font-size: clamp(1.1rem, 1rem + 0.5vw, 1.45rem);
  font-weight: 500;
  line-height: 1.25;
}
.pager-link:hover .pager-title { text-decoration: underline; text-decoration-color: currentColor; text-underline-offset: 0.2em; }

/* ---------------------------------------------------------------- subsection: header and findings */

.catch-band {
  border-top: 0;
  padding-block: clamp(1.75rem, 4.5vw, 3.25rem) clamp(2.25rem, 5vw, 3.75rem);
}
.sub-head { margin-bottom: clamp(1rem, 2vw, 1.5rem); }
.sub-head .crumb { margin-bottom: 0.4rem; }
.sub-title {
  font-size: clamp(1.55rem, 1.2rem + 1.1vw, 2.05rem);
  font-weight: 500;
  line-height: 1.15;
  text-wrap: balance;
}
.catch-band .cmap { margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem); }
.catch-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(18.5rem, 27vw, 23.5rem);
  gap: 2rem clamp(2rem, 4.5vw, 4rem);
  align-items: start;
}
.findings-head {
  margin-bottom: 1.1rem;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--fault-text);
}
.findings {
  display: flex;
  flex-direction: column;
  gap: clamp(1.25rem, 2.4vw, 1.9rem);
}
.finding {
  display: grid;
  grid-template-columns: 1.6rem minmax(0, 1fr);
  column-gap: 0.9rem;
  view-timeline: --finding block;
}
.finding-mark {
  padding-top: 0.55rem;
  text-align: right;
  font-size: 1.25rem;
  font-weight: 650;
  line-height: 1;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--fault-text);
}
.finding-text {
  position: relative;
  padding-left: 1.25rem;
  font-size: clamp(1.45rem, 1.05rem + 1.35vw, 2.1rem);
  font-weight: 420;
  line-height: 1.24;
  letter-spacing: -0.005em;
  color: var(--stock);
  text-wrap: pretty;
}

/* The red pencil: one Fault rule in the margin of each finding. Drawn is the
   resting state. It draws top to bottom once: over time on first paint, and,
   where scroll timelines exist, in step with the finding entering the
   viewport. Before a finding enters, the scroll driver has no fill and the
   rule stays drawn, so a capture never shows a partial stroke. */
@property --pencil-time {
  syntax: "<number>";
  inherits: false;
  initial-value: 1;
}
@property --pencil-scroll {
  syntax: "<number>";
  inherits: false;
  initial-value: 1;
}
@keyframes pencil-time {
  from { --pencil-time: 0; }
  to { --pencil-time: 1; }
}
@keyframes pencil-scroll {
  from { --pencil-scroll: 0; }
  to { --pencil-scroll: 1; }
}
.finding-text::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.2em;
  bottom: 0.12em;
  border-left: 3px solid var(--fault);
  transform-origin: 50% 0;
  transform: scaleY(calc(var(--pencil-time) * var(--pencil-scroll)));
  animation: pencil-time 0.55s cubic-bezier(0.55, 0, 0.3, 1) 0.15s backwards;
}
@supports (animation-timeline: view()) {
  .finding-text::before {
    animation-name: pencil-time, pencil-scroll;
    animation-duration: 0.55s, auto;
    animation-timing-function: cubic-bezier(0.55, 0, 0.3, 1), linear;
    animation-delay: 0.15s, 0s;
    animation-fill-mode: backwards, forwards;
    animation-timeline: auto, --finding;
    animation-range: normal, entry 0% entry 100%;
  }
}
.finding:nth-child(2) .finding-text::before { animation-delay: 0.27s, 0s; }
.finding:nth-child(3) .finding-text::before { animation-delay: 0.39s, 0s; }
.finding:nth-child(n + 4) .finding-text::before { animation-delay: 0.51s, 0s; }

/* ---------------------------------------------------------------- subsection: position rail */

/* An instrument panel: raised tone, 1px inner border, and a calibrated track
   down the left of this section's subsections. */
.rail {
  padding: 1.3rem 1.4rem 1.4rem;
  background: var(--panel);
  border: 1px solid var(--rule-strong);
}
.rail-head {
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1.2;
}
.rail-head a { text-decoration: none; }
.rail-head a:hover { text-decoration: underline; text-decoration-color: currentColor; }
.rail-of {
  margin-top: 0.25rem;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--lichen-hi);
}
.rail-subs {
  margin-top: 1rem;
  border-left: 1px solid var(--rule-strong);
}
.rail-sub {
  position: relative;
  display: grid;
  grid-template-columns: 4.1rem minmax(0, 1fr);
  gap: 0.6rem;
  align-items: baseline;
  padding: 0.55rem 0 0.55rem 1rem;
  border-bottom: 1px solid var(--rule);
  font-size: 1rem;
  line-height: 1.35;
}
.rail-sub:last-child { border-bottom: 0; }
/* A calibration mark on the track for every subsection. */
.rail-sub::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.05rem;
  width: 0.5rem;
  border-top: 1px solid var(--lichen);
}
.rail-sub.is-current { font-weight: 600; }
.rail-sub.is-current::before {
  top: 0.45rem;
  bottom: 0.45rem;
  left: -2px;
  width: 0;
  border-top: 0;
  border-left: 4px solid var(--stock);
}
a.rail-title { text-decoration: none; }
a.rail-title:hover { text-decoration: underline; text-decoration-color: currentColor; }
.rail-facts {
  display: grid;
  gap: 0.5rem;
  margin-top: 1rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--rule);
}
.rail-fact {
  display: grid;
  grid-template-columns: 5.75rem minmax(0, 1fr);
  gap: 0.6rem;
  align-items: baseline;
  font-size: 1rem;
  line-height: 1.4;
}
.rail-fact dt { color: var(--lichen-hi); }
.core-steps {
  display: grid;
  gap: 0.85rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
}
.core-nav {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  text-decoration: none;
}
.core-nav-dir { font-size: 0.9375rem; color: var(--lichen-hi); }
.core-nav-title { font-size: 1.0625rem; font-weight: 500; line-height: 1.35; }
a.core-nav:hover .core-nav-title { text-decoration: underline; text-decoration-color: currentColor; text-underline-offset: 0.2em; }
.core-end .core-nav-title { font-weight: 400; color: var(--lichen); }

/* ---------------------------------------------------------------- subsection: leg strip */

.legs { padding-block: clamp(1.75rem, 3.5vw, 2.5rem); }
.legs-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 3.5rem minmax(0, 1fr) 3.5rem minmax(0, 1fr);
  gap: 1rem 0.75rem;
}
.leg { min-width: 0; }
.leg-head {
  margin-bottom: 0.6rem;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.3;
}
.leg-arrow { --arrow-y: 0.75rem; }
.leg-this-title { font-size: 1.2rem; font-weight: 500; line-height: 1.35; }
.leg-this-title .core-step { margin-right: 0.35em; }
.leg-links li + li { margin-top: 0.45rem; }
.leg-none { color: var(--lichen); }
.sub-link { text-decoration: none; line-height: 1.35; }
.sub-link .core-step { margin-right: 0.35em; }
.sub-link-title {
  text-decoration: underline;
  text-decoration-color: var(--rule-link);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: text-decoration-color 0.15s ease;
}
.sub-link:hover .sub-link-title { text-decoration-color: currentColor; }
.sub-link-in { font-size: 0.9em; color: var(--lichen); }

/* ---------------------------------------------------------------- subsection: body */

.summary {
  margin-bottom: clamp(2rem, 4vw, 3rem);
  font-size: clamp(1.3rem, 1.05rem + 0.9vw, 1.8rem);
  line-height: 1.4;
  text-wrap: pretty;
}

.competencies-band { border-top-color: var(--rule); }
.competencies {
  display: grid;
  gap: 1.5rem clamp(1.5rem, 3.5vw, 3rem);
}
.competencies.cols-1 { grid-template-columns: minmax(0, 1fr); }
.competencies.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.competencies.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.competencies.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.competencies li {
  border-top: 1px solid var(--rule);
  padding-top: 1rem;
  font-size: 1.1rem;
  line-height: 1.5;
}
/* A self-test box: the learner ticks it in their head, nothing is stored. */
.competencies li::before {
  content: "";
  display: block;
  width: 0.85rem;
  height: 0.85rem;
  margin-bottom: 0.85rem;
  border: 1.5px solid var(--lichen);
  border-radius: 1px;
}

/* The drill: an inset field, darker than the band around it, its top and
   left edges in shadow tone and its bottom edge catching light, drawn with
   1px rules. */
.drill-field {
  padding: clamp(1.25rem, 3vw, 2rem) clamp(1.1rem, 3vw, 2.25rem) clamp(1.35rem, 3vw, 2.1rem);
  background: var(--inset);
  border: 1px solid var(--rule-deep);
  border-top-color: var(--shade);
  border-left-color: var(--shade);
}
.drill-head {
  margin-bottom: 0.85rem;
  font-size: clamp(1.35rem, 1.1rem + 0.7vw, 1.7rem);
  font-weight: 600;
  line-height: 1.2;
  color: var(--fault-text);
}
.drill-text {
  max-width: 88ch;
  font-family: var(--mono);
  font-size: clamp(0.98rem, 0.88rem + 0.35vw, 1.18rem);
  font-variant-numeric: normal;
  line-height: 1.7;
}
.drill-text code {
  font-size: 1em;
  font-weight: 500;
  padding: 0 0.2em;
  background: var(--oxide);
}

/* Start here: the one next step, framed as a raised panel across the width,
   the pick's title and source on the left and why it comes first beside it. */
.res-start {
  margin-bottom: clamp(2rem, 4vw, 3rem);
  padding: clamp(1.25rem, 2.6vw, 1.9rem) clamp(1.1rem, 2.8vw, 2.25rem) clamp(1.35rem, 2.8vw, 2rem);
  background: var(--panel);
  border: 1px solid var(--rule-strong);
  border-left: 4px solid var(--stock);
}
.res-start-head {
  margin-bottom: 0.9rem;
  font-size: clamp(1.35rem, 1.1rem + 0.7vw, 1.7rem);
}
.res-pick {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: auto auto 1fr;
  column-gap: clamp(1.5rem, 4vw, 3.5rem);
}
.res-pick > :not(.res-why) { grid-column: 1; }
.res-pick .res-why {
  grid-column: 2;
  grid-row: 1 / -1;
  margin-top: 0;
}

.res-grid {
  display: grid;
  gap: 2.25rem clamp(1.75rem, 4vw, 3.5rem);
  align-items: start;
}
.res-grid.cols-1 { grid-template-columns: minmax(0, 1fr); }
.res-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.res-col {
  border-top: 1px solid var(--rule-strong);
  padding-top: 1.1rem;
}
.res-head {
  margin-bottom: 1.1rem;
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 1.25;
}
.res-col > .res + .res {
  margin-top: 1.4rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--rule);
}
.res { max-width: 60ch; }
.res-kind {
  margin-bottom: 0.15rem;
  font-size: 0.9375rem;
  color: var(--lichen-hi);
}
.res-title {
  font-size: 1.3rem;
  font-weight: 500;
  line-height: 1.25;
}
.res-meta {
  margin-top: 0.35rem;
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--lichen-hi);
}
.res-why {
  margin-top: 0.55rem;
  font-size: 1.0625rem;
  line-height: 1.55;
}
.res-pick { max-width: none; }
.res-pick .res-title {
  font-size: clamp(1.55rem, 1.2rem + 1vw, 2.1rem);
  line-height: 1.15;
}
.res-pick .res-meta { margin-top: 0.5rem; font-size: 1.0625rem; }
.res-pick .res-why { font-size: 1.1875rem; line-height: 1.55; }

.res-sources { margin-top: clamp(2.5rem, 4.5vw, 3.25rem); }
.sources-grid {
  display: grid;
  gap: 1.5rem clamp(1.75rem, 4vw, 3.5rem);
  border-top: 1px solid var(--rule-strong);
}
.sources-grid .res { padding-top: 1.1rem; }
.sources-grid.cols-1 .res {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.8fr);
  column-gap: clamp(1.5rem, 3.5vw, 3rem);
  max-width: none;
}
.sources-grid.cols-1 .res-kind,
.sources-grid.cols-1 .res-title { grid-column: 1; }
.sources-grid.cols-1 .res-why { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; max-width: 64ch; }
.sources-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sources-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ---------------------------------------------------------------- responsive */

/* Section names leave the map below this width, where the narrowest
   segments could no longer hold them at 15px; the numerals stay. */
@media (max-width: 1180px) {
  .cmap-name {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

@media (max-width: 1100px) {
  :root { --step-w: 4.5rem; }
  .competencies.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  :root { --step-w: 4.25rem; --cmap-gap: 0.4rem; }
  .argument-cols,
  .contents-intro-grid,
  .handoff-intro { grid-template-columns: minmax(0, 1fr); }
  .contents-intro-grid { align-items: start; }
  .section-lead-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "id"
      "map"
      "why";
    gap: 1.5rem;
    align-items: start;
  }

  /* Division of labor, stacked: each agent action reads as a sentence, and
     the arrow turns down into the line that marks what you own. */
  .handoff-cols { display: none; }
  .handoff-group {
    display: block;
    padding-bottom: 0.5rem;
  }
  .handoff-act { padding: 1.4rem 0 0.4rem; }
  .act-short { display: none; }
  .handoff-row { display: block; }
  .handoff-row + .handoff-row {
    margin-top: 0.9rem;
    padding-top: 0.9rem;
  }
  .handoff-catch { padding-block: 0; }
  .handoff-arrow {
    height: 1.75rem;
    min-width: 0;
  }
  .handoff-arrow::before {
    left: 0;
    right: auto;
    top: 0.35rem;
    bottom: 10px;
    transform: none;
    border-top: 0;
    border-left: 2px solid var(--lichen);
  }
  .handoff-arrow::after {
    left: -5px;
    right: auto;
    top: auto;
    bottom: 0;
    transform: none;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 11px solid var(--lichen);
    border-bottom: 0;
  }
  .owned { padding: 0.35rem 0 0.35rem 1rem; }

  .section-why-col {
    border-left: 0;
    padding-left: 0;
  }

  .chart-head { grid-template-columns: var(--step-w) minmax(0, 1fr); gap: 0.35rem 1rem; padding-left: calc(0.7rem + 2px); }
  .chart-tagline { grid-column: 2; }
  .entries > li {
    grid-template-columns: var(--step-w) minmax(0, 1fr);
    grid-template-areas:
      "step title"
      ". catch"
      ". depth";
    grid-template-rows: auto;
    row-gap: 0.35rem;
    column-gap: 1rem;
    padding-left: 0.7rem;
  }
  .sub-rows > li {
    grid-template-columns: var(--step-w) minmax(0, 1fr);
    grid-template-areas:
      "step body"
      ". depth";
    row-gap: 0.55rem;
    padding-left: 0.7rem;
  }
  .sub-row-main { grid-template-columns: minmax(0, 1fr); }

  .catch-grid { grid-template-columns: minmax(0, 1fr); gap: 2rem; }

  .legs-grid { grid-template-columns: minmax(0, 1fr); gap: 0.6rem; }
  .leg-arrow {
    height: 1.75rem;
    min-width: 0;
  }
  .leg-arrow::before {
    left: 0.5rem;
    right: auto;
    top: 0.2rem;
    bottom: 10px;
    transform: none;
    border-top: 0;
    border-left: 2px solid var(--lichen);
  }
  .leg-arrow::after {
    left: calc(0.5rem - 5px);
    right: auto;
    top: auto;
    bottom: 0;
    transform: none;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 11px solid var(--lichen);
    border-bottom: 0;
  }

  .competencies.cols-2,
  .competencies.cols-3,
  .competencies.cols-4 { grid-template-columns: minmax(0, 1fr); }
  .res-grid.cols-2 { grid-template-columns: minmax(0, 1fr); }
  .res-pick { grid-template-columns: minmax(0, 1fr); }
  .res-pick .res-why { grid-column: 1; grid-row: auto; margin-top: 0.7rem; }
  .sources-grid.cols-2,
  .sources-grid.cols-3 { grid-template-columns: minmax(0, 1fr); }
  .sources-grid.cols-1 .res { display: block; }
  .sources-grid.cols-1 .res-why { margin-top: 0.5rem; }
  .rows .row { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 560px) {
  body { font-size: 1.0625rem; }
  .masthead-row { padding-block: 0.75rem; }
  .pager-grid { gap: 1rem; }
  .cmap { padding: 0.8rem 0.7rem 0.75rem; }
  .cmap-tick { height: 1.85rem; }
  .cmap-tick::before { height: 0.7rem; }
  .cmap-tick.is-core::before { height: 1.2rem; }
  .cmap-key { gap: 0.4rem 1.1rem; }
  .finding { grid-template-columns: 1.1rem minmax(0, 1fr); column-gap: 0.6rem; }
  .finding-text { padding-left: 0.95rem; }
}

.nowrap { white-space: nowrap; }