/* ==========================================================================
   Startup Veda — Design System
   Light-first editorial system. Colours derive from the existing brand:
   deep green #0C3A3C, gold #F4B400, cream #F2E7D0, ink #0D1117.
   Everything below is tokenised: change the :root block, change the brand.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */

:root {
  color-scheme: light;

  /* Surfaces — warm paper, descended from the cream #F2E7D0 */
  --paper:        #FBF9F4;
  --paper-2:      #F5F1E7;
  --surface:      #FFFFFF;
  --surface-2:    #F7F4EC;
  --surface-sunk: #F1ECE0;

  /* Ink — neutrals tinted with the brand green so nothing reads as cold grey */
  --ink:          #10201F;
  --ink-2:        #3A4A48;
  --ink-3:        #64726F;
  --ink-4:        #78847F;

  /* Hairlines */
  --line:         #E7E1D3;
  --line-2:       #D9D2C0;
  --line-3:       #C4BBA4;

  /* Brand */
  --brand:        #0C3A3C;
  --brand-2:      #14514F;
  --brand-3:      #1E6663;
  --brand-wash:   #ECF1EE;
  --brand-ink:    #FBF9F4;

  /* Accent — gold, used as fill and rule. Never as small text on paper. */
  --gold:         #C99A21;
  --gold-bright:  #F4B400;
  --gold-ink:     #7E5C05;
  --gold-wash:    #FAF0D6;
  --gold-line:    #E8D49B;

  /* Semantic */
  --up:           #14664A;
  --up-wash:      #E4F1EA;
  --down:         #93321F;
  --down-wash:    #F8EAE5;

  /* Type */
  --font-display: "Zodiak", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-sans:    "Switzer", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --fs-display: clamp(2.75rem, 1.65rem + 3.9vw, 5rem);
  --fs-h1:      clamp(2.1rem, 1.55rem + 2.1vw, 3.35rem);
  --fs-h2:      clamp(1.65rem, 1.35rem + 1.15vw, 2.3rem);
  --fs-h3:      clamp(1.25rem, 1.13rem + 0.5vw, 1.5rem);
  --fs-h4:      clamp(1.06rem, 1rem + 0.25vw, 1.19rem);
  --fs-body:    1.0625rem;
  --fs-sm:      0.9375rem;
  --fs-xs:      0.8125rem;
  --fs-2xs:     0.6875rem;

  /* Space — 4pt base */
  --s1: .25rem;  --s2: .5rem;   --s3: .75rem;  --s4: 1rem;
  --s5: 1.5rem;  --s6: 2rem;    --s7: 2.75rem; --s8: 3.5rem;
  --s9: 5rem;    --s10: 7rem;

  /* Structure */
  --wrap: 1280px;
  --wrap-narrow: 780px;
  --measure: 68ch;
  --gutter: clamp(1.15rem, 0.6rem + 2.2vw, 3rem);

  --r-xs: 3px;
  --r-sm: 6px;
  --r:    10px;
  --r-lg: 16px;
  --r-pill: 999px;

  --sh-1: 0 1px 2px rgba(16,32,31,.05);
  --sh-2: 0 2px 4px rgba(16,32,31,.04), 0 12px 28px -14px rgba(16,32,31,.16);
  --sh-3: 0 4px 8px rgba(16,32,31,.05), 0 24px 48px -20px rgba(16,32,31,.22);

  /* Motion.
     Durations follow the 100/300/500 rule: feedback under 150ms reads as
     instant, state changes sit at 200-300ms, entrances get 400-600ms.
     Exits run at ~75% of their entrance. No bounce, no elastic — both draw
     attention to the animation instead of the thing being animated. */
  --ease: cubic-bezier(.2,.7,.3,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-quart: cubic-bezier(.25,1,.5,1);
  --ease-quint: cubic-bezier(.22,1,.36,1);
  --ease-expo: cubic-bezier(.16,1,.3,1);

  --dur-tap:      90ms;   /* press feedback — under the 80ms perception floor */
  --dur-quick:    150ms;  /* colour, opacity, icon swaps */
  --dur:          280ms;  /* default state change */
  --dur-state:    240ms;  /* hover choreography */
  --dur-slow:     420ms;  /* overlays, drawers */
  --dur-entrance: 620ms;  /* first paint and page transitions */

  --header-h: 68px;
}

[data-theme="dark"] {
  color-scheme: dark;

  --paper:        #0A100F;
  --paper-2:      #0D1615;
  --surface:      #111B19;
  --surface-2:    #16211F;
  --surface-sunk: #0D1615;

  --ink:          #ECE7DA;
  --ink-2:        #BAC4BF;
  --ink-3:        #8B9894;
  --ink-4:        #7E8C88;

  --line:         #21302C;
  --line-2:       #2C3E39;
  --line-3:       #3A4E48;

  --brand:        #7ED3BE;
  --brand-2:      #9CE2D0;
  --brand-3:      #B7EDDE;
  --brand-wash:   #12211E;
  --brand-ink:    #0A100F;

  --gold:         #F4B400;
  --gold-bright:  #FFC933;
  --gold-ink:     #F2C55C;
  --gold-wash:    #241D0A;
  --gold-line:    #4A3B12;

  --up:           #63C79C;
  --up-wash:      #10241C;
  --down:         #E08A72;
  --down-wash:    #2A1712;

  --sh-1: 0 1px 2px rgba(0,0,0,.4);
  --sh-2: 0 2px 4px rgba(0,0,0,.3), 0 12px 28px -14px rgba(0,0,0,.7);
  --sh-3: 0 4px 8px rgba(0,0,0,.3), 0 24px 48px -20px rgba(0,0,0,.8);
}

/* --------------------------------------------------------------------------
   2. RESET / BASE
   -------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 2rem);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.6;
  font-feature-settings: "kern" 1, "liga" 1, "cv05" 1, "cv11" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color .4s var(--ease), color .4s var(--ease);
  overflow-x: hidden;
}

/* Faint paper grain. Invisible until you look for it — which is the point. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .32;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}
[data-theme="dark"] body::before { mix-blend-mode: screen; opacity: .14; }

img, svg, video { max-width: 100%; height: auto; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.022em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

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

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}
[data-theme="dark"] :focus-visible { outline-color: var(--brand-2); }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--brand); color: var(--brand-ink);
  padding: .75rem 1.25rem; border-radius: 0 0 var(--r-sm) 0;
  font-size: var(--fs-sm); font-weight: 600;
}
.skip:focus { left: 0; }

/* --------------------------------------------------------------------------
   3. LAYOUT
   -------------------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
  position: relative;
  z-index: 1;
}
.wrap--narrow { max-width: calc(var(--wrap-narrow) + var(--gutter) * 2); }

.section { padding-block: clamp(2.75rem, 1.5rem + 3.6vw, 5rem); }
.section--tight { padding-block: clamp(2rem, 1.2rem + 2.4vw, 3.25rem); }
.section + .section { padding-top: 0; }

.rule { height: 1px; background: var(--line); border: 0; margin: 0; }

.grid { display: grid; gap: var(--s6); }
@media (min-width: 900px) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 640px) and (max-width: 899px) {
  .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
}

/* --------------------------------------------------------------------------
   4. TYPE PRIMITIVES
   -------------------------------------------------------------------------- */

.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin: 0;
}
.eyebrow::before {
  content: "";
  width: 18px; height: 1px;
  background: var(--gold);
  flex: none;
}
.eyebrow--plain::before { display: none; }

