/* ============================================================
   Credit Bubble Bulletin — Design System
   Editorial, minimal, typography-first.
   ============================================================ */

/* ── 1. Design Tokens ──────────────────────────────────────── */
:root {
  /* Palette */
  --c-bg:       #F9F8F6;  /* parchment */
  --c-white:    #ffffff;
  --c-charcoal: #1A1C20;
  --c-slate:    #4A5568;
  --c-accent:   #2B6CB0;
  --c-border:   #E2E8F0;
  --c-breaking: #C05621;

  /* Typography */
  --font-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-sans:  'Inter', system-ui, -apple-system, sans-serif;

  /* Spacing scale */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-6:  1.5rem;
  --sp-8:  2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;

  /* Layout */
  --max-w:      80rem;   /* 1280px */
  --px-mobile:  1rem;
  --px-tablet:  1.5rem;
  --px-desktop: 2rem;

  /* Borders */
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-full: 9999px;

  /* Elevation */
  --shadow-card: 0 10px 25px -5px rgba(0, 0, 0, 0.05);

  /* Motion */
  --t-fast: 0.15s ease;
  --t-base: 0.2s ease;
}


/* ── 2. Reset & Base ───────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html { font-size: 16px; }

body {
  font-family: var(--font-sans);
  background-color: var(--c-bg);
  color: var(--c-charcoal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  line-height: 1.6;
}

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

img {
  max-width: 100%;
  display: block;
}

button {
  font-family: var(--font-sans);
  cursor: pointer;
}


/* ── 3. Layout ─────────────────────────────────────────────── */
.container {
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--px-mobile);
}

@media (min-width: 640px) {
  .container { padding-inline: var(--px-tablet); }
}

@media (min-width: 1024px) {
  .container { padding-inline: var(--px-desktop); }
}

.site-main {
  flex-grow: 1;
  padding-block: var(--sp-8);
}

@media (min-width: 768px) {
  .site-main { padding-block: var(--sp-12); }
}


/* ── 4. Bento Grid ─────────────────────────────────────────── */
.bento-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
}

/* Tablet: 2-column grid */
@media (min-width: 640px) {
  .bento-grid {
    grid-template-columns: 1fr 1fr;
  }
  .bento-span-2    { grid-column: span 2; }
  .bento-span-1    { grid-column: span 1; }
}

/* Desktop: 12-column grid */
@media (min-width: 1024px) {
  .bento-grid {
    grid-template-columns: repeat(12, 1fr);
    gap: var(--sp-8);
  }
  .bento-span-4    { grid-column: span 4; }
  .bento-span-8    { grid-column: span 8; }
  .bento-span-12   { grid-column: span 12; }
}


/* ── 5. Bento Card ─────────────────────────────────────────── */
.bento-card {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  padding: var(--sp-8);
  transition: transform var(--t-base), box-shadow var(--t-base);
}

.bento-card:hover {
  box-shadow: var(--shadow-card);
  transform: translateY(-2px);
}

/* Prevent hover lift on the subscribe section */
.bento-card--flat:hover {
  transform: none;
  box-shadow: none;
}


/* ── 6. Typography ─────────────────────────────────────────── */
.heading-hero {
  font-family: var(--font-serif);
  font-size: clamp(1.75rem, 4vw, 3rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.heading-section {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 2.5vw, 1.875rem);
  font-weight: 700;
  line-height: 1.2;
}

.heading-card {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.2;
}

.label {
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.text-muted  { color: var(--c-slate); }
.text-accent { color: var(--c-accent); }


/* ── 7. Divider ────────────────────────────────────────────── */
.divider {
  width: 100%;
  height: 1px;
  background: var(--c-border);
  border: none;
}


/* ── 8. Buttons ────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.625rem 1.5rem;
  border-radius: var(--radius-full);
  font-size: 0.875rem;
  font-weight: 500;
  border: none;
  transition: background-color var(--t-fast), color var(--t-fast);
  white-space: nowrap;
}

.btn--dark {
  background: var(--c-charcoal);
  color: var(--c-white);
}

.btn--dark:hover {
  background: var(--c-slate);
  color: var(--c-white);
}

.btn--accent {
  background: var(--c-accent);
  color: var(--c-white);
}

.btn--accent:hover {
  background: #1a4f8a;
  color: var(--c-white);
}

.btn--pn {
  background: #EDF1E1;
  color: var(--c-ink);
  border-color: #EDF1E1;
}

.btn--pn:hover {
  background: #dce6c8;
  border-color: #dce6c8;
  color: var(--c-ink);
}


/* ── 9. Link CTAs ──────────────────────────────────────────── */
/* Primary CTA: "Read full commentary →" */
.link-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-weight: 600;
  color: var(--c-charcoal);
  transition: color var(--t-fast);
}

.link-cta:hover { color: var(--c-accent); }

.link-cta::after {
  content: '→';
  display: inline-block;
  transition: transform var(--t-fast);
}

.link-cta:hover::after { transform: translateX(3px); }

.link-cta--back::after { content: none; }
.link-cta--back:hover::after { transform: none; }

/* Secondary CTA: "View all →" */
.link-more {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--c-accent);
  transition: color var(--t-fast);
}

.link-more:hover { color: var(--c-charcoal); }


/* ── 10. Section Header Row ────────────────────────────────── */
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--c-border);
  margin-bottom: var(--sp-8);
  gap: var(--sp-4);
  flex-wrap: wrap;
}


/* ── 11. Header ────────────────────────────────────────────── */
.site-header {
  background: var(--c-white);
  border-bottom: 1px solid var(--c-border);
  position: sticky;
  top: 0;
  z-index: 100;
}

.site-header__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 5rem;
}

.site-logo {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 700;
  /* color: var(--c-charcoal); */
  color: var(--c-accent);
  letter-spacing: -0.01em;
  flex-shrink: 0;
  line-height: 1.2;
}

@media (min-width: 480px) {
  .site-logo { font-size: 1.5rem; }
}

@media (min-width: 768px) {
  .site-logo { font-size: 1.625rem; }
}

.site-logo__tagline {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 400;
  font-style: italic;
  letter-spacing: 0.01em;
  color: var(--c-slate);
  margin-top: 0.1rem;
}

/* Desktop nav */
.desktop-nav {
  display: none;
  align-items: center;
  gap: 2rem;
}

@media (min-width: 768px) {
  .desktop-nav { display: flex; }
}

.desktop-nav a {
  font-weight: 500;
  font-size: 0.9375rem;
  color: var(--c-slate);
  transition: color var(--t-fast);
}

.desktop-nav a:hover    { color: var(--c-charcoal); }
.desktop-nav a.is-active { color: var(--c-charcoal); }

/* ── Nav dropdown (Bubbles menu) ──────────────────────────── */
.nav-dropdown {
  position: relative;
}

.nav-dropdown__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: none;
  border: none;
  padding: 0;
  font-weight: 500;
  font-size: 0.9375rem;
  color: var(--c-slate);
  cursor: pointer;
  transition: color var(--t-fast);
}

.nav-dropdown__toggle:hover,
.nav-dropdown__toggle.is-active {
  color: var(--c-charcoal);
}

.nav-dropdown__chevron {
  width: 10px;
  height: 6px;
  transition: transform var(--t-fast);
}

.nav-dropdown.is-open .nav-dropdown__chevron {
  transform: rotate(180deg);
}

.nav-dropdown__panel {
  position: absolute;
  top: calc(100% + 0.75rem);
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  min-width: 210px;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.09);
  padding: 0.375rem 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-fast), transform var(--t-fast), visibility var(--t-fast);
  z-index: 200;
}

.nav-dropdown.is-open .nav-dropdown__panel {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.nav-dropdown__panel a {
  display: block;
  padding: 0.55rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--c-slate);
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--t-fast), color var(--t-fast);
}

.nav-dropdown__panel a:hover,
.nav-dropdown__panel a.is-active {
  background: var(--c-bg);
  color: var(--c-accent);
}

/* Desktop subscribe button */
.header-subscribe {
  display: none;
}

@media (min-width: 768px) {
  .header-subscribe { display: flex; }
}

/* Mobile menu button */
.mobile-menu-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  background: none;
  border: none;
  color: var(--c-slate);
  transition: color var(--t-fast);
  padding: 0;
}

.mobile-menu-btn:hover { color: var(--c-charcoal); }

@media (min-width: 768px) {
  .mobile-menu-btn { display: none; }
}

/* Hamburger icon (CSS-only) */
.hamburger {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 20px;
  height: 14px;
}

.hamburger span {
  display: block;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform var(--t-base), opacity var(--t-base);
}

.mobile-menu-btn[aria-expanded="true"] .hamburger span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
.mobile-menu-btn[aria-expanded="true"] .hamburger span:nth-child(2) {
  opacity: 0;
}
.mobile-menu-btn[aria-expanded="true"] .hamburger span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* Mobile menu drawer */
.mobile-menu {
  display: none;
  background: var(--c-white);
  border-top: 1px solid var(--c-border);
  padding: var(--sp-2) 0 var(--sp-6);
}

.mobile-menu.is-open { display: block; }

