@charset "UTF-8";

/* ==========================================================================
   Entity home — stylesheet
   Type:    Satoshi (UI + display), Zodiak (editorial: extracts, endorsements)
   Palette: warm paper, near-black ink, one accent. Light-mode only by
            deliberate commitment; this is a publishing/marketing surface.

   The accent is sampled from this book's cover artwork, which arrived on
   5 September 2026 and replaced the placeholder violet chosen before it
   existed. The cover's wordmark runs a gradient from cyan into magenta. The
   cyan end was the dominant hue but was unusable, because the sibling site
   linkbuildingintheeraofaisearchengines.com already owns cyan and two of the
   three reading as one colour defeats the purpose. So this takes the magenta
   end, hue 280, lightened until it clears 9.6:1 against ink, since the accent
   carries ink-coloured text on buttons.

   The token is still named --acid rather than --cyan so the two stylesheets
   stay diffable. Renaming it would make every future change between the two
   sites look like a rewrite.
   ========================================================================== */

/* --- Tokens ------------------------------------------------------------- */

:root {
  --paper:       #FBFBF9;
  --paper-raise: #FFFFFF;
  --paper-sink:  #F3F3EF;

  --ink:         #0B0B0C;
  --ink-2:       #3B3C40;
  --ink-3:       #6E7076;
  --ink-4:       #96979C;

  --line:        #E4E4DE;
  --line-2:      #D3D3CB;
  --line-3:      #C2C2B8;

  --acid:        #DC9CFC;
  --acid-press:  #CC6FFB;
  --acid-tint:   #F7E9FE;

  --alert:       #A8481F;
  --alert-tint:  #FDF3EE;

  --r-sm: 4px;
  --r:    8px;
  --r-lg: 14px;

  --gutter: clamp(1.25rem, 4vw, 3rem);
  --measure: 68ch;

  --shell: 1220px;
  --shell-narrow: 780px;

  --step: 1.0625rem;

  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* --- Reset -------------------------------------------------------------- */

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

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

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

body {
  margin: 0;
  background-color: var(--paper);
  background-image: radial-gradient(circle at 1px 1px, rgba(11, 11, 12, .055) 1px, transparent 0);
  background-size: 22px 22px;
  background-attachment: fixed;
  color: var(--ink);
  font-family: "Satoshi", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: var(--step);
  line-height: 1.6;
  font-feature-settings: "ss01", "cv01";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 700;
  letter-spacing: -.032em;
  line-height: 1.08;
  text-wrap: balance;
}

p { margin: 0; }
ul, ol { margin: 0; padding: 0; }

a {
  color: inherit;
  text-decoration-color: var(--line-3);
  text-underline-offset: .18em;
  text-decoration-thickness: 1px;
  transition: text-decoration-color .18s var(--ease), color .18s var(--ease);
}
a:hover { text-decoration-color: var(--ink); }

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

::selection { background: var(--acid); color: var(--ink); }

/* --- Skip link ---------------------------------------------------------- */

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: .75rem 1.25rem;
  background: var(--ink);
  color: var(--paper);
  font-weight: 600;
  text-decoration: none;
}
.skip:focus { left: 0; }

/* --- Shell -------------------------------------------------------------- */

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

.shell--narrow { max-width: var(--shell-narrow); }

.section { padding-block: clamp(3.5rem, 8vw, 7rem); }
.section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }

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

/* --- Draft banner ------------------------------------------------------- */

.draftbar {
  position: relative;
  z-index: 30;
  background: var(--ink);
  color: var(--paper);
  font-size: .8125rem;
  line-height: 1.5;
  letter-spacing: -.005em;
}
.draftbar .shell {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem .9rem;
  align-items: baseline;
  padding-block: .7rem;
}
.draftbar strong {
  font-weight: 700;
  color: var(--acid);
  letter-spacing: .02em;
  text-transform: uppercase;
  font-size: .6875rem;
}
.draftbar span { color: #B9BABE; }

/* --- Masthead ----------------------------------------------------------- */

.masthead {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(251, 251, 249, .88);
  backdrop-filter: saturate(1.6) blur(12px);
  -webkit-backdrop-filter: saturate(1.6) blur(12px);
  border-bottom: 1px solid var(--line);
}

.masthead__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 68px;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-weight: 700;
  font-size: .9375rem;
  letter-spacing: -.02em;
  text-decoration: none;
  max-width: 46ch;
}
.wordmark__dot {
  width: 9px; height: 9px;
  border-radius: 2px;
  background: var(--acid);
  border: 1px solid var(--acid-press);
  flex: none;
}
.wordmark__text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav {
  display: flex;
  align-items: center;
  gap: clamp(.75rem, 2vw, 1.75rem);
  list-style: none;
}
.nav a {
  font-size: .875rem;
  font-weight: 500;
  color: var(--ink-2);
  text-decoration: none;
  white-space: nowrap;
}
.nav a:hover { color: var(--ink); }
.nav a[aria-current="page"] {
  color: var(--ink);
  font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--acid);
}