.dek {
  color: var(--ink-2);
  font-size: var(--fs-body);
  line-height: 1.62;
}

.lede {
  font-size: clamp(1.15rem, 1.05rem + .5vw, 1.375rem);
  line-height: 1.55;
  color: var(--ink-2);
  letter-spacing: -.008em;
}

.meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .75rem;
  font-size: var(--fs-xs);
  color: var(--ink-3);
  letter-spacing: .005em;
}
.meta__dot { width: 3px; height: 3px; border-radius: 50%; background: var(--line-3); flex: none; }
.meta time { font-variant-numeric: tabular-nums; }

/* Section headers -------------------------------------------------------- */

.sec-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s5);
  padding-bottom: var(--s4);
  margin-bottom: var(--s6);
  border-bottom: 1px solid var(--ink);
  position: relative;
}
.sec-head::after {
  content: "";
  position: absolute;
  left: 0; bottom: -1px;
  width: 72px; height: 3px;
  background: var(--gold);
}
.sec-head__title {
  font-size: var(--fs-h2);
  letter-spacing: -.028em;
}
.sec-head__link {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-2);
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  white-space: nowrap;
  padding-block: .25rem;
  border-bottom: 1px solid transparent;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), gap var(--dur) var(--ease);
}
.sec-head__link:hover { color: var(--ink); border-bottom-color: var(--gold); gap: .65rem; }
.sec-head__link svg { width: 13px; height: 13px; }

/* --------------------------------------------------------------------------
   5. CHIPS, TAGS, BUTTONS
   -------------------------------------------------------------------------- */

.chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-family: var(--font-sans);
  font-size: var(--fs-2xs);
  font-weight: 650;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .3rem .55rem;
  border-radius: var(--r-xs);
  background: var(--brand-wash);
  color: var(--brand);
  border: 1px solid transparent;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
[data-theme="dark"] .chip { color: var(--brand-2); }
.chip--gold  { background: var(--gold-wash); color: var(--gold-ink); }
.chip--solid { background: var(--brand); color: var(--brand-ink); }
[data-theme="dark"] .chip--solid { background: var(--brand); color: #08110F; }
.chip--ghost { background: transparent; border-color: var(--line-2); color: var(--ink-2); }
a.chip:hover { background: var(--brand); color: var(--brand-ink); }
[data-theme="dark"] a.chip:hover { color: #08110F; }

.tag {
  display: inline-block;
  font-size: var(--fs-xs);
  color: var(--ink-2);
  padding: .35rem .7rem;
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  transition: all var(--dur) var(--ease);
}
.tag:hover { border-color: var(--ink); color: var(--ink); background: var(--surface); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: .005em;
  padding: .72rem 1.35rem;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  background: var(--brand);
  color: var(--brand-ink);
  transition: transform .18s var(--ease), background var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
  white-space: nowrap;
}
[data-theme="dark"] .btn { color: #08110F; }
.btn:hover { background: var(--brand-2); box-shadow: var(--sh-2); }
.btn:active { transform: translateY(1px); }
.btn svg { width: 15px; height: 15px; }

.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn--ghost:hover { background: var(--surface); border-color: var(--ink); box-shadow: var(--sh-1); }
[data-theme="dark"] .btn--ghost { color: var(--ink); }
[data-theme="dark"] .btn--ghost:hover { background: var(--surface-2); }

.btn--gold { background: var(--gold-bright); color: #2A1F00; }
.btn--gold:hover { background: var(--gold); }

.btn--sm { padding: .5rem 1rem; font-size: var(--fs-xs); }
.btn--block { width: 100%; }

/* --------------------------------------------------------------------------
   6. HEADER
   -------------------------------------------------------------------------- */

.topbar {
  background: var(--brand);
  color: rgba(251,249,244,.82);
  font-size: var(--fs-2xs);
  letter-spacing: .04em;
}
[data-theme="dark"] .topbar { background: var(--surface); color: var(--ink-3); border-bottom: 1px solid var(--line); }
.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  min-height: 34px;
}
.topbar__left { display: flex; align-items: center; gap: .6rem; }
.topbar__mark { color: var(--gold-bright); font-weight: 700; letter-spacing: .12em; }
.topbar__tag { display: none; }
@media (min-width: 720px) { .topbar__tag { display: inline; } }
.topbar__right { display: flex; align-items: center; gap: 1.1rem; }
.topbar a { transition: color var(--dur) var(--ease); display: inline-block; padding-block: .45rem; }
.topbar a:hover { color: #fff; }
[data-theme="dark"] .topbar a:hover { color: var(--ink); }

.masthead {
  position: sticky;
  top: 0;
  z-index: 60;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
}
.masthead.is-stuck { box-shadow: var(--sh-2); }

.masthead__inner {
  display: flex;
  align-items: center;
  gap: var(--s5);
  min-height: var(--header-h);
}

.brand { display: flex; align-items: center; gap: .65rem; flex: none; }
.brand__mark { width: 34px; height: 34px; flex: none; }
/* Height-bound so a replacement logo of any ratio still fits the masthead. */
.brand__logo { display: block; height: 38px; width: auto; max-width: min(52vw, 260px); object-fit: contain; }
@media (max-width: 640px) { .brand__logo { height: 32px; } }
.brand__word {
  display: flex; flex-direction: column; line-height: 1;
}
.brand__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.14rem;
  letter-spacing: -.03em;
  color: var(--ink);
}
.brand__sub {
  font-size: var(--fs-2xs);
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: .22rem;
  font-weight: 500;
}

.nav { margin-left: auto; display: none; }
@media (min-width: 1000px) { .nav { display: block; } }
.nav__list { display: flex; align-items: center; gap: .35rem; list-style: none; margin: 0; padding: 0; }
.nav__link {
  position: relative;
  display: block;
  padding: .55rem .8rem;
  font-size: var(--fs-sm);
  font-weight: 550;
  color: var(--ink-2);
  border-radius: var(--r-sm);
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.nav__link:hover { color: var(--ink); background: var(--surface-2); }
.nav__link[aria-current="page"] { color: var(--ink); font-weight: 650; }
.nav__link[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: .8rem; right: .8rem; bottom: .15rem;
  height: 2px;
  background: var(--gold);
  border-radius: 2px;
}

.nav__item--has-menu { position: relative; }
.nav__menu {
  position: absolute;
  top: calc(100% + .5rem);
  left: 0;
  min-width: 208px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--sh-3);
  padding: .4rem;
  list-style: none;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: all var(--dur) var(--ease);
}
.nav__item--has-menu:hover .nav__menu,
.nav__item--has-menu:focus-within .nav__menu { opacity: 1; visibility: visible; transform: none; }
.nav__menu a {
  display: block;
  padding: .5rem .7rem;
  font-size: var(--fs-sm);
  color: var(--ink-2);
  border-radius: var(--r-sm);
}
.nav__menu a:hover { background: var(--surface-2); color: var(--ink); }

.masthead__tools { display: flex; align-items: center; gap: .3rem; margin-left: auto; }
@media (min-width: 1000px) { .masthead__tools { margin-left: var(--s4); } }

.icon-btn {
  width: 38px; height: 38px;
  display: inline-grid;
  place-items: center;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink-2);
  transition: all var(--dur) var(--ease);
}
.icon-btn:hover { background: var(--surface-2); color: var(--ink); border-color: var(--line); }
.icon-btn svg { width: 18px; height: 18px; }
.icon-btn--menu { display: inline-grid; }
@media (min-width: 1000px) { .icon-btn--menu { display: none; } }

.theme-toggle .moon { display: none; }
[data-theme="dark"] .theme-toggle .sun { display: none; }
[data-theme="dark"] .theme-toggle .moon { display: block; }

.masthead__cta { display: none; }
@media (min-width: 1140px) { .masthead__cta { display: inline-flex; margin-left: .5rem; } }

/* Reading progress */
.progress {
  position: absolute;
  left: 0; bottom: -1px;
  height: 2px;
  width: 0%;
  background: linear-gradient(90deg, var(--gold), var(--gold-bright));
  transition: width .1s linear;
}

/* Mobile drawer ---------------------------------------------------------- */

.drawer {
  position: fixed;
  inset: 0;
  z-index: 90;
  visibility: hidden;
  pointer-events: none;
}
.drawer.is-open { visibility: visible; pointer-events: auto; }
.drawer__scrim {
  position: absolute; inset: 0;
  background: rgba(10,18,17,.5);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
  backdrop-filter: blur(2px);
}
.drawer.is-open .drawer__scrim { opacity: 1; }
.drawer__panel {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: min(360px, 86vw);
  background: var(--paper);
  border-left: 1px solid var(--line);
  padding: var(--s5) var(--s5) var(--s7);
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform .38s var(--ease-out);
  display: flex;
  flex-direction: column;
  gap: var(--s5);
}
.drawer.is-open .drawer__panel { transform: none; }
.drawer__head { display: flex; align-items: center; justify-content: space-between; }
.drawer__nav { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.drawer__nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .95rem 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: -.02em;
  transition: color var(--dur) var(--ease), padding-left var(--dur) var(--ease);
}
.drawer__nav a:hover { color: var(--brand); padding-left: .35rem; }
[data-theme="dark"] .drawer__nav a:hover { color: var(--brand-2); }
.drawer__nav a span { font-family: var(--font-sans); font-size: var(--fs-xs); color: var(--ink-3); font-weight: 500; }

/* Search overlay --------------------------------------------------------- */

.searchbox {
  position: fixed;
  inset: 0;
  z-index: 95;
  display: grid;
  place-items: start center;
  padding-top: 12vh;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(10px);
  visibility: hidden;
  opacity: 0;
  transition: all var(--dur) var(--ease);
}
.searchbox.is-open { visibility: visible; opacity: 1; }
.searchbox__inner { width: min(680px, 92vw); }
.searchbox__field {
  display: flex; align-items: center; gap: .85rem;
  border-bottom: 2px solid var(--ink);
  padding-bottom: .85rem;
}
.searchbox__field input {
  flex: 1;
  border: 0;
  background: transparent;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
  letter-spacing: -.03em;
  outline: none;
  color: var(--ink);
}
.searchbox__field input::placeholder { color: var(--ink-3); }
.searchbox__hint { margin-top: 1rem; font-size: var(--fs-xs); color: var(--ink-3); display: flex; gap: 1rem; flex-wrap: wrap; }
kbd {
  font-family: var(--font-mono);
  font-size: .72rem;
  border: 1px solid var(--line-2);
  border-bottom-width: 2px;
  border-radius: var(--r-xs);
  padding: .1rem .35rem;
  background: var(--surface);
  color: var(--ink-2);
}

/* --------------------------------------------------------------------------
   7. THUMBNAILS
   Generated placeholders. In WordPress these become <img> with srcset.
   -------------------------------------------------------------------------- */

.thumb {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--surface-sunk);
  border-radius: var(--r-sm);
  aspect-ratio: 16 / 9;
  isolation: isolate;
}
.thumb::after {
  content: "";
  position: absolute; inset: 0;
  box-shadow: inset 0 0 0 1px rgba(16,32,31,.07);
  border-radius: inherit;
  z-index: 3;
  pointer-events: none;
}
[data-theme="dark"] .thumb::after { box-shadow: inset 0 0 0 1px rgba(236,231,218,.08); }
.thumb__art {
  position: absolute; inset: 0;
  display: grid;
  place-items: center;
  transition: transform .6s var(--ease-out), filter .6s var(--ease-out);
  z-index: 1;
}
.thumb__mono {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 1.2rem + 3vw, 3.5rem);
  letter-spacing: -.05em;
  color: rgba(255,255,255,.94);
  text-shadow: 0 1px 20px rgba(0,0,0,.22);
  z-index: 2;
}
a:hover .thumb__art, .card:hover .thumb__art { transform: scale(1.045); }
.thumb--wide { aspect-ratio: 16 / 9; }
.thumb--square { aspect-ratio: 1; }
.thumb--tall { aspect-ratio: 4 / 5; }