.mobile-menu a {
  display: block;
  padding: 0.625rem 0;
  font-size: 1rem;
  font-weight: 500;
  color: var(--c-charcoal);
  transition: color var(--t-fast);
}

.mobile-menu a:hover { color: var(--c-accent); }

.mobile-nav__group {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-slate);
  padding: 1rem 0 0.25rem;
  margin: 0;
}

.mobile-nav__sub {
  padding-left: 0.875rem !important;
  font-size: 0.9375rem !important;
  color: var(--c-slate) !important;
}


/* ── 12. Hero Commentary ───────────────────────────────────── */
.hero-commentary {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 320px;
}

.hero-commentary__link {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-grow: 1;
  color: inherit;
  text-decoration: none;
}

.hero-commentary__link:hover .hero-commentary__title {
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (min-width: 768px) {
  .hero-commentary { min-height: 400px; }
}

.hero-commentary__meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  margin-bottom: var(--sp-4);
}

.hero-commentary__title {
  margin-bottom: var(--sp-6);
}

.hero-commentary__excerpt {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--c-slate);
  margin-bottom: var(--sp-8);
  max-width: 42rem;
}

@media (min-width: 768px) {
  .hero-commentary__excerpt { font-size: 1.125rem; }
}


/* ── 13. Market Insights Sidebar ───────────────────────────── */
.insights-sidebar {
  display: flex;
  flex-direction: column;
}

/* Clickable section heading link (Market Insights, Daily News Links, etc.) */
.section-heading-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.section-heading-link:hover .heading-section {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Insight item as a full clickable link */
.insight-item--link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.insight-item--link:hover .insight-item__body {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.insights-sidebar__title {
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--c-border);
  margin-bottom: var(--sp-6);
}

.insight-item__body {
  font-weight: 500;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--c-charcoal);
  transition: color var(--t-fast);
}

.insight-item:hover .insight-item__body { color: var(--c-accent); }

.insights-sidebar__footer {
  padding-top: var(--sp-4);
  border-top: 1px solid var(--c-border);
  margin-top: var(--sp-6);
}


/* ── 14. Daily Links Section ───────────────────────────────── */
.links-scroll {
  max-height: 600px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--c-border) transparent;
}

.links-scroll::-webkit-scrollbar        { width: 4px; }
.links-scroll::-webkit-scrollbar-track  { background: transparent; }
.links-scroll::-webkit-scrollbar-thumb  { background: var(--c-border); border-radius: 2px; }

/* Homepage Daily Links card — on desktop the card spans 2 bento rows beside the
   stacked Latest + Key Charts. We want the card's height to be driven by those
   chart cards, not by its own (potentially long) link list. `contain: size`
   tells the browser to ignore this card's intrinsic content when sizing the
   grid tracks, so the row heights come from the chart column. The card then
   stretches via the grid's default `align-items: stretch` to fill both rows,
   and the inner flex column lets `.daily-links-scroll` scroll the overflow. */
.daily-links-card {
  display: flex;
  flex-direction: column;
}

.daily-links-card .section-header {
  flex-shrink: 0;
}

.daily-links-scroll {
  /* `overflow-y: scroll` (not auto) keeps the gutter reserved + bar visible
     even on macOS where scrollbars normally auto-hide. */
  overflow-y: scroll;
  scrollbar-width: thin;
  scrollbar-color: var(--c-slate) var(--c-bg);
  /* Bleed past the card padding so the scrollbar sits at the card edge */
  margin-inline: calc(-1 * var(--sp-4));
  padding-inline: var(--sp-4);
}

@media (min-width: 1024px) {
  .daily-links-card {
    contain: size;
  }
  .daily-links-scroll {
    flex: 1 1 auto;
    min-height: 0;
  }
}

/* Always-visible scrollbar (WebKit / Blink) — persistent thumb signals the
   list is scrollable without requiring a hover or scroll gesture. */
.daily-links-scroll::-webkit-scrollbar        { width: 8px; }
.daily-links-scroll::-webkit-scrollbar-track  {
  background: var(--c-bg);
  border-radius: 4px;
}
.daily-links-scroll::-webkit-scrollbar-thumb  {
  background: var(--c-slate);
  border-radius: 4px;
  border: 2px solid var(--c-bg);
}
.daily-links-scroll::-webkit-scrollbar-thumb:hover {
  background: var(--c-charcoal);
}

/* Per-day grouping inside the homepage card */
.dl-day {
  padding-block: var(--sp-5);
  border-bottom: 1px solid var(--c-border);
}
.dl-day:first-child { padding-top: var(--sp-2); }
.dl-day:last-child  { border-bottom: none; padding-bottom: var(--sp-2); }

.dl-day-header {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
  padding-bottom: var(--sp-3);
  border-bottom: 2px solid var(--c-accent);
}

.dl-day-header::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 1.25rem;
  background: var(--c-accent);
  border-radius: 2px;
  flex-shrink: 0;
}

.dl-day-title {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--c-charcoal);
  letter-spacing: -0.01em;
  line-height: 1.2;
}

/* Compact tweaks for nl-* components when nested in the homepage card */
.daily-links-scroll .nl-period-section {
  padding-left: 1rem;
  margin-bottom: var(--sp-4);
  border-left-width: 3px;
}
.daily-links-scroll .nl-period-section:last-child { margin-bottom: 0; }

.daily-links-scroll .nl-period-label {
  margin-bottom: 0.5rem;
}

.daily-links-scroll .nl-item-list { gap: 0.625rem; }

.daily-links-scroll .nl-item__title {
  font-size: 0.9375rem;
  line-height: 1.35;
  margin-bottom: 0.1875rem;
}

.daily-links-scroll .nl-item__meta {
  font-size: 0.8125rem;
}

.link-row {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  padding: 0.75rem var(--sp-4);
  margin-inline: calc(-1 * var(--sp-4));
  border-bottom: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  transition: background-color var(--t-fast);
}

.link-row:last-child { border-bottom: none; }
.link-row:hover { background-color: var(--c-bg); }

.link-row__date {
  flex-shrink: 0;
  width: 4rem;
  padding-top: 2px;
  font-size: 0.7rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--c-slate);
}

.link-row__content { flex-grow: 1; }

.link-row__title {
  display: block;
  font-weight: 500;
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--c-charcoal);
  margin-bottom: 0.25rem;
  transition: color var(--t-fast);
}

.link-row:hover .link-row__title { color: var(--c-accent); }

.link-row__meta {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8125rem;
  color: var(--c-slate);
}

.link-row__sep { color: var(--c-border); }

/* Importance badges (shown only for breaking/important) */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
}

.badge::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.badge--breaking  { color: var(--c-breaking); }
.badge--breaking::before  { background: var(--c-breaking); }
.badge--important { color: var(--c-accent); }
.badge--important::before { background: var(--c-accent); }


/* ── 15. Bubble Watch ──────────────────────────────────────── */
.bubble-watch-heading {
  text-align: center;
  /* full-width spanning handled by bento-span-* classes */
}

.chart-placeholder {
  width: 100%;
  height: 120px;
  background: linear-gradient(180deg, rgba(43, 108, 176, 0.06) 0%, rgba(43, 108, 176, 0) 100%);
  border-bottom: 2px solid var(--c-accent);
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin-bottom: var(--sp-6);
}

.chart-placeholder svg {
  width: 100%;
  height: 100%;
}

/* When the placeholder holds a real image, remove fixed height and tinted background */
.chart-placeholder.chart-item__visual--img {
  height: auto;
  overflow: visible;
  background: none;
  border-bottom-color: var(--c-border);
}

.bubble-card {
  display: flex;
  flex-direction: column;
}

.bubble-card__footer {
  padding-top: var(--sp-4);
  border-top: 1px solid var(--c-border);
  margin-top: auto;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--c-charcoal);
  transition: color var(--t-fast);
}

.bubble-card__footer:hover { color: var(--c-accent); }

/* Chart button wrapper inside bubble cards */
.bubble-card__chart-btn {
  margin-bottom: var(--sp-6);
}

.bubble-card__chart-btn .chart-placeholder {
  margin-bottom: 0;
}


/* ── 16. Charts Sidebar ────────────────────────────────────── */
.charts-sidebar {
  display: flex;
  flex-direction: column;
}

.charts-list {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.chart-item {
  border-bottom: 1px solid var(--c-border);
}

.chart-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.chart-item__visual {
  width: 100%;
  height: 120px;
  background: linear-gradient(180deg, rgba(43, 108, 176, 0.06) 0%, rgba(43, 108, 176, 0) 100%);
  border-bottom: 2px solid var(--c-accent);
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin-bottom: 0.375rem;
}

.chart-item__visual svg {
  width: 100%;
  height: 100%;
}

.chart-item__title {
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--c-charcoal);
  margin-bottom: var(--sp-6);
}

.chart-item__date {
  font-size: 0.75rem;
  color: var(--c-slate);
  display: block;
}

/* Span 2 grid rows on desktop so the daily-links card sits flush beside both chart cards */
@media (min-width: 1024px) {
  .bento-row-2 { grid-row: span 2; }
}


/* ── 17. Subscribe Section ─────────────────────────────────── */
.subscribe-section {
  background: var(--c-charcoal);
  color: var(--c-white);
  border-radius: var(--radius-lg);
  padding: var(--sp-10) var(--sp-6);
  text-align: center;
  border: none;
}