.masthead__nav { display: contents; }

@media (max-width: 1023px) {
  .masthead__in { flex-wrap: wrap; min-height: 0; padding-block: .75rem; }
  .masthead__nav {
    display: flex;
    flex-basis: 100%;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    order: 3;
    padding-top: .75rem;
    border-top: 1px solid var(--line);
  }
  .masthead__nav > nav { min-width: 0; flex: 1 1 auto; }
  .masthead__nav > .btn { flex: 0 0 auto; }
  /* min-width:0 is load-bearing. Without it the flex item refuses to shrink
     below the nav's intrinsic width, its overflow-x never engages, and the
     whole page scrolls sideways on a phone. */
  .nav {
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 2px;
    -webkit-overflow-scrolling: touch;
  }
  .nav::-webkit-scrollbar { display: none; }
}

/* --- Buttons ------------------------------------------------------------ */

.btn {
  --btn-bg: var(--ink);
  --btn-fg: var(--paper);
  --btn-line: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .8rem 1.35rem;
  border: 1px solid var(--btn-line);
  border-radius: var(--r);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font: inherit;
  font-size: .9375rem;
  font-weight: 600;
  letter-spacing: -.012em;
  text-decoration: none;
  /* Labels wrap. Some buttons carry the full 68-character book title, and
     nowrap made those 509px wide, scrolling the whole page sideways on a
     phone. Short labels never wrap anyway. */
  white-space: normal;
  text-align: center;
  text-wrap: balance;
  max-width: 100%;
  cursor: pointer;
  transition: transform .16s var(--ease), background-color .16s var(--ease), box-shadow .16s var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  --btn-bg: var(--acid);
  --btn-fg: var(--ink);
  --btn-line: var(--acid-press);
  box-shadow: 0 1px 0 rgba(11,11,12,.06);
}
.btn--primary:hover { --btn-bg: var(--acid-press); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  --btn-line: var(--line-2);
}
.btn--ghost:hover { --btn-bg: var(--paper-raise); --btn-line: var(--line-3); }

.btn--sm { padding: .55rem 1rem; font-size: .875rem; }

.btn[aria-disabled="true"] {
  --btn-bg: var(--paper-sink);
  --btn-fg: var(--ink-4);
  --btn-line: var(--line);
  cursor: not-allowed;
  pointer-events: none;
}

.btn__arrow { transition: transform .18s var(--ease); }
.btn:hover .btn__arrow { transform: translateX(2px); }

.btnrow {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
}

/* --- Type ---------------------------------------------------------------- */

/* Sized for a 68-character title. A bigger setting looks better on a short
   book name but pushes the description and the buy button off the fold,
   and this title is not negotiable. */
.display {
  font-size: clamp(2.1rem, 4.9vw, 3.85rem);
  font-weight: 800;
  letter-spacing: -.038em;
  line-height: 1;
}

.h2 {
  font-size: clamp(1.7rem, 3.2vw, 2.55rem);
  letter-spacing: -.034em;
}

.h3 {
  font-size: clamp(1.15rem, 1.7vw, 1.4rem);
  letter-spacing: -.024em;
}

.display--sm {
  font-size: clamp(2.1rem, 4.4vw, 3.4rem);
  letter-spacing: -.036em;
  line-height: 1.02;
}

.lede {
  font-size: clamp(1.125rem, 1.8vw, 1.375rem);
  line-height: 1.5;
  letter-spacing: -.017em;
  color: var(--ink-2);
  max-width: 46ch;
  text-wrap: pretty;
}

.lede--wide { max-width: 62ch; margin-top: 1.25rem; }

.meta-line { margin-top: 1rem; font-size: .8125rem; }