/* Deterministic palettes so cards feel curated, not random */
.g1  { background: linear-gradient(140deg, #0C3A3C, #1E6663 62%, #2C8A7E); }
.g2  { background: linear-gradient(140deg, #23324B, #3B4C77 60%, #5C6FA8); }
.g3  { background: linear-gradient(140deg, #5A3A18, #8A5A22 58%, #C99A21); }
.g4  { background: linear-gradient(140deg, #3E2340, #6B3B62 60%, #A05C86); }
.g5  { background: linear-gradient(140deg, #103A2E, #26644A 60%, #4C9270); }
.g6  { background: linear-gradient(140deg, #4A1F22, #7C3439 58%, #B4585A); }
.g7  { background: linear-gradient(140deg, #14304A, #1F5170 60%, #3585A8); }
.g8  { background: linear-gradient(140deg, #33301A, #5E5629 60%, #93884A); }

.thumb__badge {
  position: absolute;
  top: .6rem; left: .6rem;
  z-index: 4;
  background: rgba(255,255,255,.94);
  color: #10201F;
  font-size: var(--fs-2xs);
  font-weight: 650;
  letter-spacing: .09em;
  text-transform: uppercase;
  padding: .28rem .5rem;
  border-radius: var(--r-xs);
  backdrop-filter: blur(6px);
}

/* --------------------------------------------------------------------------
   8. CARDS & STORY LISTS
   -------------------------------------------------------------------------- */

.card { display: flex; flex-direction: column; gap: var(--s3); min-width: 0; }
.card__body { display: flex; flex-direction: column; gap: .55rem; align-items: flex-start; }
.card__body > * { max-width: 100%; }
.card__title {
  font-size: var(--fs-h3);
  line-height: 1.2;
  letter-spacing: -.021em;
}
.card__title a {
  background-image: linear-gradient(var(--gold), var(--gold));
  background-size: 0% 2px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size .42s var(--ease-out);
  padding-bottom: 1px;
}
.card:hover .card__title a, .card__title a:hover { background-size: 100% 2px; }
.card__dek {
  font-size: var(--fs-sm);
  color: var(--ink-3);
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card--compact .card__title { font-size: var(--fs-h4); line-height: 1.28; }

/* Horizontal variant for rails / sidebars */
.card--row { flex-direction: row; align-items: flex-start; gap: var(--s4); }
.card--row .thumb { width: 136px; flex: none; aspect-ratio: 16 / 9; border-radius: var(--r-xs); }
.card--row .card__title { font-size: 1rem; line-height: 1.32; letter-spacing: -.012em; font-weight: 600; }

/* Numbered ranking list */
.rank { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.rank__item {
  display: grid;
  grid-template-columns: 2.4rem 1fr;
  gap: var(--s4);
  padding: var(--s4) 0;
  border-top: 1px solid var(--line);
  align-items: start;
}
.rank__item:first-child { border-top: 0; padding-top: 0; }
.rank__num {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  transition: color var(--dur) var(--ease);
}
.rank__item:hover .rank__num { color: var(--gold-ink); }
[data-theme="dark"] .rank__item:hover .rank__num { color: var(--gold); }
.rank__title {
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.32;
  letter-spacing: -.014em;
  margin-bottom: .35rem;
  display: block;
}
.rank__item:hover .rank__title { color: var(--brand); }
[data-theme="dark"] .rank__item:hover .rank__title { color: var(--brand-2); }

/* Lead / hero story ------------------------------------------------------ */

.lead { display: grid; gap: var(--s6); }
@media (min-width: 1040px) {
  .lead { grid-template-columns: minmax(0, 1.62fr) minmax(0, 1fr); align-items: start; gap: var(--s7); }
}
.lead__title {
  font-size: var(--fs-h1);
  letter-spacing: -.033em;
  line-height: 1.03;
}
.lead__title a { background-image: linear-gradient(var(--gold), var(--gold)); background-size: 0% 3px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size .5s var(--ease-out); }
.lead__title a:hover { background-size: 100% 3px; }
.lead__body { display: flex; flex-direction: column; gap: var(--s4); margin-top: var(--s5); }

.stack { display: flex; flex-direction: column; }
.stack > * + * { border-top: 1px solid var(--line); padding-top: var(--s5); margin-top: var(--s5); }

/* Sidebar rail ----------------------------------------------------------- */

.rail {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  padding: var(--s5);
}
.rail__head {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: var(--s3);
  margin-bottom: var(--s4);
  border-bottom: 1px solid var(--line);
}
.rail__title {
  font-size: 1.05rem;
  letter-spacing: -.02em;
}
.rail--sticky { position: sticky; top: calc(var(--header-h) + 1.5rem); }

/* --------------------------------------------------------------------------
   9. FUNDING TABLE  — the structured-data differentiator
   -------------------------------------------------------------------------- */

.ledger {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  overflow: hidden;
}
.ledger__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  padding: var(--s4) var(--s5);
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
  flex-wrap: wrap;
}
.ledger__title { font-size: 1.06rem; letter-spacing: -.02em; }
.ledger__live {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: var(--fs-2xs); font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--up);
}
.ledger__pip { width: 6px; height: 6px; border-radius: 50%; background: var(--up); animation: pip 2.4s var(--ease) infinite; }
@keyframes pip { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.8); } }

.ledger__scroll { overflow-x: auto; }
.ledger table { width: 100%; border-collapse: collapse; min-width: 640px; }
.ledger th {
  text-align: left;
  font-family: var(--font-sans);
  font-size: var(--fs-2xs);
  font-weight: 650;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: .85rem var(--s5);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.ledger td {
  padding: .95rem var(--s5);
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-sm);
  color: var(--ink-2);
  vertical-align: middle;
}
.ledger tbody tr { transition: background var(--dur) var(--ease); }
.ledger tbody tr:hover { background: var(--surface-2); }
.ledger tbody tr:last-child td { border-bottom: 0; }
.ledger__co { display: flex; align-items: center; gap: .7rem; }
.ledger__logo {
  width: 30px; height: 30px; flex: none;
  border-radius: var(--r-xs);
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-size: .8rem; font-weight: 700;
  color: #fff;
}
.ledger__name { font-weight: 600; color: var(--ink); font-size: var(--fs-sm); }
.ledger__amt { font-family: var(--font-mono); font-weight: 600; color: var(--ink); font-size: .875rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ledger__stage {
  font-size: var(--fs-2xs); font-weight: 650; letter-spacing: .07em; text-transform: uppercase;
  padding: .22rem .45rem; border-radius: var(--r-xs);
  background: var(--gold-wash); color: var(--gold-ink);
  white-space: nowrap;
}
.ledger__foot {
  padding: var(--s4) var(--s5);
  border-top: 1px solid var(--line);
  background: var(--surface-2);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
  font-size: var(--fs-xs); color: var(--ink-3);
  flex-wrap: wrap;
}

/* Stat strip */
.stats {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 860px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat { background: var(--surface); padding: var(--s5); display: flex; flex-direction: column; gap: .3rem; }
.stat__val {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.4rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.035em;
  font-variant-numeric: tabular-nums;
}
.stat__label { font-size: var(--fs-2xs); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.stat__delta { font-size: var(--fs-xs); color: var(--up); font-weight: 600; }
.stat__delta--down { color: var(--down); }

/* --------------------------------------------------------------------------
   10. NEWSLETTER
   -------------------------------------------------------------------------- */

.subscribe {
  background: var(--brand);
  color: #F4F0E6;
  border-radius: var(--r-lg);
  padding: clamp(1.75rem, 1.2rem + 2.4vw, 3.25rem);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
[data-theme="dark"] .subscribe { background: var(--surface); border: 1px solid var(--line); color: var(--ink); }
.subscribe::before {
  content: "";
  position: absolute;
  top: -40%; right: -10%;
  width: 460px; height: 460px;
  background: radial-gradient(circle, rgba(244,180,0,.20), transparent 65%);
  z-index: -1;
}
.subscribe__grid { display: grid; gap: var(--s5); align-items: center; }
@media (min-width: 900px) { .subscribe__grid { grid-template-columns: 1.1fr 1fr; gap: var(--s7); } }
.subscribe__title {
  font-size: var(--fs-h2);
  color: #FDFBF6;
  letter-spacing: -.028em;
}
[data-theme="dark"] .subscribe__title { color: var(--ink); }
.subscribe__dek { color: rgba(244,240,230,.76); font-size: var(--fs-sm); margin-top: .75rem; max-width: 46ch; }
[data-theme="dark"] .subscribe__dek { color: var(--ink-3); }
.subscribe .eyebrow { color: var(--gold-bright); }
.subscribe .eyebrow::before { background: var(--gold-bright); }

.field {
  display: flex;
  gap: .5rem;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: var(--r-sm);
  padding: .35rem;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.field:focus-within { border-color: var(--gold-bright); background: rgba(255,255,255,.15); }
[data-theme="dark"] .field { background: var(--surface-2); border-color: var(--line-2); }
.field input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  outline: none;
  padding: .6rem .8rem;
  font-size: var(--fs-sm);
  color: #FDFBF6;
}
[data-theme="dark"] .field input { color: var(--ink); }
.field input::placeholder { color: rgba(244,240,230,.68); }
[data-theme="dark"] .field input::placeholder { color: var(--ink-3); }
.subscribe__note { font-size: var(--fs-2xs); color: rgba(244,240,230,.7); margin-top: .75rem; }
[data-theme="dark"] .subscribe__note { color: var(--ink-3); }
.subscribe__ok { display: none; font-size: var(--fs-sm); color: var(--gold-bright); margin-top: .75rem; font-weight: 600; }
.subscribe.is-done .subscribe__ok { display: block; }
.subscribe.is-done .field, .subscribe.is-done .subscribe__note { display: none; }

/* --------------------------------------------------------------------------
   11. ARTICLE
   -------------------------------------------------------------------------- */

.crumbs { display: flex; align-items: center; gap: .5rem; font-size: var(--fs-xs); color: var(--ink-3); flex-wrap: wrap; }
.crumbs a { display: inline-block; padding-block: .2rem; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.crumbs svg { width: 12px; height: 12px; opacity: .5; }

.article-head { padding-top: var(--s7); }
.article__title {
  font-size: var(--fs-h1);
  letter-spacing: -.034em;
  line-height: 1.02;
  margin-top: var(--s4);
}
.article__lede { margin-top: var(--s5); }

.byline { display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap; margin-top: var(--s6); }
.byline__avatar {
  width: 44px; height: 44px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: 1rem; color: #fff;
}
.byline__who { display: flex; flex-direction: column; gap: .15rem; }
.byline__name { font-weight: 650; font-size: var(--fs-sm); color: var(--ink); }
.byline__name a:hover { color: var(--brand); }
[data-theme="dark"] .byline__name a:hover { color: var(--brand-2); }
.byline__meta { font-size: var(--fs-xs); color: var(--ink-3); display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.byline__share { margin-left: auto; display: flex; gap: .35rem; }

.figure { margin: var(--s6) 0 0; }
.figure figcaption {
  font-size: var(--fs-xs);
  color: var(--ink-3);
  margin-top: .7rem;
  padding-left: .85rem;
  border-left: 2px solid var(--gold);
  line-height: 1.5;
}

.article-layout { display: grid; gap: var(--s7); }
@media (min-width: 1100px) {
  .article-layout { grid-template-columns: minmax(0, 1fr) 320px; gap: var(--s8); align-items: start; }
}

.prose { max-width: var(--measure); }
.prose > * + * { margin-top: 1.35em; }
.prose p { font-size: 1.115rem; line-height: 1.72; color: var(--ink-2); letter-spacing: -.003em; }
.prose h2 {
  font-size: var(--fs-h2);
  margin-top: 2.4em;
  letter-spacing: -.028em;
  scroll-margin-top: calc(var(--header-h) + 2rem);
  color: var(--ink);
}
.prose h3 {
  font-size: var(--fs-h3);
  margin-top: 2em;
  color: var(--ink);
}
.prose a:not(.btn) {
  color: var(--ink);
  background-image: linear-gradient(var(--gold), var(--gold));
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  padding-bottom: 1px;
  transition: background-size .3s var(--ease);
}
.prose a:not(.btn):hover { background-size: 100% 100%; padding-bottom: 0; }
[data-theme="dark"] .prose a:not(.btn):hover { color: #10201F; }
.prose strong { font-weight: 650; color: var(--ink); }
.prose em { font-style: italic; }
.prose ul, .prose ol { padding-left: 1.3rem; color: var(--ink-2); }
.prose li { margin-top: .55em; font-size: 1.115rem; line-height: 1.68; }
.prose li::marker { color: var(--gold); }
.prose hr { border: 0; height: 1px; background: var(--line); margin: 2.6em 0; }

.prose > p:first-of-type::first-letter {
  font-family: var(--font-display);
  float: left;
  font-size: 3.9em;
  line-height: .82;
  font-weight: 600;
  padding: .06em .09em 0 0;
  color: var(--brand);
}
[data-theme="dark"] .prose > p:first-of-type::first-letter { color: var(--brand-2); }

.pullquote {
  margin: 2.6em 0;
  padding: 0 0 0 clamp(1.1rem, .6rem + 1.6vw, 2rem);
  border-left: 3px solid var(--gold);
}
.pullquote p {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 1.1rem + 1vw, 1.75rem);
  line-height: 1.32;
  letter-spacing: -.026em;
  color: var(--ink);
}
.pullquote cite {
  display: block;
  margin-top: .9rem;
  font-family: var(--font-sans);
  font-style: normal;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* Key facts box — structured data pulled out of the prose */
.facts {
  border: 1px solid var(--line);
  border-top: 3px solid var(--gold);
  border-radius: 0 0 var(--r) var(--r);
  background: var(--surface);
  padding: var(--s5);
  margin: 2.4em 0;
}
.facts__title {
  font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: var(--s4);
}
.facts__list { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; }
@media (min-width: 600px) { .facts__list { grid-template-columns: repeat(2, 1fr); } }
.facts__item { background: var(--surface); padding: .85rem 1rem; display: flex; flex-direction: column; gap: .2rem; }
.facts__k { font-size: var(--fs-2xs); letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; }
.facts__v { font-size: var(--fs-sm); font-weight: 600; color: var(--ink); }
.facts__v--num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* Inline read-next */
.readnext {
  display: flex; align-items: center; gap: var(--s4);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: var(--s5) 0; margin: 2.6em 0;
}
.readnext__label { font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-ink); flex: none; writing-mode: vertical-rl; transform: rotate(180deg); }
[data-theme="dark"] .readnext__label { color: var(--gold-ink); }
.readnext__title { font-family: var(--font-display); font-size: 1.16rem; line-height: 1.3; font-weight: 600; letter-spacing: -.02em; }
.readnext:hover .readnext__title { color: var(--brand); }
[data-theme="dark"] .readnext:hover .readnext__title { color: var(--brand-2); }

/* Table of contents */
.toc__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .1rem; }
.toc__list a {
  display: block;
  padding: .48rem .75rem;
  font-size: var(--fs-xs);
  color: var(--ink-3);
  border-left: 2px solid var(--line);
  line-height: 1.45;
  transition: all var(--dur) var(--ease);
}
.toc__list a:hover { color: var(--ink); border-left-color: var(--line-3); background: var(--surface-2); }
.toc__list a.is-active { color: var(--ink); border-left-color: var(--gold); font-weight: 600; }

/* Share rail */
.sharerail { display: flex; gap: .4rem; }
@media (min-width: 1320px) {
  .sharerail--float {
    position: sticky;
    top: calc(var(--header-h) + 2rem);
    float: left;
    margin-left: -5.5rem;
    flex-direction: column;
  }
}

/* Author card */
.authorcard {
  display: flex; gap: var(--s5); align-items: flex-start;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  padding: var(--s5);
  margin-top: var(--s7);
}
.authorcard__avatar { width: 62px; height: 62px; border-radius: 50%; flex: none; display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; color: #fff; }

/* --------------------------------------------------------------------------
   12. ARCHIVE / PAGE HEADERS
   -------------------------------------------------------------------------- */

.pagehead {
  border-bottom: 1px solid var(--line);
  padding-block: clamp(2.25rem, 1.5rem + 2.6vw, 4rem);
  background: linear-gradient(180deg, var(--paper-2), var(--paper));
  position: relative;
}
.pagehead__title {
  font-size: var(--fs-display);
  letter-spacing: -.042em;
  line-height: .95;
  margin-top: var(--s3);
}
.pagehead__dek { margin-top: var(--s5); max-width: 62ch; }
.pagehead__stats { display: flex; gap: var(--s6); margin-top: var(--s6); flex-wrap: wrap; }
.pagehead__stat { display: flex; flex-direction: column; gap: .1rem; }
.pagehead__stat b { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; letter-spacing: -.03em; }
.pagehead__stat span { font-size: var(--fs-2xs); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; }

.filters { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.filter {
  font-size: var(--fs-xs);
  font-weight: 600;
  padding: .45rem .85rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-2);
  background: transparent;
  color: var(--ink-2);
  transition: all var(--dur) var(--ease);
}
.filter:hover { border-color: var(--ink-3); color: var(--ink); }
.filter.is-active { background: var(--ink); color: var(--paper); border-color: var(--ink); }


/* --------------------------------------------------------------------------
   13. ABOUT / EDITORIAL PAGES
   -------------------------------------------------------------------------- */

.principle {
  display: grid;
  gap: var(--s4);
  padding: var(--s6) 0;
  border-top: 1px solid var(--line);
}
@media (min-width: 820px) { .principle { grid-template-columns: 5.5rem 1fr; gap: var(--s6); } }
.principle__num {
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 600;
  line-height: .9;
  color: var(--gold-ink);
  font-variant-numeric: tabular-nums;
}
[data-theme="dark"] .principle__num { color: var(--gold); }
.principle__title { font-size: var(--fs-h3); margin-bottom: .6rem; }

.person { display: flex; flex-direction: column; gap: var(--s4); }
.person__avatar { width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: 1.7rem; color: #fff; }
.person__name { font-size: var(--fs-h4); }
.person__role { font-size: var(--fs-xs); letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; margin-top: .25rem; }

/* Empty state / 404 */
.empty { text-align: center; padding-block: clamp(3rem, 2rem + 5vw, 7rem); max-width: 56ch; margin-inline: auto; }
.empty__code {
  font-family: var(--font-display);
  font-size: clamp(5rem, 3rem + 12vw, 11rem);
  font-weight: 600;
  line-height: .85;
  letter-spacing: -.06em;
  background: linear-gradient(160deg, var(--brand), var(--gold));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
[data-theme="dark"] .empty__code { background: linear-gradient(160deg, var(--brand-2), var(--gold)); -webkit-background-clip: text; background-clip: text; }

/* --------------------------------------------------------------------------
   14. FOOTER
   -------------------------------------------------------------------------- */

.footer {
  margin-top: clamp(3rem, 2rem + 4vw, 6rem);
  background: var(--brand);
  color: rgba(244,240,230,.72);
  padding-block: var(--s8) var(--s5);
  position: relative;
  z-index: 1;
}
[data-theme="dark"] .footer { background: var(--surface); border-top: 1px solid var(--line); color: var(--ink-3); }
.footer a { transition: color var(--dur) var(--ease); }
.footer a:hover { color: #FDFBF6; }
[data-theme="dark"] .footer a:hover { color: var(--ink); }

.footer__top { display: grid; gap: var(--s7); padding-bottom: var(--s7); border-bottom: 1px solid rgba(244,240,230,.15); }
[data-theme="dark"] .footer__top { border-bottom-color: var(--line); }
@media (min-width: 940px) { .footer__top { grid-template-columns: 1.5fr repeat(3, 1fr); gap: var(--s6); } }

.footer__brandname {
  font-family: var(--font-display);
  font-size: 1.55rem;
  font-weight: 700;
  color: #FDFBF6;
  letter-spacing: -.032em;
}
[data-theme="dark"] .footer__brandname { color: var(--ink); }
.footer__tagline { margin-top: .65rem; font-size: var(--fs-sm); max-width: 34ch; line-height: 1.6; }
.footer__coltitle {
  font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--gold-bright); margin-bottom: var(--s4);
}
.footer__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .45rem; font-size: var(--fs-sm); }
.footer__list a { display: inline-block; padding-block: .28rem; }
.footer__bottom {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
  padding-top: var(--s5); font-size: var(--fs-xs); flex-wrap: wrap;
}
.socials { display: flex; gap: .5rem; margin-top: var(--s5); }
.social {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border: 1px solid rgba(244,240,230,.22);
  border-radius: var(--r-sm);
  transition: all var(--dur) var(--ease);
}
[data-theme="dark"] .social { border-color: var(--line-2); }
.social:hover { background: var(--gold-bright); border-color: var(--gold-bright); color: #2A1F00; transform: translateY(-2px); }
.social svg { width: 16px; height: 16px; }

/* --------------------------------------------------------------------------
   15. MOTION
   -------------------------------------------------------------------------- */

html.js [data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
}
html.js [data-reveal].is-in { opacity: 1; transform: none; }

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

/* --------------------------------------------------------------------------
   16. UTILITIES
   -------------------------------------------------------------------------- */

.u-hide { display: none !important; }
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.u-mt-4 { margin-top: var(--s4); }
.u-mt-5 { margin-top: var(--s5); }
.u-mt-6 { margin-top: var(--s6); }
.u-mt-7 { margin-top: var(--s7); }
.u-flow > * + * { margin-top: var(--s4); }

@media print {
  .masthead, .topbar, .footer, .drawer, .searchbox, .sharerail, .subscribe, .rail { display: none !important; }
  body { background: #fff; color: #000; }
  .prose p { font-size: 11pt; }
}

/* ==========================================================================
   Elevation pass
   --------------------------------------------------------------------------
   Added after the type change to Zodiak + Switzer. Everything here is either a
   new component (the pager, page transitions) or a refinement of rhythm and
   motion. Colour and spacing still come from the tokens at the top of this
   file — nothing below hardcodes a value the design system already owns.
   ========================================================================== */

/* --- Type correction for the new faces ---------------------------------- */
/* Zodiak is a high-contrast display serif: beautiful large, fragile small.
   Anything under ~1.2rem that used the display face gets the body face
   instead, and the display face gains a touch of weight to hold up. */
.ledger__title,
.authorcard__avatar,
.person__avatar,
.pagehead__stat b {
  font-family: var(--font-sans);
  letter-spacing: -.015em;
}

h1, h2, h3, .card__title, .lead__title {
  /* Switzer's metrics are wider than Inter's; pull the display face back in. */
  letter-spacing: -.025em;
  text-wrap: balance;
}

p, li { text-wrap: pretty; }

/* --- Vertical rhythm ----------------------------------------------------- */
/* The brief's complaint was inconsistent spacing. Sections now step from one
   scale rather than each choosing their own margin. */
.section { padding-block: clamp(2.75rem, 1.6rem + 4vw, 5.5rem); }
.section + .section { padding-block-start: 0; }
.section__head { margin-bottom: clamp(1.25rem, .8rem + 1.4vw, 2.25rem); }

/* --- Cards --------------------------------------------------------------- */
.card {
  transition: transform .32s cubic-bezier(.2, .7, .3, 1),
              box-shadow .32s cubic-bezier(.2, .7, .3, 1),
              border-color .32s ease;
}
.card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 40px -18px rgb(16 32 31 / .28), 0 2px 6px -2px rgb(16 32 31 / .08);
  border-color: var(--line-2, var(--line));
}
[data-theme="dark"] .card:hover {
  box-shadow: 0 14px 44px -18px rgb(0 0 0 / .7);
}

/* The image is the only thing that moves, and it moves inside its own frame. */
.thumb { overflow: hidden; }
.thumb__art img {
  transition: transform .5s cubic-bezier(.2, .7, .3, 1);
  will-change: transform;
}
.card:hover .thumb__art img,
.cardrow:hover .thumb__art img { transform: scale(1.035); }

/* Chips must not stretch — the flex column needs an explicit cross-axis start
   or they inherit the full card width. */
.card__body { align-items: flex-start; }

/* --- Pager --------------------------------------------------------------- */
.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--s3);
  margin-top: var(--s8);
  padding-top: var(--s6);
  border-top: 1px solid var(--line);
}

.pager__list {
  display: flex;
  align-items: center;
  gap: .3rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.pager__item { display: block; margin: 0; }

.pager__num,
.pager__step {
  --pager-size: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  min-width: var(--pager-size);
  height: var(--pager-size);
  padding: 0 .75rem;
  border: 1px solid var(--line);
  border-radius: calc(var(--pager-size) / 2);
  background: var(--surface);
  color: var(--ink-2);
  font-family: var(--font-sans);
  font-size: .9rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}

a.pager__num:hover,
a.pager__step:hover {
  background: var(--surface-2);
  border-color: var(--ink-4);
  color: var(--ink);
  transform: translateY(-1px);
}

.pager__item.is-current .pager__num,
.pager__num.is-current {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--brand-ink, #fff);
  font-weight: 600;
}
[data-theme="dark"] .pager__item.is-current .pager__num,
[data-theme="dark"] .pager__num.is-current { color: #08110F; }

.pager__item.is-dots .pager__num,
.pager__num.is-dots {
  border-color: transparent;
  background: none;
  color: var(--ink-3);
  padding-inline: .25rem;
  min-width: 1.5rem;
}

/* Disabled ends keep their footprint so the control does not shift width. */
.pager__step.is-disabled {
  opacity: .38;
  cursor: default;
  background: none;
}

.pager__count {
  flex-basis: 100%;
  text-align: center;
  margin: .35rem 0 0;
  font-size: var(--fs-xs);
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.pager__count b { color: var(--ink-2); font-weight: 600; }

@media (max-width: 560px) {
  /* Numbers are the first thing to go on a narrow screen; prev/next remain. */
  .pager__list { display: none; }
  .pager { justify-content: space-between; }
}

/* --- Focus --------------------------------------------------------------- */
/* One visible, consistent focus ring everywhere rather than the browser
   default changing shape per element. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: 4px;
}
[data-theme="dark"] a:focus-visible,
[data-theme="dark"] button:focus-visible { outline-color: var(--gold-bright, var(--brand)); }

/* --- Page transitions ---------------------------------------------------- */
/* Used by the client-side router, and by the browser's own cross-document view
   transitions where supported. Both are decoration: navigation works without. */
@media (prefers-reduced-motion: no-preference) {
  .sv-swap-out { opacity: 0; transform: translateY(4px); }
  .sv-swap-in  { animation: sv-fade-up .34s cubic-bezier(.2, .7, .3, 1) both; }
}
main { transition: opacity .18s ease, transform .18s ease; }

@keyframes sv-fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* The router's loading indicator: a thin bar that only appears if a navigation
   is slow enough to notice. */
.sv-progress {
  position: fixed;
  inset-block-start: 0;
  inset-inline-start: 0;
  height: 2px;
  width: 0;
  background: linear-gradient(90deg, var(--brand), var(--gold));
  z-index: 9999;
  opacity: 0;
  transition: width .2s ease, opacity .25s ease;
  pointer-events: none;
}
.sv-progress.is-active { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .card, .thumb__art img, .pager__num, .pager__step, main { transition: none !important; }
  .card:hover { transform: none; }
  .card:hover .thumb__art img { transform: none; }
  .sv-swap-in { animation: none; }
}

/* --- Lead rail balance --------------------------------------------------- */
/* The lead article is taller than the Latest rail beside it, which left a
   couple of hundred pixels of dead space at the bottom of the right column.
   Stretching the rail and distributing its rows makes the two columns end
   together whatever the headline lengths happen to be. */
@media (min-width: 1040px) {
  .lead > aside {
    align-self: stretch;
    display: flex;
    flex-direction: column;
  }
  .lead > aside .rank {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* A floor, so a short rail never spreads into unrelated-looking rows. */
    gap: var(--s4);
  }
}

/* --- Search field -------------------------------------------------------- */
/* The icon had no size rule here (unlike .icon-btn svg), so it stretched to
   fill the flex row and squeezed the input off the page. */
.searchbox__field {
  gap: .75rem;
  align-items: center;
  transition: border-color .2s ease;
}
.searchbox__field svg {
  width: 22px;
  height: 22px;
  flex: none;
  color: var(--ink-3);
}
.searchbox__field input {
  /* Flex items default to min-width:auto, so a long placeholder forces the
     input wider than its column instead of shrinking. */
  min-width: 0;
  width: 100%;
  font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  text-overflow: ellipsis;
}
/* The field is an underline, not a box: indicate focus by lighting that
   underline rather than drawing a rounded outline around the input. */
.searchbox__field:focus-within { border-bottom-color: var(--brand); }
.searchbox__field input:focus-visible { outline: none; }
.searchbox__field:focus-within svg { color: var(--brand); }

/* Native search-field decorations fight the custom clear button. */
.searchbox__field input[type="search"]::-webkit-search-decoration,
.searchbox__field input[type="search"]::-webkit-search-results-button,
.searchbox__field input[type="search"]::-webkit-search-results-decoration { -webkit-appearance: none; }

/* The overlay's own field gets a little more room to breathe. */
.searchbox__inner .searchbox__field { padding-bottom: .7rem; }

/* Search results keep a readable measure but start at the same gutter as the
   page heading above them, instead of being centred in the viewport and
   floating out of alignment with everything else on the page. */
.searchresults { max-width: var(--wrap-narrow); }
.searchresults + .pager { max-width: var(--wrap-narrow); margin-inline: 0; justify-content: flex-start; }

/* ==========================================================================
   Motion system
   --------------------------------------------------------------------------
   The brief asked for showpiece motion and, in the same breath, rejected
   "motion for its own sake, slow reveals gating content, a page that shows off
   before it informs". Both hold. The rule this section follows:

     ambition goes into arrival, transition and hover — never into the path
     between a reader and the words.

   So: nothing is invisible waiting for a class, nothing blocks input, every
   effect runs on the compositor, and touch gets real feedback rather than a
   dead hover state. Durations and easings come from the tokens above.
   ========================================================================== */

/* --- 1. Reveal, made safe ------------------------------------------------
   The existing reveal hides content until an IntersectionObserver adds .is-in.
   That is one failed observer away from a blank section — transitions do not
   run in background tabs, and some headless renderers never intersect. The
   failsafe animation reveals everything after 2s regardless, so the worst case
   is a late fade rather than missing content. */
@keyframes sv-failsafe { to { opacity: 1; transform: none; } }

html.js [data-reveal] {
  animation: sv-failsafe 1ms linear 2s forwards;
}
html.js [data-reveal].is-in { animation: none; }

/* Lists stagger; sections do not. A single uniform fade-up applied to every
   block is the tell — sibling rhythm inside one list is choreography. */
html.js [data-reveal].is-in > * { animation: sv-rise var(--dur-entrance) var(--ease-quart) both; }
html.js .rank[data-reveal].is-in > *,
html.js .cards[data-reveal].is-in > * {
  animation-delay: calc(var(--i, 0) * 45ms);
}
@keyframes sv-rise {
  from { opacity: 0; transform: translate3d(0, 10px, 0); }
  to   { opacity: 1; transform: none; }
}

/* --- 2. Card hover choreography -----------------------------------------
   Layered rather than uniform: the image drifts slowly, the card lifts at a
   middle speed, the title underline draws quickly. Three timings reading as
   one gesture is the difference between "animated" and "designed". */
@media (hover: hover) and (pointer: fine) {
  .card, .cardrow { transition: transform var(--dur-state) var(--ease-quart), box-shadow var(--dur-state) var(--ease-quart); }
  .card:hover, .cardrow:hover { transform: translate3d(0, -3px, 0); }

  .thumb__art img { transition: transform 620ms var(--ease-quart), filter 620ms var(--ease-quart); }
  .card:hover .thumb__art img,
  .cardrow:hover .thumb__art img { transform: scale(1.04); }

  /* The headline underline draws from the leading edge — an editorial gesture,
     not a generic colour swap. */
  .card__title a, .rank__title, .ledger__co {
    background-image: linear-gradient(currentColor, currentColor);
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 0% 1px;
    transition: background-size 320ms var(--ease-quart);
  }
  .card:hover .card__title a,
  .rank__item:hover .rank__title,
  .card__title a:hover,
  .rank__title:hover { background-size: 100% 1px; }
}

/* Touch gets acknowledgement instead of an unreachable hover state. */
@media (hover: none) {
  .card:active, .cardrow:active { transform: scale(.988); transition: transform var(--dur-tap) var(--ease-quart); }
  .card:active .thumb__art img { transform: scale(1.02); transition: transform var(--dur-state) var(--ease-quart); }
}

/* --- 3. Press feedback ---------------------------------------------------
   Everything clickable acknowledges the press within 90ms, which is under the
   ~80-100ms threshold where the brain still reads cause and effect as one
   event. This is the single highest-value micro-interaction on touch. */
.btn, .icon-btn, .chip, .pager__num, .pager__step, .filter {
  transition:
    background-color var(--dur-quick) var(--ease-quart),
    border-color var(--dur-quick) var(--ease-quart),
    color var(--dur-quick) var(--ease-quart),
    transform var(--dur-tap) var(--ease-quart),
    box-shadow var(--dur-state) var(--ease-quart);
}
.btn:active, .icon-btn:active, .chip:active,
a.pager__num:active, a.pager__step:active, .filter:active { transform: scale(.96); }

@media (hover: hover) and (pointer: fine) {
  .btn:hover { transform: translate3d(0, -1px, 0); box-shadow: 0 8px 20px -10px rgb(12 58 60 / .45); }
  .icon-btn:hover { transform: translate3d(0, -1px, 0); }
}

/* Arrow links travel on hover — the arrow is the affordance, so it moves. */
.sec-head__link svg, .ledger__foot a svg, .btn svg { transition: transform var(--dur-state) var(--ease-quart); }
@media (hover: hover) and (pointer: fine) {
  .sec-head__link:hover svg, .ledger__foot a:hover svg, .btn:hover svg { transform: translate3d(3px, 0, 0); }
}

/* --- 4. Navigation ------------------------------------------------------- */
.nav__list a { transition: color var(--dur-quick) var(--ease-quart); }
.nav__list a::after { transition: width 320ms var(--ease-quart), opacity var(--dur-quick) linear; }

/* --- 5. The Ledger -------------------------------------------------------
   This is the differentiator, so its rows get more attention than a generic
   table: the row warms, and the figure — the reason anyone is reading it —
   gains weight. */
.ledger tbody tr { transition: background-color var(--dur-quick) var(--ease-quart); }
.ledger tbody tr td { transition: transform var(--dur-state) var(--ease-quart); }
.ledger__amt { transition: color var(--dur-quick) var(--ease-quart), transform var(--dur-state) var(--ease-quart); }
.ledger__logo { transition: transform var(--dur-state) var(--ease-quart); }

@media (hover: hover) and (pointer: fine) {
  .ledger tbody tr:hover { background: var(--surface-2); }
  .ledger tbody tr:hover .ledger__amt { color: var(--gold-ink); transform: translate3d(-1px, 0, 0) scale(1.03); transform-origin: left center; }
  .ledger tbody tr:hover .ledger__logo { transform: rotate(-3deg) scale(1.06); }
}

/* --- 6. Theme toggle -----------------------------------------------------
   The icon rotates through the swap rather than cutting, so the control reads
   as one object changing state. */
.theme-toggle svg { transition: transform var(--dur-slow) var(--ease-quart), opacity var(--dur-quick) linear; }
.theme-toggle:active svg { transform: rotate(45deg) scale(.9); }

/* --- 7. Overlays ---------------------------------------------------------
   The search overlay arrives with a short scale and a backdrop blur that
   settles, so the page behind recedes rather than disappearing. */
.searchbox {
  transition: opacity var(--dur-slow) var(--ease-quart), visibility var(--dur-slow) linear,
              backdrop-filter var(--dur-slow) var(--ease-quart);
}
.searchbox__inner {
  transform: translate3d(0, -12px, 0) scale(.98);
  opacity: 0;
  transition: transform var(--dur-slow) var(--ease-expo), opacity var(--dur-state) var(--ease-quart);
}
.searchbox.is-open .searchbox__inner { transform: none; opacity: 1; }

.drawer__panel { transition: transform var(--dur-slow) var(--ease-expo); }
.drawer__scrim { transition: opacity var(--dur-slow) var(--ease-quart); }

/* --- 8. Page transition --------------------------------------------------
   The signature moment. The router already has the next page in memory before
   the click lands (it prefetches on hover), so this is pure choreography with
   nothing waiting behind it. The masthead is pinned out of the transition so
   only the content changes — which is what makes it read as one site rather
   than two pages. */
::view-transition-old(root) { animation: sv-page-out 260ms var(--ease-quart) both; }
::view-transition-new(root) { animation: sv-page-in var(--dur-entrance) var(--ease-expo) both; }

@keyframes sv-page-out {
  to { opacity: 0; transform: translate3d(0, -6px, 0); filter: blur(3px); }
}
@keyframes sv-page-in {
  from { opacity: 0; transform: translate3d(0, 12px, 0); filter: blur(4px); }
  to   { opacity: 1; transform: none; filter: none; }
}

/* The masthead and topbar keep their own identity across the swap, so they do
   not cross-fade with the content underneath them. */
/* One name per element — two elements sharing a view-transition-name makes the
   browser abort the whole transition with "invalid state". */
.topbar   { view-transition-name: sv-topbar; }
.masthead { view-transition-name: sv-masthead; }
::view-transition-group(sv-topbar),
::view-transition-group(sv-masthead) { animation-duration: 0s; }

/* A featured image morphs into the article hero it links to. The router tags
   both ends; if either side is missing the browser simply cross-fades. */
::view-transition-group(sv-hero) { animation-duration: 520ms; animation-timing-function: var(--ease-expo); }
::view-transition-old(sv-hero),
::view-transition-new(sv-hero) { mix-blend-mode: normal; }

/* --- 9. Reduced motion ---------------------------------------------------
   A real alternative, not a blanket kill. Content still arrives, state changes
   still register — they just stop moving. A global `animation: none` would
   strand anything mid-transition, which is worse than no motion at all. */
@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal],
  html.js [data-reveal].is-in > * { animation: none; opacity: 1; transform: none; }

  .card:hover, .cardrow:hover, .btn:hover, .icon-btn:hover { transform: none; }
  .card:hover .thumb__art img, .cardrow:hover .thumb__art img { transform: none; }
  .ledger tbody tr:hover .ledger__amt,
  .ledger tbody tr:hover .ledger__logo { transform: none; }
  .sec-head__link:hover svg, .btn:hover svg { transform: none; }

  /* Colour and background feedback survive — they carry state, not decoration. */
  ::view-transition-old(root) { animation: sv-fade-out 120ms linear both; }
  ::view-transition-new(root) { animation: sv-fade-in 120ms linear both; }
  @keyframes sv-fade-out { to { opacity: 0; } }
  @keyframes sv-fade-in { from { opacity: 0; } }
}