/* ============================================================
   AEA Capital Research — shared stylesheet
   Static site. No build step, no runtime CDNs — fonts below are
   self-hosted local files (fonts/*.woff2), fetched once and
   vendored into the repo rather than loaded live from Google.
   ============================================================ */

@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/inter-tight-latin.woff2') format('woff2');
}

@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url('fonts/playfairdisplay-latin.woff2') format('woff2');
}

@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('fonts/source-serif4-latin.woff2') format('woff2');
}

@font-face {
  font-family: 'Source Serif 4';
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url('fonts/source-serif4-latin-italic.woff2') format('woff2');
}

:root {
  --navy:        #0a1a33;   /* dark chrome / homepage hero — Deep Midnight Navy */
  --navy-soft:   #16294a;   /* soft navy accent / hover                */
  --ink:         #0a1a33;   /* body text                               */
  --muted:       #545f74;   /* secondary text — Cool Slate             */
  --hairline:    rgba(10, 26, 51, 0.14);   /* rules / borders — cool hairline */
  --paper:       #f8f9fb;   /* page background — Crisp White           */
  --burgundy:    #6d2942;   /* Heritage Wine — eyebrow/kicker accent, distinct from gold + negative red */
  --gold:        #9c8248;   /* accent / CTAs — Antique Champagne Gold  */
  --band:        #eef0f4;   /* footer + table header band              */
  --positive:    #1f7a52;   /* gains — refined emerald                 */
  --negative:    #a13333;   /* losses — refined crimson                */
  --emerald:     #0f3d30;   /* Vault Green — deep ledger-green, alternate band accent */
  --emerald-soft:#1a5c48;   /* lighter vault green for gradients/hover */
  --copper:      #a8632f;   /* Brass Ticker — warm bronze accent for hover/emphasis */
  --copper-soft: rgba(168,99,47,0.14);
  --radius:      10px;      /* soft corner radius for cards/tiles      */

  --serif: 'Playfair Display', Georgia, "Times New Roman", Times, serif;
  --sans:  'Inter Tight', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
           Helvetica, Arial, sans-serif;
  --reading: 'Source Serif 4', Georgia, Cambria, "Times New Roman", Times, serif;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.7;
  font-weight: 400;
}

/* ---------- Research practice / decision memo ---------- */

.practice-hero {
  background: linear-gradient(125deg, #08162c 0%, #132c4e 62%, #1d4a48 100%);
  color: #fff;
  padding: 88px 0 78px;
  position: relative;
  overflow: hidden;
}
.practice-hero::after {
  content: "";
  position: absolute;
  width: 420px;
  height: 420px;
  right: -120px;
  top: -210px;
  border: 1px solid rgba(231, 208, 140, .42);
  border-radius: 50%;
  box-shadow: 0 0 0 44px rgba(231, 208, 140, .07), 0 0 0 88px rgba(231, 208, 140, .045);
}
.practice-hero .wrap { position: relative; z-index: 1; }
.practice-hero .kicker { color: #e8ce91; }
.practice-hero h1 { color: #fff; max-width: 650px; margin-bottom: 18px; }
.practice-hero .hero-lede { max-width: 650px; color: #d5dde7; font-family: var(--reading); font-size: 23px; line-height: 1.45; }
.practice-key { color: #e8ce91; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin-top: 34px; }
.practice-key span { color: rgba(255,255,255,.4); margin: 0 8px; }
.journal-stack { border-top: 1px solid var(--hairline); }
.journal-entry { display: grid; grid-template-columns: 86px 1fr; gap: 30px; padding: 30px 0; border-bottom: 1px solid var(--hairline); }
.journal-stamp { padding-top: 2px; color: var(--burgundy); }
.journal-stamp span { display: block; font-family: var(--serif); font-size: 31px; line-height: 1; }
.journal-stamp small { display: block; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-top: 6px; }
.journal-tag, .postmortem-label { color: var(--burgundy); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin: 0 0 7px; }
.journal-entry h3 { margin: 0 0 9px; font-family: var(--serif); font-size: 25px; line-height: 1.25; }
.journal-entry p { margin: 8px 0; }
.journal-links { display: flex; flex-wrap: wrap; gap: 18px; font-size: 14px; font-weight: 700; margin-top: 15px !important; }
.postmortem-feature { border-left: 3px solid var(--gold); background: #fff; padding: 30px; box-shadow: 0 10px 28px rgba(10,26,51,.06); }
.postmortem-feature h3 { font-size: 29px; margin: 0 0 25px; }
.postmortem-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 24px; }
.postmortem-grid > div { padding: 15px 0 0; border-top: 1px solid var(--hairline); }
.postmortem-grid span { color: var(--burgundy); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.postmortem-grid p { font-size: 16px; line-height: 1.5; margin: 7px 0 0; }
.question-list { border-top: 1px solid rgba(255,255,255,.18); }
.question-list article { display: grid; grid-template-columns: 54px 1fr; gap: 15px; padding: 20px 0; border-bottom: 1px solid rgba(255,255,255,.18); }
.question-list span { color: var(--gold); font-weight: 700; font-size: 13px; letter-spacing: .08em; }
.question-list p { color: #f7f9fb; font-family: var(--reading); font-size: 21px; line-height: 1.35; margin: 0; }
.practice-next { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 28px; font-weight: 700; }
.practice-next a::after { content: " →"; }

.case-memo { padding-top: 45px; padding-bottom: 68px; }
.case-memo h1 { font-size: clamp(37px, 5vw, 57px); max-width: 760px; margin-bottom: 12px; }
.memo-verdict { margin: 34px 0; padding: 22px 24px; background: var(--emerald); color: #fff; border-left: 4px solid var(--gold); }
.memo-verdict span { display: block; color: #c9dcd4; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.memo-verdict strong { display: block; font-family: var(--serif); font-size: 28px; margin-top: 4px; }
.memo-verdict p { margin: 4px 0 0; color: #dcebe5; font-size: 15px; }
.case-memo section { padding: 23px 0; border-top: 1px solid var(--hairline); }
.case-memo section h2 { margin-top: 0; font-size: 29px; }
.case-memo li { margin-bottom: 9px; }
.decision-table { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.decision-table > div { background: var(--band); padding: 18px; }
.decision-table span { display: block; color: var(--burgundy); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 6px; }
.decision-table strong { line-height: 1.4; }
.decision-table p, .memo-source { font-size: 14px; color: var(--muted); margin: 8px 0 0; }

.standards-page { padding-top: 54px; padding-bottom: 70px; }
.standards-page h1 { margin-bottom: 11px; }
.standards-list { list-style: none; padding: 0; margin: 42px 0; border-top: 1px solid var(--hairline); }
.standards-list li { display: grid; grid-template-columns: 68px 1fr; gap: 20px; padding: 25px 0; border-bottom: 1px solid var(--hairline); }
.standards-list li > span { color: var(--gold); font-family: var(--serif); font-size: 28px; }
.standards-list h2 { font-size: 25px; margin: 0 0 7px; }
.standards-list p { margin: 0; }
.standards-note { background: linear-gradient(135deg, #e9edf1, #f8f9fb); padding: 28px 30px; border-left: 3px solid var(--burgundy); }
.standards-note h2 { margin-top: 0; }
.standards-note p { margin-bottom: 0; }

@media (max-width: 680px) {
  .practice-hero { padding: 64px 0 58px; }
  .practice-key { font-size: 10px; line-height: 2; }
  .journal-entry { grid-template-columns: 52px 1fr; gap: 16px; }
  .journal-stamp span { font-size: 23px; }
  .postmortem-feature { padding: 22px; }
  .postmortem-grid, .decision-table { grid-template-columns: 1fr; }
  .question-list p { font-size: 18px; }
  .case-memo { padding-top: 31px; }
}

/* ---------- Layout ---------- */

.wrap {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 24px;
}

main.wrap { padding-top: 48px; padding-bottom: 64px; }

/* ---------- Header / nav ---------- */

/* ---------- Market snapshot ticker ---------- */

.market-ticker {
  background: #0d1117;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.market-ticker-inner {
  display: flex;
  align-items: center;
  gap: 20px;
  padding-top: 11px;
  padding-bottom: 11px;
  font-family: var(--sans);
  font-size: 12px;
}

.market-ticker-label {
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 600;
  flex: 0 0 auto;
}

.market-ticker-marquee {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
}

.market-ticker-track {
  display: flex;
  align-items: center;
  gap: 28px;
  width: max-content;
  white-space: nowrap;
  animation: market-ticker-scroll 55s linear infinite;
}

.market-ticker-marquee:hover .market-ticker-track { animation-play-state: paused; }

@keyframes market-ticker-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .market-ticker-track { animation: none; }
  .market-ticker-marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
}

.market-ticker-item {
  flex: 0 0 auto;
  color: #a9b2bd;
  font-weight: 600;
}

.market-ticker-item .num-pos,
.market-ticker-item .num-neg { font-weight: 700; margin-left: 4px; }

.site-header {
  background: var(--navy);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  position: sticky;
  top: 0;
  z-index: 50;
  box-shadow: 0 1px 0 rgba(0,0,0,0.15);
}

/* Header gets its own wide container, independent of the narrow
   reading-column .wrap — otherwise brand+nav bunch into a centered
   760px box on wide screens instead of spreading across the header. */
.wrap-wide {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 32px;
}

.site-header .wrap-wide.main-header-row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 24px;
  padding-bottom: 24px;
}

.brand-block {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.2px;
  color: #ffffff;
  text-decoration: none;
  white-space: nowrap;
}

.brand .brand-accent { color: var(--gold); }

.brand-tagline {
  margin: 2px 0 0;
  padding-left: 14px;
  border-left: 1px solid rgba(255,255,255,0.16);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1px;
  color: #8b93a1;
  white-space: nowrap;
}

@media (max-width: 900px) {
  .brand-tagline { display: none; }
}

.brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 7px;
  background: var(--gold);
  font-family: var(--serif);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: var(--navy);
}

/* ---------- Page hero photo banner (replaces plain kicker/h1 on long pages) ---------- */

.page-hero-photo {
  position: relative;
  min-height: 300px;
  display: flex;
  align-items: flex-end;
  background-size: cover;
  background-position: center;
  margin-bottom: 40px;
  overflow: hidden;
}
.page-hero-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(248,249,251,0.1) 0%, rgba(248,249,251,0.82) 60%, rgba(248,249,251,0.97) 100%);
}
.page-hero-photo-inner {
  position: relative;
  z-index: 1;
  padding: 40px 24px 34px;
  max-width: 760px;
  margin: 0 auto;
  width: 100%;
}
.page-hero-photo.wide .page-hero-photo-inner { max-width: 1120px; }
.page-hero-photo-kicker {
  display: inline-block;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--burgundy);
  margin: 0 0 12px;
}
.page-hero-photo h1 {
  font-family: var(--serif);
  font-size: 38px;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 12px;
  line-height: 1.15;
}
.page-hero-photo-sub {
  font-family: var(--sans);
  font-size: 15px;
  color: var(--muted);
  max-width: 580px;
  line-height: 1.6;
  margin: 0;
}
.page-hero-photo-sub a { color: var(--burgundy); }
.page-hero-photo-breadcrumb {
  position: relative;
  z-index: 1;
  padding: 16px 24px 0;
  max-width: 760px;
  margin: 0 auto;
  width: 100%;
}
.page-hero-photo.wide .page-hero-photo-breadcrumb { max-width: 1120px; }
.page-hero-photo-breadcrumb a,
.page-hero-photo-breadcrumb span { color: var(--muted); }
.page-hero-photo-breadcrumb a:hover { color: var(--navy); }

@media (max-width: 700px) {
  .page-hero-photo { min-height: 220px; }
  .page-hero-photo h1 { font-size: 28px; }
}

/* ---------- Jump-to-section dropdown ---------- */

.jump-nav { position: relative; display: inline-block; margin: 0 0 28px; }
.jump-nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--navy);
  background: #ffffff;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 9px 16px;
  cursor: pointer;
  transition: border-color 0.15s ease;
}
.jump-nav-btn:hover { border-color: var(--gold); }
.jump-nav-btn svg { transition: transform 0.15s ease; flex-shrink: 0; }
.jump-nav.active .jump-nav-btn svg { transform: rotate(180deg); }
.jump-nav-menu {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 300px;
  max-width: 420px;
  background: #ffffff;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  box-shadow: 0 12px 32px rgba(10,26,51,0.16);
  z-index: 40;
  overflow: hidden;
}
.jump-nav.active .jump-nav-menu { display: block; }
.jump-nav-menu a {
  display: block;
  padding: 11px 18px;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink);
  border-bottom: 1px solid var(--hairline);
  text-decoration: none;
  transition: background-color 0.12s ease;
}
.jump-nav-menu a:last-child { border-bottom: none; }
.jump-nav-menu a:hover { background: rgba(197,160,89,0.08); color: var(--navy); }

.nav {
  display: flex;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
}

.nav a {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: #a9b2bd;
  text-decoration: none;
  padding: 4px 0;
  transition: color .15s ease;
}

.nav a:hover,
.nav a:focus { color: var(--gold); }

.nav .nav-divider {
  width: 1px;
  height: 14px;
  background: rgba(255,255,255,0.16);
  display: inline-block;
}

/* ---------- "More" dropdown (desktop header nav) ---------- */

.nav-more { position: relative; }
.nav-more-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: #a9b2bd;
  background: none;
  border: none;
  padding: 4px 0;
  cursor: pointer;
  transition: color .15s ease;
}
.nav-more-btn:hover,
.nav-more-btn:focus { color: var(--gold); }
.nav-more-btn svg { transition: transform 0.15s ease; flex-shrink: 0; }
.nav-more.active .nav-more-btn svg { transform: rotate(180deg); }
.nav-more-menu {
  display: none;
  position: absolute;
  top: calc(100% + 14px);
  right: 0;
  min-width: 200px;
  background: #ffffff;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  box-shadow: 0 12px 32px rgba(10,26,51,0.2);
  z-index: 60;
  overflow: hidden;
}
.nav-more.active .nav-more-menu { display: block; }
.nav-more-menu a {
  display: block;
  padding: 11px 18px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0.2px;
  color: var(--ink);
  border-bottom: 1px solid var(--hairline);
  text-decoration: none;
  transition: background-color 0.12s ease;
}
.nav-more-menu a:last-child { border-bottom: none; }
.nav-more-menu a:hover,
.nav-more-menu a:focus { background: rgba(197,160,89,0.08); color: var(--navy); }

@media (max-width: 900px) {
  .nav-more-btn { display: none; }
  .nav-more-menu {
    display: block;
    position: static;
    background: none;
    border: none;
    box-shadow: none;
    padding: 0;
  }
  .nav-more-menu a {
    padding: 10px 0;
    border-bottom: none;
    color: #a9b2bd;
    font-size: 13px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1.2px;
  }
  .nav-more-menu a:hover { background: none; color: var(--gold); }
}

/* ---------- Search icon button (all viewports) ---------- */

.nav-search-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #a9b2bd;
  padding: 6px;
  margin-right: 4px;
  transition: color .15s ease;
}

.nav-search-btn:hover { color: var(--gold); }
.nav-search-btn:hover .cmdk-hint { border-color: var(--gold); color: var(--gold); }

.cmdk-hint {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  color: #8f9bad;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 4px;
  padding: 2px 6px;
  transition: color .15s ease, border-color .15s ease;
}

@media (max-width: 900px) {
  .cmdk-hint { display: none; }
}

/* Visually hidden but still in the accessible/text-content tree — for icon-only
   controls, so tools that extract textContent (not just the accessible name via
   aria-label) get real words instead of falling back to the raw href. */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ---------- Nav toggle (hamburger, mobile only) ---------- */

.nav-toggle {
  display: none;
  background: none;
  border: none;
  padding: 8px;
  margin: -8px;
  cursor: pointer;
}

.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: #ffffff;
  margin: 5px 0;
  transition: transform .2s ease, opacity .2s ease;
}

.nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Light header (every page except the homepage) ----------
   The homepage keeps the dark espresso hero + dark header for one
   deliberate dramatic moment. Every other page reads as paper — no
   dark chrome — so the site doesn't open dark 190 times over. */

body:not(.page-home) .site-header {
  background: var(--paper);
  border-bottom: 1px solid var(--hairline);
  box-shadow: 0 1px 0 rgba(10,26,51,0.04);
}
body:not(.page-home) .market-ticker {
  background: #f1e6d2;
  border-bottom: 1px solid var(--hairline);
}
body:not(.page-home) .market-ticker-label { color: #8a7a68; }
body:not(.page-home) .market-ticker-item { color: var(--muted); }
body:not(.page-home) .brand { color: var(--navy); }
body:not(.page-home) .brand-tagline {
  border-left-color: var(--hairline);
  color: var(--muted);
}
body:not(.page-home) .brand-mark { color: #ffffff; }
body:not(.page-home) .nav a,
body:not(.page-home) .nav-more-btn,
body:not(.page-home) .nav-search-btn { color: var(--muted); }
body:not(.page-home) .nav a:hover,
body:not(.page-home) .nav a:focus,
body:not(.page-home) .nav-more-btn:hover,
body:not(.page-home) .nav-more-btn:focus,
body:not(.page-home) .nav-search-btn:hover { color: var(--burgundy); }
body:not(.page-home) .nav .nav-divider { background: var(--hairline); }
body:not(.page-home) .cmdk-hint { color: #8a7a68; border-color: rgba(10,26,51,0.16); }
body:not(.page-home) .nav-search-btn:hover .cmdk-hint { border-color: var(--burgundy); color: var(--burgundy); }
body:not(.page-home) .nav-toggle span { background: var(--navy); }
@media (max-width: 900px) {
  body:not(.page-home) .nav-more-menu a { color: var(--muted); }
  body:not(.page-home) .nav-more-menu a:hover { color: var(--burgundy); }
  body:not(.page-home) .nav {
    background: var(--paper);
    border-top: 1px solid var(--hairline);
    box-shadow: 0 12px 24px rgba(10,26,51,0.1);
  }
  body:not(.page-home) .nav a { color: var(--navy); }
  body:not(.page-home) .nav a:hover,
  body:not(.page-home) .nav a:focus { color: var(--burgundy); }
}

/* ---------- Typography ---------- */

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: -0.01em;
  color: var(--navy);
}

h1 { font-size: 34px; margin: 8px 0 20px; }

.mission-statement {
  text-align: center;
  max-width: 720px;
  margin: 24px auto 32px;
  padding: 4px 0 28px;
  border-bottom: 1px solid var(--hairline);
}

[id] { scroll-margin-top: 96px; }
h2 { font-size: 24px; margin: 40px 0 14px; }
h3 { font-size: 20px; margin: 28px 0 10px; }

p { margin: 0 0 18px; }

/* ---------- Article reading type (WSJ/NYT-style body copy) ----------
   Flowing prose gets the reading serif; labels, datelines, and micro-
   copy stay on the sans utility face. Scoped to direct children of any
   .wrap (covers both plain-page mains and band-system section wraps)
   plus the prose found inside quote/callout/answer components — never
   table cells, buttons, nav, or stat/badge chrome, which keep sans. */
.wrap > p:not(.meta):not(.kicker):not(.tagline):not(.fine):not(.photo-credit):not(.byline):not(.eyebrow):not(.dek):not(.footer-links):not(.card-date):not(.catalyst-desc):not(.macro-updated):not(.data-verified-note):not(.table-controls-hint):not(.letter-date):not(.thematic-basket-label):not(.si-note):not(.range-52w-note):not(.perf-compare-note):not(.channel-check-meta):not(.editors-note-label):not(.deck-cover-kicker):not(.deck-cover-sub),
.callout p,
.faq-item p,
.thesis-box p,
.method-item p,
.card p,
.email-preview-body p,
.section-head p,
.about-hero p,
.compliance-rule-text,
.compliance-rule-rationale,
.hero-lede,
.lede,
.dek,
.editors-note-text,
blockquote {
  font-family: var(--reading);
  font-size: 1.05em;
  line-height: 1.75;
}

.wrap > p.pull-quote { font-family: var(--serif); }

/* First paragraph of an article gets a touch more presence — the
   'lede' weight newspapers give the opening line of a story. */
.wrap > h1 + p.meta + p:first-of-type,
.wrap > h1 + p:first-of-type {
  font-size: 1.18em;
  line-height: 1.65;
  color: var(--ink);
}

blockquote {
  font-style: italic;
  font-size: 1.15em;
}

a { color: var(--ink); text-underline-offset: 2px; text-decoration-color: rgba(74,85,104,0.4); }
a:hover { color: var(--gold); text-decoration-color: var(--gold); }

.breadcrumb {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--muted);
  margin: 0 0 20px;
}
.breadcrumb a { color: var(--muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--gold); }
.breadcrumb span[aria-hidden] { margin: 0 6px; color: var(--hairline); }
.breadcrumb span[aria-current] { color: var(--ink); }

.kicker {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--gold);
  margin: 0 0 6px;
}

.tagline {
  font-family: var(--serif);
  font-size: 20px;
  color: var(--muted);
  margin: 0 0 24px;
}

.meta {
  font-size: 14px;
  color: var(--muted);
  margin: 0 0 24px;
}

strong { color: var(--ink); }

.num-pos { color: var(--positive) !important; }
.num-neg { color: var(--negative) !important; }

/* ---------- Badge ---------- */

.badge {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 0.4px;
  color: var(--muted);
  background: #ffffff;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 5px 12px;
}

.badge-ok { color: var(--positive); border-color: var(--positive); background: rgba(47,111,79,0.08); }
.badge-breach { color: var(--negative); border-color: var(--negative); background: rgba(156,59,59,0.08); }
.badge-disclosed { color: var(--gold); border-color: var(--gold); background: rgba(212,175,55,0.08); }
.badge-pending { color: var(--muted); border-color: var(--muted); background: rgba(90,90,90,0.08); }
.badge-watch { color: #5b7c99; border-color: #5b7c99; background: rgba(91,124,153,0.08); }

/* ---------- Email format preview (Newsletter page) ---------- */

.email-preview {
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: #ffffff;
  box-shadow: 0 20px 50px rgba(10,26,51,0.12);
  overflow: hidden;
  max-width: 640px;
  margin: 0 auto;
}
.email-preview-chrome {
  background: var(--band);
  padding: 12px 18px;
  display: flex;
  align-items: center;
  gap: 7px;
  border-bottom: 1px solid var(--hairline);
}
.email-preview-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--hairline); }
.email-preview-label {
  margin-left: auto;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--muted);
}
.email-preview-meta { padding: 20px 28px 14px; border-bottom: 1px solid var(--hairline); }
.email-preview-meta-row { display: flex; gap: 10px; font-family: var(--sans); font-size: 13px; margin: 3px 0; }
.email-preview-meta-row .label { color: var(--muted); min-width: 56px; flex-shrink: 0; }
.email-preview-meta-row .value { color: var(--ink); }
.email-preview-subject { font-family: var(--serif); font-weight: 700; font-size: 19px !important; }
.email-preview-body { padding: 24px 28px 28px; }
.email-preview-body h4 {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--burgundy);
  margin: 20px 0 8px;
}
.email-preview-body h4:first-child { margin-top: 0; }
.email-preview-body p { font-size: 15px; margin: 0 0 4px; }

@media (max-width: 620px) {
  .email-preview-meta, .email-preview-body { padding-left: 18px; padding-right: 18px; }
}

/* ---------- Sector allocation donut chart ---------- */

.sector-donut-wrap {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 32px;
  align-items: center;
  margin: 24px 0 28px;
}
.sector-donut-svg { width: 100%; height: auto; max-width: 220px; }
.sector-donut-seg { transition: stroke-width .15s ease; }
.sector-donut-seg:hover { stroke-width: 38; }
.sector-donut-legend { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 20px; }
.sector-donut-legend-item {
  font-size: 13px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 8px;
}
.sector-donut-legend-item strong { margin-left: auto; color: var(--ink); font-family: var(--serif); }
.sector-donut-swatch { width: 11px; height: 11px; border-radius: 2px; flex-shrink: 0; }