.eyebrow {
  display: inline-block;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.muted { color: var(--ink-3); }

.prose { max-width: var(--measure); }
.prose > * + * { margin-top: 1.15em; }
.prose p { text-wrap: pretty; color: var(--ink-2); }
.prose strong { color: var(--ink); font-weight: 600; }

.stack > * + * { margin-top: 1rem; }
.stack--lg > * + * { margin-top: 1.75rem; }

.sectionhead {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: clamp(1.75rem, 3vw, 2.75rem);
}

/* --- Missing-field chip -------------------------------------------------- */
/* Any fact not yet supplied renders here rather than being invented.        */

.tbc {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .12em .5em;
  border: 1px dashed var(--line-3);
  border-radius: var(--r-sm);
  background: var(--paper-sink);
  color: var(--ink-4);
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-size: .78em;
  font-weight: 500;
  letter-spacing: -.01em;
  line-height: 1.5;
  white-space: normal;
  max-width: 100%;
  vertical-align: baseline;
}
.tbc::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--line-3);
  flex: none;
}

.tbc--block {
  display: flex;
  white-space: normal;
  padding: 1.1rem 1.25rem;
  font-size: .875rem;
  line-height: 1.6;
}

/* --- Question and answer blocks ----------------------------------------- */
/* The brief's core content shape: a question-format H2 with a declarative
   statement of fact as the first sentence beneath it, so that a chunk
   retrieved in isolation answers on its own. The lead sentence is given
   visual weight to match the structural weight it carries.               */

.qa__wrap > .qa + .qa {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: clamp(2.5rem, 5vw, 4rem);
  border-top: 1px solid var(--line);
}

.qa {
  display: grid;
  grid-template-columns: minmax(0, 21rem) minmax(0, 1fr);
  gap: clamp(1rem, 4vw, 3.5rem);
  align-items: start;
}

.qa__q {
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  letter-spacing: -.028em;
  line-height: 1.18;
  text-wrap: balance;
}

.qa__a { max-width: var(--measure); min-width: 0; }
.qa__a > * + * { margin-top: 1.05em; }
.qa__a p { color: var(--ink-2); text-wrap: pretty; }

.qa__lead {
  font-size: 1.125rem;
  line-height: 1.55;
  letter-spacing: -.014em;
  color: var(--ink) !important;
  font-weight: 500;
}

.qa__a ul.rows p { color: inherit; }

@media (max-width: 900px) {
  .qa { grid-template-columns: minmax(0, 1fr); gap: .9rem; }
}

/* A canonical statement of fact, given deliberate prominence. Used for the
   avatar relationship statement and the publisher definition, both of which
   the brief requires be stated plainly and never paraphrased.            */
.statement {
  position: relative;
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 2px solid var(--ink);
  font-size: clamp(1.125rem, 1.9vw, 1.45rem);
  font-weight: 600;
  letter-spacing: -.024em;
  line-height: 1.35;
  max-width: 44ch;
  text-wrap: pretty;
}
.statement::after {
  content: "";
  position: absolute;
  top: -2px;
  left: 0;
  width: 3.5rem;
  height: 2px;
  background: var(--acid-press);
}

/* --- Hero ---------------------------------------------------------------- */

.hero { padding-block: clamp(3rem, 7vw, 6rem) clamp(2.5rem, 5vw, 4.5rem); }

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, .85fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

.hero__body > * + * { margin-top: 1.5rem; }

.hero__avail {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .9rem;
  font-size: .8125rem;
  color: var(--ink-3);
}
.hero__avail li { list-style: none; }
.hero__avail li + li::before {
  content: "";
  display: inline-block;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--line-3);
  margin-right: .9rem;
  vertical-align: middle;
}

@media (max-width: 1023px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); }
  /* Title first, cover second. This is an entity declaration page, so the
     H1 leads; a cover placeholder pushing it off the fold is the wrong
     trade even once a real cover exists. */
  .hero__aside { max-width: 300px; }
}

/* --- Cover -------------------------------------------------------------- */

.cover {
  position: relative;
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  background: var(--paper-raise);
  padding: clamp(1.25rem, 3vw, 2.25rem);
  box-shadow: 0 1px 2px rgba(11,11,12,.04), 0 12px 32px -18px rgba(11,11,12,.28);
}
.cover img {
  width: 100%;
  border-radius: var(--r-sm);
  box-shadow: 0 2px 6px rgba(11,11,12,.1), 0 18px 40px -22px rgba(11,11,12,.45);
}
.cover__empty {
  aspect-ratio: 2 / 3;
  display: grid;
  place-content: center;
  gap: .6rem;
  text-align: center;
  padding: 1.5rem;
  border: 1px dashed var(--line-3);
  border-radius: var(--r-sm);
  background: var(--paper-sink);
  color: var(--ink-4);
}
.cover__empty .tbc { white-space: normal; }
.cover__hint { font-size: .75rem; max-width: 22ch; }

