/* ============================================================
   SIMPLYCODES BLOG — Stylesheet
   Design System: DS 2.0 (Color, Typography, Shape, Spatial, Depth)
   Dark-first brand. Article page defaults to light. Nav/Footer always dark.
   ============================================================ */

/* =============================================
   1. DESIGN TOKENS (from AKC Drivers)
   ============================================= */
:root {
  /* Brand */
  --color-brand-green: #03ff88;

  /* Gray Scale — Full Ramp */
  --color-gray-0: #ffffff;
  --color-gray-25: #fdfcfc;
  --color-gray-50: #fafafa;
  --color-gray-75: #f7f7f8;
  --color-gray-100: #f4f4f5;
  --color-gray-150: #ececed;
  --color-gray-200: #e4e4e7;
  --color-gray-250: #dbdbde;
  --color-gray-300: #d4d4d8;
  --color-gray-350: #b9b9bf;
  --color-gray-400: #a1a1aa;
  --color-gray-500: #71717a;
  --color-gray-600: #52525b;
  --color-gray-650: #484850;
  --color-gray-700: #3f3f46;
  --color-gray-750: #333338;
  --color-gray-800: #27272a;
  --color-gray-850: #1f1f22;
  --color-gray-900: #18181b;
  --color-gray-925: #101013;
  --color-gray-950: #09090b;
  --color-gray-975: #040405;
  --color-gray-1000: #000000;

  /* Green Scale (Signal) */
  --color-green-25: #f7fff9;
  --color-green-50: #f0fef4;
  --color-green-100: #ebf8ee;
  --color-green-200: #9dffba;
  --color-green-300: #03ff88;
  --color-green-600: #02c869;
  --color-green-700: #039f53;
  --color-green-800: #026e37;
  --color-green-900: #013314;
  --color-green-950: #001407;

  /* Blue Scale (Info) */
  --color-blue-300: #6eb6ff;

  /* Violet Scale (Intelligence) */
  --color-violet-400: #a384ff;

  /* Amber Scale (Warning) */
  --color-amber-300: #e1a417;

  /* Typography — DM Sans (Human Voice) + DM Mono (Machine Voice) */
  --font-sans: "DM Sans", sans-serif;
  --font-mono: "DM Mono", monospace;
  --features-sans: "ss02" 1, "liga" 0, "clig" 0;
  --features-mono: "ss03" 1, "ss05" 1;

  /* Weights */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  /* Type Scale (Modular 1.2, snapped to 4px grid) */
  --text-80: 0.694rem; /* 11px */
  --text-90: 0.833rem; /* 13px */
  --text-100: 1rem; /* 16px */
  --text-200: 1.2rem; /* 19px */
  --text-400: 1.728rem; /* 28px */
  --text-500: 2.074rem; /* 33px */
  --text-600: 2.488rem; /* 40px */
  --text-700: 2.986rem; /* 48px */
  --text-900: 4rem; /* 64px */

  /* Line Heights (4px grid) */
  --lh-16: 1rem;
  --lh-20: 1.25rem;
  --lh-24: 1.5rem;
  --lh-28: 1.75rem;
  --lh-32: 2rem;
  --lh-40: 2.5rem;
  --lh-48: 3rem;
  --lh-56: 3.5rem;
  --lh-72: 4.5rem;

  /* Letter Spacing */
  --tracking-tight-4: -0.04em;
  --tracking-tight-2: -0.02em;
  --tracking-tight-1: -0.01em;
  --tracking-normal: 0em;
  --tracking-wide: 0.125em;

  /* Spacing (4px grid primitive) */
  --sp-05: 0.125rem; /* 2px  — micro only */
  --sp-1: 0.25rem; /* 4px  */
  --sp-2: 0.5rem; /* 8px  */
  --sp-3: 0.75rem; /* 12px */
  --sp-4: 1rem; /* 16px */
  --sp-6: 1.5rem; /* 24px */
  --sp-8: 2rem; /* 32px */
  --sp-12: 3rem; /* 48px */
  --sp-16: 4rem; /* 64px */
  --sp-20: 5rem; /* 80px */
  --sp-24: 6rem; /* 96px */

  /* Border Radius (em-based per Shape Physics) */
  --radius-sm: 0.375rem; /* ~6px  — small indicators */
  --radius-md: 0.5rem; /* ~8px  — buttons, inputs */
  --radius-lg: 0.625rem; /* ~10px — prominent CTAs */
  --radius-xl: 1rem; /* ~16px — cards, panels */
  --radius-2xl: 1.25rem; /* ~20px — pills, badges */
  --radius-full: 40rem; /* pill / circular */

  /* Borders (hairline = structural, thin = status) */
  --border-hairline: 1px;
  --border-thin: 2px;

  /* Icon Sizes (Glyph Physics) */
  --icon-size-xs: 0.75rem; /* 12px */
  --icon-size-sm: 1rem; /* 16px */
  --icon-size-md: 1.25rem; /* 20px */
  --icon-size-lg: 1.5rem; /* 24px */
  --icon-size-xl: 2rem; /* 32px */

  /* Z-Index (Depth Physics layers) */
  --z-surface: 10;
  --z-glass: 20; /* sticky nav */
  --z-focus: 30; /* modals */

  /* Shadows — shadows BANNED on data containers */
  --shadow-modal: 0 25px 50px -12px rgba(0, 0, 0, 0.9);
  --shadow-glow: 0 0 12px rgba(3, 255, 136, 0.25);

  /* Layout */
  --container-max: 80rem; /* 1280px */
  --nav-height: 3.5rem; /* 56px */

  /* Semantic color tokens (nav/footer) */
  --text-primary: var(--color-gray-50);
  --text-secondary: var(--color-gray-300);
  --text-tertiary: var(--color-gray-400);
  --text-muted: var(--color-gray-500);
  --text-disabled: var(--color-gray-600);
  --text-on-action: var(--color-gray-1000);
  --text-brand-secondary: #bcabff; /* violet-300 */
  --border-primary: var(--color-gray-750);
  --border-secondary: var(--color-gray-850);
  --surface-base: var(--color-gray-1000);
  --surface-layer: var(--color-gray-925);
  --surface-elevated: var(--color-gray-950);
  --action-primary: var(--color-brand-green);

  /* Transition / Motion */
  --duration-snap: 0.15s;
  --duration-slide: 0.25s;
  --ease-industrial: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-pulse: ease-in-out;
  --blur-hud: 12px;

  /* Spacing aliases (nav/footer use --space-N) */
  --space-1: var(--sp-1);
  --space-2: var(--sp-2);
  --space-3: var(--sp-3);
  --space-4: var(--sp-4);
  --space-6: var(--sp-6);
  --space-8: var(--sp-8);
  --space-12: var(--sp-12);
  --space-16: var(--sp-16);
}

/* =============================================
   2. RESET & BASE
   ============================================= */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  font-family: var(--font-sans);
  font-feature-settings: var(--features-sans);
  font-variant-ligatures: none;
  font-size: var(--text-100);
  line-height: var(--lh-24);
  color: var(--color-gray-50);
  background: var(--color-gray-1000);
}

img,
video {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  text-decoration: none;
  color: inherit;
}
ul,
ol {
  list-style: none;
}
button {
  cursor: pointer;
  background: none;
  border: none;
  font: inherit;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
}

/* =============================================
   3. LAYOUT UTILITIES
   ============================================= */

/* Screen-reader only — visually hidden but accessible */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--sp-6);
  padding-right: var(--sp-6);
}

/* =============================================
   4. NAVIGATION (from pmlp-prototype header.css)
   ============================================= */
#site-nav {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: var(--z-glass);
  border-bottom: 1px solid #1f1f22;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(var(--blur-hud)) saturate(1.5);
  -webkit-backdrop-filter: blur(var(--blur-hud)) saturate(1.5);
}
.nav-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-6);
  height: var(--nav-height);
  display: flex;
  align-items: center;
  gap: var(--space-6);
}
.simplycodes-logo {
  display: inline-block;
  flex-shrink: 0;
}
.logo-svg {
  display: block;
}
.simplycodes-logo[data-size="sm"] .logo-svg {
  width: 147px;
  height: 32px;
}
.simplycodes-logo[data-size="md"] .logo-svg {
  width: 147px;
  height: 32px;
}
.simplycodes-logo[data-size="lg"] .logo-svg {
  width: 184px;
  height: 40px;
}
@media (min-width: 1024px) {
  .simplycodes-logo[data-size="md"] .logo-svg {
    width: 184px;
    height: 40px;
  }
}
.header-nav-zone {
  display: flex;
  align-items: center;
}
.header-nav {
  display: flex;
  align-items: center;
  gap: 0;
}
.header-actions-zone {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex-shrink: 0;
  margin-left: auto;
}
.nav-link {
  font-size: var(--text-90);
  font-weight: var(--weight-medium);
  color: var(--text-muted);
  transition:
    color var(--duration-snap),
    background var(--duration-snap);
  padding: 6px var(--space-3);
  border-radius: var(--radius-md);
  white-space: nowrap;
  text-decoration: none;
}
.nav-link:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.04);
}
.nav-link.active {
  color: var(--text-primary);
}
.nav-ghost {
  display: inline-flex;
  align-items: center;
  background: transparent;
  color: var(--text-primary);
  padding: 6px var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-primary);
  font-size: var(--text-90);
  font-weight: var(--weight-semibold);
  transition: border-color var(--duration-snap);
  white-space: nowrap;
  text-decoration: none;
}
.nav-ghost:hover {
  border-color: var(--text-muted);
}
.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--action-primary);
  color: var(--text-on-action);
  padding: 6px var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--text-90);
  font-weight: var(--weight-semibold);
  margin-left: var(--space-2);
  transition:
    opacity var(--duration-snap),
    box-shadow var(--duration-snap);
  text-decoration: none;
}
.nav-cta:hover {
  opacity: 0.9;
  box-shadow: var(--shadow-glow);
  color: var(--text-on-action);
}
.header-hamburger {
  display: none;
  align-items: center;
  justify-content: center;
  color: var(--text-primary);
  font-size: 1.5rem;
  padding: var(--space-1);
  border-radius: var(--radius-md);
  transition: background var(--duration-snap);
  margin-left: auto;
}
.header-hamburger:hover {
  background: rgba(255, 255, 255, 0.06);
}
.mobile-overlay {
  display: none;
  position: fixed;
  top: var(--nav-height);
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(var(--blur-hud)) saturate(1.5);
  -webkit-backdrop-filter: blur(var(--blur-hud)) saturate(1.5);
  z-index: var(--z-focus);
}
.mobile-overlay[data-open="true"] {
  display: block;
}
.mobile-drawer {
  position: fixed;
  top: var(--nav-height);
  right: 0;
  bottom: 0;
  width: 100%;
  max-width: 325px;
  background: var(--surface-base);
  z-index: calc(var(--z-focus) + 1);
  display: flex;
  flex-direction: column;
  padding: var(--space-6);
  overflow-y: auto;
  transform: translateX(100%);
  visibility: hidden;
  transition:
    transform var(--duration-slide) var(--ease-industrial),
    visibility 0s linear var(--duration-slide);
}
.mobile-drawer[data-open="true"] {
  transform: translateX(0);
  visibility: visible;
  transition:
    transform var(--duration-slide) var(--ease-industrial),
    visibility 0s linear 0s;
}
.mobile-drawer-nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  width: 100%;
}
.mobile-drawer-nav .nav-link {
  font-size: var(--text-100);
  line-height: var(--lh-20);
  padding: var(--space-3) var(--space-2);
}
.mobile-drawer-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  width: 100%;
  margin-top: auto;
  padding-top: var(--space-8);
}
.mobile-drawer-actions > * {
  justify-content: center;
  text-align: center;
}
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--action-primary);
  color: var(--text-on-action);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  font-size: var(--text-90);
  font-weight: var(--weight-semibold);
  transition: box-shadow var(--duration-snap);
  text-decoration: none;
}
.btn-primary:hover {
  box-shadow: var(--shadow-glow);
}
.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--surface-elevated);
  color: var(--text-primary);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-primary);
  font-size: var(--text-90);
  font-weight: var(--weight-semibold);
  transition: border-color var(--duration-snap);
  text-decoration: none;
}
.btn-ghost:hover {
  border-color: var(--text-muted);
}
@media (max-width: 850px) {
  .header-nav-zone {
    display: none;
  }
  .header-actions-zone {
    display: none;
  }
  .header-hamburger {
    display: flex;
  }
}