@media (max-width: 620px) {
  .sector-donut-wrap { grid-template-columns: 1fr; justify-items: center; }
  .sector-donut-legend { grid-template-columns: 1fr; width: 100%; }
}

/* ---------- Coverage Book (per-ticker one-pagers) ---------- */

.coverage-toolbar { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; }

.coverage-grid { display: grid; gap: 14px; }

.coverage-item {
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: #ffffff;
  transition: border-color .15s ease;
}
.coverage-item[open] { border-color: var(--gold); }

.coverage-item summary {
  cursor: pointer;
  list-style: none;
  padding: 18px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.coverage-item summary::-webkit-details-marker { display: none; }

.coverage-id { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.coverage-ticker { font-family: var(--serif); font-size: 20px; font-weight: 700; color: var(--navy); }
.coverage-company { color: var(--muted); font-size: 14px; }

.coverage-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; }
.coverage-meta .num-pos, .coverage-meta .num-neg { font-family: var(--serif); font-weight: 600; }
.coverage-chevron { color: var(--gold); font-size: 20px; transition: transform .15s ease; flex-shrink: 0; }
.coverage-item[open] .coverage-chevron { transform: rotate(180deg); }

.coverage-body { padding: 0 24px 26px; border-top: 1px solid var(--hairline); }
.coverage-body h4 {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--burgundy);
  margin: 22px 0 8px;
}
.coverage-body h4:first-child { margin-top: 20px; }
.coverage-body p { margin: 0; color: var(--ink); }

.coverage-bbb { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 22px 0; }
.coverage-bbb > div { padding: 16px 18px; border-radius: var(--radius); border-top: 3px solid; background: var(--paper); }
.coverage-bbb .bbb-bull { border-top-color: var(--positive); }
.coverage-bbb .bbb-base { border-top-color: var(--gold); }
.coverage-bbb .bbb-bear { border-top-color: var(--negative); }
.coverage-bbb h5 { margin: 0 0 6px; font-family: var(--sans); font-size: 12px; text-transform: uppercase; letter-spacing: 0.6px; }
.coverage-bbb .bbb-bull h5 { color: var(--positive); }
.coverage-bbb .bbb-base h5 { color: #9a7f2e; }
.coverage-bbb .bbb-bear h5 { color: var(--negative); }
.coverage-bbb p { font-size: 14px; color: var(--muted); }

@media (max-width: 800px) {
  .coverage-bbb { grid-template-columns: 1fr; }
}

/* ---------- Upcoming Catalysts calendar ---------- */

.catalysts-list {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
}

.catalyst-item {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 4px 18px;
  padding: 14px 0;
  border-bottom: 1px solid var(--hairline);
}

.catalyst-item:first-child { padding-top: 0; }

.catalyst-date {
  font-family: var(--serif);
  font-weight: 600;
  color: var(--gold);
  font-size: 14px;
}

.catalyst-body { grid-column: 2; }
.catalyst-event {
  display: block;
  font-family: var(--serif);
  font-weight: 600;
  color: var(--navy);
  font-size: 15px;
}
.catalyst-desc { color: var(--muted); font-size: 13px; margin: 3px 0 0; }

@media (max-width: 480px) {
  .catalyst-item { grid-template-columns: 1fr; }
  .catalyst-body { grid-column: 1; }
}

/* ---------- Exposure Dashboard bars ---------- */

.exposure-bars { margin: 18px 0 8px; }

.exposure-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 0;
}

.exposure-label {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--muted);
  flex: 0 0 190px;
}

.exposure-track {
  flex: 1 1 auto;
  height: 10px;
  background: rgba(74,85,104,0.08);
  border-radius: 4px;
  overflow: hidden;
}

.exposure-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--navy-soft), var(--gold));
  border-radius: 4px;
}

.exposure-pct {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 14px;
  color: var(--navy);
  flex: 0 0 56px;
  text-align: right;
}

@media (max-width: 620px) {
  .exposure-label { flex-basis: 120px; font-size: 12px; }
}

/* ---------- Conviction score ---------- */

.conviction-badge {
  display: inline-block;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid transparent;
}

.conv-high { color: var(--positive); background: rgba(47,111,79,0.1); border-color: rgba(47,111,79,0.25); }
.conv-medium { color: var(--gold); background: rgba(212,175,55,0.1); border-color: rgba(212,175,55,0.3); }
.conv-low { color: var(--muted); background: rgba(74,85,104,0.08); border-color: rgba(74,85,104,0.2); }

/* Holdings Matrix — minimalist, no vertical rules, tight institutional header */
.holdings-matrix { border-collapse: collapse; }
.holdings-matrix th, .holdings-matrix td { border-left: none; border-right: none; padding: 11px 12px; }
.holdings-matrix thead th { font-size: 12px; letter-spacing: 0.6px; text-transform: uppercase; }
.holdings-matrix .conviction-badge, .holdings-matrix .badge { white-space: nowrap; }

.holdings-matrix td a {
  font-family: var(--serif);
  font-weight: 600;
  color: var(--navy);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .15s ease, color .15s ease;
}

.holdings-matrix td a:hover {
  color: var(--gold);
  border-bottom-color: var(--gold);
}

/* ---------- Inline academic tag (for use inside body paragraphs) ---------- */

.inline-tag {
  display: inline-block;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: var(--gold);
  background: rgba(212,175,55,0.08);
  border: 1px solid rgba(212,175,55,0.3);
  border-radius: 3px;
  padding: 1px 6px;
  margin: 0 2px;
  vertical-align: 1px;
  white-space: nowrap;
}

/* Break the matrix out of the narrow reading column so all 8 columns
   fit without horizontal scroll on typical desktop widths. */
@media (min-width: 900px) {
  .table-scroll.table-breakout {
    width: 96vw;
    max-width: 1240px;
    margin-left: 50%;
    margin-right: 0;
    transform: translateX(-50%);
  }
}

/* ---------- Academic-to-Portfolio Framework tags ---------- */

.academic-framework {
  border-left: 4px solid var(--navy-soft);
  background: #ffffff;
  border: 1px solid var(--hairline);
  border-left: 4px solid var(--navy-soft);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 18px 22px;
  margin: 28px 0;
}

.academic-framework h3 { margin-top: 0; }

.academic-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 12px 0 4px;
}

.academic-tag {
  display: inline-block;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: var(--navy);
  background: rgba(197,160,89,0.12);
  border: 1px solid rgba(197,160,89,0.35);
  border-radius: 4px;
  padding: 4px 9px;
}

.academic-framework-list {
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.academic-framework-list li {
  margin: 8px 0;
  padding-left: 16px;
  border-left: 2px solid var(--hairline);
  font-size: 14px;
  color: var(--muted);
}

.academic-framework-list strong { color: var(--navy); }

.compliance-rule {
  background: var(--navy);
  border-radius: var(--radius);
  padding: 22px 26px;
  margin: 20px 0;
  border-left: 4px solid var(--gold);
}

.compliance-rule-name {
  margin: 0 0 8px;
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 700;
  color: var(--gold);
}

.compliance-rule-text {
  margin: 0 0 10px;
  color: #ffffff;
  font-size: 15px;
  line-height: 1.55;
}

.compliance-rule-rationale {
  margin: 0;
  color: rgba(255,255,255,0.72);
  font-size: 13px;
  line-height: 1.55;
}

.compliance-rule-rationale strong { color: rgba(255,255,255,0.9); }

.channel-check {
  background: #faf6ec;
  border-left: 4px solid var(--gold);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 18px 22px;
  margin: 28px 0;
}

.channel-check h3 { margin-top: 0; }

.channel-check-meta {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 8px;
}

.channel-check p:last-child { margin-bottom: 0; }

/* ---------- Competitor comparison table ---------- */

.compare-table th.compare-held { color: var(--gold); border-bottom: 2px solid var(--gold); }
.compare-table td.compare-held-cell { background: rgba(197,160,89,0.07); font-weight: 600; }
.compare-table th[scope="row"] { text-align: left; }

/* ---------- Liquidity & friction terminal card ---------- */

.liquidity-terminal {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--navy);
  border-radius: var(--radius);
  overflow: hidden;
  margin: 20px 0;
  font-family: var(--sans);
}

.liquidity-terminal-cell {
  background: var(--navy);
  padding: 18px 22px;
}

.liquidity-terminal-label {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 8px;
}

.liquidity-terminal-value {
  display: block;
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.2;
}

.liquidity-terminal-note {
  display: block;
  font-size: 11px;
  color: #98a2b0;
  margin-top: 6px;
}

@media (max-width: 620px) {
  .liquidity-terminal { grid-template-columns: 1fr; }
}

/* ---------- Macro stress-test toggle ---------- */

.stress-test {
  margin: 24px 0 32px;
}

.stress-toggle-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 0;
}

.stress-toggle {
  flex: 1 1 auto;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--navy);
  background: #ffffff;
  border: 1px solid var(--hairline);
  border-bottom: none;
  border-radius: 6px 6px 0 0;
  padding: 12px 16px;
  cursor: pointer;
  text-align: center;
  transition: background .15s ease, color .15s ease;
}

.stress-toggle:hover { background: rgba(197,160,89,0.08); }

.stress-toggle.active {
  background: var(--navy);
  color: #ffffff;
}

.stress-panel {
  display: none;
  background: #ffffff;
  border: 1px solid var(--hairline);
  border-radius: 0 var(--radius) var(--radius) var(--radius);
  padding: 24px 28px;
}

.stress-panel.active { display: block; }

.stress-panel h4 {
  margin: 0 0 10px;
  font-family: var(--serif);
  font-size: 18px;
  color: var(--navy);
}

.stress-panel p { margin: 0 0 12px; font-size: 14px; color: var(--muted); line-height: 1.6; }
.stress-panel p:last-child { margin-bottom: 0; }

.stress-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }

.stress-badge {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 4px;
}

.stress-badge-defended { color: var(--positive); background: rgba(47,111,79,0.1); }
.stress-badge-neutral { color: var(--gold); background: rgba(197,160,89,0.12); }
.stress-badge-exposed { color: var(--negative); background: rgba(156,59,59,0.1); }

@media (max-width: 700px) {
  .stress-toggle-row { flex-direction: column; }
  .stress-toggle { border-radius: 6px; border-bottom: 1px solid var(--hairline); }
  .stress-panel { border-radius: var(--radius); }
}

/* Analyst Tear Sheet */
.tear-sheet-link-wrap { margin: 20px 0; }
.tear-sheet-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: var(--navy);
  background: var(--paper);
  border: 1px solid var(--navy);
  border-radius: var(--radius);
  padding: 9px 16px;
  cursor: pointer;
}
.tear-sheet-link:hover { background: var(--navy); color: #fff; }
.tear-sheet-link svg { transition: transform 0.15s ease; }
.tear-sheet-link.active svg { transform: rotate(180deg); }

.tear-sheet {
  display: none;
  margin: 0 0 28px;
  background: var(--navy);
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--navy);
}
.tear-sheet.active { display: block; }

.tear-sheet-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 16px;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.15);
  background: rgba(0,0,0,0.15);
}
.tear-sheet-header-left { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.tear-sheet-ticker { font-family: var(--serif); font-size: 22px; font-weight: 700; color: #fff; }
.tear-sheet-name { font-family: var(--sans); font-size: 12px; color: #98a2b0; }
.tear-sheet-label {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--gold);
}
.tear-sheet-header-right { display: flex; align-items: baseline; gap: 14px; font-family: var(--sans); font-size: 12px; color: #cbd2d9; }
.tear-sheet-header-right strong { color: #fff; font-family: var(--serif); font-size: 15px; }

.tear-sheet-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: rgba(255,255,255,0.1);
}
.tear-sheet-quad { background: var(--navy); padding: 16px 20px; }
.tear-sheet-quad h4 {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 10px;
}
.tear-sheet-quad p { font-family: var(--sans); font-size: 13px; line-height: 1.55; color: #dde2e7; margin: 0; }
.tear-sheet-quad.tear-sheet-bear p { color: #e3b3b3; }

.tear-sheet-metrics { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; }
.tear-sheet-metrics li { display: flex; justify-content: space-between; font-family: var(--sans); font-size: 13px; border-bottom: 1px dashed rgba(255,255,255,0.12); padding-bottom: 6px; }
.tear-sheet-metrics li span:first-child { color: #98a2b0; }
.tear-sheet-metrics li span:last-child { color: #fff; font-weight: 600; }

.tear-sheet-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tear-sheet-tags span {
  font-family: var(--sans);
  font-size: 11px;
  color: var(--gold);
  border: 1px solid rgba(197,160,89,0.4);
  border-radius: 3px;
  padding: 3px 7px;
}

@media (max-width: 700px) {
  .tear-sheet-grid { grid-template-columns: 1fr; }
  .tear-sheet-header { flex-direction: column; align-items: flex-start; }
}

/* ---------- Accountability counter ---------- */

.accountability-counter {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
  border-top: 3px solid var(--negative);
  border-radius: var(--radius);
  overflow: hidden;
  margin: 24px 0 32px;
}

.accountability-counter-cell {
  background: #ffffff;
  padding: 22px 26px;
  text-align: center;
}

.accountability-counter-label {
  display: block;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}

.accountability-counter-num {
  display: block;
  font-family: var(--serif);
  font-size: 44px;
  font-weight: 700;
  color: var(--negative);
  line-height: 1;
}

.accountability-counter-sub {
  display: block;
  font-family: var(--sans);
  font-size: 12px;
  color: var(--muted);
  margin-top: 8px;
}

@media (max-width: 620px) {
  .accountability-counter { grid-template-columns: 1fr; }
}

/* ---------- Downloadable data block ---------- */

.download-block {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  background: var(--navy);
  border-radius: var(--radius);
  padding: 22px 28px;
  margin: 28px 0;
  border-left: 4px solid var(--gold);
}

.download-block-text h3 {
  margin: 0 0 4px;
  color: #ffffff;
  font-size: 17px;
}

.download-block-text p {
  margin: 0;
  color: #b9c2ce;
  font-size: 13px;
  max-width: 46ch;
}

.download-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: var(--navy);
  background: var(--gold);
  border: none;
  border-radius: 6px;
  padding: 12px 20px;
  cursor: pointer;
  transition: background .15s ease, transform .15s ease;
  white-space: nowrap;
}

.download-btn:hover { background: #bfa878; transform: translateY(-1px); }
.download-btn svg { flex: 0 0 auto; }

@media (max-width: 620px) {
  .download-block { flex-direction: column; align-items: flex-start; }
  .download-btn { width: 100%; justify-content: center; }
}

/* ---------- Sparklines ---------- */

.spark-cell { width: 90px; padding: 4px 8px !important; }
.sparkline { display: block; }

/* ---------- Glossary tooltips ---------- */

.glossary-term {
  position: relative;
  border-bottom: 1px dotted var(--muted);
  cursor: help;
}

.glossary-term .glossary-tooltip {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  transform: translateX(-50%) translateY(4px);
  width: 260px;
  background: var(--navy);
  color: #eef1f5;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
  border-radius: 6px;
  padding: 12px 14px;
  box-shadow: 0 10px 28px rgba(10,26,51,0.25);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .15s ease, transform .15s ease;
  z-index: 50;
  white-space: normal;
  text-align: left;
}

.glossary-term .glossary-tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--navy);
}

.glossary-term:hover .glossary-tooltip,
.glossary-term:focus .glossary-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.glossary-term .glossary-tooltip strong { color: var(--gold); }

@media (max-width: 500px) {
  .glossary-term .glossary-tooltip { width: 200px; }
}

/* ---------- Tag-pill filter (Letters/Opinion) ---------- */

.tag-filter-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 2px 14px;
  margin: 0 0 8px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.tag-pill {
  flex: 0 0 auto;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--navy);
  background: #ffffff;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 7px 16px;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
  white-space: nowrap;
}

.tag-pill:hover { border-color: var(--gold); }

.tag-pill.active {
  background: var(--navy);
  border-color: var(--navy);
  color: #ffffff;
}

.letter-list li.tag-hidden { display: none; }

/* ---------- Two-column callout grid (Letters/Opinion masthead) ---------- */

.card-grid.two-col {
  grid-template-columns: repeat(2, 1fr);
  margin: 24px 0 32px;
}

.card-grid.two-col .callout { margin: 0; height: 100%; }

.card-grid.three-col { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 900px) {
  .card-grid.two-col { grid-template-columns: 1fr; }
  .card-grid.three-col { grid-template-columns: 1fr; }
}

/* ---------- Newsletter signup band (navy .featured variant) ---------- */

.signup-band {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 48px;
  align-items: center;
}

.signup-band-copy p { color: var(--muted); margin: 0; }
.signup-band-copy p a { color: var(--burgundy); }
.signup-band .signup {
  background: #ffffff;
  box-shadow: 0 20px 50px rgba(10,26,51,0.12);
}

@media (max-width: 900px) {
  .signup-band { grid-template-columns: 1fr; gap: 28px; }
  .signup-band .signup { max-width: none; }
}

.screen-protocol {
  counter-reset: screen-tier;
  margin: 22px 0;
  padding: 0;
  list-style: none;
}

.screen-tier {
  counter-increment: screen-tier;
  display: flex;
  gap: 18px;
  align-items: flex-start;
  padding: 16px 0;
  border-top: 1px solid var(--hairline);
}

.screen-tier:first-child { border-top: none; }

.screen-tier::before {
  content: "0" counter(screen-tier);
  flex: 0 0 auto;
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 700;
  color: var(--gold);
  width: 40px;
}

.screen-tier-body h4 {
  margin: 0 0 4px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--navy);
}

.screen-tier-body p {
  margin: 0;
  font-size: 14px;
  color: var(--muted);
}

.screen-tier-body code {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--navy);
  background: rgba(197,160,89,0.12);
  border: 1px solid rgba(197,160,89,0.3);
  border-radius: 4px;
  padding: 1px 7px;
}

/* ---------- Callout box ---------- */

.callout {
  background: #ffffff;
  border: 1px solid var(--hairline);
  border-left: 4px solid var(--navy-soft);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 18px 22px;
  margin: 28px 0;
  box-shadow: 0 2px 10px rgba(10,26,51,0.05);
}

.callout h3 { margin-top: 0; }
.callout p:last-child { margin-bottom: 0; }

.thesis-fields { display: grid; gap: 14px; margin: 14px 0 0; }
.thesis-fields dt {
  font-family: var(--sans); font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.8px; color: var(--gold); margin: 0 0 4px;
}
.thesis-fields dd { margin: 0; color: var(--ink); }

/* ---------- Institutional memo template: hook, risk/reward, valuation ---------- */

.memo-hook {
  font-family: var(--serif);
  font-size: 21px;
  line-height: 1.4;
  font-weight: 600;
  color: var(--navy);
  border-left: 4px solid var(--gold);
  padding: 6px 0 6px 18px;
  margin: 18px 0 26px;
}
.memo-hook .memo-hook-label {
  display: block;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--gold);
  margin-bottom: 4px;
}

.risk-reward-table th.bull-col { color: var(--positive); border-bottom: 2px solid var(--positive); }
.risk-reward-table th.bear-col { color: var(--negative); border-bottom: 2px solid var(--negative); }
.risk-reward-table td { vertical-align: top; width: 50%; }
.risk-reward-table td.bull-cell { border-left: 3px solid var(--positive); }
.risk-reward-table td.bear-cell { border-left: 3px solid var(--negative); }

.valuation-logic { border-left-color: var(--burgundy); }

.postmortem-box { border-left-color: var(--burgundy); }
.postmortem-fields { display: grid; gap: 14px; margin: 14px 0 0; }
.postmortem-fields dt {
  font-family: var(--sans); font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.8px; color: var(--burgundy); margin: 0 0 4px;
}
.postmortem-fields dd { margin: 0; color: var(--ink); }

/* ---------- Blockquote ---------- */

blockquote {
  margin: 28px 0;
  padding: 4px 0 4px 20px;
  border-left: 3px solid var(--burgundy);
  font-style: italic;
  color: var(--muted);
}

/* ---------- Tables ---------- */

.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 22px 0;
}
.table-scroll table { margin: 0; }

table {
  width: 100%;
  border-collapse: collapse;
  margin: 22px 0;
  font-size: 16px;
  background: var(--paper);
}

th, td {
  text-align: left;
  padding: 13px 14px;
  border: none;
  border-bottom: 1px solid var(--hairline);
  vertical-align: top;
}

tbody tr:last-child th, tbody tr:last-child td { border-bottom: none; }

thead th {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 15px;
  color: var(--navy);
  background: transparent;
  border-bottom: 2px solid var(--navy);
  padding-bottom: 12px;
  user-select: none;
}

tbody tr:nth-child(even) { background: rgba(10,26,51,0.02); }
tbody tr { transition: background-color .12s ease; }
tbody tr:hover { background: rgba(212,175,55,0.06); }

thead th[data-sort] { position: relative; }
thead th[data-sort]:hover { color: var(--gold); }
thead th.sort-asc::after,
thead th.sort-desc::after {
  content: '';
  display: inline-block;
  margin-left: 6px;
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
}
thead th.sort-asc::after { border-bottom: 5px solid var(--gold); }
thead th.sort-desc::after { border-top: 5px solid var(--gold); }

/* ---------- Table controls (filter/sort hint) ---------- */

.table-controls {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin: 20px 0 0;
}

#holdings-filter {
  font-family: var(--sans);
  font-size: 15px;
  padding: 9px 14px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: #ffffff;
  color: var(--ink);
  min-width: 240px;
  transition: border-color .15s ease, box-shadow .15s ease;
}

#holdings-filter:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(197,160,89,0.16);
}

.table-controls-hint { margin: 0; }

/* ---------- Lists ---------- */

ul, ol { margin: 0 0 18px; padding-left: 22px; }
li { margin: 0 0 8px; }

.masthead { max-width: 640px; }

/* ---------- Letter/News/Opinion archive grid (editorial, WSJ-inspired) ---------- */

.letter-list {
  list-style: none;
  margin: 32px 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  align-items: start;
}

