/* oppcost shared site styles */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;0,700;1,500&family=Playfair+Display:ital,wght@0,400;0,500;0,600;1,400&display=swap');

:root {
  --navy: #3A5885;      /* French Blue (text) — brand refresh Aug 2026 */
  --navy-soft: #4A6FA5; /* French Blue (fill) */
  --cream: #FBFAF7;     /* Warm Paper */
  --white: #ffffff;
  --hunter: #8FA878;
  --hunter-bg: #e9efe9;
  --gold: #b8904f;
  --gold-bg: #f6ecd9;
  --carolina: #3A5885;
  --carolina-bg: #e9edf3;
  --accent: #8FA878;     /* Sage Green — primary brand accent, replaces gold for chrome/UI */
  --accent-bg: #EEF2E9;  /* light sage tint */
  --ink-muted: #000000;  /* body copy — brand refresh Aug 2026: all body text is black */
  --line: #e5ddcc;
  --serif: 'Cormorant Garamond', Georgia, serif;   /* titles / subtitles */
  --sans: 'Playfair Display', Georgia, serif;      /* body copy */
  --nav-bg: rgba(255,255,255,0.94);
}

/* ---------- dark mode ---------- */
/* Light by default for every visitor, regardless of system/browser
   preference. Dark mode only applies when someone explicitly turns it on
   via the toggle (assets/theme-toggle.js), which stamps data-theme="dark"
   on <html> and remembers the choice in localStorage for next visit. */
:root[data-theme="dark"] {
  --navy: #93B4EA;
  --navy-soft: #B7CDF2;
  --cream: #14181f;
  --white: #1e242e;
  --ink-muted: #E9E7E2;
  --line: #333b48;
  --nav-bg: rgba(20,24,31,0.9);
  --accent-bg: #1b2420;
}

/* logo mark: the light version has an opaque white background, which shows as
   a visible box against a dark nav/footer, so a transparent-background twin
   swaps in for dark mode. */
.logo-dark { display: none; }
:root[data-theme="dark"] .logo-light { display: none; }
:root[data-theme="dark"] .logo-dark { display: inline-block; }

/* article table header: --hunter-bg is a light sage tint that was never
   redefined for dark mode, so it stayed a bright off-white box sitting on
   the dark page (visible on every article's data table, e.g. the Roth IRA
   milestone table). Swap in the same dark tint already used for the
   accent color elsewhere, since --hunter and --accent are the same green. */
:root[data-theme="dark"] .article-body table th { background: var(--accent-bg); }

/* .callout: same bug, same fix. --gold-bg/--hunter-bg/--carolina-bg are all
   light tints never redefined for dark mode, so a callout box stayed a
   bright cream/sage/blue box with near-invisible light-on-light text on
   top of it. Reuse the same dark tint as the table-header fix above. */
:root[data-theme="dark"] .callout,
:root[data-theme="dark"] .callout.hunter,
:root[data-theme="dark"] .callout.carolina { background: var(--accent-bg); }

/* same --gold-bg bug, same fix, for the two widget uses added since: the
   priority-waterfall match warning and the triple-rate 6% result card. */
:root[data-theme="dark"] .priority-warning,
:root[data-theme="dark"] .race-result-card.is-six { background: var(--accent-bg); }

/* ---------- page preloader: supply & demand graph splash ---------- */
.oc-preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  z-index: 9999;
  background: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  transition: opacity 0.5s ease;
}
.oc-preloader.oc-hidden { opacity: 0; pointer-events: none; }
.oc-preloader .oc-wordmark {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 700;
  color: var(--navy);
  margin-top: 10px;
  letter-spacing: 0.5px;
}
.oc-chart .oc-axis { stroke: var(--navy); stroke-width: 1.5; }
.oc-chart .oc-demand, .oc-chart .oc-supply {
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
}
.oc-chart .oc-demand { stroke: var(--gold); }
.oc-chart .oc-supply { stroke: var(--hunter); }
.oc-chart .oc-eq-dot { fill: var(--navy); opacity: 0; }
.oc-chart .oc-eq-lines { stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 3; opacity: 0; }
.oc-chart text { font-family: var(--sans); }
.oc-chart .oc-axis-label { font-size: 10px; fill: #777; }
.oc-chart .oc-curve-label { font-size: 11px; font-weight: 600; opacity: 0; }
.oc-chart .oc-curve-label.oc-demand-label { fill: var(--gold); }
.oc-chart .oc-curve-label.oc-supply-label { fill: var(--hunter); }
.oc-chart .oc-eq-label { font-size: 10px; fill: var(--navy); opacity: 0; font-style: italic; }

@keyframes ocDrawLine { to { stroke-dashoffset: 0; } }
@keyframes ocFadeIn { to { opacity: 1; } }
@keyframes ocPopIn {
  0% { opacity: 0; transform: scale(0); }
  70% { opacity: 1; transform: scale(1.4); }
  100% { opacity: 1; transform: scale(1); }
}
.oc-chart.oc-anim .oc-demand { stroke-dasharray: 260; stroke-dashoffset: 260; animation: ocDrawLine 1s ease forwards; }
.oc-chart.oc-anim .oc-supply { stroke-dasharray: 260; stroke-dashoffset: 260; animation: ocDrawLine 1s ease forwards 0.15s; }
.oc-chart.oc-anim .oc-curve-label { animation: ocFadeIn 0.4s ease forwards 0.9s; }
.oc-chart.oc-anim .oc-eq-lines { animation: ocFadeIn 0.3s ease forwards 1.05s; }
.oc-chart.oc-anim .oc-eq-dot { transform-box: fill-box; transform-origin: center; animation: ocPopIn 0.5s ease forwards 1.1s; }
.oc-chart.oc-anim .oc-eq-label { animation: ocFadeIn 0.4s ease forwards 1.35s; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--white);
  color: var(--ink-muted);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { color: var(--navy); }
.pillar-title-invest { color: var(--hunter); }
.pillar-title-mindset { color: var(--gold); }
.pillar-title-debt { color: var(--navy); }

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

.wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 28px;
}

/* ---------- nav ---------- */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--nav-bg, rgba(255,255,255,0.94));
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
}
.site-nav .wrap {
  position: relative;
  display: grid;
  grid-template-columns: minmax(124px, 1fr) auto minmax(124px, 1fr);
  align-items: center;
  padding-top: 16px;
  padding-bottom: 16px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 1;
  grid-column: 1;
  justify-self: start;
}
.brand img { height: 112px; width: auto; flex-shrink: 0; }
.brand span {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: 0.01em;
  color: var(--navy);
}
.nav-spacer-mirror {
  grid-column: 3;
  justify-self: end;
  visibility: hidden;
  pointer-events: none;
}
.nav-links {
  grid-column: 2;
  justify-self: center;
  display: flex;
  align-items: center;
  gap: 30px;
  font-size: 19px;
  font-weight: 500;
  white-space: nowrap;
}
.nav-links a.nav-item {
  position: relative;
  padding: 6px 0;
  color: var(--navy);
  transition: color .15s ease;
}
.nav-links a.nav-item:hover,
.nav-links a.nav-item:focus,
.nav-links a.nav-item:active { color: var(--accent); }
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1.4px solid var(--line);
  background: var(--white);
  color: var(--navy);
  cursor: pointer;
  padding: 0;
}
.theme-toggle:hover { border-color: var(--accent); color: var(--accent); }
.theme-toggle svg { width: 17px; height: 17px; }
.theme-toggle .icon-sun { display: none; }
.theme-toggle.is-dark .icon-moon { display: none; }
.theme-toggle.is-dark .icon-sun { display: block; }
.nav-links a.nav-item::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transition: transform .2s ease;
}
.nav-links a.nav-item:hover::after { transform: scaleX(1); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 14px;
  padding: 12px 24px;
  border-radius: 2px;
  border: 1.4px solid transparent;
  cursor: pointer;
  transition: all .18s ease;
}
.btn-primary { background: #3A5885; color: #ffffff; }
.btn-primary:hover { background: #4A6FA5; }
.btn-outline { border-color: var(--accent); color: var(--navy); background: transparent; }
.btn-outline:hover { background: var(--accent-bg); }
.btn-small { padding: 14px 26px; font-size: 17px; }

/* ---------- hero ---------- */
.hero {
  text-align: center;
  padding: 92px 0 76px;
  background:
    radial-gradient(ellipse at top, var(--cream) 0%, var(--white) 62%);
}
.hero .mark { height: 92px; margin: 0 auto 30px; }
.hero .wordmark { height: 70px; width: auto; margin: 0 auto 30px; display: block; }
.kicker {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 16px;
}
.hero h1 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(34px, 5vw, 54px);
  line-height: 1.15;
  margin: 0 0 20px;
  color: var(--navy);
}
.hero p.lede {
  font-size: 18px;
  color: var(--ink-muted);
  max-width: 560px;
  margin: 0 auto 36px;
}
.hero .actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* ---------- photo media ---------- */
.media { position: relative; overflow: hidden; background: var(--cream); }
.media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.media::after { content: ""; position: absolute; inset: 0; mix-blend-mode: multiply; opacity: .16; pointer-events: none; }
.media.hunter::after, .media.invest::after { background: var(--hunter); }
.media.gold::after, .media.mindset::after { background: var(--gold); }
.media.carolina::after, .media.debt::after { background: var(--carolina); }

.pillar-media { height: 190px; }
.post-media { height: 190px; margin-bottom: 18px; border-radius: 2px; }

.hero-media {
  max-width: 860px;
  margin: 50px auto 0;
  border-radius: 3px;
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: 0 34px 60px -32px rgba(58,88,133,0.32);
}
.hero-carousel { position: relative; width: 100%; height: 380px; }
.hero-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transition: opacity 1s ease;
}
.hero-slide.is-active { opacity: 1; }