/* =============================================
   5. FOOTER (from pmlp-prototype footer.css)
   ============================================= */
#site-footer {
  border-top: 1px solid var(--border-secondary);
  padding: var(--space-16) 0 0;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr repeat(5, 1fr);
  gap: var(--space-8);
  padding-bottom: var(--space-12);
}
.footer-brand p {
  font-size: var(--text-90);
  color: var(--text-tertiary);
  line-height: 1.6;
  margin-bottom: var(--space-4);
  max-width: 280px;
}
.footer-col h4 {
  font-family: var(--font-mono);
  font-feature-settings: var(--features-mono);
  font-size: var(--text-80);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  margin-bottom: var(--space-4);
}
#site-footer .footer-col a {
  display: block;
  font-size: var(--text-90);
  color: var(--text-tertiary);
  margin-bottom: var(--space-3);
  transition: color var(--duration-snap);
  text-decoration: none;
}
#site-footer .footer-col a:hover {
  color: var(--text-primary);
}
.footer-pai-section {
  border-top: 1px solid var(--border-secondary);
  padding: var(--space-8) 0;
  display: flex;
  align-items: center;
  gap: var(--space-8);
}
.footer-pai-lockup {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  flex-shrink: 0;
  transition: opacity var(--duration-snap);
}
.footer-pai-lockup:hover {
  opacity: 0.7;
}
.footer-pai-diamond {
  width: 20px;
  height: 20px;
  background: var(--color-violet-400);
  transform: rotate(45deg);
  border-radius: 3px;
  flex-shrink: 0;
}
.footer-pai-text {
  flex: 1;
  min-width: 0;
}
.footer-pai-label {
  font-weight: var(--weight-medium);
  font-size: var(--text-100);
  color: var(--text-secondary);
  margin-bottom: 2px;
}
.footer-pai-desc {
  font-size: var(--text-90);
  color: var(--text-tertiary);
  line-height: 1.5;
}
.footer-pai-link {
  font-family: var(--font-mono);
  font-feature-settings: var(--features-mono);
  font-size: var(--text-80);
  color: var(--text-brand-secondary);
  text-decoration: none;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
  transition: color var(--duration-snap);
}
.footer-pai-link:hover {
  color: #d7cfff;
}
.footer-pai-link i {
  margin-left: var(--space-1);
}
.footer-bottom-zone {
  border-top: 1px solid var(--border-secondary);
  padding: var(--space-6) 0 var(--space-8);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
}
.footer-copy {
  font-size: var(--text-80);
  color: var(--text-tertiary);
  flex-shrink: 0;
}
.footer-status {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-feature-settings: var(--features-mono);
  font-size: var(--text-80);
  color: var(--text-tertiary);
  flex-shrink: 0;
}
.nav-logo {
  font-weight: var(--weight-semibold);
  font-size: var(--text-200);
  color: var(--text-primary);
}
@keyframes pulse-glow {
  0%,
  100% {
    opacity: 1;
    box-shadow: 0 0 0 0 rgba(3, 255, 136, 0.3);
  }
  50% {
    opacity: 0.6;
    box-shadow: 0 0 6px 2px rgba(3, 255, 136, 0.15);
  }
}
.pulse-dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--color-brand-green);
  animation: pulse-glow 2s var(--ease-pulse) infinite;
  display: inline-block;
  flex-shrink: 0;
}
@media (max-width: 1100px) {
  .footer-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
  }
  .footer-brand {
    grid-column: 1 / -1;
  }
}
@media (max-width: 768px) {
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
  }
  .footer-brand {
    grid-column: 1 / -1;
  }
  .footer-pai-section {
    flex-direction: column;
    gap: var(--space-4);
    text-align: center;
    align-items: center;
  }
  .footer-pai-text {
    text-align: center;
  }
  .footer-bottom-zone {
    flex-direction: column;
    gap: var(--space-4);
    text-align: center;
    align-items: center;
  }
}
@media (max-width: 480px) {
  .footer-grid {
    grid-template-columns: 1fr;
  }
  .footer-brand {
    grid-column: auto;
  }
}

/* Article share buttons — theme-aware */
.share-icon-btn img.social-brand-icon {
  width: 17px;
  height: 17px;
  filter: brightness(0);
  opacity: 0.7;
  transition:
    filter 0.15s,
    opacity 0.15s;
}
.share-icon-btn:hover img.social-brand-icon {
  opacity: 1;
}
html[data-theme="dark"] .share-icon-btn img.social-brand-icon {
  filter: brightness(0) invert(1);
  opacity: 0.75;
}
html[data-theme="dark"] .share-icon-btn:hover img.social-brand-icon {
  opacity: 1;
}

/* =============================================
   6. SHARED CHIP / PILL COMPONENTS
   ============================================= */

/* Category pill — dark (homepage) */
.cat-pill {
  display: inline-flex;
  align-items: center;
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--radius-2xl);
  font-size: var(--text-80);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  background: var(--color-gray-900);
  color: var(--color-gray-400);
  border: 1px solid var(--color-gray-800);
  white-space: nowrap;
}

/* Filter chip — dark homepage */
.filter-chip {
  display: inline-flex;
  align-items: center;
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--radius-2xl);
  font-size: var(--text-90);
  font-weight: var(--weight-medium);
  color: var(--color-gray-500);
  background: transparent;
  border: 1px solid var(--color-gray-800);
  cursor: pointer;
  transition:
    color 0.15s,
    border-color 0.15s,
    background 0.15s;
  white-space: nowrap;
}

.filter-chip:hover {
  color: var(--color-gray-200);
  border-color: var(--color-gray-700);
}

.filter-chip.is-active {
  color: var(--color-gray-50);
  background: var(--color-gray-850);
  border-color: var(--color-gray-750);
}

/* Section "Show more" button */
.section-show-more {
  display: flex;
  justify-content: center;
  padding-top: var(--sp-8);
}

.btn-show-more {
  display: inline-flex;
  align-items: center;
  background: transparent;
  color: var(--text-tertiary);
  padding: var(--sp-2) var(--sp-6);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-primary);
  font-size: var(--text-90);
  font-weight: var(--weight-semibold);
  font-family: var(--font-sans);
  cursor: pointer;
  transition:
    color var(--duration-snap),
    border-color var(--duration-snap);
  text-decoration: none;
  white-space: nowrap;
}

.btn-show-more:hover {
  color: var(--text-primary);
  border-color: var(--text-muted);
}

/* =============================================
   7. BLOG HOMEPAGE — Image-first card grid
   Inspired by Linear: image IS the card.
   Sections replace sidebar. 16:9 everywhere.
   ============================================= */
.blog-page {
  padding-top: var(--nav-height);
  background: var(--color-gray-1000);
  min-height: 100vh;
}

/* Shared meta dot */
.meta-dot {
  width: 3px;
  height: 3px;
  border-radius: var(--radius-full);
  background: var(--color-gray-400);
  flex-shrink: 0;
  display: inline-block;
}

/* ── 7a. Section chrome ──────────────────────────── */

/* Featured: sits directly below the filter bar — minimal top padding */
.blog-featured {
  padding: var(--sp-6) 0 var(--sp-8);
}

/* All other sections: hairline top border */
.blog-section {
  padding: var(--sp-12) 0;
  border-top: 1px solid var(--color-gray-925);
}

.blog-section--last {
  padding-bottom: var(--sp-20);
}

/* Section header row */
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--sp-4);
  margin-bottom: var(--sp-8);
  border-bottom: 1px solid var(--color-gray-900);
}

.section-label {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--text-80);
  font-weight: var(--weight-semibold);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

.section-label i {
  font-size: var(--icon-size-sm);
  flex-shrink: 0;
}

.section-see-all {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: var(--text-80);
  font-weight: var(--weight-medium);
  color: var(--color-gray-600);
  text-decoration: none;
  transition: color 0.15s;
}

.section-see-all:hover {
  color: var(--color-gray-300);
}

.section-see-all i {
  font-size: var(--icon-size-xs);
  transition: transform 0.15s;
}

.section-see-all:hover i {
  transform: translateX(2px);
}

/* ── 7b. Post Grid ───────────────────────────────── */
.post-grid {
  display: grid;
  column-gap: var(--sp-8);
  row-gap: var(--sp-16);
}

.post-grid--2 {
  grid-template-columns: 1fr 1fr;
}
.post-grid--3 {
  grid-template-columns: repeat(3, 1fr);
}

/* ── 7c. Post Card ───────────────────────────────── */
.post-card {
  display: flex;
  flex-direction: column;
  background: transparent;
  text-decoration: none;
  color: inherit;
  min-width: 0;
}

/* 16:9 image — matches actual image dimensions (1920x1080) */
.post-card-image {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--color-gray-950);
  flex-shrink: 0;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.07);
  position: relative;
}

.post-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity 0.25s ease;
}

.post-card:hover .post-card-image img {
  opacity: 0.85;
}

/* Placeholder tile until real imagery is dropped in */
.post-card-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(
    135deg,
    var(--color-gray-950) 0%,
    var(--color-gray-900) 100%
  );
  display: flex;
  align-items: center;
  justify-content: center;
}

.post-card-placeholder i {
  font-size: var(--icon-size-xl);
  color: var(--color-gray-850);
}

/* Card body — minimal: category, title, meta */
.post-card-body {
  padding: var(--sp-3) 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  flex: 1;
}

.post-card-category {
  font-size: var(--text-80);
  font-weight: var(--weight-medium);
  color: var(--color-gray-500);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
}

.post-card-category svg {
  flex-shrink: 0;
}

/* Category icon colors — scoped to card element to prevent ancestor bleed */
.post-card[data-category="data-studies"] .post-card-category svg {
  color: var(--color-blue-300);
}
.post-card[data-category="shopping-guides"] .post-card-category svg {
  color: var(--color-amber-300);
}
.post-card[data-category="methodology"] .post-card-category svg {
  color: var(--color-violet-400);
}
.post-card[data-category="product-updates"] .post-card-category svg {
  color: var(--color-green-600);
}

/* Featured card title (larger — 2-col section) */
.post-card-title {
  font-size: var(--text-200);
  font-weight: var(--weight-medium);
  line-height: var(--lh-28);
  letter-spacing: var(--tracking-normal);
  color: var(--color-gray-200);
  transition: color 0.15s;
}

.post-card-title::after {
  content: "\2192";
  display: inline-block;
  max-width: 0;
  padding-left: 0;
  overflow: hidden;
  vertical-align: bottom;
  transition:
    max-width 300ms cubic-bezier(0.2, 0, 0, 1),
    padding-left 300ms cubic-bezier(0.2, 0, 0, 1);
}

.post-card:hover .post-card-title {
  color: var(--color-gray-50);
}
.post-card:hover .post-card-title::after {
  max-width: 1.5em;
  padding-left: var(--space-2);
}

/* Small card title (3-col grid) */
.post-card--sm .post-card-title {
  font-size: var(--text-200);
  line-height: var(--lh-28);
  letter-spacing: var(--tracking-normal);
}

.post-card-meta {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--text-80);
  color: var(--color-gray-500);
  margin-top: auto;
  padding-top: var(--sp-2);
}

/* ── 7d. Featured Hero Card ──────────────────────────────────
   Single feature: image left (55%), editorial text right (45%).
   Stacks vertically on tablet/mobile.
   ─────────────────────────────────────────────────────────── */
.hero-card {
  display: grid;
  grid-template-columns: 55fr 45fr;
  border: none;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--color-gray-975);
  text-decoration: none;
  color: inherit;
}

.hero-card-image {
  overflow: hidden;
  background: var(--color-gray-950);
  border: 1px solid var(--color-gray-925);
  border-radius: var(--radius-md);
  aspect-ratio: 16 / 9;
}

.hero-card-image .post-card-placeholder {
  width: 100%;
  height: 100%;
}

.hero-card-image .post-card-placeholder i {
  font-size: var(--icon-size-xl);
}

.hero-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity 0.25s ease;
}

