/* ============================================================
   INTERMARKET UNIVERSE — Brand Palette & Design Tokens
   Navy / Gold / Cream — Financial Editorial
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600;700&family=Inter:wght@300;400;500;600;700;800;900&family=Manrope:wght@300;400;500;600;700;800&display=swap');

/* ---- Type Scale ---- */
:root {
  --text-xs:   clamp(0.75rem,  0.7rem + 0.25vw,  0.875rem);
  --text-sm:   clamp(0.875rem, 0.8rem + 0.35vw,  1rem);
  --text-base: clamp(1rem,     0.95rem + 0.25vw, 1.125rem);
  --text-lg:   clamp(1.125rem, 1rem + 0.75vw,    1.5rem);
  --text-xl:   clamp(1.5rem,   1.2rem + 1.25vw,  2.25rem);
  --text-2xl:  clamp(2rem,     1.2rem + 2.5vw,   3.5rem);
  --text-3xl:  clamp(2.5rem,   1rem + 4vw,       5rem);
  --text-hero: clamp(3rem,     0.5rem + 7vw,     7rem);

  /* ---- Spacing ---- */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* ---- Radius ---- */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-full: 9999px;

  /* ---- Transitions ---- */
  --transition-interactive: 180ms cubic-bezier(0.16, 1, 0.3, 1);

  /* ---- Content Widths ---- */
  --content-narrow:  640px;
  --content-default: 960px;
  --content-wide:    1200px;

  /* ---- Fonts ---- */
  --font-display: 'Inter', 'Manrope', -apple-system, sans-serif;
  --font-body:    'Manrope', -apple-system, sans-serif;
  --font-mono:    'IBM Plex Mono', 'Menlo', monospace;
}

/* ============================================================
   LIGHT MODE — Cream / Navy / Gold
   ============================================================ */
:root,
[data-theme='light'] {
  --color-bg:               #faf8f3;
  --color-surface:          #f5f2ea;
  /* Semantic data colors */
  --color-positive:         #1a7a42;
  --color-warning:          #c96a10;
  --color-negative:         #a82b22;
  --color-surface-2:        #ede9de;
  --color-surface-offset:   #e8e3d6;
  --color-divider:          #d8d2c2;
  --color-border:           #ccc6b4;

  --color-text:             #12243a;   /* deep navy */
  --color-text-muted:       #4a5a70;
  --color-text-faint:       #8a96a4;
  --color-text-inverse:     #faf8f3;

  /* Primary — Navy */
  --color-primary:          #1a3a5c;
  --color-primary-hover:    #0f2a46;
  --color-primary-active:   #071e34;
  --color-primary-highlight:#d4dde8;

  /* Accent — Gold */
  --color-gold:             #b8860b;
  --color-gold-light:       #d4a017;
  --color-gold-muted:       #e8d5a3;
  --color-gold-highlight:   #f5edd6;

  /* Utility */
  --color-success:          #2d6a2d;
  --color-error:            #8b2424;
  --color-warning:          #7a5000;

  /* Shadows — warm-toned */
  --shadow-sm:  0 1px 2px rgba(18,36,58,0.06);
  --shadow-md:  0 4px 16px rgba(18,36,58,0.10);
  --shadow-lg:  0 12px 40px rgba(18,36,58,0.14);

  /* ── Unified light palette (site-wide) — Warm cream / Navy / Gold ── */
  --page-bg:          #f5f1e8;   /* warm cream base — parchment */
  --page-surface:     #ffffff;   /* cards, panels — pure white */
  --page-surface-2:   #faf7f0;   /* slightly warm white for hover */
  --page-alt:         #eeeae0;   /* alternating sections — warm linen */
  --page-border:      rgba(26,58,92,0.12);     /* navy-tinted dividers */
  --page-text:        #12243a;   /* deep navy — same as --color-text */
  --page-text-muted:  #4a5a70;   /* muted navy */
  --page-gold:        #b8860b;   /* brand gold — unchanged */
}

/* ============================================================
   DARK MODE — Deep Navy / Gold / Charcoal
   ============================================================ */


@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --color-bg:               #0d1825;
    --color-surface:          #121f30;
    --color-surface-2:        #17263a;
    --color-surface-offset:   #1c2e44;
    --color-divider:          #223450;
    --color-border:           #2e4566;
    --color-text:             #e8e2d4;
    --color-text-muted:       #8ea0b5;
    --color-text-faint:       #4e6278;
    --color-text-inverse:     #0d1825;
    --color-primary:          #6ea8d8;
    --color-primary-hover:    #88bbea;
    --color-primary-active:   #a2cdf8;
    --color-primary-highlight:#1a2e46;
    --color-gold:             #d4a017;
    --color-gold-light:       #e8b830;
    --color-gold-muted:       #4a3810;
    --color-gold-highlight:   #3a2c08;
    --color-success:          #4a9e4a;
    --color-error:            #c85050;
    --color-warning:          #b87a20;
    --shadow-sm:  0 1px 2px rgba(0,0,0,0.3);
    --shadow-md:  0 4px 16px rgba(0,0,0,0.4);
    --shadow-lg:  0 12px 40px rgba(0,0,0,0.5);
  }
}

/* ============================================================
   BASE RESET
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
  scroll-padding-top: var(--space-16);
}
body {
  min-height: 100dvh;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.72;
  font-weight: 500;
  color: var(--page-text);
  background-color: var(--page-bg);
  transition: background-color 0.3s ease, color 0.3s ease;
}
img, picture, svg { display: block; max-width: 100%; height: auto; }
ul[role='list'], ol[role='list'] { list-style: none; }
input, button, textarea, select { font: inherit; color: inherit; }
h1,h2,h3,h4,h5,h6 { text-wrap: balance; line-height: 1.15; font-family: var(--font-display); }
p, li, figcaption { text-wrap: pretty; }
button { cursor: pointer; background: none; border: none; }
table { border-collapse: collapse; width: 100%; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--color-gold-muted); color: var(--color-text); }
:focus-visible { outline: 2px solid var(--color-gold); outline-offset: 3px; border-radius: var(--radius-sm); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border-width: 0; }

/* ============================================================
   HEADER / NAV
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: #fbf9f5;
  border-bottom: 1px solid var(--color-divider);
  box-shadow: 0 2px 10px rgba(8,26,43,0.04);
  transition: box-shadow var(--transition-interactive);
  overflow: visible;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .site-header {
    background-color: rgba(13,24,37,0.97);
    border-bottom-color: rgba(184,134,11,0.18);
  }
}
/* FT-style gold top-line */
.site-header::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--color-gold) 0%, var(--color-gold-light) 50%, var(--color-gold) 100%);
  pointer-events: none;
}
.site-header--scrolled {
  box-shadow: var(--shadow-md);
}
.header-inner {
  min-height: 118px;
  padding-block: var(--space-4);
  padding-inline: clamp(var(--space-6), 5vw, var(--space-16));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
}
.logo-link {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-shrink: 0;
  transition: opacity var(--transition-interactive);
}
.logo-link:hover { opacity: 0.82; }
.logo-emblem-icon {
  position: relative;
  padding-right: 20px;
}
.logo-emblem-icon::after {
  content: '';
  position: absolute;
  top: 2px;
  bottom: 2px;
  right: 0;
  width: 1px;
  background: linear-gradient(to bottom, transparent, var(--color-gold-light) 20%, var(--color-gold-light) 80%, transparent);
}
.logo-emblem-icon svg,
.logo-emblem-icon img {
  width: 58px;
  height: 58px;
  display: block;
}
.logo-wordmark {
  display: flex;
  flex-direction: column;
  line-height: 1;
}
.logo-title {
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--page-text);
  letter-spacing: -0.01em;
}
.logo-tagline {
  font-family: var(--font-body, 'Manrope', sans-serif);
  font-size: 0.74rem;
  font-weight: 800;
  color: var(--color-gold-dark, #8d5c06);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  margin-top: 6px;
  opacity: 1;
}
.site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}
.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  list-style: none;
}
.nav-links a {
  font-family: var(--font-body);
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-primary);
  white-space: nowrap;
  transition: color var(--transition-interactive);
}
.nav-links a:hover { color: var(--page-text); }
.nav-links a.active {
  color: var(--page-text);
  background: transparent;
  border: none;
  border-bottom: 2px solid var(--color-gold);
  border-radius: 0;
  padding: 4px 0;
}

/* Theme toggle */
.theme-toggle { display: none !important; }

/* Subscribe CTA */
.btn-subscribe {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-5);
  background: var(--color-gold);
  color: #fff;
  font-size: var(--text-sm);
  font-weight: 600;
  border-radius: var(--radius-sm);
  letter-spacing: 0.03em;
  transition: background var(--transition-interactive), transform var(--transition-interactive), box-shadow var(--transition-interactive);
  white-space: nowrap;
}
.btn-subscribe:hover {
  background: var(--color-gold-light);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

/* Mobile hamburger */

/* ── Mobile MENU label (text + bars) ── */
.mobile-menu-btn {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 0;
  min-width: 48px;
  min-height: 48px;
  padding: 12px 14px;
  border: 1.5px solid #12243a;
  border-radius: 6px;
  background: #12243a;
  color: #ffffff;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(18,36,58,0.28);
  transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.mobile-menu-btn:hover,
.mobile-menu-btn.open {
  background: #b8860b;
  border-color: #b8860b;
  box-shadow: 0 2px 8px rgba(184,134,11,0.35);
}
.mobile-menu-btn .menu-bars {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 22px;
}
.mobile-menu-btn .menu-bars span {
  display: block;
  height: 3px;
  background: #ffffff;
  border-radius: 2px;
  transition: transform 0.3s, opacity 0.3s, width 0.3s;
}
.mobile-menu-btn.open .menu-bars span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.mobile-menu-btn.open .menu-bars span:nth-child(2) { opacity: 0; width: 0; }
.mobile-menu-btn.open .menu-bars span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
.mobile-menu-btn .menu-label { display: none; }
@media (min-width: 769px) { .mobile-menu-btn { display: none !important; } }


@media (max-width: 768px) {
  .mobile-menu-btn { display: flex !important; }
  .edu-grid { grid-template-columns: 1fr !important; }
  .site-header {
    position: sticky;
    top: 0;
  }
  .nav-coming-soon-badge { display: none; }
  .nav-links, .btn-subscribe, .nav-subscribers-text { display: none; }
  .site-nav.open .nav-links { display: flex; }
  .nav-links a { color: var(--page-text) !important; }
  .site-nav.open .btn-subscribe { display: inline-flex; }
  .site-nav {
    position: fixed;
    top: 64px; left: 0; right: 0;
    background: #f5f1e8;
    border-top: 1px solid rgba(26,58,92,0.10);
    border-bottom: 2px solid rgba(26,58,92,0.12);
    padding: var(--space-6);
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-5);
    transform: translateY(-110%);
    visibility: hidden;
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0.28s;
    z-index: 99;
    pointer-events: none;
  }
  .site-nav.open {
    transform: translateY(0);
    visibility: visible;
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0s;
    pointer-events: all;
  }
  .nav-links { flex-direction: column; gap: var(--space-4); }

  /* ── Mobile header: keep logo + controls always visible ── */
  .header-inner {
    min-height: auto;
    padding: var(--space-3) var(--space-4);
    gap: var(--space-2);
  }
  /* Logo: text-only on mobile, keep compact */
  .logo-wordmark { gap: 0; }
  .logo-emblem-icon {
    padding-right: 10px;
  }
  .logo-emblem-icon svg,
  .logo-emblem-icon img {
    width: 36px;
    height: 36px;
  }
  .logo-link { gap: 10px; }
  /* Wordmark: tighten font size so "Intermarket Universe" fits */
  .logo-title {
    font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
    font-size: 0.95rem;
    letter-spacing: -0.01em;
    white-space: nowrap;
  }
  .logo-tagline {
    font-size: 0.6rem;
    letter-spacing: 0.09em;
  }
  /* Right-side controls: theme toggle always visible */
  .header-inner > div {
    display: flex !important;
    align-items: center;
    gap: var(--space-2);
    flex-shrink: 0;
  }
  .theme-toggle {
    display: flex !important;
    flex-shrink: 0;
  }
}

/* ============================================================
   GOLD RULE / DECORATIVE LINES
   ============================================================ */
.gold-rule {
  border: none;
  border-top: 2px solid var(--color-gold);
  width: 48px;
  margin: var(--space-4) 0;
}
.gold-rule--center { margin: var(--space-4) auto; }
.gold-rule--full { width: 100%; }

/* "Browse All Issues"-style section header links: text + trailing arrow
   icon default to plain inline flow, so the icon can wrap onto its own
   line whenever the text alone exactly fills the remaining width. Lay
   them out as a single non-breaking row instead. */
.section-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

/* ============================================================
   HERO — INDEX PAGE
   ============================================================ */
/* ============================================================
   HERO — Bloomberg/WSJ terminal-style masthead
   Deep charcoal foundation · Gold accents · Inter 800
   ============================================================ */
.hero {
  position: relative;
  overflow: hidden;
  padding: clamp(64px, 10vw, 112px) var(--space-6) clamp(56px, 9vw, 96px);
  /* Light cream masthead — FT/Barron's style on cream page */
  background: linear-gradient(175deg, #f0ece0 0%, #f5f1e8 55%, #ede8db 100%);
  border-top: 3px solid #1a3a5c;
  color: var(--page-text);
  text-align: center;
}

/* Refined grid texture — Bloomberg terminal grid lines */
.hero::before {
  display: none;
}
/* Gold radial glow from top */
.hero::after {
  display: none;
}
/* Decorative animated grid overlay */
.hero-grid-overlay {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(26,58,92,0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(26,58,92,0.055) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, rgba(0,0,0,0.18) 0%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, rgba(0,0,0,0.18) 0%, transparent 75%);
}

.hero-inner {
  position: relative;
  z-index: 1;
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
}

/* ── Status bar — Bloomberg data-row ── */
.hero-status-bar {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: center;
  border: none;
  background: transparent;
  border-radius: 0;
  padding: 4px 0;
  backdrop-filter: none;
}
.hero-status-item {
  display: flex;
  align-items: center;
  gap: 6px;
}
.hero-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-gold);
  box-shadow: 0 0 6px rgba(184,134,11,0.7);
  animation: hero-pulse 3s ease-in-out infinite;
}
@keyframes hero-pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 6px rgba(184,134,11,0.7); }
  50%       { opacity: 0.55; box-shadow: 0 0 3px rgba(184,134,11,0.3); }
}
.hero-status-label {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(184,134,11,0.85);
}
.hero-status-divider {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: rgba(184,134,11,0.25);
  letter-spacing: 0;
}

/* ── Primary headline ── */
.hero-title {
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  font-size: clamp(2.4rem, 6vw, 4.2rem);
  font-weight: 700;
  color: var(--page-text);
  letter-spacing: -0.01em;
  line-height: 1.06;
  text-shadow: none;
}
.hero-title-accent {
  font-style: italic;
  font-weight: 400;
  color: var(--imu-gold, #b8860b);
}

/* ── Gold ruled divider ── */
.hero-rule {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: min(280px, 70%);
  margin: -8px 0;
}
.hero-rule-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(184,134,11,0.5), transparent);
}
.hero-rule-diamond {
  display: inline-flex;
  color: var(--color-gold);
  opacity: 0.85;
  flex-shrink: 0;
}

/* ── Subtitle ── */
.hero-subtitle-lead {
  font-family: var(--font-body);
  font-size: clamp(0.95rem, 1.8vw, 1.15rem);
  font-weight: 700;
  color: var(--page-text);
  line-height: 1.65;
  letter-spacing: 0.01em;
  max-width: 56ch;
  margin: -8px 0;
}

/* ── Sector coverage pills — terminal category tabs ── */
.hero-sectors {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  max-width: 700px;
  margin: 0 auto;
  width: 100%;
}
.hero-sector {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: capitalize;
  color: var(--page-text);
  background: rgba(255,255,255,0.65);
  border: 1.5px solid #12243a;
  padding: 8px 20px;
  border-radius: 3px;
  transition: background 0.18s, border-color 0.18s, color 0.18s, transform 0.15s;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  white-space: nowrap;
}
.hero-sector:hover {
  background: #12243a;
  border-color: #12243a;
  color: #faf8f3;
  transform: translateY(-1px);
  text-decoration: none;
}

/* ── CTAs ── */
.hero-cta-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 4px;
}
.hero-cta-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #0d1520;
  background: var(--color-gold);
  padding: 10px 24px;
  border-radius: 2px;
  border: 1px solid var(--color-gold);
  transition: background 0.18s, transform 0.15s, box-shadow 0.18s;
  text-decoration: none;
  white-space: nowrap;
}
.hero-cta-primary:hover {
  background: var(--color-gold-light);
  border-color: var(--color-gold-light);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(184,134,11,0.35);
  text-decoration: none;
}
.hero-cta-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #0d1520;
  background: var(--color-gold);
  padding: 10px 24px;
  border-radius: 2px;
  border: 1px solid var(--color-gold);
  transition: background 0.18s, transform 0.15s, box-shadow 0.15s;
  text-decoration: none;
  white-space: nowrap;
}
.hero-cta-secondary:hover {
  background: var(--color-gold-light);
  border-color: var(--color-gold-light);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(184,134,11,0.35);
  text-decoration: none;
}