.cover--sm { padding: 1rem; }

/* --- Spec sheet (EAV declaration) --------------------------------------- */
/* The signature element: the book's attributes as a precision spec table.  */

.spec {
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  background: var(--paper-raise);
  overflow: hidden;
}

.spec__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
  padding: 1rem 1.35rem;
  border-bottom: 1px solid var(--line);
  background: var(--paper-sink);
}

.spec__note {
  font-size: .8125rem;
  color: var(--ink-3);
  max-width: 52ch;
}

.spec__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
}

.spec__row {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  padding: 1.1rem 1.35rem;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  min-width: 0;
}
.spec__list > .spec__row:nth-child(3n) { border-right: 0; }

.spec__row dt {
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .085em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.spec__row dd {
  margin: 0;
  font-size: .9375rem;
  font-weight: 500;
  letter-spacing: -.014em;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.spec__row dd.is-num {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-size: .875rem;
  letter-spacing: -.02em;
}

@media (max-width: 1023px) {
  .spec__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .spec__list > .spec__row:nth-child(3n) { border-right: 1px solid var(--line); }
  .spec__list > .spec__row:nth-child(2n) { border-right: 0; }
}
@media (max-width: 559px) {
  .spec__list { grid-template-columns: minmax(0, 1fr); }
  .spec__list > .spec__row { border-right: 0 !important; }
}

/* --- Panels & rows ------------------------------------------------------ */

.panel {
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  background: var(--paper-raise);
  padding: clamp(1.25rem, 2.5vw, 2rem);
}

.panel--sink { background: var(--paper-sink); }

.rows {
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  background: var(--paper-raise);
  overflow: hidden;
  list-style: none;
}

.row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  padding: 1.15rem 1.4rem;
}
.row + .row { border-top: 1px solid var(--line); }

.row__main { min-width: 0; flex: 1 1 22rem; }
.row__title {
  font-size: 1.0625rem;
  font-weight: 650;
  letter-spacing: -.022em;
}
.row__meta {
  margin-top: .2rem;
  font-size: .875rem;
  color: var(--ink-3);
}
.row__quote {
  margin-top: .5rem;
  font-family: "Zodiak", Georgia, "Times New Roman", serif;
  font-size: 1.0625rem;
  line-height: 1.45;
  color: var(--ink);
  max-width: 52ch;
}
.row__side {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: .6rem;
}

/* --- Contributor index -------------------------------------------------- */
/* Numbered ledger, not an avatar grid. Children indent beneath the number. */

.ledger { list-style: none; }

.ledger__item {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr) auto;
  gap: 0 1.25rem;
  align-items: baseline;
  padding: 1.4rem 0;
  border-top: 1px solid var(--line);
}
.ledger__item:last-child { border-bottom: 1px solid var(--line); }

.ledger__num {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-size: .8125rem;
  font-weight: 500;
  color: var(--ink-4);
  letter-spacing: -.02em;
}

.ledger__name {
  font-size: clamp(1.25rem, 2.1vw, 1.6rem);
  font-weight: 700;
  letter-spacing: -.03em;
}
.ledger__name a { text-decoration: none; }
.ledger__name a:hover { box-shadow: inset 0 -2px 0 var(--acid); }

.ledger__body {
  grid-column: 2;
  margin-top: .45rem;
  padding-left: 0;
  color: var(--ink-2);
  font-size: .9375rem;
  max-width: 58ch;
}
.ledger__body > * + * { margin-top: .3rem; }

.ledger__chapter {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: .8125rem;
  color: var(--ink-3);
}
.ledger__chapter::before {
  content: "";
  width: 14px;
  height: 1px;
  background: var(--line-3);
  flex: none;
}

.ledger__side { grid-row: 1; grid-column: 3; }

@media (max-width: 767px) {
  .ledger__item { grid-template-columns: 2.25rem minmax(0, 1fr); }
  /* Explicit rows so the action button lands after the detail, not wedged
     between the name and what it describes. */
  .ledger__body { grid-row: 2; grid-column: 2; margin-top: .35rem; }
  .ledger__side { grid-row: 3; grid-column: 2; margin-top: .9rem; }
}

