/* HealthPulse Advisors design system.
   Colour, type and the mark come from the brand build approved 2026-09-11
   (Claude Memory/Brand_System_2026-09-11/build.py), so the site and the LinkedIn
   presence are one identity rather than two drawings of one idea.

   One stylesheet for all 26 pages. The previous site inlined its CSS into every
   page, which is how the tagline drifted out of sync in the first place. */

/* Width-matched fallbacks, so the headline does not overflow its column during the
   font swap and the page does not reflow when the webfont lands.

   Measured in Chrome with canvas measureText, not guessed. At 600 weight and 64px,
   "Reimbursement" is 430px in Source Serif 4. In Georgia it is 456px at size-adjust
   100% and 428px at 94%, so 94% is the match. The sans figure is approximate: the
   same lead sentence at 400 weight and 17px is 895px in Inter against roughly 810px
   in Helvetica Neue, which puts the adjustment near 110%. The sans only affects
   reflow, never overflow, so the looser match is fine. */

@font-face {
  font-family: "Source Serif Fallback";
  src: local("Georgia"), local("Times New Roman"), local("Times");
  size-adjust: 94%;
  ascent-override: 92%;
  descent-override: 26%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Inter Fallback";
  src: local("Helvetica Neue"), local("Arial");
  size-adjust: 110%;
  ascent-override: 96%;
  descent-override: 24%;
  line-gap-override: 0%;
}

/* ------------------------------------------------------------------ tokens */

:root {
  /* Ground and ink. Lifted from the approved build: NAVY (18,29,49),
     GOLD (197,170,96), WHITE (247,245,240). */
  --navy: #121D31;
  --navy-deep: #0C1524;
  --navy-soft: #1B2840;
  --gold: #C5AA60;
  --gold-deep: #866A24;
  --paper: #F7F5F0;
  --paper-lift: #FFFFFF;

  --ink: #121D31;
  --text: #3C4557;
  --muted: #656E80;
  --on-navy: #F7F5F0;
  --on-navy-soft: rgba(247, 245, 240, 0.70);
  --on-navy-faint: rgba(247, 245, 240, 0.48);

  /* Warm rules, so hairlines sit in the paper rather than on top of it. */
  --rule: #E3DED3;
  --rule-strong: #CEC7B7;
  --rule-navy: rgba(247, 245, 240, 0.16);

  /* The one semantic colour. Used on a figure that represents a loss, never
     as decoration. */
  --loss: #99311F;

  /* Data colours for the analysis charts (2026-09-28). Not decoration: blue marks a
     positive contribution, warm gold-brown a negative one, the net bar is ink. Checked
     with the dataviz validator: CVD separation 22.4, both at least 4.1:1 on white. */
  --chart-pos: #3A66B0;
  --chart-neg: #A0762A;

  --serif: "Source Serif 4", "Source Serif Pro", "Source Serif Fallback", Georgia, serif;
  --sans: Inter, "Inter Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Spacing scale. Sections step through these rather than inventing values. */
  --s1: 0.25rem;  --s2: 0.5rem;   --s3: 0.75rem;  --s4: 1rem;
  --s5: 1.5rem;   --s6: 2rem;     --s7: 3rem;     --s8: 4rem;
  --s9: 6rem;     --s10: 8rem;

  --measure: 68ch;
  --shell: 1180px;
  --gutter: clamp(1.25rem, 5vw, 4.5rem);

  /* Strong ease-out. The built-in curves are too weak to read as intentional,
     and ease-in on an entering element feels sluggish at the exact moment the
     reader is looking. */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --nav-h: 72px;
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;
}

body {
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.68;
  color: var(--text);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

a { color: inherit; }
button { font: inherit; }
img, svg { display: block; max-width: 100%; }

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

::selection { background: var(--gold); color: var(--navy); }

/* The parts not drawn here still carry the design. */
* { caret-color: var(--gold-deep); }
* { scrollbar-color: var(--rule-strong) transparent; scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--rule-strong);
  border: 3px solid var(--paper);
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover { background: var(--muted); }
.on-dark ::-webkit-scrollbar-thumb { background: var(--rule-navy); border-color: var(--navy); }

/* Figures line up in a column, so they set on tabular figures. */
.stat-value, .prose td, .prose th { font-variant-numeric: tabular-nums; }
a { text-underline-offset: 0.18em; text-decoration-thickness: from-font; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 300;
  background: var(--navy);
  color: var(--on-navy);
  padding: 0.75rem 1.25rem;
  font-size: 0.875rem;
  text-decoration: none;
}
.skip-link:focus { left: 0; }

/* ------------------------------------------------------------ type ramp */

.display {
  font-family: var(--serif);
  font-size: clamp(2.75rem, 6vw, 4.75rem);
  line-height: 1.02;
  letter-spacing: -0.021em;
  font-weight: 600;
  color: var(--ink);
  max-width: 14ch;
}

/* Sub-pages carry a smaller display so the homepage keeps the top of the ramp.
   2026-09-28: sub-page h1s carry only this class, not .display, so until now they fell
   back to the body sans in grey with no space before the lead: 25 pages, found in the
   390px regression capture. The face, weight, colour and tracking are declared here so
   the sub-page display matches the approved serif. */
.display--sub {
  font-family: var(--serif);
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.018em;
  font-size: clamp(2.25rem, 4.6vw, 3.5rem);
  line-height: 1.06;
  max-width: 17ch;
}
.display--sub + .lead { margin-top: var(--s5); }

h2, .h2 {
  font-family: var(--serif);
  font-size: clamp(1.85rem, 3.1vw, 2.5rem);
  line-height: 1.14;
  letter-spacing: -0.014em;
  font-weight: 600;
  color: var(--ink);
  max-width: 22ch;
}

h3, .h3 {
  font-family: var(--serif);
  font-size: 1.1875rem;
  line-height: 1.32;
  font-weight: 600;
  color: var(--ink);
}

.lead {
  font-size: 1.1875rem;
  line-height: 1.66;
  color: var(--text);
  max-width: 52ch;
}

p { max-width: var(--measure); }

/* Breadcrumb. This replaces the section eyebrow: it sits in the same place and
   carries real navigation instead of restating the heading below it. */
.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: var(--muted);
  margin-bottom: var(--s5);
}
.crumbs a {
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 180ms var(--ease-out), border-color 180ms var(--ease-out);
}
.crumbs a:hover { color: var(--ink); border-bottom-color: var(--rule-strong); }
.crumbs [aria-current="page"] { color: var(--ink); }
.crumb-sep { color: var(--rule-strong); }
.on-dark .crumbs { color: var(--on-navy-faint); }
.on-dark .crumbs [aria-current="page"] { color: var(--on-navy); }

