/* Blackletter — page styles for / and /screen.
   All values come from tokens/ (see styles.css). No shadows, no radius,
   motion is color/opacity only. Gold appears once per view. */

html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bl-paper);
  overflow-x: hidden;
}
ul, ol { margin: 0; }
h1, h2, h3, p, blockquote, figure { margin: 0; }
a { color: var(--bl-gold); text-decoration: none; }
a:hover { color: var(--bl-ink); }
button { font: inherit; }

.wrap {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--page-pad);
}
.wrap--narrow { max-width: 780px; }

/* ---------- Type helpers ---------- */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--bl-gold);
}
.eyebrow--wide { letter-spacing: var(--track-label-wide); }
.eyebrow--stone { color: var(--bl-stone); }
.eyebrow--muted { color: var(--bl-stone-muted); }
.label-sm {
  font-family: var(--font-mono);
  font-size: var(--text-label-sm);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--bl-stone);
}
.lead {
  font-family: var(--font-body);
  font-weight: var(--weight-light);
  font-size: var(--text-lead);
  line-height: var(--leading-body);
  color: var(--bl-ink-soft);
  max-width: var(--measure-lead);
}
.on-ink .lead { color: var(--bl-stone-light); }

/* ---------- Wordmark (live type) ---------- */
.wordmark {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  line-height: 1;
  letter-spacing: var(--track-wordmark);
  color: var(--bl-cream);
}
.wordmark:hover { color: var(--bl-cream); }
.wordmark .dot { color: var(--bl-gold); }
.wordmark--header { font-size: 24px; }
.wordmark--footer { font-size: 44px; }
.wordmark--footer-sm { font-size: 34px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-ui);
  font-size: var(--text-caption);
  padding: 15px 28px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: var(--transition-ink);
}
.btn--gold {
  font-weight: var(--weight-semibold);
  background: var(--bl-gold);
  border-color: var(--bl-gold);
  color: var(--bl-ink);
}
.btn--gold:hover { background: var(--bl-gold-deep); border-color: var(--bl-gold-deep); color: var(--bl-ink); }
.btn--ghost-ink {
  font-weight: var(--weight-medium);
  color: var(--bl-cream);
  border-color: var(--border-on-ink);
  background: transparent;
}
.btn--ghost-ink:hover { color: var(--bl-cream); border-color: var(--bl-cream); }
.btn--outline {
  font-weight: var(--weight-medium);
  color: var(--bl-ink);
  border-color: var(--border-hairline);
  padding: 11px 20px;
  background: transparent;
}
.btn--outline:hover { color: var(--bl-ink); border-color: var(--bl-ink); }
.btn--lg { font-size: var(--text-body-lg); }
.btn--sm { font-size: var(--text-body-sm); padding: 9px 16px; }

/* ---------- Header ---------- */
.site-header {
  background: var(--bl-ink);
  border-bottom: 1px solid var(--border-on-ink-soft);
}
.site-header--sticky { position: sticky; top: 0; z-index: 20; }
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-9);
  padding-top: var(--space-5);
  padding-bottom: var(--space-5);
}
.site-nav { display: flex; align-items: center; gap: var(--space-7); }
.site-nav__links { display: flex; align-items: center; gap: var(--space-7); }
.site-nav a:not(.btn) {
  font-family: var(--font-ui);
  font-size: var(--text-body-sm);
  color: var(--bl-stone-light);
}
.site-nav a:not(.btn):hover { color: var(--bl-cream); }

/* ---------- Sections ---------- */
.section { padding: var(--section-pad-y) 0; }
.section--ink { background: var(--bl-ink); }
.section--paper { background: var(--bl-paper); }
.section--vellum { background: var(--bl-vellum); border-top: 1px solid var(--border-hairline); }
.section--rule-top { border-top: 1px solid var(--border-on-ink-soft); }

.section-head {
  display: flex;
  align-items: baseline;
  gap: var(--space-5);
  margin-bottom: var(--space-2);
}
.section-head--gap { margin-bottom: var(--space-9); }
.section-head__title {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: var(--text-title);
  line-height: var(--leading-title);
  color: var(--bl-ink);
}
.section-head__rule { flex: 1; height: 1px; background: var(--border-hairline); }
.on-ink .section-head__title { color: var(--bl-cream); }
.on-ink .section-head__rule { background: var(--border-on-ink); }

