/* Block-driven Tentative candidate. The shared Lab429 stylesheet supplies the base
   typography, navigation, project-page rhythm, and colour system. */

.candidate-ribbon {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 9px 32px;
  background: var(--blue);
  color: var(--white);
  font-size: 11px;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.candidate-ribbon span:last-child { opacity: .72; }

/* ==========================================================================
   Published top part — opening, argument, five principles.
   Ported from experiments/home-top-options (opening 5, "Ink turn" middle).
   ========================================================================== */

/* a shade lighter and less yellow than #f4f3ef, which reads beige beside the ink */
:root { --paper: #f7f6f4; }

/* the site header sits inside the ink opening on this page */
body.top-ink-header .site-header {
  position: absolute;
  inset: 0 0 auto;
  z-index: 30;
  min-height: 96px;
  background: transparent;
  backdrop-filter: none;
  border-bottom: 1px solid rgba(255, 255, 255, .16);
  grid-template-columns: 1fr auto auto;
  column-gap: clamp(20px, 3vw, 42px);
}
body.top-ink-header .site-header nav a { color: #b6b6ae; font-size: 12.5px; }
body.top-ink-header .site-header nav a:hover { color: var(--white); }
body.top-ink-header .site-header .header-link { color: var(--white); border-bottom-color: rgba(255, 255, 255, .7); }

/* the drawn marks: solid shapes take the text colour, cut-outs take the ground */
.top-mark { display: block; --mark-bg: var(--ink); color: var(--white); }
.top-mark svg { display: block; width: auto; height: 100%; }
.top-mark svg path, .top-mark svg rect { fill: currentColor; }
.top-mark svg [style*="fill:white"] { fill: var(--mark-bg) !important; }
.top-mark-wordmark { height: 40px; }
.top-mark-triangles { height: clamp(48px, 5vw, 68px); }

/* ---------- the opening ---------- */
.top-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(128px, 17vh, 200px) 0 clamp(74px, 10vh, 112px);
  background: var(--ink);
  color: var(--white);
}
.top-hero .section-shell { position: relative; z-index: 2; }
.top-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: .5;
  background-image:
    linear-gradient(rgba(255, 255, 255, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .055) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: linear-gradient(to bottom, black 40%, transparent);
}
.top-hero::after {
  content: '';
  position: absolute;
  top: -60%;
  bottom: -60%;
  left: -40%;
  width: 34%;
  z-index: 1;
  transform: rotate(14deg);
  background: linear-gradient(90deg,
    transparent,
    rgba(255, 255, 255, .075) 44%,
    rgba(150, 168, 255, .085) 56%,
    transparent);
  animation: top-sweep 26s linear infinite;
}
@keyframes top-sweep { 0% { left: -40%; } 100% { left: 118%; } }
@media (prefers-reduced-motion: reduce) { .top-hero::after { animation: none; } }

.top-rule { display: flex; align-items: center; margin-bottom: 34px; }
.top-rule-line { flex: 1; height: 2px; background: rgba(255, 255, 250, .8); }

/* the left column needs 559px to keep "multipliers — not" on one line,
   which an exact half misses by nine pixels */
.top-split {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: clamp(36px, 5vw, 96px);
  align-items: end;
}
.top-split h1 {
  max-width: none;
  margin: 0;
  color: var(--white);
  font-size: clamp(2.6rem, 5.8vw, 5.4rem);
  font-weight: 480;
  line-height: .97;
  letter-spacing: -.07em;
}
.top-card { padding-bottom: 14px; }
.top-lockup { display: flex; align-items: center; gap: clamp(16px, 1.6vw, 24px); }
.top-card-name {
  margin: 0;
  color: #cfcfc7;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.32;
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
}
.top-card-subtitle {
  max-width: 42ch;
  margin: 30px 0 0;
  color: #d3d3cb;
  font-size: clamp(1.05rem, 1.3vw, 1.26rem);
  line-height: 1.42;
}

/* ---------- the bands ---------- */
.top-band { padding: 80px 0 88px; }
.top-paper { background: var(--paper); color: var(--ink); }
.top-ink { background: var(--ink); color: var(--white); }
.top-band-tall { padding: 104px 0 110px; }
/* A third ground between paper and ink. Used to break a long run of white bands
   without spending the full contrast of an ink band on a section that does not
   carry the page's main claim. */
.top-band.alt-fog { background: #eceae4; color: var(--ink); }
.top-band.alt-fog + .top-band.top-paper,
.top-band.top-paper + .top-band.alt-fog { padding-top: 76px; }
.alt-fog .flow-figure .visual-open,
.alt-fog .code-sample pre { background: var(--white); }

.top-beat { margin-bottom: 48px; }
.top-beat:last-child { margin-bottom: 0; }
.top-say { max-width: 26ch; margin: 0 0 18px; font-size: clamp(1.5rem, 2.6vw, 2.2rem); font-weight: 480; line-height: 1.14; letter-spacing: -.045em; }
.top-body { max-width: 64ch; font-size: 16px; line-height: 1.66; color: #4a4a44; }
.top-body p { margin: 0 0 20px; }
.top-body p:last-child { margin-bottom: 0; }
.top-para { max-width: 68ch; margin: 0; font-size: 16.5px; line-height: 1.62; color: #33332e; }
.top-para strong { font-weight: 620; color: var(--ink); }

.top-thesis { max-width: 17ch; margin: 0 0 30px; font-size: clamp(2.2rem, 4.6vw, 4rem); font-weight: 480; line-height: .99; letter-spacing: -.065em; }
.top-ink-body { max-width: 62ch; color: #c8c8c1; font-size: 15.5px; line-height: 1.62; }
.top-ink-body p { margin: 0; }
.top-turn { max-width: 62ch; margin: 32px 0 0; padding-top: 26px; border-top: 1px solid rgba(255, 255, 255, .3); color: #c8c8c1; font-size: 15.5px; line-height: 1.62; }
.top-turn strong { color: var(--lime); font-weight: 500; }

/* ---------- the preview notice ----------
   A small card beside the opening paragraph rather than a banner across the page, so
   it reads as a note about the work instead of an announcement. */
.top-open-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 320px);
  gap: clamp(30px, 4vw, 72px);
  align-items: start;
}
.top-open-row .top-beat { margin-bottom: 0; }

.preview-note {
  padding: 18px 20px 20px;
  border: 1px solid var(--line);
  background: var(--white);
  box-shadow: 0 10px 28px rgba(23, 23, 22, .09);
}
.preview-note p { margin: 0; color: #56564f; font-size: 13.5px; line-height: 1.55; }
.preview-label {
  margin: 0 0 10px !important;
  color: var(--ink) !important;
  font-size: 11px !important;
  font-weight: 620;
  letter-spacing: .16em;
  text-transform: uppercase;
}
/* the waitlist has no destination yet: underlined so it reads as a link, dotted so it
   is visibly not wired up. Make it solid once the waitlist page exists. */
.preview-note a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dotted currentColor;
  padding-bottom: 1px;
}
.preview-note a:hover { color: var(--ink); border-bottom-style: solid; }

@media (max-width: 900px) {
  .top-open-row { grid-template-columns: minmax(0, 1fr); }
  .preview-note { margin-top: 26px; }
}

/* ---------- the highlights strip ----------
   Recent work as a shelf that scrolls sideways, so an impatient reader has somewhere
   to go without the argument being displaced. */
.hl-strip { margin: 42px 0 46px; }
.hl-strip-head { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; margin-bottom: 18px; }
.hl-label { margin: 0; color: var(--muted); font-size: 11px; font-weight: 620; letter-spacing: .16em; text-transform: uppercase; }
.hl-more {
  color: var(--ink);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid rgba(23, 23, 22, .3);
  padding-bottom: 2px;
  white-space: nowrap;
}
.hl-more:hover { border-bottom-color: var(--ink); }

.hl-scroller {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 300px;
  gap: 16px;
  overflow-x: auto;
  padding-bottom: 14px;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
}
.hl-card {
  display: block;
  scroll-snap-align: start;
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--ink);
  text-decoration: none;
  overflow: hidden;
  transition: box-shadow .18s ease, transform .18s ease;
}
.hl-card:hover, .hl-card:focus-visible { box-shadow: 0 12px 30px rgba(23, 23, 22, .12); transform: translateY(-2px); }
.hl-shot { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--paper); }
/* The covers are the articles' own opening figures, so they are fitted whole rather
   than cropped: a diagram cut to a 16:9 slice reads as noise. */
.hl-shot img { display: block; width: 100%; height: 100%; padding: 10px; object-fit: contain; }
.hl-body { display: block; padding: 15px 17px 18px; }
.hl-meta { display: block; color: var(--muted); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.hl-card strong { display: block; margin: 7px 0; font-size: 16px; font-weight: 560; line-height: 1.3; letter-spacing: -.025em; }
.hl-note { display: block; color: #56564f; font-size: 13px; line-height: 1.5; }

@media (prefers-reduced-motion: reduce) {
  .hl-card { transition: none; }
  .hl-card:hover, .hl-card:focus-visible { transform: none; }
}

/* the quiet pill: what this site is, without spending a paragraph on it.
   It scrolls to the block that answers the question. */
.top-pill-row { margin: 0 0 48px; }
.top-pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 16px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: #56564f;
  font-size: 12.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  transition: border-color .18s ease, color .18s ease;
}
.top-pill:hover, .top-pill:focus-visible { border-color: var(--ink); color: var(--ink); }
.top-pill span { font-size: 14px; }

/* #### inside a band: a heading for the points under it, well below the band's
   own statement in weight so the hierarchy reads top-down. */
.top-subhead {
  max-width: 40ch;
  margin: 40px 0 14px;
  font-size: clamp(1.05rem, 1.35vw, 1.25rem);
  font-weight: 620;
  line-height: 1.3;
  letter-spacing: -.02em;
  color: var(--ink);
}
.top-ink .top-subhead { color: var(--white); }
.top-subhead + .top-body, .top-subhead + .top-ink-body { margin-top: 0; }
.top-body ul, .top-body ol { max-width: 62ch; margin: 14px 0 20px; padding-left: 20px; }
.top-body li { margin-bottom: 7px; line-height: 1.55; }
.top-body li:last-child { margin-bottom: 0; }
.top-ink-body ul, .top-ink-body ol { max-width: 60ch; margin: 14px 0 0; padding-left: 20px; }
.top-ink-body li { margin-bottom: 7px; line-height: 1.55; }

/* a screenshot shown in the slide viewer rather than a drawing */
.slide-shot { display: block; width: 100%; max-width: 1100px; height: auto; margin: 0 auto; border: 1px solid var(--line); border-radius: 8px; }

/* ---------- figures placed in the flow ---------- */
.flow-figure, .flow-embed { margin: 44px 0; }
.flow-figure .visual-open {
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--white);
  cursor: zoom-in;
  position: relative;
  overflow: hidden;
}
.flow-figure img { display: block; width: 100%; height: auto; }
.flow-figure .visual-open-label {
  position: absolute;
  right: 12px;
  bottom: 12px;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(23, 23, 22, .82);
  color: var(--white);
  font-size: 11.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity .18s ease;
}
.flow-figure .visual-open:hover .visual-open-label,
.flow-figure .visual-open:focus-visible .visual-open-label { opacity: 1; }
.flow-embed iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--white);
}
.flow-figure figcaption, .flow-embed figcaption {
  max-width: 62ch;
  margin-top: 14px;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.55;
}
/* a figure set beside the prose: it floats to the right and the paragraphs
   after it wrap alongside, dropping below on a narrow screen */
.figure-aside-item { float: right; width: min(42%, 400px); margin: 6px 0 24px clamp(28px, 4vw, 56px); }
.figure-aside-item .flow-figure { margin: 0; }
.figure-narrow { max-width: 640px; margin-inline: auto; }
@media (max-width: 900px) {
  .figure-aside-item { float: none; width: auto; margin: 32px 0; }
}

/* A distilled principle is one short paragraph, so it reads as prose rather than
   splitting into two ragged columns. */
.editorial-copy.editorial-copy-one {
  column-width: auto;
  column-count: 1;
  max-width: 64ch;
  font-size: 16px;
  line-height: 1.66;
}

/* ---------- the figure shelf: every drawing, with its path and snippet ---------- */
.shelf { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: clamp(20px, 2.4vw, 32px); margin-top: 40px; }
.shelf-item { margin: 0; border: 1px solid var(--line); border-radius: 14px; background: var(--white); overflow: hidden; }
.shelf-preview { display: grid; place-items: center; height: 200px; padding: 12px; background: var(--paper); border-bottom: 1px solid var(--line); overflow: hidden; }
.shelf-preview img { max-width: 100%; max-height: 100%; height: auto; }
.shelf-preview.is-page { padding: 0; position: relative; }
.shelf-preview.is-page iframe { width: 200%; height: 400px; border: 0; transform: scale(.5); transform-origin: top left; pointer-events: none; }
.shelf-item figcaption { padding: 16px 18px 18px; }
.shelf-name { margin: 0; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; color: var(--ink); }
.shelf-label { margin: 6px 0 14px; color: var(--muted); font-size: 13px; line-height: 1.45; }
.shelf-path { display: flex; align-items: center; gap: 10px; margin: 0; }
.shelf-path code {
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  white-space: nowrap;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--paper);
  font-size: 11.5px;
  user-select: all;
}
.shelf-copy {
  flex: 0 0 auto;
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: #56564f;
  font: inherit;
  font-size: 11.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
}
.shelf-copy:hover { border-color: var(--ink); color: var(--ink); }
.shelf-copy.is-done { border-color: var(--ink); background: var(--ink); color: var(--white); }
.shelf-snippet { margin-top: 12px; }
.shelf-snippet > summary { color: var(--blue); font-size: 12.5px; cursor: pointer; }
.shelf-standalone { max-width: 720px; margin-top: 24px; }
.shelf-standalone pre, .shelf-snippet pre {
  margin: 10px 0;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--paper);
  font-size: 11.5px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  user-select: all;
}