/* ---------------------------------------------------------------- layout */

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

section { padding-block: clamp(3.5rem, 8vw, 6.5rem); }

.on-dark {
  background: var(--navy);
  color: var(--on-navy-soft);
}
.on-dark h2, .on-dark h3, .on-dark .display, .on-dark .h2 { color: var(--on-navy); }
.on-dark .lead { color: var(--on-navy-soft); }
.on-dark a { color: var(--on-navy); }

.on-lift { background: var(--paper-lift); }

.section-head { margin-bottom: var(--s7); }
.section-head p { margin-top: var(--s4); }

/* --------------------------------------------------------- navigation */

.nav {
  position: sticky;
  top: 0;
  z-index: 200;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  background: rgba(247, 245, 240, 0.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
}

.nav-inner {
  max-width: var(--shell);
  margin: 0 auto;
  padding-inline: var(--gutter);
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s5);
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.6875rem;
  text-decoration: none;
  color: var(--ink);
  flex-shrink: 0;
}
.brand .mark { width: 24px; height: 27px; color: var(--navy); }
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-name { font-family: var(--serif); font-size: 1.125rem; font-weight: 600; }
/* 2026-09-25: the category became "CAR-T & Advanced Therapy Reimbursement", 30px
   wider than the old one. The 2026-09-16 masthead row fitted the 1180px shell with
   0px to spare, so the new row overran it by 23 to 31px at every width above the
   hamburger breakpoint. Tracking here and the nav gap below win back about 35px,
   measured in Chrome, and the 1180px breakpoint stays where it was. */
.brand-cat {
  font-size: 0.5625rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 2px;
}

.nav-links { display: flex; align-items: center; gap: 1.5rem; }
.nav-links a {
  font-size: 0.875rem;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
  transition: color 160ms var(--ease-out);
}
.nav-links a:hover { color: var(--ink); }
.nav-links a[aria-current="page"] { color: var(--ink); font-weight: 500; }

.nav-cta {
  background: var(--navy);
  color: var(--paper) !important;
  padding: 0.5rem 1.0625rem;
  border-radius: 2px;
  font-weight: 500;
  transition: background 180ms var(--ease-out), transform 120ms var(--ease-out);
}
.nav-cta:hover { background: var(--navy-soft); }
.nav-cta:active { transform: translateY(1px); }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 10px 4px;
}
.nav-toggle span {
  width: 22px; height: 1.5px; background: var(--ink);
  transition: transform 220ms var(--ease-out), opacity 140ms var(--ease-out);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ------------------------------------------------------- family: hero */

.hero { padding-block: clamp(3rem, 6vw, 5.5rem) clamp(3.5rem, 7vw, 6rem); }

/* A display headline beside a panel has a narrower column than a full-width one, so
   it caps lower. The longest word on the site, "Reimbursement", measures 457px at
   68px against a column of 464px. Seven pixels is not enough headroom, because the
   Georgia fallback is wider than Source Serif 4 and renders before the webfont
   arrives. At the 64px cap the same word measures about 430px. */
.hero-grid .display { font-size: clamp(2.5rem, 4.2vw, 4rem); max-width: none; }

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: start;
}

.hero-tagline {
  font-family: var(--serif);
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  line-height: 1.42;
  color: var(--text);
  max-width: 30ch;
  margin-top: var(--s5);
}

.hero-tagline + .lead { margin-top: var(--s5); }

.hero-actions {
  display: flex;
  align-items: center;
  gap: var(--s5);
  flex-wrap: wrap;
  margin-top: var(--s7);
}

/* ------------------------------------------------------ family: portrait */

.portrait { margin: 0; }
.portrait img {
  width: 100%;
  height: auto;
  border: 1px solid var(--rule);
  background: var(--paper-lift);
}
.portrait figcaption {
  margin-top: var(--s4);
  padding-top: var(--s3);
  border-top: 1px solid var(--rule);
  font-size: 0.8125rem;
  color: var(--muted);
}

/* ---------------------------------------------------- family: stat-panel */

.stat-panel {
  background: var(--paper-lift);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--gold);
  padding: clamp(1.5rem, 3vw, 2.25rem);
}

.stat-panel-label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted);
  padding-bottom: var(--s4);
  border-bottom: 1px solid var(--rule);
}

.stat-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s5);
  align-items: baseline;
  padding-block: var(--s5);
  border-bottom: 1px solid var(--rule);
}
.stat-row:last-of-type { border-bottom: 0; }
.stat-label { font-size: 0.875rem; line-height: 1.5; color: var(--text); max-width: none; }
.stat-source { display: block; font-size: 0.75rem; color: var(--muted); margin-top: var(--s2); }
.stat-value {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 2.4vw, 1.875rem);
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}
.stat-value.is-loss { color: var(--loss); }