.letter-list li {
  padding: 24px 26px;
  margin: 0;
  background: #ffffff;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}

.letter-list li:hover {
  box-shadow: 0 10px 28px rgba(10,26,51,0.08);
  transform: translateY(-2px);
  border-color: rgba(197,160,89,0.5);
}

/* Featured lead story: first card spans the full grid width */
.letter-list li:first-child {
  grid-column: 1 / -1;
  padding: 36px 40px;
  background: var(--navy);
  border-color: var(--navy);
}

.letter-list li:first-child .letter-date { color: var(--gold); }
.letter-list li:first-child .letter-title { color: #ffffff; font-size: 30px; max-width: 26ch; }
.letter-list li:first-child .letter-title:hover { color: var(--gold); }
.letter-list li:first-child .letter-summary { color: #c3cad4; max-width: 62ch; font-size: 16px; }

.letter-date {
  display: inline-block;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--gold);
  margin: 0 0 10px;
  padding: 3px 9px;
  background: rgba(197,160,89,0.1);
  border-radius: 3px;
}

.letter-list li:first-child .letter-date { background: rgba(197,160,89,0.16); }

.letter-date .badge { margin-right: 8px; text-transform: none; letter-spacing: 0.4px; }

.letter-title {
  display: block;
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
  color: var(--navy);
  margin-top: 2px;
}

.letter-title:hover { color: var(--burgundy); }

.letter-summary { color: var(--muted); margin: 8px 0 0; font-size: 14px; line-height: 1.55; }

@media (max-width: 1080px) {
  .letter-list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .letter-list { grid-template-columns: 1fr; }
  .letter-list li:first-child { padding: 28px 24px; }
  .letter-list li:first-child .letter-title { font-size: 24px; }
}

/* ---------- Section divider under hero ---------- */

.rule { border: 0; border-top: 1px solid var(--hairline); margin: 40px 0; }

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

.site-footer {
  background: var(--band);
  border-top: 1px solid var(--hairline);
  margin-top: 40px;
}

.site-footer .wrap {
  padding-top: 26px;
  padding-bottom: 26px;
}

.site-footer p {
  font-size: 13px;
  color: var(--muted);
  margin: 0;
}

.site-footer .footer-links { margin-top: 10px; }
.site-footer .footer-links a { color: var(--muted); }
.site-footer .footer-links a:hover { color: var(--gold); }

/* ---------- Glossary ---------- */

.glossary-list { margin: 24px 0 0; border-top: 1px solid var(--hairline); }

.glossary-item {
  padding: 18px 0;
  border-bottom: 1px solid var(--hairline);
}

.glossary-item h3 { margin: 0 0 6px; font-size: 17px; }
.glossary-item p { margin: 0; color: var(--muted); }

/* ---------- Allocation chart ---------- */

/* ---------- Portfolio heatmap (treemap) ---------- */

.heatmap-wrap {
  position: relative;
  width: 100%;
  padding-bottom: 52%;
  margin: 20px 0 12px;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--hairline);
}

.heatmap {
  position: absolute;
  inset: 0;
}

.heatmap-tile {
  position: absolute;
  box-sizing: border-box;
  border: 1px solid rgba(255,255,255,0.35);
  padding: 6px 8px;
  overflow: hidden;
  text-decoration: none;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  transition: filter .15s ease;
}

.heatmap-tile:hover { filter: brightness(1.12); color: #ffffff; }

.heatmap-tile .tile-ticker {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 13px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.heatmap-tile .tile-return {
  font-family: var(--sans);
  font-size: 11px;
  opacity: 0.9;
  white-space: nowrap;
}

.heatmap-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 14px 6px 0;
}

.heatmap-swatch {
  width: 11px;
  height: 11px;
  border-radius: 2px;
  display: inline-block;
}

/* ---------- Correlation matrix ---------- */

.table-scroll table.corr-matrix,
.corr-matrix {
  border-collapse: collapse;
  width: auto;
  margin: 8px auto !important;
  background: transparent;
  font-family: var(--sans);
}

.corr-matrix th, .corr-matrix td {
  padding: 0;
  width: 32px;
  height: 32px;
  min-width: 32px;
  text-align: center;
  font-size: 11px;
  font-weight: 500;
  border: 1px solid rgba(255,255,255,0.6);
  vertical-align: middle;
}

.corr-row-label {
  text-align: right !important;
  padding-right: 10px !important;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  background: var(--paper);
  border: none;
  width: auto;
  color: var(--navy);
}

.corr-col-label {
  height: 90px;
  vertical-align: bottom;
  border: none;
  background: var(--paper);
}

.corr-col-label span {
  display: inline-block;
  transform: rotate(-60deg);
  transform-origin: bottom left;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 700;
  color: var(--navy);
}

.allocation {
  display: flex;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap;
  margin: 24px 0 32px;
}

.allocation svg { flex: 0 0 auto; }

.legend { list-style: none; margin: 0; padding: 0; flex: 1 1 220px; }

.legend li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 6px 0;
  font-size: 15px;
}

.legend .dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  flex: 0 0 auto;
}

.legend .pct {
  font-family: var(--serif);
  font-weight: 600;
  color: var(--navy);
  min-width: 46px;
}

/* ---------- Home page: full-bleed band system ---------- */

body.home main { padding: 0; max-width: none; }

.band { width: 100%; }
.band > .wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; }

.band-navy { background: var(--navy); color: #eef1f5; }
.band-navy h2 { color: #ffffff; }
.band-paper { background: var(--paper); }
.band-white { background: #ffffff; }
.band-rule { border-top: 1px solid var(--hairline); }
.band-emerald { background: linear-gradient(165deg, var(--emerald) 0%, #0a2b22 100%); color: #e8efe9; }
.band-emerald h2 { color: #ffffff; }
.band-emerald .section-head .eyebrow { color: var(--gold); }
.band-emerald .section-head p { color: #b6cac1; }
.band-emerald .meta { color: #9db3a9; }
.band-emerald .meta a { color: var(--gold); }

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

.btn {
  display: inline-block;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-decoration: none;
  padding: 13px 26px;
  border-radius: 2px;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.btn-primary { background: var(--navy); color: #ffffff; border: 1px solid var(--navy); box-shadow: 0 1px 2px rgba(10,26,51,0.1); }
.btn-primary:hover { background: var(--navy-soft); color: #ffffff; transform: translateY(-1px); box-shadow: 0 8px 20px rgba(10,26,51,0.22); }

.btn-ghost { background: transparent; color: var(--navy); border: 1px solid var(--hairline); }
.btn-ghost:hover { border-color: var(--navy); color: var(--navy); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(10,26,51,0.08); }

/* Gold button, for use on navy bands */
.btn-gold { background: var(--gold); color: var(--navy); border: 1px solid var(--gold); box-shadow: 0 1px 2px rgba(10,26,51,0.08); }
.btn-gold:hover { background: #bfa878; color: var(--navy); transform: translateY(-1px); box-shadow: 0 10px 22px rgba(10,26,51,0.18); }

/* Light-outline button, for use on navy bands */
.btn-outline { background: transparent; color: #ffffff; border: 1px solid rgba(255,255,255,0.4); }
.btn-outline:hover { border-color: #ffffff; color: #ffffff; transform: translateY(-1px); }

.cta-row { display: flex; gap: 14px; flex-wrap: wrap; }

/* Visible only to keyboard users when it receives focus, so the long
   homepage has a fast route to the admissions-reader guide. */
.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 1000;
  padding: 10px 14px;
  background: var(--gold);
  color: var(--navy);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-180%);
  transition: transform .15s ease;
}
.skip-link:focus { transform: translateY(0); outline: 3px solid #ffffff; outline-offset: 2px; }

/* ---------- Hero band: full-viewport real performance chart ---------- */

.hero-band {
  position: relative;
  overflow: hidden;
  background: var(--navy);
  color: #ffffff;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.hero-chart-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-chart { width: 100%; height: 100%; display: block; }

.hero-chart .grid-line { stroke: rgba(255,255,255,0.09); stroke-width: 1; }
.hero-chart .grid-label {
  fill: rgba(255,255,255,0.38);
  font-family: var(--sans);
  font-size: 15px;
}

.hero-chart .chart-line {
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 2600;
  stroke-dashoffset: 2600;
  animation: draw-in 2.4s cubic-bezier(0.16, 1, 0.3, 1) 0.3s forwards;
}

.hero-chart .chart-line-spy { stroke: rgba(255,255,255,0.4); }
.hero-chart .chart-line-book { stroke: var(--gold); }

.hero-chart .chart-dot {
  opacity: 0;
  animation: fade-in 0.6s ease 2.4s forwards;
}
.hero-chart .chart-dot-spy { fill: rgba(255,255,255,0.55); }
.hero-chart .chart-dot-book { fill: var(--gold); }

@keyframes draw-in { to { stroke-dashoffset: 0; } }
@keyframes fade-in { to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .hero-chart .chart-line { animation: none; stroke-dashoffset: 0; }
  .hero-chart .chart-dot { animation: none; opacity: 1; }
}

.hero-band .wrap {
  position: relative;
  z-index: 1;
  padding-top: 64px;
  max-width: 1080px;
  margin: 0 auto;
}

.hero-chart-footer {
  position: relative;
  z-index: 1;
  margin-top: auto;
  padding: 16px 20px;
  max-width: 1080px;
  margin-left: 20px;
  margin-right: 20px;
  margin-bottom: 24px;
  background: rgba(10, 14, 24, 0.62);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius);
}

@media (min-width: 900px) {
  /* Float the legend/caption as a card in the upper-right, clear of the
     rising chart line, instead of sitting at the bottom where the line
     crosses directly through the text. */
  .hero-chart-footer {
    position: absolute;
    top: 96px;
    right: 40px;
    left: auto;
    bottom: auto;
    margin: 0;
    width: min(360px, 34%);
    padding: 18px 20px;
    background: rgba(10, 14, 24, 0.62);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: var(--radius);
    z-index: 2;
  }
  .hero-chart-footer .hero-chart-legend { flex-direction: column; gap: 8px; }
  .hero-chart-footer .hero-chart-caption { font-size: 11px; max-width: none; }
}

.hero-chart-legend {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.legend-item {
  font-family: var(--sans);
  font-size: 14px;
  color: rgba(255,255,255,0.75);
  display: flex;
  align-items: center;
  gap: 8px;
}

.legend-item .dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }
.legend-item .dot.gold { background: var(--gold); }
.legend-item .dot.muted { background: rgba(255,255,255,0.5); }
.legend-item strong { color: #ffffff; font-family: var(--serif); font-weight: 600; margin-left: 2px; }

.hero-chart-caption {
  font-size: 12px;
  line-height: 1.6;
  color: rgba(255,255,255,0.4);
  max-width: 640px;
  margin: 0;
}

.hero-chart-caption a { color: rgba(255,255,255,0.6); }

.scroll-cue {
  position: relative;
  z-index: 1;
  text-align: center;
  padding-bottom: 20px;
  color: rgba(255,255,255,0.45);
  font-size: 20px;
  animation: bob 2.2s ease-in-out infinite;
}

@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .scroll-cue { animation: none; } }

/* ---------- Pulse strip: live-cadence hook module ---------- */

.reader-banner {
  background: #fdfaf3;
  border-bottom: 1px solid rgba(197,160,89,0.35);
}
.reader-banner-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 18px;
  padding: 10px 0;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--muted);
}
.reader-banner-inner strong { color: var(--navy); }
.reader-banner-links { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.reader-banner-links a {
  color: var(--navy);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(197,160,89,0.5);
  white-space: nowrap;
}
.reader-banner-links a:hover { color: var(--gold); border-color: var(--gold); }

.pulse-strip {
  background: var(--navy);
  border-bottom: 1px solid rgba(197,160,89,0.25);
}
.pulse-strip-inner {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 14px 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.pulse-strip-inner::-webkit-scrollbar { display: none; }
.pulse-live {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--gold);
  padding-right: 18px;
  border-right: 1px solid rgba(255,255,255,0.14);
  white-space: nowrap;
}
.pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 0 rgba(197,160,89,0.6);
  animation: pulse-glow 2.2s ease-out infinite;
  flex-shrink: 0;
}
@keyframes pulse-glow {
  0%   { box-shadow: 0 0 0 0 rgba(197,160,89,0.55); }
  70%  { box-shadow: 0 0 0 7px rgba(197,160,89,0); }
  100% { box-shadow: 0 0 0 0 rgba(197,160,89,0); }
}
@media (prefers-reduced-motion: reduce) { .pulse-dot { animation: none; } }
.pulse-chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--sans);
  font-size: 13px;
  color: #cdd5df;
  text-decoration: none;
  white-space: nowrap;
  transition: color .15s ease;
}
.pulse-chip:hover { color: #ffffff; }
.pulse-chip-date { color: var(--gold); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px; }
.pulse-strip-more {
  flex: 0 0 auto;
  margin-left: auto;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  color: #9fb0c3;
  text-decoration: none;
  white-space: nowrap;
  padding-left: 18px;
  border-left: 1px solid rgba(255,255,255,0.14);
}
.pulse-strip-more:hover { color: var(--gold); }
@media (max-width: 700px) {
  .pulse-live { border-right: none; padding-right: 12px; }
  .pulse-strip-more { display: none; }
}

.hero-band .kicker { color: var(--gold); margin: 0 0 14px; }

.hero-band h1 {
  color: #ffffff;
  font-size: 60px;
  line-height: 1.08;
  letter-spacing: -0.5px;
  margin: 0 0 6px;
  max-width: 15ch;
}

.hero-band .byline {
  font-family: var(--sans);
  font-size: 16px;
  color: #b9c2ce;
  margin: 0 0 26px;
}

.hero-band .byline strong { color: #ffffff; font-weight: 600; }

.hero-lede {
  font-family: var(--serif);
  font-size: 23px;
  line-height: 1.5;
  color: #d7dde5;
  max-width: 42ch;
  margin: 0 0 34px;
}

.hero-lede a { color: var(--gold); }
.hero-lede a:hover { color: #bfa878; }

/* ---------- Stat band ---------- */

.stat-band .wrap {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding-top: 0;
  padding-bottom: 0;
}

.stat-band .stat { border-top: none; }

.data-verified-note {
  text-align: center;
  margin: 0 0 20px;
}

.process-note {
  max-width: 600px;
  margin: 0 auto;
  padding-bottom: 8px;
  text-align: left;
}
.process-note p {
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--muted);
}
.process-note p:last-child { margin-bottom: 0; }
.process-note strong { color: var(--navy); }
.process-note p.meta {
  font-size: 12.5px;
  text-align: left;
  padding-top: 10px;
  border-top: 1px solid var(--hairline);
}

/* ---------- Macro & Rates Context ---------- */

.macro-band { padding: 40px 0; }
.macro-header { margin-bottom: 20px; }
.macro-header .meta { margin: 4px 0 0; }

.macro-updated {
  margin: 14px 0 0;
  font-family: var(--sans);
  font-size: 11px;
  color: var(--muted);
  text-align: right;
}

.macro-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
}

.macro-stat {
  background: #ffffff;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.macro-label {
  font-family: var(--sans);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--muted);
}

.macro-value {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 600;
  color: var(--navy);
}

.macro-source {
  font-family: var(--sans);
  font-size: 11px;
  color: var(--muted);
}

.macro-source a { color: var(--muted); text-decoration: underline; }

/* ---------- Yield Curve & Credit monitor (denser sibling of macro-grid) ---------- */

.yield-monitor { margin-top: 20px; border: 1px solid var(--hairline); background: #fff; }
.yield-monitor-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: var(--navy);
}
.yield-monitor-head h4 {
  margin: 0;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 700;
}
.yield-monitor-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--hairline);
}
.yield-monitor-cell { background: #fff; padding: 12px 16px; display: flex; flex-direction: column; gap: 2px; }
.yield-monitor-label { font-family: var(--sans); font-size: 10px; text-transform: uppercase; letter-spacing: 0.6px; color: var(--muted); }
.yield-monitor-value { font-family: var(--serif); font-size: 19px; font-weight: 700; color: var(--navy); display: flex; align-items: center; gap: 8px; }
.yield-status-tag {
  font-family: var(--sans);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 3px;
}
.yield-status-normal { color: var(--positive); background: rgba(47,111,79,0.1); }
.yield-status-inverted { color: var(--negative); background: rgba(156,59,59,0.1); }
.yield-monitor-foot { padding: 8px 16px; font-family: var(--sans); font-size: 10px; color: var(--muted); border-top: 1px solid var(--hairline); }

@media (max-width: 700px) {
  .yield-monitor-row { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Top Performers leaderboard ---------- */

.leaderboard {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--hairline);
}

.leaderboard-item {
  display: flex;
  align-items: baseline;
  gap: 18px;
  padding: 16px 4px;
  border-bottom: 1px solid var(--hairline);
  transition: background-color .15s ease;
}

.leaderboard-item:hover { background: rgba(212,175,55,0.05); }

.leaderboard-rank {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 600;
  color: var(--gold);
  width: 28px;
  flex: 0 0 auto;
}

.leaderboard-ticker {
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 600;
  color: var(--navy);
  flex: 0 0 auto;
  min-width: 64px;
}

.leaderboard-name {
  color: var(--muted);
  font-size: 14px;
  flex: 1 1 auto;
}

.leaderboard-return {
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 600;
  flex: 0 0 auto;
  text-align: right;
}

@media (max-width: 620px) {
  .leaderboard-item { flex-wrap: wrap; gap: 4px 14px; }
  .leaderboard-name { width: 100%; order: 3; font-size: 13px; }
  .macro-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Scenario Matrix ---------- */

.scenario-matrix {
  width: 100%;
  border-collapse: collapse;
  margin: 22px 0;
}

.scenario-matrix th,
.scenario-matrix td {
  border: none;
  padding: 16px 18px;
  vertical-align: top;
  text-align: left;
}

.scenario-matrix thead th {
  font-family: var(--sans);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--muted);
  border-bottom: 2px solid var(--navy);
}

.scenario-matrix tbody th {
  font-family: var(--serif);
  font-weight: 600;
  color: var(--navy);
  white-space: nowrap;
}

.scenario-matrix .scenario-bull { background: rgba(47,111,79,0.06); border-left: 3px solid var(--positive); }
.scenario-matrix .scenario-base { background: rgba(10,26,51,0.03); border-left: 3px solid var(--muted); }
.scenario-matrix .scenario-bear { background: rgba(156,59,59,0.06); border-left: 3px solid var(--negative); }

/* ---------- Tear Sheet download callout ---------- */

.tearsheet-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  background: var(--navy);
  color: #ffffff;
  border-radius: var(--radius);
  padding: 24px 28px;
  margin: 28px 0;
}

.tearsheet-cta-text h3 { color: #ffffff; margin: 0 0 4px; }
.tearsheet-cta-text p { color: rgba(255,255,255,0.65); margin: 0; font-size: 14px; }
.tearsheet-cta .btn-gold { flex: 0 0 auto; }

/* Compact inline stat row for narrow-column pages (Holdings, etc.) —
   unlike .stat-band, this doesn't rely on a full-bleed .wrap band. */
.stat-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  overflow: hidden;
  margin: 28px 0 36px;
}
.stat-row .stat { padding: 20px 12px; }
.stat-row .stat:first-child { border-left: none; }
.stat-row .stat .num { font-size: 24px; }

/* ---------- Section head ---------- */

.section { padding: 68px 0; }
.section-sm { padding: 48px 0; }

.section-head { margin: 0 0 28px; }
.section-head .eyebrow {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.6px;
  color: var(--burgundy);
  margin: 0 0 8px;
}
.band-navy .section-head .eyebrow { color: var(--gold); }
.section-head h2 { margin: 0; font-size: 30px; }
.section-head p { margin: 10px 0 0; color: var(--muted); max-width: 60ch; }
.band-navy .section-head p { color: #b9c2ce; }

/* ---------- Featured insight ---------- */

.featured {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 0;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: #ffffff;
  overflow: hidden;
}

.featured-body { padding: 40px 44px; }
.featured-side {
  background: var(--navy);
  color: #eef1f5;
  padding: 40px 44px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.featured .eyebrow {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  color: var(--burgundy);
  margin: 0 0 12px;
}

.featured h3 { font-size: 26px; margin: 0 0 14px; line-height: 1.25; }
.featured h3 a { color: var(--navy); text-decoration: none; }
.featured h3 a:hover { color: var(--burgundy); }
.featured p { color: var(--muted); margin: 0 0 18px; }

.featured-side .num-big {
  font-family: var(--serif);
  font-size: 44px;
  font-weight: 600;
  color: #ffffff;
  line-height: 1;
}
.featured-side .num-label { font-size: 13px; color: #b9c2ce; margin-top: 6px; }

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

.cta-video-band { position: relative; overflow: hidden; }
.cta-video-band .hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.cta-video-band .hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(115deg, rgba(10,26,51,0.88) 0%, rgba(15,61,48,0.8) 55%, rgba(10,26,51,0.62) 100%);
  z-index: 0;
}
.cta-video-band .wrap { position: relative; z-index: 1; }

.cta-band .wrap {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 40px;
  align-items: center;
}
.cta-band h2 { margin: 0 0 10px; }
.cta-band p { margin: 0; color: #b9c2ce; max-width: 48ch; }
.cta-band .cta-actions { text-align: right; }

/* ---------- Stat strip ---------- */

.stat-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin: 0 0 8px;
  border-bottom: 1px solid var(--hairline);
}

.stat {
  padding: 28px 20px;
  text-align: center;
  border-left: 1px solid var(--hairline);
}

.stat:first-child { border-left: none; }

.stat .num {
  display: block;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 30px;
  color: var(--navy);
  line-height: 1.1;
}

.stat .label {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--muted);
}

.stat .label a { color: inherit; text-decoration: underline; }

/* ---------- Card grid ---------- */

.card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin: 24px 0 8px;
}

.card {
  display: block;
  background: #ffffff;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 22px 24px;
  text-decoration: none;
  color: inherit;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}

.card:hover {
  border-color: var(--navy-soft);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(10,26,51,0.08);
  color: inherit;
}

.card h3 {
  margin: 0 0 8px;
  font-size: 18px;
  color: var(--navy);
}

.card p { margin: 0; color: var(--muted); font-size: 15px; }

.card .card-date {
  display: block;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--gold);
  margin: 0 0 10px;
}

.news-strip-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin: 24px 0 8px;
}
.news-strip-grid .card {
  position: relative;
  overflow: hidden;
  padding-top: 26px;
}
.news-strip-grid .card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--gold), var(--copper));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s ease;
}
.news-strip-grid .card:hover::before { transform: scaleX(1); }
.news-strip-grid .card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(10,26,51,0.12); }
.news-strip-grid .card .card-date { color: var(--copper); }

.methodology-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin: 24px 0 8px;
}

.methodology-grid .method-item {
  border-top: 2px solid var(--gold);
  padding: 18px 0 0;
}

.methodology-grid .method-item h3 {
  margin: 0 0 8px;
  font-size: 16px;
  color: var(--navy);
}

.methodology-grid .method-item p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}

/* ---------- FAQ (home page) ---------- */

.faq-list { margin: 20px 0 0; border-top: 1px solid var(--hairline); }

.faq-item {
  border-bottom: 1px solid var(--hairline);
  padding: 4px 0;
}

.faq-item summary {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 600;
  color: var(--navy);
  padding: 16px 28px 16px 0;
  cursor: pointer;
  list-style: none;
  position: relative;
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::after {
  content: '+';
  position: absolute;
  right: 4px;
  top: 14px;
  font-family: var(--sans);
  font-size: 22px;
  font-weight: 400;
  color: var(--gold);
  transition: transform .15s ease;
}

.faq-item[open] summary::after { content: '\2212'; }

.faq-item summary:hover { color: var(--gold); }

.faq-item p {
  margin: 0 0 18px;
  color: var(--muted);
  max-width: 68ch;
}

/* ---------- Bucket strip (home page) ---------- */

.bucket-row {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--hairline);
  margin: 24px 0 8px;
}

.bucket-row a.bucket-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  text-decoration: none;
  color: inherit;
  border-top: 1px solid var(--hairline);
  transition: background-color .15s ease;
}

.bucket-row a.bucket-item:first-child { border-top: none; }
.bucket-row a.bucket-item:hover { background: var(--band); }

.bucket-item .dot { width: 11px; height: 11px; border-radius: 50%; flex: 0 0 auto; }
.bucket-item .bucket-pct { font-family: var(--serif); font-weight: 600; color: var(--navy); min-width: 52px; }
.bucket-item .bucket-name { flex: 1; color: var(--ink); font-weight: 600; }
.bucket-item .bucket-tickers { color: var(--muted); font-size: 14px; }
.bucket-item .arrow { color: var(--muted); }

/* ---------- Bucket sidebar + detail panel (Morgan-Stanley-style) ---------- */

.bucket-panel {
  display: grid;
  grid-template-columns: 340px 1fr;
  border: 1px solid var(--hairline);
  background: #ffffff;
  margin: 24px 0 8px;
}

.bucket-sidebar {
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--hairline);
  background: var(--band);
}

.bucket-tab {
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  background: transparent;
  border: none;
  border-left: 3px solid transparent;
  border-bottom: 1px solid var(--hairline);
  padding: 18px 20px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.bucket-tab:last-child { border-bottom: none; }
.bucket-tab:hover { background: rgba(197,160,89,0.08); color: var(--ink); }

.bucket-tab.active {
  background: #ffffff;
  border-left-color: var(--gold);
  color: var(--navy);
}

.bucket-tab .dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }
.bucket-tab span:nth-child(2) { flex: 1; }
.bucket-tab-pct { font-family: var(--serif); color: var(--navy); }

.bucket-detail { position: relative; padding: 32px 36px; }

.bucket-detail-panel { display: none; }
.bucket-detail-panel.active { display: block; }

.bucket-detail-panel h3 { margin: 0 0 10px; }
.bucket-detail-panel p { color: var(--muted); margin: 0 0 20px; }