@media (min-width: 768px) {
  .subscribe-section { padding: var(--sp-12) var(--sp-12); }
}

.subscribe-section:hover {
  transform: none;
  box-shadow: none;
}

.subscribe-section h2 {
  font-family: var(--font-serif);
  font-size: clamp(1.375rem, 2.5vw, 1.875rem);
  font-weight: 700;
  margin-bottom: var(--sp-4);
}

.subscribe-section p {
  color: #cbd5e0;
  font-size: 0.9375rem;
  margin-bottom: var(--sp-8);
  max-width: 38rem;
  margin-inline: auto;
}

.subscribe-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: 28rem;
  margin-inline: auto;
}

@media (min-width: 480px) {
  .subscribe-form { flex-direction: row; }
}

.subscribe-input {
  flex: 1;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-sm);
  border: none;
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  color: var(--c-charcoal);
  background: var(--c-white);
  outline: none;
}

.subscribe-input:focus {
  box-shadow: 0 0 0 2px var(--c-accent);
}

.subscribe-btn {
  padding: 0.75rem 1.75rem;
  background: var(--c-accent);
  color: var(--c-white);
  border: none;
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  font-weight: 500;
  transition: background var(--t-fast);
  white-space: nowrap;
}

.subscribe-btn:hover { background: #1a4f8a; }


/* ── 18. Footer ────────────────────────────────────────────── */
.site-footer {
  background: var(--c-white);
  border-top: 1px solid var(--c-border);
  padding-block: var(--sp-12);
  margin-top: auto;
}

.footer-brand {
  margin-bottom: var(--sp-6);
}

.footer-brand__name {
  font-family: var(--font-serif);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--c-charcoal);
  display: block;
  margin-bottom: 0.25rem;
}

.footer-brand__copy {
  font-size: 0.875rem;
  color: var(--c-slate);
}

.footer-disclaimer {
  font-size: 0.8125rem;
  line-height: 1.65;
  color: var(--c-slate);
  border-top: 1px solid var(--c-border);
  padding-top: var(--sp-6);
  max-width: 72rem;
}


/* ── 19. Accessibility Utilities ──────────────────────────── */

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

/* ── 20. Skip Link ─────────────────────────────────────────── */
.skip-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  padding: 0.5rem 1rem;
  background: var(--c-charcoal);
  color: var(--c-white);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  font-size: 0.875rem;
  font-weight: 500;
  transition: top var(--t-fast);
  z-index: 200;
}

.skip-link:focus { top: 0; }


/* ============================================================
   About Page Components
   ============================================================ */

/* ── Full-bleed layout modifier ────────────────────────── */
/* Used by pages that need sections to fill the viewport width */
.site-main--flush { padding-block: 0; }


/* ── Narrow containers for article/prose content ───────── */
.container-lg {
  max-width: 64rem;
  margin-inline: auto;
  padding-inline: var(--px-mobile);
}

.container-prose {
  max-width: 52rem;
  margin-inline: auto;
  padding-inline: var(--px-mobile);
}

@media (min-width: 640px) {
  .container-lg    { padding-inline: var(--px-tablet); }
  .container-prose { padding-inline: var(--px-tablet); }
}

@media (min-width: 1024px) {
  .container-lg    { padding-inline: var(--px-desktop); }
  .container-prose { padding-inline: var(--px-desktop); }
}


/* ── About Hero ────────────────────────────────────────── */
.about-hero {
  background: var(--c-white);
  border-bottom: 1px solid var(--c-border);
  padding-block: 3rem 4rem;
}

.about-hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: center;
}

@media (min-width: 1024px) {
  .about-hero__grid {
    grid-template-columns: 2fr 3fr;
    gap: 3rem;
  }
}

/* Portrait — a styled placeholder until a real image is provided */
.about-hero__portrait {
  aspect-ratio: 4 / 5;
  width: 100%;
  max-width: 20rem;
  margin-inline: auto;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--c-border);
}

@media (min-width: 1024px) {
  .about-hero__portrait { max-width: 100%; }
}

.about-hero__portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Text side */
.about-hero__bio {
  text-align: center;
}

@media (min-width: 1024px) {
  .about-hero__bio { text-align: left; }
}

.about-hero__name {
  font-family: var(--font-serif);
  font-size: clamp(2.25rem, 6vw, 3.5rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin-bottom: 0.5rem;
}

.about-hero__role {
  font-size: clamp(1.0625rem, 2vw, 1.25rem);
  font-weight: 300;
  color: var(--c-slate);
  margin-bottom: 1.5rem;
}

.about-hero__tagline {
  font-size: 1.0625rem;
  font-style: italic;
  color: var(--c-accent);
  font-weight: 500;
  line-height: 1.5;
}


/* ── Bio Article ───────────────────────────────────────── */
.bio-article {
  padding-block: 3.5rem 4rem;
}

.bio-section {
  padding-bottom: 3rem;
  margin-bottom: 3rem;
  border-bottom: 1px solid var(--c-border);
}

.bio-section:last-child {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}

.bio-section h2 {
  font-family: var(--font-serif);
  font-size: clamp(1.375rem, 2.5vw, 1.75rem);
  font-weight: 700;
  margin-bottom: 1.5rem;
}

.bio-section p {
  font-size: 1.0625rem;
  line-height: 1.8;
  color: var(--c-charcoal);
  margin-bottom: 1.25rem;
}

.bio-section p:last-child { margin-bottom: 0; }

.bio-section p.bio-emphasis { font-weight: 600; }


/* ── Pullquote ─────────────────────────────────────────── */
.pullquote {
  margin-block: 3rem;
  padding: 1.75rem 2rem;
  background: var(--c-bg);
  border-left: 4px solid var(--c-accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

@media (min-width: 768px) {
  .pullquote { padding: 2rem 2.5rem; }
}

.pullquote p {
  font-family: var(--font-serif);
  font-size: clamp(1.0625rem, 2vw, 1.25rem);
  font-style: italic;
  line-height: 1.65;
  color: var(--c-charcoal);
  margin: 0;
}


/* ── CTA Strip ─────────────────────────────────────────── */
.cta-strip {
  background: var(--c-charcoal);
  color: var(--c-white);
  padding-block: 3rem;
}

@media (min-width: 768px) {
  .cta-strip { padding-block: 4rem; }
}

.cta-strip__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

@media (min-width: 640px) {
  .cta-strip__grid {
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
  }
}

.cta-card {
  background: rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  padding: 1.75rem;
  text-align: center;
  transition: background var(--t-base);
}

@media (min-width: 640px) {
  .cta-card { text-align: left; }
}

.cta-card:hover { background: rgba(255, 255, 255, 0.13); }

.cta-card h3 {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
}

.cta-card p {
  color: #cbd5e0;
  font-size: 0.9375rem;
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

/* White button variant — for use on dark backgrounds */
.btn--light {
  background: var(--c-white);
  color: var(--c-charcoal);
}

.btn--light:hover {
  background: var(--c-bg);
  color: var(--c-charcoal);
}

/* ── Subscribe (light / parchment variant) ─────────────── */
.subscribe-light {
  background: var(--c-bg);
  padding-block: 3rem;
  text-align: center;
}

@media (min-width: 768px) {
  .subscribe-light { padding-block: 4rem; }
}

.subscribe-light__inner {
  max-width: 32rem;
  margin-inline: auto;
  padding-inline: var(--px-mobile);
}

@media (min-width: 640px) {
  .subscribe-light__inner { padding-inline: var(--px-tablet); }
}

.subscribe-light h2 {
  font-family: var(--font-serif);
  font-size: clamp(1.375rem, 2.5vw, 1.75rem);
  font-weight: 700;
  margin-bottom: var(--sp-4);
  color: var(--c-charcoal);
}

.subscribe-light p {
  color: var(--c-slate);
  font-size: 0.9375rem;
  margin-bottom: var(--sp-8);
}

/* Restyle subscribe form elements for light context */
.subscribe-light .subscribe-input {
  border: 1px solid var(--c-border);
  background: var(--c-white);
}

.subscribe-light .subscribe-btn {
  background: var(--c-charcoal);
}

.subscribe-light .subscribe-btn:hover {
  background: var(--c-slate);
}


/* ============================================================
   Commentary Detail Page
   ============================================================ */

/* ── Reading column (700 px max) ────────────────────────── */
.reading-col {
  max-width: 44rem;
  margin-inline: auto;
}

/* ── Reading page wrapper ───────────────────────────────── */
.reading-page {
  padding-block: 2rem;
}

@media (min-width: 768px) {
  .reading-page { padding-block: 3rem; }
}

/* ── Breadcrumb ─────────────────────────────────────────── */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--c-slate);
  margin-bottom: 2.5rem;
}

.breadcrumb a { transition: color var(--t-fast); }
.breadcrumb a:hover { color: var(--c-charcoal); }

.breadcrumb__sep { color: var(--c-border); }

.breadcrumb__current { color: var(--c-charcoal); }

/* ── Article header ─────────────────────────────────────── */
.article-header {
  padding-bottom: 2rem;
  margin-bottom: 2.5rem;
  border-bottom: 1px solid var(--c-border);
}

.article-title {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin-bottom: 1.25rem;
}

.article-meta {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--c-slate);
  margin-bottom: 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* ── Z.1 report page ─────────────────────────────────────── */
.z1-intro {
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--c-charcoal);
  border-left: 3px solid var(--c-accent);
  padding-left: 1rem;
  margin-bottom: 2rem;
}

.z1-conclusion {
  font-style: italic;
  color: var(--c-slate);
  border-top: 1px solid var(--c-border);
  padding-top: 1.5rem;
  margin-top: 2rem;
}

.z1-chart {
  display: block;
  width: 100%;
  margin: 2rem 0;
  padding: 0;
  background: none;
  border: 1px solid var(--c-border);
  border-radius: 4px;
  cursor: zoom-in;
  position: relative;
  overflow: hidden;
  text-align: left;
  transition: border-color 0.15s;
}

.z1-chart:hover {
  border-color: var(--c-accent);
}

.z1-chart img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 3px;
}

