/* ==========================================================================
   Find Me Funders — the research layer
   ==========================================================================

   The inner pages of this site have one job that no competitor attempts: to
   show what a lender puts on the record and, just as plainly, what it leaves
   off. 21 of 180 product records publish a price. Everything below is built to
   make that absence legible rather than embarrassing.

   Two additions to the locked design system in DESIGN.md:

   1. A DATA FACE. Figures set in the body face do not align in columns, and
      this is a site people read in columns. Tabular monospace for every
      number, code and key.
   2. A DISCLOSURE AXIS. Filled versus hollow, in ink rather than brand blue,
      so "published / not published" never competes with "this is a link".

   Everything else — palette, Plus Jakarta Sans, elevation, motion — is
   inherited unchanged.
   ========================================================================== */

:root {
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* Disclosure axis. Deliberately not brand blue. */
  --disc-on: #16233F;        /* on the record */
  --disc-off: #D5DCEA;       /* nothing published */
  --disc-full: #067A55;
  --disc-partial: #2549E8;
  --disc-thin: #A85B10;
  --disc-minimal: #9AA4BC;

  --rail: 320px;
}

/* --- The research shell ---------------------------------------------------
   Content left, an evidence rail right that carries the ledger, the source
   count and the next action. The rail is the part a competitor's blog-template
   layout has nowhere to put. */
.rsh{ display:grid; gap: var(--s6); align-items:start; }
@media (min-width: 1040px){
  .rsh{ grid-template-columns: minmax(0,1fr) var(--rail); gap: var(--s8); }
  .rsh__rail{ position: sticky; top: calc(var(--stick-top, 76px) + var(--s5)); }
}
.rsh__rail{ display:grid; gap: var(--s4); }

