/* ============================================ BASE / RESET ============================================ */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; /* On rather than — overflow on a positioned, non-root element can end up clipping/containing position:fixed descendants (like .nav-menu, .quick-info-sidebar) in some browsers. Overflow on the root propagates to the viewport instead, so it can't do that. */ overflow-x: hidden; } /* Applied by js/overlay.js while any drawer/modal/lightbox is open, so the page underneath can't be scrolled while it's covered. */ html.scroll-locked { overflow: hidden; } body { font-family: var(--font-body); line-height: 1.6; color: var(--text-primary); background: var(--color-white); } img { max-width: 100%; display: block; } .container { max-width: var(--content-max-width); margin: 0 auto; padding: 0 2rem; } /* ============================================ AMBIENT VISUAL EFFECTS Faint scanline + radial-glow overlays behind all content, purely decorative. ============================================ */ .scanlines { position: fixed; inset: 0; background: repeating-linear-gradient( 0deg, transparent, transparent 2px, rgba(0, 0, 0, 0.03) 2px, rgba(0, 0, 0, 0.03) 4px ); pointer-events: none; z-index: 1; } .vintage-overlay { position: fixed; inset: 0; background: radial-gradient(circle at 20% 50%, rgba(220, 38, 38, 0.03) 0%, transparent 50%), radial-gradient(circle at 80% 20%, rgba(246, 189, 80, 0.03) 0%, transparent 50%), radial-gradient(circle at 40% 80%, rgba(224, 170, 58, 0.03) 0%, transparent 50%); pointer-events: none; z-index: 0; } /* ============================================ SHARED SECTION HEADINGS ============================================ */ .section-header { text-align: center; margin-bottom: 3rem; } .section-title { display: flex; flex-direction: column; font-weight: 800; line-height: 1.1; text-transform: uppercase; letter-spacing: 3px; } .title-accent { font-size: 1.5rem; font-weight: 500; color: var(--text-primary); letter-spacing: 2px; margin-bottom: 0.5rem; } .title-main { font-size: 2.5rem; background: linear-gradient(135deg, var(--color-red), var(--color-gold)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; text-shadow: 4px 4px 8px rgba(0, 0, 0, 0.2); } .title-underline { width: 80px; height: 4px; margin: 1rem auto 0; background: linear-gradient(90deg, var(--color-red), var(--color-gold)); border-radius: 2px; } @media screen and (max-width: 768px) { .title-main { font-size: 1.9rem; } }