.bucket-tickers-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 22px;
}

.bucket-tickers-grid a {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--navy);
  text-decoration: none;
  border: 1px solid var(--hairline);
  border-radius: 3px;
  padding: 7px 14px;
  transition: border-color .15s ease, background-color .15s ease;
}

.bucket-tickers-grid a:hover { border-color: var(--gold); background: rgba(197,160,89,0.08); }

/* ---------- Milestones timeline ---------- */

.milestones-layout {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 48px;
  align-items: start;
}

.timeline { list-style: none; margin: 0; padding: 0; }

.timeline li {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 20px;
  padding: 20px 0;
  border-top: 1px solid var(--hairline);
}

.timeline li:first-child { border-top: none; padding-top: 0; }

.timeline-date {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--muted);
  padding-top: 3px;
}

.timeline li h3 { margin: 0 0 6px; font-size: 18px; }
.timeline li p { margin: 0; color: var(--muted); font-size: 15px; }

.timeline-upcoming { opacity: 0.75; }
.timeline-upcoming .timeline-date { color: var(--gold); }
.timeline-upcoming h3::after {
  content: "Upcoming";
  display: inline-block;
  margin-left: 10px;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--gold);
  border: 1px solid var(--gold);
  border-radius: 999px;
  padding: 2px 8px;
  vertical-align: middle;
}

.milestones-photo {
  width: 100%;
  height: 100%;
  min-height: 280px;
  object-fit: cover;
  border: 1px solid var(--hairline);
}

.photo-credit {
  font-size: 11px;
  color: var(--muted);
  margin: 8px 0 0;
}

.photo-credit a { color: var(--muted); }

/* ---------- Monogram ---------- */

.monogram {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--gold);
  font-family: var(--serif);
  font-weight: 600;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.bio-row { display: flex; gap: 20px; align-items: flex-start; margin: 24px 0; }
.bio-row p { margin: 0; }

/* ---------- About hero ---------- */

.about-hero {
  position: relative;
  overflow: hidden;
  background: var(--paper) center/cover;
  color: var(--ink);
  padding: 96px 0 76px;
}

.about-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(180deg, rgba(248,249,251,0.35) 0%, rgba(248,249,251,0.93) 100%);
  pointer-events: none;
}

.about-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(ellipse 900px 500px at 15% -10%, rgba(212,175,55,0.14), transparent 60%),
    radial-gradient(ellipse 700px 500px at 105% 110%, rgba(212,175,55,0.10), transparent 60%);
  pointer-events: none;
}

.about-hero .wrap { position: relative; z-index: 2; text-align: center; }

.about-monogram-ring {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  border: 1px solid rgba(212,175,55,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 28px;
  background: rgba(212,175,55,0.08);
}

.about-monogram-ring span {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 30px;
  color: var(--burgundy);
}

.about-hero .kicker { color: var(--burgundy); text-align: center; }

.about-hero h1 {
  color: var(--navy);
  font-size: 52px;
  line-height: 1.15;
  letter-spacing: -0.3px;
  margin: 0 auto 20px;
  max-width: 18ch;
}

.about-hero .hero-lede {
  margin: 0 auto 36px;
  max-width: 52ch;
  text-align: center;
  font-size: 21px;
  color: var(--muted);
}

.about-hero .cta-row { justify-content: center; }

.about-hero .hairline-divider {
  width: 64px;
  height: 1px;
  background: rgba(212,175,55,0.5);
  margin: 44px auto 0;
}

/* ---------- Pull quote ---------- */

.pull-quote {
  font-family: var(--serif);
  font-size: 26px;
  line-height: 1.5;
  color: var(--navy);
  max-width: 46ch;
  margin: 0 auto;
  text-align: center;
  padding: 0 0 0 0;
  position: relative;
}

.pull-quote::before {
  content: "\201C";
  display: block;
  font-size: 60px;
  line-height: 1;
  color: var(--gold);
  margin-bottom: 8px;
}

.pull-quote strong { color: var(--navy); }

/* ---------- Belief list ---------- */

.belief-list {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  counter-reset: belief;
  display: grid;
  gap: 20px;
}

.belief-list li {
  counter-increment: belief;
  display: flex;
  gap: 20px;
  align-items: flex-start;
  padding: 22px 26px;
  background: #ffffff;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
}

.belief-list li::before {
  content: counter(belief, decimal-leading-zero);
  flex: 0 0 auto;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 22px;
  color: var(--gold);
  line-height: 1.3;
}

.belief-list li p { margin: 0; }

/* ---------- Process steps ---------- */

.process-steps {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  counter-reset: step;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.process-steps li {
  counter-increment: step;
  padding: 24px 20px;
  background: var(--navy);
  border-radius: var(--radius);
  border-top: 3px solid var(--gold);
}

.process-steps li::before {
  content: counter(step);
  display: block;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 28px;
  color: var(--gold);
  margin-bottom: 10px;
}

.process-steps li strong { display: block; color: #ffffff; margin-bottom: 6px; font-size: 15px; }
.process-steps li p { margin: 0; color: #b9c2ce; font-size: 13.5px; line-height: 1.55; }

@media (max-width: 900px) {
  .process-steps { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .process-steps { grid-template-columns: 1fr; }
  .about-hero h1 { font-size: 36px; }
  .about-hero .hero-lede { font-size: 18px; }
}

/* ---------- Price chart (real data, toggleable) ---------- */

.price-chart {
  background: #ffffff;
  border: 1px solid var(--hairline);
  padding: 20px 22px 14px;
  margin: 24px 0;
}

.chart-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.chart-change {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 18px;
  color: var(--ink);
}

.chart-toggle { display: flex; gap: 4px; }

.chart-toggle button {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.3px;
  background: transparent;
  border: 1px solid var(--hairline);
  color: var(--muted);
  padding: 5px 12px;
  border-radius: 2px;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.chart-toggle button:hover { border-color: var(--navy); color: var(--navy); }

.chart-toggle button.active {
  background: var(--navy);
  border-color: var(--navy);
  color: #ffffff;
}

.price-chart svg { width: 100%; height: 160px; display: block; }

.chart-legend {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 10px;
  font-size: 13px;
  color: var(--muted);
}

.chart-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.chart-legend-item strong { color: var(--ink); }

.chart-legend-swatch {
  width: 16px;
  height: 2.5px;
  display: inline-block;
  border-radius: 2px;
}

.chart-legend-swatch-dashed {
  background: repeating-linear-gradient(to right, #8a94a3 0, #8a94a3 4px, transparent 4px, transparent 7px);
}

/* ---------- Historical Performance Compare-Tool ---------- */

.perf-compare {
  background: #ffffff;
  border: 1px solid var(--hairline);
  padding: 24px 26px 18px;
  margin: 24px 0;
}

.perf-compare-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.perf-compare-range { display: flex; gap: 4px; }

.perf-compare-range button {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.3px;
  background: transparent;
  border: 1px solid var(--hairline);
  color: var(--muted);
  padding: 5px 12px;
  border-radius: 2px;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.perf-compare-range button:hover { border-color: var(--navy); color: var(--navy); }

.perf-compare-range button.active {
  background: var(--navy);
  border-color: var(--navy);
  color: #ffffff;
}

.perf-compare-bench {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--muted);
}

.perf-compare-bench label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  user-select: none;
}

.perf-compare-bench input[type="checkbox"] { accent-color: var(--gold); cursor: pointer; }

.perf-compare svg { width: 100%; height: 220px; display: block; }

.perf-compare-legend {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 12px;
  font-size: 13px;
  color: var(--muted);
}

.perf-compare-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.perf-compare-legend-item strong { color: var(--ink); }

.perf-compare-legend-swatch {
  width: 16px;
  height: 3px;
  display: inline-block;
  border-radius: 2px;
}

.perf-compare-note {
  margin-top: 12px;
  font-family: var(--sans);
  font-size: 12.5px;
  color: var(--muted);
  border-top: 1px solid var(--hairline);
  padding-top: 10px;
}

/* ---------- 52-week range bar ---------- */

.range-bar { margin: 8px 0 28px; }

.range-track {
  position: relative;
  height: 6px;
  background: var(--hairline);
  border-radius: 3px;
}

.range-marker {
  position: absolute;
  top: -4px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--navy);
  border: 2px solid #ffffff;
  box-shadow: 0 0 0 1px var(--hairline);
  transform: translateX(-50%);
}

.range-labels {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--muted);
  margin-top: 8px;
}

.range-labels .current {
  font-family: var(--serif);
  font-weight: 600;
  color: var(--navy);
  font-size: 14px;
}

/* ---------- Newsletter signup form ---------- */

.signup {
  background: #ffffff;
  border: 1px solid var(--hairline);
  border-top: 4px solid var(--gold);
  padding: 32px 34px;
  max-width: 520px;
}

.signup h3 { margin: 0 0 8px; }
.signup p { color: var(--muted); margin: 0 0 20px; font-size: 15px; }

.signup-field { display: flex; gap: 10px; flex-wrap: wrap; }

.signup input[type="email"] {
  flex: 1 1 220px;
  font-family: var(--sans);
  font-size: 15px;
  padding: 13px 16px;
  border: 1px solid var(--hairline);
  border-radius: 2px;
  background: var(--paper);
  color: var(--ink);
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.signup input[type="email"]:focus {
  outline: none;
  border-color: var(--gold);
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(197,160,89,0.16);
}

.signup button {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.3px;
  padding: 13px 26px;
  border: 1px solid var(--gold);
  border-radius: 2px;
  background: var(--gold);
  color: var(--navy);
  cursor: pointer;
  transition: background-color .15s ease, transform .15s ease, box-shadow .15s ease;
}

.signup button:hover { background: #bfa878; transform: translateY(-1px); box-shadow: 0 8px 18px rgba(10,26,51,0.18); }

.signup .fine { font-size: 12px; color: var(--muted); margin: 14px 0 0; }

.setup-note {
  background: #faf6ec;
  border: 1px solid #e6d9a8;
  border-left: 4px solid var(--gold);
  padding: 14px 18px;
  font-size: 13px;
  color: #6b5d33;
  margin: 0 0 24px;
}
.setup-note code { background: rgba(0,0,0,0.06); padding: 1px 5px; border-radius: 3px; }

/* ---------- Scroll-reveal motion (animate.js) ---------- */

.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* Springier, more confident easing for interactive elements */
.btn, .card, .bucket-item, .nav a, a, .chart-toggle button {
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

.btn:active { transform: translateY(0) scale(0.97); }

.card:hover, .bucket-item:hover {
  box-shadow: 0 8px 24px rgba(10,26,51, 0.08);
}

/* ---------- Responsive ---------- */

@media (max-width: 820px) {
  .hero-band h1 { font-size: 44px; }
  .featured { grid-template-columns: 1fr; }
  .cta-band .wrap { grid-template-columns: 1fr; }
  .cta-band .cta-actions { text-align: left; }
}

@media (max-width: 900px) {
  .nav-toggle { display: block; }
  .nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    background: var(--navy);
    padding: 12px 32px 28px;
    border-top: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 12px 24px rgba(0,0,0,0.25);
  }
  .nav.nav-open { display: flex; }
  .nav a { width: 100%; padding: 10px 0; }
  .nav .nav-divider { display: none; }
}

@media (max-width: 620px) {
  body { font-size: 17px; }
  h1 { font-size: 28px; }
  h2 { font-size: 21px; }
  table { font-size: 15px; }
  th, td { padding: 8px 10px; }
  .hero-band .wrap { padding-top: 60px; padding-bottom: 60px; }
  .hero-band h1 { font-size: 34px; }
  .hero-lede { font-size: 19px; }
  .stat-band .wrap { grid-template-columns: repeat(2, 1fr); }
  .stat-row { grid-template-columns: repeat(2, 1fr); }
  .stat-row .stat:nth-child(3) { border-left: none; }
  .stat:nth-child(3) { border-left: none; }
  .card-grid { grid-template-columns: 1fr; }
  .news-strip-grid { grid-template-columns: 1fr; }
  .heatmap-wrap { padding-bottom: 130%; }
  .heatmap-tile .tile-ticker { font-size: 11px; }
  .heatmap-tile .tile-return { font-size: 10px; }
  .methodology-grid { grid-template-columns: 1fr; gap: 22px; }
  .bio-row { flex-direction: column; }
  .featured-body, .featured-side { padding: 28px 24px; }
  .section { padding: 44px 0; }
  /* Skip the video payload on small screens for the newsletter band —
     poster image (already the video's first-paint fallback) carries the
     same visual, no extra data. */
  .hero-video { display: none; }
  .cta-video-band { background-image: url('video/hero-poster.jpg'); background-size: cover; background-position: center; }
  /* Lighter, faster reveal on mobile — less floaty, snappier to not feel laggy on touch */
  .reveal { transform: translateY(10px); transition-duration: 0.45s; }

  /* Bucket sidebar+panel and milestones layout: stack instead of
     side-by-side, otherwise a fixed 340px sidebar alone overflows a
     375px viewport and forces horizontal scroll. */
  .bucket-panel { grid-template-columns: 1fr; }
  .bucket-sidebar { border-right: none; border-bottom: 1px solid var(--hairline); }
  .bucket-detail { padding: 24px 20px; }
  .bucket-tickers-grid a { padding: 6px 12px; font-size: 12px; }

  .milestones-layout { grid-template-columns: 1fr; gap: 28px; }
  .milestones-photo { min-height: 200px; order: -1; }
  .timeline li { grid-template-columns: 90px 1fr; gap: 14px; }
  .timeline-upcoming h3::after { display: block; margin: 6px 0 0; width: fit-content; }

  .hero-chart-legend { gap: 16px; }
  .hero-chart .grid-label { font-size: 20px; }
}

/* Pre-Mortem Thesis Invalidation Parameters (sell triggers) */
.sell-triggers-section { margin: 28px 0; }
.sell-triggers-section h3 { margin-bottom: 6px; }
.sell-triggers-intro { color: var(--muted); font-size: 14px; margin: 0 0 14px; }
.sell-triggers {
  width: 100%;
  border-collapse: collapse;
  border-top: 3px solid var(--negative);
}
.sell-triggers th, .sell-triggers td {
  text-align: left;
  padding: 12px 16px;
  border-bottom: 1px solid var(--hairline);
  vertical-align: top;
  font-size: 14px;
}
.sell-triggers thead th {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--muted);
  background: rgba(0,0,0,0.02);
}
.sell-triggers td.trigger-metric { font-weight: 600; width: 34%; }
.sell-triggers td.trigger-exit { color: var(--navy-soft); }

/* DCF Sensitivity Widget */
.dcf-widget {
  margin: 28px 0;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  overflow: hidden;
  background: #ffffff;
}
.dcf-widget-head { padding: 16px 22px; border-bottom: 1px solid var(--hairline); background: rgba(0,0,0,0.02); }
.dcf-widget-head h3 { margin: 0 0 4px; }
.dcf-widget-head p { margin: 0; font-size: 13px; color: var(--muted); }
.dcf-widget-body { padding: 20px 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.dcf-control { display: flex; flex-direction: column; gap: 6px; }
.dcf-control label { font-family: var(--sans); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--navy); display: flex; justify-content: space-between; }
.dcf-control label span.dcf-val { color: var(--gold); font-weight: 700; }
.dcf-control input[type="range"] {
  -webkit-appearance: none;
  width: 100%;
  height: 4px;
  border-radius: 2px;
  background: var(--hairline);
  outline: none;
}
.dcf-control input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--navy);
  cursor: pointer;
  border: 2px solid var(--gold);
}
.dcf-control input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--navy);
  cursor: pointer;
  border: 2px solid var(--gold);
}
.dcf-control-base { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; }
.dcf-control-base label { font-family: var(--sans); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--navy); white-space: nowrap; }
.dcf-control-base input[type="number"] {
  font-family: var(--serif);
  font-size: 15px;
  border: 1px solid var(--hairline);
  border-radius: 4px;
  padding: 6px 10px;
  width: 110px;
}
.dcf-output {
  grid-column: 1 / -1;
  margin-top: 4px;
  padding: 16px 20px;
  background: var(--navy);
  border-radius: var(--radius);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}
.dcf-output-label { font-family: var(--sans); font-size: 11px; letter-spacing: 0.8px; text-transform: uppercase; color: var(--gold); }
.dcf-output-value { font-family: var(--serif); font-size: 28px; font-weight: 700; color: #fff; }
.dcf-output-warning { font-family: var(--sans); font-size: 12px; color: #e3b3b3; }
.dcf-widget-foot { padding: 12px 22px; border-top: 1px solid var(--hairline); font-size: 12px; color: var(--muted); }

@media (max-width: 700px) {
  .dcf-widget-body { grid-template-columns: 1fr; }
}

/* AEA Thematic Basket tracker */
.thematic-basket {
  margin: 28px 0;
  border: 1px solid var(--navy);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--navy);
}
.thematic-basket-head {
  padding: 18px 22px;
  border-bottom: 1px solid rgba(255,255,255,0.15);
}
.thematic-basket-label {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 6px;
}
.thematic-basket-head h3 { color: #fff; margin: 0 0 4px; }
.thematic-basket-head p { color: #98a2b0; font-size: 13px; margin: 0; }
.thematic-basket-body { padding: 18px 22px; }
.thematic-basket-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 0;
  border-bottom: 1px dashed rgba(255,255,255,0.12);
  font-family: var(--sans);
  font-size: 14px;
}
.thematic-basket-row:last-of-type { border-bottom: none; }
.thematic-basket-ticker { color: #fff; font-weight: 600; }
.thematic-basket-ticker .thematic-basket-note { color: #98a2b0; font-weight: 400; font-size: 11px; margin-left: 6px; }
.thematic-basket-return { font-family: var(--serif); font-weight: 700; }
.thematic-basket-compare {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.15);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
}
.thematic-basket-compare-item { text-align: center; }
.thematic-basket-compare-label { display: block; font-family: var(--sans); font-size: 10px; letter-spacing: 0.6px; text-transform: uppercase; color: var(--gold); margin-bottom: 4px; }
.thematic-basket-compare-value { font-family: var(--serif); font-size: 24px; font-weight: 700; color: #fff; }
.thematic-basket-foot { padding: 12px 22px; background: rgba(0,0,0,0.2); font-size: 12px; color: #98a2b0; }

/* ---------- Strategy Briefing download card ---------- */

.strategy-briefing {
  margin: 28px 0;
  border: 1px solid var(--navy);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--navy);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 30px 32px;
}
.strategy-briefing-text { max-width: 480px; }
.strategy-briefing-label {
  display: block;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 8px;
}
.strategy-briefing h3 {
  font-family: var(--serif);
  font-size: 24px;
  color: #ffffff;
  margin: 0 0 8px;
}
.strategy-briefing-text p {
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.6;
  color: #b9c1cc;
  margin: 0;
}
.strategy-briefing-action {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  flex-shrink: 0;
}
.strategy-briefing-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.2px;
  color: var(--navy);
  background: var(--gold);
  border: 1px solid var(--gold);
  border-radius: var(--radius);
  padding: 12px 20px;
  white-space: nowrap;
  transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.strategy-briefing-btn:hover {
  background: #bfa878;
  border-color: #bfa878;
  transform: translateY(-1px);
}
.strategy-briefing-meta {
  font-family: var(--sans);
  font-size: 11px;
  color: #8b93a1;
}

@media (max-width: 700px) {
  .strategy-briefing { flex-direction: column; align-items: flex-start; }
  .strategy-briefing-action { align-items: flex-start; width: 100%; }
  .strategy-briefing-btn { width: 100%; justify-content: center; }
}

/* ============================================================
   Print stylesheet — clean, ink-friendly output for anyone who
   prints a letter, the holdings table, or the About page.
   ============================================================ */
/* ---------- Strategy deck (5-page briefing format) ---------- */

.deck-cover {
  margin: 28px 0;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--navy);
  padding: 48px 44px 40px;
  position: relative;
}
.deck-cover::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--gold), transparent 70%);
}
.deck-cover-kicker {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 14px;
}
.deck-cover h1 {
  font-family: var(--serif);
  font-size: 40px;
  color: #ffffff;
  margin: 0 0 12px;
  line-height: 1.15;
}
.deck-cover-sub {
  font-family: var(--sans);
  font-size: 16px;
  color: #c3cad4;
  max-width: 620px;
  line-height: 1.6;
  margin: 0 0 28px;
}
.deck-cover-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,0.15);
}
.deck-cover-meta-item { display: flex; flex-direction: column; gap: 4px; }
.deck-cover-meta-label { font-family: var(--sans); font-size: 10px; letter-spacing: 0.8px; text-transform: uppercase; color: #8b93a1; }
.deck-cover-meta-value { font-family: var(--serif); font-size: 17px; color: #fff; }

.deck-toc {
  margin: 24px 0 28px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  overflow: hidden;
}
.deck-toc-item {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--hairline);
  text-decoration: none;
  color: var(--ink);
  transition: background-color 0.15s ease;
}
.deck-toc-item:last-child { border-bottom: none; }
.deck-toc-item:hover { background: rgba(197,160,89,0.08); }
.deck-toc-num { font-family: var(--serif); font-size: 15px; color: var(--gold); font-weight: 700; width: 24px; flex-shrink: 0; }
.deck-toc-title { font-family: var(--sans); font-size: 15px; font-weight: 600; flex-shrink: 0; }
.deck-toc-desc { font-family: var(--sans); font-size: 13px; color: var(--muted); }

.deck-page {
  margin: 40px 0;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  overflow: hidden;
  background: #ffffff;
}
.deck-page-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 18px 28px;
  background: var(--band);
  border-bottom: 2px solid var(--gold);
}
.deck-page-header-left { display: flex; align-items: baseline; gap: 12px; }
.deck-page-num {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  color: var(--gold);
  background: var(--navy);
  padding: 3px 9px;
  border-radius: 4px;
}
.deck-page-header h2 { margin: 0; font-size: 20px; }
.deck-page-tag { font-family: var(--sans); font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.6px; }
.deck-page-body { padding: 28px; }
.deck-page-body > p:first-child { margin-top: 0; }

.deck-personal-note {
  border-left: 4px solid var(--gold);
  background: #faf6ec;
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 16px 20px;
  margin: 18px 0;
}
.deck-personal-note-label {
  display: block;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 6px;
}

@media (max-width: 700px) {
  .deck-cover { padding: 32px 22px; }
  .deck-cover h1 { font-size: 30px; }
  .deck-page-body { padding: 20px; }
  .deck-page-header { flex-direction: column; align-items: flex-start; gap: 6px; }
}

/* ============================================================
   RESEARCH WING — "institutional data" layer
   Additive only: reuses the site's cream/navy/gold tokens and
   Playfair/Inter pairing; adds tabular monospace numerals for data.
   ============================================================ */

:root {
  /* Aliases --sans (Inter Tight, self-hosted) rather than a system monospace
     stack — the rest of the site never sets a monospace font, so numerals
     stay in-family and just gain tabular alignment. */
  --mono: var(--sans);
}

.mono, .num-mono {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  letter-spacing: 0;
}

/* ---- Research landing ---- */
.research-group { margin: 40px 0 8px; }
.research-group-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; padding-bottom: 10px; margin-bottom: 22px;
  border-bottom: 2px solid var(--navy);
}
.research-group-head h2 { margin: 0; border: none; padding: 0; }
.research-group-head .count {
  font-family: var(--mono); font-size: 12px; color: var(--muted);
  letter-spacing: 0.04em;
}
.research-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.research-card {
  display: flex; flex-direction: column;
  background: #ffffff; border: 1px solid var(--hairline);
  padding: 28px 26px 22px; text-decoration: none; color: var(--ink);
  box-shadow: 0 1px 2px rgba(10,26,51,0.03);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.research-card:hover {
  transform: translateY(-3px); border-color: var(--gold);
  box-shadow: 0 20px 44px rgba(10,26,51,0.12);
}
.research-card .chip {
  align-self: flex-start;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--gold);
  border: 1px solid rgba(197,160,89,0.5); border-radius: 2px;
  padding: 3px 8px; margin-bottom: 14px;
}
.research-card h3 {
  font-family: var(--serif); font-size: 21px; line-height: 1.2;
  margin: 0 0 8px; color: var(--navy);
}
.research-card .dek { font-size: 14.5px; color: var(--muted); line-height: 1.55; margin: 0 0 16px; }
.research-card .card-foot {
  margin-top: auto; display: flex; align-items: center; justify-content: space-between;
  font-family: var(--mono); font-size: 11.5px; color: var(--muted); letter-spacing: 0.03em;
}
.research-card .go { color: var(--gold); font-weight: 600; }