.stat-detail {
  margin-top: var(--s5);
  padding-top: var(--s4);
  border-top: 1px solid var(--rule);
}
.stat-detail summary {
  font-size: 0.75rem;
  color: var(--muted);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: color 180ms var(--ease-out);
}
.stat-detail summary::-webkit-details-marker { display: none; }
.stat-detail summary::before {
  content: "+";
  font-size: 0.875rem;
  line-height: 1;
  color: var(--gold-deep);
}
.stat-detail[open] summary::before { content: "\2013"; }
.stat-detail summary:hover { color: var(--ink); }
.stat-detail .stat-note { margin-top: var(--s4); padding-top: 0; border-top: 0; }

.stat-note {
  margin-top: var(--s5);
  padding-top: var(--s4);
  border-top: 1px solid var(--rule);
  font-size: 0.75rem;
  line-height: 1.66;
  color: var(--muted);
  max-width: none;
}

/* ------------------------------------------------- family: editorial rows */

.rows { border-top: 1px solid var(--rule-strong); }

.row {
  display: grid;
  grid-template-columns: minmax(0, 7rem) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  padding-block: clamp(1.75rem, 3vw, 2.5rem);
  border-bottom: 1px solid var(--rule);
  align-items: start;
}

.row-key {
  font-family: var(--serif);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--gold-deep);
  line-height: 1.35;
}
.row-body p + p { margin-top: var(--s4); }
.row-body .note {
  display: block;
  font-size: 0.8125rem;
  color: var(--muted);
  margin-top: var(--s3);
}

/* ------------------------------------------------- family: stage ladder */

.ladder { counter-reset: rung; margin-top: var(--s6); }

.rung {
  display: grid;
  grid-template-columns: minmax(0, 4.5rem) minmax(0, 1fr);
  gap: clamp(1.25rem, 3vw, 2.5rem);
  padding-block: var(--s6);
  border-top: 1px solid var(--rule);
  align-items: baseline;
}
.rung:first-child { border-top: 0; }

.rung::before {
  counter-increment: rung;
  content: "0" counter(rung);
  font-family: var(--serif);
  font-size: 1.75rem;
  font-weight: 400;
  color: var(--gold-deep);
  line-height: 1;
}
/* Each rung indents a little further, so the sequence is visible as a shape
   rather than as four identical cards in a row. */
.rung:nth-child(2) { padding-left: clamp(0rem, 2vw, 2rem); }
.rung:nth-child(3) { padding-left: clamp(0rem, 4vw, 4rem); }
.rung:nth-child(4) { padding-left: clamp(0rem, 6vw, 6rem); }

.rung h3 { margin-bottom: var(--s2); }
.rung p { font-size: 0.9375rem; }

.ladder-note {
  margin-top: var(--s6);
  padding-left: var(--s5);
  border-left: 1px solid var(--gold);
  font-size: 0.9375rem;
  color: var(--text);
}

/* ------------------------------------------------------- family: chain */

.chain {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3);
  margin-top: var(--s6);
}
.chain-node {
  font-size: 0.8125rem;
  padding: 0.5rem 0.875rem;
  border: 1px solid var(--rule-navy);
  background: rgba(247, 245, 240, 0.05);
  color: var(--on-navy);
  white-space: nowrap;
}
.chain-node.is-end { border-color: var(--gold); color: var(--gold); }
.chain-sep { display: flex; color: var(--on-navy-faint); }
.chain-sep svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  stroke-width: 1.5;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* -------------------------------------------------- family: evidence cols */

.evidence {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 5vw, 4.5rem);
  margin-top: var(--s7);
}

.evidence-col > h3 {
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted);
  padding-bottom: var(--s4);
  border-bottom: 1px solid var(--rule-strong);
}

.evidence-item {
  padding-block: var(--s5);
  border-bottom: 1px solid var(--rule);
  font-size: 0.9375rem;
  line-height: 1.62;
  max-width: none;
}
.evidence-item:last-child { border-bottom: 0; }
.evidence-item b { color: var(--ink); font-weight: 600; }
.evidence-item .src { display: block; font-size: 0.75rem; color: var(--muted); margin-top: var(--s2); }

/* ------------------------------------------------------- family: pair */

.pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin-top: var(--s7);
}

.pair-item {
  background: var(--paper-lift);
  border: 1px solid var(--rule);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  display: flex;
  flex-direction: column;
  transition: border-color 200ms var(--ease-out);
}
.pair-item:hover { border-color: var(--rule-strong); }
.pair-kind {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: var(--s4);
}
.pair-item h3 { font-size: 1.3125rem; line-height: 1.26; margin-bottom: var(--s3); }
.pair-item p { font-size: 0.9375rem; }
.pair-item .link { margin-top: auto; padding-top: var(--s5); }

/* -------------------------------------------------- family: index list */

.index-list { border-top: 1px solid var(--rule-strong); margin-top: var(--s7); }

.index-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) auto;
  gap: clamp(1rem, 3vw, 2.5rem);
  align-items: baseline;
  padding-block: clamp(1.25rem, 2.4vw, 1.75rem);
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
  color: inherit;
  transition: background 200ms var(--ease-out);
}
.index-row:hover { background: var(--paper-lift); }
.index-row h3 { font-size: 1.25rem; transition: color 180ms var(--ease-out); }
.index-row:hover h3 { color: var(--gold-deep); }
.index-row p { font-size: 0.9375rem; color: var(--muted); max-width: none; }
.index-row .arrow {
  font-size: 0.9375rem;
  color: var(--gold-deep);
  transition: transform 220ms var(--ease-out);
}
.index-row:hover .arrow { transform: translateX(4px); }