/* a verbatim sample: a parser definition, a fragment of output */
.code-sample { max-width: 72ch; margin: 32px 0; }
.code-label { margin: 0 0 10px; color: var(--muted); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; }
.code-sample pre {
  margin: 0;
  padding: 18px 20px;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--white);
  color: #33332e;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
  line-height: 1.6;
}
.top-ink .code-sample pre { border-color: rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .04); color: #d7d7d0; }

.top-placeholder { margin-top: 44px; padding-top: 28px; border-top: 1px dashed var(--line); }
.top-placeholder-label { margin: 0 0 18px; color: var(--muted); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; }

/* ---------- the five principles ---------- */
.top-principles-label { margin: 0 0 16px; color: #8f8f88; font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; }
.top-principles-lead { max-width: 54ch; margin: 0 0 46px; color: var(--white); font-size: clamp(1.15rem, 1.7vw, 1.45rem); font-weight: 480; line-height: 1.34; letter-spacing: -.025em; }
.top-principles { display: grid; grid-template-columns: repeat(auto-fit, minmax(186px, 1fr)); gap: clamp(20px, 2.2vw, 32px); margin: 0; padding: 0; list-style: none; }
.top-principles li { padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .28); }
.top-principles li::before { content: ''; display: block; width: 24px; height: 2px; margin-bottom: 16px; background: var(--lime); }
.top-principle-name { margin: 0; color: var(--white); font-size: 1.25rem; font-weight: 500; letter-spacing: -.04em; }
.top-principle-text { margin: 9px 0 0; color: #c8c8c1; font-size: 13.5px; line-height: 1.55; }
.top-status { margin: 46px 0 0; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .25); color: #a3a39b; font-size: 13px; }

/* ---------- alternative homepage drafts A and B ---------- */
.alt-label { color: var(--muted); }
.alt-say-wide { max-width: 32ch; }
.alt-body-wide { max-width: 72ch; }
.alt-body-wide p + p { margin-top: 20px; }
.alt-work-grid { margin-top: 48px; }

/* the lead of a faq block: first line is the heading, the rest is the intro */
.faq-lead { max-width: 62ch; margin: 22px 0 44px; }
.faq-lead p:first-child { margin: 0 0 14px; font-size: clamp(1.6rem, 2.6vw, 2.3rem); font-weight: 480; line-height: 1.1; letter-spacing: -.045em; color: var(--ink); }
.faq-lead p + p { margin: 0; color: #56564f; font-size: 15.5px; line-height: 1.62; }
.alt-lead-ink { color: var(--ink); margin-bottom: 0; }
.alt-band-short { padding: 64px 0 56px; }
.alt-band-joined { padding-top: 0; }
.alt-turn-plain { color: #c8c8c1; }
.alt-turn-plain p { margin: 0; }

.alt-grid { display: grid; gap: clamp(16px, 2vw, 26px); margin-top: 44px; }
.alt-grid-3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.alt-grid-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); max-width: 900px; }
.alt-card { padding: 22px 24px 26px; border: 1px solid var(--line); background: var(--white); }
.alt-card span { display: block; margin-bottom: 18px; color: var(--muted); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.alt-card h3 { margin: 0 0 10px; font-size: 1.1rem; font-weight: 560; letter-spacing: -.02em; }
.alt-card div, .alt-card p { margin: 0; color: #56564f; font-size: 14px; line-height: 1.55; }
.alt-card-failure { border-top: 3px solid var(--ink); }

/* the loop steps, as one connected line */
.alt-loop { margin-top: 38px; }
.alt-loop ul { display: flex; flex-wrap: wrap; gap: 10px 0; margin: 0; padding: 0; list-style: none; }
.alt-loop li { display: flex; align-items: center; color: #33332e; font-size: 14.5px; }
.alt-loop li::after { content: '→'; margin: 0 14px; color: var(--muted); }
.alt-loop li:last-child::after { content: '↻'; color: var(--blue); }

/* the tools, named quietly once */
.alt-tools { max-width: 640px; margin-top: 36px; }
.alt-tools ul { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.alt-tools li { padding: 10px 2px; border-bottom: 1px solid var(--line); color: #56564f; font-size: 14.5px; }

.alt-closing { padding: 90px 0 96px; }
.alt-closing-title { font-size: clamp(1.8rem, 3.2vw, 2.8rem); }
.alt-closing .button-link { margin-top: 34px; }

/* which draft am I looking at */
.alt-tag {
  position: fixed;
  left: 18px;
  bottom: 18px;
  z-index: 50;
  padding: 9px 15px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 254, 250, .94);
  backdrop-filter: blur(12px);
  box-shadow: 0 8px 26px rgba(23, 23, 22, .14);
  color: var(--ink);
  font-size: 12.5px;
  text-decoration: none;
}
.alt-tag:hover { background: var(--ink); color: var(--white); }

/* ---------- project pages, on the same visual system ---------- */
.top-card-project { padding-bottom: 14px; }

/* Product pages carry the AAA mark where the homepage carries it, so a reader who
   arrives from a search result learns what this place is. The pillar number is
   deliberately absent here — it only means something in the context of the homepage. */
.top-card-brand {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.4vw, 20px);
  margin-bottom: 24px;
  padding-bottom: 22px;
  border-bottom: 1px solid rgba(255, 255, 255, .28);
}
.top-card-brand .top-mark { height: clamp(38px, 4vw, 52px); }
.top-card-brand-name {
  margin: 0;
  color: #cfcfc7;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
}
.top-card-role {
  margin: 0 0 22px;
  color: var(--white);
  font-size: clamp(1.15rem, 1.5vw, 1.45rem);
  font-weight: 480;
  letter-spacing: -.03em;
}
.top-card-project .top-card-subtitle { margin-top: 0; }

/* A card beside the opening prose. The body column is held to 64ch, so this sits in the
   space to its right instead of narrowing the reading measure. Below the layout
   breakpoint it stops floating and becomes an ordinary card above the text, where a
   narrow screen has no room beside anything. */
/* This one has to carry weight. A reader who wants the engineering should not have to
   scroll the whole argument to discover that it exists, so the card is given the same
   ink treatment as the primary documentation door lower down: dark against the paper
   band, which reads as an offer rather than a footnote. */
.side-card {
  float: right;
  width: min(34%, 340px);
  margin: 2px 0 26px clamp(30px, 4vw, 60px);
  padding: 26px 28px 28px;
  border: 1px solid var(--ink);
  border-radius: 3px;
  background: var(--ink);
  color: var(--white);
  box-shadow: 0 18px 40px -22px rgba(23, 23, 22, .55);
}
.side-card-label {
  margin: 0 0 16px;
  color: var(--lime);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.side-card-body { color: #d7d6cf; font-size: 15px; line-height: 1.58; }
.side-card-body p { margin: 0 0 12px; }
.side-card-body p:last-child { margin-bottom: 0; }
.side-card-link {
  display: inline-flex;
  align-items: baseline;
  gap: 9px;
  margin-top: 20px;
  padding-bottom: 3px;
  border-bottom: 1px solid rgba(255, 254, 250, .5);
  color: var(--white);
  font-size: 15px;
  font-weight: 550;
  letter-spacing: -.01em;
  text-decoration: none;
  transition: color .18s ease, border-color .18s ease;
}
.side-card-link:hover,
.side-card-link:focus-visible { color: var(--lime); border-color: var(--lime); }
@media (max-width: 900px) {
  .side-card { float: none; width: auto; margin: 0 0 30px; }
}

.project-standing {
  max-width: 74ch;
  margin-top: 44px;
  padding: 24px 26px 26px;
  border: 1px solid var(--line);
  background: var(--white);
}
.project-standing .top-body p { margin: 0 0 14px; }
.project-standing .top-body p:last-child { margin-bottom: 0; }

.project-source {
  max-width: 72ch;
  margin-top: 32px;
  padding-left: 20px;
  border-left: 2px solid var(--line);
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.6;
}
.project-source p { margin: 0 0 12px; }
.project-source p:last-child { margin-bottom: 0; }

.project-limits {
  max-width: 74ch;
  margin-top: 48px;
  padding-top: 26px;
  border-top: 2px solid var(--ink);
}
.project-limits .top-body p { margin: 0 0 14px; }
.project-limits .top-body p:last-child { margin-bottom: 0; }

.alt-ink-body-wide { max-width: 72ch; }
.alt-ink-body-wide p { margin: 0 0 18px; }
.alt-ink-body-wide p:last-child { margin-bottom: 0; }
.alt-ink-body-wide ul, .alt-ink-body-wide ol { margin: 0 0 18px; padding-left: 20px; }
.alt-ink-body-wide li { margin-bottom: 8px; }

.top-principle-text p { margin: 0 0 10px; }
.top-principle-text p:last-child { margin-bottom: 0; }

.project-next-line { display: flex; align-items: baseline; gap: 14px; margin: 34px 0 0; }
.project-next-line span { color: #a3a39b; font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; }
.project-next-line strong { font-size: clamp(1.5rem, 2.4vw, 2.1rem); font-weight: 480; letter-spacing: -.05em; }

/* the older project furniture, re-seated on the new grounds */
.top-band .route-figure { margin-top: 44px; }
.top-band .documentation-door-grid { margin-top: 40px; }
.top-band .slide-viewer-section { margin: 0; }
.top-band .faq-section { padding: 0; width: auto; }

/* ---------- project pages: status, the single control, and loud placeholders ---------- */
.project-status {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 18px;
  max-width: 74ch;
  margin: 0 0 40px;
  padding: 14px 0 15px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.project-status-state { margin: 0; font-size: 12px; font-weight: 560; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }
.project-status-note { color: var(--muted); font-size: 14px; line-height: 1.5; }
.project-status-note p { margin: 0; }
.project-status-link { margin-left: auto; color: var(--blue); font-size: 13px; text-decoration: none; white-space: nowrap; }
.project-status-link:hover { text-decoration: underline; text-underline-offset: 4px; }

.project-action { margin: 52px 0 0; padding: 30px 0 0; border-top: 2px solid var(--ink); }
.project-action .top-body { max-width: 62ch; margin-bottom: 26px; }
.project-action .button-link { margin: 0; }

.project-todo {
  max-width: 74ch;
  margin: 34px 0;
  padding: 20px 22px 22px;
  border: 2px dashed var(--blue);
  background: rgba(96, 115, 214, .05);
}
.project-todo-label { margin: 0 0 12px; color: var(--blue); font-size: 11.5px; font-weight: 620; letter-spacing: .16em; text-transform: uppercase; }
.project-todo-body { color: #46464a; font-size: 14.5px; line-height: 1.6; }
.project-todo-body p { margin: 0 0 10px; }
.project-todo-body p:last-child { margin-bottom: 0; }
.top-ink .project-todo { background: rgba(96, 115, 214, .16); }
.top-ink .project-todo-body { color: #d3d3cb; }
/* The action fence carries its note in .top-body, which is coloured for paper. On an
   ink band that left it almost unreadable, so it matches the band's own prose. */
.top-ink .project-action .top-body { color: #c8c8c1; }

/* ---------- the home.md working draft page ---------- */
.draft-page { padding: 70px 0 130px; }
.draft-page h1 { font-size: clamp(1.9rem, 3vw, 2.6rem); margin: 18px 0 20px; }
.draft-note-lead { max-width: 70ch; color: var(--muted); font-size: 15px; line-height: 1.6; }
.draft-block { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line); max-width: 78ch; line-height: 1.6; }
.draft-id { margin: 0 0 12px; color: var(--blue); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; }

@media (max-width: 980px) {
  .top-split { grid-template-columns: minmax(0, 1fr); gap: 34px; align-items: start; }
  .top-card-name { white-space: normal; }
}

.manual-hero { padding-top: clamp(72px, 11vh, 125px); }
/* Masthead hero: weight from the rule and the demoted eyebrow, not from point size alone. */
.hero-masthead { border-top: 2px solid var(--ink); padding-top: 26px; }
.manual-hero h1 {
  max-width: 20ch;
  margin: 0;
  font-size: clamp(2.6rem, 5.8vw, 5.4rem);
  line-height: .97;
  letter-spacing: -.07em;
}
.hero-masthead-meta { margin-top: 30px; }
.manual-hero .hero-copy { max-width: 620px; }
/* Hero lead: first paragraph is the subtitle, the rest is readable body copy. */
.manual-hero .hero-lead {
  max-width: 660px;
  margin-top: 30px;
  color: #33332e;
  font-size: 17px;
  line-height: 1.6;
}
.manual-hero .hero-lead p { margin: 0; }
.manual-hero .hero-lead p + p { margin-top: 20px; }
.manual-hero .hero-lead p:first-child {
  max-width: 760px;
  margin-bottom: 34px;
  font-size: clamp(1.2rem, 1.7vw, 1.6rem);
  line-height: 1.35;
  letter-spacing: -.01em;
}
.manual-hero .hero-lead strong { font-weight: 620; color: var(--ink); }
.hero-notes {
  max-width: 620px;
  margin-top: 40px;
  padding: 16px 18px;
  border: 1px dashed var(--line);
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}
.hero-notes-label {
  display: block;
  margin-bottom: 10px;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.hero-notes p { margin: 0; }
.hero-notes p + p { margin-top: 10px; }

.elevation-field {
  position: relative;
  flex: 1;
  min-height: 245px;
  margin-top: clamp(44px, 8vh, 88px);
  padding: 28px;
  overflow: hidden;
  border-radius: 18px;
  background: var(--ink);
  color: var(--white);
}

.elevation-field::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: .45;
  background-image:
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 48px 48px;
}

.elevation-label {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  color: #a9aaa3;
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.elevation-lines {
  position: absolute;
  inset: 58px 28px 26px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 9px;
  align-items: end;
}

.elevation-line {
  position: relative;
  min-height: var(--height);
  padding: 14px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 4px 4px 0 0;
  background: linear-gradient(180deg, rgba(96,115,214,.4), rgba(96,115,214,.08));
}

.elevation-line:nth-child(2n) {
  background: linear-gradient(180deg, rgba(217,246,99,.32), rgba(217,246,99,.06));
}

.elevation-line strong {
  position: absolute;
  bottom: 13px;
  left: 13px;
  max-width: calc(100% - 26px);
  font-size: clamp(.68rem, 1.2vw, .88rem);
  font-weight: 520;
  letter-spacing: -.02em;
}

.thesis-section { padding: 155px 0 135px; }
.editorial-aside {
  max-width: 760px;
  margin-top: 30px;
  padding-left: 18px;
  border-left: 2px solid var(--line);
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}
.editorial-aside p { margin: 0; }
.editorial-copy {
  max-width: 1040px;
  margin-top: 54px;
  padding-top: 30px;
  border-top: 1px solid var(--line);
  column-width: 340px;
  column-gap: clamp(34px, 5vw, 68px);
  color: #464640;
  font-size: 15px;
  line-height: 1.68;
}
.editorial-copy p,
.editorial-copy ul,
.editorial-copy ol,
.editorial-copy aside {
  max-width: none;
  margin: 0 0 18px;
  break-inside: avoid;
}
.editorial-copy ul,
.editorial-copy ol { padding-left: 22px; }
.editorial-copy > :last-child { margin-bottom: 0; }
.editorial-copy-dark { border-top-color: rgba(255,255,255,.22); color: #cecec7; }
.thesis-lead {
  display: grid;
  grid-template-columns: 1.05fr .6fr;
  gap: clamp(48px, 10vw, 150px);
  margin-top: 46px;
}

.thesis-lead p {
  margin: 8px 0 0;
  color: #464640;
  font-size: 17px;
  line-height: 1.6;
}
.thesis-lead ul {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
  list-style: none;
}
.thesis-lead li {
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  color: #464640;
  font-size: 15px;
}

.failure-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 90px;
}

.failure-card {
  min-height: 250px;
  padding: 30px;
  border: 1px solid var(--line);
  background: var(--white);
}

.failure-card span,
.spotlight-index,
.work-card small {
  display: block;
  color: var(--muted);
  font-size: 11px;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.failure-card h3 {
  max-width: 470px;
  margin: 54px 0 15px;
  font-size: clamp(1.7rem, 3vw, 2.7rem);
  font-weight: 480;
  letter-spacing: -.055em;
  line-height: 1;
}

.failure-card p { max-width: 520px; margin: 0; color: var(--muted); line-height: 1.55; }

.pillar-band { padding: 135px 0 150px; background: var(--ink); color: var(--white); }
.pillar-band .section-number { color: #aaa9a2; }
.pillar-heading {
  display: grid;
  grid-template-columns: 1.1fr .55fr;
  gap: clamp(48px, 10vw, 150px);
  margin-top: 44px;
}
.pillar-heading p { margin: 8px 0 0; color: #c8c8c1; line-height: 1.58; }
.pillar-list { margin-top: 92px; border-top: 1px solid rgba(255,255,255,.35); }
.pillar-row {
  display: grid;
  grid-template-columns: 70px minmax(210px,.55fr) 1fr auto;
  gap: 25px;
  align-items: center;
  min-height: 128px;
  padding: 22px 0;
  border-bottom: 1px solid rgba(255,255,255,.17);
  color: var(--white);
  text-decoration: none;
  transition: padding .2s ease, background .2s ease;
}
.pillar-row:hover,
.pillar-row:focus-visible { padding-left: 16px; padding-right: 16px; background: rgba(255,255,255,.05); }
.pillar-row > span { color: #a7a79f; font-size: 11px; }
.pillar-row h3 { margin: 0; font-size: clamp(1.45rem, 2.6vw, 2.35rem); font-weight: 480; letter-spacing: -.05em; }
.pillar-row p { max-width: 600px; margin: 0; color: #c7c7c0; font-size: 14px; line-height: 1.52; }
.pillar-row b { color: var(--lime); font-size: 13px; font-weight: 520; }
/* The applied row: a product standing on the five, not a sixth of them. It is detached
   from the numbered run by a gap and a full-strength rule, and its marker is +1 rather
   than 06, so the heading's promise of five places stays true while the reader still
   finds the product in the list where they are already looking. */
.pillar-row-applied {
  margin-top: 34px;
  border-top: 1px solid rgba(255,255,255,.35);
  border-bottom: 1px solid rgba(255,255,255,.35);
}
.pillar-row-applied > span { color: var(--lime); font-size: 12px; letter-spacing: .04em; }
/* The small label sits first in the markup as well as on screen, so a reader hearing the
   row and a reader seeing it get the qualification in the same place — before the claim,
   not after it. */
.pillar-row-applied h3 { display: flex; flex-direction: column; gap: 9px; }
.pillar-row-applied h3 em {
  color: #a7a79f;
  font-size: 11px;
  font-style: normal;
  font-weight: 400;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.pillar-note { max-width: 770px; margin: 46px 0 0; color: #c8c8c1; font-size: 18px; line-height: 1.5; }

.spotlight { padding: 150px 0; }
.spotlight + .spotlight { border-top: 1px solid var(--line); }
.spotlight-head {
  display: grid;
  grid-template-columns: .42fr 1.15fr;
  gap: clamp(40px, 8vw, 120px);
  align-items: start;
}
.spotlight-copy { display: grid; grid-template-columns: 1fr .58fr; gap: clamp(36px, 7vw, 100px); }
.spotlight-copy-single { grid-template-columns: 1fr; }
.spotlight-copy h2 { max-width: 690px; }
.spotlight-copy p { margin: 8px 0 0; color: #464640; line-height: 1.6; }
.spotlight-action { display: inline-block; margin-top: 23px; font-size: 14px; text-underline-offset: 4px; }

.system-scale {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 75px;
}
.scale-stage { min-height: 210px; padding: 24px; border: 1px solid var(--line); background: var(--white); }
.scale-stage:nth-child(3) { background: var(--ink); color: var(--white); }
.scale-stage span { color: var(--muted); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.scale-stage:nth-child(3) span { color: #a3a39b; }
.scale-stage strong { display: block; margin-top: 80px; font-size: clamp(1.25rem, 2vw, 1.8rem); font-weight: 480; letter-spacing: -.04em; }
.scale-stage p { margin: 10px 0 0; color: var(--muted); font-size: 13px; line-height: 1.45; }
.scale-stage:nth-child(3) p { color: #c5c5be; }

.interaction-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 70px; }
.choice-card { padding: 28px; border-top: 1px solid var(--ink); }
.choice-card h3 { margin: 26px 0 13px; font-size: 22px; font-weight: 500; letter-spacing: -.04em; }
.choice-card p { max-width: 500px; margin: 0; color: var(--muted); line-height: 1.55; }
.choice-answer { grid-column: 1 / -1; padding: 36px; background: var(--blue); color: var(--white); }
.choice-answer strong { display: block; max-width: 920px; font-size: clamp(1.65rem, 3vw, 2.7rem); font-weight: 480; letter-spacing: -.05em; line-height: 1.08; }

.signal-board { margin-top: 72px; padding: 26px; border-radius: 7px; background: var(--ink); color: var(--white); }
.signal-board-head { display: flex; justify-content: space-between; color: #a6a69f; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.signal-lanes { margin-top: 30px; }
.signal-lane { display: grid; grid-template-columns: 150px 1fr auto; gap: 18px; align-items: center; min-height: 64px; border-top: 1px solid rgba(255,255,255,.16); }
.signal-lane strong { font-size: 14px; font-weight: 500; }
.signal-track { height: 3px; background: rgba(255,255,255,.12); }
.signal-track i { display: block; width: var(--progress); height: 100%; background: var(--lime); }
.signal-lane span { color: #b8b8b1; font-size: 12px; }

.verification-band { padding: 145px 0; background: #e7e6e0; }
.verification-grid { display: grid; grid-template-columns: .75fr 1.25fr; gap: clamp(50px, 9vw, 130px); margin-top: 46px; }
.verification-grid > p { margin: 8px 0 0; color: #464640; line-height: 1.62; }
.verification-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 75px; }
.verification-mode { min-height: 250px; padding: 30px; background: var(--paper); border: 1px solid var(--line); }
.verification-mode:last-child { background: var(--white); }
.verification-mode span { color: var(--muted); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.verification-mode h3 { margin: 56px 0 14px; font-size: 26px; font-weight: 480; letter-spacing: -.045em; }
.verification-mode p { margin: 0; color: var(--muted); line-height: 1.55; }

.method-band { padding: 135px 0; background: var(--blue); color: var(--white); }
.method-band .section-number { color: rgba(255,255,255,.65); }
.method-band h2 { max-width: 800px; margin-top: 43px; }
.method-steps { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 76px; border-top: 1px solid rgba(255,255,255,.45); }
.method-step { min-height: 240px; padding: 22px 28px 20px 0; border-right: 1px solid rgba(255,255,255,.3); display: flex; flex-direction: column; justify-content: space-between; }
.method-step + .method-step { padding-left: 28px; }
.method-step:last-child { border-right: 0; }
.method-step span { font-size: 11px; opacity: .66; }
.method-step strong { display: block; font-size: 29px; font-weight: 480; letter-spacing: -.05em; }
.method-step p { max-width: 290px; margin: 10px 0 0; color: rgba(255,255,255,.8); font-size: 14px; line-height: 1.5; }

.work-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin-top: 80px; }
.work-card { min-height: 270px; padding: 26px; border: 1px solid var(--line); background: var(--white); text-decoration: none; display: flex; flex-direction: column; }
.work-card:hover { border-color: var(--ink); }
.work-card h3 { margin: auto 0 12px; font-size: clamp(1.7rem, 2.6vw, 2.45rem); font-weight: 480; letter-spacing: -.055em; }
.work-card p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
.work-card b { margin-top: 22px; font-size: 13px; font-weight: 500; }

.candidate-closing { background: var(--ink); color: var(--white); border-top: 0; }
.candidate-closing .section-number { color: #aaa9a2; }
.candidate-closing h2 { max-width: 800px; margin: 46px 0 35px; }
.candidate-closing p:not(.section-number) { max-width: 610px; color: #c9c9c2; font-size: 17px; line-height: 1.53; }
.candidate-closing .button-link { background: var(--lime); color: var(--ink); }

.draft-directions { padding: 145px 0; border-top: 1px solid var(--line); }
.draft-directions h2 { max-width: 800px; margin-top: 44px; }
.draft-directions .editorial-copy { margin-top: 60px; }

/* Candidate project pages */
.candidate-project-hero { padding-top: clamp(82px, 12vh, 145px); }
.candidate-project-hero .project-summary > div:last-child { color: var(--muted); line-height: 1.55; }
.candidate-status { margin-top: 62px; padding: 25px 30px; border: 1px solid var(--line); background: var(--white); }
.candidate-status .section-label { display: block; margin-bottom: 12px; color: var(--blue); }
.candidate-status p { max-width: 760px; margin: 0; color: #464640; line-height: 1.58; }
.candidate-status p + p { margin-top: 12px; }

.narrative-block { display: grid; grid-template-columns: .55fr 1fr; gap: clamp(45px, 9vw, 130px); padding: 0 0 110px; }
.narrative-block + .narrative-block { padding-top: 110px; border-top: 1px solid var(--line); }
.narrative-block .section-label { display: block; margin-bottom: 18px; color: var(--muted); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.narrative-block h2 { font-size: clamp(2.2rem, 3.8vw, 4rem); }
.narrative-copy p { max-width: 680px; margin: 0 0 21px; color: #464640; font-size: 17px; line-height: 1.62; }

.capability-list { margin: 50px 0 0; border-top: 1px solid var(--ink); }
.capability { display: grid; grid-template-columns: 55px .58fr 1fr; gap: 22px; padding: 24px 0; border-bottom: 1px solid var(--line); }
.capability > span { color: var(--muted); font-size: 11px; padding-top: 5px; }
.capability h3 { margin: 0; font-size: 20px; font-weight: 500; letter-spacing: -.035em; }
.capability p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.55; }

.memory-figure { margin: 56px 0 0; padding: 30px; border: 1px solid var(--line); background: var(--white); }
.memory-row { display: grid; grid-template-columns: 140px 1fr; gap: 22px; align-items: center; min-height: 94px; }
.memory-row + .memory-row { border-top: 1px solid var(--line); }
.memory-row > span { color: var(--muted); font-size: 11px; letter-spacing: .07em; text-transform: uppercase; }
.memory-track { display: flex; align-items: center; gap: 7px; }
.memory-track i { width: 14px; height: 14px; border-radius: 50%; background: #c9c8c1; }
.memory-track i.gap { width: 34px; height: 1px; border-radius: 0; background: var(--line); }
.memory-track.accumulating i { background: var(--blue); }
.memory-track.accumulating i:nth-child(3),
.memory-track.accumulating i:nth-child(5) { width: 36px; height: 3px; border-radius: 0; background: var(--lime); }
.memory-figure figcaption { margin-top: 18px; color: var(--muted); font-size: 13px; line-height: 1.5; }

.route-figure { margin-top: 58px; }
.route-stages { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; }
.route-stage { min-height: 150px; padding: 20px; border: 1px solid var(--line); background: var(--white); }
.route-stage:last-child { background: var(--ink); color: var(--white); }
.route-stage span { color: var(--muted); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.route-stage:last-child span { color: #a3a39b; }
.route-stage strong { display: block; margin-top: 58px; font-size: 16px; font-weight: 500; letter-spacing: -.025em; }
.route-figure figcaption { margin-top: 16px; color: var(--muted); font-size: 13px; line-height: 1.5; }

/* ---------- ways in (::: ways) ----------
   Two panels side by side, each with its own control. Built for the contact page: the
   reader picks the door that matches them, and the mail arrives already saying which.
   Sized to sit on an ink band, where the lime control is the one bright thing. */
.way-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin-top: 48px; background: rgba(255, 254, 250, .2); }
.way { display: flex; flex-direction: column; padding: 34px 34px 32px; background: var(--ink); }
.way-eyebrow { margin: 0 0 12px; color: #a8a89f; font-size: 11px; font-weight: 620; letter-spacing: .14em; text-transform: uppercase; }
.way-title { max-width: 26ch; margin: 0 0 14px; color: var(--white); font-size: clamp(1.18rem, 1.7vw, 1.5rem); font-weight: 500; line-height: 1.22; letter-spacing: -.022em; }
.way-note { margin: 0 0 26px; color: #c8c8c1; font-size: 14.5px; line-height: 1.62; }
.way-note p { margin: 0 0 10px; }
.way-note p:last-child { margin-bottom: 0; }
.way .cta { align-self: flex-start; margin-top: auto; }

/* On paper the same panels keep their frame but invert their colours. */
.top-paper .way-grid { background: var(--line); border: 1px solid var(--line); }
.top-paper .way { background: var(--paper); }
.top-paper .way-eyebrow { color: var(--muted); }
.top-paper .way-title { color: var(--ink); }
.top-paper .way-note { color: var(--muted); }

/* ---------- calls to action ----------
   A real control, not a bordered sentence. The primary carries the site's lime, so it
   is the one thing on an ink band that is unmistakably clickable; the second is quiet,
   because most people want the first. Neither ever prints an address as its label. */
.cta {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 15px 21px; border: 1px solid transparent; border-radius: 4px;
  color: var(--ink); font-size: 14.5px; font-weight: 560; letter-spacing: -.01em;
  text-decoration: none;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.cta b { font-weight: 500; }
.cta-primary { background: var(--lime); color: var(--ink); }
.cta-primary:hover { background: #cbe94f; }
.cta-quiet { color: var(--white); border-color: rgba(255, 254, 250, .38); }
.cta-quiet:hover { border-color: var(--white); background: rgba(255, 254, 250, .1); }
.top-paper .cta-quiet { color: var(--ink); border-color: rgba(23, 23, 22, .3); }
.top-paper .cta-quiet:hover { border-color: var(--ink); background: rgba(23, 23, 22, .05); }

@media (max-width: 860px) {
  .way-grid { grid-template-columns: 1fr; }
  .way .cta { align-self: stretch; }
}

.documentation-door-grid a { text-decoration: none; }
/* The grid draws its dividing rules with a background behind 1px gaps, so an odd
   number of doors leaves the last cell showing as a grey block. The odd one out
   spans the row instead. */
.documentation-door-grid > :last-child:nth-child(odd) { grid-column: 1 / -1; }

/* ---------- screenshot strip (::: screens) ----------
   The quiet counterpart to the featured slide viewer: it shows real screens of a
   product without claiming the space a chapter would. Everything is held to one
   16/9 frame and fitted inside it, so a tall capture and a wide one can sit in the
   same strip without changing its height. */
.screen-strip { margin: 96px 0 0; padding-top: 34px; border-top: 1px solid var(--line); }
/* Opening its band rather than following prose inside one: the band already supplies the
   space above, and the rule would be drawn against nothing. This is what lets a strip be
   used as an early teaser without a screen of emptiness over it. */
.section-shell > .screen-strip:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.screen-strip-heading { max-width: 760px; }
.screen-strip-heading .section-label { display: block; margin-bottom: 12px; color: var(--blue); }
.screen-strip-heading h2 { max-width: 640px; font-size: clamp(1.5rem, 2.4vw, 2.15rem); line-height: 1.08; }
.screen-strip-heading > div { max-width: 640px; margin-top: 16px; color: var(--muted); font-size: 15px; line-height: 1.6; }
.screen-strip-heading p { margin: 0 0 12px; }
.screen-strip-heading p:last-child { margin-bottom: 0; }

/* The strip stands on a plate of its own, with the ink band above it and the control
   deck below. Before that it had no edges, and a reader met a picture rather than a
   set of twelve they could step through. */
.screen-strip-frame {
  max-width: 940px;
  margin-top: 30px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--white);
}
.screen-strip-viewer { position: relative; }
/* One screen fills the strip and the next one snaps into place. Without scripting
   this stays an ordinary scrollable strip, which is why the track — not a button —
   is what actually moves. */
.screen-strip-track {
  display: flex;
  gap: 26px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  padding: 0 20px 4px;
}
/* Once the deck is there, the scrollbar is one signal too many. */
.screen-strip-viewer.is-enhanced .screen-strip-track { scrollbar-width: none; }
.screen-strip-viewer.is-enhanced .screen-strip-track::-webkit-scrollbar { display: none; }
.screen-shot { flex: 0 0 100%; scroll-snap-align: center; margin: 0; }
.screen-frame {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 6px;
  background: var(--white);
}
/* contain, not cover: a screenshot that is cropped to fill the frame stops being
   evidence of anything. Captures that are not 16/9 keep a margin instead. */
.screen-frame img { width: 100%; height: 100%; object-fit: contain; object-position: center; }
.screen-shot figcaption {
  min-height: 3.4em;
  max-width: 62ch;
  margin-top: 13px;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.55;
}
/* With the band above carrying the caption, keeping it under the picture as well
   would say everything twice. Without scripting the band is not there, and this is
   the only caption the reader gets. */
.screen-strip-viewer.is-enhanced .screen-shot figcaption { display: none; }

/* The band and the deck are offered only once scripting has confirmed it can move
   the strip. */
.screen-bar, .screen-console { display: none; }
.screen-strip-frame.is-enhanced .screen-bar { display: flex; }
.screen-strip-frame.is-enhanced .screen-console { display: flex; }

.screen-bar {
  align-items: center;
  gap: 16px;
  padding: 12px 16px 12px 18px;
  border-radius: 4px 4px 0 0;
  background: var(--ink);
  color: var(--white);
}
.screen-bar-caption {
  min-height: 2.9em;
  display: flex;
  align-items: center;
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
}

.screen-console {
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  padding: 12px 16px;
  border-top: 1px solid var(--line);
  background: var(--paper);
  border-radius: 0 0 4px 4px;
}
.screen-console-nav { display: flex; gap: 8px; }
.screen-console .slide-enlarge { margin-left: auto; }

@media (max-width: 900px) {
  .screen-strip { margin-top: 72px; }
  .screen-strip-track { padding-inline: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .screen-strip-track { scroll-behavior: auto; }
}

/* Featured slide viewer */
.slide-viewer-section { margin: 0 0 110px; padding: 105px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.slide-section-heading { max-width: 850px; }
.slide-section-heading .section-label { display: block; margin-bottom: 18px; color: var(--blue); }
.slide-section-heading h2 { max-width: 780px; font-size: clamp(2.45rem, 4.7vw, 5.2rem); }
.slide-section-heading > div { max-width: 680px; margin-top: 25px; color: var(--muted); font-size: 17px; line-height: 1.58; }
.slide-section-heading p { margin: 0; }

.featured-slide-viewer { margin-top: 52px; border: 1px solid var(--line); border-radius: 4px; background: var(--white); outline: none; }
.featured-slide-viewer:focus-visible { box-shadow: 0 0 0 3px rgba(80,99,201,.25); }

/* ---------- the ink band ----------
   The site already uses an ink band for its own voice, and a widget wearing one is
   read as machinery rather than as an illustration dropped into the prose. It names
   the figure, states the position, and gives the figure's code somewhere to live
   that is not on top of the drawing. */
.slide-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 16px 12px 18px;
  border-radius: 4px 4px 0 0;
  background: var(--ink);
  color: var(--white);
}
.slide-bar-text { flex: 1 1 auto; min-width: 0; }
.slide-bar-text h3 { margin: 0; font-size: 14.5px; font-weight: 600; letter-spacing: -.01em; line-height: 1.3; }
.slide-bar-text p { margin: 2px 0 0; color: rgba(255, 254, 250, .62); font-size: 12.5px; line-height: 1.35; }
.slide-bar-code { flex: 0 0 auto; color: rgba(255, 254, 250, .55); font-size: 10.5px; font-weight: 600; letter-spacing: .12em; }
@media (max-width: 760px) { .slide-bar-code { display: none; } }

/* One counter, in the one place the eye lands first. Lime on ink is the loudest pair
   the site owns, and a position is exactly what a reader needs loudest here. */
.slide-bar-count,
.screen-bar-count {
  flex: 0 0 auto;
  padding: 4px 10px;
  border-radius: 3px;
  background: var(--lime);
  color: var(--ink);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .06em;
}

/* The stage clips its own contents. Without this the slide-in transform counts as
   scrollable overflow, a horizontal scrollbar flashes for the length of the
   animation, and the whole page shifts down and back under the cursor. */
.featured-slide-stage { position: relative; background: var(--white); overflow: hidden; }
.featured-slide-scroll { overflow: hidden; }
.featured-slide-viewer.mode-wide .featured-slide-scroll { overflow-x: auto; scrollbar-width: thin; }

/* The 25 figures do not share one aspect ratio — they run from 1.20 to 1.94.
   Forcing a single ratio on the box cropped the tall ones (v09 lost 177px) and
   cropped every table figure, which has no intrinsic ratio at all. The box now
   follows each figure instead, and narrow screens scroll horizontally the way
   the project's own presentation does. */
/* The stage keeps one height for every figure, so the page never moves under the
   cursor between slides. Inside it, an SVG's own preserveAspectRatio does the
   fitting: the drawing scales down until it fits and the spare axis stays empty. */
/* The drawing is pinned to the frame's inner edges. Flex centring with a percentage
   max-height measured as correct and still pushed the figure 56px down and out of
   the bottom; pinning all four sides takes every percentage and every flex sizing
   rule out of the path, and preserveAspectRatio does the fitting and the centring. */
.featured-slide-figure {
  position: relative;
  width: 100%;
  height: clamp(440px, 62vh, 760px);
  padding: 0;
  border: 0;
  border-radius: 0;
  overflow: hidden;
}
/* Both dimensions are given explicitly. An absolutely positioned replaced element
   with height:auto ignores `bottom` and takes its intrinsic height instead, which is
   what kept the drawing taller than its frame. */
.featured-slide-viewer .featured-slide-figure > svg {
  position: absolute;
  top: 16px;
  left: 20px;
  display: block;
  width: calc(100% - 40px);
  height: calc(100% - 36px);
  max-width: none;
  max-height: none;
}

/* Tables are text, not drawings — scaling them to fit would make them unreadable,
   so they scroll inside the frame. The gutter is reserved so the scrollbar
   appearing never changes the layout around it. */
/* The wrapper keeps its natural width and is centred by flex; scaling about its
   own top-centre then leaves the shrunk table centred in the frame. */
/* The table wrapper is pinned the same way, centred horizontally, and scaled about
   its own top-centre so the shrunk table sits centred in the frame. */
.featured-slide-figure .table-fit {
  position: absolute;
  top: 16px;
  left: 50%;
  transform-origin: top center;
  width: max-content;
  max-width: none;
  translate: -50%;
}
.featured-slide-viewer.mode-wide .featured-slide-figure.is-table-figure { overflow-x: auto; }

/* Full-width mode: let the figure take the whole column and run past the frame
   height, for a reader who would rather scroll than squint. */
.featured-slide-viewer.mode-wide .featured-slide-figure { height: auto; overflow: visible; padding: 16px 20px 20px; }
/* In flow, not pinned — an absolutely positioned wrapper adds no height, so an
   auto-height frame would collapse and the table would hang out of it. */
.featured-slide-viewer.mode-wide .featured-slide-figure .table-fit {
  position: static;
  translate: none;
  transform: none;
  width: 100%;
}
.featured-slide-viewer.mode-wide .featured-slide-figure.is-table-figure { overflow-x: auto; }
.featured-slide-viewer.mode-wide .featured-slide-figure > svg { height: auto; min-width: 880px; }

/* …but "the whole column" turned out to mean 1180 x 1072, which is taller than a
   laptop screen: the reader could never see one figure and its explanation at the
   same time, and it towered over the screenshot strip further down the same page.
   Two limits fix that. The width keeps the widget close to the strip's, so the page
   reads as one thing rather than a slide deck with a gallery bolted underneath. The
   height leaves room for the title above and the note below on a short screen — the
   drawing scales itself down to fit, which is what preserveAspectRatio is for. */
.featured-slide-viewer { max-width: 940px; }
.featured-slide-viewer.mode-wide .featured-slide-figure > svg {
  width: auto;
  min-width: 0;
  max-width: 100%;
  max-height: min(52vh, 470px);
  margin-inline: auto;
}
/* Below the site's layout breakpoint the old behaviour is still the right one: a
   dense figure stays at a readable size and the frame scrolls sideways, rather than
   shrinking until nothing in it can be read. */
@media (max-width: 850px) {
  .featured-slide-viewer.mode-wide .featured-slide-figure > svg { min-width: 880px; max-height: none; }
}

/* A real page turn: the old figure leaves, the new one arrives from the other side.
   The outgoing copy is absolutely placed inside the stage, which clips, so none of
   this can reach the page and move it. */
.slide-outgoing { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: var(--white); }
@keyframes slide-exit-left { from { transform: none; } to { transform: translateX(-100%); } }
@keyframes slide-exit-right { from { transform: none; } to { transform: translateX(100%); } }
@keyframes slide-enter-right { from { transform: translateX(100%); } to { transform: none; } }
@keyframes slide-enter-left { from { transform: translateX(-100%); } to { transform: none; } }

.slide-outgoing.exit-left { animation: slide-exit-left .5s cubic-bezier(.4,0,.2,1) forwards; }
.slide-outgoing.exit-right { animation: slide-exit-right .5s cubic-bezier(.4,0,.2,1) forwards; }
.featured-slide-figure.is-entering-right { animation: slide-enter-right .5s cubic-bezier(.4,0,.2,1); }
.featured-slide-figure.is-entering-left { animation: slide-enter-left .5s cubic-bezier(.4,0,.2,1); }

@media (prefers-reduced-motion: reduce) {
  .slide-outgoing { display: none; }
  .featured-slide-figure.is-entering-right,
  .featured-slide-figure.is-entering-left { animation: none; }
}

/* ---------- the control deck ----------
   Every control there is, in one band under the figure: the steps in words, the whole
   set as a rail, and the enlargement. Nothing is placed over the drawing, at any
   width, and the drawing never has to make room for anything. */
.slide-console {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  padding: 12px 16px;
  border-top: 1px solid var(--line);
  background: var(--paper);
  border-radius: 0 0 4px 4px;
}
.slide-console-nav { display: flex; gap: 8px; }
.slide-console .slide-enlarge { margin-left: auto; }
.slide-step {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 15px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease;
}
.slide-step:hover, .slide-step:focus-visible { border-color: var(--ink); background: var(--ink); color: var(--white); }
.slide-step[disabled] { opacity: .38; cursor: default; }
.slide-step[disabled]:hover { border-color: var(--line); background: var(--white); color: var(--ink); }
/* ---------- the rail ----------
   The set drawn to scale: one segment for each item, filled behind the reader, inked
   where they are, and clickable along its whole length. It is what tells a reader
   there are twenty-five figures here, and roughly where in them they stand, before
   a single control is touched. */
.slide-rail,
.screen-rail { display: flex; flex: 1 1 200px; gap: 3px; min-width: 110px; }
.rail-segment {
  flex: 1 1 0;
  height: 22px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.rail-segment::before {
  content: '';
  display: block;
  height: 3px;
  margin-top: 9px;
  border-radius: 2px;
  background: rgba(23, 23, 22, .16);
  transition: background .16s ease, height .16s ease, margin-top .16s ease;
}
.rail-segment:hover::before { background: rgba(23, 23, 22, .42); }
.rail-segment.is-seen::before { background: rgba(23, 23, 22, .32); }
.rail-segment.is-current::before { height: 7px; margin-top: 7px; background: var(--blue); }

/* While a widget is still moving on its own, the current segment fills over exactly
   one cycle. It says two things at once — something is about to change, and this is
   the control that changes it — which is the whole reason the movement is there. The
   duration comes from the script, so the bar cannot promise a different moment than
   the one the widget will actually turn on. */
.is-playing .rail-segment.is-current::after {
  content: '';
  display: block;
  height: 7px;
  margin-top: -7px;
  border-radius: 2px;
  background: var(--ink);
  animation: rail-cycle var(--slide-cycle, 5.2s) linear forwards;
}
@keyframes rail-cycle { from { width: 0; } to { width: 100%; } }

@media (prefers-reduced-motion: reduce) {
  .rail-segment::before { transition: none; }
  .is-playing .rail-segment.is-current::after { display: none; }
}

.slide-enlarge { display: inline-flex; align-items: center; gap: 9px; padding: 7px 13px; border: 1px solid var(--line); border-radius: 999px; background: var(--white); color: var(--ink); cursor: zoom-in; font: inherit; font-size: 11.5px; letter-spacing: .09em; text-transform: uppercase; transition: border-color .18s ease, background .18s ease; }
.slide-enlarge:hover,
.slide-enlarge:focus-visible { border-color: var(--ink); background: var(--ink); color: var(--white); }
.slide-after { padding: 23px 34px 27px; border-top: 1px solid var(--line); }
.slide-note { max-width: 820px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.56; }
.slide-longform { max-width: 820px; margin-top: 22px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.slide-longform[hidden] { display: none; }
.slide-longform summary { padding: 14px 0; cursor: pointer; font-size: 13px; }
.slide-longform > div { padding: 2px 0 21px; color: var(--muted); font-size: 15px; line-height: 1.62; }
.slide-longform p { margin: 0; }
.slide-longform p + p { margin-top: 15px; }
.slide-actions { display: flex; justify-content: space-between; gap: 22px; margin-top: 25px; color: var(--muted); font-size: 12px; }
.slide-actions a { color: var(--ink); text-underline-offset: 4px; }

/* Complete slide collection */
.visual-collection-hero { padding-top: clamp(85px, 12vh, 145px); padding-bottom: 100px; }
.visual-collection-hero h1 { max-width: 1080px; }
.visual-collection-hero > div { max-width: 700px; margin-top: 30px; color: var(--muted); font-size: 18px; line-height: 1.6; }
.visual-collection-hero > div p { margin: 0; }
.visual-collection-hero .text-link { display: inline-block; margin-top: 34px; }
/* A page with no primary menu: the header keeps only the mark and the way back. */
body.nav-none .site-header { grid-template-columns: 1fr auto; }

/* ==========================================================================
   Visual guide — three layouts under trial.
   Shared base first: the headings were page-sized, which turned a set of figures
   into a stack of title pages. Here a heading is a label on a figure, not a title.
   ========================================================================== */
/* The guide's own opening: title and one line, no card. */
.guide-eyebrow { color: #a3a39b; }
.guide-title { max-width: 24ch; margin: 20px 0 0; color: var(--white); font-size: clamp(2.2rem, 4.4vw, 4rem); font-weight: 480; line-height: 1; letter-spacing: -.06em; }
.guide-intro { max-width: 62ch; margin-top: 26px; color: #cfcfc7; font-size: clamp(1.02rem, 1.25vw, 1.2rem); line-height: 1.5; }
.guide-intro p { margin: 0; }

.guide-switch { display: flex; align-items: center; gap: 8px; margin: 0 0 46px; }
.guide-switch span { margin-right: 6px; color: var(--muted); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.guide-switch a { padding: 7px 14px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); font-size: 12.5px; text-decoration: none; }
.guide-switch a:hover { border-color: var(--ink); background: var(--ink); color: var(--white); }
.guide-switch a.is-current { background: var(--ink); border-color: var(--ink); color: var(--white); }

.visual-collection-item { padding-top: 0; border-top: 0; }
.collection-item-heading { min-height: 0; max-width: none; }
.collection-item-heading > p { margin: 0 0 8px; font-size: 10.5px; }
.collection-item-heading h2 {
  max-width: 46ch;
  margin: 0;
  font-size: clamp(1.15rem, 1.5vw, 1.45rem);
  font-weight: 560;
  line-height: 1.24;
  letter-spacing: -.02em;
}
.collection-question { max-width: 62ch; margin-top: 7px; color: var(--muted); font-size: 14.5px; line-height: 1.5; }
.collection-note { max-width: 70ch; margin: 16px 0 0; color: #56564f; font-size: 13.5px; line-height: 1.55; }
.collection-figure-wrap { position: relative; }
.collection-figure-wrap .slide-enlarge { position: absolute; right: 12px; top: 12px; opacity: 0; transition: opacity .16s ease; }
.collection-figure-wrap:hover .slide-enlarge,
.collection-figure-wrap:focus-within .slide-enlarge { opacity: 1; }

/* A · Contact sheet — two to a row, each figure in its own card. */
.layout-sheet .visual-collection-list { grid-template-columns: repeat(auto-fit, minmax(430px, 1fr)); gap: 30px; }
.layout-sheet .visual-collection-item { padding: 20px 20px 24px; border: 1px solid var(--line); background: var(--white); }
.layout-sheet .collection-item-heading { margin-bottom: 16px; }
.layout-sheet .collection-item-heading h2 { font-size: 1.1rem; }
.layout-sheet .collection-question { font-size: 13.5px; }
.layout-sheet .collection-figure { padding: 8px 4px 4px; }
.layout-sheet .collection-note { font-size: 12.5px; }

/* B · Ledger — the label holds a narrow column on the left and stays with the
   figure while it scrolls; the drawing takes the width it deserves. */
.layout-ledger .visual-collection-list { gap: 0; }
.layout-ledger .visual-collection-item {
  display: grid;
  grid-template-columns: minmax(0, 250px) minmax(0, 1fr);
  gap: clamp(26px, 4vw, 62px);
  padding: 46px 0 52px;
  border-top: 1px solid var(--line);
  align-items: start;
}
.layout-ledger .collection-item-heading { position: sticky; top: 118px; }
.layout-ledger .collection-item-heading > p { flex-direction: column; gap: 3px; align-items: flex-start; }
.layout-ledger .collection-question { max-width: none; }
.layout-ledger .collection-figure-wrap,
.layout-ledger .collection-note,
.layout-ledger .slide-longform { grid-column: 2; }
.layout-ledger .collection-figure { padding: 10px 6px 6px; }

/* C · Column — one at a time but held to a readable measure, with a heavier rule
   every fifth figure so the set reads as a sequence rather than a stack. */
.layout-column .visual-collection-list { gap: 0; max-width: 780px; margin: 0 auto; }
.layout-column .visual-collection-item { padding: 38px 0 44px; border-top: 1px solid var(--line); }
.layout-column .visual-collection-item:nth-of-type(5n + 1) { border-top: 2px solid var(--ink); }
.layout-column .collection-item-heading { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 18px; align-items: baseline; margin-bottom: 18px; }
.layout-column .collection-item-heading > p { flex-direction: column; gap: 2px; align-items: flex-start; margin: 0; }
.layout-column .collection-item-heading h2 { grid-column: 2; }
.layout-column .collection-question { grid-column: 2; }
.layout-column .collection-figure { padding: 6px 0 0; }
.layout-column .collection-note { margin-left: 80px; }

@media (max-width: 900px) {
  .layout-ledger .visual-collection-item,
  .layout-column .collection-item-heading { grid-template-columns: minmax(0, 1fr); }
  .layout-ledger .collection-item-heading { position: static; }
  .layout-ledger .collection-figure-wrap,
  .layout-ledger .collection-note,
  .layout-ledger .slide-longform { grid-column: 1; }
  .layout-column .collection-note { margin-left: 0; }
}

.visual-collection { padding-bottom: 0; width: auto; }
.guide-return { margin: 96px 0 0; padding-top: 30px; border-top: 1px solid var(--line); }
.collection-jump { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-bottom: 100px; background: var(--line); border: 1px solid var(--line); }
.collection-jump a { display: grid; grid-template-columns: 34px 1fr; gap: 10px; min-height: 72px; padding: 14px 16px; background: var(--paper); color: var(--ink); text-decoration: none; }
.collection-jump a:hover { background: var(--white); }
.collection-jump span { padding-top: 2px; color: var(--muted); font-size: 10px; }
.collection-jump b { font-size: 13px; font-weight: 500; line-height: 1.35; }
.visual-collection-list { display: grid; gap: 120px; }
.visual-collection-item { scroll-margin-top: 24px; padding-top: 85px; border-top: 1px solid var(--line); }
.collection-item-heading { min-height: 235px; max-width: 950px; }
.collection-item-heading > p { display: flex; justify-content: space-between; gap: 20px; margin: 0 0 20px; color: var(--muted); font-size: 10px; letter-spacing: .09em; text-transform: uppercase; }
.collection-item-heading h2 { max-width: 860px; font-size: clamp(2.15rem, 4.2vw, 4.7rem); }
.collection-question { max-width: 740px; margin-top: 19px; color: var(--muted); font-size: 16px; line-height: 1.55; }
.collection-figure-wrap { position: relative; border: 1px solid var(--line); background: var(--white); }
/* No forced ratio here either. The 25 figures run from 1.20 to 1.94, and four are
   tables with no ratio at all; pinning them to 1200/820 with overflow:hidden cut the
   top and bottom off every tall one. On a scrolling collection the figure can simply
   take the height it needs. */
.collection-figure { display: block; width: 100%; padding: 18px 22px 22px; border: 0; border-radius: 0; overflow: visible; }
.collection-figure > svg { display: block; width: 100%; height: auto; }
.collection-figure table { width: 100%; }
.collection-figure-wrap { overflow-x: auto; }
.collection-note { max-width: 820px; margin: 18px 0 0; color: var(--muted); font-size: 13px; line-height: 1.58; }

/* Shared explanatory visuals */
.explanatory-visual {
  margin: 0 0 110px;
  padding: 105px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.visual-heading { max-width: 850px; }
.visual-heading .section-label { display: block; margin-bottom: 18px; color: var(--blue); }
.visual-heading h2 { max-width: 780px; font-size: clamp(2.45rem, 4.7vw, 5.2rem); }
.visual-heading > div { max-width: 680px; margin-top: 25px; color: var(--muted); font-size: 17px; line-height: 1.58; }
.visual-heading p { margin: 0; }
.explanatory-visual figure { margin: 50px 0 0; }

.visual-open {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--white);
  color: var(--ink);
  cursor: zoom-in;
  text-align: left;
}

.visual-open img { display: block; width: 100%; height: auto; color-scheme: light; }
.visual-open-label {
  position: absolute;
  right: 16px;
  bottom: 16px;
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 10px 13px;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 3px;
  background: rgba(23,23,22,.68);
  color: var(--white);
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .7;
  transition: opacity .18s ease, background .18s ease;
}
.visual-open:hover .visual-open-label,
.visual-open:focus-visible .visual-open-label { background: var(--ink); opacity: 1; }
.visual-open-label b { font-size: 15px; font-weight: 400; }
.explanatory-visual figcaption { max-width: 760px; margin-top: 18px; color: var(--muted); font-size: 13px; line-height: 1.55; }
.explanatory-visual figcaption p { margin: 0; }

.visual-explanation { max-width: 780px; margin-top: 24px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.visual-explanation summary { padding: 15px 0; color: var(--ink); cursor: pointer; font-size: 13px; }
.visual-explanation > div { padding: 2px 0 22px; color: var(--muted); font-size: 15px; line-height: 1.62; }
.visual-explanation p { margin: 0; }
.visual-explanation p + p { margin-top: 15px; }

.visual-dialog {
  width: calc(100vw - 34px);
  max-width: none;
  height: calc(100vh - 34px);
  max-height: none;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 30px 90px rgba(0,0,0,.3);
}
.visual-dialog::backdrop { background: rgba(23,23,22,.58); backdrop-filter: blur(2px); }
.visual-dialog-shell { display: grid; grid-template-rows: auto minmax(0, 1fr); width: 100%; height: 100%; }
.visual-dialog-bar { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 13px 18px; border-bottom: 1px solid var(--line); background: var(--white); }
.visual-dialog-bar p { margin: 0; overflow: hidden; font-size: 13px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.visual-dialog-controls { display: flex; align-items: center; gap: 5px; flex: 0 0 auto; }
.visual-dialog-controls button { min-width: 34px; height: 34px; padding: 0 10px; border: 1px solid var(--line); border-radius: 3px; background: var(--white); color: var(--ink); cursor: pointer; font: inherit; font-size: 12px; }
.visual-dialog-controls button:hover { border-color: var(--ink); background: var(--ink); color: var(--white); }
.visual-dialog-controls .visual-dialog-close { margin-left: 8px; }
.visual-zoom-readout { min-width: 50px; color: var(--muted); font-size: 11px; text-align: center; }
.visual-dialog-viewport { min-height: 0; overflow: auto; padding: 24px; background: #e7e6e0; overscroll-behavior: contain; }
.visual-dialog-content { width: 100%; margin: 0 auto; }
.visual-dialog-content > img,
.visual-dialog-clone { display: block; width: 100%; max-width: none; height: auto; margin: 0 auto; background: var(--white); box-shadow: 0 8px 40px rgba(0,0,0,.12); color-scheme: light; }
.visual-dialog-clone > svg { width: 100%; height: 100%; }

/* FAQ */
.faq-section { padding-top: 135px; padding-bottom: 135px; border-top: 1px solid var(--line); }
.faq-heading { display: grid; grid-template-columns: .42fr 1fr; gap: clamp(45px, 9vw, 130px); align-items: start; }
.faq-heading h2 { max-width: 780px; font-size: clamp(2.45rem, 4.6vw, 5rem); }
.faq-intro { max-width: 650px; margin-top: 23px; color: var(--muted); font-size: 16px; line-height: 1.58; }
.faq-intro p { margin: 0; }
.faq-list { margin-top: 70px; border-top: 1px solid var(--ink); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 30px; padding: 25px 0; cursor: pointer; list-style: none; font-size: clamp(1.25rem, 2vw, 1.75rem); font-weight: 480; letter-spacing: -.035em; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-marker { position: relative; width: 22px; height: 22px; flex: 0 0 22px; }
.faq-marker::before,
.faq-marker::after { content: ''; position: absolute; top: 10px; left: 3px; width: 16px; height: 1px; background: var(--ink); transition: transform .18s ease; }
.faq-marker::after { transform: rotate(90deg); }
.faq-item[open] .faq-marker::after { transform: rotate(0); }
.faq-answer { max-width: 720px; padding: 0 64px 30px 0; color: var(--muted); font-size: 16px; line-height: 1.62; }
.faq-answer p { margin: 0; }
.project-faq { margin: 0 0 110px; }
.project-faq .section-label { display: block; padding-top: 8px; color: var(--blue); }

@media (max-width: 900px) {
  .candidate-ribbon span:last-child { display: none; }
  .thesis-lead,
  .pillar-heading,
  .spotlight-head,
  .spotlight-copy,
  .verification-grid,
  .faq-heading,
  .narrative-block { grid-template-columns: 1fr; }
  .pillar-row { grid-template-columns: 45px 1fr auto; }
  .pillar-row p { grid-column: 2 / -1; }
  .work-grid { grid-template-columns: 1fr 1fr; }
  .system-scale { grid-template-columns: 1fr; }
  .scale-stage { min-height: 170px; }
  .scale-stage strong { margin-top: 45px; }
  .narrative-block { gap: 38px; }
  .faq-heading { gap: 32px; }
  .collection-jump { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 680px) {
  .candidate-ribbon { padding: 8px 18px; }
  .elevation-lines { grid-template-columns: repeat(5, minmax(78px,1fr)); overflow-x: auto; }
  .failure-grid,
  .interaction-choice,
  .verification-modes,
  .work-grid { grid-template-columns: 1fr; }
  .choice-answer { grid-column: auto; }
  .method-steps { grid-template-columns: 1fr; }
  .method-step,
  .method-step + .method-step { min-height: 170px; padding: 22px 0; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.3); }
  .pillar-row { grid-template-columns: 36px 1fr; }
  .pillar-row b { grid-column: 2; }
  .signal-lane { grid-template-columns: 92px 1fr; }
  .signal-lane > span { grid-column: 2; }
  .capability { grid-template-columns: 38px 1fr; }
  .capability p { grid-column: 2; }
  .memory-row { grid-template-columns: 1fr; gap: 12px; padding: 18px 0; }
  .route-stages { grid-template-columns: 1fr 1fr; }
  .faq-section { padding-top: 90px; padding-bottom: 90px; }
  .faq-item summary { padding: 22px 0; }
  .faq-answer { padding-right: 0; }
  .explanatory-visual { padding: 82px 0; }
  .visual-dialog { width: 100vw; height: 100vh; border: 0; border-radius: 0; }
  .visual-dialog-bar { align-items: flex-start; padding: 10px; }
  .visual-dialog-bar p { display: none; }
  .visual-dialog-controls { width: 100%; }
  .visual-dialog-controls .visual-dialog-close { margin-left: auto; }
  .visual-dialog-viewport { padding: 12px; }
  .slide-viewer-section { padding: 82px 0; }
  .slide-bar, .screen-bar { padding: 11px 14px; }
  .featured-slide-figure { padding: 12px 12px 14px; }
  .slide-console, .screen-console { padding: 11px 14px; }
  /* Worded steps and a rail cannot share one narrow line. The steps take the row and
     the rail follows underneath with the enlargement beside it, rather than any of
     the three being squeezed to nothing or pushed onto a line of its own. */
  .slide-console-nav, .screen-console-nav { flex: 1 1 100%; }
  .slide-rail, .screen-rail { flex-basis: 110px; }
  .slide-after { padding: 21px 20px 24px; }
  .slide-actions { align-items: flex-start; flex-direction: column; }
  .collection-jump { grid-template-columns: 1fr; }
  .collection-item-heading { min-height: 255px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}