.article-cover {
  max-width: 820px;
  margin: 0 auto 44px;
  border-radius: 2px;
  overflow: hidden;
  border: 1px solid var(--line);
}
.article-cover img { width: 100%; height: 380px; object-fit: cover; display: block; }

/* ---------- pillars ---------- */
.section { padding: 84px 0; }
.section.cream { background: var(--cream); }
.section-head { text-align: center; max-width: 620px; margin: 0 auto 52px; }
.section-head h2 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(26px, 3.4vw, 34px);
  margin: 0 0 12px;
}
.section-head p { color: var(--ink-muted); margin: 0; font-size: 16px; }

.pillars-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}
.pillar-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 3px;
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}
.pillar-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px -18px rgba(58,88,133,0.35); }
.pillar-bar { height: 6px; }
.pillar-bar.hunter { background: var(--hunter); }
.pillar-bar.gold { background: var(--gold); }
.pillar-bar.carolina { background: var(--carolina); }
.pillar-body { padding: 30px 26px 32px; }
.pillar-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 2px;
  margin-bottom: 16px;
}
.pillar-tag.hunter { background: var(--hunter-bg); color: var(--hunter); }
.pillar-tag.gold { background: var(--gold-bg); color: #8a6a30; }
.pillar-tag.carolina { background: var(--carolina-bg); color: var(--carolina); }
.pillar-body h3 {
  font-family: var(--serif);
  font-size: 21px;
  margin: 0 0 10px;
}
.pillar-body p { color: var(--ink-muted); font-size: 14.5px; margin: 0 0 18px; }
.pillar-body a.more { font-size: 13.5px; font-weight: 600; color: var(--navy); border-bottom: 1.4px solid var(--accent); padding-bottom: 2px; }

/* ---------- post cards ---------- */
.posts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
.post-card {
  display: block;
  border-top: 3px solid var(--line);
  padding-top: 22px;
}
.post-card.hunter, .post-card.invest { border-top-color: var(--hunter); }
.post-card.gold, .post-card.mindset { border-top-color: var(--gold); }
.post-card.carolina, .post-card.debt { border-top-color: var(--carolina); }
.post-meta {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 12px;
}
.post-meta .tag.hunter, .post-meta .tag.invest { color: var(--hunter); }
.post-meta .tag.gold, .post-meta .tag.mindset { color: #96762f; }
.post-meta .tag.carolina, .post-meta .tag.debt { color: var(--carolina); }
.post-card h3 {
  font-family: var(--serif);
  font-size: 20px;
  line-height: 1.32;
  margin: 0 0 10px;
}
.post-card p.excerpt { font-size: 14.5px; color: var(--ink-muted); margin: 0 0 14px; }
.post-card .readmore { font-size: 13px; font-weight: 600; color: var(--navy); }

/* ---------- featured badge ----------
   Solid pill on the card thumbnail (sits on top of a photo, so it stays
   readable regardless of theme) plus a matching inline tag for the article
   page itself, next to the pillar/date/read-time line. */
.featured-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--gold);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 2px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.28);
}
.featured-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--gold-bg);
  color: #8a6a30;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 2px;
}

/* ---------- blog index filters ---------- */
.filters {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 48px;
}
.filter-btn {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  padding: 9px 18px;
  border-radius: 999px;
  border: 1.4px solid var(--line);
  background: var(--white);
  color: var(--ink-muted);
  cursor: pointer;
}
.filter-btn.active,
.filter-btn:hover { border-color: var(--navy); color: var(--navy); }

/* ---------- follow (cards + IG / Pinterest carousels) ---------- */
.follow-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  max-width: 580px;
  margin: 0 auto;
}
.follow-widget { max-width: 680px; margin: 0 auto 28px; }
.follow-links { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* ---------- social photo grid (replaces embedded feed widget) ---------- */
.social-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  max-width: 900px;
  margin: 0 auto 28px;
}
.social-grid a {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 4px;
}
.social-grid img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.3s ease; }
.social-grid a:hover img { transform: scale(1.06); }
.social-grid-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(58, 88, 133, 0.55);
  color: #ffffff;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.social-grid-overlay svg { width: 26px; height: 26px; }
.social-grid a:hover .social-grid-overlay { opacity: 1; }
@media (max-width: 760px) {
  .social-grid { grid-template-columns: repeat(3, 1fr); }
}
.follow-card {
  text-align: center;
  padding: 34px 20px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--white);
}
.follow-card svg { width: 30px; height: 30px; margin: 0 auto 16px; }
.follow-card h4 { font-family: var(--serif); font-size: 17px; margin: 0 0 6px; }
.follow-card p {
  font-size: 13.5px;
  color: var(--ink-muted);
  margin: 0 0 16px;
  min-height: 66px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.follow-card .social-carousel { margin: 0 auto 16px; }
.social-carousel {
  position: relative;
  aspect-ratio: 4 / 5;
  max-width: 220px;
  margin: 0 auto;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--white);
  overflow: hidden;
}
.social-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .6s ease;
}
.social-slide.is-active { opacity: 1; }
.social-slide-link { display: block; width: 100%; height: 100%; }
.social-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.social-empty {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 12px;
  padding: 30px 24px;
  background: var(--accent-bg);
}
.social-empty svg { width: 26px; height: 26px; color: var(--accent); }
.social-empty p { font-size: 13px; color: var(--ink-muted); margin: 0; max-width: 220px; }