/* Legacy compat */
.hero-eyebrow { display: none; }
.hero-title em { font-style: normal; color: var(--page-text); }
.hero-subtitle-block { width: 100%; }

/* ══════════════════════════════════════════════════════════
   SPLIT HERO — left text / right image layout
   ══════════════════════════════════════════════════════════ */
.hero--image {
  padding: 0;
  overflow: hidden;
  position: relative;
  border-top: none;
}

.hero-image-wrap {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 49.9%;
  overflow: hidden;
  line-height: 0;
}

.hero-image-full {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
}

/* Invisible clickable hotspots over the CTA buttons baked into the artwork */
.hero-image-hotspot {
  position: absolute;
  border-radius: 2px;
}
.hero-image-hotspot--primary {
  top: 67.3%;
  left: 4.21%;
  width: 27.4%;
  height: 8.1%;
}
.hero-image-hotspot--secondary {
  top: 76.8%;
  left: 4.21%;
  width: 27.4%;
  height: 8.1%;
}

/* Mobile: zoom into the headline/CTA side of the artwork instead of
   shrinking the whole skyline down to an illegible strip. Taller
   container + object-fit: cover (anchored left) crops the far right
   of the photo but enlarges the readable content. */
@media (max-width: 600px) {
  .hero-image-wrap {
    padding-bottom: 92%;
  }
  .hero-image-full {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: left top;
  }
  .hero-image-hotspot--primary {
    top: 67.1%;
    left: 11.4%;
    width: 58.3%;
    height: 9.3%;
  }
  .hero-image-hotspot--secondary {
    top: 78%;
    left: 11.4%;
    width: 58.3%;
    height: 9.3%;
  }
}

/* ══════════════════════════════════════════════════════════
   ICON STRIP — 6-column nav below hero
   ══════════════════════════════════════════════════════════ */
.icon-strip {
  background: #fdf9f2;
  border-top: 3px solid var(--color-gold);
  border-bottom: 1px solid rgba(26,58,92,0.10);
}

.icon-strip-inner {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  max-width: 100%;
  gap: 18px;
  padding: 26px 24px 30px;
}

.icon-strip-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 32px 20px 28px;
  gap: 12px;
  text-decoration: none;
  color: var(--page-text);
  border: 1px solid rgba(26,58,92,0.16);
  border-radius: 16px;
  background: linear-gradient(180deg, #ffffff 0%, #fbf6ec 100%);
  box-shadow: 0 1px 2px rgba(26,58,92,0.06), 0 8px 22px -12px rgba(26,58,92,0.22);
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
  position: relative;
  overflow: hidden;
}
.icon-strip-item::before {
  content: '';
  position: absolute;
  top: 0; left: 18%; right: 18%;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: linear-gradient(90deg, transparent, var(--color-gold), transparent);
  opacity: 0.55;
  transition: opacity 0.22s ease, left 0.22s ease, right 0.22s ease;
}
.icon-strip-item:hover {
  transform: translateY(-4px);
  border-color: rgba(184,134,11,0.45);
  box-shadow: 0 2px 4px rgba(26,58,92,0.08), 0 16px 30px -14px rgba(26,58,92,0.32);
}
.icon-strip-item:hover::before { opacity: 1; left: 8%; right: 8%; }
.icon-strip-item:hover .icon-strip-rule {
  width: 32px;
  background: var(--color-gold);
}

.icon-strip-img-wrap {
  width: 90px;
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.icon-strip-img {
  width: 90px;
  height: 90px;
  object-fit: contain;
  display: block;
}

.icon-strip-label {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--page-text);
  line-height: 1;
  margin-top: 4px;
}

.icon-strip-desc {
  font-size: 14px;
  color: var(--page-text-muted);
  line-height: 1.55;
  max-width: 148px;
}

.icon-strip-rule {
  width: 32px;
  height: 2px;
  background: var(--page-gold, #b8860b);
  border-radius: 1px;
  margin-top: 2px;
  opacity: 0.55;
  transition: width 0.2s ease, opacity 0.2s ease;
}
.icon-strip-item:hover .icon-strip-rule {
  width: 44px;
  opacity: 0.85;
}

@media (max-width: 900px) {
  .icon-strip-inner {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 520px) {
  .icon-strip-inner {
    grid-template-columns: repeat(2, 1fr);
  }
  .icon-strip-inner { gap: 12px; padding: 16px 14px 20px; }
  .icon-strip-item { padding: 20px 12px 18px; border-radius: 14px; }
  .icon-strip-img-wrap, .icon-strip-img { width: 56px; height: 56px; }
}


/* ── Hero decorative SVG market lines ──────────────────── */
.hero-deco {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 160px;
  height: 320px;
  pointer-events: none;
  z-index: 0;
  opacity: 0.85;
}
.hero-deco--left  { left: 2%; }
.hero-deco--right { right: 2%; transform: translateY(-50%) scaleX(-1); }

/* ── Floating market data chips ─────────────────────────── */
.hero-data-chips {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.hero-chip {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: rgba(255,255,255,0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(184,134,11,0.22);
  border-radius: 6px;
  padding: 7px 12px;
  box-shadow: 0 2px 12px rgba(26,58,92,0.08);
}
.hero-chip-label {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--page-text-muted);
}
.hero-chip-value {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
}
.hero-chip-value--up   { color: #1a6b3c; }
.hero-chip-value--down { color: #8b1a1a; }

/* Chip positions — corners, away from headline */
.hero-chip--1 { top: 18%;  left: 12%; }
.hero-chip--2 { top: 14%;  right: 11%; }
.hero-chip--3 { bottom: 22%; left: 10%; }
.hero-chip--4 { bottom: 18%; right: 10%; }

/* Hide chips and deco on small viewports */
@media (max-width: 900px) {
  .hero-deco { display: none; }
  .hero-data-chips { display: none; }
}

.hero-subtitle-sub { display: none; }
.hero-meta { display: none; }

/* Mobile */
@media (max-width: 600px) {
  .hero-title { font-size: clamp(2rem, 8vw, 2.8rem); }
  .hero-status-bar { padding: 6px 14px; gap: 8px; }
  .hero-status-divider { display: none; }
  .hero-cta-row { flex-direction: column; gap: var(--space-3); }
  .hero-cta-primary, .hero-cta-secondary { width: 100%; justify-content: center; }
}


/* ============================================================
   SECTION LAYOUT — Unified dark charcoal palette
   ============================================================ */
.section {
  background: var(--page-bg);
  color: var(--page-text);
  padding-block: clamp(var(--space-10), 5vw, var(--space-16));
  padding-inline: clamp(var(--space-6), 5vw, var(--space-16));
}
.section--alt {
  background: var(--page-alt);
  border-top: 1px solid rgba(26,58,92,0.10);
  border-bottom: 1px solid rgba(26,58,92,0.10);
}


/* ============================================================
   NEWSLETTER CARDS — FEATURED GRID
   ============================================================ */
.featured-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: auto auto;
  gap: var(--space-6);
}
@media (max-width: 900px) { .featured-grid { grid-template-columns: 1fr; } }

.card {
  background: var(--page-surface);
  border: 1px solid rgba(26,58,92,0.14);
  border-left: 3px solid rgba(26,58,92,0.14);
  border-radius: var(--radius-xl);
  overflow: hidden;
  transition: box-shadow var(--transition-interactive), transform var(--transition-interactive), border-color var(--transition-interactive), border-left-color var(--transition-interactive);
}
.card:hover {
  box-shadow: 0 6px 24px rgba(26,58,92,0.12);
  transform: translateY(-3px);
  border-color: rgba(184,134,11,0.4);
  border-left-color: var(--color-gold);
}
.card--hero { grid-row: span 2; }
.card--hero .card-img { height: 260px; }
.card--sm .card-img { height: 150px; }

.card-img {
  width: 100%;
  object-fit: cover;
  background: var(--color-surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.card-img-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-active, #071e34) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-8);
}
  background: linear-gradient(135deg, #1a2e44 0%, #0d1825 100%);
}
.card-img-icon {
  color: var(--color-gold);
  opacity: 0.7;
}
.card-body {
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.card-meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--page-text-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 500;
}
.card-tag {
  display: inline-block;
  padding: 2px var(--space-2);
  background: var(--color-gold-highlight);
  color: var(--color-gold);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.card-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--page-text);
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.card--hero .card-title { font-size: var(--text-xl); }
.card-excerpt {
  font-size: var(--text-sm);
  color: var(--page-text-muted);
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card-footer {
  margin-top: var(--space-2);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-divider);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.card-read-link {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-gold);
  display: flex;
  align-items: center;
  gap: var(--space-1);
  transition: gap var(--transition-interactive), color var(--transition-interactive);
}
.card-read-link:hover { gap: var(--space-2); color: var(--color-gold-light); }
.card-read-time {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
}

/* ============================================================
   NEWSLETTER ARCHIVE LIST
   ============================================================ */
.archive-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  align-items: stretch;
}
.archive-card {
  background: var(--page-surface);
  border: 1px solid rgba(26,58,92,0.14);
  border-left: 3px solid rgba(26,58,92,0.14);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: box-shadow var(--transition-interactive), transform var(--transition-interactive), border-color var(--transition-interactive);
  display: flex;
  flex-direction: column;
}
.archive-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
  border-color: var(--color-gold-muted);
}
/* ============================================================
   FILTER BAR (Archive Page)
   ============================================================ */
/* ── Filter controls wrapper ── */
.filter-controls {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-bottom: var(--space-8);
}
.filter-search-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

/* ── Filter bar: editorial tab strip ── */
.filter-bar {
  display: flex;
  align-items: stretch;
  gap: 0;
  flex-wrap: wrap;
  margin-bottom: var(--space-8);
  border: 1px solid rgba(26,58,92,0.14);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--page-surface);
  padding: 0;
  row-gap: 0;
}
.filter-btn {
  padding: 10px 16px;
  border: none;
  border-right: 1px solid rgba(26,58,92,0.10);
  border-radius: 0;
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--page-text-muted);
  background: transparent;
  cursor: pointer;
  position: relative;
  transition: color 0.15s ease, background 0.15s ease;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 6px;
}
.filter-btn::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: transparent;
  transition: background 0.15s ease;
}
.filter-btn:last-of-type { border-right: none; }
.filter-btn:hover {
  background: var(--color-surface-2);
  color: var(--color-text);
}
.filter-btn.active {
  background: rgba(184,134,11,0.07);
  color: var(--color-gold);
  border-bottom-color: transparent;
}
.filter-btn.active::after {
  background: var(--color-gold);
}
}
}
.search-input-wrap {
  margin-left: auto;
  position: relative;
  display: flex;
  align-items: center;
}
.search-input {
  padding: var(--space-2) var(--space-4) var(--space-2) var(--space-10);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--page-surface);
  font-size: var(--text-sm);
  color: var(--color-text);
  min-width: 200px;
  transition: border-color var(--transition-interactive), box-shadow var(--transition-interactive);
}
.search-input:focus { outline: none; border-color: var(--color-gold); box-shadow: 0 0 0 3px var(--color-gold-highlight); }
.search-icon {
  position: absolute;
  left: var(--space-3);
  color: var(--color-text-faint);
  pointer-events: none;
}

/* ============================================================
   NEWSLETTER READER PAGE
   ============================================================ */
.reader-header {
  padding: clamp(var(--space-12), 8vw, var(--space-20)) var(--space-6);
  background: var(--color-primary);
  color: var(--color-text-inverse);
}
.reader-header-inner {
  max-width: var(--content-narrow);
  margin: 0 auto;
}
.reader-tag {
  display: inline-block;
  padding: 3px var(--space-3);
  background: var(--color-gold-muted);
  color: var(--color-gold-light);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: var(--space-4);
}
.reader-title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  color: #faf8f3;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin-bottom: var(--space-5);
}
.reader-meta {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  font-size: var(--text-xs);
  color: rgba(250,248,243,0.6);
  flex-wrap: wrap;
}
.reader-meta-sep { color: var(--color-gold); }

/* Article body */
.reader-body {
  padding: clamp(var(--space-12), 8vw, var(--space-20)) var(--space-6);
}
.reader-body .container {
  display: grid;
  grid-template-columns: 1fr 240px;
  gap: var(--space-12);
  align-items: start;
  max-width: var(--content-wide);
  margin: 0 auto;
  width: 100%;
}
@media (max-width: 860px) { .reader-body .container { grid-template-columns: 1fr; } }
.reader-content { min-width: 0; }
.reader-content h2 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-text);
  margin-top: var(--space-10);
  margin-bottom: var(--space-4);
  letter-spacing: -0.02em;
}
.reader-content h3 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-text);
  margin-top: var(--space-8);
  margin-bottom: var(--space-3);
}
.reader-content p { font-size: var(--text-base); line-height: 1.75; color: var(--color-text); margin-bottom: var(--space-5); max-width: 68ch; }
.reader-content ul, .reader-content ol { padding-left: var(--space-6); margin-bottom: var(--space-5); }
.reader-content li { font-size: var(--text-base); line-height: 1.7; color: var(--color-text-muted); margin-bottom: var(--space-2); }
.reader-content strong { color: var(--color-text); font-weight: 600; }
.reader-content em { font-style: italic; color: var(--color-text-muted); }
.reader-content hr { border: none; border-top: 1px solid var(--color-divider); margin: var(--space-10) 0; }
.reader-content blockquote {
  border-left: 3px solid var(--color-gold);
  padding: var(--space-4) var(--space-6);
  background: var(--color-gold-highlight);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  margin: var(--space-8) 0;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-style: italic;
  color: var(--color-text);
  line-height: 1.5;
}
.reader-content table { margin: var(--space-8) 0; font-size: var(--text-sm); }
.reader-content th {
  background: var(--color-primary);
  color: #fff;
  padding: var(--space-3) var(--space-4);
  text-align: left;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.03em;
}
.reader-content td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-divider);
  color: var(--color-text-muted);
}
.reader-content tr:hover td { background: var(--page-surface); }
.reader-content .data-callout {
  background: var(--page-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  margin: var(--space-8) 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-4);
}
.data-callout-item { text-align: center; }
.data-callout-value {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-primary);
  display: block;
}
.data-callout-label {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: var(--space-1);
}
.data-callout-delta {
  font-size: var(--text-xs);
  font-weight: 600;
  margin-top: 2px;
}
.data-callout-delta.up { color: var(--color-success); }
.data-callout-delta.down { color: var(--color-error); }

/* TOC Sidebar */
.reader-sidebar { position: sticky; top: calc(var(--space-16) + var(--space-4)); }
.toc-box {
  background: var(--page-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}
.toc-title {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  margin-bottom: var(--space-4);
}
.toc-list { list-style: none; display: flex; flex-direction: column; gap: var(--space-2); }
.toc-list a {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.4;
  transition: color var(--transition-interactive), padding-left var(--transition-interactive);
  display: block;
  padding-left: var(--space-3);
  border-left: 2px solid transparent;
}
.toc-list a:hover, .toc-list a.toc-active {
  color: var(--color-text);
  border-left-color: var(--color-gold);
}

/* ============================================================
   STATS BAR
   ============================================================ */
.stats-bar {
  background: var(--color-primary);
  padding: var(--space-8) var(--space-6);
  color: #faf8f3;
}
.stats-bar-inner {
  max-width: var(--content-wide);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-6);
  text-align: center;
}
.stat-item-value {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--color-gold-light);
  display: block;
  letter-spacing: -0.03em;
}
.stat-item-label {
  font-size: var(--text-xs);
  color: rgba(250,248,243,0.6);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-top: var(--space-1);
}

/* ============================================================
   SUBSCRIPTION FORM
   ============================================================ */
.subscribe-section {
  background: var(--page-bg);
  border-top: 1px solid rgba(26,58,92,0.10);
  border-bottom: 1px solid rgba(26,58,92,0.10);
  padding: clamp(var(--space-10), 6vw, var(--space-16)) var(--space-6);
  text-align: center;
  color: var(--page-text);
}
.subscribe-title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--page-text);
  letter-spacing: -0.03em;
  margin-bottom: var(--space-3);
}
.subscribe-subtitle {
  font-size: var(--text-base);
  color: var(--page-text-muted);
  max-width: 48ch;
  margin: 0 auto var(--space-8);
  line-height: 1.65;
}
.subscribe-form {
  display: flex;
  gap: var(--space-3);
  max-width: 460px;
  margin: 0 auto;
  flex-wrap: wrap;
}
.subscribe-input {
  flex: 1;
  min-width: 220px;
  padding: var(--space-3) var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--page-bg);
  color: var(--color-text);
  font-size: var(--text-sm);
  transition: border-color var(--transition-interactive), box-shadow var(--transition-interactive);
}
.subscribe-input:focus { outline: none; border-color: var(--color-gold); box-shadow: 0 0 0 3px var(--color-gold-highlight); }
.subscribe-btn {
  padding: var(--space-3) var(--space-6);
  background: var(--color-gold);
  color: #fff;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.03em;
  transition: background var(--transition-interactive), transform var(--transition-interactive);
}
.subscribe-btn:hover { background: var(--color-gold-light); transform: translateY(-1px); }
.subscribe-note {
  margin-top: var(--space-4);
  font-size: var(--text-xs);
  color: var(--page-text-muted);
}