.hero-card:hover .hero-card-image img {
  opacity: 0.82;
}

.hero-card-body {
  padding: var(--sp-12) var(--sp-8) var(--sp-8);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  justify-content: center;
}

.hero-card-eyebrow {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

/* Reuse post-card-category style — hero version is same DNA */
.hero-card-title {
  font-size: var(--text-500);
  font-weight: var(--weight-semibold);
  line-height: var(--lh-40);
  letter-spacing: var(--tracking-tight-1);
  color: var(--color-gray-100);
  transition: color 0.15s;
}

.hero-card:hover .hero-card-title {
  color: var(--color-gray-0);
}

.hero-card-deck {
  font-size: var(--text-100);
  line-height: var(--lh-24);
  color: var(--color-gray-500);
  flex: 1;
}

.hero-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-3);
  padding-top: var(--sp-4);
}

.hero-card-author {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.hero-author-avatar {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background: var(--color-gray-900);
  border: 1px solid var(--color-gray-800);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-80);
  font-weight: var(--weight-semibold);
  color: var(--color-gray-500);
  flex-shrink: 0;
  overflow: hidden;
}

.hero-author-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-author-name {
  font-size: var(--text-90);
  font-weight: var(--weight-medium);
  color: var(--color-gray-400);
}

.hero-card-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: var(--text-90);
  font-weight: var(--weight-medium);
  color: var(--color-gray-600);
  transition: color 0.15s;
  white-space: nowrap;
}

.hero-card:hover .hero-card-cta {
  color: var(--color-gray-300);
}
.hero-card-cta i {
  font-size: var(--icon-size-xs);
  transition: transform 0.15s;
}
.hero-card:hover .hero-card-cta i {
  transform: translateX(3px);
}

/* ── 7e. Editor's Picks Badge ─────────────────────────────── */
.post-card--pick {
  position: relative;
}

.pick-badge {
  position: absolute;
  top: var(--sp-3);
  right: var(--sp-3);
  z-index: 2;
  height: 24px;
  padding: 0 var(--sp-2);
  border-radius: var(--radius-full);
  background: rgba(3, 255, 136, 0.12);
  border: 1px solid rgba(3, 255, 136, 0.35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  white-space: nowrap;
}

.pick-badge i,
.pick-badge svg {
  font-size: var(--icon-size-xs);
  color: var(--color-brand-green);
}

.pick-badge-label {
  font-size: var(--text-80);
  font-weight: var(--weight-semibold);
  color: var(--color-brand-green);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

/* =============================================
   8. ARTICLE PAGE — Light by default, dark mode optional
   Nav and footer never change. Only .article-region responds to theme.
   ============================================= */

/* Page shell — always dark (nav + footer space) */
.article-page {
  background: var(--color-gray-1000);
}

/* ─── Light Mode (default) ─── */
.article-region {
  --ar-bg: #fdfcfc; /* gray-25 */
  --ar-bg-layer: #ffffff; /* gray-0 */
  --ar-bg-inset: #f4f4f5; /* gray-100 */
  --ar-text: #18181b; /* gray-900 */
  --ar-text-2: #52525b; /* gray-600 */
  --ar-text-3: #a1a1aa; /* gray-400 */
  --ar-border: #e4e4e7; /* gray-200 */
  --ar-border-2: #ececed; /* gray-150 */
  --ar-code-bg: #f4f4f5;
  --ar-code-text: #18181b;
  --ar-code-border: #e4e4e7;
  --ar-callout-bg: #fafafa;
  --ar-callout-line: #d4d4d8; /* gray-300 */
  --ar-green: #026e37; /* green-800 — accessible on light bg */

  background: var(--ar-bg);
  transition:
    background 0.2s ease,
    color 0.2s ease;
}

/* ─── Dark Mode (opt-in via JS toggle) ─── */
html[data-theme="dark"] .article-region {
  --ar-bg: #000000;
  --ar-bg-layer: #09090b;
  --ar-bg-inset: #040405;
  --ar-text: #fafafa;
  --ar-text-2: #d4d4d8;
  --ar-text-3: #71717a;
  --ar-border: #27272a;
  --ar-border-2: #18181b;
  --ar-code-bg: #101013;
  --ar-code-text: #03ff88; /* Green for machine voice in dark */
  --ar-code-border: #27272a;
  --ar-callout-bg: #09090b;
  --ar-callout-line: #3f3f46;
  --ar-green: #03ff88; /* brand green — legible on dark bg */
}

/* ── 8a. Article Header ─────────────────────────── */
.article-header {
  padding: var(--sp-8) 0 var(--sp-8);
}

.article-header-inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-8);
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 var(--sp-6);
}

/* Text block — left half, flexbox column to distribute content vertically */
.article-header-text {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Image — right half, 16:9 to match actual image dimensions */
.article-header-inner > .article-lead-image {
  flex: 1 1 0;
  min-width: 0;
  aspect-ratio: 16 / 9;
  align-self: flex-start;
}

/* Meta row spans full width beneath both */
.article-header-inner > .article-meta-row {
  flex-basis: 100%;
}

/* Breadcrumb — sits above the header grid */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  max-width: 1300px;
  margin: 0 auto var(--sp-6);
  padding: 0 var(--sp-6);
  color: var(--ar-text-3);
  /* Reset global nav rule from sc.css */
  position: static;
  background: transparent;
  backdrop-filter: none;
  height: auto;
  border-bottom: none;
  z-index: auto;
}

.breadcrumb a,
.breadcrumb span {
  font-size: var(--text-80);
  color: var(--ar-text-3);
  transition: color 0.15s;
  white-space: nowrap;
}

.breadcrumb a:hover {
  color: var(--ar-text);
}

.breadcrumb span[aria-current="page"] {
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.breadcrumb i {
  font-size: var(--icon-size-xs);
  color: var(--ar-text-3);
  flex-shrink: 0;
}

/* Category row — tag + theme toggle on same line */
.article-cat-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-4);
}

/* Category tag — dark chip, green text, no border.
   Hardcoded dark bg so brand green always has contrast
   regardless of article light/dark theme. */
.article-cat-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--radius-2xl);
  font-size: var(--text-80);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  background: var(--color-gray-950);
  color: var(--color-gray-0);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

/* Title */
.article-title {
  font-size: var(--text-700);
  font-weight: var(--weight-medium);
  line-height: var(--lh-56);
  letter-spacing: var(--tracking-tight-2);
  color: var(--ar-text);
  margin-bottom: var(--sp-4);
}

/* Subtitle / deck */
.article-deck {
  font-size: var(--text-200);
  font-weight: var(--weight-regular);
  line-height: var(--lh-28);
  color: var(--ar-text-2);
  margin-bottom: var(--sp-8);
}

/* Meta row */
.article-meta-row {
  display: flex;
  align-items: center;
  column-gap: var(--sp-4);
  row-gap: var(--sp-4);
  padding: var(--sp-4);
  border-top: 1px solid var(--ar-border);
  border-bottom: 1px solid var(--ar-border);
  flex-wrap: wrap;
}

.article-authors {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  flex: 1;
}

.article-author {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.article-author-avatar {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  background: var(--ar-bg-inset);
  border: 1px solid var(--ar-border);
  flex-shrink: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-90);
  font-weight: var(--weight-semibold);
  color: var(--ar-text-3);
}

.article-author-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.article-author-info {
  display: flex;
  flex-direction: column;
}

.article-author-label {
  font-size: var(--text-80);
  line-height: var(--lh-16);
  color: var(--ar-text-3);
}

.article-author-name {
  font-size: var(--text-90);
  font-weight: var(--weight-medium);
  color: var(--ar-text);
}

.article-meta-detail {
  font-size: var(--text-90);
  line-height: var(--lh-20);
  color: var(--ar-text-2);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

/* Article tools bar — social share icons + theme toggle
   Sits on the right of the article meta row */
.article-tools {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-left: auto;
  flex-shrink: 0;
}

.article-share-icons {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

/* Individual platform share icon buttons */
.share-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-md);
  border: 1px solid var(--ar-border);
  background: transparent;
  color: var(--ar-text-3);
  font-size: var(--icon-size-sm);
  cursor: pointer;
  transition:
    color 0.15s,
    border-color 0.15s,
    background 0.15s;
}

.share-icon-btn:hover {
  color: var(--ar-text);
  border-color: var(--ar-text-3);
  background: var(--ar-bg-inset);
}

.share-icon-btn--copy.is-copied {
  color: var(--color-brand-green);
  border-color: var(--color-brand-green);
}

/* Light/dark mode toggle — sun ← [track/thumb] → moon
   The track slides to show which mode is active.
   More recognizable than a plain pill button.
*/
.theme-toggle-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-2);
  border-radius: var(--radius-full);
  border: 1px solid var(--ar-border);
  background: var(--ar-bg-inset);
  cursor: pointer;
  transition:
    border-color 0.15s,
    background 0.15s;
  user-select: none;
  flex-shrink: 0;
}

.theme-toggle-pill:hover {
  border-color: var(--ar-text-3);
}

/* Sun and moon icons flank the track */
.theme-toggle-pill .icon-sun,
.theme-toggle-pill .icon-moon {
  font-size: var(--icon-size-sm);
  width: var(--icon-size-sm);
  height: var(--icon-size-sm);
  flex-shrink: 0;
  transition: color 0.2s;
}

/* Light mode: moon highlighted, sun dimmed */
.theme-toggle-pill .icon-sun {
  color: var(--ar-text-3);
}
.theme-toggle-pill .icon-moon {
  color: var(--ar-text-2);
}

/* Dark mode: sun highlighted, moon dimmed */
html[data-theme="dark"] .theme-toggle-pill .icon-sun {
  color: var(--ar-text-2);
}
html[data-theme="dark"] .theme-toggle-pill .icon-moon {
  color: var(--ar-text-3);
}

/* Toggle track */
.toggle-track {
  width: 36px;
  height: 20px;
  border-radius: var(--radius-full);
  background: var(--ar-border);
  position: relative;
  flex-shrink: 0;
  transition: background 0.2s;
}

html[data-theme="dark"] .toggle-track {
  background: var(--color-gray-600);
}

/* Toggle thumb */
.toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: var(--radius-full);
  background: var(--color-gray-0);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s ease;
}

html[data-theme="dark"] .toggle-thumb {
  transform: translateX(16px);
}

/* Hide label text */
.theme-toggle-pill .pill-label {
  display: none;
}

/* ── 8b. Hero Image ─────────────────────────────── */
/*
   Hero image is ALWAYS 16:9. It sits wider than the text
   column for visual impact — the container expands to 960px
   while text is constrained to 720px.

   The <figure> enforces 16:9 with aspect-ratio.
   The <img> fills it with object-fit:cover — supply a
   16:9-designed image and there is zero unwanted crop.

   In-article images (within .article-prose) remain
   width:100% height:auto — natural ratio, never forced.
*/
/* Lead image — lives inside the prose column, inherits its width naturally */
.article-lead-image {
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--ar-border);
  background: var(--ar-bg-inset);
  margin: 0;
}

.article-lead-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.article-lead-image figcaption {
  font-size: var(--text-80);
  color: var(--ar-text-3);
  text-align: center;
  padding: var(--sp-2) var(--sp-4);
  line-height: var(--lh-20);
}

/* Inline article images — sit between prose blocks, full column width */
.article-inline-image {
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.06);
  background: var(--ar-bg-inset);
  margin: var(--sp-8) 0;
}

.article-inline-image img {
  width: 100%;
  height: auto;
  display: block;
}

html[data-theme="dark"] .article-inline-image {
  border-color: rgba(255, 255, 255, 0.07);
}

/* ── 8c. Article Body Layout ────────────────────── */
/*
   3-col desktop: [TOC 200px] [Prose 1fr] [Sidebar 260px]
   1200px: drop right sidebar → [TOC 200px] [Prose 1fr]
   1024px: drop both sidebars → [Prose 1fr] + mobile TOC accordion
*/
.article-body {
  padding-bottom: var(--sp-24);
}

/* Mobile TOC accordion — hidden on desktop */
.toc-mobile {
  display: none;
  margin: 0 var(--sp-6) var(--sp-6);
  border: 1px solid var(--ar-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.toc-mobile-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-4);
  background: var(--ar-bg-inset);
  border: none;
  color: var(--ar-text-2);
  font-size: var(--text-90);
  font-weight: var(--weight-medium);
  cursor: pointer;
  text-align: left;
  transition: background 0.15s;
}

