/* ============================================================ MOTIVATION — Base reset & primitives ============================================================ */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } /* Author display rules (flex/inline-flex/grid buttons, panels, etc.) win over the UA [hidden] rule by source order — this restores it globally so toggling the `hidden` attribute always hides the element. */ [hidden] { display: none !important; } html { color-scheme: dark; scroll-behavior: auto; } body { background: var(--ink-900); color: var(--platinum); font-family: var(--font-body); font-weight: 300; font-size: var(--fs-body); line-height: 1.7; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; min-height: 100vh; } img, picture, svg, video { display: block; max-width: 100%; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.05; letter-spacing: -.02em; color: var(--platinum); } a { color: inherit; text-decoration: none; transition: color var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease); } button { font-family: inherit; transition: all var(--dur-fast) var(--ease); } input, textarea, select { font-family: inherit; font-size: inherit; color: inherit; transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); } ul, ol { list-style: none; padding: 0; } /* Focus */ :focus-visible { outline: 2px solid var(--silver-2); outline-offset: 3px; } /* Skip link */ .skip-link { position: absolute; top: -100%; left: var(--sp-4); background: var(--platinum); color: var(--ink-900); padding: var(--sp-3) var(--sp-4); z-index: 1000; border-radius: var(--r); transition: top var(--dur-fast) var(--ease); } .skip-link:focus { top: var(--sp-4); } /* Layout */ .container { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } .section { padding-block: var(--section-pad); } .hairline { border: none; border-top: 1px solid var(--line); } .hairline--accent { width: 64px; border-top: 1px solid var(--silver-3); } /* Kicker / eyebrow */ .kicker { font-family: var(--font-body); text-transform: uppercase; letter-spacing: .22em; font-size: var(--fs-kick); color: var(--faint); font-weight: 500; } /* Metal text treatment */ .metal-text { background-image: var(--metal); background-size: 220% 100%; background-position: 0% 50%; -webkit-background-clip: text; background-clip: text; color: transparent; display: inline-block; } @media (prefers-reduced-motion: no-preference) { .metal-text--sweep { animation: metal-sweep 6s ease-in-out infinite; } } @keyframes metal-sweep { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* Reveal on scroll — only armed once JS confirms it can run (see the inline html.classList.add('js-ready') in ). If JS fails to load (e.g. module scripts blocked under file://), content stays visible instead of being stuck at opacity:0 forever. */ .js-ready .reveal { opacity: 0; transform: translateY(16px); } @media (prefers-reduced-motion: no-preference) { .js-ready .reveal { transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease); } } .reveal.is-visible { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } .metal-text--sweep { animation: none; } * { scroll-behavior: auto !important; } } /* Visually hidden */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } ::selection { background: var(--silver-2); color: var(--ink-900); } /* Film-grain texture — a faint, expensive finish over the flat black. Fixed + pointer-events:none so it never affects layout or input. */ body::after { content: ""; position: fixed; inset: 0; z-index: 9999; pointer-events: none; opacity: .035; mix-blend-mode: overlay; background-image: url("data:image/svg+xml;utf8,"); }