.rcard{ padding: var(--s5); background: var(--surface); border:1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--sh-1); }
.rcard--dark{ background: var(--ink); border-color: transparent; color: var(--on-dark-2); }
.rcard--dark h3{ color:#fff; }
.rcard--dark .btn{ width:100%; }
.rcard__h{ margin:0 0 var(--s3); font-size:.7rem; font-weight:800; letter-spacing:.08em;
  text-transform:uppercase; color: var(--ink-3); }
.rcard--dark .rcard__h{ color: var(--on-dark-2); }
.rcard__row{ display:flex; align-items:baseline; justify-content:space-between; gap: var(--s3);
  padding-block: 7px; font-size:.85rem; }
.rcard__row + .rcard__row{ border-top:1px solid var(--line); }
.rcard--dark .rcard__row + .rcard__row{ border-top-color: rgba(255,255,255,.12); }
.rcard__row dt, .rcard__row span:first-child{ color: var(--ink-3); }
.rcard--dark .rcard__row span:first-child{ color: var(--on-dark-2); }
.rcard__row dd, .rcard__row b{ margin:0; font-family: var(--mono); font-size:.82rem;
  font-weight:600; color: var(--ink); font-variant-numeric: tabular-nums; }
.rcard--dark .rcard__row b{ color:#fff; }
.rcard__note{ margin: var(--s3) 0 0; font-size:.75rem; line-height:1.55; color: var(--ink-3); }
.rcard--dark .rcard__note{ color: rgba(255,255,255,.62); }

/* --- The ledger (signature) -----------------------------------------------
   One cell per publishable field. Filled means the lender said it; hollow
   means it did not. The row is the same width everywhere it appears, so two
   lenders can be compared at a glance without reading a number. */
.ledger{ display:flex; align-items:center; gap: var(--s3); }
.ledger__cells{ display:flex; gap:3px; }
.ledger__cell{ display:block; width:9px; height:22px; border-radius:2px;
  background: var(--disc-off); }
.ledger__cell.is-on{ background: var(--disc-on); }
.ledger__read{ display:flex; flex-direction:column; line-height:1.15; }
.ledger__read b{ font-family: var(--mono); font-size:1.02rem; font-weight:700;
  color: var(--ink); font-variant-numeric: tabular-nums; }
.ledger__read b span{ font-size:.72rem; font-weight:500; color: var(--ink-3); }
.ledger__read em{ font-style:normal; font-size:.72rem; color: var(--ink-3); }
.ledger--compact .ledger__cell{ width:6px; height:14px; border-radius:1.5px; }
.ledger--full .ledger__cell.is-on{ background: var(--disc-full); }
.ledger--partial .ledger__cell.is-on{ background: var(--disc-partial); }
.ledger--thin .ledger__cell.is-on{ background: var(--disc-thin); }
.ledger--minimal .ledger__cell.is-on{ background: var(--disc-minimal); }

.ledger-key{ display:flex; flex-wrap:wrap; gap: var(--s2) var(--s5); margin-top: var(--s4);
  font-size:.75rem; color: var(--ink-3); }
.ledger-key span{ display:inline-flex; align-items:center; gap:6px; }
.ledger-key i{ width:9px; height:14px; border-radius:2px; background: var(--disc-off); }
.ledger-key i.is-on{ background: var(--disc-on); }

/* --- Gaps -----------------------------------------------------------------
   The inversion: a list of what is missing, presented as the useful part. */
.gaps{ padding: var(--s5) var(--s6); margin-block: var(--s6);
  background: var(--flag-50); border:1px solid #F0D5AC; border-radius: var(--r-lg); }
.gaps__h{ display:flex; align-items:center; gap: var(--s2); margin:0 0 var(--s3);
  font-size:1rem; color: var(--flag); }
.gaps__h svg{ width:18px; height:18px; flex:none; }
.gaps__list{ display:flex; flex-wrap:wrap; gap: var(--s2); list-style:none; margin:0; padding:0; }
.gaps__list li{ padding: 4px 11px; border-radius: var(--r-full); background:#fff;
  border:1px solid #EBD3AE; font-size:.82rem; font-weight:600; color: var(--flag); }
.gaps__note{ margin: var(--s4) 0 0; font-size:.82rem; line-height:1.6; color: var(--ink-2); }

/* --- Figures --------------------------------------------------------------
   Every number on a research page is monospaced and tabular. This is the
   single change that makes two lender pages comparable by eye. */
.fig, table.cmp td, .statbox dd, .calc__out dd, .rankrow__facts dd,
.lcard__facts dd, .kv__v{ font-variant-numeric: tabular-nums; }
.fig{ font-family: var(--mono); font-weight:600; }

.kv{ display:grid; gap:0; margin:0; }
.kv__row{ display:grid; grid-template-columns: minmax(140px,.9fr) minmax(0,1.4fr);
  gap: var(--s4); padding-block: var(--s3); border-top:1px solid var(--line);
  align-items:baseline; }
.kv__row:first-child{ border-top:0; }
.kv__k{ font-size:.78rem; font-weight:700; letter-spacing:.02em; color: var(--ink-3); }
.kv__v{ font-size:.94rem; color: var(--ink); }
.kv__v .na{ font-family: inherit; }

/* --- Page head ------------------------------------------------------------ */
.rhead{ padding-bottom: var(--s6); margin-bottom: var(--s6);
  border-bottom:1px solid var(--line); }
.rhead h1{ font-size: clamp(1.9rem, 4vw, 2.9rem); line-height:1.06; letter-spacing:-.035em;
  margin: var(--s3) 0 var(--s4); }
.rhead__lede{ max-width: 62ch; font-size: clamp(1rem, 1.3vw, 1.1rem); color: var(--ink-2); }
.rhead__meta{ display:flex; flex-wrap:wrap; align-items:center; gap: var(--s2) var(--s4);
  margin-top: var(--s5); font-size:.8rem; color: var(--ink-3); }
.rhead__meta .fig{ font-size:.8rem; }

/* --- Product terms table -------------------------------------------------- */
.terms{ width:100%; border-collapse:collapse; font-size:.9rem; }
.terms th, .terms td{ padding: var(--s3) var(--s4); text-align:left; vertical-align:top;
  border-bottom:1px solid var(--line); }
.terms thead th{ position:sticky; top: var(--stick-top, 0px); z-index:2; background: var(--bg-2);
  font-size:.7rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  color: var(--ink-2); }
.terms tbody th{ font-weight:700; }
.terms tbody tr:hover{ background: var(--bg); }
.terms td{ font-variant-numeric: tabular-nums; }
.terms .terms__ledger{ width:1%; white-space:nowrap; }

/* --- Contradiction flag ---------------------------------------------------
   Surfaced as a first-class element because it is the most actionable thing
   on the page: it tells you which number to get in writing. */
.conflict{ display:flex; gap: var(--s3); padding: var(--s4) var(--s5); margin-block: var(--s4);
  background:#FDECEC; border:1px solid #F3C4C4; border-left:4px solid #A32020;
  border-radius: var(--r-md); }
.conflict svg{ flex:none; width:18px; height:18px; margin-top:2px; color:#A32020; }
.conflict b{ display:block; margin-bottom:2px; color:#7C1A1A; font-size:.86rem; }
.conflict p{ margin:0; font-size:.85rem; line-height:1.6; color: var(--ink-2); }

/* --- Calculators ---------------------------------------------------------- */
.calcnav{ display:flex; flex-wrap:wrap; gap: var(--s2); margin-top: var(--s6); }
.calcnav a{ display:inline-flex; align-items:center; min-height:36px; padding: 6px var(--s4);
  border:1px solid var(--line-2); border-radius: var(--r-full); background: var(--surface);
  font-size:.82rem; font-weight:600; color: var(--ink-2); text-decoration:none; }
.calcnav a:hover{ border-color: var(--brand); color: var(--brand); }

.calcgrid{ display:grid; gap: var(--s6); }
@media (min-width: 1100px){
  .calcgrid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .calcgrid > #compare, .calcgrid > #stack{ grid-column:1 / -1; }
}
.calc__head{ display:flex; align-items:center; gap: var(--s3); margin-bottom: var(--s2); }
.calc__head h2{ margin:0; font-size:1.18rem; letter-spacing:-.02em; }
.calc__tag{ flex:none; padding:3px 9px; border-radius: var(--r-full); background: var(--brand-50);
  color: var(--brand-700); font-size:.64rem; font-weight:800; letter-spacing:.07em;
  text-transform:uppercase; }
.calc__tag--warn{ background: var(--flag-50); color: var(--flag); }
.calc__sub{ margin:0 0 var(--s3); font-size:.74rem; font-weight:800; letter-spacing:.07em;
  text-transform:uppercase; color: var(--ink-3); }
.calc__two{ display:grid; gap: var(--s5); margin-bottom: var(--s5); }
@media (min-width: 700px){ .calc__two{ grid-template-columns:repeat(2,1fr); } }
.calc__form--col{ display:block; }
.calc__form--wide{ grid-template-columns:repeat(2,1fr); }
@media (min-width: 900px){ .calc__form--wide{ grid-template-columns:repeat(4,1fr); } }
.calc__verdict{ margin-top: var(--s4); padding: var(--s4); border-radius: var(--r-md);
  background: var(--grad-soft); border:1px solid var(--brand-100);
  font-size:.9rem; font-weight:600; color: var(--ink); }
.calc__warn--stop{ background:#FDECEC !important; color:#A32020 !important; }

/* Debt-service gauge: three zones, because the thresholds are the point. */
.gauge{ margin: var(--s5) 0 var(--s2); }
.gauge__track{ position:relative; display:flex; height:10px; border-radius: var(--r-full);
  overflow:hidden; background: var(--bg-2); }
.gauge__zone{ display:block; height:100%; }
.gauge__zone--ok{ flex:12; background:#B7E2D3; }
.gauge__zone--watch{ flex:8; background:#F0D5AC; }
.gauge__zone--stop{ flex:20; background:#F3C4C4; }
.gauge__pin{ position:absolute; top:-4px; width:3px; height:18px; border-radius:2px;
  background: var(--ink); transition: left var(--dur-2) var(--ease); }
.gauge__scale{ display:flex; justify-content:space-between; margin-top:6px;
  font-family: var(--mono); font-size:.66rem; color: var(--ink-3); }

@media (prefers-reduced-motion: reduce){ .gauge__pin{ transition:none; } }

.rhead__tags{ display:flex; flex-wrap:wrap; align-items:center; gap: var(--s2); }
.rcard__rows{ margin: var(--s4) 0 0; }

/* --- Verdict box ----------------------------------------------------------
   First thing on a review, because a reader who scrolls no further should
   still leave with the useful sentence. */
.verdictbox{ padding: var(--s6); margin-bottom: var(--s6); border-radius: var(--r-lg);
  background: var(--grad-soft); border:1px solid var(--brand-100); }
.verdictbox h2{ margin:0 0 var(--s3); font-size:.74rem; font-weight:800; letter-spacing:.08em;
  text-transform:uppercase; color: var(--brand-700); }
.verdictbox__lead{ margin:0 0 var(--s5); font-size:1.06rem; line-height:1.62; color: var(--ink); }
.verdictbox__lead b{ font-family: var(--mono); font-weight:700; font-variant-numeric: tabular-nums; }
.railcompare{ display:grid; gap: var(--s3); }
.railcompare select{ width:100%; min-height:44px; }

/* --- Shortlist ------------------------------------------------------------
   A state page that lists every lender alphabetically is a phone book. Ranked
   by disclosure, with the ledger visible on each row, it is a shortlist. */
.shortlist{ list-style:none; margin:0; padding:0; display:grid; gap: var(--s3); }
.shortrow{ display:grid; grid-template-columns: 46px minmax(0,1fr); gap: var(--s4);
  align-items:start; padding: var(--s5); background: var(--surface);
  border:1px solid var(--line); border-radius: var(--r-md); }
@media (min-width: 760px){
  .shortrow{ grid-template-columns: 46px minmax(0,1fr) auto; align-items:center; }
}
/* The score, not a position. Tinted to its disclosure band so the column
   reads as a gradient down the page rather than as a leaderboard. */
.shortrow__score{ display:flex; align-items:baseline; justify-content:center; gap:1px;
  padding: 7px 4px; border-radius: 8px; background: var(--bg-2);
  font-size:.92rem; font-weight:700; color: var(--ink-2); }
.shortrow__score span{ font-size:.6rem; font-weight:600; opacity:.65; }
.shortrow__score.ledger--full{ background: var(--ok-50); color: var(--ok); }
.shortrow__score.ledger--partial{ background: var(--brand-50); color: var(--brand-700); }
.shortrow__score.ledger--thin{ background: var(--flag-50); color: var(--flag); }
.shortrow__score.ledger--minimal{ background: var(--bg-2); color: var(--ink-3); }
.shortrow__head{ display:flex; flex-wrap:wrap; align-items:center; gap: var(--s2); }
.shortrow__head h3{ margin:0; font-size:1.02rem; letter-spacing:-.015em; }
.shortrow__head h3 a{ color: var(--ink); text-decoration:none; }
.shortrow__head h3 a:hover{ color: var(--brand); }
.shortrow__facts{ display:flex; flex-wrap:wrap; gap: var(--s2) var(--s5); margin-top:5px;
  font-size:.82rem; color: var(--ink-2); }
.shortrow__ledger{ display:flex; align-items:center; gap: var(--s3); }
.shortrow__ledger em{ font-style:normal; font-size:.72rem; color: var(--ink-3); white-space:nowrap; }

.statlist{ margin:0; }
.statlist > div + div{ margin-top: var(--s4); padding-top: var(--s4); border-top:1px solid var(--line); }
.statlist dt{ font-size:.8rem; color: var(--ink-2); }
.statlist dd{ margin:2px 0 0; font-family: var(--mono); font-size:1.32rem; font-weight:700;
  letter-spacing:-.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.statlist p{ margin:5px 0 0; font-size:.72rem; line-height:1.5; color: var(--ink-3); }

/* --- Term blocks ----------------------------------------------------------
   A state page carries up to thirteen named financing programs. As
   paragraphs they are a wall; as term blocks the name is scannable and the
   detail stays available. */
.term{ display:grid; gap:4px; padding: var(--s4) 0 var(--s4) var(--s5);
  border-left:2px solid var(--line-2); }
.term + .term{ margin-top: var(--s3); }
.prose .term:hover{ border-left-color: var(--brand); }
.term__name{ font-size:.98rem; font-weight:700; color: var(--ink); letter-spacing:-.01em; }
.term__body{ font-size:.9rem; line-height:1.65; color: var(--ink-2); }
.prose h2 + .term{ margin-top: var(--s2); }

/* Ledger inside the comparison grid and ranking rows. */
.cmp__ledger td{ vertical-align:middle; }
.cmp__score{ display:block; margin-top:5px; font-size:.72rem; color: var(--ink-3); }
.rankrow__ledger{ display:flex; align-items:center; gap: var(--s3); margin-top: var(--s3); }
.rankrow__ledger em{ font-style:normal; font-size:.74rem; color: var(--ink-3); }

/* Target size (WCAG 2.2 SC 2.5.8): standalone links in lists and rails need
   a 24px box. Links inside a sentence are exempt and stay inline. */
.shortrow__head h3 a,
.rankrow__head h2 a{ display:inline-block; padding-block:4px; }
.rcard__row a{ display:inline-block; min-height:24px; padding-block:3px; }
.statesmenu__col a{ min-height:26px; }
.calcnav a{ min-height:36px; }
/* A comma-separated run of links is a link list, not a sentence. */
.kv__v a{ display:inline-block; padding-block:4px; }
/* A metadata row and a table cell are lists of controls, not sentences. */
.rhead__meta a{ display:inline-block; min-height:24px; padding-block:4px; }
.terms tbody th a{ display:inline-block; padding-block:4px; }

/* ===========================================================================
   GLOSSARY
   A glossary is read three ways — hunted by letter, hunted by search, and
   wandered through. The index serves all three at once; the entry page treats
   the misreading of a term as first-class content rather than a footnote.
   ======================================================================== */

.gtools{ display:flex; gap: var(--s4); align-items:flex-start; flex-wrap:wrap;
  margin: var(--s7) 0 var(--s5); }
.gtools .field--search{ flex:1 1 340px; margin:0; }
.gcats{ display:flex; flex-wrap:wrap; gap:6px; }
.gcat{ appearance:none; border:1px solid var(--line); background: var(--surface);
  color: var(--ink-2); font: inherit; font-size:.78rem; font-weight:600;
  padding:8px 13px; min-height:34px; border-radius: var(--r-full); cursor:pointer;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease),
    background var(--dur) var(--ease); text-transform:capitalize; }
.gcat:hover{ border-color: var(--brand); color: var(--brand); }
.gcat.is-on{ background: var(--ink); border-color: var(--ink); color:#fff; }

/* Letter rail. Absent letters stay visible but inert, so the reader can see
   that "X" has nothing rather than wondering whether it failed to render. */
.galpha{ position: sticky; top: calc(var(--header-h) + 8px); z-index:5;
  display:flex; flex-wrap:wrap; gap:3px; padding:8px;
  background: rgba(255,255,255,.92); backdrop-filter: blur(10px);
  border:1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-1);
  margin-bottom: var(--s7); }
.galpha a, .galpha span{ flex:1 1 auto; min-width:30px; min-height:30px;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:.82rem; font-weight:700; border-radius: var(--r-sm);
  text-decoration:none; letter-spacing:.02em; }
.galpha a{ color: var(--ink); }
.galpha a:hover, .galpha a:focus-visible{ background: var(--brand-50); color: var(--brand-700); }
.galpha span{ color: var(--ink-3); opacity:.4; }

.gsec{ margin-bottom: var(--s8); scroll-margin-top: calc(var(--header-h) + 62px); }
.gsec__h{ display:flex; align-items:center; gap: var(--s4); margin:0 0 var(--s4);
  font-size:1.05rem; }
.gsec__h span{ display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius: var(--r-md); background: var(--ink);
  color:#fff; font-size:1.05rem; font-weight:800; letter-spacing:-.02em; flex:none; }
.gsec__h i{ flex:1; height:1px; background: var(--line); }
.gsec__h em{ font-style:normal; font-size:.74rem; font-weight:600; color: var(--ink-3);
  font-variant-numeric: tabular-nums; }

.gterms{ display:grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--s4); }
.gterm{ display:flex; flex-direction:column; gap:7px; padding: var(--s4) var(--s5);
  background: var(--surface); border:1px solid var(--line); border-radius: var(--r-lg);
  text-decoration:none; position:relative; overflow:hidden;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease); }
.gterm::before{ content:""; position:absolute; inset:0 auto 0 0; width:3px;
  background: var(--brand); opacity:0; transition: opacity var(--dur) var(--ease); }
.gterm:hover{ border-color: var(--line-2); transform: translateY(-2px); box-shadow: var(--sh-2); }
.gterm:hover::before{ opacity:1; }
.gterm__n{ font-size:.95rem; font-weight:700; color: var(--ink); letter-spacing:-.01em; }
.gterm__draft{ display:inline-block; font-size:.62rem; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color: var(--flag); background: var(--flag-50);
  padding:2px 6px; border-radius: var(--r-sm); vertical-align:middle; }
.gterm__d{ font-size:.84rem; line-height:1.6; color: var(--ink-2); }
.gterm__f{ display:flex; flex-wrap:wrap; gap:5px; margin-top:2px; }
.gterm__f em{ font-style:normal; font-size:.66rem; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; padding:3px 7px; border-radius: var(--r-sm); }
.gterm__trap{ color:#8A3A12; background:#FDF1E7; }
.gterm__ex{ color: var(--brand-700); background: var(--brand-50); }
.gterm__cat{ color: var(--ink-3); background: var(--bg-2); text-transform:capitalize; }

/* --- Entry page ------------------------------------------------------- */

.gdef{ padding-bottom: var(--s5); border-bottom:1px solid var(--line);
  margin-bottom: var(--s6); }
.gdef h1{ margin:6px 0 0; font-size: clamp(2rem, 4vw, 2.9rem); letter-spacing:-.03em; }
.gdef__abbr{ font-size:.5em; font-weight:700; letter-spacing:.02em; color: var(--brand);
  background: var(--brand-50); padding:5px 11px; border-radius: var(--r-full);
  vertical-align:middle; text-decoration:none; margin-left:8px; }
.gdef__also{ margin: var(--s3) 0 0; font-size:.86rem; color: var(--ink-3); }
.gdef__also b{ color: var(--ink-2); font-weight:600; }
.gdef__short{ margin: var(--s4) 0 0; font-size:1.16rem; line-height:1.6; color: var(--ink-2);
  max-width:62ch; }
.gdef__review{ margin: var(--s5) 0 0; padding: var(--s4); font-size:.84rem; line-height:1.6;
  color:#7A4A12; background:#FDF6EC; border:1px solid #F0DCC2; border-radius: var(--r-md); }
.gdef__review b{ color:#5E3808; }

.gsee{ display:grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: var(--s3); }
.gsee__i{ display:flex; flex-direction:column; gap:4px; padding: var(--s4);
  border:1px solid var(--line); border-radius: var(--r-md); background: var(--surface);
  text-decoration:none; transition: border-color var(--dur) var(--ease); }
.gsee__i:hover{ border-color: var(--brand); }
.gsee__i b{ font-size:.88rem; color: var(--ink); }
.gsee__i em{ font-style:normal; font-size:.78rem; line-height:1.55; color: var(--ink-3); }

.gnav{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap: var(--s4);
  margin-top: var(--s8); padding-top: var(--s5); border-top:1px solid var(--line); }
.gnav__i{ display:flex; flex-direction:column; gap:2px; text-decoration:none; min-height:44px;
  justify-content:center; }
.gnav__i--next{ text-align:right; }
.gnav__i span{ font-size:.68rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color: var(--ink-3); }
.gnav__i b{ font-size:.92rem; color: var(--ink); }
.gnav__i:hover b{ color: var(--brand); }
.gnav__all{ font-size:.8rem; font-weight:600; color: var(--ink-2); text-decoration:none;
  padding:9px 15px; border:1px solid var(--line); border-radius: var(--r-full);
  min-height:34px; display:inline-flex; align-items:center; }
.gnav__all:hover{ border-color: var(--brand); color: var(--brand); }

.railline{ margin:0 0 var(--s4); font-size:.9rem; line-height:1.6; color: var(--on-dark-2); }
.raillist{ list-style:none; margin:0; padding:0; }
.raillist li + li{ border-top:1px solid var(--line); }
.raillist a{ display:block; padding:9px 0; min-height:24px; font-size:.85rem;
  color: var(--ink-2); text-decoration:none; }
.raillist a:hover{ color: var(--brand); }
.rhead__flag{ color: var(--flag); }
.rcard--dark .raillist a{ color: var(--on-dark-2); }
.rcard--dark .raillist li + li{ border-top-color: rgba(255,255,255,.12); }

@media (max-width: 700px){
  .galpha{ gap:2px; padding:6px; }
  .galpha a, .galpha span{ min-width:26px; min-height:26px; font-size:.74rem; }
  .gnav{ grid-template-columns:1fr; text-align:left; }
  .gnav__i--next{ text-align:left; }
}

/* --- Editorial queue --------------------------------------------------- */
.edtabs{ display:flex; gap:6px; margin: var(--s6) 0 var(--s4); }
.edtab{ display:inline-flex; align-items:center; gap:7px; padding:9px 16px; min-height:38px;
  border:1px solid var(--line); border-radius: var(--r-full); background: var(--surface);
  font-size:.85rem; font-weight:600; color: var(--ink-2); text-decoration:none; }
.edtab.is-on{ background: var(--ink); border-color: var(--ink); color:#fff; }
.edtab em{ font-style:normal; font-size:.72rem; font-variant-numeric: tabular-nums; opacity:.7; }
.edfilter__row{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom: var(--s5); }
.edfilter__row select, .edfilter__row input{ min-height:38px; padding:8px 12px;
  border:1px solid var(--field-line); border-radius: var(--r-md); font: inherit;
  font-size:.85rem; background: var(--surface); color: var(--ink); }
.edfilter__row input[type="search"]{ flex:1 1 240px; }
.edtable__pick{ width:38px; text-align:center; }
.edtable code{ display:block; font-size:.7rem; color: var(--ink-3); font-weight:400;
  margin-top:2px; }
.edblock{ display:inline-block; font-size:.7rem; font-weight:700; letter-spacing:.03em;
  color: var(--flag); background: var(--flag-50); padding:3px 8px; border-radius: var(--r-sm); }
.edbar{ position: sticky; bottom:0; z-index:6; display:flex; flex-wrap:wrap; gap: var(--s4);
  align-items:center; margin-top: var(--s5); padding: var(--s4) var(--s5);
  background: rgba(255,255,255,.96); backdrop-filter: blur(10px);
  border:1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-2); }
.edbar__who{ display:flex; align-items:center; gap:8px; font-size:.82rem; }
.edbar__who input{ min-height:36px; padding:7px 11px; border:1px solid var(--field-line);
  border-radius: var(--r-md); font: inherit; font-size:.82rem; }
.edbar__acts{ display:flex; gap:8px; flex-wrap:wrap; margin-left:auto; }
.edbar__note{ flex:1 1 100%; margin:0; font-size:.76rem; color: var(--ink-3); }
.pill--in-review{ color: var(--flag); background: var(--flag-50); }
.pill--draft{ color: var(--ink-3); background: var(--bg-2); }
.pager{ display:flex; gap: var(--s4); align-items:center; justify-content:center;
  margin-top: var(--s6); font-size:.85rem; color: var(--ink-3); }
.pager a{ min-height:34px; display:inline-flex; align-items:center; padding:0 12px;
  border:1px solid var(--line); border-radius: var(--r-full); text-decoration:none; }
.flash{ padding:12px 16px; border-radius: var(--r-md); font-size:.85rem; margin: var(--s4) 0; }
.flash--ok{ color:#0B5B33; background: var(--ok-50); border:1px solid #BFE5CE; }
.flash--warn{ color:#7A4A12; background:#FDF6EC; border:1px solid #F0DCC2; }

/* --- Glossary blocks: dark card prose, and the trap ---------------------- */
/* A dark card inherits .prose's dark ink, which lands near-black on near-black.
   Every text-bearing element inside one gets the light end of the ramp. */
.rcard--dark .prose,
.rcard--dark .prose p,
.rcard--dark .prose li,
.rcard--dark .prose strong,
.rcard--dark .prose b{ color: var(--on-dark); }
.rcard--dark .prose h2{ color:#fff; }
.rcard--dark .prose a{ color:#BFD0FF; }
.rcard--dark .prose .term{ border-left-color: rgba(255,255,255,.22); }
.rcard--dark .prose .term__name{ color:#fff; }
.rcard--dark .prose .term__body{ color: var(--on-dark-2); }
.rcard--dark .rcard__note{ color: var(--on-dark-2); }
.rcard--dark h2.rcard__h{ color: var(--on-dark-2); }

/* The trap is a caution, not a contradiction. Red is reserved for a figure
   that disagrees with itself; a term that is commonly misread gets amber. */
.gtrap{ padding: var(--s5) var(--s6); margin-block: var(--s5);
  background:#FDF6EC; border:1px solid #F0DCC2; border-left:4px solid var(--flag);
  border-radius: var(--r-lg); }
.gtrap > h2{ margin:0 0 var(--s3); font-size:1.05rem; letter-spacing:-.01em; color:#5E3808; }
.gtrap .prose p{ color:#5A4630; }
.gtrap .prose p:last-child{ margin-bottom:0; }
.gtrap .prose strong, .gtrap .prose b{ color:#3F2E18; }

/* An in-page jump must not land under the sticky header. */
.sources, #sources{ scroll-margin-top: calc(var(--header-h) + 16px); }

/* --- How a page was produced ------------------------------------------- */
/* A checked page and an unchecked one must not look the same at a glance. */
.art__ai{ line-height:1.6; }
.art__ai b{ display:block; margin-bottom:3px; }
.art__ai a{ text-decoration: underline; text-underline-offset:2px;
  display:inline-block; padding-block:3px; min-height:24px; }
.art__ai--ok{ background: var(--ok-50); border:1px solid #BFE5CE; color:#20503A; }
.art__ai--ok b{ color:#0B5B33; }
.art__ai--ok a{ color:#0B5B33; }
.art__ai--open{ background:#FDF6EC; border:1px solid #F0DCC2; color:#6A5336;
  border-left:4px solid var(--flag); border-radius: var(--r-md); }
.art__ai--open b{ color:#5E3808; }
.art__ai--open a{ color:#7A4A12; }
.gdef .art__ai{ margin-top: var(--s5); max-width:74ch; }

/* ===========================================================================
   FAQ
   Nine questions at the foot of every page. Accordions, because nine open
   answers push everything else off the screen — but the first is open so the
   section reads as content, and every one works with JavaScript off.
   ======================================================================== */
.faq{ margin-top: var(--s10); padding-top: var(--s8); border-top:1px solid var(--line); }
.faq__head{ max-width:62ch; margin-bottom: var(--s5); }
.faq__head h2{ margin:0; font-size: clamp(1.4rem, 2.4vw, 1.9rem); letter-spacing:-.02em; }
.faq__head p{ margin: var(--s3) 0 0; color: var(--ink-2); font-size:.95rem; }
.faq__list{ border:1px solid var(--line); border-radius: var(--r-lg); overflow:hidden;
  background: var(--surface); }
.faq__item + .faq__item{ border-top:1px solid var(--line); }
.faq__item summary{ display:flex; align-items:flex-start; gap: var(--s4); cursor:pointer;
  padding: var(--s5) var(--s6); font-size:.98rem; font-weight:650; color: var(--ink);
  list-style:none; min-height:44px; transition: background var(--dur) var(--ease); }
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__item summary:hover{ background: var(--bg-2); }
.faq__item summary span{ flex:1; }
.faq__item summary i{ position:relative; flex:none; width:18px; height:18px; margin-top:3px; }
.faq__item summary i::before,
.faq__item summary i::after{ content:""; position:absolute; inset:50% 0 auto 0; height:2px;
  background: var(--ink-3); border-radius:2px;
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease); }
.faq__item summary i::after{ transform: rotate(90deg); }
.faq__item[open] summary{ background: var(--bg-2); }
.faq__item[open] summary i::after{ transform: rotate(0deg); }
.faq__item[open] summary i::before,
.faq__item[open] summary i::after{ background: var(--brand); }
.faq__a{ padding: 0 var(--s6) var(--s5); }
.faq__a p{ margin:0; max-width:74ch; font-size:.92rem; line-height:1.7; color: var(--ink-2); }
.faq__item summary:focus-visible{ outline:2px solid var(--brand); outline-offset:-2px; }
@media (max-width: 700px){
  .faq__item summary{ padding: var(--s4) var(--s5); font-size:.92rem; }
  .faq__a{ padding: 0 var(--s5) var(--s4); }
}

/* --- Calculator hub and HTML sitemap ------------------------------------ */
.ctools{ display:grid; grid-template-columns: repeat(auto-fit, minmax(300px,1fr));
  gap: var(--s5); margin: var(--s8) 0; }
.ctool{ position:relative; display:flex; flex-direction:column; gap:8px;
  padding: var(--s6); background: var(--surface); border:1px solid var(--line);
  border-radius: var(--r-lg); text-decoration:none; overflow:hidden;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
    border-color var(--dur) var(--ease); }
.ctool::after{ content:""; position:absolute; inset:0 0 auto 0; height:3px;
  background: var(--grad); opacity:0; transition: opacity var(--dur) var(--ease); }
.ctool:hover{ transform: translateY(-3px); box-shadow: var(--sh-2); border-color: var(--line-2); }
.ctool:hover::after{ opacity:1; }
.ctool__n{ display:inline-flex; align-items:center; justify-content:center; width:30px;
  height:30px; border-radius: var(--r-sm); background: var(--brand-50);
  color: var(--brand-700); font-family: var(--mono); font-size:.8rem; font-weight:700; }
.ctool b{ font-size:1.05rem; letter-spacing:-.015em; color: var(--ink); }
.ctool em{ font-style:normal; font-size:.88rem; line-height:1.6; color: var(--ink-2); }
.ctool__go{ margin-top:auto; padding-top: var(--s3); font-size:.8rem; font-weight:650;
  color: var(--brand); }
.calcprose{ margin-top: var(--s6); }

.smap{ display:grid; gap: var(--s8); margin: var(--s8) 0; }
.smap__sec h2{ display:flex; align-items:baseline; gap: var(--s3); margin:0 0 var(--s4);
  padding-bottom: var(--s3); border-bottom:1px solid var(--line); font-size:1.1rem; }
.smap__sec h2 span{ font-size:.74rem; font-weight:600; color: var(--ink-3);
  font-variant-numeric: tabular-nums; }
.smap__list{ list-style:none; margin:0; padding:0; columns:4; column-gap: var(--s6); }
.smap__list--wide{ columns:3; }
.smap__list--tight{ columns:5; }
.smap__list--letters{ columns:auto; display:flex; flex-wrap:wrap; gap:6px; }
.smap__list li{ break-inside:avoid; }
.smap__list a{ display:block; padding:5px 0; min-height:24px; font-size:.86rem;
  color: var(--ink-2); text-decoration:none; }
.smap__list a:hover{ color: var(--brand); }
.smap__list--letters a{ display:inline-flex; align-items:center; justify-content:center;
  min-width:32px; min-height:32px; border:1px solid var(--line); border-radius: var(--r-sm);
  font-weight:700; }
.smap__note{ margin: var(--s4) 0 0; font-size:.85rem; }
@media (max-width: 1000px){ .smap__list{ columns:3; } .smap__list--tight{ columns:3; } }
@media (max-width: 700px){ .smap__list, .smap__list--wide, .smap__list--tight{ columns:1; } }

/* --- Advertise ---------------------------------------------------------- */
.adgrid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr));
  gap: var(--s5); margin: var(--s7) 0; }
.adcard{ display:flex; flex-direction:column; gap:10px; padding: var(--s6);
  background: var(--surface); border:1px solid var(--line); border-radius: var(--r-lg); }
.adcard h2{ margin:0; font-size:1.05rem; letter-spacing:-.015em; }
.adcard p{ margin:0; font-size:.88rem; line-height:1.65; color: var(--ink-2); }
.adcard__tag{ align-self:flex-start; font-size:.66rem; font-weight:800; letter-spacing:.07em;
  text-transform:uppercase; padding:4px 9px; border-radius: var(--r-full);
  color: var(--flag); background: var(--flag-50); }
.adcard__tag--free{ color:#0B5B33; background: var(--ok-50); }
.adcard__hint{ margin-top:auto !important; padding-top: var(--s3);
  border-top:1px solid var(--line); font-size:.8rem !important; color: var(--ink-3) !important; }

.adform{ max-width:680px; }
.adform__row{ display:grid; grid-template-columns:1fr 1fr; gap: var(--s4); }
.adform .field{ margin-bottom: var(--s4); }
.adform label{ display:block; margin-bottom:6px; font-size:.82rem; font-weight:650;
  color: var(--ink-2); }
.adform label b{ color: var(--brand); }
.adform input, .adform select, .adform textarea{ width:100%; min-height:44px;
  padding:11px 14px; font: inherit; font-size:.9rem; color: var(--ink);
  background: var(--surface); border:1px solid var(--field-line);
  border-radius: var(--r-md); transition: border-color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease); }
.adform textarea{ min-height:96px; resize:vertical; }
.adform input:focus, .adform select:focus, .adform textarea:focus{ outline:none;
  border-color: var(--brand); box-shadow:0 0 0 3px var(--brand-50); }
.field__err{ margin:5px 0 0; font-size:.78rem; color:#A32020; }
.adform__foot{ display:flex; flex-wrap:wrap; align-items:center; gap: var(--s4);
  margin-top: var(--s3); }
.adform__foot p{ flex:1 1 260px; margin:0; font-size:.78rem; line-height:1.6;
  color: var(--ink-3); }
@media (max-width: 640px){ .adform__row{ grid-template-columns:1fr; } }

/* --- How-we-make-money call to action ----------------------------------- */
.moneycta{ display:grid; grid-template-columns: 1.6fr 1fr; gap: var(--s7);
  margin: var(--s9) 0 var(--s6); padding: var(--s7);
  background: var(--grad-soft); border:1px solid var(--brand-100);
  border-radius: var(--r-xl); }
.moneycta h2{ margin: var(--s2) 0 var(--s3); font-size: clamp(1.3rem,2.2vw,1.7rem);
  letter-spacing:-.02em; }
.moneycta p{ margin:0 0 var(--s5); max-width:56ch; font-size:.95rem; line-height:1.7;
  color: var(--ink-2); }
.moneycta__acts{ display:flex; flex-wrap:wrap; gap: var(--s3); }
.moneycta__list{ list-style:none; margin:0; padding: var(--s5); align-self:start;
  background: var(--surface); border:1px solid var(--line); border-radius: var(--r-lg); }
.moneycta__list li{ padding: 9px 0; font-size:.84rem; color: var(--ink-2); }
.moneycta__list li + li{ border-top:1px solid var(--line); }
.moneycta__list b{ display:block; font-size:.68rem; font-weight:800; letter-spacing:.06em;
  text-transform:uppercase; color: var(--ink-3); margin-bottom:2px; }
@media (max-width: 860px){ .moneycta{ grid-template-columns:1fr; gap: var(--s5);
  padding: var(--s6); } }

/* --- Funder page: the researcher's note, and the lender's own words ------ */
/* These two sat next to each other as identical walls of prose. One is our
   independent reading, the other is marketing copy. They must not look alike. */
.fnote{ margin: var(--s8) 0; padding: var(--s6) var(--s7);
  background: var(--surface); border:1px solid var(--line);
  border-left:4px solid var(--indigo); border-radius: var(--r-lg);
  box-shadow: var(--sh-1); }
.fnote__head{ display:flex; gap: var(--s4); align-items:flex-start;
  padding-bottom: var(--s4); margin-bottom: var(--s4);
  border-bottom:1px solid var(--line); }
.fnote__badge{ flex:none; display:grid; place-items:center; width:38px; height:38px;
  border-radius: var(--r-md); background:#F1ECFE; color: var(--indigo); }
.fnote__badge svg{ width:18px; height:18px; }
.fnote h2{ margin:0; font-size:1.12rem; letter-spacing:-.02em; }
.fnote__by{ margin:3px 0 0; font-size:.78rem; color: var(--ink-3); }
.fnote__body{ max-width:72ch; }
.fnote__body p{ font-size:.93rem; }
.fnote__body p:last-child{ margin-bottom:0; }

.fsay{ margin: var(--s8) 0; }
.fsay__quote{ position:relative; margin:0; padding: var(--s6) var(--s7);
  background: var(--bg-2); border:1px solid var(--line); border-radius: var(--r-lg); }
.fsay__quote .prose{ max-width:70ch; }
.fsay__quote .prose p{ font-size:.95rem; color: var(--ink-2); font-style:italic; }
.fsay__quote .prose p:last-child{ margin-bottom:0; }
.fsay figcaption{ display:flex; align-items:flex-start; gap:10px;
  margin-top: var(--s4); padding-top: var(--s4); border-top:1px solid var(--line);
  font-size:.78rem; line-height:1.6; color: var(--ink-3); }
.fsay__mark{ flex:none; font-size:1.6rem; line-height:.8; color: var(--line-2);
  font-weight:800; }
@media (max-width: 700px){
  .fnote, .fsay__quote{ padding: var(--s5); }
}

/* --- Homepage library band ---------------------------------------------- */
/* Four cards, one row: the lead spans two of four equal columns so the
   remaining three do not wrap into a lonely second row. */
.libgrid{ display:grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--s5); margin-top: var(--s7); }
.libcard{ position:relative; display:flex; flex-direction:column; gap:9px;
  padding: var(--s6); background: var(--surface); border:1px solid var(--line);
  border-radius: var(--r-lg); text-decoration:none; overflow:hidden;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
    border-color var(--dur) var(--ease); }
.libcard--lead{ grid-column: span 2; background: var(--grad-soft);
  border-color: var(--brand-100); }
.libcard:hover{ transform: translateY(-3px); box-shadow: var(--sh-2);
  border-color: var(--line-2); }
.libcard__n{ font-family: var(--mono); font-size: clamp(1.7rem, 3vw, 2.4rem);
  font-weight:800; letter-spacing:-.04em; line-height:1;
  background: var(--grad); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; font-variant-numeric: tabular-nums; }
.libcard b{ font-size:1.05rem; letter-spacing:-.015em; color: var(--ink); }
.libcard em{ font-style:normal; font-size:.88rem; line-height:1.65; color: var(--ink-2); }
.libcard__go{ margin-top:auto; padding-top: var(--s3); font-size:.8rem; font-weight:650;
  color: var(--brand); }
.libfoot{ margin-top: var(--s5); font-size:.88rem; color: var(--ink-3); }
@media (max-width: 1100px){ .libgrid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px){ .libgrid{ grid-template-columns:1fr; }
  .libcard--lead{ grid-column: span 1; } }

/* ===========================================================================
   LEARN — the library's own look
   Every picture here is generated, not licensed: section heroes from
   static/img/art, per-article heroes from the slug. Stock photography of people
   pointing at laptops would say nothing about what these pages contain.
   ======================================================================== */

.lhero{ position:relative; overflow:hidden; padding: var(--s8) 0 var(--s9);
  background: linear-gradient(180deg, var(--bg-2) 0%, var(--bg) 100%);
  border-bottom:1px solid var(--line); margin-bottom: var(--s7); }
.lhero__inner{ display:grid; grid-template-columns: 1.05fr .95fr; gap: var(--s8);
  align-items:center; }
.lhero h1{ margin: 8px 0 0; font-size: clamp(2rem, 4vw, 3rem); letter-spacing:-.035em;
  line-height:1.08; max-width:17ch; }
.lhero__lede{ margin: var(--s5) 0 0; max-width:56ch; font-size:1.05rem; line-height:1.65;
  color: var(--ink-2); }
.lhero__meta{ display:flex; flex-wrap:wrap; gap: var(--s3) var(--s6); margin-top: var(--s6);
  font-size:.85rem; color: var(--ink-3); }
.lhero__meta b{ color: var(--ink); font-family: var(--mono); font-variant-numeric: tabular-nums; }
.lhero__meta a{ color: var(--brand); font-weight:600; }
.lhero__art img{ width:100%; height:auto; display:block;
  filter: drop-shadow(0 18px 40px rgba(37,73,232,.10)); }

.ltools{ display:flex; gap: var(--s4); align-items:flex-start; flex-wrap:wrap;
  margin: 0 0 var(--s7); }
.ltools .field--search{ flex:1 1 320px; margin:0; }
.gcat em{ font-style:normal; margin-left:5px; font-size:.68rem; opacity:.6;
  font-variant-numeric: tabular-nums; }

/* Generated artwork sits behind a soft frame so it reads as illustration
   rather than as a chart the reader is meant to interpret. */
.artwork{ display:block; width:100%; height:100%; object-fit:cover; }
.lcard__art, .lfeat__art{ display:block; position:relative; overflow:hidden;
  background: var(--bg-2); border-bottom:1px solid var(--line); }
.lcard__art{ aspect-ratio: 21 / 10; }
.lfeat__art{ aspect-ratio: 16 / 9; }

.lfeat{ display:grid; grid-template-columns: repeat(3, 1fr); gap: var(--s5); }
.lfeat__i{ display:flex; flex-direction:column; background: var(--surface);
  border:1px solid var(--line); border-radius: var(--r-lg); overflow:hidden;
  text-decoration:none; transition: transform var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.lfeat__i:hover{ transform: translateY(-3px); box-shadow: var(--sh-2);
  border-color: var(--line-2); }
.lfeat__body{ display:flex; flex-direction:column; gap:7px;
  padding: var(--s5) var(--s5) var(--s6); }
.lfeat__body b{ font-size:1.02rem; line-height:1.35; letter-spacing:-.015em; color: var(--ink); }
.lfeat__body em{ font-style:normal; font-size:.86rem; line-height:1.6; color: var(--ink-2); }

.lgrid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(272px,1fr));
  gap: var(--s5); }
.lcard{ display:flex; flex-direction:column; background: var(--surface);
  border:1px solid var(--line); border-radius: var(--r-lg); overflow:hidden;
  text-decoration:none; transition: transform var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.lcard:hover{ transform: translateY(-3px); box-shadow: var(--sh-2); border-color: var(--line-2); }
.lcard__body{ display:flex; flex-direction:column; gap:7px; padding: var(--s5); flex:1; }
.lcard__body b{ font-size:.97rem; line-height:1.38; letter-spacing:-.012em; color: var(--ink); }
.lcard__body em{ font-style:normal; font-size:.83rem; line-height:1.6; color: var(--ink-2); }
.lcard__foot{ display:flex; flex-wrap:wrap; gap:5px; margin-top:auto; padding-top: var(--s3); }
.lcard__tag{ font-size:.66rem; font-weight:700; letter-spacing:.03em; text-transform:uppercase;
  color: var(--ink-3); background: var(--bg-2); padding:3px 7px; border-radius: var(--r-sm); }
.lcard__tag--draft{ color: var(--flag); background: var(--flag-50); }

@media (max-width: 1000px){
  .lhero__inner{ grid-template-columns:1fr; }
  .lhero__art{ order:-1; max-width:520px; }
  .lfeat{ grid-template-columns:1fr; }
}
@media (max-width: 700px){
  .lhero{ padding: var(--s6) 0 var(--s7); }
  .lgrid{ grid-template-columns:1fr; }
}

/* Auto-linked glossary references: present, not shouty. A body with fourteen
   bright blue links in it is harder to read than one with none. */
.prose a.xref{ color: var(--ink); text-decoration:none;
  border-bottom:1px solid var(--brand-100);
  box-shadow: inset 0 -0.35em 0 var(--brand-50);
  transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease),
    color var(--dur) var(--ease); }
.prose a.xref:hover{ color: var(--brand-700); border-bottom-color: var(--brand);
  box-shadow: inset 0 -0.45em 0 var(--brand-50); }

/* --- Article page: shell, rail, reading progress ------------------------ */
.areading{ position:fixed; inset:0 0 auto 0; height:3px; z-index:60;
  background:transparent; pointer-events:none; }
.areading i{ display:block; height:100%; width:0; background: var(--grad);
  transition: width .08s linear; }

.ashell{ display:grid; grid-template-columns: minmax(0,1fr) 300px; gap: var(--s8);
  align-items:start; }
.ashell__rail{ position: sticky; top: calc(var(--header-h) + var(--s5));
  display:grid; gap: var(--s5); }
.ashell__main{ min-width:0; }

.ahero{ margin: var(--s6) 0 var(--s7); border-radius: var(--r-xl); overflow:hidden;
  border:1px solid var(--line); background: var(--bg-2); aspect-ratio: 3 / 1; }
.ahero .artwork{ height:100%; }

.atoc{ padding: var(--s5); background: var(--surface); border:1px solid var(--line);
  border-radius: var(--r-lg); }
.atoc ol{ counter-reset: toc; list-style:none; margin:0; padding:0; }
.atoc li{ counter-increment: toc; }
.atoc li + li{ border-top:1px solid var(--line); }
.atoc a{ display:flex; gap:9px; padding:8px 0; min-height:24px; font-size:.84rem;
  line-height:1.45; color: var(--ink-2); text-decoration:none; }
.atoc a::before{ content: counter(toc); flex:none; width:18px; font-family: var(--mono);
  font-size:.7rem; font-weight:700; color: var(--ink-3); padding-top:2px; }
.atoc a:hover{ color: var(--brand); }
.atoc a.is-here{ color: var(--brand); font-weight:650; }
.atoc a.is-here::before{ color: var(--brand); }

.rhead--art{ display:flex; gap: var(--s5); align-items:flex-start; }
.rhead__mark{ flex:none; width:150px; height:auto; border-radius: var(--r-lg); }

.art__body h2{ scroll-margin-top: calc(var(--header-h) + 20px); }
.byline span, .byline a{ white-space:nowrap; }

@media (max-width: 1080px){
  .ashell{ grid-template-columns:1fr; }
  .ashell__rail{ position:static; display:grid;
    grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); }
}
@media (max-width: 700px){
  .ahero{ aspect-ratio: 2 / 1; margin: var(--s5) 0 var(--s6); }
  .ashell__rail{ grid-template-columns:1fr; }
  .rhead--art{ flex-direction:column; }
  .rhead__mark{ width:110px; }
}

/* ===========================================================================
   FOOTER
   Three bands: a call to action where a reader who finished reading actually
   is, the link architecture with the library given the room it deserves, and
   the disclosure at a size a person can read.
   ======================================================================== */

.fcta{ position:relative; overflow:hidden; background: var(--ink);
  border-bottom:1px solid rgba(255,255,255,.08); }
.fcta__inner{ position:relative; display:flex; flex-wrap:wrap; gap: var(--s6);
  align-items:center; justify-content:space-between; padding-block: var(--s9); }
.fcta__text{ position:relative; z-index:1; max-width:52ch; }
.fcta__text .eyebrow{ color:#8FA3D8; }
.fcta h2{ margin: 8px 0 var(--s3); font-size: clamp(1.5rem, 2.8vw, 2.15rem);
  letter-spacing:-.03em; color:#fff; }
.fcta p{ margin:0; font-size:.98rem; line-height:1.65; color: var(--on-dark-2); }
.fcta__acts{ position:relative; z-index:1; display:flex; flex-wrap:wrap; gap: var(--s3); }
.btn--ghostlight{ background: rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.18);
  color:#fff; }
.btn--ghostlight:hover{ background: rgba(255,255,255,.13); border-color: rgba(255,255,255,.3);
  color:#fff; }
.btn--lg{ padding: 15px 30px; font-size:.98rem; }
.fcta__art{ position:absolute; right:-40px; top:50%; transform: translateY(-50%);
  width:560px; height:auto; opacity:1; pointer-events:none; z-index:0;
  mask-image: linear-gradient(90deg, transparent, #000 55%);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 55%); }

.footer__grid{ grid-template-columns: 1.45fr repeat(4, 1fr) !important;
  gap: var(--s7) var(--s6) !important; }
.footer__brandcol .brand{ margin-bottom: var(--s4); }
.footer__about{ max-width:38ch; }
.footer__stats{ display:grid; grid-template-columns:1fr 1fr; gap: var(--s4) var(--s5);
  margin: var(--s6) 0 0; }
.footer__stats div{ display:flex; flex-direction:column; gap:2px; }
.footer__stats dt{ font-size:.66rem; font-weight:700; letter-spacing:.07em;
  text-transform:uppercase; color: var(--on-dark-2); opacity:.55; }
.footer__stats dd{ margin:0; font-family: var(--mono); font-size:1.32rem; font-weight:700;
  letter-spacing:-.02em; color:#fff; font-variant-numeric: tabular-nums; }
.footer__h2{ margin-top: var(--s6) !important; }
.footer__n{ display:inline-block; margin-left:6px; padding:1px 6px; border-radius: var(--r-sm);
  background: rgba(255,255,255,.1); font-family: var(--mono); font-size:.66rem;
  font-weight:700; font-variant-numeric: tabular-nums; }

.footer__disc{ display:grid; grid-template-columns:1fr 1fr; gap: var(--s6) var(--s8);
  margin-bottom: var(--s6); }
.footer__disc h5{ margin:0 0 8px; font-size:.72rem; font-weight:800; letter-spacing:.08em;
  text-transform:uppercase; color:#fff; opacity:.75; }
.footer__disc p{ margin:0; font-size:.85rem; line-height:1.7; color: var(--on-dark-2); }

@media (max-width: 1180px){
  .footer__grid{ grid-template-columns: 1fr 1fr 1fr !important; }
  .fcta__art{ display:none; }
}
@media (max-width: 820px){
  .footer__grid{ grid-template-columns: 1fr 1fr !important; }
  .footer__brandcol{ grid-column: span 2; }
  .footer__disc{ grid-template-columns:1fr; }
  .fcta__inner{ padding-block: var(--s7); }
}
@media (max-width: 520px){
  .footer__grid{ grid-template-columns: 1fr !important; }
  .footer__brandcol{ grid-column: span 1; }
  .fcta__acts .btn{ width:100%; justify-content:center; }
}