/* -------------------------------------------------- family: quote band */

.band { text-align: left; }
.band .shell > * { max-width: 46rem; }
.band .h2 { max-width: 20ch; }
.band p { margin-top: var(--s5); font-size: 1.125rem; max-width: 56ch; }

/* ---------------------------------------------------------- family: cta */

.cta-block .shell { max-width: 40rem; }
.cta-block p { margin-top: var(--s4); }
.cta-block .btn { margin-top: var(--s6); }

/* --------------------------------------------------------- family: prose */

.prose > * + * { margin-top: var(--s5); }
.prose h2 { margin-top: var(--s8); }
.prose h3 { margin-top: var(--s6); }
.prose ul, .prose ol { padding-left: 1.25rem; max-width: var(--measure); }
.prose li + li { margin-top: var(--s2); }
.prose .callout {
  padding: var(--s5);
  background: var(--paper-lift);
  border-left: 1px solid var(--gold);
  font-size: 0.9375rem;
  max-width: none;
}
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
}
.table-scroll:focus-visible { outline-offset: 0; }
.prose table {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  font-size: 0.9375rem;
}
.prose th, .prose td {
  text-align: left;
  padding: var(--s4) var(--s4) var(--s4) 0;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
.prose th { font-weight: 600; color: var(--ink); border-bottom-color: var(--rule-strong); }

/* ------------------------------------------------------------- controls */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  background: var(--navy);
  color: var(--paper);
  padding: 0.875rem 1.625rem;
  border-radius: 2px;
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
  border: 1px solid var(--navy);
  cursor: pointer;
  transition: background 200ms var(--ease-out), transform 120ms var(--ease-out);
}
.btn:hover { background: var(--navy-soft); }
.btn:active { transform: translateY(1px); }
.btn .arrow { transition: transform 240ms var(--ease-out); }
.btn:hover .arrow { transform: translateX(3px); }

.on-dark .btn { background: var(--gold); border-color: var(--gold); color: var(--navy); }
.on-dark .btn:hover { background: #D4BC7C; }

.link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9375rem;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--rule-strong);
  padding-bottom: 2px;
  width: fit-content;
  transition: color 180ms var(--ease-out), border-color 180ms var(--ease-out);
}
.link:hover { color: var(--gold-deep); border-color: var(--gold); }
.link .arrow { transition: transform 240ms var(--ease-out); }
.link:hover .arrow { transform: translateX(3px); }
.on-dark .link { color: var(--on-navy); border-color: var(--rule-navy); }
.on-dark .link:hover { color: var(--gold); border-color: var(--gold); }

/* ------------------------------------------------------------- form */

.form { display: grid; gap: var(--s5); max-width: 34rem; margin-top: var(--s7); }
.field { display: grid; gap: var(--s2); }
.field label { font-size: 0.875rem; font-weight: 500; color: var(--ink); }
.field .help { font-size: 0.8125rem; color: var(--muted); }
.field input, .field select, .field textarea {
  font: inherit;
  font-size: 0.9375rem;
  color: var(--ink);
  background: var(--paper-lift);
  border: 1px solid var(--rule-strong);
  border-radius: 2px;
  padding: 0.6875rem 0.875rem;
  width: 100%;
  transition: border-color 180ms var(--ease-out);
}
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--muted); }
.field textarea { min-height: 8.5rem; resize: vertical; }

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

.footer {
  background: var(--navy-deep);
  color: var(--on-navy-faint);
  padding-block: var(--s8) var(--s6);
}
.footer-top {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 3.5rem);
  padding-bottom: var(--s7);
  border-bottom: 1px solid var(--rule-navy);
}
.footer .brand { color: var(--on-navy); }
.footer .brand .mark { color: var(--paper); }
.footer .brand-cat { color: var(--on-navy-faint); }
.footer-tagline {
  font-family: var(--serif);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--on-navy-soft);
  margin-top: var(--s4);
  max-width: 30ch;
}
.footer-col h2 {
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--on-navy-faint);
  margin-bottom: var(--s4);
  max-width: none;
}
.footer-col a {
  display: block;
  font-size: 0.875rem;
  color: var(--on-navy-soft);
  text-decoration: none;
  padding-block: 0.3125rem;
  transition: color 180ms var(--ease-out);
}
.footer-col a:hover { color: var(--on-navy); }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s4) var(--s6);
  justify-content: space-between;
  padding-top: var(--s5);
  font-size: 0.75rem;
  line-height: 1.7;
}
.footer-bottom p { max-width: 62ch; }

/* -------------------------------------------------------------- motion */

.reveal {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 560ms var(--ease-out), transform 560ms var(--ease-out);
}
.reveal.is-in { opacity: 1; transform: none; }

/* The drawn arrow. A Unicode glyph borrows whatever the font happens to ship; this
   is one stroke at one weight, and it is the only icon the site uses. */
.arrow {
  width: 1em;
  height: 1em;
  flex: none;
  stroke: currentColor;
  stroke-width: 1.5;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 240ms var(--ease-out);
}


/* ------------------------------------------ analysis components (2026-09-28) */

/* Hero with the analysis card. Head, card and body are grid areas, so on a phone the
   card sits between the headline and the lead instead of after the buttons. */