/* ---- Stat figures (headline numbers) ---- */
.stat-figures {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  margin: 26px 0 8px; background: var(--hairline);
  border: 1px solid var(--hairline);
  box-shadow: 0 1px 2px rgba(10,26,51,0.03), 0 16px 36px rgba(10,26,51,0.05);
}
.stat-figure {
  background: #ffffff; position: relative;
  padding: 24px 22px 20px;
  transition: background-color .18s ease;
}
.stat-figure::before {
  content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 2px;
  background: var(--gold);
}
.stat-figure:hover { background: #fdfcfa; }
.stat-figure .fig {
  font-family: var(--serif); font-variant-numeric: tabular-nums;
  font-size: 32px; font-weight: 700; line-height: 1.05; color: var(--navy);
  letter-spacing: -0.01em;
}
.stat-figure .fig.pos { color: var(--positive); }
.stat-figure .fig.neg { color: var(--negative); }
.stat-figure .lab {
  font-family: var(--sans); font-size: 12px; color: var(--ink);
  margin-top: 10px; line-height: 1.4;
}
.stat-figure .src {
  font-family: var(--sans); font-size: 10px; font-weight: 600; color: var(--muted);
  margin-top: 10px; letter-spacing: 0.06em; text-transform: uppercase;
}

/* ---- Figure frame (charts) ---- */
.figure-frame {
  background: #ffffff; border: 1px solid var(--hairline);
  padding: 26px 28px 18px; margin: 30px 0;
  box-shadow: 0 1px 2px rgba(10,26,51,0.03), 0 16px 36px rgba(10,26,51,0.05);
}
.figure-frame .fig-num {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--gold);
}
.figure-frame .fig-title {
  font-family: var(--serif); font-size: 17px; color: var(--navy);
  margin: 4px 0 2px;
}
.figure-frame .fig-take { font-size: 13.5px; color: var(--muted); margin: 0 0 14px; line-height: 1.5; }
.figure-frame svg { width: 100%; height: auto; display: block; }
.figure-frame .fig-src {
  font-family: var(--mono); font-size: 10.5px; color: var(--muted);
  margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--hairline);
  letter-spacing: 0.02em;
}
.fig-legend { display: flex; gap: 20px; flex-wrap: wrap; margin: 4px 0 12px; font-size: 12.5px; color: var(--muted); }
.fig-legend span { display: inline-flex; align-items: center; gap: 7px; }
.fig-legend i { width: 18px; height: 0; border-top-width: 2.5px; border-top-style: solid; display: inline-block; }

/* ---- Data tables get mono numerics in research pages ---- */
.data-table td.num, .data-table th.num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.data-table .pos { color: var(--positive); }
.data-table .neg { color: var(--negative); }
.data-table caption { text-align: left; font-family: var(--sans); font-weight: 700; font-size: 10.5px; color: var(--muted); padding-bottom: 10px; letter-spacing: 0.08em; text-transform: uppercase; }
.data-table { box-shadow: 0 1px 2px rgba(10,26,51,0.03), 0 14px 32px rgba(10,26,51,0.05); }
.data-table thead th { background: var(--navy); color: #ffffff; font-weight: 600; border-bottom: none; }
.data-table tbody tr:hover { background: var(--paper); }

/* ---- Interactive tool shell (Risk X-Ray, Halal screener) ---- */
.tool-panel {
  position: relative; display: flex; flex-direction: column;
  background: #ffffff; border: 1px solid var(--hairline);
  padding: 40px 40px 34px; margin: 26px 0;
  box-shadow: 0 1px 2px rgba(10,26,51,0.04), 0 18px 40px rgba(10,26,51,0.05);
}
.tool-panel::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--gold) 0%, #e3cd9d 45%, var(--gold) 100%);
}
.tool-panel::after {
  content: "Interactive Tool"; order: -1;
  display: block; font-family: var(--sans); font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold);
  margin-bottom: 12px; margin-top: 3px;
}
.tool-panel h3 {
  margin-top: 0; font-family: var(--serif); font-size: 22px; font-weight: 600;
  color: var(--navy); padding-bottom: 16px; border-bottom: 1px solid var(--hairline);
}
.tool-panel > p.meta { margin-top: 4px; }
.tool-input {
  width: 100%; box-sizing: border-box; font-family: var(--mono);
  font-size: 14.5px; line-height: 1.7; color: var(--ink);
  border: 1px solid var(--hairline); background: #ffffff;
  box-shadow: inset 0 1px 3px rgba(10,26,51,0.045);
  padding: 16px 18px; resize: vertical; min-height: 138px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.tool-input:focus {
  outline: none; border-color: var(--gold);
  box-shadow: inset 0 1px 3px rgba(10,26,51,0.045), 0 0 0 3px rgba(197,160,89,0.16);
}
.tool-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-top: 18px; }
.tool-ticker-input {
  font-family: var(--mono); font-size: 16px; font-weight: 600; text-transform: uppercase;
  border: 1px solid var(--hairline); background: #ffffff;
  box-shadow: inset 0 1px 3px rgba(10,26,51,0.045);
  padding: 12px 16px; width: 160px; letter-spacing: 0.06em; color: var(--navy);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.tool-ticker-input:focus {
  outline: none; border-color: var(--gold);
  box-shadow: inset 0 1px 3px rgba(10,26,51,0.045), 0 0 0 3px rgba(197,160,89,0.16);
}
.tool-panel .btn-gold {
  background: var(--navy); color: var(--gold); border: 1px solid var(--navy);
  font-size: 12.5px; letter-spacing: 0.7px; text-transform: uppercase; padding: 14px 28px;
}
.tool-panel .btn-gold:hover { background: var(--navy-soft); color: #e3cd9d; box-shadow: 0 10px 24px rgba(10,26,51,0.24); }
.tool-note {
  font-family: var(--sans); font-size: 12.5px; color: var(--muted);
  margin-top: 16px; display: flex; align-items: flex-start; gap: 8px;
  padding-top: 14px; border-top: 1px solid var(--hairline);
}
.tool-note svg { flex-shrink: 0; margin-top: 1px; }

.flag {
  border: 1px solid var(--hairline); border-left-width: 3px;
  background: #ffffff; padding: 16px 20px; margin: 12px 0;
  box-shadow: 0 1px 2px rgba(10,26,51,0.03);
  transition: box-shadow .15s ease;
}
.flag:hover { box-shadow: 0 6px 18px rgba(10,26,51,0.07); }
.flag h4 { margin: 0 0 4px; font-family: var(--sans); font-size: 14px; font-weight: 600; }
.flag p { margin: 0; font-size: 13.5px; color: var(--muted); line-height: 1.5; }
.flag.flag-ok { border-left-color: var(--positive); }
.flag.flag-warn { border-left-color: var(--gold); }
.flag.flag-alert { border-left-color: var(--negative); }
.flag .flag-tag {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em;
  text-transform: uppercase; padding: 2px 7px; border-radius: 2px; margin-right: 8px;
}
.flag.flag-ok .flag-tag { background: rgba(47,111,79,0.12); color: var(--positive); }
.flag.flag-warn .flag-tag { background: rgba(197,160,89,0.16); color: #8a6f2e; }
.flag.flag-alert .flag-tag { background: rgba(156,59,59,0.12); color: var(--negative); }

.weight-bar-row { display: flex; align-items: center; gap: 12px; margin: 6px 0; font-family: var(--mono); font-size: 12.5px; }
.weight-bar-row .wt-tk { width: 64px; font-weight: 600; color: var(--navy); }
.weight-bar-row .wt-track { flex: 1; height: 14px; background: var(--band); position: relative; }
.weight-bar-row .wt-fill { height: 100%; background: var(--navy); }
.weight-bar-row .wt-fill.over { background: var(--negative); }
.weight-bar-row .wt-pct { width: 56px; text-align: right; color: var(--ink); }

.verdict-pass { color: var(--positive); font-weight: 600; }
.verdict-fail { color: var(--negative); font-weight: 600; }
.verdict-q { color: #8a6f2e; font-weight: 600; }

/* ---- Value-chain diagram + map (Data Center Alley) ---- */
.vchain { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; margin: 24px 0; background: var(--hairline); border: 1px solid var(--hairline); box-shadow: 0 1px 2px rgba(10,26,51,0.03), 0 14px 32px rgba(10,26,51,0.05); }
.vchain-node {
  background: #ffffff; position: relative;
  padding: 18px 14px; text-align: center;
  transition: background-color .18s ease;
}
.vchain-node::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 2px; background: var(--gold); }
.vchain-node:hover { background: #fdfcfa; }
.vchain-node .vc-layer { font-family: var(--sans); font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); }
.vchain-node .vc-name { font-family: var(--serif); font-size: 15.5px; color: var(--navy); margin: 8px 0 5px; }
.vchain-node .vc-tickers { font-family: var(--mono); font-size: 11.5px; color: var(--muted); }
.dca-map-wrap { background: #ffffff; border: 1px solid var(--hairline); padding: 14px; margin: 24px 0; box-shadow: 0 1px 2px rgba(10,26,51,0.03), 0 16px 36px rgba(10,26,51,0.05); }
.dca-map-wrap svg { width: 100%; height: auto; display: block; }
.dca-marker { cursor: pointer; }
.dca-panel {
  margin-top: 14px; padding: 16px 20px; border: 1px solid var(--hairline);
  border-left: 3px solid var(--gold); background: var(--paper); min-height: 44px;
  font-size: 13.5px; color: var(--ink); line-height: 1.55;
}
.dca-panel strong { color: var(--navy); }

/* ---- Guide step cards (Halal Investing Guide "three questions") ---- */
.step-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin: 26px 0; background: var(--hairline); border: 1px solid var(--hairline); box-shadow: 0 1px 2px rgba(10,26,51,0.03), 0 14px 32px rgba(10,26,51,0.05); }
.step-card {
  background: #ffffff; padding: 26px 24px 24px; position: relative;
  transition: background-color .18s ease;
}
.step-card:hover { background: #fdfcfa; }
.step-card .step-no {
  font-family: var(--serif); font-size: 15px; font-weight: 700; color: var(--gold);
  letter-spacing: 0.08em; text-transform: uppercase; line-height: 1; margin-bottom: 14px;
  padding-bottom: 12px; border-bottom: 1px solid var(--hairline);
}
.step-card h3 { font-family: var(--serif); font-size: 17.5px; color: var(--navy); margin: 0 0 8px; }
.step-card p { font-size: 13.5px; color: var(--muted); line-height: 1.6; margin: 0; }

/* ---- Ratio calculator (interactive, Halal Investing Guide) ---- */
.ratio-calc { background: #ffffff; border: 1px solid var(--hairline); padding: 32px 34px; margin: 28px 0; box-shadow: 0 1px 2px rgba(10,26,51,0.03), 0 16px 36px rgba(10,26,51,0.05); }
.ratio-calc-row { margin: 20px 0; }
.ratio-calc-row label {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--sans); font-size: 13.5px; font-weight: 600; color: var(--navy); margin-bottom: 10px;
}
.ratio-calc-row label .rc-val { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--gold); font-size: 15px; }
.ratio-calc-row input[type="range"] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 6px;
  background: var(--band); outline: none; cursor: pointer; border-radius: 3px;
}
.ratio-calc-row input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 20px; height: 20px; border-radius: 50%;
  background: var(--navy); border: 3px solid #ffffff; box-shadow: 0 0 0 1px var(--hairline); cursor: pointer;
}
.ratio-calc-row input[type="range"]::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%; background: var(--navy); border: 3px solid #ffffff;
  box-shadow: 0 0 0 1px var(--hairline); cursor: pointer;
}
.ratio-calc-track { position: relative; height: 22px; background: var(--band); margin-top: 8px; }
.ratio-calc-fill { position: absolute; inset: 0 auto 0 0; background: var(--navy); transition: width .15s ease, background .15s ease; }
.ratio-calc-fill.over { background: var(--negative); }
.ratio-calc-threshold {
  position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--gold);
}
.ratio-calc-threshold::after {
  content: "33% limit"; position: absolute; top: -18px; left: 50%; transform: translateX(-50%);
  font-family: var(--mono); font-size: 9.5px; color: var(--gold); white-space: nowrap; letter-spacing: 0.03em;
}
.ratio-calc-verdict {
  margin-top: 22px; padding: 16px 18px; border-left: 3px solid var(--hairline);
  background: var(--paper); font-size: 14px; line-height: 1.5;
}
.ratio-calc-verdict.pass { border-left-color: var(--positive); }
.ratio-calc-verdict.fail { border-left-color: var(--negative); }
.ratio-calc-verdict strong { display: block; font-family: var(--serif); font-size: 16px; margin-bottom: 4px; color: var(--navy); }