/* ---------- newsletter ---------- */
.newsletter {
  background: #3A5885;
  color: #FBFAF7;
  padding: 76px 0;
  text-align: center;
}
.newsletter h2 { font-family: var(--serif); font-weight: 600; color: #FBFAF7; font-size: clamp(24px, 3vw, 32px); margin: 0 0 12px; }
.newsletter p { color: #FBFAF7; max-width: 480px; margin: 0 auto 30px; font-size: 15.5px; }
.newsletter-form {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  max-width: 440px;
  margin: 0 auto;
}
.newsletter-form input {
  flex: 1;
  min-width: 220px;
  padding: 13px 16px;
  border-radius: 2px;
  border: 1px solid #3a4864;
  background: #1f2d47;
  color: #FBFAF7;
  font-family: var(--sans);
  font-size: 14.5px;
}
.newsletter-form input::placeholder { color: #8f9ab3; }
.newsletter-form button {
  background: var(--accent);
  color: #FBFAF7;
  border: none;
  border-radius: 2px;
  padding: 13px 26px;
  font-family: var(--sans);
  font-size: 14.5px;
  font-weight: 700;
  cursor: pointer;
}
.newsletter-form button:hover { background: #7c9568; }
.newsletter-form input:disabled { opacity: 0.6; }
.newsletter-thanks-link {
  display: block;
  margin: 16px auto 0;
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 700;
  color: #FBFAF7;
  border-bottom: 1.4px solid var(--accent);
  padding-bottom: 2px;
  width: fit-content;
}
.newsletter-thanks-link:hover { color: var(--accent); }
.newsletter-modal .newsletter-thanks-link { color: var(--navy); border-color: var(--accent); }
.newsletter-modal .newsletter-thanks-link:hover { color: var(--accent); }
.newsletter .fine { margin-top: 16px; font-size: 12.5px; color: #8f9ab3; }

/* ---------- newsletter popup modal ---------- */
.newsletter-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(28, 38, 58, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
.newsletter-modal-overlay.is-open { opacity: 1; pointer-events: auto; }
.newsletter-modal {
  position: relative;
  background: var(--cream);
  border-radius: 6px;
  max-width: 440px;
  width: 100%;
  padding: 46px 36px 40px;
  text-align: center;
  box-shadow: 0 34px 70px -24px rgba(20,28,44,0.45);
}
.newsletter-modal h2 {
  font-family: var(--serif);
  font-weight: 600;
  color: var(--navy);
  font-size: clamp(22px, 3vw, 28px);
  margin: 0 0 12px;
}
.newsletter-modal p { color: var(--ink-muted); font-size: 14.5px; margin: 0 0 26px; }
.newsletter-modal .newsletter-form { justify-content: center; }
.newsletter-modal .newsletter-form input {
  background: var(--white);
  border: 1px solid var(--line);
  color: var(--ink-muted);
}
.newsletter-modal .newsletter-form input::placeholder { color: #8a8577; }
.newsletter-modal-close {
  position: absolute;
  top: 12px;
  right: 14px;
  background: none;
  border: none;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  color: var(--navy);
  font-family: var(--sans);
}
.newsletter-modal-close:hover { color: var(--accent); }

/* ---------- footer ---------- */
.site-footer {
  border-top: 1px solid var(--line);
  padding: 40px 0;
}
.site-footer .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}
.site-footer .brand span { font-size: 16px; }
.footer-links { display: flex; gap: 22px; font-size: 13.5px; color: var(--ink-muted); }
.footer-links a:hover { color: var(--navy); }
.footer-social { display: flex; gap: 16px; }
.footer-social svg { width: 18px; height: 18px; color: var(--navy-soft); }
.footer-social a:hover svg { color: var(--accent); }
.copyright { font-size: 12px; color: var(--ink-muted); width: 100%; text-align: center; margin-top: 24px; }

/* ---------- article ---------- */
.article-head { text-align: center; padding: 64px 0 40px; max-width: 720px; margin: 0 auto; }
.article-head .post-meta { justify-content: center; display: flex; gap: 8px; align-items: center; }
.article-head h1 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(30px, 4.4vw, 44px);
  line-height: 1.2;
  margin: 16px 0 14px;
}
.article-sub { color: var(--navy); font-size: 17px; }
.article-sub.pillar-title-invest { color: var(--hunter); }
.article-sub.pillar-title-mindset { color: var(--gold); }
.article-sub.pillar-title-debt { color: var(--navy); }
/* subheads (h3) inside the body reuse the same pillar-title-* classes as the
   h1/subtitle so a Mindset (gold) post's section headers read gold instead
   of the default navy every h3 gets site-wide. */
.article-body h3.pillar-title-invest { color: var(--hunter); }
.article-body h3.pillar-title-mindset { color: var(--gold); }
.article-body h3.pillar-title-debt { color: var(--navy); }
.article-body {
  max-width: 680px;
  margin: 0 auto;
  padding: 0 0 60px;
  font-size: 17px;
  line-height: 1.75;
}
.article-body p { margin: 0 0 22px; }
.article-body h3 { font-family: var(--serif); font-size: 22px; margin: 36px 0 14px; }
.article-body ul { margin: 0 0 22px; padding-left: 22px; }
.article-body ul li { margin: 0 0 12px; }
.article-body ul li:last-child { margin-bottom: 0; }
.callout {
  border-left: 3px solid var(--gold);
  background: var(--gold-bg);
  padding: 20px 24px;
  border-radius: 2px;
  margin: 30px 0;
  font-size: 15.5px;
}
.callout.hunter { border-color: var(--hunter); background: var(--hunter-bg); }
.callout.carolina { border-color: var(--carolina); background: var(--carolina-bg); }
.callout strong { display: block; margin-bottom: 6px; font-family: var(--serif); font-size: 16px; }
blockquote {
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  line-height: 1.5;
  color: var(--navy-soft);
  border-left: 3px solid var(--line);
  margin: 34px 0;
  padding: 4px 0 4px 24px;
}
.article-body .table-wrap { overflow-x: auto; margin: 0 0 26px; }
.article-body table { width: 100%; border-collapse: collapse; font-size: 15px; white-space: nowrap; }
.article-body table th, .article-body table td { padding: 10px 16px; border-bottom: 1px solid var(--line); text-align: right; }
.article-body table th:first-child, .article-body table td:first-child { text-align: left; }
.article-body table th { font-family: var(--serif); font-weight: 600; color: var(--navy); background: var(--hunter-bg); }
.article-body table tr:last-child td { border-bottom: none; }
.disclaimer { font-size: 12.5px; color: var(--ink-muted); border-top: 1px solid var(--line); padding-top: 16px; margin-top: 40px; }
.disclaimer-inline { font-size: 12.5px; font-style: italic; color: var(--ink-muted); margin: -10px 0 22px; }
.back-link { display: inline-block; margin-bottom: 8px; font-size: 13.5px; font-weight: 600; color: var(--ink-muted); }
.back-link:hover { color: var(--navy); }

/* ---------- pull quotes ---------- */
.article-body p.pull-quote {
  font-family: var(--serif);
  font-size: clamp(20px, 2.6vw, 26px);
  font-weight: 600;
  line-height: 1.4;
  color: var(--navy);
  border-left: 3px solid var(--accent);
  padding: 4px 0 4px 22px;
  margin: 34px 0;
}

/* ---------- post footer: share bar + author byline ---------- */
.post-footer {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin: 44px 0 40px;
  padding: 28px 0;
}
.share-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; flex-wrap: wrap; }
.share-label { font-family: var(--sans); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-muted); opacity: 0.6; }
.share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--navy);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.share-btn:hover { background: #3A5885; color: #ffffff; border-color: #3A5885; }
.share-btn svg { width: 16px; height: 16px; }
.share-copy { font-family: var(--sans); font-size: 12px; font-weight: 700; width: auto; padding: 0 14px; border-radius: 18px; }
.author-byline { display: flex; align-items: center; gap: 16px; }
.author-byline img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.byline-name { font-family: var(--serif); font-weight: 600; font-size: 16px; color: var(--navy); margin: 0 0 2px; }
.byline-sub { font-size: 13.5px; color: var(--ink-muted); opacity: 0.75; margin: 0; }
.byline-sub a { color: var(--navy); font-weight: 600; }

/* ---------- 404 page ---------- */
.error-page {
  max-width: 640px;
  margin: 0 auto;
  padding: 110px 24px 100px;
  text-align: center;
}
.error-page .error-code {
  font-family: var(--serif);
  font-size: clamp(64px, 12vw, 96px);
  font-weight: 700;
  color: var(--navy);
  line-height: 1;
  margin: 0 0 10px;
}
.error-page h1 {
  font-family: var(--serif);
  font-size: clamp(24px, 4vw, 32px);
  color: var(--navy);
  margin: 0 0 18px;
}
.error-page p.error-lede {
  font-size: 16.5px;
  color: var(--ink-muted);
  line-height: 1.6;
  margin: 0 0 34px;
}
.error-page .actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-bottom: 46px; }
.error-page .error-pillars {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  border-top: 1px solid var(--line);
  padding-top: 32px;
}
.error-page .error-pillars a {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
  padding: 9px 18px;
  border-radius: 20px;
  border: 1px solid var(--line);
  color: var(--navy);
}
.error-page .error-pillars a:hover { border-color: var(--navy); background: var(--accent-bg); }

/* ---------- compound interest calculator ---------- */
.calc-widget {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 30px 30px 34px;
  margin: 30px 0 40px;
  background: var(--cream);
}
.calc-widget h4 {
  font-family: var(--serif);
  font-size: 20px;
  color: var(--navy);
  margin: 0 0 4px;
}
.calc-widget .calc-sub { font-size: 13.5px; color: var(--ink-muted); opacity: 0.75; margin: 0 0 22px; }
.calc-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px 22px;
  margin-bottom: 26px;
}
.calc-field { display: flex; flex-direction: column; gap: 6px; }
.calc-field label {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
  opacity: 0.7;
}
.calc-field input {
  font-family: var(--sans);
  font-size: 16px;
  color: var(--navy);
  border: 1.4px solid var(--line);
  border-radius: 6px;
  padding: 9px 12px;
  background: var(--white);
}
.calc-field input:focus { outline: none; border-color: var(--accent); }
.calc-results {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  border-top: 1px solid var(--line);
  padding-top: 22px;
}
.calc-result { text-align: center; }
.calc-result-label {
  display: block;
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-muted);
  opacity: 0.65;
  margin-bottom: 6px;
}
.calc-result-value { display: block; font-family: var(--serif); font-size: 22px; font-weight: 700; color: var(--navy); }
.calc-result-value.calc-final { color: var(--accent); font-size: 26px; }
@media (max-width: 560px) {
  .calc-grid { grid-template-columns: 1fr; }
  .calc-results { grid-template-columns: 1fr; gap: 14px; }
}

/* ---------- inline data chart (reusable widget for any post) ----------
   Built on top of .calc-widget's card look. Two series get their own
   literal colors (rather than pillar colors) since they represent two
   people, not a topic category - series A reuses the site's navy, series
   B uses a sage that's distinct enough from --hunter/--accent to read as
   its own line when both sit on the same chart. */