.hero-grid--feature {
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  grid-template-areas: "head feature" "body feature";
  /* The card spans both rows; without this the extra height split between them and
     opened a 70px gap under the specialty line (1440px render, 2026-09-28). */
  grid-template-rows: auto 1fr;
  row-gap: var(--s5);
}
.hero-head { grid-area: head; }
.hero-feature { grid-area: feature; }
.hero-body { grid-area: body; }
.hero-body .lead { margin-top: 0; }

.pub-card {
  margin: 0;
  background: var(--paper-lift);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--gold);
  padding: clamp(1.25rem, 2.6vw, 2rem);
}
.pub-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.5rem;
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--muted);
  margin: 0 0 var(--s4);
  max-width: none;
}
.pub-series { color: var(--gold-deep); font-weight: 600; }
.pub-sep { color: var(--rule-strong); }
.pub-q {
  font-family: var(--serif);
  font-size: clamp(1.2rem, 1.9vw, 1.45rem);
  line-height: 1.3;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 var(--s4);
}
.pub-answer { font-size: 1rem; color: var(--ink); margin-top: var(--s4); }
.pub-note { font-size: 0.8125rem; color: var(--muted); margin-top: var(--s2); }
.pub-note .link { display: inline-flex; margin-top: var(--s2); }

.bridge { display: block; width: 100%; height: auto; font-family: var(--sans); }
.bridge-bar.is-pos { fill: var(--chart-pos); }
.bridge-bar.is-neg { fill: var(--chart-neg); }
.bridge-bar.is-net { fill: var(--ink); }
.bridge-zero { stroke: var(--rule-strong); stroke-width: 1; }
.bridge-link { stroke: var(--muted); stroke-width: 1; opacity: 0.55; }
.bridge-val { fill: var(--ink); font-size: 17px; font-weight: 600; }
.bridge-val.is-net { font-size: 19px; }
.bridge-cat { fill: var(--muted); font-size: 14.5px; }
.bridge-tick { fill: var(--muted); font-size: 13px; }
.bridge-data { margin-top: var(--s3); font-size: 0.75rem; color: var(--muted); }
.bridge-data summary { cursor: pointer; }
.bridge-data table { margin-top: var(--s2); border-collapse: collapse; }
.bridge-data td, .bridge-data th { padding: 0.25rem 1rem 0.25rem 0; text-align: left; }
.bridge-figure { margin: var(--s6) 0; max-width: 640px; }
.hero .pub-meta + .display--sub { margin-top: var(--s3); }
.bridge-figure figcaption { font-size: 0.8125rem; color: var(--muted); margin-top: var(--s3); }

.finding {
  border-left: 1px solid var(--gold);
  padding: var(--s2) 0 var(--s2) var(--s5);
  margin: var(--s5) 0;
}
.finding-figure {
  font-family: var(--sans);
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: 600;
  line-height: 1.1;
  color: var(--ink);
  margin-bottom: var(--s3);
}

.pubs {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.pub-lead h3 { font-size: clamp(1.4rem, 2.4vw, 1.75rem); line-height: 1.22; }
.pub-lead h3 a { text-decoration: none; color: var(--ink); }
.pub-lead h3 a:hover { color: var(--gold-deep); }
.pub-finding { font-weight: 600; color: var(--ink); margin: var(--s4) 0 var(--s3); }
.pub-lead .link { margin-top: var(--s4); display: inline-flex; }
.pub-more { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--rule-strong); }
.pub-more li { padding: var(--s5) 0; border-bottom: 1px solid var(--rule); display: grid; gap: 0.35rem; }
.pub-kind { font-size: 0.75rem; color: var(--muted); }
.pub-more a { font-family: var(--serif); font-weight: 600; color: var(--ink); text-decoration: none; }
.pub-more a:hover { color: var(--gold-deep); }
.pub-more-body { font-size: 0.875rem; color: var(--text); }

.engage {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 5vw, 4rem);
}
.engage-col { border-top: 2px solid var(--ink); padding-top: var(--s5); }
.engage-col h3 { font-size: 1.25rem; max-width: 26ch; }
.engage-col dl { margin: var(--s5) 0; }
.engage-row {
  display: grid;
  grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr);
  gap: var(--s4);
  padding: var(--s4) 0;
  border-bottom: 1px solid var(--rule);
}
.engage-row dt { font-size: 0.8125rem; font-weight: 600; color: var(--muted); }
.engage-row dd { margin: 0; font-size: 0.9375rem; color: var(--ink); }
.engage-after { margin-top: var(--s6); color: var(--text); }

.bio { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(1.5rem, 5vw, 4rem); }
.bio-body p { font-size: 1.0625rem; line-height: 1.7; }

@media (max-width: 1080px) {
  .hero-grid--feature {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "head" "feature" "body";
    grid-template-rows: auto;
    row-gap: var(--s6);
  }
}
@media (max-width: 960px) {
  .pubs, .engage, .bio { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .engage-row { grid-template-columns: minmax(0, 1fr); gap: var(--s1); }
  /* The chart scales to about 0.55 on a phone; these are SVG units, so on screen
     they land near 13px (values) and 10.5px (categories). Measured 2026-09-28. */
  .bridge-val { font-size: 24px; }
  .bridge-val.is-net { font-size: 26px; }
  .bridge-cat { font-size: 19px; }
  .bridge-tick { font-size: 17px; }
}
/* An article page runs its header straight into the article body; the two section
   paddings stacked left a dead band of about 150px. */
.hero + section:has(> .shell > .prose) { padding-top: 0; }


/* ------------------------------------------- firm terms and EU5 page (2026-10-13) */
.sel-q { font-weight: 600; color: var(--ink); }
.sel-src { font-size: 0.8125rem; color: var(--muted); }
@media (max-width: 900px) {
      }
.promise {
  margin: 0 0 var(--s6);
  padding: var(--s5) var(--s6);
  border-left: 1px solid var(--gold);
  background: var(--paper-lift);
  max-width: 62ch;
}
.on-lift .promise { background: var(--paper); }
.promise p { font-family: var(--serif); font-size: clamp(1.15rem, 1.8vw, 1.35rem); line-height: 1.5; color: var(--ink); max-width: none; }
.terms-rows { border-top: 1px solid var(--rule-strong); }
.terms-rows .row { grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); }
.terms-after { margin-top: var(--s6); max-width: 60ch; }
@media (max-width: 640px) { .terms-rows .row { grid-template-columns: minmax(0, 1fr); gap: var(--s2); } }
.terms-list { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--rule-strong); max-width: 68ch; }
.terms-list li { padding: var(--s4) 0; border-bottom: 1px solid var(--rule); color: var(--ink); }