.toc-mobile-toggle i:first-child {
  font-size: var(--icon-size-sm);
}

.toc-mobile-toggle .toggle-caret {
  margin-left: auto;
  font-size: var(--icon-size-sm);
  transition: transform 0.2s;
  flex-shrink: 0;
}

.toc-mobile-toggle.is-open .toggle-caret {
  transform: rotate(180deg);
}

.toc-mobile-nav {
  display: none;
  flex-direction: column;
  align-items: stretch;
  height: auto;
  position: static;
  top: auto;
  z-index: auto;
  padding: 0;
  border: none;
  border-top: 1px solid var(--ar-border);
  background: var(--ar-bg-layer);
  backdrop-filter: none;
}

.toc-mobile-nav.is-open {
  display: flex;
  max-height: 60vh;
  overflow-y: auto;
}

.toc-mobile-nav .toc-link {
  border-left: none;
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--ar-border-2);
  font-size: var(--text-90);
  line-height: var(--lh-20);
  color: var(--ar-text-2);
}

.toc-mobile-nav .toc-link:last-child {
  border-bottom: none;
}

.toc-mobile-nav .toc-link.is-active {
  color: var(--ar-text);
  background: var(--ar-bg-inset);
}

.toc-mobile-nav .toc-link--h3 {
  padding-left: var(--sp-8);
}

/* Article body grid */
.article-body-inner {
  display: grid;
  grid-template-columns: 200px 1fr 260px;
  gap: var(--sp-8);
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 var(--sp-6);
  align-items: start;
}

/* ── 8d. Prose ──────────────────────────────────── */
.article-prose {
  min-width: 0;
  font-size: var(--text-100);
  line-height: var(--lh-28);
  color: var(--ar-text);
  font-weight: var(--weight-regular);
}

/* Headings — DM Sans, Human Voice */
.article-prose h2 {
  font-size: var(--text-500);
  font-weight: var(--weight-semibold);
  line-height: var(--lh-40);
  letter-spacing: var(--tracking-tight-1);
  color: var(--ar-text);
  margin-top: var(--sp-12);
  margin-bottom: var(--sp-4);
  padding-top: var(--sp-4); /* Offset for TOC scroll snap */
}

.article-prose h3 {
  font-size: var(--text-400);
  font-weight: var(--weight-semibold);
  line-height: var(--lh-32);
  letter-spacing: var(--tracking-normal);
  color: var(--ar-text);
  margin-top: var(--sp-8);
  margin-bottom: var(--sp-3);
}

/* Body text */
.article-prose p {
  margin-bottom: var(--sp-6);
  color: var(--ar-text);
}

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

/* Links */
.article-prose a {
  color: var(--ar-text);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--ar-border);
  transition: text-decoration-color 0.15s;
}

.article-prose a:hover {
  text-decoration-color: var(--ar-text-2);
}

/* Bold */
.article-prose strong {
  font-weight: var(--weight-semibold);
  color: var(--ar-text);
}

/* Lists */
.article-prose ul,
.article-prose ol {
  padding-left: var(--sp-6);
  margin-bottom: var(--sp-6);
}

.article-prose ul {
  list-style: disc;
}
.article-prose ol {
  list-style: decimal;
}

.article-prose li {
  margin-bottom: var(--sp-2);
  line-height: var(--lh-28);
  color: var(--ar-text);
}

/*
   Inline code = Machine Voice (DM Mono)
   Rule: Coupon codes, IDs, evidence = mono. Never sans. (Voice Boundary Law)
*/
.article-prose code {
  font-family: var(--font-mono);
  font-feature-settings: var(--features-mono);
  font-size: var(--text-90);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  padding: 0.1em 0.4em;
  border-radius: var(--radius-sm);
  background: var(--ar-code-bg);
  color: var(--ar-code-text);
  border: 1px solid var(--ar-code-border);
  text-transform: uppercase;
}

/*
   Data tables — radius-none (Containers of Fact)
   Sharp edges = precision. No shadows.
*/
.article-prose table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--sp-8) 0;
  font-size: var(--text-90);
  border: 1px solid var(--ar-border);
  border-radius: 0; /* Data containers are sharp */
}

.article-prose thead th {
  font-family: var(--font-mono);
  font-feature-settings: var(--features-mono);
  font-size: var(--text-80);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--ar-text-3);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--ar-border);
  text-align: left;
  background: var(--ar-bg-inset);
}

.article-prose td {
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--ar-border-2);
  color: var(--ar-text-2);
  vertical-align: top;
  line-height: var(--lh-24);
  font-size: var(--text-90);
}

.article-prose tr:last-child td {
  border-bottom: none;
}

/*
   In-article images — NEVER use a fixed height container
   width:100% height:auto is the law. Image sets its own ratio.
*/
.article-prose figure {
  margin: var(--sp-8) 0;
}

.article-prose figure img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-xl);
  border: 1px solid var(--ar-border);
}

.article-prose figcaption {
  font-size: var(--text-80);
  color: var(--ar-text-3);
  text-align: center;
  margin-top: var(--sp-2);
  line-height: var(--lh-20);
}

/* Pull quote / callout block */
.article-callout {
  border-left: 2px solid var(--ar-callout-line);
  background: var(--ar-callout-bg);
  padding: var(--sp-4) var(--sp-6);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  margin: var(--sp-8) 0;
}

.article-callout p {
  font-size: var(--text-200) !important;
  font-style: italic;
  color: var(--ar-text-2) !important;
  margin: 0 !important;
  line-height: var(--lh-28);
}

/* Author bio at end of article */
.author-bio {
  grid-column: 2;
  padding-top: var(--sp-8);
  border-top: 1px solid var(--ar-border);
  display: flex;
  gap: var(--sp-4);
  align-items: flex-start;
}

.bio-avatar {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-full);
  background: var(--ar-bg-inset);
  border: 1px solid var(--ar-border);
  flex-shrink: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-200);
  font-weight: var(--weight-semibold);
  color: var(--ar-text-3);
}

.bio-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bio-info {
  flex: 1;
}

.bio-name {
  font-size: var(--text-100);
  font-weight: var(--weight-semibold);
  color: var(--ar-text);
}

.bio-role {
  font-size: var(--text-80);
  color: var(--ar-text-3);
}

.bio-description {
  font-size: var(--text-90);
  color: var(--ar-text-2);
  line-height: var(--lh-20);
}
.bio-description a {
  text-decoration: underline;
}

.bio-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
}

.bio-social-link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.3125rem 0.75rem;
  border: 1px solid var(--ar-border);
  border-radius: var(--radius-full);
  font-size: var(--text-80);
  color: var(--ar-text-3);
  transition: border-color 0.15s, color 0.15s;
}

.bio-social-link:hover {
  border-color: var(--ar-border-strong, var(--ar-text-3));
  color: var(--ar-text-2);
}

/* ── 8d-i. Article body column wrapper ─────────────
   Wraps the Research Artifacts callout (top) and the article prose so they
   share one grid cell in column 2 of .article-body-inner. Without this
   wrapper, the callout would consume its own grid cell and push the prose
   into column 3 (Max's PR #600 review).
   ============================================= */
.article-body-column {
  grid-column: 2;
  min-width: 0;
}

/* ── 8d-ii. Research Artifacts Callout ─────────────
   Top-of-article download row for flagship data studies (PDF, CSV, etc.).
   Renders only when frontmatter `researchArtifacts` is populated.
   Mirrors the Trust in AI Commerce Report pattern on the PAI Research Hub.
   ============================================= */
.research-artifacts-callout {
  min-width: 0;
  margin-bottom: var(--sp-6);
}

.research-artifacts-eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-feature-settings: var(--features-mono);
  font-size: var(--text-80);
  font-weight: var(--weight-medium);
  color: var(--ar-text-3);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  margin-bottom: var(--sp-2);
}

.research-artifact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
}

.research-artifact-button {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  background: var(--ar-bg);
  border: 1px solid var(--ar-border);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--ar-text);
  transition:
    border-color var(--duration-snap),
    background-color var(--duration-snap),
    transform 60ms ease;
}

.research-artifact-button:hover {
  border-color: var(--ar-text-2);
  background: var(--ar-bg);
  transform: translateY(-1px);
}

.research-artifact-button:active {
  transform: translateY(0);
}

.research-artifact-button:focus-visible {
  outline: 2px solid var(--color-brand-green);
  outline-offset: 2px;
}

.research-artifact-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-green-100, var(--ar-bg-inset));
  color: var(--color-green-800, var(--ar-text-2));
  border-radius: var(--radius-sm);
}

.research-artifact-icon svg {
  width: 14px;
  height: 14px;
}

.research-artifact-meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.research-artifact-label {
  font-size: var(--text-90);
  font-weight: var(--weight-medium);
  line-height: var(--lh-20);
  color: var(--ar-text);
}

.research-artifact-size {
  font-family: var(--font-mono);
  font-feature-settings: var(--features-mono);
  font-size: var(--text-70, var(--text-80));
  color: var(--ar-text-3);
  letter-spacing: var(--tracking-wide);
}

.research-artifacts-license {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  margin-top: var(--sp-2);
  font-size: var(--text-70, var(--text-80));
  color: var(--ar-text-3);
  line-height: var(--lh-16, var(--lh-18));
}

.research-artifacts-license svg {
  flex-shrink: 0;
  width: 11px;
  height: 11px;
}

.research-artifacts-license a {
  color: var(--ar-text-3);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.research-artifacts-license a:hover {
  color: var(--ar-text);
}

@media (max-width: 720px) {
  .research-artifact-grid {
    grid-template-columns: 1fr;
  }
  .research-artifacts-callout {
    padding: var(--sp-4);
  }
}

/* ── 8d-ii. Proof Packet ───────────────────────── */
.proof-packet {
  grid-column: 2;
  min-width: 0;
  margin-top: var(--sp-8);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--ar-border);
}

.proof-packet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-4);
}