/* ---- Quiz widget ---- */
.quiz-widget { background: #ffffff; border: 1px solid var(--hairline); padding: 32px 34px; margin: 28px 0; box-shadow: 0 1px 2px rgba(10,26,51,0.03), 0 16px 36px rgba(10,26,51,0.05); }
.quiz-q { margin: 0 0 26px; padding-bottom: 22px; border-bottom: 1px solid var(--hairline); }
.quiz-q:last-of-type { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.quiz-q p.qtext { font-family: var(--serif); font-size: 15.5px; color: var(--navy); margin: 0 0 12px; }
.quiz-options { display: flex; flex-direction: column; gap: 8px; }
.quiz-option {
  display: flex; align-items: flex-start; gap: 10px; text-align: left;
  padding: 11px 14px; border: 1px solid var(--hairline); background: var(--paper);
  cursor: pointer; font-family: var(--sans); font-size: 13.5px; color: var(--ink);
  transition: border-color .15s ease, background .15s ease;
}
.quiz-option:hover { border-color: var(--gold); }
.quiz-option.correct { border-color: var(--positive); background: rgba(47,111,79,0.08); }
.quiz-option.incorrect { border-color: var(--negative); background: rgba(156,59,59,0.08); }
.quiz-option:disabled { cursor: default; }
.quiz-explain {
  margin-top: 10px; font-size: 12.5px; color: var(--muted); line-height: 1.5;
  padding: 10px 12px; background: var(--paper); border-left: 2px solid var(--gold); display: none;
}
.quiz-explain.shown { display: block; }
.quiz-score {
  margin-top: 8px; padding: 20px; text-align: center; background: var(--navy); color: #ffffff; display: none;
}
.quiz-score.shown { display: block; }
.quiz-score .qs-num { font-family: var(--serif); font-size: 40px; font-weight: 700; }
.quiz-score .qs-lab { font-family: var(--sans); font-size: 13px; color: rgba(255,255,255,0.7); margin-top: 4px; }

/* ---- Stock recommendation grid (Halal Investing Guide) ---- */
.stock-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; margin: 24px 0; background: var(--hairline); border: 1px solid var(--hairline); box-shadow: 0 1px 2px rgba(10,26,51,0.03), 0 14px 32px rgba(10,26,51,0.05); }
.stock-card { background: #ffffff; padding: 20px 14px 18px; text-align: center; transition: background-color .18s ease; }
.stock-card:hover { background: #fdfcfa; }
.stock-card .sc-rank { font-family: var(--sans); font-size: 10px; font-weight: 700; color: var(--gold); letter-spacing: 0.1em; }
.stock-card .sc-ticker { font-family: var(--serif); font-size: 21px; font-weight: 700; color: var(--navy); margin: 8px 0 3px; }
.stock-card .sc-name { font-size: 11.5px; color: var(--muted); line-height: 1.35; min-height: 28px; }
.stock-card .sc-weight { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 13px; color: var(--ink); margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--hairline); }

/* ---- Practical how-to list ---- */
.howto-list { counter-reset: howto; margin: 22px 0; }
.howto-item {
  counter-increment: howto; position: relative; padding: 16px 20px 16px 58px;
  background: #ffffff; border: 1px solid var(--hairline); margin-bottom: 10px;
}
.howto-item::before {
  content: counter(howto); position: absolute; left: 18px; top: 16px;
  font-family: var(--serif); font-size: 20px; font-weight: 700; color: var(--gold);
}
.howto-item h4 { margin: 0 0 4px; font-family: var(--sans); font-size: 14.5px; font-weight: 700; color: var(--navy); }
.howto-item p { margin: 0; font-size: 13.5px; color: var(--muted); line-height: 1.5; }

@media (max-width: 860px) {
  .research-cards { grid-template-columns: 1fr; }
  .stat-figures { grid-template-columns: repeat(2, 1fr); }
  .vchain { grid-template-columns: 1fr 1fr; }
  .step-grid { grid-template-columns: 1fr; }
  .stock-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .stat-figures { grid-template-columns: 1fr; }
  .vchain { grid-template-columns: 1fr; }
  .stock-grid { grid-template-columns: 1fr 1fr; }
}

@media print {
  .deck-page { page-break-after: always; border: none; margin: 0; }
  .deck-page:last-of-type { page-break-after: auto; }
  .deck-cover { page-break-after: always; }
  .deck-toc { page-break-after: always; }
}

/* ---------- Earnings report tear-sheet header ---------- */

.earnings-snapshot {
  margin: 20px 0 28px;
  border: 1px solid var(--navy);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--navy);
}
.earnings-snapshot-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgba(255,255,255,0.1);
}
.earnings-snapshot-cell { background: var(--navy); padding: 16px 18px; }
.earnings-snapshot-label {
  display: block;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 6px;
}
.earnings-snapshot-value {
  display: block;
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.25;
}
.earnings-snapshot-value.num-pos { color: #7fd1a5; }
.earnings-snapshot-value.num-neg { color: #e08a8a; }

.rating-badge {
  display: inline-block;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 4px;
  background: rgba(197,160,89,0.18);
  color: var(--gold);
  border: 1px solid rgba(197,160,89,0.4);
}
.rating-badge-detail {
  display: block;
  font-family: var(--sans);
  font-size: 11px;
  color: #98a2b0;
  margin-top: 6px;
}

.earnings-results-table { border: 1px solid var(--hairline); }
.earnings-results-table thead th {
  background: var(--band);
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--muted);
}
.earnings-results-table td strong { font-family: var(--serif); font-size: 15px; }

.earnings-thesis-box {
  border-left: 4px solid var(--gold);
  background: #faf6ec;
}
.earnings-risk-box {
  border-left: 4px solid var(--negative);
  background: #fbf3f2;
}
.earnings-risk-box ul { margin: 0; padding-left: 20px; }
.earnings-risk-box li { margin-bottom: 8px; }
.earnings-risk-box li:last-child { margin-bottom: 0; }

@media (max-width: 700px) {
  .earnings-snapshot-row { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Catalyst Calendar ---------- */

.catalyst-calendar {
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  overflow: hidden;
  margin: 20px 0 28px;
}
.catalyst-row {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--hairline);
  background: #ffffff;
}
.catalyst-row:last-child { border-bottom: none; }
.catalyst-row.catalyst-fomc { background: var(--band); }
.catalyst-date {
  flex-shrink: 0;
  width: 64px;
  text-align: center;
  font-family: var(--serif);
}
.catalyst-date-day { display: block; font-size: 20px; font-weight: 700; color: var(--navy); line-height: 1; }
.catalyst-date-month { display: block; font-family: var(--sans); font-size: 10px; letter-spacing: 0.6px; text-transform: uppercase; color: var(--muted); margin-top: 3px; }
.catalyst-body { flex: 1; min-width: 0; }
.catalyst-title { font-family: var(--sans); font-size: 14px; font-weight: 600; color: var(--ink); }
.catalyst-title a { color: var(--ink); }
.catalyst-sub { font-family: var(--sans); font-size: 12px; color: var(--muted); margin-top: 2px; }
.catalyst-tag {
  flex-shrink: 0;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 4px;
  white-space: nowrap;
}
.catalyst-tag-earnings { background: rgba(197,160,89,0.15); color: var(--gold); border: 1px solid rgba(197,160,89,0.4); }
.catalyst-tag-macro { background: rgba(74,85,104,0.12); color: var(--navy); border: 1px solid var(--hairline); }
.catalyst-tag-unconfirmed { background: rgba(156,59,59,0.08); color: var(--negative); border: 1px solid rgba(156,59,59,0.25); }
.catalyst-tag-reported { background: rgba(47,111,79,0.1); color: var(--positive); border: 1px solid rgba(47,111,79,0.3); }
.catalyst-row-reported { opacity: 0.82; }

@media (max-width: 700px) {
  .catalyst-row { flex-wrap: wrap; }
  .catalyst-date { width: auto; text-align: left; display: flex; align-items: baseline; gap: 6px; }
}

@media print {
  .nav-toggle, .scroll-cue, .hero-video, .cta-video-band .hero-overlay,
  .table-controls, .btn, .newsletter-form, video {
    display: none !important;
  }

  .site-header {
    position: static;
    background: #ffffff !important;
    border-bottom: 2px solid #000;
    box-shadow: none;
  }
  .brand, .brand .brand-accent, .nav a { color: #000 !important; }
  .nav { gap: 12px; }
  .nav .nav-divider { display: none; }

  body { background: #ffffff; font-size: 12pt; color: #000; }
  .wrap, .wrap-wide { max-width: 100%; }

  .hero-band { min-height: 0; background: #fff !important; color: #000 !important; padding: 20px 0; }
  .hero-chart-wrap { display: none; }
  .hero-chart-caption, .hero-chart-legend { display: none; }

  .reveal { opacity: 1 !important; transform: none !important; }

  .table-scroll { overflow: visible; }
  table { font-size: 10pt; }

  a { color: #000; text-decoration: underline; }
  .card:hover { box-shadow: none; transform: none; }

  .callout, .card, .stat-row, .featured { border: 1px solid #999; box-shadow: none; }

  .site-footer { border-top: 1px solid #000; }
}

/* ================================================================
   Holdings page — data-dense dashboard redesign
   Scoped to body.page-holdings so the shared .stat-row/.table
   components used on other pages (compliance, tearsheet, etc.)
   are unaffected. Classes referenced here that don't already
   appear elsewhere in this file (holdings-matrix, corr-matrix,
   exposure-*, stress-*, liquidity-terminal) are unique to
   holdings.html, so their base rules above are edited freely too.
   ================================================================ */

body.page-holdings .stat-row {
  border: none;
  background: var(--hairline);
  gap: 1px;
  box-shadow: 0 1px 2px rgba(10,26,51,0.05);
}

body.page-holdings .stat-row .stat,
body.page-holdings .liquidity-terminal-cell {
  position: relative;
  overflow: hidden;
}

body.page-holdings .stat-row .stat {
  background: #ffffff;
  transition: transform .15s ease, box-shadow .15s ease;
}

body.page-holdings .stat-row .stat::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--gold), var(--navy-soft));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .2s ease;
}

body.page-holdings .stat-row .stat:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(10,26,51,0.09);
  z-index: 1;
}

body.page-holdings .stat-row .stat:hover::before { transform: scaleX(1); }

body.page-holdings .stat .num,
body.page-holdings .exposure-pct,
body.page-holdings .liquidity-terminal-value,
body.page-holdings .holdings-matrix td,
body.page-holdings .thematic-basket-return,
body.page-holdings .thematic-basket-compare-value {
  font-variant-numeric: tabular-nums;
}

/* ---- Exposure bars: sector color ramp, brand-muted (not rainbow) ---- */

body.page-holdings .exposure-row {
  padding: 8px 0;
  --exp-color: var(--gold);
}
body.page-holdings .exposure-row:nth-of-type(1)  { --exp-color: var(--navy); }
body.page-holdings .exposure-row:nth-of-type(2)  { --exp-color: var(--gold); }
body.page-holdings .exposure-row:nth-of-type(3)  { --exp-color: #5b7c99; }
body.page-holdings .exposure-row:nth-of-type(4)  { --exp-color: #2f6f4f; }
body.page-holdings .exposure-row:nth-of-type(5)  { --exp-color: #6b4c6b; }
body.page-holdings .exposure-row:nth-of-type(6)  { --exp-color: #a86b3f; }
body.page-holdings .exposure-row:nth-of-type(7)  { --exp-color: #4a5568; }
body.page-holdings .exposure-row:nth-of-type(8)  { --exp-color: #3f7f7a; }
body.page-holdings .exposure-row:nth-of-type(9)  { --exp-color: #9c3b3b; }
body.page-holdings .exposure-row:nth-of-type(10) { --exp-color: #7a8f6e; }

body.page-holdings .exposure-label {
  display: flex;
  align-items: center;
  gap: 8px;
}
body.page-holdings .exposure-label::before {
  content: '';
  width: 9px; height: 9px;
  border-radius: 2px;
  flex: 0 0 auto;
  background: var(--exp-color);
}
body.page-holdings .exposure-track { height: 12px; background: rgba(74,85,104,0.07); }
body.page-holdings .exposure-fill {
  background: var(--exp-color);
  transition: width .4s ease;
}

/* ---- Holdings matrix: sticky header, right-aligned figures, conviction rail ---- */

body.page-holdings #holdings-table thead th {
  position: sticky;
  top: 0;
  background: var(--paper);
  z-index: 2;
}

body.page-holdings #holdings-table th:nth-child(4),
body.page-holdings #holdings-table th:nth-child(5),
body.page-holdings #holdings-table th:nth-child(6),
body.page-holdings #holdings-table td:nth-child(4),
body.page-holdings #holdings-table td:nth-child(5),
body.page-holdings #holdings-table td:nth-child(6) {
  text-align: right;
}

body.page-holdings #holdings-table tbody tr {
  border-left: 3px solid transparent;
}
body.page-holdings #holdings-table tbody tr:has(.conv-high) { border-left-color: var(--positive); }
body.page-holdings #holdings-table tbody tr:has(.conv-medium) { border-left-color: var(--gold); }
body.page-holdings #holdings-table tbody tr:has(.conv-low) { border-left-color: var(--muted); }

/* ---- Stress-test: segmented control instead of file tabs ---- */

body.page-holdings .stress-toggle-row {
  background: rgba(74,85,104,0.07);
  padding: 4px;
  border-radius: 10px;
  gap: 4px;
  margin-bottom: 10px;
}
body.page-holdings .stress-toggle {
  border: none;
  border-radius: 7px;
  background: transparent;
}
body.page-holdings .stress-toggle:hover { background: rgba(197,160,89,0.14); }
body.page-holdings .stress-toggle.active {
  background: var(--navy);
  box-shadow: 0 2px 8px rgba(10,26,51,0.25);
}
body.page-holdings .stress-panel {
  border-radius: var(--radius);
  border-top: 3px solid var(--gold);
}

@media (max-width: 700px) {
  body.page-holdings .stress-toggle-row { flex-direction: column; }
  body.page-holdings .stress-toggle { border-radius: 7px; }
}

/* ---- Correlation matrix: subtle frame + rounded container ---- */

body.page-holdings .table-scroll:has(.corr-matrix) {
  padding: 18px;
  background: #ffffff;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
}

@media (prefers-reduced-motion: reduce) {
  body.page-holdings .stat-row .stat,
  body.page-holdings .exposure-fill,
  body.page-holdings .stat-row .stat::before {
    transition: none;
  }
}

/* ---------- 52-Week Range indicator (position pages) ---------- */

.range-52w {
  background: #ffffff;
  border: 1px solid var(--hairline);
  padding: 18px 22px 16px;
  margin: 18px 0 24px;
}

.range-52w-labels {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 10px;
}

.range-52w-label-low,
.range-52w-label-high {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.range-52w-label-high { align-items: flex-end; text-align: right; }

.range-52w-label-low small,
.range-52w-label-high small {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--muted);
  opacity: 0.75;
}

.range-52w-label-current {
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 700;
  color: var(--navy);
}

.range-52w-label-current.range-52w-hot { color: var(--positive); }
.range-52w-label-current.range-52w-cold { color: var(--negative); }

.range-52w-track {
  position: relative;
  height: 6px;
  border-radius: 4px;
  background: linear-gradient(to right, var(--negative) 0%, var(--hairline) 18%, var(--hairline) 82%, var(--positive) 100%);
  opacity: 0.9;
}

.range-52w-marker {
  position: absolute;
  top: 50%;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--navy);
  border: 2.5px solid #ffffff;
  box-shadow: 0 0 0 1.5px var(--navy), 0 2px 5px rgba(10,26,51,0.35);
  transform: translate(-50%, -50%);
}

.range-52w-note {
  margin: 10px 0 0;
  font-family: var(--sans);
  font-size: 12.5px;
  color: var(--muted);
}

/* ================================================================
   About page redesign — editorial, personal, quietly premium
   Scoped to body.page-about. Classes unique to who-we-are.html
   (about-monogram-ring, bio-row, belief-list, process-steps,
   pull-quote, about-hero) are edited freely; .band-*/.section,
   .card-grid/.card, and .callout are shared with other pages
   (index.html, etc.) so their enhancements here stay scoped.
   ================================================================ */

body.page-about .about-monogram-ring {
  box-shadow: 0 0 0 6px rgba(197,160,89,0.06);
  transition: box-shadow .3s ease;
}
body.page-about .about-hero:hover .about-monogram-ring {
  box-shadow: 0 0 0 10px rgba(197,160,89,0.09);
}

/* Bio row: frame the personal introduction as a quiet card rather
   than a bare flex row sitting directly on the section band. */
body.page-about .bio-row {
  background: #ffffff;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 26px 30px;
  box-shadow: 0 2px 10px rgba(10,26,51,0.05);
}
body.page-about .bio-row .monogram {
  box-shadow: 0 0 0 4px rgba(197,160,89,0.1);
  width: 60px;
  height: 60px;
  font-size: 21px;
}

/* Pull quote: give the opening statement a top rule instead of
   floating unanchored between two section bands. */
body.page-about .pull-quote { padding-top: 8px; }
body.page-about .pull-quote::before {
  transition: transform .2s ease;
}
body.page-about section:hover .pull-quote::before { transform: translateY(-2px); }

/* Belief list: numerals in a proper ring badge instead of loose
   serif digits, plus a hover lift consistent with the card grid. */
body.page-about .belief-list li {
  position: relative;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
body.page-about .belief-list li:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(10,26,51,0.08);
  border-color: rgba(197,160,89,0.4);
}
body.page-about .belief-list li::before {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(197,160,89,0.35);
  background: rgba(197,160,89,0.07);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

/* Process steps: connect the four steps with a thin thread so the
   "process" reads as a sequence, not four disconnected tiles. */
body.page-about .process-steps { position: relative; }
body.page-about .process-steps li {
  position: relative;
  transition: transform .15s ease, box-shadow .15s ease;
}
body.page-about .process-steps li:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.28);
}
@media (min-width: 901px) {
  body.page-about .process-steps li:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 24px;
    right: -20px;
    width: 20px;
    height: 1px;
    background: rgba(197,160,89,0.4);
  }
}

/* Admissions Q&A card grid: quote-mark treatment on the question,
   matching the .pull-quote language used earlier on the page. */
body.page-about .card-grid .card { position: relative; overflow: hidden; }
body.page-about .card-grid .card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--gold), var(--navy-soft));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .2s ease;
}
body.page-about .card-grid .card:hover::before { transform: scaleX(1); }
body.page-about .card-grid .card h3 { color: var(--navy); }

@media (prefers-reduced-motion: reduce) {
  body.page-about .belief-list li,
  body.page-about .process-steps li,
  body.page-about .card-grid .card::before,
  body.page-about .about-monogram-ring {
    transition: none;
  }
}

/* ================================================================
   Policy page redesign — read like a governing document, not a blog post
   Scoped to body.page-policy. .compliance-rule and .callout are
   shared with disclosures.html and other pages, so their tweaks
   here stay scoped; the numbered h2 sections and revision-history
   table are unique to ips.html markup and get freer treatment.
   ================================================================ */

/* Numbered sections read as clauses in a document: a hairline
   rule ahead of each one, generous air, no rule before the first. */
body.page-policy main.wrap > h2 {
  border-top: 1px solid var(--hairline);
  padding-top: 36px;
  margin-top: 52px;
}
body.page-policy main.wrap > h2:first-of-type {
  border-top: none;
  padding-top: 0;
  margin-top: 32px;
}

/* The standalone mid-document blockquote ("The purpose of a
   policy...") gets the pull-quote treatment instead of a plain
   italic sidebar rule, since it's the page's thesis statement. */
body.page-policy main.wrap > blockquote {
  font-family: var(--serif);
  font-style: normal;
  font-size: 24px;
  line-height: 1.5;
  color: var(--navy);
  text-align: center;
  max-width: 46ch;
  margin: 44px auto;
  padding: 0;
  border-left: none;
}
body.page-policy main.wrap > blockquote::before {
  content: "\201C";
  display: block;
  font-size: 52px;
  line-height: 1;
  color: var(--gold);
  margin-bottom: 6px;
}

/* Compliance rules: label them like clauses, add a hover cue since
   they're referenced elsewhere (Compliance Ledger cross-links). */
body.page-policy .compliance-rule {
  position: relative;
  padding-left: 30px;
  transition: border-color .15s ease;
}
body.page-policy .compliance-rule-name::before {
  content: 'RULE';
  display: inline-block;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  color: rgba(197,160,89,0.7);
  border: 1px solid rgba(197,160,89,0.4);
  border-radius: 3px;
  padding: 2px 6px;
  margin-right: 10px;
  vertical-align: 2px;
}

/* "Quotes I keep coming back to": give each its own quote-mark
   treatment and author byline styling, so five stacked .callouts
   don't read identically to the compliance-rule boxes above them. */
body.page-policy .callout.thesis-box {
  border-left-color: var(--gold);
  background: linear-gradient(180deg, #ffffff 0%, var(--paper) 100%);
}
body.page-policy .callout.thesis-box blockquote {
  font-family: var(--serif);
  font-size: 19px;
  font-style: normal;
  color: var(--navy);
  border-left: none;
  padding: 0;
  margin: 0 0 4px;
}
body.page-policy .callout.thesis-box blockquote::before {
  content: "\201C";
  color: var(--gold);
  font-size: 30px;
  line-height: 0;
  vertical-align: -8px;
  margin-right: 2px;
}
body.page-policy .callout.thesis-box > p:first-of-type {
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 14px;
}

/* Portfolio structure & revision-history tables: tabular figures
   on the Limit/Date columns, sticky-free but with a clearer head. */
body.page-policy table thead th { border-bottom-width: 2px; }
body.page-policy table td:last-child { color: var(--ink); }

@media (max-width: 620px) {
  body.page-policy main.wrap > h2 { padding-top: 28px; margin-top: 40px; }
}

/* ---------- Short Interest Monitor (position pages) ---------- */

.short-interest {
  background: #ffffff;
  border: 1px solid var(--hairline);
  padding: 18px 22px 16px;
  margin: 18px 0 24px;
}

.si-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.si-cell { display: flex; flex-direction: column; gap: 4px; }

.si-label {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--muted);
}

.si-value {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 700;
  color: var(--navy);
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.si-trend {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
}

.si-up { color: var(--negative); }
.si-down { color: var(--positive); }
.si-flat, .si-muted { color: var(--muted); font-weight: 400; }

.si-tag {
  display: inline-block;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
  vertical-align: middle;
}

.si-elevated { color: var(--negative); background: rgba(156,59,59,0.1); }
.si-normal { color: var(--positive); background: rgba(47,111,79,0.1); }
.si-low { color: var(--muted); background: rgba(74,85,104,0.08); }

.si-note {
  margin: 12px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--hairline);
  font-family: var(--sans);
  font-size: 12.5px;
  color: var(--muted);
}

@media (max-width: 560px) {
  .si-row { grid-template-columns: 1fr; gap: 14px; }
}

/* ================================================================
   Newsletter page redesign — a mailing-list page that reads as
   product, not a bare form bolted onto the bottom of a post.
   Scoped to body.page-newsletter. .stat-band, .faq-list/.faq-item,
   and .methodology-grid/.method-item are shared with index.html,
   so their enhancements stay scoped; .signup/.signup-band and the
   "What You'll Get" three-col cards are unique to this page and
   get freer treatment (button color already updated globally above
   since .signup itself only appears here).
   ================================================================ */

/* Publishing-facts stat band: same card-hover language used on the
   Holdings/About redesigns, so the three pages feel like one system. */
body.page-newsletter .stat-band .stat {
  position: relative;
  transition: transform .15s ease, box-shadow .15s ease;
}
body.page-newsletter .stat-band .stat::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--gold), var(--navy-soft));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .2s ease;
}
body.page-newsletter .stat-band .stat:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(10,26,51,0.07);
  z-index: 1;
}
body.page-newsletter .stat-band .stat:hover::before { transform: scaleX(1); }

/* "What You'll Get" cards are informational, not links (cursor:
   default in the markup) — a static top rule instead of a hover
   reveal signals content grouping without implying click affordance. */
body.page-newsletter .card-grid.three-col .card {
  border-top: 3px solid var(--gold);
  transition: transform .15s ease, box-shadow .15s ease;
}
body.page-newsletter .card-grid.three-col .card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(10,26,51,0.07);
}

/* Method items ("How This Works"): lift + gold thickening on hover,
   consistent with the belief-list treatment on the About redesign. */
body.page-newsletter .methodology-grid .method-item {
  transition: transform .15s ease, border-color .15s ease;
}
body.page-newsletter .methodology-grid .method-item:hover {
  transform: translateY(-2px);
  border-top-color: #bfa878;
}

/* Signup band: give the form real product weight — deeper shadow,
   a subtle gold-glow focus ring instead of a flat navy border. */
body.page-newsletter .signup-band .signup {
  box-shadow: 0 24px 60px rgba(0,0,0,0.4);
  border-top-width: 5px;
}
/* FAQ: row highlight on hover so the accordion reads as interactive
   before the user notices the +/- glyph. */
body.page-newsletter .faq-item {
  transition: background-color .15s ease;
}
body.page-newsletter .faq-item:hover { background: rgba(197,160,89,0.04); }
body.page-newsletter .faq-item summary { transition: color .15s ease; }

@media (prefers-reduced-motion: reduce) {
  body.page-newsletter .stat-band .stat,
  body.page-newsletter .stat-band .stat::before,
  body.page-newsletter .card-grid.three-col .card,
  body.page-newsletter .methodology-grid .method-item,
  body.page-newsletter .faq-item {
    transition: none;
  }
}

/* ================================================================
   Watchlist page redesign — same data-dense dashboard language as
   the Holdings redesign, since this is structurally its sibling
   (a sortable-in-spirit table of names + a methodology writeup).
   Scoped to body.page-watchlist. .screen-tier and .spark-cell are
   unique to this page and get freer treatment; .catalysts-list is
   shared with index.html so its hover polish stays scoped.
   ================================================================ */

/* Quantitative screening protocol: numeral badge in a ring (same
   language as the About page's belief-list) instead of bare digits,
   plus a hover lift so four static tiers read as a checklist. */
body.page-watchlist .screen-tier {
  transition: transform .15s ease, background-color .15s ease;
  border-radius: var(--radius);
  padding-left: 10px;
  padding-right: 10px;
  margin-left: -10px;
  margin-right: -10px;
}
body.page-watchlist .screen-tier:hover {
  background: rgba(197,160,89,0.05);
  transform: translateX(2px);
}
body.page-watchlist .screen-tier::before {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(197,160,89,0.35);
  background: rgba(197,160,89,0.07);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

/* Watchlist matrix: sticky header, right-aligned/tabular Price and
   Day columns, conviction-colored row rail — mirrors the Holdings
   redesign so the two "position tables" on the site feel like one
   system rather than two different tables that happen to look alike. */
body.page-watchlist #watchlist-table thead th {
  position: sticky;
  top: 0;
  background: var(--paper);
  z-index: 2;
}
body.page-watchlist #watchlist-table th:nth-child(4),
body.page-watchlist #watchlist-table th:nth-child(5),
body.page-watchlist #watchlist-table td:nth-child(4),
body.page-watchlist #watchlist-table td:nth-child(5) {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
body.page-watchlist #watchlist-table tbody tr {
  border-left: 3px solid transparent;
}
body.page-watchlist #watchlist-table tbody tr:has(.conv-high) { border-left-color: var(--positive); }
body.page-watchlist #watchlist-table tbody tr:has(.conv-medium) { border-left-color: var(--gold); }
body.page-watchlist #watchlist-table tbody tr:has(.conv-low) { border-left-color: var(--muted); }

/* Sparkline cells: a quiet rounded well instead of the SVG floating
   directly on the row background. */
body.page-watchlist .spark-cell {
  background: rgba(74,85,104,0.03);
  border-radius: 4px;
}

/* Catalysts list (shared with index.html): row highlight on hover,
   consistent with the FAQ treatment on the Newsletter redesign. */
body.page-watchlist .catalyst-item {
  transition: background-color .15s ease;
  border-radius: 6px;
  padding-left: 10px;
  padding-right: 10px;
  margin-left: -10px;
  margin-right: -10px;
}
body.page-watchlist .catalyst-item:hover { background: rgba(197,160,89,0.05); }

/* Intro callout: gold top accent to match the card/tile language
   used across the other redesigned pages. */
body.page-watchlist .callout {
  border-top: 3px solid var(--gold);
  border-radius: var(--radius);
}

@media (prefers-reduced-motion: reduce) {
  body.page-watchlist .screen-tier,
  body.page-watchlist .catalyst-item {
    transition: none;
  }
}

/* ================================================================
   Research & Tools page redesign — a catalog of distinct work, not
   a repeated card template. Every class here (research-group,
   research-card, chip, dek, card-foot) is unique to research.html,
   so these rules extend the base definitions directly rather than
   scoping under a body class — there's nothing else on the site
   to protect from the change.
   ================================================================ */

/* Category color-coding: each chip's topic gets its own muted,
   brand-consistent accent (reusing the same curated palette as the
   Holdings sector bars), and the card borrows that color for its
   hover accent — so "what kind of work is this" reads at a glance
   before the reader gets to the dek. */
