/* ========================================================================== Reset + base ========================================================================== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; text-rendering: optimizeLegibility; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } body { background: var(--bg-base); color: var(--text); font-family: var(--font-body); font-size: 16px; font-feature-settings: 'ss01', 'ss02', 'ss03'; line-height: 1.55; min-height: 100vh; overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; letter-spacing: -0.005em; } /* ───────── Paper-like film grain — full-viewport overlay ───────── */ body::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: var(--z-grain); /* Two-octave fractal noise — larger blobs (paper fibre) blended with finer grain. baseFrequency 0.65 with numOctaves=3 gives a visible "premium dark paper" feel, not the imperceptible film haze the previous 0.85/0.18 alpha was producing. */ background-image: url("data:image/svg+xml;utf8,"); background-size: 320px 320px; opacity: 0.85; mix-blend-mode: overlay; } @media (prefers-reduced-motion: reduce) { body::after { opacity: 0.55; } } /* ───────── Soft vignette — subtle edge-darkening for "filmic" depth ───────── */ body::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 9998; background: radial-gradient( ellipse 120% 110% at 50% 40%, transparent 38%, rgba(0, 0, 0, 0.32) 78%, rgba(0, 0, 0, 0.55) 100% ); } @media (max-width: 720px) { body::before { background: radial-gradient(ellipse 130% 100% at 50% 35%, transparent 45%, rgba(0,0,0,0.28) 80%, rgba(0,0,0,0.50) 100%); } } a { color: inherit; text-decoration: none; } button { font: inherit; cursor: pointer; background: none; border: 0; color: inherit; } img, svg, canvas { display: block; max-width: 100%; } input, button, textarea, select { font-family: inherit; } ::selection { background: var(--gold); color: #1A1408; } /* Focus rings — accessibility */ :focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: var(--r-sm); } /* Utility text wrappers */ .mono { font-family: var(--font-mono); } .display { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.025em; } .gold { color: var(--gold); } .muted { color: var(--text-3); } /* Reveal animation primitives — IntersectionObserver toggles .is-visible. PROGRESSIVE-ENHANCEMENT SAFETY: by default, .reveal elements are FULLY VISIBLE. Only when JS has successfully loaded does it add `.js-ready` to , which opts every .reveal into its hidden initial state. If JS fails to load or errors, the page renders normally — never blank. */ .reveal { opacity: 1; transform: none; transition: opacity var(--d-slow) var(--ease-out), transform var(--d-slow) var(--ease-out); } .reveal-stagger > * { opacity: 1; transform: none; transition: opacity var(--d-slow) var(--ease-out), transform var(--d-slow) var(--ease-out); } html.js-ready .reveal { opacity: 0; transform: translateY(24px); } html.js-ready .reveal.is-visible { opacity: 1; transform: translateY(0); } html.js-ready .reveal-stagger > * { opacity: 0; transform: translateY(20px); } html.js-ready .reveal-stagger.is-visible > * { opacity: 1; transform: translateY(0); } html.js-ready .reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 80ms; } html.js-ready .reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 160ms; } html.js-ready .reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 240ms; } html.js-ready .reveal-stagger.is-visible > *:nth-child(5) { transition-delay: 320ms; } html.js-ready .reveal-stagger.is-visible > *:nth-child(6) { transition-delay: 400ms; } html.js-ready .reveal-stagger.is-visible > *:nth-child(7) { transition-delay: 480ms; } html.js-ready .reveal-stagger.is-visible > *:nth-child(8) { transition-delay: 560ms; } @media (prefers-reduced-motion: reduce) { html.js-ready .reveal, html.js-ready .reveal-stagger > * { opacity: 1; transform: none; } } /* Scrollbar — subtle on dark */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: var(--bg-base); } ::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 5px; } ::-webkit-scrollbar-thumb:hover { background: var(--border-3); }