.proof-packet-title {
  font-family: var(--font-mono);
  font-feature-settings: var(--features-mono);
  font-size: var(--text-90);
  font-weight: var(--weight-medium);
  color: var(--ar-text-3);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.proof-packet-title i {
  font-size: var(--icon-size-sm);
}

.proof-packet-copy {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  border: 1px solid var(--ar-border);
  color: var(--ar-text-3);
  font-size: var(--icon-size-sm);
  cursor: pointer;
  transition:
    color var(--duration-snap),
    border-color var(--duration-snap);
}

.proof-packet-copy:hover {
  color: var(--ar-text);
  border-color: var(--ar-text-3);
}

.proof-packet-copy.is-copied {
  color: var(--color-green-700);
  border-color: var(--color-green-700);
}

.proof-packet-code-wrap {
  position: relative;
  max-height: 96px;
  overflow: hidden;
  transition: max-height 300ms cubic-bezier(0.2, 0, 0, 1);
}

.proof-packet-code-wrap.is-expanded {
  max-height: 5000px;
}

.proof-packet-code {
  font-family: var(--font-mono);
  font-feature-settings: var(--features-mono);
  font-size: var(--text-80);
  line-height: var(--lh-20);
  color: var(--ar-code-text);
  background: var(--ar-code-bg);
  border: 1px solid var(--ar-code-border);
  border-radius: var(--radius-md);
  padding: var(--sp-4);
  margin: 0;
  overflow-x: auto;
  white-space: pre;
  tab-size: 2;
}

.proof-packet-fade {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 48px;
  background: linear-gradient(to top, var(--ar-code-bg), transparent);
  pointer-events: none;
  transition: opacity 300ms cubic-bezier(0.2, 0, 0, 1);
}

.proof-packet-code-wrap.is-expanded .proof-packet-fade {
  opacity: 0;
}

.proof-packet-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: var(--sp-3);
  padding: var(--sp-2) 0;
  font-family: var(--font-mono);
  font-feature-settings: var(--features-mono);
  font-size: var(--text-80);
  font-weight: var(--weight-medium);
  color: var(--ar-text-3);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  background: transparent;
  border: 1px solid var(--ar-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition:
    color var(--duration-snap),
    border-color var(--duration-snap);
}

.proof-packet-toggle:hover {
  color: var(--ar-text-2);
  border-color: var(--ar-text-3);
}

/* ── 8e. TOC Sidebar (Left) ─────────────────────── */

/* Reset sc.css `nav {}` global rule bleeding into TOC sidebar */
.toc-sidebar .toc-nav {
  background-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  position: static;
  top: auto;
  z-index: auto;
  height: auto;
  padding: 0;
  border-bottom: none;
}

.toc-sidebar {
  position: sticky;
  top: calc(var(--nav-height) + var(--sp-8));
  max-height: calc(100vh - var(--nav-height) - var(--sp-16));
  overflow-y: auto;
  scrollbar-width: none;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.toc-sidebar::-webkit-scrollbar {
  display: none;
}

.toc-label {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--text-80);
  font-weight: var(--weight-semibold);
  color: var(--ar-text-3);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  margin-bottom: var(--sp-3);
}

.toc-label i {
  font-size: var(--icon-size-sm);
}

.toc-nav {
  display: flex;
  flex-direction: column;
  gap: var(--sp-05);
  border-left: 1px solid var(--ar-border);
  padding: 0;
}

.toc-link {
  display: block;
  font-size: var(--text-90);
  font-weight: var(--weight-regular);
  line-height: var(--lh-20);
  color: var(--ar-text-3);
  padding: var(--sp-1) var(--sp-3);
  border-left: 2px solid transparent;
  margin-left: -1px;
  transition:
    color 0.15s,
    border-color 0.15s;
  text-decoration: none;
}

.toc-link:hover {
  color: var(--ar-text-2);
}

.toc-link.is-active {
  color: var(--ar-text);
  border-left-color: var(--ar-text);
  font-weight: var(--weight-medium);
}

.toc-link--h3 {
  font-size: var(--text-80);
}

/* ── 8f. Right Sidebar — Editor's Picks ─────────── */
.article-right-sidebar {
  grid-column: 3;
  grid-row: 1 / span 4;
  position: sticky;
  top: calc(var(--nav-height) + var(--sp-8));
  max-height: calc(100vh - var(--nav-height) - var(--sp-16));
  overflow-y: auto;
  scrollbar-width: none;
}

.article-right-sidebar::-webkit-scrollbar {
  display: none;
}

.sidebar-label {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--text-80);
  font-weight: var(--weight-semibold);
  color: var(--ar-text-3);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  margin-bottom: var(--sp-4);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--ar-border);
}

.sidebar-label i {
  font-size: var(--icon-size-xs);
}

.sidebar-picks {
  display: flex;
  flex-direction: column;
}

/* Compact horizontal card: small thumb left, title right */
.sidebar-pick-card {
  display: flex;
  gap: var(--sp-3);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--ar-border-2);
  text-decoration: none;
  color: inherit;
  transition: opacity 0.15s;
}

.sidebar-pick-card:last-child {
  border-bottom: none;
}
.sidebar-pick-card:hover {
  opacity: 0.72;
}

.sidebar-pick-image {
  width: 72px;
  height: 48px;
  border-radius: var(--radius-md);
  overflow: hidden;
  flex-shrink: 0;
  border: 1px solid var(--ar-border);
  background: var(--ar-bg-inset);
}

.sidebar-pick-image .post-card-placeholder {
  width: 100%;
  height: 100%;
  background: var(--ar-bg-inset);
  border-radius: 0;
}

.sidebar-pick-image .post-card-placeholder i {
  font-size: var(--icon-size-sm);
  color: var(--ar-border);
}

.sidebar-pick-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sidebar-pick-body {
  flex: 1;
  min-width: 0;
}

.sidebar-pick-cat {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: var(--text-80);
  font-weight: var(--weight-semibold);
  color: var(--ar-text-2);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  margin-bottom: var(--sp-1);
}

/* Color-coded icons for sidebar picks — scoped to card element */
.sidebar-pick-card[data-category="data-studies"] .sidebar-pick-cat svg {
  color: var(--color-blue-300);
}
.sidebar-pick-card[data-category="shopping-guides"] .sidebar-pick-cat svg {
  color: var(--color-amber-300);
}
.sidebar-pick-card[data-category="methodology"] .sidebar-pick-cat svg {
  color: var(--color-violet-400);
}
.sidebar-pick-card[data-category="product-updates"] .sidebar-pick-cat svg {
  color: var(--color-green-600);
}

/* Color-coded icon for the article header category tag */
[data-category="shopping-guides"] .article-cat-tag svg {
  color: var(--color-amber-300);
}
[data-category="data-studies"] .article-cat-tag svg {
  color: var(--color-blue-300);
}
[data-category="methodology"] .article-cat-tag svg {
  color: var(--color-violet-400);
}
[data-category="product-updates"] .article-cat-tag svg {
  color: var(--color-green-600);
}

.sidebar-pick-title {
  font-size: var(--text-90);
  font-weight: var(--weight-medium);
  line-height: var(--lh-20);
  color: var(--ar-text-2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.15s;
}

.sidebar-pick-card:hover .sidebar-pick-title {
  color: var(--ar-text);
}

/* ── 8e2. Cite-This Mobile Panel Row (≤1200px only) ───────────────────────────
   David's Option A: at viewports where the right rail hides, the same
   cite card (label + blurb + CTA) reappears in-flow between the
   byline/share row and the Jump-to-section accordion. The wrapper holds
   the horizontal gutter (matches .toc-mobile); the card inside is the
   same .article-cite-panel used in the desktop sidebar. Hidden by
   default — ≤1200px breakpoint flips display:block on. */

.article-cite-panel-row {
  display: none;
  margin: var(--sp-4) var(--sp-6) var(--sp-2);
}

/* When the panel sits in the mobile row, the wrapper owns the bottom
   margin so the panel itself doesn't add an extra gap. */
.article-cite-panel--mobile {
  margin-bottom: 0;
}

/* ── 8f. Cite-This Panel + Modal ──────────────────────────────────────────────
   Mirrors the spec mockup at
   shared/artifacts/2026-05-05_cite-this-spec/mockups/sc.html.

   Three deliberately-different block treatments:
     - Canonical stat   → light green callout (the journalist's hook)
     - Attribution      → light gray callout (paste-ready prose)
     - Methodology + press → meta-list (live links, no Copy button)

   Sticky behavior + ≤1200px hide is inherited from .article-right-sidebar
   (locked decision #11: panel sits ABOVE Featured inside the same <aside>).
   ────────────────────────────────────────────────────────────────────────── */

.article-cite-panel {
  margin-bottom: var(--sp-6);
  padding: var(--sp-4);
  /* Use bg-layer (not bg) so the panel sits as a card on the article-region
     surface — at parity in light mode and visibly differentiated in dark
     mode where the article-region background is pure black. */
  background: var(--ar-bg-layer);
  border: 1px solid var(--ar-border);
  border-radius: 0.75rem; /* 12px — matches mockup */
}

/* The panel re-uses .sidebar-label for typography parity with the Featured
   block sitting below it. Override the bottom border + spacing — Cite panel
   cards have an internal blurb that takes care of vertical rhythm. */
.article-cite-panel .sidebar-label.article-cite-panel-label {
  border-bottom: 0;
  padding-bottom: 0;
  margin-bottom: var(--sp-3);
}

.cite-panel-blurb {
  font-size: var(--text-90);
  line-height: 1.5;
  color: var(--ar-text-2);
  margin: 0 0 var(--sp-4);
}

.cite-panel-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  /* Tighter than the mockup's 10/16 because the SC blog runs at a larger
     base font than the mockup; matched padding read as too chunky in QA. */
  padding: var(--sp-2) var(--sp-3);
  font-family: var(--font-sans);
  font-size: var(--text-90);
  font-weight: var(--weight-semibold);
  color: var(--ar-bg);
  background: var(--ar-text);
  border: 0;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--duration-snap);
}

.cite-panel-cta:hover {
  background: var(--ar-text-2);
}

.cite-panel-cta:focus-visible {
  outline: 2px solid var(--ar-text);
  outline-offset: 2px;
}

/* ── Modal ───────────────────────────────────────────────────────────────── */

.cite-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: var(--sp-20) var(--sp-6);
  background: rgba(15, 15, 20, 0.6);
  overflow-y: auto;
}

.cite-modal[hidden] {
  display: none;
}

.cite-modal-content {
  width: 100%;
  max-width: 560px;
  background: var(--ar-bg);
  color: var(--ar-text);
  border: 1px solid var(--ar-border);
  border-radius: 0.75rem; /* 12px — matches mockup */
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
  overflow: hidden;
}

.cite-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-4) var(--sp-6);
  border-bottom: 1px solid var(--ar-border);
}

.cite-modal-title {
  font-size: var(--text-90);
  font-weight: var(--weight-semibold);
  color: var(--ar-text);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.cite-modal-close {
  background: transparent;
  border: 0;
  color: var(--ar-text-3);
  font-size: 1.375rem; /* 22px */
  line-height: 1;
  padding: var(--sp-1) var(--sp-2);
  cursor: pointer;
  transition: color var(--duration-snap);
}

.cite-modal-close:hover {
  color: var(--ar-text);
}

.cite-modal-close:focus-visible {
  outline: 2px solid var(--ar-text);
  outline-offset: 2px;
}

.cite-modal-body {
  padding: var(--sp-2) var(--sp-6) var(--sp-6);
}

.cite-block {
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--ar-border-2);
}

.cite-block:last-child {
  border-bottom: 0;
}

.cite-block-header {
  margin-bottom: var(--sp-3);
}

.cite-block-label {
  font-size: var(--text-80);
  font-weight: var(--weight-semibold);
  color: var(--ar-text-3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Stat callout — the journalist's hook. Subtle green tint signals "this is
   the quotable, headline-ready number" without screaming. Stays paired with
   SC Green family per brand axiom 2.2 / 4.4 (success / reward family).
   Theme-aware: light mode uses the mockup's pale-green card, dark mode
   shifts to a tinted dark surface with brand-accent text so the stat still
   reads green without the chalk-on-coal contrast bug. */
.stat-callout {
  margin: 0;
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--text-100);
  line-height: 1.5;
  font-weight: var(--weight-medium);
  /* Brand BLUEPRINT axiom 2.2 (60/30/10) + 4.4 (SC Green = sacred for
     success / reward). The canonical-stat callout is the journalist's
     reward — pulled from the SC Green family using the project's
     --color-green-* ramp instead of off-palette Tailwind hexes. */
  color: var(--color-green-900);
  background: var(--color-green-25);
  border: 1px solid rgba(3, 255, 136, 0.32);
  border-radius: var(--radius-md);
}

html[data-theme="dark"] .stat-callout {
  color: var(--color-green-300);
  background: rgba(3, 255, 136, 0.08);
  border-color: rgba(3, 255, 136, 0.32);
}

/* Attribution callout — neutral prose card. Paste this verbatim. */
.attribution-text {
  margin: 0;
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--text-90);
  line-height: 1.6;
  color: var(--ar-text);
  background: var(--ar-bg-layer);
  border: 1px solid var(--ar-border);
  border-radius: var(--radius-md);
}

/* Methodology + press list. Two rows: label left, link right. No Copy button
   — both fields are live links, copying defeats the purpose. */
.cite-block .meta-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.cite-block .meta-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--text-90);
  padding: var(--sp-2) var(--sp-3);
  /* Use bg-layer (lightest step in dark mode, slightly off-white in light
     mode) so each row reads as a card against the modal body. bg-inset is
     too close to bg in dark mode and the rows disappeared. */
  background: var(--ar-bg-layer);
  border-radius: var(--radius-sm);
}

.cite-block .meta-list span:first-child {
  color: var(--ar-text-3);
}

.cite-block .meta-list a {
  /* Brand BLUEPRINT axiom 4.4: SC Green for action affordance. green-700
     keeps WCAG-AA contrast on light bg (4.4:1 on #fdfcfc); dark mode
     overrides below to the sacred SC Green where the contrast inverts. */
  color: var(--color-green-700);
  text-decoration: none;
  font-weight: var(--weight-medium);
}

html[data-theme="dark"] .cite-block .meta-list a {
  color: var(--color-green-300);
}

.cite-block .meta-list a:hover {
  text-decoration: underline;
}