/* --- Table of contents -------------------------------------------------- */

.toc { list-style: none; }
.toc__item {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr) auto;
  gap: .25rem 1.25rem;
  align-items: baseline;
  padding: .95rem 0;
  border-top: 1px solid var(--line);
}
.toc__item:last-child { border-bottom: 1px solid var(--line); }
.toc__num {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-size: .8125rem;
  color: var(--ink-4);
}
.toc__title { font-weight: 600; letter-spacing: -.02em; }
.toc__by { font-size: .8125rem; color: var(--ink-3); }
@media (max-width: 767px) {
  .toc__item { grid-template-columns: 2.25rem minmax(0, 1fr); }
  .toc__by { grid-column: 2; }
}

/* --- Editorial (Zodiak) ------------------------------------------------- */

.quote {
  margin: 0;
  border-top: 2px solid var(--ink);
  padding-top: clamp(1.5rem, 3vw, 2.25rem);
}
.quote__text {
  font-family: "Zodiak", Georgia, "Times New Roman", serif;
  font-size: clamp(1.4rem, 3vw, 2.15rem);
  font-weight: 400;
  line-height: 1.28;
  letter-spacing: -.022em;
  text-wrap: pretty;
  max-width: 26ch;
}
.quote__by {
  margin-top: 1.25rem;
  font-size: .875rem;
  color: var(--ink-3);
}
.quote__by strong {
  display: block;
  color: var(--ink);
  font-weight: 650;
  font-size: .9375rem;
  letter-spacing: -.014em;
}

.extract {
  font-family: "Zodiak", Georgia, "Times New Roman", serif;
  font-size: 1.1875rem;
  line-height: 1.68;
  letter-spacing: -.005em;
  max-width: 34em;
}
.extract > * + * { margin-top: 1.2em; }
.extract p { color: var(--ink); text-wrap: pretty; }
.extract p:first-of-type::first-letter {
  float: left;
  font-size: 3.4em;
  line-height: .82;
  font-weight: 500;
  padding: .06em .09em 0 0;
}

/* --- FAQ ---------------------------------------------------------------- */
/* Plain crawlable text. No JS accordions — AI systems must read the answer. */

.faq { list-style: none; }
.faq__item {
  padding: clamp(1.4rem, 2.5vw, 2rem) 0;
  border-top: 1px solid var(--line);
}
.faq__item:last-child { border-bottom: 1px solid var(--line); }
.faq__q {
  font-size: clamp(1.125rem, 1.9vw, 1.375rem);
  letter-spacing: -.026em;
  max-width: 34ch;
}
.faq__a {
  margin-top: .7rem;
  max-width: 62ch;
  color: var(--ink-2);
}
.faq__a > * + * { margin-top: .75em; }

/* --- Person header ------------------------------------------------------ */

.person {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 320px);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}
@media (max-width: 767px) {
  .person { grid-template-columns: minmax(0, 1fr); }
  .person__aside { max-width: 260px; }
}

.portrait {
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  background: var(--paper-raise);
  padding: .75rem;
}
.portrait img { border-radius: var(--r); }
.portrait__empty {
  aspect-ratio: 4 / 5;
  display: grid;
  place-content: center;
  padding: 1.25rem;
  text-align: center;
  border: 1px dashed var(--line-3);
  border-radius: var(--r);
  background: var(--paper-sink);
}
.portrait__empty .tbc { white-space: normal; }

.deflist {
  list-style: none;
  border-top: 1px solid var(--line);
}
.deflist__row {
  display: grid;
  grid-template-columns: minmax(0, 10rem) minmax(0, 1fr);
  gap: .25rem 1.25rem;
  padding: .8rem 0;
  border-bottom: 1px solid var(--line);
}
.deflist__row dt {
  font-size: .8125rem;
  font-weight: 600;
  color: var(--ink-3);
  letter-spacing: -.008em;
}
.deflist__row dd {
  margin: 0;
  font-size: .9375rem;
  color: var(--ink);
  overflow-wrap: anywhere;
}
@media (max-width: 559px) {
  .deflist__row { grid-template-columns: minmax(0, 1fr); }
}

.linklist {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  list-style: none;
}
.linklist a {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .4rem .75rem;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: var(--paper-raise);
  font-size: .8125rem;
  font-weight: 550;
  text-decoration: none;
  color: var(--ink-2);
}
.linklist a:hover { border-color: var(--ink); color: var(--ink); }