.chart-widget .calc-sub { margin-bottom: 20px; }
.chart-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}
.chart-stat { text-align: center; display: flex; flex-direction: column; gap: 4px; }
.chart-stat .stat-label {
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-muted);
  opacity: 0.65;
}
.chart-stat .stat-value { font-family: var(--serif); font-size: clamp(20px, 3vw, 24px); font-weight: 700; color: var(--ink-muted); }
.chart-stat .stat-value.stat-a { color: var(--navy); }
.chart-stat .stat-value.stat-b { color: #6F8F58; }
.chart-stat .stat-note { font-size: 12px; color: var(--ink-muted); opacity: 0.6; }
.chart-legend { display: flex; gap: 18px; margin: 0 0 14px; font-size: 12.5px; color: var(--ink-muted); opacity: 0.8; flex-wrap: wrap; }
.chart-legend span { display: inline-flex; align-items: center; gap: 6px; }
.chart-dot { width: 12px; height: 3px; border-radius: 2px; display: inline-block; background: var(--navy); }
.chart-dot.b { background: #6F8F58; }
.chart-svg-wrap { position: relative; width: 100%; overflow-x: auto; margin-bottom: 24px; }
.data-chart-svg { width: 100%; height: auto; min-width: 480px; display: block; }
.data-chart-svg .gridline { stroke: var(--line); stroke-width: 1; }
.data-chart-svg .axis-label { fill: var(--ink-muted); opacity: 0.6; font-size: 11px; font-family: var(--sans); }
.data-chart-svg .line-a { fill: none; stroke: var(--navy); stroke-width: 2.5; }
.data-chart-svg .line-b { fill: none; stroke: #6F8F58; stroke-width: 2.5; }
.data-chart-svg .area-a { fill: rgba(58,88,133,0.10); }
.data-chart-svg .area-b { fill: rgba(111,143,88,0.14); }
.data-chart-svg .end-label { font-size: 12px; font-weight: 700; font-family: var(--sans); }
.data-chart-svg .end-label.a { fill: var(--navy); }
.data-chart-svg .end-label.b { fill: #6F8F58; }
.data-chart-svg .hover-line { stroke: var(--ink-muted); opacity: 0; stroke-width: 1; stroke-dasharray: 3,3; }
.data-chart-svg .hover-dot { opacity: 0; }
.data-chart-svg .hover-dot circle { r: 4.5; stroke: var(--white); stroke-width: 2; }
.data-chart-svg .hover-dot.a circle { fill: var(--navy); }
.data-chart-svg .hover-dot.b circle { fill: #6F8F58; }
.data-chart-svg .capture { fill: transparent; cursor: crosshair; }
.data-chart-tooltip {
  position: absolute;
  pointer-events: none;
  background: #22283a;
  color: #fff;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 12.5px;
  line-height: 1.5;
  opacity: 0;
  transform: translate(-50%, -110%);
  transition: opacity 0.06s ease;
  white-space: nowrap;
  z-index: 5;
}
.data-chart-tooltip .tip-age { font-weight: 700; margin-bottom: 2px; display: block; }
.data-chart-tooltip .tip-row { display: flex; justify-content: space-between; gap: 14px; }
.data-chart-tooltip .tip-row .tip-key { display: flex; align-items: center; gap: 6px; }
.data-chart-tooltip .tip-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
@media (max-width: 560px) {
  .chart-stats { grid-template-columns: 1fr; }
}

/* ---------- leak audit widget (interactive coffee-vs-leaks calculator) ----------
   Built on .calc-widget's card look, same as the chart widget above. Coffee
   reuses the site's navy (its own literal --blue/--blue-fill matched the
   site's --navy/--navy-soft exactly), leaks reuse the same sage used for
   series B in the Roth IRA chart, so the two embedded widgets read as one
   consistent "second series" color across posts. */
.leak-group { margin-bottom: 22px; }
.leak-group-label {
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--navy);
  margin: 0 0 4px;
}
.leak-group-hint { display: block; font-size: 12.5px; font-weight: 400; text-transform: none; letter-spacing: normal; color: var(--ink-muted); opacity: 0.7; margin-top: 2px; }
.leak-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
  flex-wrap: wrap;
}
.leak-row:first-of-type { border-top: none; padding-top: 4px; }
.leak-row-label { flex: 1; min-width: 180px; }
.leak-row-label .leak-name { display: block; font-size: 14.5px; font-weight: 600; color: var(--ink-muted); }
.leak-row-label .leak-hint { display: block; font-size: 12.5px; color: var(--ink-muted); opacity: 0.65; margin-top: 2px; }
.leak-field { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.leak-field .leak-prefix { color: var(--ink-muted); opacity: 0.55; font-size: 14px; }
.leak-field .leak-unit { color: var(--ink-muted); opacity: 0.7; font-size: 12.5px; white-space: nowrap; }
.leak-field input[type="number"] {
  width: 72px;
  font: inherit;
  font-variant-numeric: tabular-nums;
  font-size: 15px;
  padding: 7px 8px;
  border: 1.4px solid var(--line);
  border-radius: 6px;
  background: var(--white);
  color: var(--navy);
  text-align: right;
}
.leak-field input[type="number"]:focus { outline: none; border-color: var(--accent); }
.leak-switch {
  position: relative;
  width: 40px;
  height: 24px;
  flex-shrink: 0;
  border-radius: 999px;
  background: var(--line);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background 0.15s ease;
}
.leak-switch[aria-checked="true"] { background: #6F8F58; }
.leak-switch .leak-knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 1px 2px rgba(0,0,0,0.25);
  transition: transform 0.15s ease;
}
.leak-switch[aria-checked="true"] .leak-knob { transform: translateX(16px); }
.leak-switch:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.leak-toggle-row.is-off .leak-row-label { opacity: 0.45; }
.leak-toggle-row.is-off .leak-field { opacity: 0.45; }
.leak-results { border-top: 1px solid var(--line); padding-top: 22px; }
.leak-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 22px; }
.leak-tile { background: var(--white); border: 1px solid var(--line); border-radius: 8px; padding: 16px; }
.leak-tile-label { font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 700; display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.leak-tile.coffee .leak-tile-label { color: var(--navy); }
.leak-tile.leaks .leak-tile-label { color: #6F8F58; }
.leak-swatch { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }
.leak-swatch.coffee { background: var(--navy-soft); }
.leak-swatch.leaks { background: #6F8F58; }
.leak-tile-value { display: block; font-family: var(--serif); font-weight: 700; font-size: 28px; font-variant-numeric: tabular-nums; line-height: 1; color: var(--ink-muted); }
.leak-tile-sub { display: block; color: var(--ink-muted); opacity: 0.65; font-size: 12px; margin-top: 6px; }
.leak-bars { display: flex; flex-direction: column; gap: 14px; margin-bottom: 18px; }
.leak-bar-row { display: flex; align-items: center; gap: 12px; }
.leak-bar-name { width: 60px; flex-shrink: 0; font-size: 13px; font-weight: 600; color: var(--ink-muted); }
.leak-bar-track { flex: 1; height: 26px; background: var(--white); border: 1px solid var(--line); border-radius: 7px; overflow: hidden; position: relative; display: block; }
.leak-bar-fill { height: 100%; border-radius: 6px 2px 2px 6px; transition: width 0.25s ease; min-width: 3px; display: block; }
.leak-bar-fill.coffee { background: var(--navy-soft); }
.leak-bar-fill.leaks { background: #6F8F58; }
.leak-bar-amount { width: 78px; flex-shrink: 0; text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; font-size: 14.5px; color: var(--ink-muted); }
.leak-verdict { border-radius: 8px; padding: 16px 18px; font-size: 14.5px; line-height: 1.55; background: rgba(111,143,88,0.14); border: 1px solid var(--line); color: var(--ink-muted); }
.leak-verdict strong { font-weight: 700; }
.leak-verdict.coffee-wins { background: rgba(58,88,133,0.10); }
@media (max-width: 480px) {
  .leak-row { flex-wrap: wrap; }
  .leak-field { margin-left: auto; }
  .leak-tiles { grid-template-columns: 1fr; }
}

/* ---------- BNPL stacking widget (Sept 11 "stack check" calculator) ---------- */
.bnpl-widget .calc-sub { margin-bottom: 20px; }
.bnpl-plans { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }
.bnpl-plan-row {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--white);
  border: 1.4px solid var(--line);
  border-radius: 8px;
  padding: 12px 16px;
}
.bnpl-plan-row .bnpl-label {
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink-muted);
  opacity: 0.7;
  min-width: 52px;
}
.bnpl-plan-row input[type="range"] { flex: 1; accent-color: var(--accent); }
.bnpl-plan-row .bnpl-amt {
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 700;
  color: var(--navy);
  min-width: 48px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.bnpl-plan-row .bnpl-remove {
  background: none;
  border: none;
  color: var(--ink-muted);
  opacity: 0.45;
  font-size: 18px;
  cursor: pointer;
  padding: 2px 4px;
  line-height: 1;
}
.bnpl-plan-row .bnpl-remove:hover { opacity: 1; color: #a45c4f; }
.bnpl-add-btn {
  display: block;
  width: 100%;
  background: var(--accent-bg);
  border: none;
  border-radius: 8px;
  padding: 11px;
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink-muted);
  cursor: pointer;
  margin-bottom: 24px;
}
.bnpl-add-btn:hover { opacity: 0.85; }
.bnpl-add-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.bnpl-total-box {
  border-top: 1px solid var(--line);
  padding-top: 20px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}
.bnpl-total-label { font-size: 13.5px; color: var(--ink-muted); opacity: 0.75; }
.bnpl-total-amt { font-family: var(--serif); font-weight: 700; font-size: 28px; color: var(--navy); }
@media (max-width: 480px) {
  .bnpl-plan-row { flex-wrap: wrap; }
  .bnpl-plan-row .bnpl-label { min-width: 100%; }
}

/* ---------- quiz widget (index-funds-vs-stock-picking: "which type of
   investor are you" quiz — auto-advances on click, no right/wrong answers,
   tallies a lean toward index-investing vs. stock-picking) ---------- */
.quiz-widget .calc-sub { margin-bottom: 18px; }
.quiz-progress {
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-muted);
  opacity: 0.6;
  text-align: center;
  margin-bottom: 16px;
}
.quiz-card {
  background: var(--white);
  border: 1.4px solid var(--line);
  border-radius: 10px;
  padding: 22px 24px;
}
.quiz-prompt {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.4;
  margin: 0 0 16px;
}
.quiz-options { display: flex; flex-direction: column; gap: 8px; }
.quiz-opt-btn {
  text-align: left;
  background: var(--cream);
  border: 1.4px solid var(--line);
  border-radius: 8px;
  padding: 12px 14px;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink-muted);
  cursor: pointer;
}
.quiz-opt-btn:hover { border-color: var(--accent); background: var(--accent-bg); }
.quiz-result {
  display: none;
  background: var(--white);
  border: 1.4px solid var(--line);
  border-radius: 10px;
  padding: 32px 26px;
  text-align: center;
}
.quiz-result-badge {
  display: inline-block;
  padding: 6px 18px;
  border-radius: 20px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.quiz-result-badge.is-index { background: rgba(143,168,120,0.22); color: var(--navy); }
.quiz-result-badge.is-picker { background: rgba(164,92,79,0.16); color: var(--navy); }
.quiz-result-title { font-family: var(--serif); font-weight: 700; font-size: 24px; color: var(--navy); margin: 0 0 14px; }
.quiz-split-bar { display: flex; height: 10px; border-radius: 6px; overflow: hidden; margin-bottom: 8px; }
.quiz-split-fill.is-index { background: var(--accent); }
.quiz-split-fill.is-picker { background: #a45c4f; }
.quiz-split-labels {
  display: flex;
  justify-content: space-between;
  font-family: var(--sans);
  font-size: 11.5px;
  color: var(--ink-muted);
  opacity: 0.65;
  margin-bottom: 20px;
}
.quiz-result-text { font-size: 14px; color: var(--ink-muted); opacity: 0.85; line-height: 1.6; text-align: left; margin: 0 0 20px; }
.quiz-retry-btn {
  background: var(--accent-bg);
  border: none;
  border-radius: 8px;
  padding: 10px 22px;
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink-muted);
  cursor: pointer;
}
.quiz-retry-btn:hover { opacity: 0.85; }

/* ---------- avalanche vs. snowball payoff-order widget (Sept 18) ----------
   Editable debt table plus an extra-payment slider, feeding two result
   cards that just re-sort the same list two different ways. Reuses the
   navy/sage "series A vs. series B" split already established by the
   chart widget and leak-audit widget elsewhere on the site - navy for the
   math-optimal method, sage for the behavior-first method. */
.avalanche-widget .calc-sub { margin-bottom: 20px; }
.debts-table { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.debt-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--white);
  border: 1.4px solid var(--line);
  border-radius: 8px;
  padding: 10px 14px;
  flex-wrap: wrap;
}
.debt-row .debt-name {
  flex: 1 1 120px;
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--navy);
}
.debt-field { display: flex; flex-direction: column; gap: 3px; flex: 1 1 90px; }
.debt-field label {
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-muted);
  opacity: 0.6;
}
.debt-field input {
  font: inherit;
  font-variant-numeric: tabular-nums;
  font-size: 14px;
  padding: 6px 8px;
  border: 1.4px solid var(--line);
  border-radius: 6px;
  background: var(--cream);
  color: var(--navy);
}
.debt-field input:focus { outline: none; border-color: var(--accent); }
.extra-row {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--white);
  border: 1.4px solid var(--line);
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.extra-row label {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-muted);
  opacity: 0.75;
  white-space: nowrap;
}
.extra-row input[type="range"] { flex: 1; min-width: 120px; accent-color: var(--accent); }
.extra-row .extra-val { font-family: var(--serif); font-size: 17px; font-weight: 700; color: var(--navy); min-width: 64px; text-align: right; }
.avalanche-results { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.method-card { border-radius: 8px; padding: 18px 16px; border: 1px solid var(--line); }
.method-card.is-avalanche { background: rgba(58,88,133,0.08); }
.method-card.is-snowball { background: rgba(111,143,88,0.14); }
.method-card h4 {
  font-family: var(--serif);
  font-size: 16px;
  margin: 0 0 4px;
  text-align: center;
}
.method-card.is-avalanche h4 { color: var(--navy); }
.method-card.is-snowball h4 { color: #6F8F58; }
.method-card .method-rule {
  text-align: center;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 700;
  color: var(--ink-muted);
  opacity: 0.6;
  margin: 0 0 14px;
}
.method-order { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.method-order li {
  font-size: 13px;
  color: var(--ink-muted);
  background: var(--white);
  border-radius: 6px;
  padding: 8px 10px;
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
.method-order li .mo-name { font-weight: 700; color: var(--navy); }
.method-order li .mo-detail { opacity: 0.75; white-space: nowrap; }
@media (max-width: 560px) {
  .avalanche-results { grid-template-columns: 1fr; }
  .debt-row { flex-direction: column; align-items: stretch; }
  .debt-field { flex: 1 1 auto; }
}

/* ---------- sally vs. charlie investing race widget (Sept 21) ----------
   Editable start-age/monthly-amount controls for two racers, an animated
   bar race up to age 65, then a results readout. Reuses the same navy/sage
   "series A vs. series B" split as the avalanche widget above - navy for
   the more time-efficient racer (Sally, started earlier), sage for the
   racer who caught up with more money but less efficiently (Charlie). */
.race-widget .calc-sub { margin-bottom: 20px; }
.race-controls { display: flex; gap: 12px; margin-bottom: 22px; flex-wrap: wrap; }
.race-control-card { flex: 1 1 160px; background: var(--white); border: 1.4px solid var(--line); border-radius: 8px; padding: 14px 16px; }
.race-control-card .race-name { font-family: var(--serif); font-weight: 700; font-size: 15px; color: var(--navy); margin: 0 0 10px; }
.race-control-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.race-control-row:last-child { margin-bottom: 0; }
.race-control-row label { font-family: var(--sans); font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-muted); opacity: 0.65; min-width: 66px; }
.race-control-row input { flex: 1; font-family: var(--sans); font-size: 14px; color: var(--navy); border: 1.4px solid var(--line); border-radius: 6px; padding: 6px 9px; background: var(--cream); }
.race-control-row input:focus { outline: none; border-color: var(--accent); }
.race-track { background: var(--white); border: 1.4px solid var(--line); border-radius: 8px; padding: 20px 18px; margin-bottom: 20px; }
.race-lane { margin-bottom: 16px; }
.race-lane:last-of-type { margin-bottom: 12px; }
.race-lane-label { display: flex; justify-content: space-between; font-family: var(--sans); font-size: 13px; font-weight: 700; color: var(--navy); margin-bottom: 5px; }
.race-lane-label span:last-child { font-family: var(--serif); font-variant-numeric: tabular-nums; }
.race-bar-bg { background: var(--accent-bg); border-radius: 20px; height: 20px; overflow: hidden; }
.race-bar-fill { height: 100%; width: 0%; border-radius: 20px; transition: width 0.15s linear; }
.race-bar-fill.is-sally { background: var(--navy); }
.race-bar-fill.is-charlie { background: #6F8F58; }
.race-year-marker { font-family: var(--sans); font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-muted); opacity: 0.6; text-align: center; margin-top: 4px; }
.race-btn { display: block; width: 100%; font-family: var(--sans); background: var(--navy); color: var(--white); border: none; border-radius: 6px; padding: 13px; font-size: 14.5px; font-weight: 700; cursor: pointer; margin-bottom: 20px; transition: opacity .15s ease; }
.race-btn:hover { opacity: 0.88; }
.race-btn:disabled { opacity: 0.5; cursor: default; }
.race-results { display: none; }
.race-results.is-shown { display: block; }
.race-result-row { display: flex; gap: 14px; margin-bottom: 14px; flex-wrap: wrap; }
.race-result-card { flex: 1 1 160px; border-radius: 8px; padding: 16px 14px; text-align: center; }
.race-result-card.is-sally { background: rgba(58,88,133,0.08); }
.race-result-card.is-charlie { background: rgba(111,143,88,0.14); }
.race-r-label { font-family: var(--sans); font-size: 11px; color: var(--ink-muted); opacity: 0.7; margin: 0 0 4px; }
.race-r-val { font-family: var(--serif); font-weight: 700; font-size: 22px; color: var(--navy); margin: 0 0 6px; }
.race-r-sub { font-family: var(--sans); font-size: 11.5px; color: var(--ink-muted); opacity: 0.75; }
.race-verdict { background: var(--accent-bg); border-radius: 8px; padding: 16px 18px; font-size: 13.5px; color: var(--ink-muted); line-height: 1.6; text-align: left; }
.race-verdict strong { color: var(--navy); }
@media (max-width: 560px) {
  .race-result-row { flex-direction: column; }
}

/* ---------- marginal utility takeout-order widget (Sept 23) ----------
   Click-to-order simulator: each click adds a satisfaction bar that gets
   shorter (then negative) as diminishing marginal utility sets in, while
   the cost per order stays flat. Bar color runs sage -> gold -> dusty rose
   -> rust as satisfaction falls, echoing the site's warm cream palette
   rather than a stoplight red/green. */
.mu-widget { text-align: center; }
.mu-widget .calc-sub { margin-bottom: 20px; }
.mu-stats-row { display: flex; gap: 12px; margin-bottom: 20px; }
.mu-stat-card { flex: 1; background: var(--white); border: 1.4px solid var(--line); border-radius: 8px; padding: 12px; }
.mu-stat-label { font-family: var(--sans); font-size: 11px; color: var(--ink-muted); opacity: 0.65; margin: 0 0 4px; }
.mu-stat-val { font-family: var(--serif); font-weight: 700; font-size: 22px; color: var(--navy); margin: 0; }
.mu-chart { background: var(--white); border: 1.4px solid var(--line); border-radius: 8px; padding: 20px 18px 12px; margin-bottom: 20px; }
.mu-bars { display: flex; align-items: flex-end; justify-content: center; gap: 10px; height: 140px; margin-bottom: 10px; }
.mu-bar-col { display: flex; flex-direction: column; align-items: center; width: 44px; }
.mu-bar { width: 100%; border-radius: 6px 6px 0 0; transition: height 0.3s ease; }
.mu-bar-num { font-family: var(--sans); font-size: 11px; color: var(--ink-muted); opacity: 0.75; margin-top: 4px; }
.mu-empty-note { font-family: var(--sans); font-size: 12.5px; color: var(--ink-muted); opacity: 0.6; padding: 40px 0; margin: 0; }
.mu-reaction { background: var(--accent-bg); border-radius: 8px; padding: 14px 16px; font-size: 13.5px; color: var(--ink-muted); line-height: 1.55; margin-bottom: 18px; min-height: 20px; text-align: left; }
.mu-btn-row { display: flex; gap: 10px; }
.mu-btn { flex: 1; font-family: var(--sans); background: var(--navy); color: var(--white); border: none; border-radius: 6px; padding: 12px; font-size: 14px; font-weight: 700; cursor: pointer; transition: opacity .15s ease; }
.mu-btn:hover { opacity: 0.88; }
.mu-btn:disabled { opacity: 0.4; cursor: default; }
.mu-btn-reset { background: none; border: 1.4px solid var(--navy); color: var(--navy); }
.mu-btn-reset:hover { background: var(--accent-bg); opacity: 1; }
@media (max-width: 480px) {
  .mu-stats-row { flex-direction: column; }
}

/* ---------- $500 balance simulator widget (Sept 25) ----------
   One balance, two fates: minimum payments vs. left untouched. A toggle
   swaps which scenario the track animates. Minimum payments use navy (the
   debt-free pillar color, the "better" outcome); left untouched uses gold,
   since it's the outcome that costs more. */
.balance-widget .calc-sub { margin-bottom: 20px; }
.balance-controls { display: flex; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.balance-control-card { flex: 1 1 160px; background: var(--white); border: 1.4px solid var(--line); border-radius: 8px; padding: 14px 16px; }
.balance-control-card label { display: block; font-family: var(--sans); font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-muted); opacity: 0.65; margin-bottom: 8px; }
.balance-control-card input[type="range"] { width: 100%; accent-color: var(--accent); }
.balance-control-val { display: block; font-family: var(--serif); font-weight: 700; font-size: 17px; color: var(--navy); margin-top: 6px; }
.balance-toggle-row { display: flex; gap: 10px; margin-bottom: 18px; }
.balance-toggle-btn { flex: 1; font-family: var(--sans); background: var(--white); border: 1.4px solid var(--line); border-radius: 6px; padding: 12px; font-size: 13.5px; font-weight: 700; color: var(--navy); cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.balance-toggle-btn.is-active-min { border-color: var(--navy); background: var(--accent-bg); }
.balance-toggle-btn.is-active-untouched { border-color: var(--gold); background: var(--gold-bg); }
.balance-track { background: var(--white); border: 1.4px solid var(--line); border-radius: 8px; padding: 20px 18px; margin-bottom: 18px; text-align: center; }
.balance-bar-bg { background: var(--accent-bg); border-radius: 20px; height: 22px; overflow: hidden; margin-bottom: 10px; }
.balance-bar-fill { height: 100%; width: 0%; border-radius: 20px; transition: width 0.12s linear; }
.balance-bar-fill.is-min { background: var(--navy); }
.balance-bar-fill.is-untouched { background: var(--gold); }
.balance-month { font-family: var(--sans); font-size: 12px; color: var(--ink-muted); opacity: 0.7; margin: 0 0 4px; }
.balance-live { font-family: var(--serif); font-weight: 700; font-size: 30px; color: var(--navy); margin: 0; }
.balance-run-btn { display: block; width: 100%; font-family: var(--sans); background: var(--navy); color: var(--white); border: none; border-radius: 6px; padding: 13px; font-size: 14.5px; font-weight: 700; cursor: pointer; margin-bottom: 18px; transition: opacity .15s ease; }
.balance-run-btn:hover { opacity: 0.88; }
.balance-run-btn:disabled { opacity: 0.5; cursor: default; }
.balance-results { display: none; background: var(--accent-bg); border-radius: 8px; padding: 16px 18px; font-size: 13.5px; color: var(--ink-muted); line-height: 1.6; text-align: left; }
.balance-results.is-shown { display: block; }
.balance-results strong { color: var(--navy); }
@media (max-width: 480px) {
  .balance-toggle-row { flex-direction: column; }
}

/* ---------- finds / budget picks (Sept 29) ----------
   finds.html is a shoppable grid, like a Pinterest board; each card opens
   a detail page pairing the full graphic with a numbered, linked shopping
   list beside it - reuses the book-detail image+body layout at heart. */
.finds-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.finds-card { display: block; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--white); transition: border-color .15s ease; }
.finds-card:hover { border-color: var(--accent); }
.finds-card img { width: 100%; display: block; }
.finds-card-body { padding: 16px 18px 20px; }
.finds-card-body h4 { font-family: var(--serif); font-size: 16px; color: var(--navy); margin: 0 0 4px; }
.finds-card-body p { font-size: 13px; color: var(--ink-muted); margin: 0; }

.finds-detail { display: flex; gap: 40px; align-items: flex-start; max-width: 900px; margin: 0 auto; }
.finds-detail-image { width: 340px; flex-shrink: 0; border-radius: 8px; box-shadow: 0 14px 30px -16px rgba(0,0,0,0.35); }
.finds-list { min-width: 0; flex: 1; }
.finds-group-label { font-family: var(--sans); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-muted); opacity: 0.6; margin: 22px 0 10px; }
.finds-group-label:first-child { margin-top: 0; }
.finds-item { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.finds-item:last-child { border-bottom: none; }
.finds-item-num { font-family: var(--serif); font-weight: 700; font-size: 14px; color: var(--white); background: var(--navy); width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.finds-item-body { min-width: 0; }
.finds-item-title { font-family: var(--serif); font-size: 15px; font-weight: 700; color: var(--navy); margin: 0 0 2px; }
.finds-item-meta { font-size: 12.5px; color: var(--ink-muted); opacity: 0.75; margin: 0 0 6px; }
.finds-item-links { display: flex; gap: 14px; flex-wrap: wrap; }
.finds-item-link { font-size: 13px; font-weight: 600; color: var(--navy); border-bottom: 1.4px solid var(--accent); padding-bottom: 1px; }
@media (max-width: 720px) {
  .finds-detail { flex-direction: column; align-items: center; text-align: left; }
  .finds-detail-image { width: 100%; max-width: 340px; }
}
@media (max-width: 640px) {
  .finds-grid { grid-template-columns: 1fr; }
}

/* ---------- priority waterfall widget: Roth/401k/brokerage (Sept 28) ---------- */
.priority-widget .calc-sub { margin-bottom: 20px; }
.priority-controls { display: flex; gap: 12px; margin-bottom: 22px; flex-wrap: wrap; }
.priority-control-card { flex: 1 1 220px; background: var(--white); border: 1.4px solid var(--line); border-radius: 8px; padding: 14px 16px; }
.priority-control-card label { display: block; font-family: var(--sans); font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-muted); opacity: 0.65; margin-bottom: 8px; }
.priority-control-card input[type="range"] { width: 100%; }
.priority-control-val { font-family: var(--serif); font-weight: 700; font-size: 17px; color: var(--navy); margin-top: 6px; }
.priority-stack { background: var(--white); border: 1.4px solid var(--line); border-radius: 8px; padding: 18px 18px 6px; margin-bottom: 16px; }
.priority-bucket { margin-bottom: 16px; }
.priority-bucket-label { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--sans); font-size: 13px; font-weight: 700; color: var(--navy); margin-bottom: 5px; }
.priority-bucket-label .priority-bucket-amt { font-family: var(--serif); font-variant-numeric: tabular-nums; font-size: 15px; }
.priority-bucket-sub { font-size: 11.5px; color: var(--ink-muted); opacity: 0.7; margin: 0 0 6px; }
.priority-bar-bg { background: var(--accent-bg); border-radius: 20px; height: 16px; overflow: hidden; }
.priority-bar-fill { height: 100%; width: 0%; border-radius: 20px; background: var(--navy); transition: width 0.2s ease; }
.priority-bucket.is-match .priority-bar-fill { background: var(--accent); }
.priority-bucket.is-roth .priority-bar-fill { background: var(--navy); }
.priority-bucket.is-401k .priority-bar-fill { background: var(--navy-soft); }
.priority-bucket.is-brokerage .priority-bar-fill { background: var(--gold); }
.priority-warning { background: var(--gold-bg); border-radius: 8px; padding: 14px 16px; font-size: 13px; color: var(--ink-muted); line-height: 1.6; margin-top: 4px; }
.priority-warning strong { color: var(--navy); }

/* ---------- hidden-cost reveal widget: free lunch (Sept 30) ---------- */
.reveal-widget .calc-sub { margin-bottom: 20px; }
.reveal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 18px; }
.reveal-card { background: var(--white); border: 1.4px solid var(--line); border-radius: 8px; padding: 16px; cursor: pointer; text-align: left; font-family: inherit; transition: border-color .15s ease; }
.reveal-card:hover { border-color: var(--accent); }
.reveal-card-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.reveal-card-label { font-family: var(--serif); font-weight: 700; font-size: 15px; color: var(--navy); }
.reveal-card-tap { font-size: 11px; color: var(--ink-muted); opacity: 0.6; text-transform: uppercase; letter-spacing: 0.04em; }
.reveal-card-offer { font-size: 13px; color: var(--ink-muted); opacity: 0.8; margin: 8px 0 0; }
.reveal-card-cost { display: none; margin-top: 12px; padding-top: 12px; border-top: 1.4px dashed var(--line); font-size: 13px; color: var(--ink-muted); line-height: 1.6; }
.reveal-card-cost strong { color: var(--navy); }
.reveal-card.is-open .reveal-card-cost { display: block; }
.reveal-card.is-open { border-color: var(--navy); }
.reveal-tally { display: flex; justify-content: space-between; align-items: center; background: var(--accent-bg); border-radius: 8px; padding: 14px 16px; margin-bottom: 10px; }
.reveal-tally-label { font-size: 13px; color: var(--ink-muted); }
.reveal-tally-val { font-family: var(--serif); font-weight: 700; font-size: 20px; color: var(--navy); }
.reveal-reset-btn { background: none; border: none; font-family: var(--sans); font-size: 13px; font-weight: 700; color: var(--navy); border-bottom: 1.4px solid var(--accent); padding: 0 0 1px; cursor: pointer; }
@media (max-width: 560px) {
  .reveal-grid { grid-template-columns: 1fr; }
}

/* ---------- Berkshire vs S&P 500 race widget: Buffett lore (Oct 2) ---------- */
.berkshire-widget .calc-sub { margin-bottom: 20px; }
.berkshire-control-card { background: var(--white); border: 1.4px solid var(--line); border-radius: 8px; padding: 14px 16px; margin-bottom: 22px; }
.berkshire-control-row { display: flex; align-items: center; gap: 10px; }
.berkshire-control-row label { font-family: var(--sans); font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-muted); opacity: 0.65; min-width: 150px; }
.berkshire-control-row input[type="range"] { flex: 1; }
.berkshire-control-val { font-family: var(--serif); font-weight: 700; font-size: 16px; color: var(--navy); min-width: 70px; text-align: right; }
.race-bar-fill.is-berkshire { background: var(--navy); }
.race-bar-fill.is-sp500 { background: var(--accent); }
.race-result-card.is-berkshire { background: rgba(58,88,133,0.08); }
.race-result-card.is-sp500 { background: var(--accent-bg); }

/* ---------- $100/month, 3 return rates widget (Oct 5) ---------- */
.triple-rate-widget .calc-sub { margin-bottom: 20px; }
.triple-control-card { background: var(--white); border: 1.4px solid var(--line); border-radius: 8px; padding: 14px 16px; margin-bottom: 22px; }
.triple-control-row { display: flex; align-items: center; gap: 10px; }
.triple-control-row label { font-family: var(--sans); font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-muted); opacity: 0.65; min-width: 150px; }
.triple-control-row input[type="range"] { flex: 1; }
.triple-control-val { font-family: var(--serif); font-weight: 700; font-size: 16px; color: var(--navy); min-width: 56px; text-align: right; }
.race-bar-fill.is-six { background: var(--gold); }
.race-bar-fill.is-eight { background: var(--accent); }
.race-bar-fill.is-ten { background: var(--navy); }
.race-result-card.is-six { background: var(--gold-bg); }
.race-result-card.is-eight { background: var(--accent-bg); }
.race-result-card.is-ten { background: rgba(58,88,133,0.08); }
.triple-rate-widget .race-result-row { flex-wrap: wrap; }
.triple-rate-widget .race-result-card { flex: 1 1 150px; }