.research-card:has(.chip-leverage)    { --accent: #a86b3f; }
.research-card:has(.chip-ai)          { --accent: #3f7f7a; }
.research-card:has(.chip-portfolio)   { --accent: #6b4c6b; }
.research-card:has(.chip-risk)        { --accent: #9c3b3b; }
.research-card:has(.chip-ethics)      { --accent: #2f6f4f; }
.research-card:has(.chip-derivatives) { --accent: #5b7c99; }
.research-card:has(.chip-live)        { --accent: #3b6b9c; }
.research-card:has(.chip-doc)         { --accent: #8a7327; }
.research-card:has(.chip-meta)        { --accent: #6b6b6b; }

/* ---- Comparisons hub ---- */
.compare-search-wrap {
  position: relative;
  max-width: 420px;
  margin: 0 0 28px;
}
.compare-search-wrap input {
  width: 100%;
  font-family: var(--sans);
  font-size: 15px;
  padding: 12px 16px 12px 40px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: #ffffff;
  color: var(--ink);
}
.compare-search-wrap input:focus { outline: none; border-color: var(--gold); }
.compare-search-wrap svg {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  color: var(--muted); pointer-events: none;
}
.compare-count { font-family: var(--mono); font-size: 12px; color: var(--muted); margin: -18px 0 24px; }
.compare-chip-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.compare-ticker-chip {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em;
  color: var(--navy); background: rgba(10,26,51,0.06);
  border-radius: 3px; padding: 3px 7px;
}
.compare-card.compare-hidden { display: none; }
.compare-empty { display: none; padding: 40px 0; text-align: center; color: var(--muted); font-family: var(--sans); }
.compare-empty.active { display: block; }

/* ---- Rebalance Visualizer ---- */
.rv-bars { display: flex; flex-direction: column; gap: 18px; }
.rv-row { display: grid; grid-template-columns: 220px 1fr 90px; align-items: center; gap: 16px; }
.rv-row-label { font-family: var(--sans); font-size: 14px; font-weight: 600; color: var(--navy); }
.rv-row-sub { display: block; font-family: var(--mono); font-size: 11px; font-weight: 400; color: var(--muted); margin-top: 2px; }
.rv-track { position: relative; height: 22px; background: var(--hairline); border-radius: 3px; overflow: visible; }
.rv-fill { position: absolute; top: 0; left: 0; height: 100%; background: var(--gold); border-radius: 3px; transition: width .3s ease; }
.rv-fill.rv-over { background: var(--negative); }
.rv-cap-marker { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--negative); }
.rv-cap-marker::after {
  content: attr(data-cap-label);
  position: absolute; top: -18px; left: 50%; transform: translateX(-50%);
  font-family: var(--mono); font-size: 10px; color: var(--negative); white-space: nowrap;
}
.rv-row-status { font-family: var(--mono); font-size: 12px; text-align: right; color: var(--positive); }
.rv-row-status.rv-status-nocap { color: var(--muted); }
.rv-row-status.rv-status-breach { color: var(--negative); font-weight: 700; }
@media (max-width: 700px) {
  .rv-row { grid-template-columns: 1fr; gap: 6px; }
  .rv-row-status { text-align: left; }
  .rv-track { margin-top: 20px; }
  .rv-cap-marker::after { top: -18px; }
}

.research-card .chip {
  border-color: color-mix(in srgb, var(--accent, var(--gold)) 55%, transparent);
  color: var(--accent, var(--gold));
}

.research-card {
  position: relative;
  overflow: hidden;
}
.research-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--accent, var(--gold));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .2s ease;
}
.research-card:hover::before { transform: scaleX(1); }
.research-card:hover { border-color: rgba(10,26,51,0.12); }

/* Arrow nudges forward on hover — a small, standard affordance for
   "this card goes somewhere" beyond the existing lift + shadow. */
.research-card .go { display: inline-block; transition: transform .15s ease; }
.research-card:hover .go { transform: translateX(3px); }

/* Group header: icon differentiates Studies (reading) from Tools
   (interactive) before the reader parses either heading's text. */
.research-group-head { gap: 12px; }
.research-group-head h2 {
  display: flex;
  align-items: center;
  gap: 10px;
}
.research-group-head .group-icon {
  flex: 0 0 auto;
  color: var(--gold);
  opacity: 0.85;
}

@media (prefers-reduced-motion: reduce) {
  .research-card,
  .research-card::before,
  .research-card .go {
    transition: none;
  }
}

/* ---- Research landing: featured pair ---- */
.research-featured-head {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--muted); margin: 0 0 14px;
}
.research-featured { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-bottom: 44px; }
.research-card-featured {
  background: var(--navy); border: 1px solid var(--navy); color: #fff;
  padding: 32px 30px 26px;
}
.research-card-featured .chip {
  border-color: rgba(255,255,255,0.35); color: var(--gold-light, #e2c789);
}
.research-card-featured h3 { color: #fff; font-size: 24px; }
.research-card-featured .dek { color: rgba(255,255,255,0.72); }
.research-card-featured .card-foot { color: rgba(255,255,255,0.5); }
.research-card-featured .go { color: var(--gold-light, #e2c789); }
.research-card-featured::before { background: var(--gold-light, #e2c789); }
@media (max-width: 900px) { .research-featured { grid-template-columns: 1fr; } }

/* ---- Research landing: category filter ---- */
.research-filter-row {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 0 0 28px;
}
.research-card.cat-hidden { display: none; }
.research-group.group-hidden { display: none; }

/* ================================================================
   News page redesign — a portfolio-event log, not a generic blog
   archive. Scoped to body.page-news since .letter-list/.letter-date
   /.letter-title/.letter-summary are shared with letters.html,
   opinion.html, and search.html. .letter-tickers is new markup
   added only on news.html (each item's date line already listed
   the tickers as plain text; it's now its own element so the
   affected names can be pulled out as scannable pills instead of
   buried in a date string).
   ================================================================ */

/* Ticker pills: the one thing a reader scanning this page actually
   wants first — which positions moved — gets visual weight instead
   of reading as an afterthought appended to the date. */
body.page-news .letter-date {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  background: none;
  padding: 0;
}
body.page-news .letter-date > .letter-tickers {
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: var(--navy);
  background: rgba(197,160,89,0.14);
  border: 1px solid rgba(197,160,89,0.35);
  border-radius: 3px;
  padding: 2px 7px;
  text-transform: none;
}
body.page-news .letter-list li:first-child .letter-date > .letter-tickers {
  color: var(--gold);
  background: rgba(197,160,89,0.14);
  border-color: rgba(197,160,89,0.4);
}

/* Archive cards: a thin left rail that lights up gold on hover,
   reinforcing "this is a dated log entry" beyond the existing
   lift + shadow, consistent with the row-rail language used on
   the Holdings/Watchlist tables. */
body.page-news .letter-list li {
  border-left: 3px solid transparent;
  transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease, border-left-color .15s ease;
}
body.page-news .letter-list li:hover { border-left-color: var(--gold); }
body.page-news .letter-list li:first-child:hover { border-left-color: rgba(197,160,89,0.6); }

@media (prefers-reduced-motion: reduce) {
  body.page-news .letter-list li { transition: none; }
}

/* ================================================================
   Opinion page redesign — visually distinct from News even though
   both use .letter-list, since the page's whole point is "this is
   argument, not reporting." Scoped to body.page-opinion since
   .letter-list, .tag-filter-row/.tag-pill, .card-grid.two-col, and
   .postmortem-box are shared with letters.html (and ips.html for
   the card grid). .letter-kind is new markup added only here —
   the literal, already-existing "Analysis" label per item is now
   its own element so it can carry a badge treatment.
   ================================================================ */

/* Tag filter: each topic pill gets a color dot matching the same
   curated palette used for Research chips and Holdings sectors —
   the taxonomy repeats across the site, so its color should too. */
body.page-opinion .tag-pill { display: inline-flex; align-items: center; gap: 7px; }
body.page-opinion .tag-pill::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--tag-color, transparent);
  flex: 0 0 auto;
}
body.page-opinion .tag-pill[data-tag="all"]::before { display: none; }
body.page-opinion .tag-pill[data-tag="semiconductors"] { --tag-color: #a86b3f; }
body.page-opinion .tag-pill[data-tag="ai-cloud"]       { --tag-color: #3f7f7a; }
body.page-opinion .tag-pill[data-tag="power"]          { --tag-color: #5b7c99; }
body.page-opinion .tag-pill[data-tag="portfolio"]      { --tag-color: #6b4c6b; }
body.page-opinion .tag-pill.active::before { background: var(--gold); }

/* Intro callouts ("How this differs from News" / "What tends to
   show up here"): gold top accent + hover lift, matching the card
   language used everywhere else on the redesigned pages. */
body.page-opinion .postmortem-box {
  border-left-color: var(--gold);
  border-top: 3px solid var(--gold);
  transition: transform .15s ease, box-shadow .15s ease;
}
body.page-opinion .postmortem-box:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(10,26,51,0.08);
}

/* "Analysis" type-label: a quiet badge instead of plain text after
   the date, so an Opinion entry reads as a distinct content type
   from a News entry at a glance, not just by page context. */
body.page-opinion .letter-date {
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  padding: 0;
}
body.page-opinion .letter-date > .letter-kind {
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--muted);
  background: rgba(74,85,104,0.08);
  border: 1px solid var(--hairline);
  border-radius: 3px;
  padding: 2px 7px;
}
body.page-opinion .letter-list li:first-child .letter-date > .letter-kind {
  color: #dcd3c2;
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.18);
}

/* Archive cards: same hover rail as the News redesign, in the
   muted slate/navy family instead of gold — Opinion is argument,
   not a dated event log, and the color difference says so without
   another label. */
body.page-opinion .letter-list li {
  border-left: 3px solid transparent;
  transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease, border-left-color .15s ease;
}
body.page-opinion .letter-list li:hover { border-left-color: var(--navy-soft); }
body.page-opinion .letter-list li:first-child:hover { border-left-color: rgba(197,160,89,0.6); }

@media (prefers-reduced-motion: reduce) {
  body.page-opinion .postmortem-box,
  body.page-opinion .letter-list li {
    transition: none;
  }
}

/* ================================================================
   Letters page redesign — the flagship archive of record. Scoped
   to body.page-letters since .letter-list, .tag-filter-row/.tag-pill,
   .card-grid.two-col, .postmortem-box, and .badge are all shared
   elsewhere (News, Opinion, and the badge system used site-wide for
   compliance/status flags). .accountability-counter and
   .strategy-briefing are unique to this page and get freer
   treatment. badge-interim/badge-monthly/badge-founding are new
   modifier classes added only on this page's existing badges —
   the entry-type text was already there, this just makes it
   stylable per type instead of one flat badge look.
   ================================================================ */

/* Entry-type badges: Monthly Positioning (the flagship, full letter)
   reads as the most weighted; Interim Notes are frequent and lighter;
   the one-off Founding Note gets its own quiet treatment. */
body.page-letters .letter-date { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
body.page-letters .badge.badge-interim {
  color: var(--muted);
  border-color: var(--hairline);
  background: rgba(74,85,104,0.06);
}
body.page-letters .badge.badge-monthly {
  color: var(--navy);
  border-color: var(--gold);
  background: rgba(197,160,89,0.14);
  font-weight: 700;
}
body.page-letters .badge.badge-founding {
  color: var(--navy);
  border-color: var(--navy);
  background: rgba(10,26,51,0.06);
}
body.page-letters .letter-list li:first-child .badge.badge-interim {
  color: #dcd3c2;
  border-color: rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.08);
}

/* Tag filter: topic tags share the same color taxonomy introduced
   on the Research and Opinion redesigns (semiconductors/ai-cloud
   reuse the identical hues); entry-type tags (Monthly/Interim) stay
   neutral like "All" since they describe format, not subject. */
body.page-letters .tag-pill { display: inline-flex; align-items: center; gap: 7px; }
body.page-letters .tag-pill::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--tag-color, transparent);
  flex: 0 0 auto;
}
body.page-letters .tag-pill[data-tag="semiconductors"] { --tag-color: #a86b3f; }
body.page-letters .tag-pill[data-tag="ai-cloud"]        { --tag-color: #3f7f7a; }
body.page-letters .tag-pill[data-tag="macro"]           { --tag-color: #2f6f4f; }
body.page-letters .tag-pill.active::before { background: var(--gold); }

/* Intro callouts (post-mortem structure / archive organization):
   same gold top-accent + hover lift used across every other
   redesigned page's callout cards. */
body.page-letters .postmortem-box {
  border-left-color: var(--gold);
  border-top: 3px solid var(--gold);
  transition: transform .15s ease, box-shadow .15s ease;
}
body.page-letters .postmortem-box:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(10,26,51,0.08);
}

/* Archive cards: gold hover rail, consistent with the News redesign
   — Letters and News are both dated records, unlike Opinion's
   argument-toned slate. */
body.page-letters .letter-list li {
  border-left: 3px solid transparent;
  transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease, border-left-color .15s ease;
}
body.page-letters .letter-list li:hover { border-left-color: var(--gold); }
body.page-letters .letter-list li:first-child:hover { border-left-color: rgba(197,160,89,0.6); }

/* Strategy Briefing card: lift on hover so the navy CTA band reads
   as a clickable destination, not just a static banner. */
body.page-letters .strategy-briefing {
  transition: transform .15s ease, box-shadow .15s ease;
}
body.page-letters .strategy-briefing:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(10,26,51,0.18);
}

/* Accountability counter: subtle hover per cell, echoing the stat-
   tile language from Holdings/Newsletter without softening the
   deliberately alarming red top border. */
body.page-letters .accountability-counter-cell {
  transition: background-color .15s ease;
}
body.page-letters .accountability-counter-cell:hover {
  background: rgba(156,59,59,0.03);
}

@media (prefers-reduced-motion: reduce) {
  body.page-letters .postmortem-box,
  body.page-letters .letter-list li,
  body.page-letters .strategy-briefing,
  body.page-letters .accountability-counter-cell {
    transition: none;
  }
}

/* ---------- WSJ-style drop cap for the lead paragraph of long-form articles ---------- */

p.lede {
  font-size: 19px;
  line-height: 1.65;
}

p.lede::first-letter {
  font-family: var(--serif);
  font-size: 64px;
  font-weight: 700;
  line-height: 0.78;
  float: left;
  padding: 5px 8px 0 0;
  margin-top: 2px;
  color: var(--navy);
}

@media (max-width: 620px) {
  p.lede::first-letter { font-size: 48px; padding: 3px 6px 0 0; }
}

/* ---------- Editor's Note (homepage) ---------- */

.editors-note {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  background: #ffffff;
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--copper);
  border-radius: var(--radius);
  padding: 24px 28px;
  margin: 24px 0 32px;
  box-shadow: 0 2px 10px rgba(10,26,51,0.05);
}

.editors-note-mark {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--navy) 0%, var(--emerald) 100%);
  color: var(--gold);
  font-family: var(--serif);
  font-weight: 700;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.editors-note-body { flex: 1 1 auto; min-width: 0; }

.editors-note-label {
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 6px;
}

.editors-note-text {
  font-family: var(--serif);
  font-size: 17px;
  font-style: italic;
  line-height: 1.55;
  color: var(--navy);
  margin: 0 0 8px;
}

.editors-note-sig {
  font-family: var(--sans);
  font-size: 12.5px;
  color: var(--muted);
}
.editors-note-sig strong { color: var(--ink); font-style: normal; }

@media (max-width: 560px) {
  .editors-note { flex-direction: column; gap: 12px; padding: 20px 22px; }
}

/* ================================================================
   Earnings page redesign — a coverage-desk board, not a plain list.
   .catalyst-calendar/.catalyst-row, .rating-badge, .compare-table,
   #earnings-table, and #consensus-matrix are all unique to
   earnings.html, so these rules extend the base definitions
   directly. .callout is shared site-wide, so that one rule is
   scoped to body.page-earnings. rating-badge-hold/-buy/-sell are
   new modifier classes added only on this page's existing badges —
   every rating already read "HOLD" or "BUY" as plain text; a single
   gold badge style for both meant a BUY call didn't visually stand
   out from the other 26 HOLDs on the monitoring board, which is
   exactly the kind of signal a coverage board exists to surface.
   ================================================================ */

body.page-earnings .callout {
  border-top: 3px solid var(--gold);
  border-radius: var(--radius);
}

/* Rating badges: BUY now reads as a genuine positive call (green,
   same family as num-pos/badge-ok elsewhere), HOLD stays the quiet
   neutral gold, SELL is reserved but defined for when it's needed. */
.rating-badge-hold {
  background: rgba(74,85,104,0.1);
  color: var(--muted);
  border-color: var(--hairline);
}
.rating-badge-buy {
  background: rgba(47,111,79,0.14);
  color: var(--positive);
  border-color: rgba(47,111,79,0.35);
}
.rating-badge-sell {
  background: rgba(156,59,59,0.1);
  color: var(--negative);
  border-color: rgba(156,59,59,0.3);
}

/* Catalyst calendar & portfolio-monitoring board (same markup,
   two different left-cells): hover highlight + accent rail so 45
   stacked rows don't read as one undifferentiated wall of text. */
.catalyst-row {
  border-left: 3px solid transparent;
  transition: background-color .15s ease, border-left-color .15s ease;
}
.catalyst-row:hover { background: rgba(197,160,89,0.04); border-left-color: var(--gold); }
.catalyst-row.catalyst-row-reported:hover { border-left-color: var(--positive); }
.catalyst-row.catalyst-fomc:hover { background: var(--band); border-left-color: var(--navy-soft); }
.catalyst-date-day { font-variant-numeric: tabular-nums; }

/* Consensus vs. AEA Matrix: right-aligned/tabular EPS and surprise
   columns, sticky header — same treatment as the Holdings/Watchlist
   tables so every data table on the site reads as one system. */
#consensus-matrix thead th {
  position: sticky;
  top: 0;
  background: var(--paper);
  z-index: 2;
}
#consensus-matrix th:nth-child(2),
#consensus-matrix th:nth-child(4),
#consensus-matrix th:nth-child(5),
#consensus-matrix td:nth-child(2),
#consensus-matrix td:nth-child(4),
#consensus-matrix td:nth-child(5) {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Earnings coverage table: right-aligned/tabular weight column. */
#earnings-table th:nth-child(3),
#earnings-table td:nth-child(3) {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

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

/* Reading progress bar */
.reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: transparent;
  z-index: 999;
  pointer-events: none;
}

.reading-progress-fill {
  height: 100%;
  width: 0%;
  background: var(--gold);
  transition: width 0.1s linear;
}

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

/* ================================================================
   Homepage redesign — the front door. Most of this page's own
   components (editors-note, macro-grid/yield-monitor, leaderboard,
   bucket-panel, timeline, news-strip-grid) are already unique and
   fairly well-built; these rules add the same institutional polish
   layer used across the rest of the site (tabular figures, hover
   accents, gold-bar reveals) rather than a rebuild. .stat-band,
   .catalysts-list, .card, .methodology-grid, and .faq-list are
   shared with other pages, so those rules are scoped to
   body.page-home.
   ================================================================ */

/* Stat band: same card-hover language as Holdings/Newsletter. */
body.page-home .stat-band .stat {
  position: relative;
  transition: transform .15s ease, box-shadow .15s ease;
}
body.page-home .stat-band .stat::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--gold), var(--navy-soft));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .2s ease;
}
body.page-home .stat-band .stat:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(10,26,51,0.07); z-index: 1; }
body.page-home .stat-band .stat:hover::before { transform: scaleX(1); }

/* Editor's Note: gold ring on the monogram, matching the About
   page's about-monogram-ring treatment for cross-page consistency. */
body.page-home .editors-note-mark {
  box-shadow: 0 0 0 4px rgba(197,160,89,0.1);
}

/* Macro & Rates: tabular figures throughout, hover on each yield
   cell so the credit monitor reads as a live board, not static text. */
body.page-home .macro-value,
body.page-home .yield-monitor-value {
  font-variant-numeric: tabular-nums;
}
body.page-home .yield-monitor-cell {
  transition: background-color .15s ease;
}
body.page-home .yield-monitor-cell:hover {
  background: rgba(197,160,89,0.05);
}

/* Leaderboard: tabular returns, and the rank number moves into a
   proper circular badge instead of bare serif digits. */
body.page-home .leaderboard-return { font-variant-numeric: tabular-nums; }
body.page-home .leaderboard-rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(197,160,89,0.1);
  border: 1px solid rgba(197,160,89,0.3);
  font-size: 13px;
}
body.page-home .leaderboard-item:first-child .leaderboard-rank {
  background: linear-gradient(135deg, var(--gold) 0%, var(--copper) 100%);
  color: #ffffff;
  border-color: var(--copper);
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(168,99,47,0.35);
}
body.page-home .leaderboard-item { transition: background-color .15s ease, transform .15s ease; }
body.page-home .leaderboard-item:hover { transform: translateX(2px); }

/* Catalysts list (shared with Watchlist): same hover-row treatment. */
body.page-home .catalyst-item {
  transition: background-color .15s ease;
  border-radius: 6px;
  padding-left: 10px;
  padding-right: 10px;
  margin-left: -10px;
  margin-right: -10px;
}
body.page-home .catalyst-item:hover { background: rgba(197,160,89,0.05); }

/* Cards (What I Publish / Start Here / Latest News): gold-bar hover
   reveal, same language as every other card grid on the site. */
body.page-home .card {
  position: relative;
  overflow: hidden;
}
body.page-home .card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--gold), var(--navy-soft));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .2s ease;
}
body.page-home .card:hover::before { transform: scaleX(1); }

/* Milestones timeline: a small gold marker per entry instead of a
   bare horizontal rule, so it reads as a timeline rather than a list. */
body.page-home .timeline li { position: relative; padding-left: 22px; }
body.page-home .timeline li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 27px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold);
}
body.page-home .timeline li:first-child::before { top: 7px; }
body.page-home .timeline-upcoming::before { background: transparent; border: 1.5px solid var(--gold); }

/* Methodology grid & FAQ (shared with Newsletter): identical hover
   treatment to the Newsletter redesign, applied here too. */
body.page-home .methodology-grid .method-item {
  transition: transform .15s ease, border-color .15s ease;
}
body.page-home .methodology-grid .method-item:hover {
  transform: translateY(-2px);
  border-top-color: #bfa878;
}
body.page-home .faq-item { transition: background-color .15s ease; }
body.page-home .faq-item:hover { background: rgba(197,160,89,0.04); }

@media (prefers-reduced-motion: reduce) {
  body.page-home .stat-band .stat,
  body.page-home .stat-band .stat::before,
  body.page-home .yield-monitor-cell,
  body.page-home .catalyst-item,
  body.page-home .card,
  body.page-home .card::before,
  body.page-home .methodology-grid .method-item,
  body.page-home .faq-item {
    transition: none;
  }
}

.read-time {
  color: var(--muted);
}

.related-reading {
  margin: 40px 0 8px;
  padding-top: 28px;
  border-top: 1px solid var(--hairline);
}

.related-reading-heading {
  margin: 0;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.9px;
  color: var(--burgundy);
}

.related-reading-grid.card-grid.three-col {
  margin-top: 14px;
}

.related-reading-grid .card h3 {
  font-size: 16px;
  line-height: 1.35;
}

@media (max-width: 700px) {
  .related-reading-grid.card-grid.three-col {
    grid-template-columns: 1fr;
  }
}

/* ================================================================
   Position detail template redesign — applies to all 32 pages
   under positions/ via the shared .position-page body class added
   to each file. memo-hook, tear-sheet*, academic-framework,
   sell-triggers*, dcf-widget, range-bar, price-chart,
   risk-reward-table, and scenario-matrix are all unique to this
   template, so most rules extend those classes directly; .callout
   (thesis-box) and .conviction-badge are shared with other pages,
   so those two get explicit .position-page scoping.
   ================================================================ */

/* Investment Thesis box: gold top accent (matching every other
   redesigned callout on the site) and a 2x2 grid on wide screens
   for the four Thesis/Catalyst/Risk/Connection fields, instead of
   stacking all four in a single narrow column. */
.position-page .callout.thesis-box {
  border-left-color: var(--gold);
  border-top: 3px solid var(--gold);
  border-radius: var(--radius);
}
@media (min-width: 760px) {
  .position-page .thesis-fields {
    grid-template-columns: 1fr 1fr;
    gap: 18px 28px;
  }
}

/* Conviction badge in the H1: give it a touch more presence next
   to the ticker instead of reading as an inline afterthought. */
.position-page h1 .conviction-badge { vertical-align: middle; margin-left: 4px; }

/* Memo hook (thesis one-liner): a soft wash instead of bare left
   border, so the single most important sentence on the page reads
   as a pull-quote, not body copy with a rule next to it. */
.memo-hook {
  background: rgba(197,160,89,0.06);
  border-radius: 0 var(--radius) var(--radius) 0;
}

/* Academic-to-Portfolio tags: hover state so they read as
   cross-references (they link the thesis to specific coursework)
   rather than inert labels. */
.academic-tag { transition: background-color .15s ease, border-color .15s ease; }
.academic-tag:hover { background: rgba(197,160,89,0.16); border-color: rgba(197,160,89,0.5); }

/* Sell-triggers table: hover row + the exit condition rendered as
   a quiet warning pill instead of plain colored text, consistent
   with badge/tag treatment used for status elsewhere on the site. */
.sell-triggers tbody tr { transition: background-color .15s ease; }
.sell-triggers tbody tr:hover { background: rgba(197,160,89,0.04); }
.sell-triggers td.trigger-exit {
  color: var(--navy);
  position: relative;
  padding-left: 30px;
}
.sell-triggers td.trigger-exit::before {
  content: '\26A0';
  position: absolute;
  left: 10px;
  top: 12px;
  color: var(--gold);
  font-size: 13px;
}

/* DCF widget: tabular figures on the output and base-input so the
   number doesn't visibly jitter in width as the sliders move. */
.dcf-widget { transition: box-shadow .15s ease; }
.dcf-widget:hover { box-shadow: 0 10px 28px rgba(10,26,51,0.14); }
.dcf-output-value,
.dcf-control-base input[type="number"],
.dcf-control label span.dcf-val {
  font-variant-numeric: tabular-nums;
}

/* Range bar: tabular price labels so the 52-week low/high and
   current price align cleanly regardless of digit count. */
.range-labels span { font-variant-numeric: tabular-nums; }

/* Risk/Reward and Scenario Matrix tables: hover row + tabular
   probability column, matching every other data table redesigned
   across the site. */
.risk-reward-table tbody tr,
.scenario-matrix tbody tr {
  transition: background-color .15s ease;
}
.scenario-matrix tbody tr:hover { filter: brightness(0.98); }
.scenario-matrix td:last-child { font-variant-numeric: tabular-nums; text-align: right; }

/* Download block: lift on hover so it reads as a genuine action
   card rather than a static footer strip. */
.download-block { transition: box-shadow .15s ease; }
.download-block:hover { box-shadow: 0 10px 24px rgba(10,26,51,0.08); }

@media (prefers-reduced-motion: reduce) {
  .academic-tag,
  .sell-triggers tbody tr,
  .dcf-widget,
  .risk-reward-table tbody tr,
  .scenario-matrix tbody tr,
  .download-block {
    transition: none;
  }
}

/* ================================================================
   Watchlist detail template redesign — applies to all 15 pages
   under watchlist/ via the shared .watchlist-page body class added
   to each file. Every page follows the same three-callout pattern
   (Why it's on the list / Why it's not in the book yet / What would
   move me to buy) in that literal order, so nth-of-type gives each
   stage of the narrative its own accent instead of three identical
   gold-bordered boxes back to back. .callout/.thesis-box are shared
   with other pages, so this is scoped to body.watchlist-page.
   ================================================================ */

body.watchlist-page .callout.thesis-box {
  border-radius: var(--radius);
  transition: transform .15s ease, box-shadow .15s ease;
}
body.watchlist-page .callout.thesis-box:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(10,26,51,0.07);
}

/* 1. Why it's on the list — genuine interest, gold (the site's
      "this is worth attention" color everywhere else). */
body.watchlist-page .callout.thesis-box:nth-of-type(1) {
  border-left-color: var(--gold);
  border-top: 3px solid var(--gold);
}
/* 2. Why it's not in the book yet — the honest reservation, muted
      slate rather than a color that reads as negative/warning. */
body.watchlist-page .callout.thesis-box:nth-of-type(2) {
  border-left-color: var(--muted);
  border-top: 3px solid var(--muted);
}
/* 3. What would move me to buy — the forward-looking trigger,
      forest green: the one condition that would turn interest
      into a real position. */
body.watchlist-page .callout.thesis-box:nth-of-type(3) {
  border-left-color: var(--positive);
  border-top: 3px solid var(--positive);
}

@media (prefers-reduced-motion: reduce) {
  body.watchlist-page .callout.thesis-box { transition: none; }
}

/* ================================================================
   Letter detail template redesign — applies to all 12 pages under
   letters/ (the flagship monthly positioning letter plus interim
   notes and the founding note) via the shared .letter-detail-page
   body class. The WSJ-style drop-cap on p.lede and the base
   .callout/.postmortem-box styles are already shared, good, and
   used correctly here — these rules add the same accent layer used
   across the rest of the site rather than re-litigating typography.
   .allocation/.legend (the bucket-allocation donut chart) is unique
   to the one flagship letter that has one so far, and gets fuller
   treatment; .callout and .postmortem-box are shared broadly, so
   those two get explicit scoping.
   ================================================================ */

