/* Page-specific tweaks that don't belong in the generic component library */

.hero-cta{ display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

.reading-progress{ position: fixed; top: 0; left: 0; height: 3px; background: var(--brand-accent); z-index: 1000; width: 0%; }

.longread-section{ background: var(--bg-cream); }

@media (max-width: 640px){
  .hero-figure{ width: 68vw; }
  .cta-media{ display: none; }
  .quote-section{ margin: 0 16px; padding: 48px 24px; }
}

/* 404 */
.page-404 h1{ font-size: clamp(3rem, 10vw, 6rem); color: var(--brand-accent); }