/* ---------- Hero ---------- */
.hero { padding: var(--space-14) 0; }
.hero__eyebrow { margin-bottom: var(--space-6); }
.hero__title {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: var(--text-display-3);
  line-height: var(--leading-display);
  letter-spacing: var(--track-tight);
  color: var(--bl-cream);
  max-width: var(--measure-hero);
}
.hero__lead {
  font-family: var(--font-body);
  font-weight: var(--weight-light);
  font-size: var(--text-lead);
  line-height: var(--leading-body);
  color: var(--bl-stone-light);
  margin-top: var(--space-8);
  max-width: 520px;
  border-left: 2px solid var(--bl-gold);
  padding-left: var(--space-5);
}
.hero__cta {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-9);
  flex-wrap: wrap;
}

/* ---------- 01 The problem ---------- */
.problem__lead { margin-bottom: var(--space-9); }
.ptable {
  border: 1px solid var(--border-hairline);
  margin-bottom: var(--space-9);
}
.ptable__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.ptable__row + .ptable__row { border-top: 1px solid var(--border-hairline); }
.ptable__head { padding: var(--space-4) var(--space-5); background: var(--bl-ink); }
.ptable__head--gold { background: var(--bl-gold); }
.ptable__head .label-sm {
  color: var(--bl-cream);
  font-size: 14px;
  font-weight: var(--weight-medium);
}
.ptable__head--gold .label-sm { color: var(--bl-ink); }
.ptable__cell {
  padding: var(--space-6);
  font-family: var(--font-body);
  font-size: var(--text-lead);
  line-height: var(--leading-body);
}
.ptable__cell--left {
  font-weight: var(--weight-light);
  color: var(--bl-ink);
  background: var(--bl-vellum);
  border-right: 1px solid var(--border-hairline);
}
.ptable__cell--right {
  font-weight: var(--weight-regular);
  color: var(--bl-ink);
  background: var(--bl-vellum);
}
.ptable__strong { font-weight: var(--weight-medium); color: var(--bl-ink); }
.problem__close { max-width: var(--measure-lead); }

.twocol {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-11);
  align-items: start;
}
.body-copy {
  font-family: var(--font-body);
  font-weight: var(--weight-light);
  font-size: var(--text-body-lg);
  line-height: var(--leading-loose);
  color: var(--bl-ink-soft);
}
.body-copy + .body-copy { margin-top: var(--space-5); }
.pullquote {
  border-left: 2px solid var(--bl-gold);
  padding-left: var(--space-5);
}
.pullquote p {
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: var(--text-heading);
  line-height: var(--leading-heading);
  color: var(--bl-ink);
}

/* ---------- Hairline grids ---------- */
.hgrid {
  display: grid;
  gap: var(--hairline-gap);
  border: 1px solid var(--border-hairline);
}
.hgrid--2 { grid-template-columns: 1fr 1fr; }
.hgrid--3 { grid-template-columns: repeat(3, 1fr); }
.panel { padding: var(--space-8); }
.panel--vellum { background: var(--bl-vellum); }
.panel--paper { background: var(--bl-paper); }
.wlist__eyebrow {
  display: inline-block;
  margin-bottom: var(--space-7);
  font-size: 14px;
  font-weight: var(--weight-medium);
  padding: 6px 10px;
  color: var(--bl-ink);
  background: var(--bl-gold);
}
.wlist__eyebrow.eyebrow--stone {
  color: var(--bl-gold);
  background: var(--bl-ink);
}
.wlist {
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--font-body);
  font-weight: var(--weight-light);
  font-size: var(--text-body-lg);
  line-height: 1.5;
  color: var(--bl-ink);
}
.wlist li { padding: 14px 0; border-bottom: 1px solid var(--border-hairline); }
.wlist li:last-child { border-bottom: 0; }
.wlist--stone { color: var(--bl-stone); }