/* --- Breadcrumb --------------------------------------------------------- */

.crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  list-style: none;
  font-size: .8125rem;
  color: var(--ink-3);
  padding-block: 1.25rem 0;
}
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; }
.crumbs li + li::before {
  content: "/";
  margin-right: .4rem;
  color: var(--line-3);
}
.crumbs [aria-current="page"] { color: var(--ink-2); }

/* --- Empty state -------------------------------------------------------- */

.empty {
  border: 1px dashed var(--line-3);
  border-radius: var(--r-lg);
  background: var(--paper-raise);
  padding: clamp(2rem, 5vw, 3.5rem);
  text-align: center;
}
.empty__title {
  font-size: 1.25rem;
  letter-spacing: -.026em;
}
.empty p {
  margin: .6rem auto 0;
  max-width: 48ch;
  color: var(--ink-3);
  font-size: .9375rem;
}
.empty .btnrow { justify-content: center; margin-top: 1.5rem; }

/* --- Status pill -------------------------------------------------------- */

.pill {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .22rem .6rem;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: var(--paper-sink);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: -.006em;
  color: var(--ink-3);
  white-space: nowrap;
}
.pill--live {
  background: var(--acid-tint);
  border-color: var(--acid-press);
  color: #3F5407;
}

/* --- CTA band ----------------------------------------------------------- */

.cta {
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  background: var(--paper-raise);
  padding: clamp(1.75rem, 4vw, 3rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem 2.5rem;
}
.cta__title {
  font-size: clamp(1.35rem, 2.6vw, 2rem);
  letter-spacing: -.03em;
  max-width: 22ch;
}
.cta p {
  margin-top: .5rem;
  color: var(--ink-3);
  font-size: .9375rem;
  max-width: 44ch;
}

/* --- Footer ------------------------------------------------------------- */

.foot {
  border-top: 1px solid var(--line);
  background: var(--paper-raise);
  padding-block: clamp(2.5rem, 5vw, 4rem) 2rem;
}

.foot__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) repeat(4, minmax(0, 1fr));
  gap: 2.5rem 2rem;
}
@media (max-width: 1023px) {
  .foot__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .foot__group--brand { grid-column: 1 / -1; }
}
@media (max-width: 620px) { .foot__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 400px) { .foot__grid { grid-template-columns: minmax(0, 1fr); } }

.foot__title {
  font-weight: 700;
  font-size: .9375rem;
  letter-spacing: -.024em;
  line-height: 1.35;
  max-width: 30ch;
}
.foot__base a { color: var(--ink-3); }

.foot__group h2 {
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: .9rem;
}
.foot__group ul { list-style: none; }
.foot__group li + li { margin-top: .5rem; }
.foot__group a {
  font-size: .875rem;
  color: var(--ink-2);
  text-decoration: none;
}
.foot__group a:hover { color: var(--ink); text-decoration: underline; }

.foot__blurb {
  font-size: .875rem;
  color: var(--ink-3);
  max-width: 40ch;
  margin-top: .9rem;
}

.foot__base {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 1.5rem;
  justify-content: space-between;
  font-size: .8125rem;
  color: var(--ink-4);
}

/* --- Utility ------------------------------------------------------------ */

.vh {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
@media (max-width: 767px) { .grid-2 { grid-template-columns: minmax(0, 1fr); } }

.split {
  display: grid;
  grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
@media (max-width: 900px) { .split { grid-template-columns: minmax(0, 1fr); } }

/* --------------------------------------------------------------- chapnav */
/* Previous/next chapter. Hairline rules and generous space, no cards and no
   left rail, matching the .toc treatment directly above it. */
.chapnav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.chapnav__item {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  padding: 1.25rem 0;
  text-decoration: none;
  min-width: 0;
}
.chapnav__item--next {
  text-align: right;
  align-items: flex-end;
  border-left: 1px solid var(--line);
  padding-left: 1.25rem;
}
.chapnav__dir {
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.chapnav__title {
  font-size: 1rem;
  line-height: 1.35;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
  text-decoration-color: var(--line-3);
}
.chapnav__item:hover .chapnav__title { text-decoration-color: var(--ink); }

@media (max-width: 599px) {
  .chapnav { grid-template-columns: 1fr; gap: 0; }
  .chapnav__item--next {
    text-align: left;
    align-items: flex-start;
    border-left: 0;
    padding-left: 0;
    border-top: 1px solid var(--line);
  }
}