/* Copy button (per-block, format-specific labels). Below each block —
   read-first, action-second (locked decision #12). Tighter than the spec
   mockup's 6/14 because the SC blog scale renders that as too tall. */
.cite-block-copy {
  display: inline-block;
  margin-top: var(--sp-3);
  padding: var(--sp-1) var(--sp-3);
  font-size: var(--text-80);
  font-weight: var(--weight-semibold);
  color: var(--ar-text-2);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: transparent;
  border: 1px solid var(--ar-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition:
    color var(--duration-snap),
    border-color var(--duration-snap);
}

.cite-block-copy:hover {
  color: var(--ar-text);
  border-color: var(--ar-text);
}

.cite-block-copy:focus-visible {
  outline: 2px solid var(--ar-text);
  outline-offset: 2px;
}

/* Brand BLUEPRINT axiom 4.4: SC Green RESERVED for success / reward
   states. Copy success is a textbook fit — pulled from the project's
   --color-green-* ramp in light mode (green-700 keeps WCAG-AA contrast
   on light bg) and the sacred SC Green in dark mode. */
.cite-block-copy.is-copied {
  color: var(--color-green-700);
  border-color: var(--color-green-700);
}

html[data-theme="dark"] .cite-block-copy.is-copied {
  color: var(--color-green-300);
  border-color: var(--color-green-300);
}

/* Focus outline picks up SC Green only on dark backgrounds, where the
   brand-accent green delivers strong contrast (#03ff88 on #000 ≈ 16:1).
   Light mode keeps --ar-text so the outline stays WCAG-AA visible
   (council review flagged green-on-light at ~1.3:1). */
html[data-theme="dark"] .cite-panel-cta:focus-visible,
html[data-theme="dark"] .cite-modal-close:focus-visible,
html[data-theme="dark"] .cite-block-copy:focus-visible {
  outline-color: var(--color-green-300);
}

@media (prefers-reduced-motion: reduce) {
  .cite-panel-cta,
  .cite-modal-close,
  .cite-block-copy {
    transition-duration: 0s;
  }
}

@media (max-width: 640px) {
  .cite-modal {
    padding: var(--sp-12) var(--sp-3);
  }
  .cite-modal-header {
    padding: var(--sp-3) var(--sp-4);
  }
  .cite-modal-body {
    padding: var(--sp-2) var(--sp-4) var(--sp-4);
  }
}

/* =============================================
   9. RESPONSIVE BREAKPOINTS
   Mobile-first reading experience. Most blog traffic is mobile.
   ============================================= */

/* ── 1200px: drop right sidebar ──────────────── */
@media (max-width: 1200px) {
  .article-body-inner {
    grid-template-columns: 200px 1fr;
  }

  .article-right-sidebar {
    display: none;
  }

  /* Mobile cite panel lights up exactly when the right rail hides.
     Same card content as the desktop sidebar — wrapper handles the
     horizontal gutter (matches .toc-mobile). */
  .article-cite-panel-row {
    display: block;
  }

  /* When the article has a cite panel on mobile, drop the header's
     bottom padding and let the panel's own top margin govern the gap.
     Wrapper top margin zeroes out so the panel's --sp-6 is the single
     authoritative spacer between header and panel. */
  .article-header:has(+ .article-cite-panel-row) {
    padding-bottom: 0;
  }

  .article-cite-panel-row {
    margin-top: 0;
  }

  .article-cite-panel-row .article-cite-panel--mobile {
    margin-top: var(--sp-6);
  }
}

/* ── 1024px: tablet — collapse article to 1-col, show mobile TOC */
@media (max-width: 1024px) {
  .post-grid--3 {
    grid-template-columns: 1fr 1fr;
  }

  .article-header-inner {
    flex-direction: column;
    gap: var(--sp-4);
  }

  .article-header-inner > .article-lead-image {
    order: -1;
    aspect-ratio: 16 / 9;
    height: auto;
    max-height: 360px;
  }

  .article-body-inner {
    grid-template-columns: 1fr;
  }

  .article-body-inner > .article-prose,
  .article-body-inner > .proof-packet,
  .article-body-inner > .author-bio,
  .article-body-inner > .contributors-section,
  .article-body-inner > .article-bottom-cta {
    grid-column: 1;
  }

  .toc-sidebar {
    display: none;
  }
  .toc-mobile {
    display: block;
  }

  .article-hero-inner {
    max-width: 720px;
  }

  /* Hero card stacks on tablet */
  .hero-card {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .hero-card-image {
    aspect-ratio: 16 / 9;
  }

  .hero-card-image .post-card-placeholder {
    min-height: 0;
    height: 100%;
  }
}

/* ── 768px: large mobile — single column everything ─ */
@media (max-width: 768px) {
  /* Homepage grids → single column */
  .post-grid--2,
  .post-grid--3 {
    grid-template-columns: 1fr;
  }

  .blog-featured {
    padding: var(--sp-8) 0 var(--sp-6);
  }
  .blog-section {
    padding: var(--sp-8) 0;
  }

  .hero-card-body {
    padding: var(--sp-6) var(--sp-4) var(--sp-4);
  }

  .hero-card-title {
    font-size: var(--text-400);
    line-height: var(--lh-32);
  }

  .hero-card-deck {
    display: none;
  } /* Remove deck on small screens — title is enough */

  /* Article header — stack author + tools vertically */
  .article-title {
    font-size: var(--text-400);
    line-height: var(--lh-32);
  }

  .article-deck {
    font-size: var(--text-100);
    line-height: var(--lh-24);
    margin-bottom: var(--sp-6);
  }

  .article-meta-row {
    flex-direction: column;
    align-items: flex-start;
    row-gap: var(--sp-4);
  }

  .article-tools {
    margin-left: 0;
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: var(--sp-2);
  }

  /* Article prose — comfortable mobile reading */
  .article-prose {
    font-size: var(--text-100);
    line-height: var(--lh-28); /* slightly looser for mobile */
  }

  .article-prose h2 {
    font-size: var(--text-400);
    line-height: var(--lh-32);
  }

  .article-prose h3 {
    font-size: var(--text-200);
    line-height: var(--lh-28);
  }

  /* Tables scroll horizontally on mobile */
  .article-prose table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Callout — reduce padding */
  .article-callout {
    padding: var(--sp-4) var(--sp-4);
  }

  /* Article body */
  .article-body {
    padding-bottom: var(--sp-16);
  }

  /* Mobile TOC margin */
  .toc-mobile {
    margin: 0 var(--sp-4) var(--sp-4);
  }
}

/* ── 480px: small mobile ──────────────────────── */
@media (max-width: 480px) {
  /* Global container padding tighter on small screens */
  .container {
    padding-left: var(--sp-4);
    padding-right: var(--sp-4);
  }

  .article-header-inner,
  .article-hero-inner,
  .article-body-inner {
    padding-left: var(--sp-4);
    padding-right: var(--sp-4);
  }

  .article-title {
    font-size: var(--text-400);
    line-height: var(--lh-32);
  }

  /* Author bio stacks on very small screens */
  .author-bio {
    flex-direction: column;
    gap: var(--sp-3);
  }
}

@media (max-width: 420px) {
  .article-authors {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-4);
  }
}

/* =============================================
   10. BLOG HOMEPAGE — ADDITIONAL SECTIONS
   Translated from CEO mockup structure:
   tagline hero → filter → grids → newsletter → explore
   ============================================= */

/* ── 10a. Blog Tagline Hero ──────────────────── */
.blog-tagline-hero {
  padding: var(--sp-8) 0 var(--sp-4);
}

.blog-tagline-eyebrow {
  font-size: var(--text-80);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--text-tertiary);
  margin-bottom: var(--sp-4);
}

.blog-tagline-title {
  font-size: var(--text-600);
  font-weight: var(--weight-semibold);
  line-height: var(--lh-48);
  letter-spacing: var(--tracking-tight-2);
  color: var(--color-gray-50);
  margin-bottom: var(--sp-3);
  max-width: 560px;
}

.blog-tagline-desc {
  font-size: var(--text-200);
  line-height: var(--lh-28);
  color: var(--color-gray-500);
  max-width: 480px;
}

/* ── 10b. Category Filter Bar ────────────────── */
/*
   Pill style — matches CEO reference design.
   Active: brand green border + brand green text.
   Inactive: gray border + gray text.
   Full pill radius (radius-full) on every button.
*/
.category-filter-bar {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  padding-top: var(--sp-6);
  margin-top: var(--sp-6);
  border-top: 1px solid var(--color-gray-925);
}

.filter-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--radius-full);
  font-size: var(--text-90);
  font-weight: var(--weight-medium);
  color: var(--color-gray-500);
  background: transparent;
  border: 1px solid var(--color-gray-800);
  cursor: pointer;
  transition:
    color 0.15s,
    border-color 0.15s;
  white-space: nowrap;
}

.filter-btn i {
  font-size: var(--icon-size-xs);
  flex-shrink: 0;
}

.filter-btn:hover {
  color: var(--color-gray-300);
  border-color: var(--color-gray-600);
}

/* Active state — brand green border + text (matching CEO reference) */
.filter-btn.is-active {
  color: var(--color-brand-green);
  border-color: var(--color-brand-green);
  font-weight: var(--weight-semibold);
}

/* Hide filtered-out cards and empty sections */
.post-card.card-hidden {
  display: none;
}
.blog-section.section-empty {
  display: none;
}

/* Filter loading / empty states */
.blog-loading {
  grid-column: 1 / -1;
  padding: var(--sp-8) 0;
  color: var(--color-gray-500);
  font-size: var(--text-sm);
}
.blog-empty {
  grid-column: 1 / -1;
  padding: var(--sp-8) 0;
  color: var(--color-gray-500);
  font-size: var(--text-sm);
}

/* ── 10c. Newsletter CTA ─────────────────────── */
.blog-newsletter {
  padding: var(--sp-16) 0;
  border-top: 1px solid var(--color-gray-925);
}

.newsletter-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-8);
  flex-wrap: wrap;
}

.newsletter-copy {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  max-width: 440px;
}

.newsletter-eyebrow {
  font-size: var(--text-80);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--text-tertiary);
}

.newsletter-heading {
  font-size: var(--text-400);
  font-weight: var(--weight-semibold);
  line-height: var(--lh-32);
  letter-spacing: var(--tracking-normal);
  color: var(--color-gray-100);
}

.newsletter-subtext {
  font-size: var(--text-90);
  color: var(--color-gray-600);
  line-height: var(--lh-20);
  margin-top: var(--sp-1);
}

.newsletter-form {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

.newsletter-input {
  height: 40px;
  padding: 0 var(--sp-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-gray-800);
  background: var(--color-gray-950);
  color: var(--color-gray-100);
  font-size: var(--text-90);
  font-family: var(--font-sans);
  width: 240px;
  min-width: 0;
  flex: 1;
  outline: none;
  transition: border-color 0.15s;
}

.newsletter-input::placeholder {
  color: var(--color-gray-600);
}
.newsletter-input:focus {
  border-color: var(--color-gray-700);
}

.newsletter-submit {
  height: 40px;
  padding: 0 var(--sp-4);
  border-radius: var(--radius-md);
  background: var(--color-brand-green);
  color: var(--color-gray-1000);
  font-size: var(--text-90);
  font-weight: var(--weight-semibold);
  font-family: var(--font-sans);
  border: none;
  cursor: pointer;
  transition: opacity 0.15s;
  white-space: nowrap;
  flex-shrink: 0;
}

.newsletter-submit:hover {
  opacity: 0.88;
}

/* ── 10d. Go Deeper / Understand the Engine ──── */
.blog-go-deeper {
  padding: var(--sp-16) 0 var(--sp-20);
  border-top: 1px solid var(--color-gray-925);
}

.go-deeper-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--text-80);
  font-weight: var(--weight-semibold);
  color: var(--color-green-300);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  margin-bottom: var(--sp-4);
}

.go-deeper-eyebrow i {
  font-size: var(--icon-size-xs);
}

.go-deeper-headline {
  font-size: var(--text-700);
  font-weight: var(--weight-medium);
  color: var(--color-gray-50);
  line-height: var(--lh-56);
  letter-spacing: var(--tracking-tight-2);
  margin-bottom: var(--sp-8);
  max-width: 600px;
}