/* Every callout in a letter (the "No trades today" boxes in interim
   notes, the postmortem in the flagship letter) gets the same gold
   top-accent used on every other redesigned callout site-wide. */
body.letter-detail-page .callout {
  border-top: 3px solid var(--gold);
  border-radius: var(--radius);
}
/* The post-mortem is a confession, not a routine note — keep its
   accent the muted burgundy/slate it already had rather than gold,
   so it doesn't visually read as "good news" like the others. */
body.letter-detail-page .callout.postmortem-box {
  border-top-color: var(--burgundy);
}

/* Bucket-allocation donut + legend: hover row highlight and tabular
   percentages so the legend reads as a small data table, not a
   plain bullet list next to a chart. */
body.letter-detail-page .legend li {
  border-radius: 6px;
  padding-left: 8px;
  padding-right: 8px;
  margin-left: -8px;
  margin-right: -8px;
  transition: background-color .15s ease;
}
body.letter-detail-page .legend li:hover { background: rgba(197,160,89,0.06); }
body.letter-detail-page .legend .pct { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  body.letter-detail-page .legend li { transition: none; }
}

/* ================================================================
   News & Opinion detail templates — both are the same simple essay
   pattern (kicker, h1, meta, p.lede with its existing drop-cap, a
   single aside .callout, sourcing footnote, related-reading), so
   one shared rule plus a per-type accent color covers all 15 News
   pages and 10 Opinion pages via their respective body classes.
   .callout is shared broadly, so this is fully scoped; nothing
   here touches the base .callout used elsewhere.
   ================================================================ */

/* News: gold accent — a dated market-wrap aside, same "worth
   attention" color as the rest of the site's reporting surfaces. */
body.news-detail-page .callout {
  border-top: 3px solid var(--gold);
  border-radius: var(--radius);
}

/* Opinion: slate accent — argument, not reporting, mirroring the
   gold-vs-slate distinction already drawn on the Opinion archive
   page's hover rail. */
body.opinion-detail-page .callout {
  border-top: 3px solid var(--navy-soft);
  border-radius: var(--radius);
}

/* ================================================================
   Earnings report template redesign — applies to all 27 pages
   under earnings/ via the shared .earnings-report-page body class.
   .earnings-snapshot, .earnings-results-table, .earnings-thesis-box,
   and .earnings-risk-box are all unique to this template, so these
   rules extend those classes directly. rating-badge-hold/-buy/-sell
   modifier classes (already defined for the earnings.html coverage
   board) were added to every report's own rating badge too — the
   same 26-HOLD/1-BUY visibility problem existed on each individual
   report, not just the summary board.
   ================================================================ */

.earnings-snapshot-cell {
  transition: background-color .15s ease;
}
.earnings-snapshot-cell:hover { background: #222b3d; }
.earnings-snapshot-value { font-variant-numeric: tabular-nums; }

.earnings-results-table tbody tr {
  transition: background-color .15s ease;
}
.earnings-results-table tbody tr:hover { background: rgba(197,160,89,0.05); }
.earnings-results-table td:nth-child(2),
.earnings-results-table td:nth-child(3) {
  font-variant-numeric: tabular-nums;
}

/* Thesis vs. risk boxes: hover lift, and a warning glyph on the
   risk box's heading — same icon language as the sell-triggers
   table on the position-detail template, so "this is a risk list"
   reads the same way in both places. */
.earnings-thesis-box,
.earnings-risk-box {
  border-radius: 0 var(--radius) var(--radius) 0;
  transition: box-shadow .15s ease;
}
.earnings-thesis-box:hover,
.earnings-risk-box:hover {
  box-shadow: 0 8px 20px rgba(10,26,51,0.08);
}

@media (prefers-reduced-motion: reduce) {
  .earnings-snapshot-cell,
  .earnings-results-table tbody tr,
  .earnings-thesis-box,
  .earnings-risk-box {
    transition: none;
  }
}

/* ================================================================
   Comparison page redesign — applies to all 26 pages under
   comparisons/ via the shared .comparison-page body class.
   .compare-table is shared with earnings.html's consensus matrix
   (via a different ID there, so no collision) and .exposure-bars
   is shared with the Holdings page (already enhanced there under
   body.page-holdings with per-sector swatch colors) — this page
   scopes its own version around a different, more meaningful axis:
   whether the name is actually held, which every comparison page
   already marks with <strong> in the exposure label and with the
   compare-held column treatment in the table above it.
   ================================================================ */

body.comparison-page .compare-table tbody tr {
  transition: background-color .15s ease;
}
body.comparison-page .compare-table tbody tr:hover { background: rgba(10,26,51,0.02); }

/* Exposure bars here plot EV/EBITDA (or whatever metric) across
   held vs. not-held names — color the bar by that same "held"
   status instead of an arbitrary per-row sector color, matching
   the "Bold = held in this book" caption already printed below. */
body.comparison-page .exposure-row:has(strong) .exposure-fill {
  background: var(--gold);
}
body.comparison-page .exposure-row:not(:has(strong)) .exposure-fill {
  background: var(--muted);
}
body.comparison-page .exposure-row:has(strong) .exposure-pct {
  color: var(--navy);
  font-weight: 700;
}

/* Thesis callout ("Why X and Y, not Z"): same gold top-accent used
   on every other redesigned callout site-wide. */
body.comparison-page .callout.thesis-box {
  border-top: 3px solid var(--gold);
  border-radius: var(--radius);
}

@media (prefers-reduced-motion: reduce) {
  body.comparison-page .compare-table tbody tr { transition: none; }
}

/* ================================================================
   Remaining top-level utility pages — Compliance, Disclosures,
   Sources, Glossary, Performance, Tear Sheet, Thematic Exposure,
   Transfer Fit, Privacy, Search, 404, and the Strategy Briefing
   deck. Most of these are the same "stat-row + callout(s) + table"
   pattern already used elsewhere on the site (now with the same
   accent layer applied), plus a few page-specific widgets.
   ================================================================ */

/* Shared group: stat-row card hover + callout gold accent, for
   every plain document-style page that has either. */
body.page-compliance .stat-row .stat,
body.page-sources .stat-row .stat,
body.page-thematic .stat-row .stat,
body.page-tearsheet .stat-row .stat {
  position: relative;
  transition: transform .15s ease, box-shadow .15s ease;
}
body.page-compliance .stat-row .stat::before,
body.page-sources .stat-row .stat::before,
body.page-thematic .stat-row .stat::before,
body.page-tearsheet .stat-row .stat::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--gold), var(--navy-soft));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .2s ease;
}
body.page-compliance .stat-row .stat:hover,
body.page-sources .stat-row .stat:hover,
body.page-thematic .stat-row .stat:hover,
body.page-tearsheet .stat-row .stat:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(10,26,51,0.07);
  z-index: 1;
}
body.page-compliance .stat-row .stat:hover::before,
body.page-sources .stat-row .stat:hover::before,
body.page-thematic .stat-row .stat:hover::before,
body.page-tearsheet .stat-row .stat:hover::before {
  transform: scaleX(1);
}

body.page-compliance .callout,
body.page-disclosures .callout,
body.page-sources .callout,
body.page-thematic .callout,
body.page-transfer-fit .callout,
body.page-performance .callout {
  border-top: 3px solid var(--gold);
  border-radius: var(--radius);
}

/* Data tables on these pages: hover rows everywhere, plus a status-
   colored left rail on the Compliance Ledger specifically, reusing
   the same badge-ok/-disclosed/-pending classes already printed in
   each row's Status cell — the color and the label now agree. */
body.page-compliance table tbody tr,
body.page-sources table tbody tr,
body.page-thematic table tbody tr,
body.page-transfer-fit table tbody tr,
body.page-tearsheet table tbody tr {
  transition: background-color .15s ease;
}
body.page-compliance table tbody tr:hover,
body.page-sources table tbody tr:hover,
body.page-thematic table tbody tr:hover,
body.page-transfer-fit table tbody tr:hover,
body.page-tearsheet table tbody tr:hover {
  background: rgba(197,160,89,0.04);
}
body.page-compliance table tbody tr {
  border-left: 3px solid transparent;
}
body.page-compliance table tbody tr:has(.badge-ok) { border-left-color: var(--positive); }
body.page-compliance table tbody tr:has(.badge-breach) { border-left-color: var(--negative); }
body.page-compliance table tbody tr:has(.badge-disclosed) { border-left-color: var(--gold); }
body.page-compliance table tbody tr:has(.badge-pending) { border-left-color: var(--muted); }

/* Sources & Thematic Exposure: tabular numeric columns. */
body.page-sources table td:nth-child(2) { font-variant-numeric: tabular-nums; text-align: right; }
body.page-thematic table td:nth-child(3) { font-variant-numeric: tabular-nums; text-align: right; }
body.page-thematic table th:nth-child(3) { text-align: right; }

/* Glossary: hover row so scanning fifteen terms feels less like a
   static wall of definitions. */
body.page-glossary .glossary-item {
  transition: background-color .15s ease;
  border-radius: 6px;
  padding-left: 10px;
  padding-right: 10px;
  margin-left: -10px;
  margin-right: -10px;
}
body.page-glossary .glossary-item:hover { background: rgba(197,160,89,0.04); }

/* Performance Tracker: lift the whole comparison widget on hover so
   it reads as the page's one interactive centerpiece. */
body.page-performance .perf-compare {
  transition: box-shadow .15s ease;
}
body.page-performance .perf-compare:hover {
  box-shadow: 0 14px 32px rgba(10,26,51,0.1);
}

/* Privacy: this is the shortest, plainest legal doc on the site —
   give it the same "document clause" hairline rhythm as the Policy
   page, since it's read the same way (a list of short numbered
   commitments) even though it isn't literally numbered. */
body.page-privacy main.wrap > h2 {
  border-top: 1px solid var(--hairline);
  padding-top: 28px;
  margin-top: 40px;
}
body.page-privacy main.wrap > h2:first-of-type {
  border-top: none;
  padding-top: 0;
}

/* Search: gold focus glow on the input, matching the Newsletter
   signup field, and the same hover-rail as the News archive so
   result cards read as navigable the instant they render. */
body.page-search #site-search-input {
  transition: border-color .15s ease, box-shadow .15s ease;
}
body.page-search #site-search-input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(197,160,89,0.18);
}
body.page-search .letter-list li {
  border-left: 3px solid transparent;
  transition: border-color .15s ease;
}
body.page-search .letter-list li:hover { border-left-color: var(--gold); }

/* 404: the "try one of these instead" cards get the same gold-bar
   hover reveal used on every other card grid site-wide. */
body.page-404 .card {
  position: relative;
  overflow: hidden;
}
body.page-404 .card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--gold), var(--navy-soft));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .2s ease;
}
body.page-404 .card:hover::before { transform: scaleX(1); }

/* Strategy Briefing deck: lift each numbered page slightly on
   hover, matching the deck-toc's existing hover treatment. */
body.page-briefing .deck-page {
  transition: box-shadow .15s ease;
}
body.page-briefing .deck-page:hover {
  box-shadow: 0 10px 28px rgba(10,26,51,0.08);
}

/* Coverage Book: tint the summary row on hover, ahead of the
   existing gold open-state border, so the accordion signals
   interactivity before the reader clicks. */
body.page-coverage .coverage-item summary {
  transition: background-color .15s ease;
}
body.page-coverage .coverage-item summary:hover {
  background: rgba(197,160,89,0.04);
}

@media (prefers-reduced-motion: reduce) {
  body.page-compliance .stat-row .stat,
  body.page-sources .stat-row .stat,
  body.page-thematic .stat-row .stat,
  body.page-tearsheet .stat-row .stat,
  body.page-compliance table tbody tr,
  body.page-sources table tbody tr,
  body.page-thematic table tbody tr,
  body.page-transfer-fit table tbody tr,
  body.page-tearsheet table tbody tr,
  body.page-glossary .glossary-item,
  body.page-performance .perf-compare,
  body.page-search #site-search-input,
  body.page-search .letter-list li,
  body.page-404 .card,
  body.page-briefing .deck-page,
  body.page-coverage .coverage-item summary {
    transition: none;
  }
}

/* ================================================================
   Institutional feature layer — command palette, ticker previews,
   save-for-later, and article prev/next. All injected at runtime by
   institutional-features.js; markup here is authored to match what
   that script generates.
   ================================================================ */

body.cmdk-lock { overflow: hidden; }

/* ---------- Command palette ---------- */

.cmdk-overlay {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(10,26,51,0.55);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 12vh 20px 20px;
  opacity: 0; visibility: hidden;
  transition: opacity .15s ease;
}
.cmdk-overlay.open { opacity: 1; visibility: visible; }

.cmdk-panel {
  width: 100%; max-width: 620px;
  background: #ffffff;
  border-radius: var(--radius);
  box-shadow: 0 30px 80px rgba(0,0,0,0.35);
  overflow: hidden;
  transform: translateY(-8px);
  transition: transform .15s ease;
  display: flex; flex-direction: column;
  max-height: 70vh;
}
.cmdk-overlay.open .cmdk-panel { transform: translateY(0); }

.cmdk-input-row {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--hairline);
  color: var(--muted);
  flex-shrink: 0;
}
.cmdk-input {
  flex: 1;
  border: none; outline: none;
  font-family: var(--sans);
  font-size: 16px;
  color: var(--ink);
  background: transparent;
}
.cmdk-input::placeholder { color: var(--muted); }
.cmdk-esc {
  font-family: var(--sans); font-size: 11px; color: var(--muted);
  border: 1px solid var(--hairline); border-radius: 4px; padding: 2px 6px;
}

.cmdk-list { overflow-y: auto; padding: 8px; }
.cmdk-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  border-radius: 6px;
  text-decoration: none;
  color: var(--ink);
  cursor: pointer;
}
.cmdk-item.active, .cmdk-item:hover { background: rgba(197,160,89,0.1); }
.cmdk-item-cat {
  flex-shrink: 0;
  font-family: var(--sans); font-size: 10px; font-weight: 700;
  letter-spacing: 0.6px; text-transform: uppercase;
  color: var(--gold);
  min-width: 62px;
}
.cmdk-item-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cmdk-item-title {
  font-family: var(--sans); font-size: 14px; font-weight: 600;
  color: var(--navy);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cmdk-item-desc {
  font-family: var(--sans); font-size: 12px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cmdk-empty { padding: 24px 12px; text-align: center; color: var(--muted); font-family: var(--sans); font-size: 14px; }

.cmdk-footer {
  display: flex; gap: 16px;
  padding: 10px 20px;
  border-top: 1px solid var(--hairline);
  font-family: var(--sans); font-size: 11px; color: var(--muted);
  flex-shrink: 0;
}
.cmdk-footer kbd {
  border: 1px solid var(--hairline); border-radius: 3px;
  padding: 1px 5px; margin-right: 3px; font-size: 10px;
}

@media (max-width: 620px) {
  .cmdk-overlay { padding: 6vh 12px 12px; }
  .cmdk-footer span:nth-child(2) { display: none; }
}

/* ---------- Ticker hover-preview card ---------- */

.ticker-preview-card {
  position: absolute;
  z-index: 1500;
  display: none;
  width: 260px;
  background: #ffffff;
  border: 1px solid var(--hairline);
  border-top: 3px solid var(--gold);
  border-radius: var(--radius);
  box-shadow: 0 16px 40px rgba(10,26,51,0.2);
  padding: 14px 16px;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .12s ease, transform .12s ease;
  pointer-events: auto;
}
.ticker-preview-card.visible { opacity: 1; transform: translateY(0); }
.ticker-preview-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.ticker-preview-ticker { font-family: var(--serif); font-size: 17px; font-weight: 700; color: var(--navy); }
.ticker-preview-conv {
  font-family: var(--sans); font-size: 9px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase;
  padding: 2px 6px; border-radius: 999px;
}
.ticker-preview-conv.conv-high { color: var(--positive); background: rgba(47,111,79,0.1); }
.ticker-preview-conv.conv-medium { color: var(--gold); background: rgba(212,175,55,0.12); }
.ticker-preview-conv.conv-low { color: var(--muted); background: rgba(74,85,104,0.1); }
.ticker-preview-company { font-family: var(--sans); font-size: 12px; color: var(--muted); margin: 0 0 10px; }
.ticker-preview-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding-top: 10px; border-top: 1px solid var(--hairline); }
.ticker-preview-stats > div { display: flex; flex-direction: column; gap: 2px; }
.ticker-preview-label { font-family: var(--sans); font-size: 9px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--muted); }
.ticker-preview-value { font-family: var(--serif); font-size: 14px; font-weight: 600; color: var(--ink); }
.ticker-preview-status { display: inline-block; margin-top: 10px; font-family: var(--sans); font-size: 10px; color: var(--muted); }

/* ---------- Save for later ---------- */

.save-article-btn {
  position: fixed;
  right: 24px; bottom: 24px;
  z-index: 900;
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--sans); font-size: 13px; font-weight: 600;
  padding: 12px 18px;
  background: #ffffff;
  color: var(--navy);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(10,26,51,0.14);
  cursor: pointer;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease;
}
.save-article-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(10,26,51,0.2); border-color: var(--gold); }
.save-article-btn.is-saved { background: var(--navy); color: var(--gold); border-color: var(--navy); }

@media (max-width: 700px) {
  .save-article-btn { right: 16px; bottom: 16px; padding: 10px 14px; font-size: 12px; }
}

/* ---------- Saved pill + modal ---------- */

.saved-pill {
  position: fixed;
  left: 24px; bottom: 24px;
  z-index: 900;
  display: none; align-items: center; gap: 6px;
  font-family: var(--sans); font-size: 12px; font-weight: 700;
  padding: 10px 14px;
  background: var(--navy);
  color: var(--gold);
  border: none; border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(10,26,51,0.25);
}

@media (max-width: 700px) { .saved-pill { left: 16px; bottom: 16px; } }

.saved-modal-overlay {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(10,26,51,0.55);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  opacity: 0; visibility: hidden;
  transition: opacity .15s ease;
}
.saved-modal-overlay.open { opacity: 1; visibility: visible; }
.saved-modal-panel {
  width: 100%; max-width: 480px; max-height: 70vh;
  background: #ffffff;
  border-radius: var(--radius);
  box-shadow: 0 30px 80px rgba(0,0,0,0.35);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.saved-modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid var(--hairline);
  flex-shrink: 0;
}
.saved-modal-head h3 { margin: 0; font-size: 18px; }
.saved-modal-close { border: none; background: none; font-size: 22px; line-height: 1; color: var(--muted); cursor: pointer; padding: 4px; }
.saved-modal-close:hover { color: var(--gold); }
.saved-modal-list { list-style: none; margin: 0; padding: 8px; overflow-y: auto; }
.saved-modal-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 12px;
  border-radius: 6px;
}
.saved-modal-item:hover { background: var(--paper); }
.saved-modal-item a { font-family: var(--sans); font-size: 14px; color: var(--ink); text-decoration: none; flex: 1; }
.saved-modal-item a:hover { color: var(--gold); }
.saved-modal-remove { border: none; background: none; font-size: 18px; color: var(--muted); cursor: pointer; padding: 2px 6px; flex-shrink: 0; }
.saved-modal-remove:hover { color: var(--negative); }
.saved-modal-empty { padding: 20px 12px; font-family: var(--sans); font-size: 14px; color: var(--muted); text-align: center; }

/* ---------- Article prev/next nav ---------- */

.article-nav {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  margin: 48px 0 24px;
  padding-top: 24px;
  border-top: 1px solid var(--hairline);
}
.article-nav-link {
  display: flex; flex-direction: column; gap: 6px;
  padding: 16px 18px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  text-decoration: none;
  transition: border-color .15s ease, transform .15s ease;
}
.article-nav-link:hover { border-color: var(--gold); transform: translateY(-2px); }
.article-nav-newer { text-align: right; }
.article-nav-dir {
  font-family: var(--sans); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--gold);
}
.article-nav-title { font-family: var(--serif); font-size: 15px; color: var(--navy); line-height: 1.35; }
.article-nav-empty { border: none; }

@media (max-width: 620px) {
  .article-nav { grid-template-columns: 1fr; }
  .article-nav-newer { text-align: left; }
}

/* ---------- Quick-compare picker (Holdings / Watchlist) ---------- */

.compare-checkbox {
  margin-right: 8px;
  width: 15px; height: 15px;
  accent-color: var(--gold);
  vertical-align: middle;
  cursor: pointer;
}

.compare-bar {
  position: fixed;
  left: 50%; bottom: 24px;
  transform: translate(-50%, 120%);
  z-index: 1000;
  display: flex; align-items: center; gap: 14px;
  background: var(--navy);
  color: #ffffff;
  padding: 14px 20px;
  border-radius: 999px;
  box-shadow: 0 16px 40px rgba(10,26,51,0.35);
  transition: transform .2s ease;
  max-width: calc(100vw - 32px);
}
.compare-bar.visible { transform: translate(-50%, 0); }
.compare-bar-text { font-family: var(--sans); font-size: 13px; color: #d7dde5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.compare-bar-text strong { color: #ffffff; }
.compare-bar-go {
  font-family: var(--sans); font-size: 13px; font-weight: 700;
  color: var(--navy); background: var(--gold);
  padding: 7px 14px; border-radius: 999px; text-decoration: none;
  white-space: nowrap;
  transition: background-color .15s ease;
}
.compare-bar-go:hover { background: #bfa878; }
.compare-bar-clear {
  border: none; background: none; color: #8f9bad;
  font-family: var(--sans); font-size: 18px; line-height: 1; cursor: pointer;
  padding: 2px 4px; flex-shrink: 0;
}
.compare-bar-clear:hover { color: #ffffff; }

@media (max-width: 700px) {
  .compare-bar { flex-wrap: wrap; justify-content: center; text-align: center; bottom: 16px; padding: 12px 16px; }
  .compare-bar-text { white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
  .compare-bar, .save-article-btn, .cmdk-overlay, .cmdk-panel, .saved-modal-overlay, .ticker-preview-card {
    transition: none;
  }
}

/* ================================================================
   Evaluator path (homepage) — the 3-5 minute version of the site
   for a reader who won't click past the homepage: Why I built this
   → IPS → one research memo → one post-mortem. Positioned right
   after the hero, ahead of the performance chart and stat band, on
   purpose — process and judgment before results.
   ================================================================ */

.eval-path-band { padding-top: 56px; padding-bottom: 8px; }

.eval-path {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  overflow: hidden;
}

.eval-path-step {
  background: #ffffff;
  padding: 26px 22px;
  position: relative;
  transition: background-color .15s ease;
}
.eval-path-step:hover { background: rgba(197,160,89,0.04); }

.eval-path-step:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -1px;
  width: 14px;
  height: 14px;
  transform: translate(50%, -50%) rotate(45deg);
  background: #ffffff;
  border-right: 1px solid var(--hairline);
  border-top: 1px solid var(--hairline);
  z-index: 1;
}

.eval-path-no {
  display: block;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 26px;
  color: var(--gold);
  line-height: 1;
  margin-bottom: 12px;
}

.eval-path-body h3 { margin: 0 0 8px; font-size: 17px; line-height: 1.3; }
.eval-path-body h3 a { color: var(--navy); text-decoration: none; border-bottom: 1px solid transparent; transition: color .15s ease, border-color .15s ease; }
.eval-path-body h3 a:hover { color: var(--gold); border-bottom-color: var(--gold); }
.eval-path-body p { margin: 0; font-size: 13.5px; color: var(--muted); line-height: 1.55; }

@media (max-width: 900px) {
  .eval-path { grid-template-columns: repeat(2, 1fr); }
  .eval-path-step:nth-child(2)::after { display: none; }
  .eval-path-step:not(:last-child)::after { right: 50%; top: auto; bottom: -1px; transform: translate(50%, 50%) rotate(45deg); }
}
@media (max-width: 620px) {
  .eval-path { grid-template-columns: 1fr; }
  .eval-path-step::after { display: none !important; }
}

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