.z1-chart-group {
  display: grid;
  gap: 1rem;
  margin: 2rem 0;
}

.z1-chart-group .z1-chart {
  margin: 0;
}

.z1-chart-group--2 {
  grid-template-columns: 1fr;
}

.z1-chart-group--3 {
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .z1-chart-group--2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .z1-chart-group--3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Full-width reading layout variant (no sidebar) — centers the article */
.reading-layout--full {
  display: block;
}

.reading-layout--full .reading-layout__article {
  max-width: 44rem;
  margin-inline: auto;
}

/* ── Article hero image ───────────────────────────────────── */
.article-hero-image {
  margin: 0 0 2.5rem;
}

.article-hero-image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
}

/* ── Share bar ────────────────────────────────────────────── */
.share-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.25rem;
}

.share-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.3125rem 0.75rem;
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--c-slate);
  background: transparent;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  line-height: 1;
  transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}

.share-btn:hover {
  color: var(--c-charcoal);
  border-color: var(--c-slate);
  background: var(--c-white);
}

.share-btn svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

.share-feedback {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--c-accent);
  min-width: 6rem;  /* prevent layout shift when text appears */
}

.article-dek {
  font-size: 1.125rem;
  line-height: 1.7;
  color: var(--c-slate);
  font-weight: 300;
}

/* ── Article body prose typography ─────────────────────── */
/* Styles rendered HTML stored in WeeklyCommentaryPost.body */
.article-content {
  font-size: 1.0625rem;
  line-height: 1.85;
  color: var(--c-charcoal);
}

.article-content p {
  margin-bottom: 1.5rem;
}

.article-content p:last-child { margin-bottom: 0; }

.article-content h1,
.article-content h2 {
  font-family: var(--font-serif);
  font-size: clamp(1.375rem, 2.5vw, 1.75rem);
  font-weight: 700;
  color: var(--c-charcoal);
  margin-top: 3rem;
  margin-bottom: 1.25rem;
  line-height: 1.2;
}

.article-content h3 {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--c-charcoal);
  margin-top: 2.5rem;
  margin-bottom: 1rem;
  line-height: 1.25;
}

.article-content blockquote {
  border-left: 3px solid var(--c-accent);
  padding: 0.375rem 0 0.375rem 1.5rem;
  margin: 2rem 0;
  font-style: italic;
  color: var(--c-slate);
}

.article-content a {
  color: var(--c-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: color var(--t-fast);
}

.article-content a:hover { color: var(--c-charcoal); }

.article-content ul,
.article-content ol {
  margin-bottom: 1.5rem;
  padding-left: 1.75rem;
}

.article-content li { margin-bottom: 0.5rem; }

.article-content strong { font-weight: 600; }
.article-content em     { font-style: italic; }

/* Text selection highlight */
::selection { background-color: rgba(43, 108, 176, 0.12); }

/* ── Table of Contents ──────────────────────────────────── */

/* Shared title + list + item styles used by both mobile block and sidebar */
.toc__title {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--c-slate);
  margin-bottom: 0.875rem;
}

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

.toc__item {
  margin-bottom: 0.375rem;
  padding-left: 0;
  border-left: 2px solid transparent;
  transition: border-color var(--t-fast);
}

.toc__item:last-child { margin-bottom: 0; }

.toc__item--h3 { padding-left: 1rem; }

.toc__link {
  display: block;
  padding: 0.1em 0 0.1em 0.625rem;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--c-slate);
  text-decoration: none;
  transition: color var(--t-fast);
}

.toc__link:hover {
  color: var(--c-charcoal);
}

/* Active state — set by JS */
.toc__item.is-active {
  border-left-color: var(--c-accent);
}

.toc__item.is-active > .toc__link {
  color: var(--c-charcoal);
  font-weight: 500;
}

/* ── Mobile-only inline TOC block ───────────────────────── */
.toc--mobile {
  margin-bottom: 2.5rem;
  padding: 1.125rem 1.25rem;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
}

/* Slightly larger link text in the inline block */
.toc--mobile .toc__link { font-size: 0.875rem; }

/* ── Desktop sidebar TOC ─────────────────────────────────── */
.toc-sidebar {
  display: none;   /* hidden on mobile — toggled below */
}

/* ── Reading layout grid ─────────────────────────────────── */
/* container-lg inner width at this breakpoint is 60rem;
   article (44rem) + gap (2rem) + sidebar (14rem) = 60rem. */
@media (min-width: 64rem) {
  .reading-layout {
    display: grid;
    grid-template-columns: 44rem 1fr;
    column-gap: 2rem;
    align-items: start;
  }

  /* Article fills its fixed column */
  .reading-layout__article {
    min-width: 0;
  }

  /* Hide inline TOC — sidebar takes over */
  .toc--mobile {
    display: none;
  }

  /* Show and position sticky sidebar */
  .toc-sidebar {
    display: block;
    position: sticky;
    top: calc(5rem + 1.5rem);   /* sticky header height + breathing room */
    max-height: calc(100vh - 7.5rem);
    overflow-y: scroll;
    scrollbar-width: thin;
    scrollbar-color: var(--c-border) var(--c-bg);

    /*
     * Scroll-shadow affordance — pure CSS, no JS.
     *
     * The "cover" layers (local) scroll with the content: they sit on top of
     * the shadow layers and mask them away when the user is already at the
     * very top or bottom edge.
     *
     * The "shadow" layers (scroll) are fixed to the container and always
     * render, so they peek through whenever there is more content to scroll.
     */
    background:
      /* cover top */
      linear-gradient(var(--c-bg), transparent) top    / 100% 2rem no-repeat local,
      /* cover bottom */
      linear-gradient(transparent, var(--c-bg)) bottom / 100% 2rem no-repeat local,
      /* shadow top */
      linear-gradient(rgba(0, 0, 0, 0.055), transparent) top    / 100% 2rem no-repeat scroll,
      /* shadow bottom */
      linear-gradient(transparent, rgba(0, 0, 0, 0.055)) bottom / 100% 2rem no-repeat scroll;
  }

  .toc-sidebar::-webkit-scrollbar { width: 4px; }
  .toc-sidebar::-webkit-scrollbar-track { background: var(--c-bg); }
  .toc-sidebar::-webkit-scrollbar-thumb { background: var(--c-border); border-radius: 2px; }

  /* Sidebar uses a left-rail accent line instead of a box */
  .toc-sidebar .toc__list {
    border-left: 1px solid var(--c-border);
    padding-left: 0;
  }

  .toc-sidebar .toc__item {
    margin-left: -1px;   /* overlay the left rail */
  }
}

/* ── Heading scroll-margin (prevent content hiding under sticky header) ── */
.article-content h2[id],
.article-content h3[id] {
  scroll-margin-top: 6rem;   /* 5rem header + 1rem gap */
}

/* ── Reading progress bar ───────────────────────────────── */
.reading-progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 3px;
  background: var(--c-accent);
  z-index: 110;        /* above the sticky header (z-index: 100) */
  pointer-events: none;
  transition: width 0.05s linear;
}

/* ── Smooth anchor scrolling (respects reduced-motion) ─── */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* ── Previous / Next navigation ─────────────────────────── */
.prev-next-nav {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

@media (min-width: 480px) {
  .prev-next-nav { flex-direction: row; gap: 1.25rem; }
}

.prev-next-nav__item { flex: 1; }

.prev-next-link {
  display: block;
  height: 100%;
  padding: 1.25rem 1.5rem;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  transition: border-color var(--t-fast);
}

.prev-next-link:hover { border-color: var(--c-accent); }

.prev-next-link__label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--c-slate);
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.prev-next-link--next .prev-next-link__label { justify-content: flex-end; }

.prev-next-link__title {
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: 600;
  color: var(--c-charcoal);
  line-height: 1.4;
  transition: color var(--t-fast);
}

.prev-next-link--next .prev-next-link__title { text-align: right; }

.prev-next-link:hover .prev-next-link__title { color: var(--c-accent); }

/* ── Inline subscribe card (standalone, outside bento grid) */
.subscribe-card {
  background: var(--c-charcoal);
  color: var(--c-white);
  border-radius: var(--radius-lg);
  padding: 2.5rem 2rem;
  text-align: center;
}