.go-deeper-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-4);
}

.go-deeper-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-6);
  border: 1px solid var(--color-gray-900);
  border-radius: var(--radius-xl);
  background: var(--color-gray-975);
  text-decoration: none;
  color: inherit;
  transition:
    border-color 0.2s,
    background 0.2s;
}

.go-deeper-card:hover {
  border-color: var(--color-gray-800);
  background: var(--color-gray-950);
}

.go-deeper-card-label {
  font-size: var(--text-80);
  font-weight: var(--weight-semibold);
  color: var(--color-green-300);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  margin-bottom: var(--sp-1);
}

.go-deeper-card-title {
  font-size: var(--text-400);
  font-weight: var(--weight-semibold);
  color: var(--color-gray-50);
  line-height: var(--lh-32);
  transition: color 0.15s;
}

.go-deeper-card-desc {
  font-size: var(--text-90);
  color: var(--color-gray-500);
  line-height: var(--lh-20);
  flex: 1;
}

.go-deeper-card-link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: var(--text-90);
  font-weight: var(--weight-medium);
  color: var(--color-gray-300);
  margin-top: var(--sp-2);
  transition: color 0.15s;
}

.go-deeper-card:hover .go-deeper-card-link {
  color: var(--color-gray-50);
}
.go-deeper-card-link i {
  font-size: var(--icon-size-xs);
  transition: transform 0.15s;
}
.go-deeper-card:hover .go-deeper-card-link i {
  transform: translateX(3px);
}

/* =============================================
   11. ARTICLE PAGE — BOTTOM CTA
   Translated from CEO mockup: article ends with
   a newsletter/product signup section.
   ============================================= */
.article-bottom-cta {
  grid-column: 2;
  margin-top: var(--sp-8);
  padding: var(--sp-12) var(--sp-8);
  border: 1px solid var(--ar-border);
  border-radius: var(--radius-xl);
  background: var(--ar-bg-layer);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-8);
  flex-wrap: wrap;
}

.article-bottom-cta-copy {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  flex: 1;
}

.article-bottom-cta-eyebrow {
  font-size: var(--text-80);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--ar-text-3);
}

.article-bottom-cta-title {
  font-size: var(--text-400);
  font-weight: var(--weight-semibold);
  line-height: var(--lh-32);
  letter-spacing: var(--tracking-normal);
  color: var(--ar-text);
}

.article-bottom-cta-desc {
  font-size: var(--text-90);
  color: var(--ar-text-2);
  line-height: var(--lh-20);
}

.article-bottom-cta-actions {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  flex-shrink: 0;
  width: 100%;
}

.article-cta-form {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

.article-cta-input {
  height: 40px;
  padding: 0 var(--sp-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--ar-border);
  background: var(--ar-bg-inset);
  color: var(--ar-text);
  font-size: var(--text-90);
  font-family: var(--font-sans);
  width: 220px;
  min-width: 0;
  flex: 1;
  outline: none;
  transition: border-color 0.15s;
}

.article-cta-input::placeholder {
  color: var(--ar-text-3);
}
.article-cta-input:focus {
  border-color: var(--ar-text-3);
}

.article-cta-btn {
  height: 40px;
  padding: 0 var(--sp-4);
  border-radius: var(--radius-md);
  background: var(--color-brand-green);
  color: var(--color-gray-1000);
  font-size: var(--text-90);
  font-weight: var(--weight-semibold);
  font-family: var(--font-sans);
  border: none;
  cursor: pointer;
  transition: opacity 0.15s;
  white-space: nowrap;
  flex-shrink: 0;
}

.article-cta-btn:hover {
  opacity: 0.88;
}

.article-cta-ext-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  height: 40px;
  padding: 0 var(--sp-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--ar-border);
  background: transparent;
  color: var(--ar-text-2);
  font-size: var(--text-90);
  font-weight: var(--weight-medium);
  text-decoration: none;
  transition:
    color 0.15s,
    border-color 0.15s;
}

.article-cta-ext-link:hover {
  color: var(--ar-text);
  border-color: var(--ar-text-3);
}

.article-cta-ext-link i {
  font-size: var(--icon-size-sm);
}

/* =============================================
   12. RESPONSIVE — New sections
   ============================================= */
@media (max-width: 768px) {
  .blog-tagline-hero {
    padding: var(--sp-8) 0 var(--sp-4);
  }

  .blog-tagline-title {
    font-size: var(--text-400);
    line-height: var(--lh-32);
  }

  .blog-tagline-desc {
    font-size: var(--text-90);
  }

  .newsletter-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-6);
  }

  .newsletter-form {
    flex-wrap: wrap;
    width: 100%;
  }

  .newsletter-input {
    width: 100%;
    flex: 1;
    min-width: 160px;
  }

  .go-deeper-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-3);
  }

  .article-bottom-cta {
    flex-direction: column;
    padding: var(--sp-8) var(--sp-6);
    gap: var(--sp-6);
  }

  .article-bottom-cta-copy {
    max-width: 100%;
  }

  .article-cta-form {
    flex-wrap: wrap;
    width: 100%;
  }

  .article-cta-input {
    width: 100%;
    flex: 1;
    min-width: 140px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   FOOTER — pyo-host footer.html partial (DS 2.0)
   Mirrors the SHARED_CHROME_CSS footer block in build-sc-design-system.ts.
   Uses DS 2.0 tokens defined in :root at the top of this file.
   ═══════════════════════════════════════════════════════════════════════ */

footer {
  background: var(--color-gray-1000);
  border-top: 1px solid var(--color-gray-850);
  padding: var(--sp-16) 0 0;
  color: var(--text-tertiary);
  font-size: var(--text-90);
}

.footer-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--sp-6) var(--sp-12);
  display: grid;
  grid-template-columns: 1.5fr repeat(4, 1fr);
  gap: var(--sp-8);
}

/* Brand column */
.footer-brand-col {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.footer-logo {
  color: var(--text-primary);
  font-size: var(--text-100);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.02em;
}

.footer-brand-desc {
  font-size: var(--text-90);
  color: var(--text-muted);
  line-height: 1.6;
  max-width: 280px;
}

/* Link column titles — monospace uppercase on desktop, accordion button on mobile */
.footer-col-title {
  width: 100%;
  display: block;
  text-align: left;
  background: none;
  border: none;
  font-family: var(--font-mono);
  font-feature-settings: var(--features-mono);
  font-size: var(--text-80);
  color: var(--text-disabled);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  cursor: default;
  padding: 0;
  margin-bottom: var(--sp-4);
}

/* Link lists */
.footer-col-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.footer-col-links a {
  color: var(--text-muted);
  font-size: var(--text-90);
  line-height: var(--lh-24);
  transition: color var(--duration-snap);
  text-decoration: none;
  display: block;
  margin-bottom: 0;
}

.footer-col-links a:hover {
  color: var(--text-primary);
}

/* Social icons (inside brand col) */
.footer-social-icons {
  list-style: none;
  display: flex;
  gap: var(--sp-05);
  flex-wrap: wrap;
  padding: 0;
  margin: 0;
}

.footer-social-icons li {
  display: flex;
}

.footer-social-icons a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  color: var(--text-muted);
  transition:
    color var(--duration-snap),
    background var(--duration-snap);
}

.footer-social-icons a:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.05);
}

.footer-social-icons svg {
  width: 18px;
  height: 18px;
}

/* Store badges */
.footer-store-badges {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.store-badge-link {
  display: inline-block;
}

/* Extension badge is desktop-only — no-JS fallback via CSS */
@media (max-width: 767px) {
  .store-badge-desktop-only {
    display: none;
  }
}

/* Product.ai attribution section */
.footer-pai-section {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--sp-8) var(--sp-6);
  border-top: 1px solid var(--color-gray-850);
  display: flex;
  align-items: center;
  gap: var(--sp-8);
}

.footer-pai-lockup {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
  transition: opacity var(--duration-snap);
}

.footer-pai-lockup:hover {
  opacity: 0.7;
}

.footer-pai-diamond {
  width: 20px;
  height: 20px;
  background: #8b5cf6;
  transform: rotate(45deg);
  border-radius: 3px;
  flex-shrink: 0;
  display: block;
}

.footer-pai-text {
  flex: 1;
  min-width: 0;
}

.footer-pai-label {
  font-weight: var(--weight-medium);
  font-size: var(--text-100);
  color: var(--text-secondary);
  margin-bottom: 2px;
}

.footer-pai-desc {
  font-size: var(--text-90);
  color: var(--text-muted);
  line-height: 1.5;
}

.footer-pai-link {
  font-family: var(--font-mono);
  font-feature-settings: var(--features-mono);
  font-size: var(--text-80);
  color: var(--text-brand-secondary);
  text-decoration: none;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
  transition: color var(--duration-snap);
}

.footer-pai-link:hover {
  color: var(--text-primary);
}

/* Legal bar */
.footer-legal {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--sp-6) var(--sp-6);
  border-top: 1px solid var(--color-gray-850);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
}

.footer-legal-copy {
  font-size: var(--text-80);
  color: var(--text-disabled);
}

.footer-legal-copy a {
  color: var(--text-disabled);
  text-decoration: none;
  transition: color var(--duration-snap);
}

.footer-legal-copy a:hover {
  color: var(--text-primary);
}

.footer-legal-links {
  list-style: none;
  display: flex;
  gap: var(--sp-3);
  align-items: center;
  font-size: var(--text-80);
}

.footer-legal-links .sep {
  color: var(--text-disabled);
}

.footer-legal-links a {
  color: var(--text-disabled);
  text-decoration: none;
  transition: color var(--duration-snap);
}

.footer-legal-links a:hover {
  color: var(--text-primary);
}

/* Focus styles for keyboard navigation */
footer a:focus-visible,
footer button:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.8);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Responsive — tablet */
@media (max-width: 1023px) {
  .footer-inner {
    grid-template-columns: repeat(3, 1fr);
  }
  .footer-brand-col {
    grid-column: 1 / -1;
  }
  .footer-brand-desc {
    max-width: none;
  }
}

/* Responsive — mobile: 2-col grid + accordion for link cols */
@media (max-width: 767px) {
  .footer-inner {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-4);
    padding-bottom: var(--sp-8);
  }
  .footer-brand-col {
    grid-column: 1 / -1;
  }
  .footer-brand-desc {
    max-width: none;
  }
  .footer-col {
    border-top: 1px solid var(--color-gray-850);
    padding-top: var(--sp-1);
  }
  .footer-col-title {
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--sp-2) 0;
    margin-bottom: 0;
  }
  .footer-col-title::after {
    content: "▾";
    font-size: 0.7rem;
    font-family: inherit;
    font-feature-settings: normal;
    color: var(--text-muted);
    transition: transform 0.15s ease;
    flex-shrink: 0;
  }
  .footer-col-title[aria-expanded="true"]::after {
    transform: rotate(180deg);
  }
  .footer-col-links {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.2s ease;
    gap: 0;
  }
  .footer-col-links.open {
    max-height: 600px;
    padding-top: var(--sp-2);
    padding-bottom: var(--sp-4);
    gap: var(--sp-2);
  }
  .footer-pai-section {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-4);
  }
  .footer-legal {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-3);
  }
}

/* =============================================
   IFRAME EMBEDS
   ============================================= */
.iframe-embed {
  width: 100%;
  margin: var(--sp-8, 2rem) 0;
}

.iframe-embed iframe {
  width: 100%;
  border: none;
  display: block;
}

/* =============================================
   COMMUNITY ACTIVITY MARQUEE (cam-*)
   Renders <community-activity-marquee /> tag output from generate-blog-assets.ts.
   Spacing scale matches simplycodes-web (1 unit = 1px).
   ============================================= */

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

.community-activity-marquee {
  overflow: hidden;
  margin: 2rem 0;
}

.cam-row {
  overflow: hidden;
}

.cam-row + .cam-row {
  margin-top: 8px;
}