/* ---------- 02 The solution ---------- */
.eyebrow--stonemuted { color: var(--bl-stone-muted); }
.hires {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-11);
  margin-top: var(--space-11);
}
.hires__label { margin-bottom: var(--space-5); }
.hires__word {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: var(--text-display-2);
  line-height: 1;
  letter-spacing: var(--track-wordmark);
  color: var(--bl-ink);
  background: var(--bl-gold);
  padding: 0.12em 0.28em 0.16em;
}
.hires__word span { display: inline; }
.hires__word--bl {
  background: var(--bl-vellum);
  letter-spacing: var(--track-wordmark);
}
.hires__word--bl .dot { color: var(--bl-gold); }
.solution__rule {
  border: 0;
  height: 1px;
  background: var(--border-on-ink);
  margin: var(--space-11) 0;
}
.solution__reasons-lead { margin-bottom: var(--space-7); }
.hgrid--on-ink { border-color: var(--border-on-ink); }
.panel--raised { background: var(--bl-ink-raised); }
.reason__title {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: var(--text-heading);
  line-height: var(--leading-title);
  color: var(--bl-cream);
  margin-bottom: var(--space-5);
}
.reason__body {
  font-family: var(--font-body);
  font-weight: var(--weight-light);
  font-size: var(--text-body-lg);
  line-height: var(--leading-loose);
  color: var(--bl-stone-light);
}
.solution__close {
  margin-top: var(--space-9);
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: var(--text-display-4);
  line-height: var(--leading-heading);
  color: var(--bl-cream);
  max-width: 760px;
}
.solution__close span { display: block; }
.solution__close-gold { color: var(--bl-gold); }
/* ---------- 03 The path ---------- */
.phase { display: flex; flex-direction: column; }
.phase__badge {
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: var(--text-label-sm);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  font-weight: var(--weight-medium);
  color: var(--bl-gold);
  background: var(--bl-ink);
  border: 1px solid var(--bl-ink);
  padding: 6px 10px;
  margin-bottom: var(--space-6);
}
.phase__title {
  margin-bottom: var(--space-4);
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: var(--text-heading);
  line-height: var(--leading-title);
  color: var(--bl-ink);
}
.phase__body {
  flex: 1;
  font-family: var(--font-body);
  font-weight: var(--weight-light);
  font-size: var(--text-body);
  line-height: var(--leading-loose);
  color: var(--bl-ink-soft);
}
.phase__meta {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-hairline);
  color: var(--bl-gold);
  font-weight: var(--weight-medium);
}
.nolockin { margin-top: var(--space-11); }
.nolockin__rule {
  border: 0;
  height: 1px;
  background: var(--border-hairline);
  max-width: var(--measure-lead);
  margin: 0 0 var(--space-9);
}
.nolockin__title {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: var(--text-heading);
  line-height: var(--leading-title);
  color: var(--bl-ink);
  margin-bottom: var(--space-4);
}
.nolockin__body {
  font-family: var(--font-body);
  font-weight: var(--weight-light);
  font-size: var(--text-lead);
  line-height: var(--leading-body);
  color: var(--bl-ink-soft);
  max-width: var(--measure-lead);
}

/* ---------- 05 Exhibit A ---------- */
.exhibit__id {
  display: flex;
  align-items: center;
  gap: var(--space-7);
  margin-bottom: var(--space-9);
}
.exlogo {
  width: 150px;
  min-height: 90px;
  background: var(--bl-paper);
  border: 1px solid var(--border-hairline);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3);
  flex-shrink: 0;
}
.exlogo img { max-width: 100%; max-height: 120px; display: block; filter: grayscale(1); }
.exlogo__label {
  font-family: var(--font-mono);
  font-size: var(--text-label-sm);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--bl-stone);
  text-align: center;
}
.exlogo--img { border: 0; background: transparent; }
.exhibit__client {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: var(--text-heading);
  line-height: var(--leading-title);
  color: var(--bl-ink);
}
.exhibit__panels { margin-bottom: var(--space-9); }
.exres__eyebrow { margin-bottom: var(--space-7); }
.exfigs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-9);
  padding-bottom: var(--space-9);
  border-bottom: 1px solid var(--border-hairline);
}
.exfig__value {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: var(--text-display-2);
  line-height: 1;
  letter-spacing: var(--track-wordmark);
  color: var(--bl-ink);
}
.exfig__label { margin-top: var(--space-3); }
.exhibit__note { margin-top: var(--space-7); max-width: var(--measure-lead); }
.exhibit__soft { margin-top: var(--space-4); max-width: var(--measure-lead); }
.exhibit__fine { display: block; margin-top: var(--space-7); color: var(--bl-stone-muted); }