.subscribe-card h2 {
  font-family: var(--font-serif);
  font-size: clamp(1.375rem, 3vw, 1.875rem);
  font-weight: 700;
  margin-bottom: var(--sp-4);
}

.subscribe-card p {
  color: #cbd5e0;
  font-size: 0.9375rem;
  margin-bottom: var(--sp-8);
  max-width: 28rem;
  margin-inline: auto;
}


/* ============================================================
   Commentary Listing Page
   ============================================================ */

/* ── Page hero ─────────────────────────────────────────────── */
.listing-hero {
  background: var(--c-white);
  border-bottom: 1px solid var(--c-border);
  padding-block: 3rem 4rem;
}

.listing-hero--compact {
  padding-block: 0.5rem 0.6rem;
}

.listing-hero--compact h1 {
  font-size: 1.125rem;
  font-weight: 600;
  margin-bottom: 0;
}

.listing-hero--compact .listing-hero__desc {
  margin-top: 0.75rem;
  margin-bottom: 0.25rem;
  font-size: 0.9375rem;
}

.listing-hero__eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-accent);
  margin-bottom: 0.75rem;
}

.listing-hero h1 {
  font-family: var(--font-serif);
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  font-weight: 700;
  margin-bottom: 1rem;
  max-width: 48rem;
}

.listing-hero p {
  font-size: 1.0625rem;
  color: var(--c-slate);
  line-height: 1.7;
  max-width: 40rem;
}

/* ── Bubble Eras band (commentary list page) ──────────────── */
.bubble-eras-band {
  background: var(--c-white);
  border-bottom: 1px solid var(--c-border);
  padding-block: 1.5rem;
}

.bubble-eras-band__label {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-slate);
  margin-bottom: 0.875rem;
}

.bubble-eras-band__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
}

.bubble-era-card {
  display: inline-flex;
  flex-direction: column;
  gap: 0.125rem;
  padding: 0.625rem 1rem;
  border: 1px solid var(--c-border);
  border-radius: 6px;
  text-decoration: none;
  background: var(--c-white);
  transition: border-color 0.15s, background 0.15s;
  flex: 1 1 auto;
  min-width: 180px;
}

.bubble-era-card:hover {
  border-color: var(--c-accent);
  background: color-mix(in srgb, var(--c-accent) 4%, white);
}

.bubble-era-card__title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--c-charcoal);
  line-height: 1.3;
}

.bubble-era-card__cta {
  font-size: 0.75rem;
  color: var(--c-accent);
  font-weight: 500;
}

/* ── Bubble detail page — two-column layout ───────────────── */
.bubble-page {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  padding-block: 2rem 4rem;
  align-items: start;
}

@media (min-width: 960px) {
  .bubble-page {
    grid-template-columns: 1fr 270px;
  }
}

/* Image-based chart thumbnails in the charts column */
.chart-item__visual--img {
  height: auto;
  overflow: visible;
  background: none;
  border-bottom: none;
  margin-bottom: 0;
}

.chart-item__visual--img img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-sm);
}

/* Other bubble era links at the bottom */
.other-bubbles {
  background: var(--c-white);
  border-top: 1px solid var(--c-border);
  padding-block: 1.5rem;
}

.other-bubbles__label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-slate);
  margin-bottom: 0.75rem;
}

.other-bubbles__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
}

.other-bubbles__link {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--c-accent);
  text-decoration: none;
  transition: opacity var(--t-fast);
}

.other-bubbles__link:hover {
  opacity: 0.75;
}

/* ── Filter / toolbar bar ─────────────────────────────────── */
.filter-bar {
  background: var(--c-white);
  border-bottom: 1px solid var(--c-border);
  padding-block: 1rem;
}

.filter-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.filter-select {
  padding: 0.5rem 2rem 0.5rem 0.75rem;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  background-color: var(--c-bg);
  color: var(--c-charcoal);
  font-family: var(--font-sans);
  font-size: 0.875rem;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition: border-color var(--t-fast);
  /* Inline chevron via SVG data URL */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%234A5568' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.625rem center;
}

.filter-select:focus {
  outline: none;
  border-color: var(--c-accent);
}

.results-count {
  font-size: 0.875rem;
  color: var(--c-slate);
}

.results-count strong {
  color: var(--c-charcoal);
  font-weight: 600;
}

/* ── Commentary archive list ──────────────────────────────── */

/* Year jump navigation */
.year-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.125rem 0;
  margin-bottom: 1.75rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--c-border);
}

.year-nav__label {
  font-size: 0.75rem;
  color: var(--c-slate);
  margin-right: 0.375rem;
}

.year-nav__link {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--c-slate);
  padding: 0.2rem 0.45rem;
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: background var(--t-fast), color var(--t-fast);
}

.year-nav__link:hover {
  background: var(--c-border);
  color: var(--c-accent);
}

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

/* Year divider — label + entry count + hairline rule */
.commentary-year-divider {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding-top: var(--sp-6);
  padding-bottom: var(--sp-2);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--c-charcoal);
  user-select: none;
}

.commentary-year-divider:first-child {
  padding-top: 0;
}

.commentary-year-count {
  opacity: 0.55;
  margin-right: var(--sp-2);
}

.commentary-year-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--c-border);
}

/* Each row: date on the left, title on the right */
.commentary-row {
  border-bottom: 1px solid var(--c-border);
}

.commentary-row:last-child {
  border-bottom: none;
}

.commentary-row__link {
  display: flex;
  align-items: baseline;
  gap: var(--sp-4);
  padding: 0.35rem 0;
  color: inherit;
  text-decoration: none;
}

.commentary-row__date {
  flex-shrink: 0;
  width: 3.5rem;
  font-size: 0.75rem;
  color: var(--c-slate);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.commentary-row__title {
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--c-charcoal);
  line-height: 1.4;
  transition: color var(--t-fast);
}

.commentary-row__link:hover .commentary-row__title {
  color: var(--c-accent);
}

/* ── Pagination ───────────────────────────────────────────── */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  margin-top: 3rem;
  flex-wrap: wrap;
}

.page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  height: 2.25rem;
  padding-inline: 0.625rem;
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  font-weight: 500;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}

.page-btn--link {
  border: 1px solid var(--c-border);
  background: var(--c-white);
  color: var(--c-charcoal);
}

.page-btn--link:hover {
  background: var(--c-bg);
  border-color: var(--c-accent);
  color: var(--c-accent);
}

.page-btn--current {
  background: var(--c-charcoal);
  color: var(--c-white);
  border: 1px solid var(--c-charcoal);
  cursor: default;
}

.page-btn--disabled {
  border: 1px solid var(--c-border);
  background: var(--c-white);
  color: var(--c-border);
  cursor: not-allowed;
}

.page-ellipsis {
  display: inline-flex;
  align-items: center;
  padding-inline: 0.375rem;
  color: var(--c-slate);
  font-size: 0.875rem;
  user-select: none;
}

/* ── Subscribe band (full-width dark, for listing pages) ─── */
.subscribe-band {
  background: var(--c-charcoal);
  color: var(--c-white);
  padding-block: 3rem 4rem;
  text-align: center;
}

.subscribe-band__inner {
  max-width: 32rem;
  margin-inline: auto;
  padding-inline: var(--px-mobile);
}

@media (min-width: 640px) {
  .subscribe-band__inner { padding-inline: var(--px-tablet); }
}

.subscribe-band h2 {
  font-family: var(--font-serif);
  font-size: clamp(1.375rem, 2.5vw, 1.875rem);
  font-weight: 700;
  margin-bottom: var(--sp-4);
}

.subscribe-band p {
  color: #cbd5e0;
  font-size: 0.9375rem;
  margin-bottom: var(--sp-8);
}


/* ============================================================
   Commentary Listing — Enhanced (overrides initial listing CSS)
   ============================================================ */

/* ── Filter bar layout ───────────────────────────────────── */
.filter-bar {
  padding-block: 1.25rem;
}

.filter-bar__form {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.filter-bar__left {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  flex-wrap: wrap;
  flex: 1;
}

.filter-bar__right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

/* ── Search input ────────────────────────────────────────── */
.search-wrap {
  position: relative;
}

.search-wrap::before {
  content: '';
  position: absolute;
  left: 0.6875rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.875rem;
  height: 0.875rem;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%234A5568' stroke-width='1.75' stroke-linecap='round'%3E%3Ccircle cx='8.5' cy='8.5' r='5.5'/%3E%3Cline x1='13' y1='13' x2='17' y2='17'/%3E%3C/svg%3E") no-repeat center / contain;
}

.search-input {
  width: 15rem;
  padding: 0.5rem 0.875rem 0.5rem 2.125rem;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  background-color: var(--c-bg);
  color: var(--c-charcoal);
  font-family: var(--font-sans);
  font-size: 0.875rem;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
  /* Remove native clear button on webkit — we rely on form reset */
  -webkit-appearance: none;
}

.search-input::placeholder {
  color: var(--c-slate);
  opacity: 0.65;
}

.search-input:focus {
  outline: none;
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px rgba(43, 108, 176, 0.1);
}

/* ── Section jump dropdown ───────────────────────────────── */
.section-jump-select {
  padding: 0.5rem 2rem 0.5rem 0.75rem;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  background-color: var(--c-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' fill='none' stroke='%234A5568' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.625rem center;
  background-size: 0.625rem;
  color: var(--c-charcoal);
  font-family: var(--font-sans);
  font-size: 0.875rem;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}

.section-jump-select:focus {
  outline: none;
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px rgba(43, 108, 176, 0.1);
}

/* ── Sort buttons ────────────────────────────────────────── */
.sort-label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--c-slate);
  white-space: nowrap;
}

