@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 the cover artwork, which arrived on 16 September
   2026 and replaced a placeholder amber chosen the same day, before the
   artwork existed. The cover is a deep blue night scene whose one warm
   element is the gold "AI RESUME" in the title block. The blue end was the
   dominant hue and was unusable, because the sibling site
   linkbuildingintheeraofaisearchengines.com already owns cyan and two of the
   four reading as one colour defeats the purpose. So this is the gold, hue 45,
   taken as the median of 37,649 gold pixels in the title block rather than
   eyedropped from one of them. It measures 12.31:1 against ink, which it needs
   because the accent carries ink-coloured text on buttons.

   Hue 45 sits 27 degrees off aeogeollmseeding.com's lime at 72, which is the
   closest sibling, and gold against lime-green reads as two colours. It is
   also 27 degrees off --alert at hue 18, and far lighter: the accent is a
   bright tint, the alert a dark burnt orange.

   The placeholder it replaced was hue 38 at 10.39:1, close enough that the
   change is a correction rather than a redesign. Sampling still wins, because
   the argument for it is that the site and the cover are one object.

   The token is still named --acid rather than --amber so the four stylesheets
   stay diffable. Renaming it would make every future change between the 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:        #F6C738;
  --acid-press:  #F0B70B;
  --acid-tint:   #FBEFCC;

  --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);
  }
}