/* ---------- 04 Who we work with ---------- */
.fit__lead { margin-bottom: var(--space-11); }
.figures {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-9);
  padding-bottom: var(--space-11);
  border-bottom: 1px solid var(--border-on-ink);
}
.figure__value {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: var(--text-display-2);
  line-height: 1;
  letter-spacing: var(--track-wordmark);
  color: var(--bl-cream);
}
.figure__label { margin-top: var(--space-3); }
.figure__note {
  margin-top: var(--space-4);
  font-family: var(--font-body);
  font-weight: var(--weight-light);
  font-size: var(--text-body);
  line-height: var(--leading-loose);
  color: var(--bl-stone-muted);
  max-width: 280px;
}
.traits__eyebrow { margin: var(--space-11) 0 var(--space-7); }
.traits { border-bottom: 1px solid var(--border-on-ink-list); }
.trait {
  display: grid;
  grid-template-columns: 1fr 2.2fr;
  gap: var(--space-2) var(--space-9);
  align-items: baseline;
  padding: var(--space-6) 0;
  border-top: 1px solid var(--border-on-ink-list);
}
.trait__title {
  justify-self: start;
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: var(--text-subhead);
  line-height: var(--leading-title);
  color: var(--bl-ink);
  background: var(--bl-gold);
  padding: 6px 12px;
}
.trait__body {
  font-family: var(--font-body);
  font-weight: var(--weight-light);
  font-size: var(--text-body);
  line-height: var(--leading-loose);
  color: var(--bl-stone-light);
}

/* ---------- 05 The founder ---------- */
.founder {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: var(--space-11);
  align-items: start;
}
.portrait {
  aspect-ratio: 4 / 5;
  background: var(--bl-stone);
  display: flex;
  align-items: flex-end;
  padding: var(--space-5);
}
.portrait--photo { padding: 0; background: var(--bl-paper); display: block; }
.portrait img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(1); }
.portrait__label {
  font-family: var(--font-mono);
  font-size: var(--text-label-sm);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--bl-cream);
  line-height: 1.5;
}
.founder__name {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: var(--text-display-4);
  line-height: var(--leading-title);
  color: var(--bl-ink);
}
.founder__role { margin: var(--space-3) 0 var(--space-6); }
.founder__p {
  font-family: var(--font-body);
  font-weight: var(--weight-light);
  font-size: var(--text-lead);
  line-height: var(--leading-loose);
  color: var(--bl-ink-soft);
  max-width: var(--measure-body);
}
.founder__p + .founder__p { margin-top: var(--space-6); }
.founder__quote { margin-top: var(--space-9); max-width: var(--measure-body); }
.founder__close {
  margin-top: var(--space-8);
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: var(--text-heading);
  line-height: var(--leading-title);
  color: var(--bl-ink);
}