.sort-buttons {
  display: flex;
  gap: 0.25rem;
}

.sort-btn {
  padding: 0.4375rem 0.875rem;
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid var(--c-border);
  background: var(--c-white);
  color: var(--c-charcoal);
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}

.sort-btn:hover:not(.sort-btn--active) {
  background: var(--c-bg);
}

.sort-btn--active {
  background: var(--c-charcoal);
  color: var(--c-white);
  border-color: var(--c-charcoal);
}

/* ── Empty state ─────────────────────────────────────────── */
.listing-empty {
  color: var(--c-slate);
  font-size: 0.9375rem;
  padding-block: 2rem;
}

/* ── Responsive: stack filter controls on mobile ─────────── */
@media (max-width: 767px) {
  .filter-bar__form {
    flex-direction: column;
    align-items: flex-start;
  }

  .filter-bar__left {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }

  .search-wrap {
    width: 100%;
  }

  .search-input {
    width: 100%;
  }

  .filter-bar__right {
    width: 100%;
  }
}


/* ============================================================
   Daily News Links — archive page
   ============================================================ */

/* ── Day card (groups a post + its items) ─────────────────── */
.links-day-card {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  margin-bottom: 1.5rem;
  overflow: hidden;
}

.links-day-card:last-of-type { margin-bottom: 0; }

.links-day-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.125rem 1.75rem;
  border-bottom: 1px solid var(--c-border);
  background: var(--c-bg);
}

.links-day-card__date {
  font-family: var(--font-serif);
  font-size: clamp(1.0625rem, 2vw, 1.25rem);
  font-weight: 700;
  color: var(--c-charcoal);
}

/* ── Period badge ─────────────────────────────────────────── */
.period-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 0.25rem 0.625rem;
  border-radius: var(--radius-full);
  white-space: nowrap;
  flex-shrink: 0;
}

.period-badge--morning   { background: #EBF4FF; color: #1D4ED8; }
.period-badge--afternoon { background: #FFFBEB; color: #B45309; }
.period-badge--evening   { background: #EEF2FF; color: #4338CA; }
.period-badge--general   { background: var(--c-bg); color: var(--c-slate);
                            border: 1px solid var(--c-border); }

/* ── Link item rows ───────────────────────────────────────── */
.links-item-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.links-item {
  padding: 0.875rem 1.75rem;
  border-bottom: 1px solid var(--c-border);
  transition: background var(--t-fast);
}

.links-item:last-child { border-bottom: none; }

.links-item:hover { background: #fafafa; }

/* Breaking items get a left accent stripe */
.links-item--breaking {
  border-left: 3px solid var(--c-breaking);
  padding-left: calc(1.75rem - 3px);
}

.links-item__link {
  display: block;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--c-charcoal);
  line-height: 1.4;
  margin-bottom: 0.3125rem;
  transition: color var(--t-fast);
}

.links-item__link:hover { color: var(--c-accent); }

.links-item__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.375rem;
  font-size: 0.8rem;
  color: var(--c-slate);
}

.links-item__source { font-weight: 500; }

.links-meta-sep { opacity: 0.5; }

/* ── Importance badges (inline, beside source) ────────────── */
.links-item__badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius-full);
}

.links-item__badge--breaking {
  background: #FEF2F2;
  color: var(--c-breaking);
}

.links-item__badge--important {
  background: #EBF8FF;
  color: var(--c-accent);
}

/* ── Mobile tweaks ────────────────────────────────────────── */
@media (max-width: 640px) {
  .links-day-card__header { padding: 1rem 1.25rem; }
  .links-item            { padding: 0.875rem 1.25rem; }
  .links-item--breaking  { padding-left: calc(1.25rem - 3px); }
}


/* ============================================================
   Daily News Links — faithful archive body (nl-* namespace)
   Replaces the earlier links-* components.
   ============================================================ */

/* ── Day card (one per calendar date) ────────────────────── */
.nl-day-card {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  padding: 1.5rem 2rem;
  margin-bottom: 2rem;
}

.nl-day-card:last-of-type { margin-bottom: 0; }

/* ── Date heading ─────────────────────────────────────────── */
.nl-day-header {
  border-bottom: 1px solid var(--c-border);
  padding-bottom: 1rem;
  margin-bottom: 1.5rem;
}

.nl-day-title {
  font-family: var(--font-serif);
  font-size: clamp(1.375rem, 3vw, 1.875rem);
  font-weight: 700;
  color: var(--c-charcoal);
}

/* ── Period section (left accent stripe) ─────────────────── */
.nl-period-section {
  border-left: 4px solid var(--c-accent);
  padding-left: 1.5rem;
  margin-bottom: 1.5rem;
}

.nl-period-section:last-child { margin-bottom: 0; }

/* Color the left border per period */
.nl-period-section--morning   { border-left-color: var(--c-accent); }
.nl-period-section--afternoon { border-left-color: var(--c-slate); }
.nl-period-section--evening   { border-left-color: #6366F1; }
.nl-period-section--general   { border-left-color: var(--c-accent); }

/* ── Period label (small uppercase heading) ───────────────── */
.nl-period-label {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--c-slate);
  margin-bottom: 1rem;
}

/* ── Item list ────────────────────────────────────────────── */
.nl-item-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* ── Individual item ──────────────────────────────────────── */
.nl-item__title {
  display: block;
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--c-charcoal);
  line-height: 1.35;
  margin-bottom: 0.3125rem;
  transition: color var(--t-fast);
}

.nl-item__title:hover { color: var(--c-accent); }

/* ── Item meta row ────────────────────────────────────────── */
.nl-item__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.375rem;
  font-size: 0.875rem;
  color: var(--c-slate);
}

.nl-item__source { font-weight: 500; }

.nl-meta-sep { opacity: 0.4; }

/* ── Importance indicator: colored dot + text label ──────── */
.nl-importance {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  font-size: 0.875rem;
}

/* The dot is a ::before pseudo-element — no icon font needed */
.nl-importance::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.nl-importance--breaking {
  color: var(--c-breaking);
}
.nl-importance--breaking::before {
  background: var(--c-breaking);
}

.nl-importance--important {
  color: var(--c-accent);
}
.nl-importance--important::before {
  background: var(--c-accent);
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 640px) {
  .nl-day-card      { padding: 1.25rem; }
  .nl-period-section { padding-left: 1.125rem; }
}


/* ============================================================
   Importance badges — Daily News Links
   Sit above the link title; omitted entirely for normal items.
   ============================================================ */

.badge-breaking,
.badge-important {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-sans);
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  line-height: 1;
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-sm);
}

/* Breaking — strong warm tone, filled */
.badge-breaking {
  background: var(--c-breaking);   /* #C05621 */
  color: var(--c-white);
}

/* Important — accent-toned, softer fill */
.badge-important {
  background: #EBF4FF;
  color: var(--c-accent);           /* #2B6CB0 */
  border: 1px solid #BEE3F8;
}

/* Stack badge → title → source vertically */
.nl-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}


/* Subscribe button matches the input's squared corners */
.subscribe-form .btn {
  border-radius: var(--radius-sm);
}


/* CTA card buttons match the squared input style */
.cta-card .btn {
  border-radius: var(--radius-sm);
}


/* ── Market Insights — sidebar (homepage) ─────────────────────
   Scoped to .insights-sidebar so listing-page overrides below
   don't bleed into the bento card. */

.insights-list {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  /* No gap — dividers are drawn with border-top, not <hr> */
}

.insights-sidebar .insight-item {
  padding-block: var(--sp-4);
}

.insights-sidebar .insight-item:first-child {
  padding-top: 0;
}

.insights-sidebar .insight-item + .insight-item {
  border-top: 1px solid var(--c-border);
}

.insights-sidebar .insight-item__date {
  margin-bottom: 0.25rem;
}


/* ── Market Insights — archive listing page ───────────────────
   All rules scoped to .insight-list (singular, no 's') so they
   don't affect the homepage sidebar. */

.insight-list {
  border-top: 1px solid var(--c-border);
}

.insight-list .insight-item {
  padding-block: 1.75rem;
  border-bottom: 1px solid var(--c-border);
}

.insight-list .insight-item__date {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-accent);
  margin-bottom: 0.625rem;
}

.insight-list .insight-item__time {
  font-weight: 400;
  letter-spacing: 0;
  color: var(--c-slate);
  text-transform: none;
}

.insight-list .insight-item__body {
  font-size: 0.9375rem;
  line-height: 1.75;
  color: var(--c-charcoal);
}

.insight-list .insight-item__body p {
  margin-bottom: 0.5rem;
}