/* ---------- scroll reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal-1 { transition-delay: 0.08s; }
.reveal-2 { transition-delay: 0.16s; }
.reveal-3 { transition-delay: 0.24s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { transition: none; opacity: 1; transform: none; }
}

.scheduled-notice {
  max-width: 560px;
  margin: 0 auto 80px;
  text-align: center;
  padding: 40px 30px;
  border: 1px dashed var(--line);
  border-radius: 3px;
  color: var(--ink-muted);
  font-size: 15.5px;
}
.scheduled-notice strong { display: block; color: var(--navy); font-family: var(--serif); font-size: 19px; margin-bottom: 10px; }
.scheduled-notice a { font-weight: 600; color: var(--navy); border-bottom: 1.4px solid var(--accent); }

.related { max-width: 680px; margin: 0 auto; padding-bottom: 70px; }
.related h4 { font-family: var(--serif); font-size: 15px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-muted); margin-bottom: 20px; }
.related-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

/* ---------- nav dropdown (Three Pillars) ---------- */
.nav-dropdown { position: relative; }
.nav-dropdown-btn {
  position: relative;
  padding: 6px 0;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 19px;
  font-weight: 500;
  color: var(--navy);
  transition: color .15s ease;
}
.nav-dropdown-btn:hover,
.nav-dropdown-btn:focus,
.nav-dropdown:hover .nav-dropdown-btn,
.nav-dropdown:focus-within .nav-dropdown-btn { color: var(--accent); }
.nav-dropdown-btn::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transition: transform .2s ease;
}
.nav-dropdown-btn:hover::after,
.nav-dropdown:hover .nav-dropdown-btn::after,
.nav-dropdown:focus-within .nav-dropdown-btn::after { transform: scaleX(1); }
.nav-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 5px;
  box-shadow: 0 14px 30px -18px rgba(58,88,133,0.35);
  padding: 8px;
  min-width: 230px;
  display: none;
  z-index: 30;
  margin-top: 16px;
  text-align: left;
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu { display: block; }
.nav-dropdown-menu a {
  display: block;
  padding: 9px 12px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--navy);
  border-radius: 3px;
}
.nav-dropdown-menu a:hover { background: var(--accent-bg); }