/* ---------- 07 Founding principle + CTA ---------- */
.principle__title {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: var(--text-display-2);
  line-height: var(--leading-title);
  letter-spacing: var(--track-tight);
  color: var(--bl-cream);
  max-width: var(--measure-hero);
}
.principle__line {
  margin-top: var(--space-6);
  font-family: var(--font-body);
  font-style: italic;
  font-size: var(--text-display-4);
  color: var(--bl-gold);
}
.principle__body {
  margin-top: var(--space-9);
  font-family: var(--font-body);
  font-weight: var(--weight-light);
  font-size: var(--text-body-lg);
  line-height: var(--leading-body);
  color: var(--bl-stone-light);
  max-width: var(--measure-body);
}
.cta__eyebrow {
  display: inline-block;
  margin-bottom: var(--space-6);
  font-size: 14px;
  font-weight: var(--weight-medium);
  padding: 6px 10px;
  color: var(--bl-ink);
  background: var(--bl-gold);
}
.cta__title {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: var(--text-display-3);
  line-height: var(--leading-display);
  letter-spacing: var(--track-tight);
  color: var(--bl-ink);
  max-width: var(--measure-hero);
}
.cta__body {
  margin-top: var(--space-8);
  font-family: var(--font-body);
  font-weight: var(--weight-light);
  font-size: var(--text-lead);
  line-height: var(--leading-body);
  color: var(--bl-ink-soft);
  max-width: var(--measure-lead);
}
.cta__btn { margin-top: var(--space-9); }
.closing__block p {
  margin-bottom: var(--space-8);
  font-family: var(--font-body);
  font-weight: var(--weight-light);
  font-size: var(--text-lead);
  line-height: var(--leading-body);
  color: var(--bl-stone-light);
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--bl-ink);
  color: var(--bl-cream);
  padding: var(--section-pad-y) 0;
}
.site-footer--compact { padding: var(--space-11) 0; }
.site-footer__inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: var(--space-8);
}
.site-footer__tag {
  margin-top: var(--space-3);
  font-family: var(--font-body);
  font-style: italic;
  font-size: var(--text-lead);
  color: var(--bl-gold);
}
.site-footer--compact .site-footer__tag { font-size: var(--text-body-lg); }
.site-footer__meta {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--bl-stone-muted);
  text-align: right;
  line-height: var(--leading-print);
}

/* ---------- /screen ---------- */
.screen-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.screen-head { padding: var(--space-13) 0; }
.screen-head__eyebrow { margin-bottom: var(--space-6); }
.screen-head__title {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: var(--text-display-4);
  line-height: var(--leading-title);
  letter-spacing: var(--track-tight);
  color: var(--bl-cream);
}
.screen-head__title { max-width: var(--measure-hero); }
.screen-head__count {
  margin-top: var(--space-5);
  font-family: var(--font-body);
  font-style: italic;
  font-size: var(--text-lead);
  color: var(--bl-gold);
}
.screen-head__lead {
  margin-top: var(--space-6);
  font-family: var(--font-body);
  font-weight: var(--weight-light);
  font-size: var(--text-lead);
  line-height: var(--leading-body);
  color: var(--bl-stone-light);
  max-width: var(--measure-body);
}
.screen-flow { flex: 1; }
.progress {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  margin-bottom: var(--space-9);
}
.progress__label { white-space: nowrap; }
.progress__cells { flex: 1; display: flex; gap: 3px; }
.progress__cell { flex: 1; height: 2px; background: var(--border-hairline); }
.progress__cell.is-on { background: var(--bl-gold); }
.q-title {
  margin-bottom: var(--space-7);
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: var(--text-display-4);
  line-height: var(--leading-title);
  color: var(--bl-ink);
}
.q-multi-hint { margin-bottom: var(--space-5); }
.options { display: flex; flex-direction: column; gap: var(--space-2); }
.option {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  text-align: left;
  width: 100%;
  cursor: pointer;
  padding: 16px 18px;
  background: var(--bl-vellum);
  border: 1px solid var(--border-hairline);
  color: var(--bl-ink);
  transition: var(--transition-ink);
}
.option__box {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  margin-top: 4px;
  background: transparent;
  border: 1px solid var(--bl-stone);
  transition: var(--transition-ink);
}
.option__label {
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: var(--text-body-lg);
  line-height: 1.4;
}
.option[aria-checked="true"] {
  background: var(--bl-ink);
  border-color: var(--bl-ink);
  color: var(--bl-cream);
}
.option[aria-checked="true"] .option__box {
  background: var(--bl-gold);
  border-color: var(--bl-gold);
}