.mech { border-collapse: collapse; width: 100%; min-width: 980px; font-size: 0.8125rem; line-height: 1.5; }
.mech th, .mech td { text-align: left; vertical-align: top; padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--rule); }
.mech thead th { font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--rule-strong); }
.mech tbody th { font-family: var(--serif); font-weight: 600; color: var(--ink); min-width: 12rem; }

.pay-timeline { display: block; width: 100%; height: auto; font-family: var(--sans); }
.tl-grid { stroke: var(--rule); stroke-width: 1; }
.tl-tick { fill: var(--muted); font-size: 14px; }
.tl-label { fill: var(--ink); font-size: 15px; }
.tl-note { fill: var(--muted); font-size: 14px; }
.tl-track { stroke: var(--rule-strong); stroke-width: 2; }
.tl-pt { fill: var(--chart-pos); }
.tl-pt-label { fill: var(--ink); font-size: 14px; font-weight: 600; }
.tl-mobile { display: none; }
.tl-mobile table { font-size: 0.8125rem; border-collapse: collapse; width: 100%; }
.tl-mobile td, .tl-mobile th { text-align: left; vertical-align: top; padding: 0.5rem 0.75rem 0.5rem 0; border-bottom: 1px solid var(--rule); }
@media (max-width: 640px) {
  .pay-timeline, .tl-desktop { display: none; }
  .tl-mobile { display: block; }
}

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

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

/* Breakpoints are set from measured content, not from device names.

   1180: the masthead. Measured in Chrome, the seven nav items plus the CTA need
   821px and the wordmark needs about 200px, so the row wants 1159px before gutters.
   Below that it has to become the off-canvas menu, or the page scrolls sideways.
   1080: the split hero. The evidence panel's labels start wrapping to four lines.
    960: the two-column grids.
    640: the remaining two-column rows inside components. */

@media (max-width: 1180px) {
  .nav-toggle { display: flex; }
  .nav-links {
    position: fixed;
    inset: var(--nav-h) 0 0 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--paper);
    padding: var(--s5) var(--gutter) var(--s8);
    overflow-y: auto;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 260ms var(--ease-out), visibility 0s linear 260ms;
  }
  .nav-links.is-open {
    transform: none;
    visibility: visible;
    transition: transform 260ms var(--ease-out), visibility 0s;
  }
  .nav-links a {
    font-size: 1.0625rem;
    padding-block: var(--s4);
    border-bottom: 1px solid var(--rule);
  }
  .nav-links a.nav-cta {
    margin-top: var(--s5);
    text-align: center;
    border-bottom: 0;
    padding-block: 0.875rem;
  }
}

@media (max-width: 1080px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s7); }
  .portrait { max-width: 22rem; }
  .hero-grid .display { font-size: clamp(2.5rem, 6vw, 4.25rem); max-width: 14ch; }
  .stat-panel { max-width: 34rem; }
}

@media (max-width: 960px) {
  .evidence, .pair { grid-template-columns: minmax(0, 1fr); }
  .footer-top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .index-row { grid-template-columns: minmax(0, 1fr) auto; }
  .index-row p { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
  .display, .hero-grid .display { max-width: none; }
  .row { grid-template-columns: minmax(0, 1fr); gap: var(--s3); }
  .rung { grid-template-columns: minmax(0, 1fr); gap: var(--s3); padding-left: 0 !important; }
  .stat-row { grid-template-columns: minmax(0, 1fr); gap: var(--s2); }
  .stat-value { text-align: left; }
  .footer-top { grid-template-columns: minmax(0, 1fr); }
  .chain { flex-direction: column; align-items: stretch; }
  .chain-sep { display: none; }
  .chain-node { text-align: center; }
}

@media print {
  .nav, .nav-toggle, .cta-block { display: none; }
  body { background: #fff; }
}


/* ------------------------------------------------- 2026-10-16 composition pass
   Boardroom ruling: keep the palette and type, fix the assembly. One stable opening,
   then decisions, engagements, one flagship research feature, the founder, how an
   engagement begins. Three kinds of evidence get three visibly different treatments. */

/* Hero: headline left, offer and action right on a desktop; stacked in reading order
   on a phone, so the contact action arrives before any figure on the page. */
.hero--split { padding-block: clamp(2.25rem, 5vw, 4.5rem) clamp(2.5rem, 5vw, 4.5rem); border-bottom: 1px solid var(--rule); }
.hero-split { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 0.75fr); gap: clamp(1.5rem, 5vw, 5rem); align-items: center; }
.hero--split .display { font-size: clamp(2.35rem, 4.4vw, 4rem); max-width: 19ch; }
.hero--split .hero-tagline { margin-top: var(--s4); }
.hero-split-body .lead { font-size: 1.1875rem; line-height: 1.55; color: var(--ink); margin: 0; }
.hero-split-body .lead + .lead { margin-top: var(--s4); font-size: 1.0625rem; color: var(--text); }
.hero-split-body .hero-actions { margin-top: var(--s6); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s5); }
@media (max-width: 960px) {
  .hero-split { grid-template-columns: 1fr; gap: var(--s5); align-items: start; }
  .hero--split .display { max-width: none; }
}