/* ---------- blog toolbar (filters + sort) ---------- */
.blog-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 48px;
}
.blog-toolbar .filters { margin-bottom: 0; }
.toolbar-right { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.search-input {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--navy);
  border: 1.4px solid var(--line);
  border-radius: 999px;
  padding: 9px 16px;
  background: var(--white);
  min-width: 180px;
}
.search-input::placeholder { color: var(--ink-muted); opacity: 0.55; }
.search-input:focus { outline: none; border-color: var(--accent); }
.sort-select {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--navy);
  border: 1.4px solid var(--line);
  border-radius: 999px;
  padding: 9px 32px 9px 16px;
  background: var(--white) url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%233A5885%22 stroke-width=%222%22%3E%3Cpath d=%22M6 9l6 6 6-6%22/%3E%3C/svg%3E') no-repeat right 10px center / 14px;
  appearance: none;
  cursor: pointer;
}
.sort-select:hover { border-color: var(--accent); }

/* ---------- about page ---------- */
.about-head { text-align: center; padding: 64px 0 8px; max-width: 680px; margin: 0 auto; }
.about-head .kicker { margin-bottom: 14px; }
.about-portrait {
  width: 176px;
  height: 176px;
  border-radius: 50%;
  object-fit: cover;
  margin: 22px auto 0;
  display: block;
  border: 3px solid #ffffff;
  box-shadow: 0 0 0 1px var(--line), 0 8px 24px rgba(58, 88, 133, 0.15);
}