/* ============================================================
   TOPICS / CATEGORIES (homepage)
   ============================================================ */
.topics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-4);
}
.topic-card {
  padding: var(--space-5) var(--space-5);
  background: var(--page-surface);
  border: 1px solid rgba(26,58,92,0.13);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  cursor: pointer;
  transition: background var(--transition-interactive), border-color var(--transition-interactive), transform var(--transition-interactive), box-shadow var(--transition-interactive);
  text-decoration: none;
}
.topic-card:hover { background: var(--color-surface-2); border-color: var(--color-gold-muted); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.topic-icon {
  display: flex; align-items: center; justify-content: center;
  color: var(--color-gold);
  flex-shrink: 0;
  font-size: 22px;
  background: none;
  border-radius: 0;
  width: auto; height: auto;
}
.topic-name {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
}
.topic-count {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  margin-top: 2px;
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  background: #0d1e2e;
  border-top: 3px solid var(--color-gold);
  color: rgba(200,210,220,0.72);
  padding: clamp(var(--space-10), 6vw, var(--space-16)) var(--space-6) var(--space-8);
}
.footer-inner {
  max-width: var(--content-wide);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--space-10);
}
@media (max-width: 860px) { .footer-inner { grid-template-columns: 1fr 1fr; } }
@media (max-width: 500px) { .footer-inner { grid-template-columns: 1fr; } }
.footer-brand { }
.footer-logo-title {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-gold-light);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: var(--space-1);
}
.footer-logo-tagline {
  font-size: var(--text-xs);
  color: var(--color-gold-light);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: var(--space-5);
}
.footer-desc {
  font-size: var(--text-sm);
  line-height: 1.65;
  color: rgba(250,248,243,0.6);
  max-width: 30ch;
}
.footer-col-title {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-gold-light);
  margin-bottom: var(--space-5);
}
.footer-links { list-style: none; display: flex; flex-direction: column; gap: var(--space-3); }
.footer-links a {
  font-size: var(--text-sm);
  color: rgba(250,248,243,0.6);
  transition: color var(--transition-interactive);
}
.footer-links a:hover { color: #faf8f3; }
.footer-bottom {
  max-width: var(--content-wide);
  margin: var(--space-10) auto 0;
  padding-top: var(--space-6);
  border-top: 1px solid rgba(250,248,243,0.12);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.footer-bottom-text {
  font-size: var(--text-xs);
  color: rgba(250,248,243,0.4);
}
.footer-disclaimer {
  font-size: var(--text-xs);
  color: rgba(250,248,243,0.35);
  line-height: 1.5;
  max-width: 60ch;
  margin-top: var(--space-2);
}

/* ── Simple report-page footer (brand + nav only, no link columns) ──
   .footer-inner was unstyled for this variant, since the base grid
   rule above assumes 4 columns (brand + 3 link lists). With only two
   children (brand, nav) that grid squeezed the nav into a single
   narrow track, wrapping its 5 links onto cramped stacked lines. This
   modifier switches to a simple two-up flex row instead. */
.footer-inner--simple {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-8, 32px) var(--space-10);
}
.footer-inner--simple .footer-logo-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.footer-inner--simple .footer-logo-wordmark {
  display: flex;
  flex-direction: column;
}
.footer-inner--simple .footer-logo-name {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: #faf8f3;
  letter-spacing: -0.01em;
}
.footer-inner--simple .footer-tagline {
  font-size: 0.8rem;
  color: rgba(250,248,243,0.5);
}
.footer-inner--simple .footer-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 28px;
}
.footer-inner--simple .footer-nav a {
  font-size: 0.85rem;
  font-weight: 600;
  color: rgba(250,248,243,0.65);
  text-decoration: none;
  transition: color var(--transition-interactive, .15s);
}
.footer-inner--simple .footer-nav a:hover { color: var(--color-gold-light); }
@media (max-width: 560px) {
  .footer-inner--simple { flex-direction: column; }
}

/* ============================================================
   BACK / BREADCRUMB
   ============================================================ */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  margin-bottom: var(--space-6);
}
.breadcrumb a { color: var(--color-text-faint); transition: color var(--transition-interactive); }
.breadcrumb a:hover { color: var(--color-gold); }
.breadcrumb-sep { color: var(--color-border); }

/* ============================================================
   PAGINATION
   ============================================================ */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-12);
}
.page-btn {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  background: var(--page-surface);
  cursor: pointer;
  transition: background var(--transition-interactive), color var(--transition-interactive), border-color var(--transition-interactive);
}
.page-btn:hover { background: var(--color-surface-2); color: var(--color-text); border-color: var(--color-gold-muted); }
.page-btn.active { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }

/* ============================================================
   BACK TO TOP
   ============================================================ */
.back-to-top {
  position: fixed;
  bottom: var(--space-6);
  right: var(--space-6);
  width: 44px; height: 44px;
  background: var(--color-primary);
  color: #fff;
  border-radius: var(--radius-full);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
  transition: opacity 0.3s, transform 0.3s;
  z-index: 80;
}
.back-to-top.visible { opacity: 1; pointer-events: all; transform: translateY(0); }
.back-to-top:hover { background: var(--color-primary-hover, #0f2a46); }

/* ============================================================
   UTILITIES
   ============================================================ */
.text-gold { color: var(--color-gold); }
.text-muted { color: var(--color-text-muted); }
.text-faint { color: var(--color-text-faint); }
.font-display { font-family: var(--font-display); }
.mt-auto { margin-top: auto; }
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }

/* ============================================================
   ISSUE CARD — Redesigned (v2)
   Replaces archive-card for homepage Recent Issues section
   ============================================================ */
.issue-card {
  position: relative;
  background: var(--page-surface);
  border: 1px solid rgba(26,58,92,0.14);
  border-radius: var(--radius-xl);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.22s ease, transform 0.22s ease, border-color 0.22s ease;
}
.issue-card:hover {
  box-shadow: 0 6px 24px rgba(26,58,92,0.12);
  transform: translateY(-3px);
  border-color: rgba(184,134,11,0.4);
}
/* Colored left-accent bar — always visible, gold on hover */
.issue-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 3px;
  height: 100%;
  background: var(--color-divider);
  border-radius: 3px 0 0 3px;
  opacity: 1;
  transition: background 0.22s ease;
}
.issue-card:hover::before { background: var(--color-gold); }

/* ============================================================
   TIER COMPARISON STRIP (homepage between subscribe sections)
   ============================================================ */
.tier-strip {
  background: var(--page-bg);
  border-top: 1px solid rgba(26,58,92,0.10);
  border-bottom: 1px solid rgba(26,58,92,0.10);
  padding: var(--space-12) var(--space-6);
  color: var(--page-text);
}
.tier-strip-inner {
  max-width: var(--content-wide);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1px 1fr 1px 1fr;
  gap: var(--space-8);
  align-items: start;
}
@media (max-width: 720px) {
  .tier-strip-inner { grid-template-columns: 1fr; gap: var(--space-8); }
  .tier-divider { display: none; }
}
.tier-divider { background: rgba(26,58,92,0.12); width: 1px; align-self: stretch; }
.tier-label {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: var(--space-3);
}
.tier-label--free { color: var(--page-text-muted); }
.tier-label--premium { color: var(--color-gold); }
.tier-name {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  letter-spacing: -0.03em;
  margin-bottom: var(--space-2);
}
.tier-price {
  font-size: var(--text-sm);
  color: var(--page-text-muted);
  margin-bottom: var(--space-5);
}
.tier-features {
  list-style: none;
  padding: 0; margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.tier-features li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--text-sm);
  opacity: 0.85;
  line-height: 1.5;
}
.tier-features li span.check {
  flex-shrink: 0;
  width: 18px; height: 18px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px;
  margin-top: 1px;
}
.tier-features li span.check--free { background: rgba(255,255,255,0.1); }
.tier-features li span.check--gold { background: var(--color-gold); color: #fff; }
.tier-cta {
  margin-top: var(--space-6);
  display: inline-block;
  padding: var(--space-3) var(--space-7);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: opacity 0.15s, transform 0.15s;
}
.tier-cta:hover { opacity: 0.88; transform: translateY(-1px); }
.tier-cta--free { background: var(--page-alt); color: var(--page-text); border: none; border-radius: var(--radius-sm) !important; }
.tier-cta--gold { background: var(--color-gold); color: #fff; }

/* ============================================================
   RECENT ISSUES GRID — updated to use issue-card
   ============================================================ */
.issues-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-6);
}
@media (max-width: 680px) {
  .issues-grid { grid-template-columns: 1fr; }
}


/* ============================================================
   COVERAGE AREAS — Redesigned topic cards (v2)
   ============================================================ */
.topics-grid-v2 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
}
@media (max-width: 1100px) { .topics-grid-v2 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px)  { .topics-grid-v2 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .topics-grid-v2 { grid-template-columns: 1fr; } }

/* ── Mobile-only: compact research coverage cards ── */
@media (max-width: 480px) {
  .topic-card-v2 {
    min-height: unset;
  }
  .topic-card-v2-band {
    padding: var(--space-3) var(--space-4);
    gap: var(--space-3);
  }
  .topic-card-v2-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
  }
  .topic-card-v2-label {
    font-size: 0.85rem;
  }
  .topic-card-v2-sublabel {
    font-size: 0.6rem;
  }
  .topic-card-v2-body {
    padding: var(--space-2) var(--space-4);
  }
  .topic-card-v2-tickers {
    font-size: 0.65rem;
    line-height: 1.4;
  }
  .topic-card-v2-arrow {
    font-size: 0.65rem;
    margin-top: var(--space-1);
  }
}


/* Wide card spanning 2 columns for visual rhythm (used on 1st + last) */
.topic-card-v2.wide { grid-column: span 2; }
@media (max-width: 760px) { .topic-card-v2.wide { grid-column: span 1; } }

.topic-card-v2 {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-xl);
  overflow: hidden;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
  min-height: 160px;
}
.topic-card-v2:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.2);
  border-color: rgba(255,255,255,0.12);
}