/* Kind tags: engagement filled, research outlined, modeled finding dashed. */
.kind { display: inline-block; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; padding: 0.2rem 0.55rem; border-radius: 2px; line-height: 1.4; }
.kind--engagement { background: var(--navy); color: var(--on-navy); border: 1px solid var(--navy); }
.kind--research { background: transparent; color: var(--ink); border: 1px solid var(--ink); }
.kind--modeled { background: transparent; color: var(--gold-deep); border: 1px dashed var(--gold-deep); }
/* Final pass 2026-10-16: Selected Work labels. A client assignment keeps the filled navy
   tag; the university contract is outlined in ink; an independent analysis is outlined
   in deep gold, so no relationship reads as a completed engagement it isn't. */
.kind--assignment { background: var(--navy); color: var(--on-navy); border: 1px solid var(--navy); }
.kind--contract { background: transparent; color: var(--ink); border: 1px solid var(--ink); }
.kind--analysis { background: transparent; color: var(--gold-deep); border: 1px solid var(--gold-deep); }
.eng--contract, .eng--analysis { border-top-color: var(--ink); }
.work-more { list-style: none; padding: 0; margin: var(--s6) 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); border-top: 1px solid var(--rule); padding-top: var(--s5); }
.work-more li { display: flex; flex-direction: column; gap: var(--s2); }
.work-more .kind { align-self: flex-start; }
.work-more a { font-family: var(--serif); font-size: 1.125rem; font-weight: 600; color: var(--ink); line-height: 1.3; }
.work-more span:not(.kind) { font-size: 0.9375rem; color: var(--text); line-height: 1.5; }
.work-note { margin-top: var(--s5); font-size: 0.9375rem; color: var(--muted); max-width: 70ch; }
@media (max-width: 960px) { .work-more { grid-template-columns: 1fr; } }

/* Three decisions. */
.decs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.25rem, 3vw, 2.5rem); }
.dec { border-top: 2px solid var(--ink); padding-top: var(--s5); display: flex; flex-direction: column; }
.dec-n { font-family: var(--serif); font-size: 1rem; font-weight: 600; color: var(--gold-deep); }
.dec h3 { font-size: clamp(1.25rem, 1.8vw, 1.45rem); line-height: 1.25; margin: var(--s2) 0 var(--s4); max-width: 22ch; }
.dec dl { margin: 0 0 var(--s5); flex: 1; }
.dec dt { font-size: 0.8125rem; font-weight: 600; color: var(--muted); margin-top: var(--s3); }
.dec dd { margin: 0.2rem 0 0; font-size: 0.9375rem; color: var(--ink); line-height: 1.55; }
.dec .link { align-self: flex-start; }

/* Engagement cards. */
.engs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.25rem, 3vw, 2.5rem); }
.eng { background: var(--paper-lift); border: 1px solid var(--rule); border-top: 3px solid var(--navy); padding: clamp(1.25rem, 2.5vw, 2rem); }
.eng h3 { font-size: clamp(1.3rem, 2vw, 1.55rem); line-height: 1.25; margin: var(--s4) 0 var(--s3); }
.eng dt { font-size: 0.8125rem; font-weight: 600; color: var(--muted); margin-top: var(--s4); }
.eng dd { margin: 0.25rem 0 0; color: var(--ink); line-height: 1.6; }
.work-after { margin-top: var(--s6); }

/* Flagship research feature. */
.flag-head { max-width: 62rem; }
.flag-head .pub-meta { display: inline-flex; margin: 0 0 0 var(--s3); vertical-align: middle; }
.flag-title { font-size: clamp(1.65rem, 3.2vw, 2.4rem); line-height: 1.15; margin: var(--s4) 0 var(--s4); max-width: 34ch; }
.flag-title a { color: var(--ink); text-decoration: none; }
.flag-title a:hover { color: var(--gold-deep); }
.flag-finding { font-family: var(--serif); font-size: clamp(1.15rem, 1.7vw, 1.35rem); line-height: 1.45; color: var(--ink); border-left: 3px solid var(--gold-deep); padding-left: var(--s5); max-width: 60ch; }
.flag-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.25rem, 4vw, 3.5rem); margin-top: var(--s6); }
.flag-cols h3 { font-family: var(--sans); font-size: 0.875rem; font-weight: 600; color: var(--muted); margin-bottom: var(--s2); }
.flag-cols p { color: var(--ink); }
.flag-src { margin-top: var(--s5); font-size: 0.875rem; color: var(--muted); max-width: 70ch; }
.flag-src .link { display: flex; width: fit-content; margin-top: var(--s3); font-size: 1rem; }
.flag-also { margin-top: var(--s5); font-size: 0.9375rem; padding-top: var(--s4); border-top: 1px solid var(--rule); }

/* Payment pathways: one drawing system for every mechanism figure (render.pathway_svg). */
.pw-figure { margin: var(--s6) 0 0; }
/* One design per row: the words on the left, the drawing at about 1:1 on the right, so
   the two designs compare top to bottom and no label drops under 12px (G75). */