/* ---------- research & books ---------- */
.rb-section { margin-bottom: 80px; }
.rb-section:last-child { margin-bottom: 0; }
.rb-section-head { text-align: center; max-width: 620px; margin: 0 auto 40px; }
.book-of-week {
  display: flex;
  gap: 28px;
  align-items: flex-start;
  background: var(--accent-bg);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 30px 32px;
  margin-bottom: 34px;
}
.book-of-week .bow-cover {
  width: 130px;
  flex-shrink: 0;
  border-radius: 4px;
  box-shadow: 0 10px 24px -12px rgba(0,0,0,0.35);
}
.book-of-week .bow-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
  display: block;
}
.book-of-week h4 { font-family: var(--serif); font-size: 21px; margin: 0 0 6px; }
.book-of-week .bow-author { font-size: 13.5px; color: var(--ink-muted); margin: 0 0 12px; }
.book-of-week p.bow-desc { font-size: 14.5px; color: var(--ink-muted); margin: 0 0 12px; max-width: 560px; }
.rb-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
}
.rb-card {
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 22px 24px;
  background: var(--white);
}
.rb-card .rb-tag {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 10px;
}
.rb-card h4 { font-family: var(--serif); font-size: 17px; margin: 0 0 6px; }
.rb-card h4 a { color: var(--navy); }
.rb-card h4 a:hover { color: var(--navy-soft); }
.rb-card p { font-size: 13.5px; color: var(--ink-muted); margin: 0 0 14px; }
.rb-card a.rb-link { font-size: 13px; font-weight: 600; color: var(--navy); border-bottom: 1.4px solid var(--accent); padding-bottom: 1px; }