/* Gradient band header */
.topic-card-v2-band {
  padding: var(--space-5) var(--space-5) var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
}
.topic-card-v2-icon {
  width: 42px; height: 42px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(8px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.08);
}
.topic-card-v2-label {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.topic-card-v2-sublabel {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.65;
  margin-top: 1px;
}

/* Body area */
.topic-card-v2-body {
  background: var(--page-surface);
  border-top: 1px solid var(--color-border);
  padding: var(--space-4) var(--space-5);
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.topic-card-v2-tickers {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--color-text-faint);
  text-transform: uppercase;
  line-height: 1.5;
}
.topic-card-v2-count {
  font-size: 0.68rem;
  color: var(--color-text-faint);
}
.topic-card-v2-arrow {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: gap 0.15s ease;
}
.topic-card-v2:hover .topic-card-v2-arrow { gap: 9px; }

/* Color themes per sector */
.topic-card-v2--ai       .topic-card-v2-band { background: linear-gradient(135deg, #1a1a4a 0%, #2a1a5e 100%); color: #c4b8ff; }
.topic-card-v2--ai       .topic-card-v2-arrow { color: #9980ff; }
.topic-card-v2--energy   .topic-card-v2-band { background: linear-gradient(135deg, #1a2e0e 0%, #243d12 100%); color: #8fcc6a; }
.topic-card-v2--energy   .topic-card-v2-arrow { color: #6db04a; }
.topic-card-v2--forex    .topic-card-v2-band { background: linear-gradient(135deg, #0d2244 0%, #1a3a6c 100%); color: #88b8f0; }
.topic-card-v2--forex    .topic-card-v2-arrow { color: #5590d8; }
.topic-card-v2--macro    .topic-card-v2-band { background: linear-gradient(135deg, #2e1a0a 0%, #4a2c10 100%); color: #e8b06a; }
.topic-card-v2--macro    .topic-card-v2-arrow { color: #c88a40; }
.topic-card-v2--memory   .topic-card-v2-band { background: linear-gradient(135deg, #1a0a2e 0%, #2e1050 100%); color: #d4a8ff; }
.topic-card-v2--memory   .topic-card-v2-arrow { color: #b080ff; }
.topic-card-v2--metals   .topic-card-v2-band { background: linear-gradient(135deg, #1e1a08 0%, #3a3010 100%); color: #e8d060; }
.topic-card-v2--metals   .topic-card-v2-arrow { color: #c8a820; }
.topic-card-v2--semis    .topic-card-v2-band { background: linear-gradient(135deg, #0d1e35 0%, #1a3358 100%); color: #b8d8f8; }
.topic-card-v2--semis    .topic-card-v2-arrow { color: #5a9ed8; }
.topic-card-v2--commodities .topic-card-v2-band { background: linear-gradient(135deg, #241408 0%, #3d2a10 55%, #1c2a0e 100%); color: #e8c060; }
.topic-card-v2--commodities .topic-card-v2-arrow { color: #d8954a; }

/* Topic card inline topic group (e.g. Data Storage Technology within AI Infrastructure) */
.topic-card-v2-topic-group {
  margin: 10px 0 6px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
}
.topic-card-v2-topic-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  margin-bottom: 7px;
}
.topic-card-v2-topic-links {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.topic-card-v2-topic-links a {
  font-size: 12.5px;
  color: rgba(196,184,255,0.85);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: color 0.2s;
}
.topic-card-v2-topic-links a::before {
  content: '›';
  font-size: 14px;
  opacity: 0.5;
  line-height: 1;
}
.topic-card-v2-topic-links a:hover { color: #c4b8ff; }
.topic-card-v2-arrow { display: flex; align-items: center; gap: 6px; text-decoration: none; }

/* Dark mode body */

/* ============================================================
   PAGINATION — Redesigned (v2)
   ============================================================ */
.pagination-v2 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: var(--space-12);
  padding: var(--space-6) 0;
  position: relative;
}
.pagination-v2::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 48px; height: 2px;
  background: var(--color-gold);
  border-radius: 2px;
}
.pag-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--page-surface);
  color: var(--color-text-muted);
  transition: all 0.18s ease;
  letter-spacing: 0.02em;
  user-select: none;
}
/* Number buttons */
.pag-btn--num {
  width: 40px; height: 40px;
}
.pag-btn--num:hover:not(.pag-btn--active):not(.pag-btn--disabled) {
  background: var(--color-surface-2);
  color: var(--color-text);
  border-color: var(--color-gold-muted);
}
.pag-btn--active {
  background: var(--color-primary);
  color: #faf8f3;
  border-color: var(--color-primary);
  box-shadow: 0 3px 12px rgba(26,58,92,0.4);
  cursor: default;
}
/* Arrow buttons */
.pag-btn--arrow {
  width: 40px; height: 40px;
}
.pag-btn--arrow:hover:not(.pag-btn--disabled) {
  background: var(--color-surface-2);
  color: var(--color-text);
  border-color: var(--color-gold-muted);
}
/* Ellipsis */
.pag-ellipsis {
  width: 32px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  color: var(--color-text-faint);
  font-size: 14px;
  letter-spacing: 0.1em;
  cursor: default;
}
/* Page label (e.g. "Page 2 of 4") */
.pag-label {
  font-size: 12px;
  color: var(--color-text-faint);
  letter-spacing: 0.06em;
  font-weight: 500;
  margin: 0 var(--space-3);
  white-space: nowrap;
}
.pag-btn--disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}


/* ============================================================
   REPORT TEMPLATE v2 — Option 2+4 Professional Layout
   ============================================================ */

/* ── Cover Band ─────────────────────────────────────────── */
.rpt-cover {
  position: relative;
  overflow: hidden;
  padding: var(--space-10) var(--space-8) var(--space-8);
  border-bottom: 2px solid rgba(255,255,255,0.08);
}
.rpt-cover-inner {
  max-width: 820px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}
.rpt-cover-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: var(--space-5);
  flex-wrap: wrap;
}
.rpt-cover-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border-radius: 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  border: none;
  opacity: 0.85;
}
.rpt-cover-title {
  font-family: var(--font-body);
  font-size: clamp(1.6rem, 3.5vw, 2.6rem);
  font-weight: 700;
  line-height: 1.18;
  color: #ffffff;
  text-shadow: 0 1px 4px rgba(0,0,0,0.45);
  margin: 0 0 var(--space-4);
  letter-spacing: -0.02em;
}
.rpt-cover-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: rgba(255,255,255,0.65);
  flex-wrap: wrap;
}
.rpt-cover-meta-sep { opacity: 0.3; color: #fff; }
.rpt-cover-issue {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: 0.5;
  color: #ffffff;
}
.rpt-cover-ticker {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  background: rgba(255,255,255,0.1);
  color: #ffffff;
  border: 1px solid rgba(255,255,255,0.2);
}

/* ── Executive Summary Card ─────────────────────────────── */
.rpt-exec-summary {
  background: var(--page-surface);
  border: 1px solid rgba(184,134,11,0.25);
  border-radius: 10px;
  padding: 28px 28px 24px 28px;
  margin: var(--space-7) 0;
  position: relative;
  overflow: hidden;
  border-left: 4px solid var(--rpt-accent, var(--color-gold));
}
.rpt-exec-summary::before { display: none; }
.rpt-exec-label {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--rpt-accent, var(--color-gold));
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}
.rpt-exec-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: currentColor;
  opacity: 0.2;
  min-width: 20px;
}
.rpt-exec-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px 24px;
  align-items: start;
}
.rpt-exec-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--color-text-muted);
  min-width: 0;
  word-break: break-word;
}
.rpt-exec-item::before {
  content: '▸';
  color: var(--rpt-accent, var(--color-gold));
  font-size: 10px;
  margin-top: 3px;
  flex-shrink: 0;
}
@media (max-width: 640px) {
  .rpt-exec-grid { grid-template-columns: 1fr; }
  .rpt-exec-summary { padding-left: calc(var(--space-4) + 6px); }
}

/* ── Section Divider Bands ──────────────────────────────── */
.rpt-section-band {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: var(--space-8) 0 var(--space-5);
}
.rpt-section-band-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, var(--rpt-accent, var(--color-gold)) 0%, transparent 100%);
  opacity: 0.35;
}
.rpt-section-num {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--rpt-accent, var(--color-gold));
  opacity: 0.6;
  white-space: nowrap;
}
.rpt-section-title {
  font-font-family: var(--font-body)ont-size: 1.25rem;
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 var(--space-4);
  letter-spacing: -0.01em;
}

/* ── Rating / Conviction Card ───────────────────────────── */
.rpt-rating-card {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin: var(--space-6) 0;
}
.rpt-rating-item {
  flex: 1;
  min-width: 130px;
  background: var(--page-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  text-align: center;
}
.rpt-rating-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  margin-bottom: var(--space-2);
}
.rpt-rating-value {
  font-familfont-family: var(--font-body)ize: 1.4rem;
  font-weight: 700;
  color: var(--rpt-accent, var(--color-gold));
  line-height: 1.1;
}
.rpt-rating-sub {
  font-size: 11px;
  color: var(--color-text-faint);
  margin-top: 4px;
}

/* ── Risk Matrix ────────────────────────────────────────── */
.rpt-risk-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  margin: var(--space-5) 0;
}
.rpt-risk-cell {
  padding: var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--page-surface);
}
.rpt-risk-cell-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  margin-bottom: var(--space-2);
}
.rpt-risk-cell-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: var(--space-1);
}
.rpt-risk-cell-desc {
  font-size: 12px;
  color: var(--color-text-muted);
  line-height: 1.5;
}
.rpt-risk-cell.high .rpt-risk-cell-label { color: #e05555; }
.rpt-risk-cell.medium .rpt-risk-cell-label { color: #c8902a; }
.rpt-risk-cell.low .rpt-risk-cell-label { color: #4fcb4f; }

/* ── Pull Quote ─────────────────────────────────────────── */
.rpt-pullquote {
  margin: var(--space-7) 0;
  padding: var(--space-6) var(--space-7);
  border-left: 3px solid var(--rpt-accent, var(--color-gold));
  background: var(--page-surface);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  font-family: 'Mfont-family: var(--font-body)1.1rem;
  font-style: italic;
  line-height: 1.65;
  color: var(--color-text-muted);
  position: relative;
}
.rpt-pullquote::before {
  content: '\201C';
  position: absolute;
  top: -10px;
  left: var(--space-5);
  font-size: 4rem;
  color: var(--rpt-accent, var(--color-gold));
  opacity: 0.25;
  font-style: normal;
  line-height: 1;
}

/* ── Pro Table ──────────────────────────────────────────── */
.rpt-table-wrap { overflow-x: auto; margin: var(--space-5) 0; }
.rpt-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.rpt-table thead tr {
  background: var(--rpt-accent-bg, rgba(184,134,11,0.1));
}
.rpt-table thead th {
  padding: 10px 14px;
  text-align: left;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--rpt-accent, var(--color-gold));
  border-bottom: 2px solid var(--rpt-accent, var(--color-gold));
  white-space: nowrap;
}
.rpt-table tbody tr:nth-child(even) {
  background: rgba(255,255,255,0.025);
}
.rpt-table tbody td {
  padding: 10px 14px;
  border-bottom: 1px solid rgba(26,58,92,0.12);
  color: var(--color-text-muted);
  vertical-align: top;
  line-height: 1.5;
}
.rpt-table tbody td:first-child { color: var(--color-text); font-weight: 500; }
.rpt-table tbody tr:last-child td { border-bottom: none; }

/* ── Thesis Box ─────────────────────────────────────────── */
.rpt-thesis-box {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin: var(--space-6) 0;
}
@media (max-width: 640px) { .rpt-thesis-box { grid-template-columns: 1fr; } }
.rpt-thesis-col {
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
}
.rpt-thesis-col.bull { border-top: 3px solid #4fcb4f; }
.rpt-thesis-col.bear { border-top: 3px solid #e05555; }
.rpt-thesis-col.neutral { border-top: 3px solid #c8902a; }
.rpt-thesis-col-label {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin-bottom: var(--space-3);
}
.rpt-thesis-col.bull .rpt-thesis-col-label { color: #4fcb4f; }
.rpt-thesis-col.bear .rpt-thesis-col-label { color: #e05555; }
.rpt-thesis-col.neutral .rpt-thesis-col-label { color: #c8902a; }
.rpt-thesis-col ul {
  list-style: none;
  padding: 0; margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.rpt-thesis-col ul li {
  font-size: 12px;
  color: var(--color-text-muted);
  line-height: 1.5;
  display: flex;
  gap: 6px;
}
.rpt-thesis-col ul li::before { content: '·'; opacity: 0.5; }

/* ── Disclaimer Footer ──────────────────────────────────── */
.rpt-disclaimer {
  margin-top: var(--space-10);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
  font-size: 11px;
  color: var(--color-text-faint);
  font-style: italic;
  line-height: 1.6;
}

/* ============================================================
   IU PDF.js Viewer
   ============================================================ */
.iu-pdf-viewer {
  min-height: 500px;
  width: 100%;
  background: #111;
  border-radius: 6px;
  overflow: hidden;
  position: relative;
}

.iu-pdf-loader {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: center;
  padding: 60px 24px;
  color: rgba(255,255,255,0.55);
  font-size: 14px;
  font-family: 'Manropfont-family: var(--font-body)0.03em;
}

.iu-pdf-spinner {
  width: 22px;
  height: 22px;
  border: 2px solid rgba(184,134,11,0.25);
  border-top-color: var(--color-gold);
  border-radius: 50%;
  animation: iu-spin 0.75s linear infinite;
  flex-shrink: 0;
}

@keyframes iu-spin {
  to { transform: rotate(360deg); }
}

.iu-pdf-pagebar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 6px 14px;
  background: #1a1a1a;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  font-size: 11px;
  font-family: var(--font-body);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.iu-pdf-pages {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.iu-pdf-page {
  width: 100%;
  display: block;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

.iu-pdf-page canvas {
  display: block;
  width: 100%;
  height: auto;
}


/* ── Coming Soon subscription badge ── */
.nav-coming-soon-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .07em;
  color: var(--color-gold);
  background: rgba(184,134,11,0.10);
  border: 1px solid rgba(184,134,11,0.28);
  padding: 4px 12px;
  border-radius: 4px;
  white-space: nowrap;
  cursor: default;
}
.iu-coming-soon-inline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--color-gold);
  background: rgba(184,134,11,0.10);
  border: 1px solid rgba(184,134,11,0.28);
  padding: 6px 16px;
  border-radius: var(--radius-sm);
  cursor: default;
}
.iu-coming-soon-block {
  background: linear-gradient(135deg, rgba(184,134,11,0.07) 0%, rgba(184,134,11,0.03) 100%);
  border: 1px solid rgba(184,134,11,0.22);
  border-radius: 10px;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.iu-coming-soon-block-text {
  flex: 1;
  font-size: 13px;
  color: var(--color-text-muted, #666);
  line-height: 1.5;
  min-width: 180px;
}
.iu-coming-soon-block-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: 3px;
}

/* ============================================================
   PROFESSIONAL POLISH — Bloomberg / FT / WSJ Editorial Tier
   Applied as additive overrides — preserves existing styles
   ============================================================ */

/* ── Section eyebrow labels: bolder, tighter caps ── */
.section-eyebrow,
.hero-eyebrow,
.cvh-eyebrow {
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.22em;
  color: var(--page-text-muted);
  text-transform: uppercase;
}

/* ── Article cards: crisper border, subtle hover lift ── */
.issue-card,
.article-card,
.cvh-card {
  border-left: 3px solid var(--color-divider);
  border-color: var(--color-divider);
  transition: box-shadow 0.2s cubic-bezier(0.16,1,0.3,1), transform 0.2s cubic-bezier(0.16,1,0.3,1), border-color 0.2s, border-left-color 0.2s;
}
.cvh-card:hover {
  border-left-color: var(--color-gold);
}
.issue-card:hover,
.article-card:hover,
.cvh-card:hover {
  box-shadow: 0 4px 20px rgba(18,36,58,0.10);
  transform: translateY(-2px);
  border-color: var(--color-gold-muted);
}
  box-shadow: 0 4px 20px rgba(0,0,0,0.35);
  border-color: var(--color-gold-muted);
}

/* ── Pill / tag badges: slightly smaller, higher contrast ── */
.cvh-pill,
.issue-tag {
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  font-weight: 800;
  padding: 3px 9px;
}

/* ── Ticker / KPI values: Bloomberg-weight mono feel ── */
.pdf-cover-band-ticker,
.cvh-card-tick {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* ── Section dividers: ruled line with diamond marker (FT-style) ── */
.section-head-rule {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 28px;
}
.section-head-rule::before,
.section-head-rule::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--color-divider);
}
.section-head-rule::before { max-width: 40px; background: var(--color-gold); }

/* ── Footer: editorial masthead footer style ── */
.site-footer {
  border-top: 3px double var(--color-divider);
}
.footer-bottom {
  border-top: 1px solid var(--color-divider);
}
.footer-bottom-text {
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  font-weight: 500;
}
.footer-disclaimer {
  font-size: 0.7rem;
  color: var(--color-text-faint);
  letter-spacing: 0.02em;
  font-style: italic;
}

/* ── Commodity Verse section header (pro spacing) ── */
.cvh-class-name {
  font-weight: 800;
  letter-spacing: 0.04em;
}
.cvh-class-tickers {
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  font-variant-numeric: tabular-nums;
}

/* ── Archive / issue table: Bloomberg terminal feel ── */
.archive-table th {
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  font-weight: 800;
  text-transform: uppercase;
  border-bottom: 2px solid var(--color-gold);
  padding-bottom: 10px;
}
.archive-table td {
  font-size: 0.87rem;
  border-bottom: 1px solid var(--color-divider);
}

/* ── Subscribe CTA badge: sharper ── */
.nav-coming-soon-badge {
  display: none !important;
}

/* ── Paywall gate: FT-style lock panel ── */
.sub-paywall-gate,
[style*="PAYWALL"] {
  border-top: 2px solid var(--color-gold-muted);
}

/* ── Scrollbar (WebKit): thin gold accent ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--color-gold-muted); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-gold); }

/* ── Text selection: gold brand highlight ── */
::selection { background: rgba(184,134,11,0.18); color: var(--color-text); }

/* ── Smooth focus ring (accessibility + pro look) ── */
:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 3px;
  border-radius: 3px;
}

/* ── Print: clean for institutional sharing ── */
@media print {
  .site-header, .site-footer, .iu-share-bar, .iu-subscribe-cta { display: none !important; }
  body { background: #fff; color: #000; }
  .pdf-gate-wrap { max-width: 100%; padding: 0; }
}

/* ── Footer social row ─────────────────────────────────────── */
.footer-social-row {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 14px;
  flex-wrap: wrap;
}
.footer-social-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: rgba(250,248,243,0.5);
  text-decoration: none;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .03em;
  transition: color .15s;
}
.footer-social-link:hover { color: var(--color-gold); }
.footer-social-link svg { flex-shrink: 0; opacity: .75; }
.footer-social-link:hover svg { opacity: 1; }

/* ── Footer social bar ─────────────────────────────────────────── */
.footer-social-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding: 4px 0;
}
.footer-social-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(250,248,243,0.38);
}
.footer-social-btns {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.footer-social-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px 7px 8px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(250,248,243,0.12);
  background: rgba(250,248,243,0.04);
  text-decoration: none;
  color: rgba(250,248,243,0.65);
  font-size: 12px;
  transition: border-color .18s, background .18s, color .18s;
}
.footer-social-btn:hover {
  border-color: rgba(184,134,11,0.5);
  background: rgba(184,134,11,0.08);
  color: var(--color-gold);
}
.footer-social-btn:hover .footer-social-btn-icon {
  background: rgba(184,134,11,0.18);
  border-color: rgba(184,134,11,0.4);
  color: var(--color-gold);
}
.footer-social-btn-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(250,248,243,0.08);
  border: 1px solid rgba(250,248,243,0.15);
  color: rgba(250,248,243,0.75);
  flex-shrink: 0;
  transition: background .18s, border-color .18s, color .18s;
}
.footer-social-btn-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  line-height: 1;
}
.footer-social-btn-platform {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  color: rgba(250,248,243,0.5);
}
.footer-social-btn-handle {
  font-size: 12px;
  font-weight: 500;
  color: inherit;
}
.footer-bottom-legal {
  display: flex;
  flex-direction: column;
  gap: 6px;
}


/* ============================================================
   INTERMARKET UNIVERSITY PAGE (education.html)
   Dark forest-green academic theme
   ============================================================ */
/* ─────────────────────────────────────────────────────────
       IMU PAGE VARIABLES
    ───────────────────────────────────────────────────────── */
    :root {
      --imu-green:     #1a6641;
      --imu-green-lt:  #22875a;
      --imu-gold:      #c9a227;
      --imu-gold-lt:   #e3bf5a;
      --imu-dark:      #12243a;
      --imu-card-bg:   var(--page-surface);
      --imu-border:    rgba(26,58,92,0.15);
    }

    /* ─────────────────────────────────────────────────────────
       HERO
    ───────────────────────────────────────────────────────── */
    .imu-hero {
      position: relative;
      overflow: hidden;
      background: linear-gradient(175deg, #f0ece0 0%, #f5f1e8 55%, #ede8db 100%);
      border-top: 3px solid #1a3a5c;
      border-bottom: 1px solid rgba(26,58,92,0.12);
      padding: clamp(56px, 9vw, 96px) 24px clamp(48px, 7vw, 80px);
      text-align: center;
    }
    .imu-hero::before {
      content: '';
      position: absolute;
      inset: 0;
      background:
        radial-gradient(ellipse 70% 55% at 50% 0%, rgba(184,134,11,0.05) 0%, transparent 65%);
      pointer-events: none;
    }
    .imu-hero-inner { position: relative; max-width: 1200px; margin: 0 auto; }

    /* University infographic — full width, edge-blended */
    .imu-emblem-wrap {
      width: min(820px, 94vw);
      margin: 0 auto 40px;
    }
    .imu-emblem-wrap img {
      width: 100%;
      height: auto;
      display: block;
      object-fit: contain;
    }

    .imu-hero-kicker {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .2em;
      text-transform: uppercase;
      color: var(--imu-gold);
      margin-bottom: 10px;
    }
    .imu-hero-title {
      font-family: var(--font-display);
      font-size: clamp(2rem, 5vw, 3.2rem);
      font-weight: 800;
      color: var(--page-text);
      letter-spacing: -0.02em;
      line-height: 1.1;
      margin-bottom: 8px;
    }
    .imu-hero-tagline {
      font-family: var(--font-body);
      font-size: 0.72rem;
      font-weight: 700;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--page-text-muted);
      margin-bottom: 20px;
    }
    .imu-hero-lede {
      font-family: var(--font-body);
      font-size: 1.0rem;
      line-height: 1.75;
      font-weight: 400;
      color: var(--page-text);
      max-width: 72ch;
      margin: 0 0 36px 0;
      padding-top: 20px;
      border-top: 2px solid var(--color-gold, #b8860b);
      text-align: left;
    }

    /* Process strip — institutional typography, no icons */
    .imu-hero-process-kicker {
      font-family: var(--font-body);
      font-size: 0.68rem;
      font-weight: 800;
      letter-spacing: .20em;
      text-transform: uppercase;
      color: var(--color-gold);
      margin-bottom: 36px;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 16px;
      text-align: left;
    }
    .imu-hero-process-kicker::before {
      display: none;
    }
    .imu-hero-process-kicker::after {
      content: '';
      flex: 1;
      max-width: 80px;
      height: 1px;
      background: rgba(26,58,92,0.20);
    }

    /* Institutional process rail */
    .imu-steps {
      display: flex;
      align-items: stretch;
      gap: 0;
      border-top: 2px solid var(--color-gold);
      padding-top: 32px;
    }
    .imu-step {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      text-align: left;
      position: relative;
      padding: 0 20px 0 0;
    }
    .imu-step:not(:last-child) {
      border-right: 1px solid rgba(26,58,92,0.14);
      margin-right: 20px;
    }
    .imu-step-ordinal {
      font-family: var(--font-mono);
      font-size: 0.7rem;
      font-weight: 700;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: var(--color-gold);
      margin-bottom: 10px;
      display: block;
    }
    .imu-step-title {
      font-family: var(--font-display);
      font-size: 1.05rem;
      font-weight: 800;
      letter-spacing: -0.01em;
      text-transform: none;
      color: var(--page-text);
      margin-bottom: 8px;
      line-height: 1.2;
    }
    .imu-step-sub {
      font-family: var(--font-body);
      font-size: 0.88rem;
      color: var(--page-text-muted);
      line-height: 1.6;
      font-weight: 500;
      letter-spacing: .01em;
    }
    @media (max-width: 700px) {
      .imu-steps {
        flex-direction: column;
        gap: 24px;
        border-top: 2px solid var(--color-gold);
        padding-top: 24px;
      }
      .imu-step:not(:last-child) {
        border-right: none;
        border-bottom: 1px solid rgba(26,58,92,0.12);
        padding-bottom: 24px;
        margin-right: 0;
      }
      .imu-emblem-wrap { width: min(480px, 94vw); }
    }

    /* ─────────────────────────────────────────────────────────
       BRIDGE CARD — TRANSLATION LAYER
    ───────────────────────────────────────────────────────── */
    .imu-section {
      max-width: 1000px;
      margin: 0 auto;
      padding: 64px 24px;
    }
    .imu-section-head {
      text-align: center;
      margin-bottom: 40px;
    }
    .imu-section-kicker {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .18em;
      text-transform: uppercase;
      color: var(--imu-gold);
      margin-bottom: 10px;
    }
    .imu-section-title {
      font-family: var(--font-display);
      font-size: clamp(1.5rem, 3.2vw, 2.1rem);
      font-weight: 700;
      color: var(--color-text);
      letter-spacing: -0.02em;
      margin-bottom: 10px;
    }
    .imu-section-sub {
      font-size: 15px;
      color: var(--color-text-muted);
      max-width: 58ch;
      margin: 0 auto;
      line-height: 1.65;
    }

    /* Bridge Card container */
    .bridge-card {
      background: #ffffff;
      border-radius: 16px;
      overflow: hidden;
      box-shadow: 0 24px 64px rgba(0,0,0,0.28), 0 4px 16px rgba(0,0,0,0.16);
      border: 1px solid rgba(0,0,0,0.08);
      max-width: 820px;
      margin: 0 auto;
    }

    /* Card header */
    .bridge-card-header {
      background: #0d1b2a;
      padding: 28px 32px 24px;
    }
    .bridge-card-header-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 16px;
    }
    .bridge-badge {
      font-size: 10px;
      font-weight: 800;
      letter-spacing: .16em;
      text-transform: uppercase;
    }
    .bridge-badge--gold { color: #c9a227; }
    .bridge-badge--white { color: rgba(255,255,255,0.7); }
    .bridge-card-title {
      font-family: var(--font-display);
      font-size: clamp(1.4rem, 3vw, 2rem);
      font-weight: 700;
      color: #ffffff;
      letter-spacing: -0.02em;
      line-height: 1.2;
      margin-bottom: 10px;
    }
    .bridge-card-subtitle {
      font-size: 14px;
      font-weight: 600;
      color: #2a9d8f;
      margin-bottom: 14px;
    }
    .bridge-card-intro {
      font-size: 13px;
      color: rgba(255,255,255,0.72);
      line-height: 1.65;
      max-width: 62ch;
      margin-bottom: 4px;
    }
    .bridge-card-tap {
      font-size: 12px;
      color: #c9a227;
      font-style: italic;
    }

    /* Tabs */
    .bridge-tabs {
      display: flex;
      background: #0a1520;
      border-bottom: 1px solid rgba(255,255,255,0.07);
      overflow-x: auto;
    }
    /* Below ~600px the 4 tabs (120px min-width each) always exceed the
       viewport, so the strip scrolls with no visual hint that "Concept 03"
       and "Concept 04" exist off-screen. Fade the right edge so it reads
       as scrollable — the mask sits on the scroll container itself, so it
       stays put at the edge rather than scrolling away with the content. */
    @media (max-width: 600px) {
      .bridge-tabs {
        -webkit-mask-image: linear-gradient(to right, black calc(100% - 28px), transparent 100%);
        mask-image: linear-gradient(to right, black calc(100% - 28px), transparent 100%);
      }
    }
    .bridge-tab {
      flex: 1;
      min-width: 120px;
      padding: 14px 16px;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: .04em;
      text-align: center;
      color: rgba(255,255,255,0.45);
      cursor: pointer;
      border: none;
      background: none;
      border-bottom: 2.5px solid transparent;
      transition: color .18s, border-color .18s;
      white-space: nowrap;
    }
    .bridge-tab.active {
      color: #c9a227;
      border-bottom-color: #c9a227;
    }
    .bridge-tab:not(.active) {
      opacity: 0.6;
      cursor: pointer;
    }
    .bridge-tab:not(.active):hover {
      color: rgba(255,255,255,0.75);
      opacity: 0.85;
    }
    .bridge-tab-label { font-size: 9px; display: block; letter-spacing: .06em; opacity: .6; margin-bottom: 2px; }

    /* Card body */
    .bridge-card-body { padding: 32px; background: #ffffff; }

    /* Concept label */
    .bridge-concept-label {
      font-size: 10px;
      font-weight: 800;
      letter-spacing: .18em;
      text-transform: uppercase;
      color: #2a9d8f;
      margin-bottom: 6px;
    }
    .bridge-concept-title {
      font-family: var(--font-display);
      font-size: clamp(1.1rem, 2.4vw, 1.5rem);
      font-weight: 700;
      color: #0d1b2a;
      letter-spacing: -0.02em;
      margin-bottom: 24px;
    }

    /* Pull quote */
    .bridge-pullquote {
      background: #0d1b2a;
      border-left: 3px solid #c9a227;
      border-radius: 0 8px 8px 0;
      padding: 18px 22px;
      margin-bottom: 28px;
    }
    .bridge-pullquote p {
      font-size: 15px;
      font-style: italic;
      color: #ffffff;
      line-height: 1.6;
      margin: 0;
    }

    /* Section labels in body */
    .bridge-body-kicker {
      font-size: 10px;
      font-weight: 800;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: #2a9d8f;
      margin: 28px 0 10px;
    }
    .bridge-body-text {
      font-size: 14px;
      color: #2a2f35;
      line-height: 1.75;
      margin-bottom: 0;
    }
    .bridge-body-text strong {
      color: #0d1b2a;
    }

    /* Dual chart row */
    .bridge-charts {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
      margin: 28px 0;
    }
    .bridge-chart-box {
      background: #f4f6f8;
      border: 1px solid #e0e5ea;
      border-radius: 10px;
      overflow: hidden;
    }
    .bridge-chart-label {
      font-size: 10px;
      font-weight: 800;
      letter-spacing: .12em;
      text-transform: uppercase;
      padding: 10px 14px 8px;
      border-bottom: 1px solid #e0e5ea;
    }
    .bridge-chart-label--ta { color: #2a9d8f; background: rgba(42,157,143,0.06); }
    .bridge-chart-label--fa { color: #c9a227; background: rgba(201,162,39,0.06); }
    .bridge-chart-svg-wrap { padding: 14px; }
    .bridge-chart-img { width: 100%; height: auto; display: block; border-radius: 10px; }

    /* IU Research callout */
    .bridge-research-box {
      background: linear-gradient(135deg, #f0f7f2 0%, #e8f4ec 100%);
      border: 1px solid rgba(26,102,65,0.2);
      border-left: 3px solid #1a6641;
      border-radius: 0 10px 10px 0;
      padding: 18px 22px;
      margin: 28px 0 24px;
    }
    .bridge-research-label {
      font-size: 10px;
      font-weight: 800;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: #1a6641;
      margin-bottom: 8px;
    }
    .bridge-research-text {
      font-size: 13px;
      color: #2a3a2f;
      line-height: 1.65;
      margin: 0;
    }

    /* CTA row */
    .bridge-cta-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      flex-wrap: wrap;
      padding-top: 24px;
      border-top: 1px solid #e8ecf0;
      margin-top: 28px;
    }
    .bridge-cta-text {
      font-size: 13px;
      color: #5a6470;
      line-height: 1.5;
      flex: 1;
      min-width: 180px;
    }
    .bridge-cta-btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: #0d1b2a;
      color: #c9a227;
      font-size: 12px;
      font-weight: 800;
      letter-spacing: .08em;
      text-transform: uppercase;
      padding: 12px 22px;
      border-radius: var(--radius-sm);
      text-decoration: none;
      border: 1.5px solid rgba(201,162,39,0.4);
      transition: background .18s, transform .14s;
      white-space: nowrap;
      cursor: pointer;
    }
    .bridge-cta-btn:hover { background: #16293d; }

    /* Card footer */
    .bridge-card-footer {
      background: #f0f3f6;
      border-top: 1px solid #e2e7ec;
      padding: 14px 32px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 8px;
    }
    .bridge-footer-brand {
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: #8a97a5;
    }
    .bridge-footer-disclaimer {
      font-size: 10px;
      color: #a0abb5;
      letter-spacing: .04em;
    }

    /* ─────────────────────────────────────────────────────────
       TOPIC TILES (Coming Soon)
    ───────────────────────────────────────────────────────── */
    .imu-tiles-section {
      background: var(--page-bg);
      border-top: 1px solid rgba(26,58,92,0.10);
      padding: 64px 24px;
    }
    .imu-tiles-inner { max-width: 1000px; margin: 0 auto; }
    .imu-tiles-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 18px;
      margin-top: 36px;
    }
    .imu-tile {
      background: #0d1b2a;
      border: 1px solid rgba(201,162,39,0.2);
      border-radius: 14px;
      padding: 26px 22px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      position: relative;
      overflow: hidden;
      transition: border-color .18s;
      text-decoration: none;
    }
    .imu-tile:hover { border-color: rgba(201,162,39,0.4); }
    .imu-tile--photo { padding: 0; background: none; border: 1.5px solid #c9a227; align-self: start; }
    .imu-tile-photo { display: block; width: 100%; height: auto; border-radius: 13px; }
    .imu-tile-badge {
      position: absolute;
      top: 14px;
      right: 14px;
      font-size: 9px;
      font-weight: 800;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--imu-gold);
      background: rgba(201,162,39,0.1);
      border: 1px solid rgba(201,162,39,0.25);
      border-radius: var(--radius-sm);
      padding: 3px 10px;
    }
    .imu-tile-icon { width: 52px; height: 52px; display: block; margin-bottom: 2px; object-fit: contain; border-radius: 50%; background: transparent; }
    .imu-tile-title {
      font-size: 14px;
      font-weight: 700;
      color: #d4e8d8;
      line-height: 1.3;
    }
    .imu-tile-desc {
      font-size: 12px;
      color: #d4e8d8;
      line-height: 1.6;
      flex: 1;
    }
    .imu-tile-divider {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-top: auto;
      padding-top: 4px;
    }
    .imu-tile-divider::before,
    .imu-tile-divider::after {
      content: '';
      flex: 1;
      max-width: 36px;
      height: 1px;
      background: rgba(201,162,39,0.5);
    }
    .imu-tile-divider-diamond {
      width: 5px;
      height: 5px;
      background: var(--imu-gold);
      transform: rotate(45deg);
      flex-shrink: 0;
    }
    .imu-tile-tag {
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: var(--imu-gold);
      margin-top: 6px;
    }
    @media (max-width: 700px) {
      .imu-tiles-grid { grid-template-columns: 1fr 1fr; }
      .bridge-charts { grid-template-columns: 1fr; }
      .bridge-cta-row { flex-direction: column; align-items: flex-start; }
      .imu-emblem-wrap { width: 180px; height: 180px; }
      .imu-emblem-wrap img { width: 180px; height: 180px; }
    }
    @media (max-width: 480px) {
      .imu-tiles-grid { grid-template-columns: 1fr; }
      .bridge-card-body { padding: 24px 20px; }
      .bridge-card-header { padding: 22px 20px 18px; }
    }

    /* Dark mode overrides for bridge card */
    /* Tab panels */
    .bridge-panel { display: none; }
    .bridge-panel.active { display: block; }

    /* WACC definition box */
    .bridge-wacc-box {
      background: linear-gradient(135deg, #0d1b2a 0%, #12283e 100%);
      border-radius: 8px;
      padding: 18px 20px;
      margin: 20px 0;
      border: 1px solid rgba(201,162,39,0.3);
    }
    .bridge-wacc-kicker {
      font-size: 10px;
      font-weight: 800;
      letter-spacing: .2em;
      text-transform: uppercase;
      color: #c9a227;
      margin-bottom: 10px;
    }
    .bridge-wacc-title {
      font-family: var(--font-body);
      font-size: 16px;
      font-weight: 700;
      color: #ffffff;
      margin-bottom: 10px;
    }
    .bridge-wacc-title span { color: #c9a227; }
    .bridge-wacc-body {
      font-size: 13px;
      line-height: 1.75;
      color: rgba(255,255,255,0.93);
      margin: 0 0 12px;
    }
    .bridge-wacc-body strong.teal { color: #2a9d8f; }
    .bridge-wacc-body strong.gold { color: #c9a227; }
    .bridge-wacc-inner-box {
      background: rgba(255,255,255,0.06);
      border-radius: 6px;
      padding: 12px 16px;
      border: 1px solid rgba(255,255,255,0.1);
    }
    .bridge-wacc-inner-kicker {
      font-size: 10px;
      color: rgba(255,255,255,0.6);
      letter-spacing: 1px;
      margin-bottom: 8px;
      font-weight: 700;
      text-transform: uppercase;
    }
    .bridge-wacc-inner-body {
      font-size: 12px;
      line-height: 1.7;
      color: rgba(255,255,255,0.93);
      margin: 0;
    }
    .bridge-wacc-inner-body .green { color: #27ae60; font-weight: 700; }
    .bridge-wacc-inner-body .red { color: #e74c3c; font-weight: 700; }

    /* Bridge insight box */
    .bridge-insight {
      background: linear-gradient(135deg, #162232 0%, #0d1b2a 100%);
      border-radius: 8px;
      padding: 22px 22px 18px;
      margin: 20px 0;
      position: relative;
    }
    .bridge-insight-tag {
      position: absolute;
      top: -10px;
      left: 18px;
      background: #c9a227;
      color: #0d1b2a;
      font-size: 9px;
      font-weight: 800;
      letter-spacing: 1.5px;
      padding: 4px 14px;
      border-radius: 3px;
      text-transform: uppercase;
    }
    .bridge-insight p {
      font-size: 13px;
      line-height: 1.75;
      color: #ffffff;
      margin: 6px 0 0;
    }

    /* Reverse DCF visual */
    .rdcf-visual {
      background: #0d1b2a;
      border-radius: 12px;
      overflow: hidden;
      border: 1px solid rgba(201,162,39,0.25);
      margin: 24px 0;
    }
    .rdcf-header {
      background: linear-gradient(90deg, #0d1b2a, #162232);
      padding: 14px 20px;
      border-bottom: 1px solid rgba(201,162,39,0.2);
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .rdcf-header-left { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: rgba(201,162,39,0.8); }
    .rdcf-header-right { font-size: 10px; color: rgba(255,255,255,0.45); }
    .rdcf-body {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0;
    }
    .rdcf-chart-col {
      padding: 16px;
      border-right: 1px solid rgba(255,255,255,0.06);
    }
    .rdcf-metrics-col {
      padding: 16px;
    }
    .rdcf-chart-label { font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,0.45); margin-bottom: 10px; }
    .rdcf-metrics-label { font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #c9a227; margin-bottom: 12px; }
    .rdcf-metric-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 8px 0;
      border-bottom: 1px solid rgba(255,255,255,0.06);
    }
    .rdcf-metric-row:last-of-type { border-bottom: none; }
    .rdcf-metric-name { font-size: 11px; color: rgba(255,255,255,0.6); }
    .rdcf-metric-val { font-size: 13px; font-weight: 700; color: #c9a227; }
    .rdcf-verdict-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      margin-top: 14px;
    }
    .rdcf-verdict {
      border-radius: 6px;
      padding: 8px 10px;
      text-align: center;
    }
    .rdcf-verdict.achievable { background: rgba(39,174,96,0.15); border: 1px solid rgba(39,174,96,0.3); }
    .rdcf-verdict.unrealistic { background: rgba(231,76,60,0.15); border: 1px solid rgba(231,76,60,0.3); }
    .rdcf-verdict-label { font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
    .rdcf-verdict.achievable .rdcf-verdict-label { color: #27ae60; }
    .rdcf-verdict.unrealistic .rdcf-verdict-label { color: #e74c3c; }
    .rdcf-verdict-text { font-size: 10px; color: rgba(255,255,255,0.6); margin-top: 3px; }
    @media (max-width: 600px) {
      .rdcf-body { grid-template-columns: 1fr; }
      .rdcf-chart-col { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.06); }
    }
                

/* ============================================================
   COMMODITY VERSE PAGE (commodity-verse.html)
   ============================================================ */
/* ── Commodity Verse hub ── */
    .cvh-hero { position: relative; overflow: hidden; background: linear-gradient(175deg, #f5f1e8 0%, #f5f1e8 100%); border-top: 3px solid #1a3a5c; border-bottom: 1px solid rgba(26,58,92,0.12); color: var(--page-text); }
    .cvh-hero-inner { max-width: 1100px; margin: 0 auto; padding: 28px 24px 40px; display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr); gap: 44px; align-items: start; }
    .cvh-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--color-gold-light); margin-bottom: 14px; }
    .cvh-flash { display:inline-flex; align-items:center; gap:7px; }
    .cvh-title { font-family: var(--font-display); font-size: clamp(2rem, 3.5vw, 2.85rem); font-weight: 800; color: var(--page-text); letter-spacing: -0.025em; line-height: 1.1; margin-bottom: 14px; white-space: nowrap; font-style: normal; }
    .cvh-tagline { font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--page-text-muted); margin-bottom: 20px; }
    .cvh-lede { font-size: 17px; line-height: 1.7; color: var(--page-text); font-weight: 500; max-width: 56ch; margin-bottom: 28px; }
    .cvh-cta-row { display: flex; gap: 14px; flex-wrap: wrap; }
    .cvh-btn { display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:700; letter-spacing:.02em; text-decoration:none; padding:13px 26px; border-radius: var(--radius-sm); transition:transform .15s, opacity .18s, background .18s; }
    .cvh-btn--gold { background: var(--color-gold); color:#fff; }
    .cvh-btn--gold:hover { transform: translateY(-1px); opacity:.92; }
    .cvh-btn--ghost { color: var(--page-text); border:1px solid rgba(26,58,92,0.30); }
    .cvh-btn--ghost:hover { background: rgba(26,58,92,0.06); }
    .cvh-cover { display:flex; justify-content:center; }
    .cvh-cover img { width: 100%; max-width: 520px; border-radius: 14px; box-shadow: 0 20px 60px rgba(0,0,0,0.45); border: 1px solid rgba(184,134,11,0.35); }
    @media (max-width: 860px){ .cvh-hero-inner{ grid-template-columns: 1fr; gap: 32px; } .cvh-cover{ order:-1; } .cvh-cover img{ max-width: 460px; } }

    /* class strip */
    .cvh-section { max-width: 1100px; margin: 0 auto; padding: 56px 24px; }
    .cvh-section-head { text-align:center; margin-bottom: 36px; }
    .cvh-kicker { font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--color-gold); margin-bottom: 10px; }
    .cvh-h2 { font-family: var(--font-display); font-size: clamp(1.6rem, 3.4vw, 2.3rem); font-weight: 700; color: var(--color-text); letter-spacing: -0.02em; }
    .cvh-sub { font-size: 15px; color: var(--color-text-muted); margin-top: 10px; max-width: 60ch; margin-left:auto; margin-right:auto; line-height:1.6; }
    .cvh-classes { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; }
    .cvh-class { background: var(--page-surface); border: 1px solid var(--color-border); border-radius: 14px; padding: 22px 20px; transition: border-color .18s, transform .15s; }
    .cvh-class:hover { border-color: var(--color-gold); transform: translateY(-2px); } a.cvh-class { cursor: pointer; color: inherit; }
    .cvh-class-ico { width:44px; height:44px; border-radius:11px; display:flex; align-items:center; justify-content:center; font-size:22px; margin-bottom:14px; }
    .cvh-class-name { font-size: 1.05rem; font-weight: 700; color: var(--color-text); margin-bottom: 4px; }
    .cvh-class-tickers { font-size: 12px; font-weight: 600; letter-spacing: .04em; color: var(--color-gold); margin-bottom: 8px; }
    .cvh-class-desc { font-size: 13px; line-height: 1.55; color: var(--color-text-muted); }

    /* article cards */
    .cvh-articles-wrap { background: var(--color-surface-2); border-top: 1px solid var(--color-border); border-bottom: 1px solid rgba(26,58,92,0.12); }
    .cvh-articles { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
    @media (max-width: 760px){ .cvh-articles{ grid-template-columns: 1fr; } }
    .cvh-card { display:flex; flex-direction:column; background: var(--page-bg); border:1px solid var(--color-border); border-radius:16px; overflow:hidden; transition: border-color .18s, transform .15s, box-shadow .2s; }
    .cvh-card:hover { border-color: var(--color-gold); transform: translateY(-3px); box-shadow: 0 14px 40px rgba(0,0,0,0.14); }
    .cvh-card-band { padding: 24px 26px; display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
    .cvh-card-band--free { background: linear-gradient(135deg,#241408 0%,#3d2a10 55%,#1c2a0e 100%); }
    .cvh-card-band--sub { background: linear-gradient(135deg,#2a1408 0%,#3d1f10 55%,#1c1208 100%); }
    .cvh-card-tick { font-family: var(--font-display); font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; line-height:1; }
    .cvh-card-band--free .cvh-card-tick { color:#e8c060; }
    .cvh-card-band--sub .cvh-card-tick { color:#d8954a; }
    .cvh-card-cls { font-size:.62rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; margin-top:7px; }
    .cvh-card-band--free .cvh-card-cls { color:#d4a060; }
    .cvh-card-band--sub .cvh-card-cls { color:#c08048; }
    .cvh-pill { font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; padding:5px 11px; border-radius: var(--radius-sm); white-space:nowrap; }
    .cvh-pill--free { color:#1a7a3a; background: none; }
    .cvh-pill--sub { color:#b8860b; border: none; background: none; padding: 0; border-radius: 0; }
    .cvh-card-body { padding: 22px 26px 26px; display:flex; flex-direction:column; flex:1; }
    .cvh-card-kicker { font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--color-text-faint); margin-bottom:10px; }
    .cvh-card-title { font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; color: var(--color-text); line-height: 1.25; letter-spacing:-0.01em; margin-bottom: 10px; }
    .cvh-card-title a { color: inherit; text-decoration: none; }
    .cvh-card-title a:hover { color: var(--color-gold); }
    .cvh-card-excerpt { font-size: 14px; line-height: 1.65; color: var(--color-text-muted); margin-bottom: 18px; flex:1; }
    .cvh-card-foot { display:flex; align-items:center; justify-content:space-between; gap:12px; }
    .cvh-read { display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:700; color: var(--color-gold); text-decoration:none; }
    .cvh-read:hover { gap:10px; }
    .cvh-read-meta { font-size:12px; color:var(--color-text-faint); }

    /* Coming-soon pill badge — dark icon roundel + gold outline, used on placeholder cards */
    .cvh-coming-soon-badge { display:inline-flex; align-items:center; gap:8px; padding:4px 14px 4px 4px; border:1px solid rgba(191,145,63,0.5); border-radius:999px; color:#bf8c3a; font-family:var(--font-mono,'IBM Plex Mono',monospace); font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; }
    .cvh-coming-soon-icon { display:flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:50%; background:#0d1b2e; flex-shrink:0; }
    .cvh-coming-soon-icon svg { width:14px; height:14px; stroke:#d8a34a; }

    /* Photo banner variant — icon, ticker, and category are baked into the image itself */
    .cvh-card-band--photo { padding:0; min-height:150px; background-size:cover; background-repeat:no-repeat; background-position:left center; }

    /* On narrow mobile cards, cover's height-matched scaling zooms in far enough that the
       baked-in ticker/label text (e.g. "KC · Coffee Arabica") runs past the right edge and
       gets cropped. A shorter banner box needs less vertical scale-up, which pulls more of
       the image's horizontal width into view at the same card width — text-only fix, no
       markup change, and cover still fills the box edge-to-edge with no letterboxing. */
    @media (max-width: 640px) {
      .cvh-card-band--photo { min-height: 82px; }
    }
    /* Narrowest phones (e.g. 320px) still crop longer baked-in titles like
       "ZS - Posture Upgrade" at 82px -- needs a shorter box to pull enough
       width into view at these card widths specifically. */
    @media (max-width: 360px) {
      .cvh-card-band--photo { min-height: 72px; }
    }

    /* Filled CTA button with leading icon, used on the photo-banner cards */
    .cvh-card-cta { display:inline-flex; align-items:center; gap:9px; font-size:13px; font-weight:700; letter-spacing:.02em; text-transform:uppercase; text-decoration:none; color:#fff; padding:11px 18px; border-radius:8px; transition:transform .15s ease, opacity .18s ease; }
    .cvh-card-cta:hover { transform: translateY(-1px); opacity:.92; }
    .cvh-card-cta svg { flex-shrink:0; }

    /* tier strip */
    .cvh-tiers { max-width: 1000px; margin: 0 auto; padding: 56px 24px; display:grid; grid-template-columns:1fr auto 1fr; gap:36px; align-items:start; }
    @media (max-width:760px){ .cvh-tiers{ grid-template-columns:1fr; } .cvh-tier-divider{ display:none; } }
    .cvh-tier-label { font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; margin-bottom:8px; }
    .cvh-tier-label--free { color:#3aaf6a; }
    .cvh-tier-label--prem { color: var(--color-gold); }
    .cvh-tier-name { font-family:var(--font-display); font-size:1.5rem; font-weight:700; color:var(--color-text); margin-bottom:4px; }
    .cvh-tier-price { font-size:13px; color:var(--color-text-muted); margin-bottom:16px; }
    .cvh-tier-feats { list-style:none; padding:0; margin:0; display:grid; gap:11px; }
    .cvh-tier-feats li { display:flex; gap:10px; font-size:14px; line-height:1.5; color:var(--color-text-muted); }
    .cvh-tier-feats .ck { flex-shrink:0; font-weight:800; }
    .ck--free { color:#3aaf6a; }
    .ck--gold { color: var(--color-gold); }
    .cvh-tier-divider { width:1px; background:var(--color-border); align-self:stretch; }
    .cvh-disclaimer { max-width: 1100px; margin:0 auto; padding: 0 24px 56px; font-size:12px; color:var(--color-text-faint); line-height:1.65; }
  
    /* ── COMMODITY VERSE MEDALLION ICONS ── */
    .cvh-medallion-ico {
      background: none !important;
      border: none !important;
      box-shadow: none !important;
      padding: 0 !important;
      width: 110px !important;
      height: 110px !important;
      border-radius: 50% !important;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 16px;
      flex-shrink: 0;
      /* Subtle drop shadow that works in both modes */
      filter: drop-shadow(0 4px 16px rgba(0,0,0,0.35)) drop-shadow(0 1px 4px rgba(184,134,11,0.18));
      transition: filter 0.22s ease, transform 0.22s ease;
    }
    .cvh-class:hover .cvh-medallion-ico {
      filter: drop-shadow(0 6px 22px rgba(0,0,0,0.45)) drop-shadow(0 2px 8px rgba(184,134,11,0.28));
      transform: translateY(-3px) scale(1.04);
    }
    .cvh-medallion-img {
      width: 110px;
      height: 110px;
      object-fit: cover;
      border-radius: 50%;
      display: block;
    }
    /* Dark mode: slightly brighter shadow accent */
          filter: drop-shadow(0 4px 20px rgba(0,0,0,0.55)) drop-shadow(0 1px 6px rgba(184,134,11,0.22));
    }
          filter: drop-shadow(0 6px 28px rgba(0,0,0,0.65)) drop-shadow(0 2px 10px rgba(184,134,11,0.32));
      transform: translateY(-3px) scale(1.04);
    }
    /* Ensure the cvh-class card itself accommodates the larger icon */
    .cvh-class {
      align-items: center;
    }

    /* Sector cards: soft rounded cards with a faint navy border, warm gradient,
       layered shadow, and a gold accent along the top edge (matches the
       homepage icon-strip tiles). */
    .cvh-classes { gap: 20px; }
    .cvh-class {
      position: relative;
      overflow: hidden;
      border: 1px solid rgba(184,134,11,0.38);
      border-radius: 16px;
      padding: 14px 18px 18px;
      background: linear-gradient(180deg, #ffffff 0%, #fbf6ec 100%);
      box-shadow: 0 1px 2px rgba(26,58,92,0.06), 0 8px 22px -12px rgba(26,58,92,0.22), inset 0 0 0 1px rgba(184,134,11,0.08);
      transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
    }
    .cvh-class .cvh-medallion-ico { margin-bottom: 8px; }
    .cvh-class .cvh-class-name { margin-bottom: 2px; }
    .cvh-class .cvh-class-tickers { margin-bottom: 6px; }
    .cvh-class .cvh-class-desc { font-size: 13.5px; font-weight: 500; color: var(--color-text); line-height: 1.55; }
    .cvh-class::before {
      content: '';
      position: absolute;
      top: 0; left: 18%; right: 18%;
      height: 3px;
      border-radius: 0 0 3px 3px;
      background: linear-gradient(90deg, transparent, var(--color-gold), transparent);
      opacity: 0.55;
      transition: opacity 0.22s ease, left 0.22s ease, right 0.22s ease;
    }
    .cvh-class:hover {
      transform: translateY(-4px);
      border-color: rgba(184,134,11,0.75);
      box-shadow: 0 2px 4px rgba(26,58,92,0.08), 0 16px 30px -14px rgba(26,58,92,0.32), inset 0 0 0 1px rgba(184,134,11,0.14);
    }
    .cvh-class:hover::before { opacity: 1; left: 8%; right: 8%; }


/* ============================================================
   ARCHIVE PAGE — Migrated inline styles
   ============================================================ */
/* ── IU Subscribe CTA ── */
  .iu-subscribe-cta {
    max-width: 780px;
    margin: 48px auto 0;
    padding: 0 24px;
  }
  .iu-subscribe-cta-inner {
    display: flex;
    align-items: center;
    gap: 18px;
    background: var(--page-surface);
    border: 1px solid rgba(26,58,92,0.14);
    border-left: 3px solid var(--color-gold);
    border-radius: 12px;
    padding: 22px 28px;
    flex-wrap: wrap;
  }
  .iu-subscribe-cta-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--color-gold);
    margin-bottom: 4px;
  }
  .iu-subscribe-cta-text {
    font-size: 13px;
    color: var(--page-text-muted);
    line-height: 1.55;
    max-width: 46ch;
  }
  .iu-subscribe-cta-body { flex: 1; min-width: 200px; }
  .iu-subscribe-cta-btn {
    display: inline-block;
    background: var(--color-gold);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
    text-decoration: none;
    padding: 11px 24px;
    border-radius: var(--radius-sm);
    white-space: nowrap;
    transition: opacity .18s, transform .15s;
    flex-shrink: 0;
  }
  .iu-subscribe-cta-btn:hover { opacity: .88; transform: translateY(-1px); }

  /* ── IU Share Bar ── */
  .iu-share-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    max-width: 780px;
    margin: 24px auto 0;
    padding: 0 24px;
  }
  .iu-share-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--page-text-muted);
    margin-right: 4px;
  }
  .iu-share-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-muted, #555);
    background: var(--page-surface);
    border: 1px solid rgba(26,58,92,0.14);
    border-radius: 6px;
    padding: 7px 13px;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s, border-color .15s;
    font-family: inherit;
  }
  .iu-share-btn:hover {
    background: var(--page-bg);
    border-color: var(--color-gold);
    color: var(--color-gold);
  }

  /* ── IU Article Summary (SEO HTML block) ── */
  .iu-article-summary {
    max-width: 780px;
    margin: 0 auto;
    padding: 40px 24px 0;
  }
  .iu-article-summary h2 {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--page-text);
    margin: 28px 0 10px;
    letter-spacing: -.01em;
  }
  .iu-article-summary h3 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--page-text);
    margin: 20px 0 8px;
  }
  .iu-article-summary p {
    font-size: 15px;
    line-height: 1.75;
    color: var(--page-text-muted);
    margin-bottom: 14px;
  }
  .iu-article-summary ul {
    margin: 0 0 16px 20px;
    padding: 0;
  }
  .iu-article-summary ul li {
    font-size: 14px;
    line-height: 1.65;
    color: var(--page-text-muted);
    margin-bottom: 6px;
  }
  .iu-summary-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    margin: 20px 0 28px;
  }
  .iu-summary-kpi {
    background: var(--page-surface);
    border: 1px solid var(--color-border, #e8e4dc);
    border-radius: 8px;
    padding: 13px 16px;
  }
  .iu-summary-kpi-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--color-gold);
    margin-bottom: 4px;
  }
  .iu-summary-kpi-value {
    font-size: 15px;
    font-weight: 800;
    color: var(--page-text);
    line-height: 1.2;
  }
  .iu-summary-divider {
    border: none;
    border-top: 1px solid var(--color-border, #e8e4dc);
    margin: 32px 0 0;
  }

/* ============================================================
   SUBSCRIBERS PAGE — Unified light palette
   ============================================================ */

/* ============================================================
   SUBSCRIBERS PAGE — Unified light palette
   ============================================================ */

/* ── Hero: matches site hero pattern ── */
.cs-hero {
  background: linear-gradient(175deg, #f0ece0 0%, #f5f1e8 55%, #ede8db 100%);
  border-top: 3px solid #1a3a5c;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  text-align: center;
  padding: clamp(32px, 5vw, 56px) var(--space-6) clamp(40px, 6vw, 72px);
  position: relative;
  overflow: hidden;
  color: var(--page-text);
}

.cs-inner {
  position: relative;
  z-index: 1;
  max-width: 680px;
  margin: 0 auto;
}

/* ── Emblem ── */
.cs-emblem {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: var(--space-8);
}
.cs-emblem img {
  width: 44px;
  height: 44px;
  border-radius: 6px;
  object-fit: cover;
}
.cs-emblem-text {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--page-text);
  letter-spacing: -.01em;
}

/* ── Status badge ── */
.cs-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  color: var(--page-text-muted);
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 0;
  border-radius: 0;
  margin-bottom: var(--space-7);
}
.cs-title + .cs-badge { margin-top: 2px; margin-bottom: var(--space-5); }
.cs-badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #2a7a4e;
  box-shadow: 0 0 6px rgba(42,122,78,0.4);
  animation: pulse-dot 1.8s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.7); }
}

/* ── Hero title ── */
.cs-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3.2rem);
  color: var(--page-text);
  font-weight: 800;
  line-height: 1.08;
  margin-bottom: var(--space-5);
  letter-spacing: -.035em;
}
.cs-title em {
  font-style: normal;
  color: #8a6608;
}

/* ── Hero subtitle ── */
.cs-subtitle {
  font-family: var(--font-body);
  font-size: 1.05rem;
  color: var(--page-text);
  line-height: 1.68;
  margin-bottom: var(--space-10);
  max-width: 52ch;
  margin-left: auto;
  margin-right: auto;
  font-weight: 600;
}

/* ── Tier cards grid ── */
.cs-tiers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: var(--space-10);
  text-align: left;
  /* break out of the narrow text column so all three tiers sit in one row */
  width: min(960px, calc(100vw - 48px));
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}
@media (max-width: 760px) {
  .cs-tiers { grid-template-columns: 1fr; width: 100%; left: 0; transform: none; }
}

/* Tier card — matches shared .card system */
.cs-tier-card {
  background: var(--page-surface);
  border: 1px solid rgba(184,134,11,0.45);
  border-left: 3px solid var(--color-gold);
  border-radius: var(--radius-md);
  padding: 20px 22px;
  position: relative;
  overflow: hidden;
  transition: box-shadow 0.18s, border-color 0.18s, transform 0.15s;
}
.cs-tier-card:hover {
  box-shadow: 0 6px 24px rgba(26,58,92,0.10);
  transform: translateY(-2px);
  border-color: rgba(184,134,11,0.75);
}

/* Tier labels/text */
.cs-tier-label {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--page-text-muted);
  margin-bottom: 6px;
}
.cs-tier-name {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--page-text);
  margin-bottom: 4px;
}
.cs-tier-desc {
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--page-text);
  line-height: 1.55;
  margin-bottom: 12px;
}
.cs-tier-features {
  list-style: none;
  padding: 0;
  margin: 0;
}
.cs-tier-features li {
  font-family: var(--font-body);
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--page-text);
  padding: 4px 0;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  line-height: 1.45;
}
.cs-tier-features li span.check {
  color: var(--color-gold);
  flex-shrink: 0;
  margin-top: 1px;
  font-size: 0.82rem;
  font-weight: 700;
}
.cs-tier-tbd {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--page-text-muted);
  margin-top: 14px;
}

/* ── Back link ── */
.cs-back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--page-text-muted);
  text-decoration: none;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 500;
  transition: color .15s;
}
.cs-back-link:hover { color: var(--page-text); }

/* ── Footer social row (sitewide) ── */
.footer-social-row {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 14px;
  flex-wrap: wrap;
}
.footer-social-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: rgba(200,210,220,0.55);
  text-decoration: none;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: .03em;
  transition: color .15s;
}
.footer-social-link:hover { color: var(--color-gold); }
.footer-social-link svg { flex-shrink: 0; opacity: .75; }
.footer-social-link:hover svg { opacity: 1; }


/* ============================================================
   ALL ISSUES ICON-GRID NAV (Archive page)
   ============================================================ */

/* ═══════════════════════════════════════════════════════
   ALL ISSUES FILTER NAV — matches reference image exactly
   ═══════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════
   RESEARCH COVERAGE CARDS — Homepage (.iu-card-*)
   ══════════════════════════════════════════════════════ */

.iu-categories {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-bottom: var(--space-8);
}
.iu-categories-bottom {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin-bottom: var(--space-10);
}

.iu-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,0.07), 0 1px 3px rgba(0,0,0,0.05);
  text-decoration: none;
  color: inherit;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  border: 1px solid rgba(26,58,92,0.08);
}
.iu-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(0,0,0,0.11), 0 2px 6px rgba(0,0,0,0.07);
  border-left: 3px solid var(--page-gold, #b8860b);
}

/* Banner header — full-art image, replaces the old icon+text layout */
.iu-card-header {
  display: block;
  padding: 0;
  position: relative;
}
.iu-card-header img {
  width: 100%;
  height: auto;
  display: block;
}

.iu-card-access {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 4px;
}
.iu-card-access-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.iu-card-access--free .iu-card-access-dot { background: #22c55e; box-shadow: 0 0 5px rgba(34,197,94,0.5); }
.iu-card-access--sub .iu-card-access-dot  { background: #c9a84c; box-shadow: 0 0 5px rgba(201,168,76,0.5); }
.iu-card-access-label {
  font-family: 'Manrope', sans-serif;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}
.iu-card-access--free .iu-card-access-label { color: #22c55e; }
.iu-card-access--sub  .iu-card-access-label { color: #c9a84c; }

/* Date corner */
.iu-card-date-corner {
  position: absolute;
  bottom: 8px;
  right: 14px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.62rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}

/* Intermarket University card icon badges */
.edu-icon-badge {
  width: 84px;
  height: 84px;
  display: block;
  object-fit: contain;
}
.edu-icon-rule {
  width: 26px;
  height: 2px;
  background: var(--color-gold);
  opacity: 0.7;
  border-radius: 1px;
  margin: 2px 0 2px;
}
.edu-card:hover .edu-icon-badge {
  transform: scale(1.04);
}
.edu-icon-badge { transition: transform 0.2s ease; }

/* Card body */
.iu-card-body {
  padding: 16px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.iu-card-topics {
  font-family: 'Inter', sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  color: #2e3d4f;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.iu-card-link {
  font-family: 'Manrope', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  color: rgba(184,134,11,0.85);
  text-decoration: underline;
  text-underline-offset: 3px;
  margin-top: 4px;
}

/* Responsive */
@media (max-width: 1024px) {
  .iu-categories { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .iu-categories, .iu-categories-bottom { grid-template-columns: 1fr; }
  .iu-card-title { font-size: 1.4rem; }
  .iu-card-icon { width: 48px; height: 48px; }
}


.issues-nav-wrap {
  margin-bottom: var(--space-8);
}

/* Outer ornate gold-border frame */
.issues-nav-frame {
  position: relative;
  /* Outer gold frame — clipped corners approximate an engraved plaque */
  border: 4px solid #b8860b;
  clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px), 0 14px);
  padding: 5px;
  background: #f7f3ea;
  /* Inner gold border via box-shadow */
  box-shadow:
    inset 0 0 0 2px #c9a84c,
    0 0 0 1px rgba(184,134,11,0.25),
    0 6px 28px rgba(184,134,11,0.20),
    0 2px 8px rgba(0,0,0,0.12);
  margin-bottom: var(--space-5);
}

/* Inner cream container — nested clip, slightly smaller notch */
.issues-nav-inner {
  background: #f7f3ea;
  clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px);
  overflow: hidden;
}

/* Grid: 4 equal columns */
.fn-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: auto auto auto;
  background: #c9a84c;  /* gold shows through as hairline dividers */
  gap: 1px;             /* 1px gold gaps = divider lines */
}

/* ALL ISSUES leads as a double-wide tile — the section's flagship, and
   fills the grid evenly (2 + 1+1+1+1+1+1 = 8 units / 4 cols = exact rows) */
.fn-tile--all {
  grid-column: span 2;
}

/* Every tile */
.fn-tile, .fn-tile * { text-decoration: none !important; }
.fn-tile {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
  background: #f7f3ea;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  position: relative;
  width: 100%;
  z-index: 0;
}
.fn-tile:hover {
  background: #f0ead8;
  transform: translateY(-1px);
  box-shadow: inset 0 0 0 1px rgba(184,134,11,0.28), 0 4px 14px rgba(184,134,11,0.10);
  z-index: 1;
}

/* Icon wrapper */
.fn-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(184,134,11,0.08) 0%, rgba(184,134,11,0) 72%);
  transition: transform 0.2s ease, background 0.2s ease;
}
.fn-tile:hover .fn-icon {
  transform: scale(1.05);
  background: radial-gradient(circle, rgba(184,134,11,0.14) 0%, rgba(184,134,11,0) 72%);
}
.fn-icon svg {
  width: 48px;
  height: 48px;
}
.fn-icon img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  display: block;
}

/* Label + rule stacked vertically */
.fn-tile-text {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
}

.fn-label {
  font-family: var(--font-body, 'Manrope', sans-serif);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #12243a;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
}

.fn-subtext {
  font-family: var(--font-body, 'Manrope', sans-serif);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  line-height: 1.3;
  white-space: nowrap;
}

/* Gold diamond rule under label */
.fn-rule::before,
.fn-rule::after {
  content: '';
  display: block;
  width: 18px;
  height: 1.5px;
  background: #b8860b;
  opacity: 0.6;
}
.fn-rule::before { display: none; }
.fn-rule-diamond {
  display: block;
  width: 5px;
  height: 5px;
  background: #b8860b;
  transform: rotate(45deg);
  opacity: 0.75;
  flex-shrink: 0;
}

/* ALL ISSUES — dark navy tile with photo backdrop */
.fn-tile--all {
  background-image: linear-gradient(to right, #0d1e2e 0%, rgba(13,30,46,0.82) 42%, rgba(13,30,46,0.32) 100%), url('../all-issues-header-bg.jpg');
  background-size: cover;
  background-position: right center;
  background-repeat: no-repeat;
  padding: 22px 26px;
  box-shadow: inset 0 0 0 1px rgba(201,168,76,0.18);
}
.fn-tile--all:hover {
  background-image: linear-gradient(to right, #12243a 0%, rgba(18,36,58,0.82) 42%, rgba(18,36,58,0.32) 100%), url('../all-issues-header-bg.jpg');
  box-shadow: inset 0 0 0 1px rgba(201,168,76,0.32), 0 4px 16px rgba(0,0,0,0.18);
  transform: translateY(-1px);
}
.fn-tile--all-subtitle {
  color: rgba(255,255,255,0.72);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-top: 3px;
  white-space: nowrap;
}
.fn-tile--all .fn-label {
  color: #ffffff;
  font-size: 0.9rem;
  letter-spacing: 0.16em;
}
.fn-tile--all .fn-rule { display: none; }
.fn-tile--all svg rect { fill: #c9a84c; }

/* Active state — gold rule line full */
.fn-tile.active .fn-rule {
  width: 40px;
  opacity: 0.9;
}
.fn-tile--all.active {
  background-image: linear-gradient(to right, #0a1825 0%, rgba(10,24,37,0.82) 42%, rgba(10,24,37,0.32) 100%), url('../all-issues-header-bg.jpg');
  background-size: cover;
  background-position: right center;
  background-repeat: no-repeat;
}

/* Responsive */
@media (max-width: 900px) {
  .fn-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  /* Grid items default to min-width:auto, which refuses to shrink below the
     tile's intrinsic content (icon + nowrap label). That fights the 1fr
     track and can force columns wider than the grid box, pushing labels
     like "ENERGY"/"MACRO" past the frame edge. min-width:0 lets the tracks
     actually honor 1fr. */
  .fn-tile {
    min-width: 0;
  }
}
@media (max-width: 520px) {
  .fn-grid {
    grid-template-columns: 1fr !important;
  }
  .fn-tile {
    padding: 14px 18px;
  }
  /* .fn-tile--all spans 2 explicit columns year-round for its double-wide
     flagship look. With only 1 explicit column at this breakpoint, that
     span forces the grid to auto-generate a second, content-sized implicit
     column — which is what was actually pushing ENERGY/MACRO/etc. past the
     frame edge, not the grid-template-columns value itself. */
  .fn-tile--all {
    grid-column: span 1;
  }
}





/* Diamond rule under tile label */
.fn-rule {
  display: block;
  width: 30px;
  height: 1.5px;
  background: linear-gradient(90deg, transparent, #b8860b 30%, #b8860b 70%, transparent);
  opacity: 0.65;
  margin-top: 5px;
  position: relative;
  transition: width 0.2s ease, opacity 0.2s ease;
}
.fn-tile:hover .fn-rule {
  width: 38px;
  opacity: 0.85;
}
.fn-rule::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  width: 5px;
  height: 5px;
  background: #b8860b;
  opacity: 0.85;
}
.fn-tile--all .fn-rule {
  background: linear-gradient(90deg, transparent, #c9a84c 30%, #c9a84c 70%, transparent);
  opacity: 0.9;
}
.fn-tile--all .fn-rule::after {
  background: #c9a84c;
}


/* ══════════════════════════════════════════════════════
   ARCHIVE SEARCH BAR
   ══════════════════════════════════════════════════════ */

.issues-search-row {
  margin: 28px 0 32px;
  display: flex;
  justify-content: flex-start;
}

.issues-search-wrap {
  position: relative;
  display: flex;
  align-items: stretch;
  width: 100%;
  max-width: 520px;
  background: #fdfbf6;
  border: 4px solid #b8860b;
  border-radius: var(--radius-full);
  box-shadow: inset 0 0 0 1.5px #c9a84c, 0 4px 18px rgba(184,134,11,0.18), 0 1px 3px rgba(0,0,0,0.06);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
  overflow: hidden;
}

.issues-search-wrap:focus-within {
  border-color: #96700a;
  box-shadow: inset 0 0 0 1.5px #c9a84c, 0 0 0 3px rgba(184,134,11,0.18), 0 4px 18px rgba(184,134,11,0.22);
}

.issues-search-icon-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 64px;
  background: linear-gradient(135deg, #16324a 0%, #0a1a2b 100%);
  border-right: none;
}

.issues-search-icon {
  color: #d8a850;
  pointer-events: none;
  flex-shrink: 0;
}

.issues-search-input {
  width: 100%;
  padding: 16px 12px 16px 20px;
  font-family: 'Manrope', sans-serif;
  font-size: 0.95rem;
  font-weight: 500;
  color: #12243a;
  background: transparent;
  border: none;
  outline: none;
  letter-spacing: 0.01em;
  -webkit-appearance: none;
  appearance: none;
}

.issues-search-input::placeholder {
  color: #8a9ab0;
  font-weight: 700;
}

/* Remove default search cancel button */
.issues-search-input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a9ab0' stroke-width='2.5' stroke-linecap='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E") no-repeat center;
  background-size: 14px;
  cursor: pointer;
  margin-right: 10px;
  opacity: 0.6;
}

.issues-search-filter-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 54px;
  background: linear-gradient(135deg, #e8c165 0%, #b8860b 100%);
  border: none;
  border-left: none;
  color: #12243a;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.issues-search-filter-btn:hover {
  background: linear-gradient(135deg, #f0cd75 0%, #c9950f 100%);
  color: #0a1825;
}

/* No results message */
.archive-no-results {
  text-align: center;
  padding: 60px 24px;
  color: #4a5a70;
  font-family: 'Manrope', sans-serif;
  font-size: 0.9rem;
}

@media (max-width: 600px) {
  .issues-search-wrap { max-width: 100%; }
  .issues-search-input { font-size: 1rem; }
}

/* ── Card banner — dark image header ── */
/* Bleed past the card's border on the top/left/right so the banner image
   sits flush against the outer edge with no visible border line, while
   matching the card's own corner radius so nothing peeks through at the
   rounded top corners. */
.iuc-banner {
  position: relative;
  height: 180px;
  margin: -1px -1px 0 -3px;
  border-top-left-radius: var(--radius-xl);
  border-top-right-radius: var(--radius-xl);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0;
  overflow: hidden;
}

.iuc-banner-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 0;
}

/* Full-art banner: image already contains icon + label text baked in, so skip the darkening overlay */
.iuc-banner--full-art::after {
  display: none;
}

/* Full-art images are wider than the card at the fixed banner height.
   cover crops horizontally to fill, and at the grid's typical 2-3 column
   card widths that crops straight into the label text. contain guarantees
   the full icon + wording always fits inside the banner at every card
   width — a matching solid background-color fills the resulting
   letterbox so it still reads as seamless, not boxed-in. */
.iuc-banner--full-art .iuc-banner-bg {
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-color: #0a1428;
}

/* Gradient overlay darkens image for legibility */
.iuc-banner::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.55) 100%);
  z-index: 1;
}

.iuc-banner-inner {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0;
  padding: 18px 22px 30px;
}

/* ── Medallion icon in banner ── */
.iuc-icon {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  border: 2px solid rgba(184,134,11,0.75);
  box-shadow: 0 0 0 3px rgba(184,134,11,0.2), 0 3px 12px rgba(0,0,0,0.5);
  background: rgba(0,0,0,0.35);
  flex-shrink: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.iuc-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

/* Medallion variant — the artwork already has its own ring baked in,
   so skip the CSS-drawn circle/border entirely and show the full
   image instead of cropping it into a second, competing circle. */
.iuc-icon--medallion {
  border: none;
  box-shadow: none;
  background: none;
  border-radius: 0;
  overflow: visible;
}
.iuc-icon--medallion img {
  border-radius: 0;
  object-fit: contain;
}

/* Thin gold-ring line-art icon variant — subscriber cards */
.iuc-icon-line {
  width: 60%;
  height: 60%;
  fill: none;
  stroke: var(--page-gold, #b8860b);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── Vertical gold divider between icon and text ── */
.iuc-icon-wrap {
  display: flex;
  align-items: center;
  gap: 0;
  flex-shrink: 0;
}

.iuc-divider {
  width: 1px;
  height: 80px;
  background: linear-gradient(to bottom, transparent, rgba(184,134,11,0.6) 30%, rgba(184,134,11,0.6) 70%, transparent);
  margin: 0 22px;
  flex-shrink: 0;
}

/* ── Banner text ── */
.iuc-banner-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  justify-content: center;
}

/* Cards whose banner photo already includes its own medallion artwork —
   no separate icon overlay, so the text shifts clear of it instead.
   Left-aligned to match the SanDisk banner spec. */
.iuc-banner-text--offset {
  margin-left: 90px;
  align-items: flex-start;
  text-align: left;
}

@media (max-width: 600px) {
  .iuc-banner-text--offset {
    margin-left: 75px;
  }
}

/* Ticker — Playfair Display, large serif, cream white */
.iuc-ticker {
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  font-size: 2.3rem;
  font-weight: 400;
  color: #f5f0e8;
  line-height: 1;
  letter-spacing: -0.01em;
  margin-bottom: 8px;
}

/* Longer words (not a short ticker symbol) need to shrink to fit the banner */
.iuc-ticker--long {
  font-size: 1.6rem;
}

/* Long ticker + offset banner text together need more room to spare */
.iuc-banner-text--offset .iuc-ticker--long {
  font-size: 1.3rem;
}

/* Gold rule under ticker */
.iuc-ticker-rule {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 64px;
  margin-bottom: 9px;
  color: #d4af37;
  font-size: 9px;
  line-height: 1;
}
.iuc-ticker-rule::before,
.iuc-ticker-rule::after {
  content: '';
  flex: 1;
  height: 1.5px;
  background: linear-gradient(to right, rgba(184,134,11,0), rgba(184,134,11,0.9));
}
.iuc-ticker-rule::after {
  background: linear-gradient(to left, rgba(184,134,11,0), rgba(184,134,11,0.9));
}

/* Sector label — wide tracked gold caps */
.iuc-sector {
  font-family: var(--font-body, 'Manrope', sans-serif);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(184,134,11,0.85);
  line-height: 1.3;
  margin-bottom: 9px;
}

/* Subscriber Edition pill badge — matches the SanDisk full-art banner spec:
   centered dot + label inside a rounded gold outline, on its own row */
.iuc-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  flex-shrink: 0;
  width: max-content;
  gap: 4px;
  margin-top: 10px;
  padding: 5px 9px;
  border: 1px solid rgba(240,192,96,0.55);
  border-radius: 999px;
  box-sizing: border-box;
  color: #f0c060;
  font-family: var(--font-mono, 'IBM Plex Mono', monospace);
  font-size: 0.5rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Offset-layout banners have less horizontal room (icon area eats into
   the left margin), so the badge needs to run a touch smaller to fit */
.iuc-banner-text--offset .iuc-badge {
  gap: 3px;
  padding: 4px 7px;
  font-size: 0.42rem;
  letter-spacing: 0.01em;
}
.iuc-badge .iuc-access-dot {
  background: #f0c060;
  box-shadow: 0 0 6px rgba(240,192,96,0.5);
}

.iuc-access-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}


/* ── Card body ── */
.iuc-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 18px 20px 20px;
  gap: 0;
  background: #ffffff;
}

/* Article title — always shown in full, never clipped with an ellipsis */
.iuc-title {
  font-family: var(--font-display, 'Inter', sans-serif);
  font-size: 1.0rem;
  font-weight: 700;
  color: #12243a;
  line-height: 1.35;
  margin: 0 0 10px;
  letter-spacing: -0.01em;
}

.iuc-title a {
  text-decoration: none;
  color: inherit;
}

.iuc-title a:hover { color: var(--page-gold, #b8860b); }

/* Excerpt — a single brief sentence, always shown in full */
.iuc-excerpt {
  font-family: var(--font-body, 'Manrope', sans-serif);
  font-size: 0.82rem;
  color: #4a5a70;
  line-height: 1.6;
  margin-bottom: 16px;
  flex: 1;
}

/* Footer CTA row */
.iuc-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid rgba(26,58,92,0.08);
}

.iuc-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display, 'Inter', sans-serif);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  transition: gap 0.15s ease;
}

.iuc-cta--free { color: #12243a; }
.iuc-cta--sub  { color: var(--page-gold, #b8860b); }

.iuc-cta:hover { gap: 10px; }

.iuc-cta-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.iuc-cta--free .iuc-cta-icon { background: #12243a; }
.iuc-cta--sub  .iuc-cta-icon { background: var(--page-gold, #b8860b); }

.iuc-cta-icon svg { color: #ffffff; }

.iuc-date-footer {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-display, 'Inter', sans-serif);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #12243a;
  white-space: nowrap;
  flex-shrink: 0;
}
.iuc-date-icon {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  stroke: #12243a;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
  .archive-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 600px) {
  .archive-grid { grid-template-columns: 1fr !important; }
  .iuc-banner { height: 150px; }
  .iuc-icon { width: 52px; height: 52px; }
  .iuc-ticker { font-size: 1.3rem; }
  .iuc-ticker--long { font-size: 1.05rem; }
}

/* Filter hide — toggled by JS; class-based so specificity wins over flex display */
.filter-hidden {
  display: none !important;
}

/* Access badge removed from RC cards */
.iu-card-access { display: none !important; }

/* Intermarket University intro infographic — was rendering near-natural
   size (1440px) with no constraint, dominating the page */
.imu-infographic-wrap {
  text-align: center;
  margin: 0 auto 24px;
}
.imu-infographic-wrap img {
  max-width: 1200px;
  width: 100%;
  height: auto;
  display: inline-block;
  border-radius: 12px;
}

.imu-hero-summary {
  max-width: 780px;
  margin: 0 auto;
  padding: 0 16px;
  text-align: center;
}
.imu-hero-summary p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--color-text-muted);
  margin-bottom: 16px;
}
.imu-hero-summary p:last-child { margin-bottom: 0; }
.imu-hero-summary strong { color: var(--color-text); }

/* ══════════════════════════════════════════════════════════════
   IU SHARED ARTICLE COMPONENTS
   Consolidated from per-page duplicate <style> blocks (Aug 2026).
   Subscribe CTA, share bar, and article summary/SEO block used
   identically across issue pages.
   ══════════════════════════════════════════════════════════════ */

/* ── IU Subscribe CTA ── */
.iu-subscribe-cta {
  max-width: 780px;
  margin: 48px auto 0;
  padding: 0 24px;
}
.iu-subscribe-cta-inner {
  display: flex;
  align-items: center;
  gap: 18px;
  background: linear-gradient(135deg, var(--color-surface, #f8f6f1) 0%, var(--color-bg, #faf8f3) 100%);
  border: 1px solid var(--color-gold, #b8860b);
  border-radius: 12px;
  padding: 22px 28px;
  flex-wrap: wrap;
}
.iu-subscribe-cta-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-gold, #b8860b);
  margin-bottom: 4px;
}
.iu-subscribe-cta-text {
  font-size: 13px;
  color: var(--color-text-muted, #666);
  line-height: 1.55;
  max-width: 46ch;
}
.iu-subscribe-cta-body { flex: 1; min-width: 200px; }
.iu-subscribe-cta-btn {
  display: inline-block;
  background: var(--color-gold, #b8860b);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  text-decoration: none;
  padding: 11px 24px;
  border-radius: 100px;
  white-space: nowrap;
  transition: opacity .18s, transform .15s;
  flex-shrink: 0;
}
.iu-subscribe-cta-btn:hover { opacity: .88; transform: translateY(-1px); }

/* ── IU Share Bar ── */
.iu-share-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  max-width: 780px;
  margin: 24px auto 0;
  padding: 0 24px;
}
.iu-share-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-text-faint, #999);
  margin-right: 4px;
}
.iu-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-muted, #555);
  background: var(--color-surface, #f4f2ed);
  border: 1px solid var(--color-border, #ddd);
  border-radius: 6px;
  padding: 7px 13px;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s, border-color .15s;
  font-family: inherit;
}
.iu-share-btn:hover {
  background: var(--color-bg, #faf8f3);
  border-color: var(--color-gold, #b8860b);
  color: var(--color-gold, #b8860b);
}

/* ── IU Article Summary (SEO HTML block) ── */
.iu-article-summary {
  max-width: 780px;
  margin: 0 auto;
  padding: 40px 24px 0;
}
.iu-article-summary h2 {
  font-family: var(--font-display, 'Playfair Display', Georgia, serif);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-text, #1a1a1a);
  margin: 28px 0 10px;
  letter-spacing: -.01em;
}
.iu-article-summary h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text, #1a1a1a);
  margin: 20px 0 8px;
}
.iu-article-summary p {
  font-size: 15px;
  line-height: 1.75;
  color: var(--color-text-muted, #444);
  margin-bottom: 14px;
}
.iu-article-summary ul {
  margin: 0 0 16px 20px;
  padding: 0;
}
.iu-article-summary ul li {
  font-size: 14px;
  line-height: 1.65;
  color: var(--color-text-muted, #444);
  margin-bottom: 6px;
}
.iu-summary-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin: 20px 0 28px;
}
.iu-summary-kpi {
  background: var(--color-surface, #f4f2ed);
  border: 1px solid var(--color-border, #e8e4dc);
  border-radius: 8px;
  padding: 13px 16px;
}
.iu-summary-kpi-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--color-gold, #b8860b);
  margin-bottom: 4px;
}
.iu-summary-kpi-value {
  font-size: 15px;
  font-weight: 800;
  color: var(--color-text, #1a1a1a);
  line-height: 1.2;
}
.iu-summary-divider {
  border: none;
  border-top: 1px solid var(--color-border, #e8e4dc);
  margin: 32px 0 0;
}

/* ── IU Article Meta Strip (tag / date row) ──────────────────────
   Box-free, uppercase, editorial byline strip. Every child is
   font-size .72rem / weight 800 / uppercase / letter-spaced by
   default; .pdf-date and .pdf-byline opt back out to a quieter,
   sentence-case register. A thin rule + "·" separators replace
   the old colored pill backgrounds so tag/badge/date read as one
   consistent line regardless of which report page they're on. */
.pdf-meta-strip {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--color-divider);
  flex-wrap: wrap;
}
.pdf-meta-strip > * {
  font-size: 0.8rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  color: var(--color-text-muted);
}
.pdf-meta-strip > * + *::before {
  content: "\00b7";
  display: inline-block;
  margin: 0 10px;
  color: var(--color-text-faint);
  font-weight: 400;
}
.pdf-tag { color: var(--color-text-muted) !important; }
.pdf-lock-badge,
.pdf-sample-badge {
  display: inline-flex !important;
  align-items: center;
  gap: 5px;
  color: var(--color-gold) !important;
}
.pdf-date,
.pdf-byline {
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  color: var(--color-text-faint) !important;
}

/* ── Free Report Download CTA ────────────────────────────────
   Site-wide replacement for embedding an entire PDF inline: show
   a 3-page preview (cover / TOC / executive summary, whichever
   exist) then this card in place of the rest of the document.
   Positive framing (gold accent, no lock icon) — this is a normal
   download prompt, not a paywall. */
.free-report-cta {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-gold);
  border-radius: 16px;
  padding: 32px 32px 36px;
  text-align: center;
  margin: 24px 0 48px;
}
.free-report-cta-title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 8px;
}
.free-report-cta-desc {
  font-size: 14px;
  color: var(--color-text-muted);
  max-width: 60ch;
  margin: 0 auto 20px;
  line-height: 1.6;
}
.free-report-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--color-gold);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  padding: 12px 28px;
  border-radius: 100px;
  text-decoration: none;
  transition: transform .15s ease, opacity .15s ease;
}
.free-report-cta-btn:hover { opacity: .9; transform: translateY(-1px); }
.free-report-cta-actions { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }
.free-report-cta-btn--ghost {
  background: transparent;
  color: var(--color-gold);
  border: 1px solid var(--color-gold);
}
.free-report-cta-btn--ghost:hover { opacity: 1; background: rgba(184,134,11,0.08); }
.free-report-cta-note {
  font-size: 12px;
  color: var(--color-text-faint);
  margin-top: 14px;
}

/* ── Faint global-markets dot pattern ──────────────────────────
   Scoped to Research Coverage + Commodity Verse spotlight only.
   Echoes the world-map motif in the hero image, as a lightweight
   pure-CSS dot-matrix rather than another raster asset. */
.section--map-bg {
  position: relative;
  overflow: hidden;
}
.section--map-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(184,134,11,0.16) 1px, transparent 1.4px);
  background-size: 22px 22px;
  mask-image: radial-gradient(ellipse 78% 65% at 50% 38%, rgba(0,0,0,0.55) 0%, transparent 72%);
  -webkit-mask-image: radial-gradient(ellipse 78% 65% at 50% 38%, rgba(0,0,0,0.55) 0%, transparent 72%);
}
.section--map-bg .container,
.section--map-bg .cv-feat {
  position: relative;
  z-index: 1;
}

/* ── Latest Research rail (mockup) ──────────────────────────── */
.latest-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 32px;
}
@media (max-width: 980px) {
  .latest-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .latest-grid { grid-template-columns: 1fr; }
}
.latest-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #fff;
  border-radius: 10px;
  border: 1px solid rgba(26,58,92,0.08);
  box-shadow: 0 2px 12px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04);
  padding: 22px 22px 20px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.latest-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(0,0,0,0.10), 0 2px 6px rgba(0,0,0,0.06);
  border-color: rgba(184,134,11,0.4);
}
.latest-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.latest-card-tag {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-gold, #b8860b);
}
.latest-card-date {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-body, 'Manrope', sans-serif);
  font-size: 11px;
  font-weight: 600;
  color: var(--page-text-muted);
  white-space: nowrap;
}
.latest-card-date-icon {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  stroke: var(--page-text-muted);
}
.latest-card-title {
  font-family: var(--font-display, 'Playfair Display', Georgia, serif);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.32;
  color: var(--page-text);
  letter-spacing: -0.01em;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.latest-card-teaser {
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--page-text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
}
.latest-card-access {
  align-self: flex-start;
  font-family: var(--font-mono, 'IBM Plex Mono', monospace);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #2d8a4e;
  background: rgba(45,138,78,0.10);
  border: 1px solid rgba(45,138,78,0.28);
  border-radius: 100px;
  padding: 3px 10px;
  display: inline-flex;
  align-items: center;
}
.latest-card-access--sub {
  color: var(--color-gold, #b8860b);
  background: rgba(184,134,11,0.08);
  border-color: rgba(184,134,11,0.28);
}

/* Homepage footer seal: sits under the last footer column's links, inserted as-is.
   Hidden on phones where the column is too narrow. */
.footer-seal { display: block; width: 120px; height: 120px; margin-top: 44px; }
@media (max-width: 820px) {
  .footer-seal { width: 100px; height: 100px; }
}
@media (max-width: 560px) {
  .footer-seal { display: none; }
}