/* animation-duration set inline per-row (31.6s / 35.3s) */
.cam-strip {
  display: flex;
  align-items: center;
  gap: 8px;
  width: max-content;
  will-change: transform;
  animation-name: cam-scroll;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.cam-item {
  display: flex;
  align-items: center;
  height: 52px;
  flex-shrink: 0;
}

/* 40×40 circle; badge overflows bottom by ~14px — overflow:visible on item */
.cam-avatar {
  position: relative;
  width: 40px;
  height: 40px;
  margin-right: 12px;
  flex-shrink: 0;
  align-self: flex-start;
}

.cam-person {
  display: block;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

/* merchant logo overlaid at bottom of avatar */
.cam-badge {
  position: absolute;
  bottom: -14px;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid #fff;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

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

/* speech bubble — rounded-16 everywhere except top-left (rounded-tl-none) */
.cam-bubble {
  display: flex;
  align-items: baseline;
  flex-wrap: nowrap;
  gap: 0;
  white-space: nowrap;
  background: #fff;
  border-radius: 16px;
  border-top-left-radius: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.05);
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  color: #111;
  flex-shrink: 0;
}

/* highlighted code pill — bg-green-extended-2 from simplycodes-web DS */
.cam-code {
  display: inline-block;
  background: #cfffdf;
  border-radius: 8px;
  padding: 2px 8px;
  font-weight: 600;
  color: #111;
}

@media (prefers-reduced-motion: reduce) {
  .cam-strip { animation: none; }
}

/* =============================================
   EXPLORE POPULAR MERCHANTS (epm-*)
   Renders <explore-popular-merchants /> tag output from generate-blog-assets.ts.
   ============================================= */

.explore-popular-merchants {
  margin: 2rem 0;
}

.epm-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.epm-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-gray-900, #18181b);
  margin: 0;
  line-height: 1.3;
}

.epm-scroll {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 4px;
}

.epm-scroll::-webkit-scrollbar {
  display: none;
}

.epm-card {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  width: 280px;
  background: #fff;
  border: 1px solid var(--color-gray-200, #e4e4e7);
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  scroll-snap-align: start;
  transition: box-shadow 0.15s, transform 0.15s;
}

.epm-card:hover {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
}

.epm-img-area {
  position: relative;
  width: 100%;
  height: 200px;
  background-size: cover;
  background-position: center;
  background-color: var(--color-gray-100, #f4f4f5);
}

.epm-logo-wrap {
  position: absolute;
  top: 12px;
  left: 12px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.epm-logo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.epm-content {
  padding: 12px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.epm-name {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-gray-900, #18181b);
  line-height: 1.3;
}

.epm-count {
  font-size: 0.875rem;
  color: var(--color-gray-500, #71717a);
}

/* =============================================
   COUPON REWARDS CARDS WIDGET
   ============================================= */

.coupon-rewards-cards {
  max-width: 480px;
  height: 173px;
  margin: 100px auto 200px;
  overflow: visible;
}

.crc-stage {
  position: relative;
  top: 35%;
  perspective: 1000px;
  transform-style: preserve-3d;
}

.crc-card {
  display: block;
  position: absolute;
  width: 100%;
  border-radius: 9px;
  border: 3px solid #000;
  box-shadow: 5px 5px 0 0 #000;
  will-change: transform, opacity;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  animation: crc-card-rotate 12s infinite ease-in-out;
}

@keyframes crc-card-rotate {
  0%, 20% {
    transform: var(--pos-1);
    opacity: var(--opacity-1);
    z-index: var(--z-1);
  }
  25%, 45% {
    transform: var(--pos-2);
    opacity: var(--opacity-2);
    z-index: var(--z-2);
  }
  50%, 70% {
    transform: var(--pos-3);
    opacity: var(--opacity-3);
    z-index: var(--z-3);
  }
  75%, 95% {
    transform: var(--pos-4);
    opacity: var(--opacity-4);
    z-index: var(--z-4);
  }
  100% {
    transform: var(--pos-1);
    opacity: var(--opacity-1);
    z-index: var(--z-1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .crc-card { animation: none; }
}

/* =============================================
   MEET THE CONTRIBUTORS
   ============================================= */

.contributors-section {
  grid-column: 2;
  padding-top: var(--sp-8);
  border-top: 1px solid var(--ar-border);
}

.contributors-heading {
  font-size: var(--text-400);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ar-text);
  margin-bottom: 1.5rem;
}

.contributors-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 1.25rem;
}

.contributor-card {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 0.75rem;
  cursor: pointer;
  background: var(--ar-bg-inset);
  outline-offset: 3px;
  -webkit-user-select: none;
  user-select: none;
}

.contributor-card:focus-visible {
  outline: 2px solid var(--color-brand-green);
}

.contributor-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.contributor-card:hover .contributor-card-img,
.contributor-card.is-expanded .contributor-card-img {
  transform: scale(1.04);
}

.contributor-card-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ar-bg-inset);
  color: var(--ar-text-3);
}

/* Name tag — bottom-left, fades out on hover/expanded */
.contributor-card-name-tag {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  transition: opacity 0.3s;
}

.contributor-card:hover .contributor-card-name-tag,
.contributor-card.is-expanded .contributor-card-name-tag {
  opacity: 0;
}

.contributor-card-name {
  display: inline-block;
  background: var(--color-gray-900);
  color: #fff;
  font-size: var(--text-90);
  font-weight: 700;
  padding: 0.375rem 0.75rem;
  line-height: 1.3;
}

.contributor-card-role {
  display: block;
  background: #000;
  color: rgba(255, 255, 255, 0.8);
  font-size: var(--text-80);
  padding: 0.25rem 0.75rem;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Hover/expanded overlay */
.contributor-card-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  opacity: 0;
  transition: opacity 0.3s;
  overflow-y: auto;
}

.contributor-card:hover .contributor-card-overlay,
.contributor-card.is-expanded .contributor-card-overlay {
  opacity: 1;
}

.contributor-overlay-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  flex-shrink: 0;
}

.contributor-overlay-avatar {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.contributor-overlay-socials {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.contributor-social-link {
  color: rgba(255, 255, 255, 0.85);
  display: flex;
  align-items: center;
  transition: color 0.15s;
}

.contributor-social-link:hover {
  color: #fff;
}

.contributor-overlay-title {
  font-size: var(--text-90);
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.4;
  flex-shrink: 0;
}

.contributor-overlay-bio {
  font-size: var(--text-80);
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.55;
  overflow-y: auto;
  flex: 1;
}
.contributor-overlay-bio a {
  text-decoration: underline;
}

@media (max-width: 767px) {
  .contributors-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.875rem;
  }

  .contributors-heading {
    font-size: var(--text-200);
  }
}

@media (prefers-reduced-motion: reduce) {
  .contributor-card-img { transition: none; }
  .contributor-card-name-tag { transition: none; }
  .contributor-card-overlay { transition: none; }
}

/* =============================================
   VIEW TRANSITIONS
   ============================================= */

@keyframes vt-fade-out {
  to { opacity: 0; }
}

@keyframes vt-fade-in {
  from { opacity: 0; }
}

@supports (view-transition-name: none) {
  @media (prefers-reduced-motion: no-preference) {
    /* Named elements (image + title): morph position/size over 0.4s */
    ::view-transition-group(*) {
      animation-duration: 0.4s;
      animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
    }

    /* Old snapshot: quick fade out */
    ::view-transition-old(*) {
      animation: 0.15s linear both vt-fade-out;
    }

    /* New snapshot: fade in slightly delayed */
    ::view-transition-new(*) {
      animation: 0.25s ease-out 0.1s both vt-fade-in;
    }

    /* Root: plain cross-fade for unmatched page content */
    ::view-transition-old(root),
    ::view-transition-new(root) {
      animation: 0.2s ease both vt-fade-out;
    }

    ::view-transition-new(root) {
      animation: 0.2s ease both vt-fade-in;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    ::view-transition-group(*),
    ::view-transition-old(root),
    ::view-transition-new(root) {
      animation-duration: 0.001s;
    }
  }
}

/* ===========================================
   PRINT — PDF generation via headless Chrome
   Hides site chrome, full-width prose, tight type, smart page breaks.
   Generates a clean report PDF instead of paginated blog with sidebars.
   ============================================ */
@media print {

  /* ── Hide site chrome ─────────────────────── */
  nav, .nav, .site-nav, .article-nav,
  footer, .site-footer,
  .article-right-sidebar,
  .article-toc-sidebar, .toc-sidebar, .toc-mobile-nav, .toc-label,
  .cite-this-panel, .cite-this-modal, .mobile-cite-chip,
  .article-share-row,
  .article-author-bio,
  .article-meet-the-contributors,
  .article-bottom-cta,
  .editor-picks-sidebar,
  .editor-picks-grid,
  .research-artifacts-callout,
  .proof-packet,
  .featured-grid,
  .truth-layer,
  .skip-link,
  iframe,
  /* All visual media — text-only PDF per Dakota 2026-05-26 */
  .article-hero,
  .article-header img,
  .article-prose img,
  .article-prose figure,
  .article-prose picture,
  .article-prose .figure,
  img,
  figure,
  picture {
    display: none !important;
  }

  /* ── Page setup ─────────────────────────── */
  @page {
    size: letter;
    margin: 0.75in;
  }
  @page :first {
    margin-top: 0.5in;
  }

  /* ── Body + base typography ───────────────── */
  body, html {
    background: white !important;
    color: black !important;
    font-size: 11pt !important;
    line-height: 1.5 !important;
  }

  /* ── Full-width prose; collapse grid ──────── */
  .article-body-inner {
    display: block !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
    grid-template-columns: none !important;
    gap: 0 !important;
  }

  .article-body-column {
    display: block !important;
  }

  .article-prose {
    max-width: none !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    color: black !important;
    font-size: 11pt !important;
    line-height: 1.5 !important;
  }

  /* ── Headings — tight, readable, no orphan breaks ── */
  .article-prose h1, .article-hero h1 {
    font-size: 22pt !important;
    margin: 0 0 12pt 0 !important;
    color: black !important;
    page-break-after: avoid;
    break-after: avoid;
  }
  .article-prose h2 {
    font-size: 15pt !important;
    margin: 18pt 0 8pt 0 !important;
    color: black !important;
    page-break-after: avoid;
    break-after: avoid;
  }
  .article-prose h3 {
    font-size: 12pt !important;
    margin: 14pt 0 6pt 0 !important;
    color: black !important;
    page-break-after: avoid;
    break-after: avoid;
  }
  .article-prose h4 {
    font-size: 11pt !important;
    margin: 12pt 0 4pt 0 !important;
    color: black !important;
    page-break-after: avoid;
    break-after: avoid;
  }

  /* ── Body copy — orphans/widows, no color tricks ── */
  .article-prose p,
  .article-prose ul,
  .article-prose ol {
    margin: 0 0 9pt 0 !important;
    color: black !important;
    orphans: 3;
    widows: 3;
  }

  .article-prose a {
    color: black !important;
    text-decoration: underline !important;
  }

  .article-prose strong, .article-prose b {
    color: black !important;
  }

  /* ── Article header (title + dek + byline + image) ── */
  .article-header,
  .article-hero,
  .article-meta,
  .article-byline {
    page-break-after: avoid;
    break-after: avoid;
    color: black !important;
  }

  .article-hero img,
  .article-prose figure img,
  .article-prose img {
    max-width: 100% !important;
    height: auto !important;
    page-break-inside: avoid;
    break-inside: avoid;
  }

  /* ── Figures, tables, blockquotes — keep together ── */
  figure, table, blockquote, .truth-layer {
    page-break-inside: avoid;
    break-inside: avoid;
    margin: 12pt 0 !important;
  }

  table {
    border-collapse: collapse !important;
    width: 100% !important;
    font-size: 10pt !important;
  }
  table thead {
    display: table-header-group;
  }
  table th, table td {
    padding: 4pt 6pt !important;
    border: 1px solid #999 !important;
    color: black !important;
    background: white !important;
  }

  /* ── Code blocks ──────────────────────────── */
  pre, code {
    background: #f5f5f5 !important;
    color: black !important;
    page-break-inside: avoid;
    break-inside: avoid;
    font-size: 9pt !important;
  }

  /* ── Page-break helpers (opt-in via class) ── */
  .pagebreak-before { page-break-before: always; break-before: page; }
  .pagebreak-after  { page-break-after: always; break-after: page; }
  .pagebreak-avoid  { page-break-inside: avoid; break-inside: avoid; }
}