.insight-list .insight-item__body p:last-child {
  margin-bottom: 0;
}

.insight-list .insight-item__body a {
  color: var(--c-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.insight-list .insight-item__body a:hover {
  color: var(--c-ink);
}

/* Empty state */
.listing-empty {
  color: var(--c-slate);
  font-style: italic;
  padding-block: 2rem;
}


/* ── Charts grid ────────────────────────────────────────────── */
.charts-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-8);
  list-style: none;
  padding: 0;
  margin: 0;
}

@media (min-width: 560px) {
  .charts-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .charts-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1280px) {
  .charts-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ── Bubble era badges ──────────────────────────────────────── */
.badge-bubble {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.2em 0.55em;
  border-radius: var(--radius-full);
  border: 1px solid currentColor;
  line-height: 1.4;
  white-space: nowrap;
}

.badge-bubble--nineties   { color: #805AD5; }
.badge-bubble--mortgage   { color: var(--c-breaking); }
.badge-bubble--global_gov { color: var(--c-accent); }


/* ── Chart item — expandable button ───────────────────────── */
.chart-item--expandable {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  position: relative;
  font-family: inherit;
}

.chart-item--expandable:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* Expand icon — revealed on hover / focus */
.chart-item__expand-icon {
  position: absolute;
  top: var(--sp-2);
  right: 0;
  width: 1.625rem;
  height: 1.625rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  color: var(--c-accent);
  opacity: 0;
  transition: opacity var(--t-fast);
  pointer-events: none;
}

.chart-item__expand-icon svg {
  width: 0.875rem;
  height: 0.875rem;
}

.chart-item--expandable:hover .chart-item__expand-icon,
.chart-item--expandable:focus-visible .chart-item__expand-icon {
  opacity: 1;
}

.chart-item--expandable:hover .chart-item__visual {
  filter: brightness(0.96);
}

/* Info badge — persistent cue that a description exists */
.chart-info-badge {
  position: absolute;
  top: var(--sp-3);
  left: var(--sp-3);
  width: 1.625rem;
  height: 1.625rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--c-accent);
  border: 2px solid var(--c-white);
  border-radius: var(--radius-full);
  color: var(--c-white);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  pointer-events: auto;
}

.chart-info-badge svg {
  width: 0.875rem;
  height: 0.875rem;
}

/* Hover tooltip — clicking the badge still opens the modal (click bubbles to the card). */
.chart-info-badge::after {
  content: attr(data-tooltip);
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  width: max-content;
  max-width: 200px;
  padding: 0.4rem 0.6rem;
  background: var(--c-charcoal);
  color: var(--c-white);
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.35;
  text-align: left;
  border-radius: var(--radius-sm);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.22);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-2px);
  transition: opacity var(--t-fast), transform var(--t-fast);
  z-index: 5;
  pointer-events: none;
}

.chart-info-badge:hover::after {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}


/* ── Chart Modal ────────────────────────────────────────────── */
.chart-modal {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.22s ease, visibility 0.22s ease;
}

.chart-modal.is-open {
  opacity: 1;
  visibility: visible;
}

.chart-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(26, 28, 32, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.chart-modal__panel {
  position: relative;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: var(--sp-4);
  width: 100%;
  max-width: 780px;
  box-shadow: 0 25px 60px -12px rgba(0, 0, 0, 0.2);
  transform: scale(0.96) translateY(8px);
  transition: transform 0.22s ease;
}

.chart-modal.is-open .chart-modal__panel {
  transform: scale(1) translateY(0);
}

.chart-modal__header {
  position: absolute;
  top: var(--sp-3);
  right: var(--sp-3);
  z-index: 1;
}

.chart-modal__title {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--c-charcoal);
}

.chart-modal__date {
  display: block;
  margin-top: var(--sp-1);
  font-size: 0.8125rem;
  color: var(--c-slate);
  font-weight: 400;
}

.chart-modal__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid rgba(0,0,0,0.15);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(4px);
  color: var(--c-charcoal);
  transition: background-color var(--t-fast);
}

.chart-modal__close:hover {
  background: var(--c-white);
}

.chart-modal__close svg {
  width: 0.875rem;
  height: 0.875rem;
}

.chart-modal__panel {
  max-height: 92vh;
  overflow-y: auto;
}

.chart-modal__visual {
  width: 100%;
  height: 260px;
  background: linear-gradient(180deg, rgba(43, 108, 176, 0.06) 0%, rgba(43, 108, 176, 0) 100%);
  border-bottom: 2px solid var(--c-accent);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.chart-modal__visual svg {
  width: 100%;
  height: 100%;
}

/* Ensure the hidden attribute is never overridden by element-level rules */
.chart-modal__svg[hidden],
.chart-modal__img[hidden] {
  display: none !important;
}

/* Image mode — let the image size naturally; no fixed height, no clipping */
.chart-modal.is-image .chart-modal__visual {
  background: none;
  border-bottom: none;
  height: auto;
  overflow: visible;
}

.chart-modal__img {
  width: 100%;
  height: auto;
  max-height: 80vh;
  object-fit: contain;
  display: block;
  border-radius: var(--radius-sm);
}

.chart-modal__description {
  margin: var(--sp-4) 0 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--c-slate);
  white-space: pre-line;
}

.chart-modal__description[hidden] {
  display: none !important;
}


/* ══════════════════════════════════════════════════════════════
   OVERHAUL ADDITIONS
   ══════════════════════════════════════════════════════════════ */

/* ── Homepage flat strips (commentary + insights) ─────────── */
.home-strip {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  padding: var(--sp-4) var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Commentary strip — stacked with footer */
.home-strip--commentary {
  justify-content: center;
}

.home-strip__link {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  color: inherit;
  text-decoration: none;
  min-width: 0;
}

.home-strip__link:hover .home-strip__title {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.home-strip__label {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--c-accent);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Wraps title + date in a column so date sits below the title */
.home-strip__content {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  flex: 1;
  min-width: 0;
}

.home-strip__title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--c-charcoal);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.home-strip__meta {
  font-size: 0.7rem;
  color: var(--c-slate);
  white-space: nowrap;
}

.home-strip__cta {
  font-size: 0.75rem;
  color: var(--c-accent);
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
  align-self: center;
}

/* Insights strip — fills available vertical space with body text */
.home-strip--insights {
  gap: 0;
  min-height: 0;
}

.home-strip__insight {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding-block: var(--sp-1);
  border-bottom: 1px solid var(--c-border);
  color: inherit;
  text-decoration: none;
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
  /* Graceful fade only where content actually reaches the bottom */
  mask-image: linear-gradient(to bottom, #000 calc(100% - 1.25rem), transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 1.25rem), transparent 100%);
}

.home-strip__insight:last-of-type {
  border-bottom: none;
}

.home-strip__insight:hover .home-strip__insight-text {
  color: var(--c-accent);
}

.home-strip__insight-date {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--c-slate);
  white-space: nowrap;
  min-width: 3.5rem;
  flex-shrink: 0;
  padding-top: 0.15rem;
}

.home-strip__insight-text {
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--c-charcoal);
  transition: color var(--t-fast);
}

.home-strip__footer {
  padding-top: var(--sp-2);
  margin-top: var(--sp-1);
  border-top: 1px solid var(--c-border);
}

/* ── Bubble page: 2/3 commentary, 1/3 charts ─────────────── */
@media (min-width: 960px) {
  .bubble-page {
    grid-template-columns: 2fr 1fr;
  }
}

/* ── More space between charts in sidebar/column ─────────── */
.charts-list {
  gap: 1.5rem;
  display: flex;
  flex-direction: column;
}

.chart-item {
  border-bottom: none;
  padding-bottom: 0;
}

/* ── Charts page sections ─────────────────────────────────── */
.charts-section {
  margin-bottom: 3rem;
}

.charts-section__title {
  font-family: var(--font-serif);
  font-size: 1.375rem;
  font-weight: 600;
  color: var(--c-charcoal);
  border-bottom: 2px solid var(--c-border);
  padding-bottom: var(--sp-3);
  margin-bottom: var(--sp-6);
}

/* The shared chart_card uses .chart-item, whose base rule adds a divider
   (right for the stacked sidebar, wrong inside the wide grid). */
.charts-grid .chart-item {
  border-bottom: none;
}

/* ── About page: compact hero ─────────────────────────────── */
.about-hero--compact {
  padding-block: 1.5rem 2rem;
}

.about-hero--compact .about-hero__portrait {
  max-width: 10rem;
  aspect-ratio: 1 / 1;
}

@media (min-width: 1024px) {
  .about-hero--compact .about-hero__grid {
    grid-template-columns: 1fr 4fr;
    gap: 2rem;
  }
  .about-hero--compact .about-hero__portrait {
    max-width: 8rem;
  }
}

.about-hero--compact .about-hero__name {
  font-size: clamp(1.5rem, 4vw, 2.25rem);
}

.about-hero--compact .about-hero__role {
  font-size: 1rem;
  margin-bottom: 0.75rem;
}

.about-hero--compact .about-hero__tagline {
  font-size: 0.9375rem;
}

/* ── Z1 two-column layout ─────────────────────────────────── */
.z1-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  padding-block: 2rem;
}