.pw-panels { display: grid; grid-template-columns: 1fr; gap: clamp(1rem, 2.5vw, 1.5rem); }
.pw-panel { background: var(--paper-lift); border: 1px solid var(--rule); padding: clamp(1rem, 2.2vw, 1.75rem); }
@media (min-width: 960px) {
  .pw-panel { display: grid; grid-template-columns: minmax(0, 0.62fr) minmax(0, 1.38fr); gap: clamp(1.5rem, 3vw, 2.5rem); align-items: center; }
  .pw-text .pw-exposure { border-top: 1px solid var(--rule); }
}
.pw-title { font-family: var(--serif); font-size: 1.1875rem; font-weight: 600; color: var(--ink); line-height: 1.3; }
.pw-sub { font-size: 0.875rem; color: var(--muted); margin: 0.2rem 0 var(--s4); }
.pw-wide svg, .pw-narrow svg { width: 100%; height: auto; display: block; }
.pw-wide { max-width: 680px; }
.pw-narrow { display: none; }
@media (max-width: 720px) { .pw-wide { display: none; } .pw-narrow { display: block; } }
/* Final pass 2026-10-16 (G93): the phone layouts carry fewer, larger labels so every
   decision-critical label renders at 14 displayed pixels or more at 390px wide. */
.pw-narrow .pw-note, .pw-narrow .pw-label, .pw-narrow .pw-tick-label, .pw-narrow .pw-mark-label { font-size: 15px; }
.pw-narrow .pw-strip-title { font-size: 15px; }
.pw-exposure { margin-top: var(--s4); font-size: 0.9375rem; color: var(--text); border-top: 1px solid var(--rule); padding-top: var(--s3); }
.pw-exposure span { font-weight: 600; color: var(--ink); }
.pw-box { fill: var(--paper-lift); stroke: var(--ink); stroke-width: 1.25; }
.pw-box--center { fill: var(--navy); stroke: var(--navy); }
.pw-label { font: 600 14.5px var(--sans); fill: var(--ink); }
.pw-label--center { fill: var(--on-navy); }
.pw-note { font: 400 14px var(--sans); fill: var(--text); }
.pw-note--fixed { fill: var(--ink); }
.pw-note--outcome { fill: var(--gold-deep); font-weight: 600; }
.pw-note--evidence { fill: var(--muted); }
.pw-line { fill: none; }
.pw-line--fixed { stroke: var(--ink); stroke-width: 1.75; }
.pw-line--outcome { stroke: var(--gold-deep); stroke-width: 3.5; }
.pw-line--evidence { stroke: var(--muted); stroke-width: 1.5; stroke-dasharray: 5 4; }
.pw-head--fixed { fill: var(--ink); }
.pw-head--outcome { fill: var(--gold-deep); }
.pw-head--evidence { fill: var(--muted); }
.pw-axis { stroke: var(--rule-strong); stroke-width: 1.5; }
.pw-tick { stroke: var(--rule-strong); stroke-width: 1.5; }
.pw-tick-label { font: 400 13.5px var(--sans); fill: var(--muted); }
.pw-strip-title { font: 600 13px var(--sans); fill: var(--muted); letter-spacing: 0.06em; text-transform: uppercase; }
.pw-mark--fixed { fill: var(--ink); }
.pw-mark--outcome { fill: var(--gold-deep); }
.pw-mark--open { fill: var(--paper-lift); stroke: var(--gold-deep); stroke-width: 2.5; }
.pw-mark-label { font: 600 13.5px var(--sans); }
.pw-legend { list-style: none; padding: 0; margin: var(--s4) 0 0; display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); font-size: 0.8125rem; color: var(--text); }
.pw-legend li { display: inline-flex; align-items: center; gap: var(--s2); }
.pw-legend svg { width: 34px; height: 14px; flex: none; }
.pw-figure figcaption { font-size: 0.8125rem; color: var(--muted); margin-top: var(--s3); max-width: 80ch; }

/* Modeled finding. */
.mod { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3rem); border-top: 1px dashed var(--gold-deep); padding-top: var(--s5); align-items: start; }
.mod h3 { font-size: clamp(1.3rem, 2vw, 1.55rem); margin: var(--s3) 0; }
.mod h3 a { color: var(--ink); text-decoration: none; }
.mod-fig { margin: 0; }
.mod p + p { margin-top: var(--s3); }

/* Kinds legend on Selected Work. */
.kinds-band { padding-block: 0 var(--s6); }
.kinds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); border-top: 1px solid var(--rule); padding-top: var(--s5); }
.kinds p { font-size: 0.9375rem; margin-top: var(--s2); }

/* How an engagement begins. */
.steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.25rem, 3vw, 2.5rem); counter-reset: none; }
.steps li { border-top: 1px solid var(--rule-strong); padding-top: var(--s4); }
.step-n { font-family: var(--serif); font-size: 2rem; line-height: 1; color: var(--gold-deep); }
.steps h3 { font-size: 1.2rem; margin: var(--s3) 0 var(--s2); }
.steps p { font-size: 0.9375rem; }
.steps-after { margin-top: var(--s6); }

/* Founder with portrait. */
.bio:has(.bio-pic) { grid-template-columns: 160px minmax(0, 1fr); align-items: start; }
.bio-pic { width: 160px; height: auto; display: block; border-radius: 2px; filter: grayscale(0.15); }
.bio:has(.bio-pic) h2 { margin-bottom: var(--s4); }

@media (max-width: 960px) {
  .decs, .engs, .steps, .kinds, .flag-cols, .mod { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .bio:has(.bio-pic) { grid-template-columns: 1fr; }
  .bio-pic { width: 112px; }
  .flag-head .pub-meta { display: flex; margin: var(--s3) 0 0; }
}