.contact-intro {
  margin-bottom: var(--space-8);
  font-family: var(--font-body);
  font-weight: var(--weight-light);
  font-size: var(--text-lead);
  line-height: var(--leading-body);
  color: var(--bl-ink-soft);
  max-width: var(--measure-body);
}
.name-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
}
.field { display: flex; flex-direction: column; gap: var(--space-2); }
.field + .field, .name-row + .field { margin-top: var(--space-5); }
.name-row .field { margin-top: 0; }
.field input, .field textarea {
  font-family: var(--font-ui);
  font-size: var(--text-body-lg);
  line-height: 1.5;
  color: var(--bl-ink);
  background: var(--bl-vellum);
  border: 1px solid var(--border-hairline);
  padding: 13px 15px;
  width: 100%;
  outline: none;
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
  transition: var(--transition-ink);
}
.field input::placeholder, .field textarea::placeholder { color: var(--bl-stone-muted); }
.field textarea { resize: vertical; }
.field input:focus, .field textarea:focus { border-color: var(--bl-gold); }
.field input[aria-invalid="true"] { border-color: var(--border-error); }
.field__hint {
  font-family: var(--font-body);
  font-weight: var(--weight-light);
  font-size: var(--text-body-sm);
  line-height: var(--leading-body);
  color: var(--bl-stone);
}
.field__hint.is-error { color: var(--text-error); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.step-controls {
  margin-top: var(--space-9);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border-hairline);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.btn-back {
  font-family: var(--font-ui);
  font-weight: var(--weight-medium);
  font-size: var(--text-caption);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--bl-ink);
  transition: opacity var(--duration) var(--ease);
}
.btn-back.is-first { opacity: 0.35; }
.btn-next {
  font-family: var(--font-ui);
  font-weight: var(--weight-semibold);
  font-size: var(--text-caption);
  padding: 11px 20px;
  cursor: pointer;
  background: transparent;
  color: var(--bl-stone);
  border: 1px solid var(--border-hairline);
  transition: var(--transition-ink);
}
.btn-next.is-ready {
  background: var(--bl-gold);
  color: var(--bl-ink);
  border-color: var(--bl-gold);
}
.btn-next.is-ready:hover { background: var(--bl-gold-deep); border-color: var(--bl-gold-deep); }
.btn-next.is-busy { opacity: 0.6; cursor: progress; }
.submit-error {
  margin-top: var(--space-5);
  font-family: var(--font-body);
  font-weight: var(--weight-light);
  font-size: var(--text-body-sm);
  line-height: var(--leading-body);
  color: var(--text-error);
}
.submit-error[hidden] { display: none; }

.confirm { padding: var(--space-11) 0; }
.confirm__eyebrow { margin-bottom: var(--space-7); }
.confirm__title {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: var(--text-display-3);
  line-height: var(--leading-title);
  letter-spacing: var(--track-tight);
  color: var(--bl-ink);
}
.confirm__title:focus { outline: none; }
.confirm__body {
  margin-top: var(--space-6);
  font-family: var(--font-body);
  font-weight: var(--weight-light);
  font-size: var(--text-lead);
  line-height: var(--leading-body);
  color: var(--bl-ink-soft);
  max-width: var(--measure-body);
}
.confirm__foot {
  margin-top: var(--space-11);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border-hairline);
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  :root { --page-pad: 32px; --section-pad-y: 56px; }
  .hgrid--3 { grid-template-columns: 1fr; }
  .founder { grid-template-columns: 1fr; gap: var(--space-8); }
  .portrait { max-width: 340px; }
  .figures { grid-template-columns: 1fr 1fr; gap: var(--space-8); }
  .exfigs { grid-template-columns: 1fr 1fr; gap: var(--space-8); }
  .twocol { grid-template-columns: 1fr; gap: var(--space-8); }
}
@media (max-width: 620px) {
  :root { --page-pad: 22px; --section-pad-y: 44px; }
  .site-nav__links { display: none; }
  .site-header__inner { gap: var(--space-4); }
  .hgrid--2 { grid-template-columns: 1fr; }
  .hires { grid-template-columns: 1fr; gap: var(--space-8); }
  .figures { grid-template-columns: 1fr; gap: var(--space-7); }
  .exfigs { grid-template-columns: 1fr; gap: var(--space-7); }
  .exhibit__id { flex-direction: column; align-items: flex-start; }
  .trait { grid-template-columns: 1fr; }
  .hero__cta > a { flex: 1 1 100%; justify-content: center; }
  /* The problem table stays two columns — it is a comparison — but steps down. */
  .ptable__cell { font-size: var(--text-body); padding: var(--space-4); }
  .ptable__head { padding: var(--space-3) var(--space-4); }
  .site-footer__inner { flex-direction: column; align-items: flex-start; }
  .site-footer__meta { text-align: left; }
  .name-row { grid-template-columns: 1fr; gap: var(--space-4); }
}