@media (min-width: 900px) {
  .z1-layout {
    grid-template-columns: 3fr 1fr;
    align-items: start;
  }
}

.z1-layout__article {
  min-width: 0;
}

.z1-layout__sidebar {
  position: sticky;
  top: 5rem;
}

.z1-sidebar {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  padding: var(--sp-6);
}

.z1-sidebar__title {
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: 600;
  color: var(--c-charcoal);
  border-bottom: 1px solid var(--c-border);
  padding-bottom: var(--sp-3);
  margin-bottom: var(--sp-4);
}

.z1-sidebar__list {
  list-style: none;
  padding: 0;
  margin: 0;
  max-height: 60vh;
  overflow-y: auto;
}

.z1-sidebar__item {
  padding-block: var(--sp-2);
  border-bottom: 1px solid var(--c-border);
}

.z1-sidebar__item:last-child {
  border-bottom: none;
}

.z1-sidebar__item--current .z1-sidebar__label {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--c-charcoal);
}

.z1-sidebar__badge {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: var(--c-accent);
  color: #fff;
  border-radius: var(--radius-full);
  padding: 0.1em 0.5em;
}

.z1-sidebar__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  font-size: 0.875rem;
  color: var(--c-slate);
  text-decoration: none;
  transition: color var(--t-fast);
}

.z1-sidebar__link:hover {
  color: var(--c-accent);
}

.z1-sidebar__dl-icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  opacity: 0.6;
}

/* Sidebar variant inside the bubble-page aside */
.z1-sidebar--bubble-aside {
  margin-bottom: var(--sp-6);
}

/* Top-of-article back link (used on Quarterly Analysis detail pages) */
.article-back-link {
  display: inline-flex;
  font-size: 0.875rem;
  margin-bottom: 1.5rem;
}

/* ══════════════════════════════════════════════════════════════
   HOMEPAGE COMMENTARY HERO — PROTOTYPES (V1–V4)
   Swap the {% include %} in home.html to switch variants.
   ══════════════════════════════════════════════════════════════ */

/* Shared base for all hero-comm variants */
.hero-comm {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  padding: var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: 14rem;
  transition: box-shadow var(--t-base), border-color var(--t-base);
}

.hero-comm__link {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  color: inherit;
  text-decoration: none;
  min-width: 0;
}

.hero-comm__footer {
  padding-top: var(--sp-3);
  margin-top: var(--sp-3);
  border-top: 1px solid var(--c-border);
}

/* ── V1: Bold Headline ────────────────────────────────────── */
.hero-comm--v1 .hero-comm__eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-accent);
}

.hero-comm--v1 .hero-comm__title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 1.65rem;
  line-height: 1.2;
  font-weight: 700;
  color: var(--c-accent);
}

.hero-comm--v1 .hero-comm__link:hover .hero-comm__title {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.hero-comm--v1 .hero-comm__date {
  font-size: 0.8rem;
  color: var(--c-slate);
}

.hero-comm--v1 .hero-comm__cta {
  margin-top: var(--sp-1);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--c-accent);
}

/* ── V2: Editorial Feature ────────────────────────────────── */
.hero-comm--v2 {
  border-left: 4px solid var(--c-accent);
}

.hero-comm--v2:hover {
  box-shadow: var(--shadow-card);
}

.hero-comm--v2 .hero-comm__eyebrow {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-accent);
}

.hero-comm--v2 .hero-comm__title {
  font-family: var(--font-serif);
  font-size: 1.85rem;
  line-height: 1.18;
  font-weight: 700;
  color: var(--c-charcoal);
}

.hero-comm--v2 .hero-comm__link:hover .hero-comm__title {
  color: var(--c-accent);
}

.hero-comm--v2 .hero-comm__meta-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-top: var(--sp-1);
}

.hero-comm--v2 .hero-comm__date {
  font-size: 0.8rem;
  color: var(--c-slate);
}

.hero-comm--v2 .hero-comm__cta {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--c-accent);
}

/* ── V3: Banner with Tinted Background ────────────────────── */
.hero-comm--v3 {
  background: linear-gradient(135deg, rgba(43, 108, 176, 0.06), rgba(43, 108, 176, 0.02));
  border-color: rgba(43, 108, 176, 0.18);
}

.hero-comm--v3 .hero-comm__badge {
  align-self: flex-start;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-white);
  background: var(--c-accent);
  padding: 0.25rem 0.6rem;
  border-radius: var(--radius-full);
}

.hero-comm--v3 .hero-comm__title {
  font-family: var(--font-serif);
  font-size: 1.8rem;
  line-height: 1.2;
  font-weight: 700;
  color: var(--c-charcoal);
  margin-top: var(--sp-1);
}

.hero-comm--v3 .hero-comm__link:hover .hero-comm__title {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.hero-comm--v3 .hero-comm__meta-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-top: var(--sp-2);
}

.hero-comm--v3 .hero-comm__date {
  font-size: 0.8rem;
  color: var(--c-slate);
}

.hero-comm--v3 .hero-comm__cta {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--c-accent);
}

.hero-comm--v3 .hero-comm__footer {
  border-top-color: rgba(43, 108, 176, 0.18);
}

/* ── V4: Stacked Minimal ──────────────────────────────────── */
.hero-comm--v4 .hero-comm__link {
  gap: var(--sp-1);
}

.hero-comm--v4 .hero-comm__eyebrow {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-slate);
}

.hero-comm--v4 .hero-comm__title {
  font-size: 1.3rem;
  line-height: 1.3;
  font-weight: 700;
  color: var(--c-accent);
}

.hero-comm--v4 .hero-comm__link:hover .hero-comm__title {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.hero-comm--v4 .hero-comm__meta-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-top: var(--sp-1);
}

.hero-comm--v4 .hero-comm__date {
  font-size: 0.78rem;
  color: var(--c-slate);
}

.hero-comm--v4 .hero-comm__cta {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--c-accent);
}

/* ══════════════════════════════════════════════════════════════
   HOMEPAGE INSIGHT HERO — PROTOTYPES (V1–V4)
   Designed to pair visually with hero-comm variants of the same N.
   ══════════════════════════════════════════════════════════════ */

/* Shared base */
.hero-insight {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  padding: var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  min-height: 14rem;
  transition: box-shadow var(--t-base), border-color var(--t-base);
}

.hero-insight__date {
  font-size: 0.72rem;
  color: var(--c-slate);
  display: block;
  margin-top: calc(var(--sp-1) * -1);
}

.hero-insight__body-link {
  display: block;
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  margin-top: var(--sp-1);
  /* Graceful fade only where content actually reaches the bottom */
  mask-image: linear-gradient(to bottom, #000 calc(100% - 1.25rem), transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 1.25rem), transparent 100%);
}

.hero-insight__body {
  display: block;
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--c-charcoal);
  transition: color var(--t-fast);
}

.hero-insight__body-link:hover .hero-insight__body {
  color: var(--c-accent);
}

.hero-insight__footer {
  padding-top: var(--sp-3);
  margin-top: var(--sp-2);
  border-top: 1px solid var(--c-border);
  flex-shrink: 0;
}

/* ── V1: Bold Headline ────────────────────────────────────── */
.hero-insight--v1 .hero-insight__eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-slate);
}

.hero-insight--v1 .hero-insight__title {
  font-family: var(--font-serif);
  font-size: 1.4rem;
  line-height: 1.2;
  font-weight: 700;
  color: var(--c-accent);
  display: block;
}

/* ── V2: Editorial Feature ────────────────────────────────── */
.hero-insight--v2 {
  border-left: 4px solid var(--c-accent);
}

.hero-insight--v2:hover {
  box-shadow: var(--shadow-card);
}

.hero-insight--v2 .hero-insight__eyebrow {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-accent);
}

.hero-insight--v2 .hero-insight__title {
  font-family: var(--font-serif);
  font-size: 1.55rem;
  line-height: 1.18;
  font-weight: 700;
  color: var(--c-charcoal);
  display: block;
}

/* ── V3: Banner with Tinted Background ────────────────────── */
.hero-insight--v3 {
  background: linear-gradient(135deg, rgba(43, 108, 176, 0.06), rgba(43, 108, 176, 0.02));
  border-color: rgba(43, 108, 176, 0.18);
}

.hero-insight--v3 .hero-insight__badge {
  align-self: flex-start;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-white);
  background: var(--c-accent);
  padding: 0.25rem 0.6rem;
  border-radius: var(--radius-full);
}

.hero-insight--v3 .hero-insight__title {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  line-height: 1.2;
  font-weight: 700;
  color: var(--c-charcoal);
  display: block;
  margin-top: var(--sp-1);
}

.hero-insight--v3 .hero-insight__footer {
  border-top-color: rgba(43, 108, 176, 0.18);
}

/* ── V4: Stacked Minimal ──────────────────────────────────── */
.hero-insight--v4 {
  gap: var(--sp-1);
}

.hero-insight--v4 .hero-insight__eyebrow {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-slate);
}

.hero-insight--v4 .hero-insight__title {
  font-size: 1.05rem;
  line-height: 1.3;
  font-weight: 700;
  color: var(--c-accent);
  display: block;
}