/* rb-card-book: adds a small cover thumbnail beside the title/blurb for
   book picks that have a cover image on file. Cards without one (no
   cover uploaded yet) just render as a plain .rb-card with no gap. */
.rb-card-book { display: flex; gap: 16px; align-items: flex-start; }
.rb-card-book .rb-book-cover {
  width: 104px;
  flex-shrink: 0;
  border-radius: 3px;
  box-shadow: 0 8px 18px -10px rgba(0,0,0,0.35);
}
.rb-card-book .rb-book-body { min-width: 0; }
.rb-empty {
  text-align: center;
  padding: 40px 20px;
  border: 1px dashed var(--line);
  border-radius: 4px;
  color: var(--ink-muted);
  font-size: 13.5px;
}

/* rb-grid-3: used on research-and-books.html's trimmed "3 most recent
   books" grid, so exactly 3 cards fill 3 columns with no orphaned card
   left alone in its own row (the plain 2-col .rb-grid did that with 5). */
.rb-grid-3 { grid-template-columns: repeat(3, 1fr); }
.rb-see-all { text-align: center; margin-top: 26px; }

/* hub-grid/hub-card: the two big link-cards on the "Research & Books" and
   "Work With Me" landing pages, now that each of their sections lives on
   its own dedicated page. */
.hub-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  max-width: 760px;
  margin: 0 auto;
}
.hub-card {
  display: block;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 36px 32px;
  background: var(--white);
  text-align: left;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.hub-card:hover { border-color: var(--accent); box-shadow: 0 16px 32px -20px rgba(58,88,133,0.28); transform: translateY(-2px); }
.hub-card h3 { font-family: var(--serif); font-size: 22px; color: var(--navy); margin: 0 0 10px; }
.hub-card p { font-size: 14px; color: var(--ink-muted); line-height: 1.65; margin: 0 0 16px; }
.hub-card .hub-card-arrow { font-size: 13px; font-weight: 700; color: var(--navy); }

/* book-detail: the standalone page for a single book pick (cover, full
   description, buy link). */
.book-detail {
  display: flex;
  gap: 40px;
  align-items: flex-start;
  max-width: 820px;
  margin: 0 auto;
}
.book-detail-cover {
  width: 220px;
  flex-shrink: 0;
  border-radius: 6px;
  box-shadow: 0 16px 34px -16px rgba(0,0,0,0.4);
}
.book-detail-cover-placeholder {
  height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--accent-bg);
  border: 1px dashed var(--line);
  color: var(--ink-muted);
  font-size: 13px;
  padding: 16px;
  box-shadow: none;
}
.book-detail-body { min-width: 0; }
.book-detail-body .rb-tag { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: 10px; }
.book-detail-body p { font-size: 15.5px; line-height: 1.75; color: var(--ink-muted); margin: 0 0 18px; }

/* ---------- pillar page (evergreen article, no schedule gate) ---------- */
.article-body p.citation {
  font-size: 12.5px;
  color: var(--ink-muted);
  font-style: italic;
  margin: -10px 0 26px;
}
.article-body p.citation-label {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--ink-muted);
  margin: 30px 0 8px;
}
.article-body ul.citation-list {
  list-style: none;
  padding-left: 0;
  margin: 0 0 26px;
  font-size: 12.5px;
  color: var(--ink-muted);
}
.article-body ul.citation-list li { margin: 0 0 6px; }
.article-body ul.citation-list a { text-decoration: underline; }
.pillar-cta {
  text-align: center;
  margin-top: 50px;
  padding-top: 34px;
  border-top: 1px solid var(--line);
}
.pillar-cta a { font-size: 13.5px; font-weight: 600; color: var(--navy); border-bottom: 1.4px solid var(--accent); padding-bottom: 2px; }

/* ---------- work with me (sponsorships / collaboration cards) ---------- */
.work-card {
  max-width: 680px;
  margin: 0 auto;
  text-align: left;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 32px 36px;
}
.work-card .work-card-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
}
.work-card p { font-size: 15.5px; line-height: 1.7; color: var(--ink-muted); margin: 0; }
.work-cta { text-align: center; margin-top: 50px; padding-top: 34px; border-top: 1px solid var(--line); }

/* ---------- mobile / tablet nav (monogram opens a dropdown) ---------- */
@media (max-width: 1024px) {
  .site-nav .wrap {
    display: flex;
    justify-content: flex-start;
  }
  .nav-spacer-mirror { display: none; }
  .brand { cursor: pointer; }
  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    grid-column: unset;
    justify-self: unset;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    background: var(--white);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 18px 34px -20px rgba(58,88,133,0.35);
    padding: 18px 28px 22px;
    z-index: 25;
  }
  .nav-links.mobile-open { display: flex; }
  .nav-links a.nav-item,
  .nav-links .nav-dropdown-btn { padding: 10px 0; width: 100%; text-align: left; }
  .nav-links .btn.js-newsletter-trigger { margin-top: 10px; }
  .nav-links .theme-toggle { margin-top: 10px; }
  .nav-dropdown { width: 100%; }
  .nav-dropdown-menu {
    display: none;
    position: static;
    transform: none;
    box-shadow: none;
    border: none;
    margin: 0 0 4px 14px;
    padding: 0;
    min-width: 0;
  }
  .nav-dropdown-menu.mobile-open { display: block; }
  .nav-dropdown-menu a { padding: 8px 0; }
  article { padding: 0 40px; }
}

@media (max-width: 760px) {
  .pillars-grid, .posts-grid { grid-template-columns: 1fr; }
  .follow-grid { grid-template-columns: 1fr; max-width: 260px; }
  .related-grid { grid-template-columns: 1fr; }
  article { padding: 0 24px; }
  .site-footer .wrap { flex-direction: column; text-align: center; }
  .rb-grid, .rb-grid-3 { grid-template-columns: 1fr; }
  .book-of-week { flex-direction: column; align-items: center; text-align: center; }
  .book-of-week .bow-cover { width: 150px; }
  .book-of-week p.bow-desc { max-width: none; }
  .work-card { padding: 24px 22px; }
  .hub-grid { grid-template-columns: 1fr; max-width: 420px; }
  .rb-card-book { flex-direction: column; align-items: center; text-align: center; }
  .rb-card-book .rb-book-cover { width: 140px; }
  .book-detail { flex-direction: column; align-items: center; text-align: center; }
  .book-detail-cover { width: 170px; }
  .book-detail-cover-placeholder { width: 170px; height: 240px; }
  .blog-toolbar { flex-direction: column; align-items: stretch; }
}