/* ========================================================================== BASE — reset, typography, layout primitives, motion foundation ========================================================================== */ /* ---- RESET ---- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h-shrunk) + 20px); /* Entrance transforms (.reveal-right translates +36px) briefly sit past the right edge. overflow-x on alone does NOT clip them — it propagates to the viewport and body computes back to visible — so the root must clip too. `clip` over `hidden`: it does not create a scroll container. */ overflow-x: hidden; overflow-x: clip; } body { background: var(--paper); color: var(--body); font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body); font-synthesis-weight: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: hidden; overflow-x: clip; min-height: 100vh; } img, picture, svg, video, canvas { display: block; max-width: 100%; height: auto; } input, button, textarea, select { font: inherit; color: inherit; } button { background: none; border: 0; cursor: pointer; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; padding: 0; } /* ---- HEADINGS ---- */ h1, h2, h3, h4 { font-family: var(--font-display); color: var(--heading); font-weight: 700; letter-spacing: -0.02em; line-height: var(--lh-tight); text-wrap: balance; } h1 { font-size: var(--fs-h1); font-weight: 800; } h2 { font-size: var(--fs-h2); } h3 { font-size: var(--fs-h3); line-height: var(--lh-snug); } h4 { font-size: var(--fs-h4); line-height: var(--lh-snug); font-weight: 600; } p { max-width: var(--measure); text-wrap: pretty; } ::selection { background: var(--accent); color: #fff; } /* ---- FOCUS: visible everywhere, never removed ---- */ :focus { outline: none; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--r-xs); } /* ---- SKIP LINK ---- */ .skip-link { position: absolute; left: var(--sp-4); top: -100px; z-index: var(--z-toast); background: var(--accent); color: var(--on-accent); font-weight: 700; padding: var(--sp-3) var(--sp-5); border-radius: var(--r-sm); transition: top var(--dur-base) var(--ease-entrance); } .skip-link:focus-visible { top: var(--sp-4); } /* ---- SANDBLAST GRAIN OVERLAY ---- Gives the paper the tooth of etched glass rather than a flat digital white. On a light ground it must multiply at very low opacity — an overlay blend at the strength used on dark reads as dirt. */ .grain { position: fixed; inset: 0; z-index: var(--z-grain); pointer-events: none; opacity: 0.018; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ---- LAYOUT PRIMITIVES ---- */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } .container--narrow { max-width: var(--container-narrow); } .section { padding-block: var(--section-y); position: relative; } .section--tight { padding-block: clamp(3.5rem, 6vw, 5.5rem); } /* Alternating bands. Light is the default context; .invert flips a whole section to graphite by re-pointing the tokens (see tokens.css). */ .section--light { background: var(--surface); } .section--slate { background: var(--paper-2); } .section--invert { background: var(--paper); } /* --paper is graphite inside .invert */ /* ---- EYEBROW: the "machine spec" label above every section heading ---- */ .eyebrow { display: inline-flex; align-items: center; gap: var(--sp-3); font-family: var(--font-mono); font-size: var(--fs-eyebrow); font-weight: 500; text-transform: uppercase; letter-spacing: 0.22em; color: var(--accent-ink); margin-bottom: var(--sp-4); } .eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--accent-ink); flex: none; } .section-head { margin-bottom: clamp(2.5rem, 5vw, 4rem); max-width: 780px; } .section-head--center { margin-inline: auto; text-align: center; } .section-head--center .eyebrow { justify-content: center; } .section-head p { margin-top: var(--sp-4); font-size: var(--fs-lead); } .section-head--center p { margin-inline: auto; } /* ---- UTILITIES ---- */ .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } .text-amber { color: var(--accent); } .no-scroll { overflow: hidden; } /* ========================================================================== MOTION FOUNDATION Entrance states. JS adds .is-visible via one shared IntersectionObserver. ========================================================================== */ .reveal { opacity: 0; transform: translate3d(0, 28px, 0); transition: opacity var(--dur-enter) var(--ease-entrance), transform var(--dur-enter) var(--ease-entrance); } .reveal.is-visible { opacity: 1; transform: translate3d(0, 0, 0); } .reveal-left { opacity: 0; transform: translate3d(-36px, 0, 0); transition: opacity var(--dur-enter) var(--ease-entrance), transform var(--dur-enter) var(--ease-entrance); } .reveal-right { opacity: 0; transform: translate3d(36px, 0, 0); transition: opacity var(--dur-enter) var(--ease-entrance), transform var(--dur-enter) var(--ease-entrance); } .reveal-scale { opacity: 0; transform: scale(0.94); transition: opacity var(--dur-enter) var(--ease-entrance), transform var(--dur-enter) var(--ease-entrance); } .reveal-left.is-visible, .reveal-right.is-visible { opacity: 1; transform: translate3d(0,0,0); } .reveal-scale.is-visible { opacity: 1; transform: scale(1); } /* Stagger: works both via [data-stagger] (JS assigns --i) and via an inline --i on a standalone element. */ .reveal, .reveal-left, .reveal-right, .reveal-scale, [data-stagger] > * { transition-delay: calc(var(--i, 0) * 70ms); } /* ---- THE ETCH REVEAL ---- A laser line sweeps across the heading while the text is revealed behind it. Reads as the words being burned into the page. */ .etch-reveal { position: relative; display: inline-block; } .etch-reveal > .etch-text { display: inline-block; clip-path: inset(0 100% 0 0); transition: clip-path 900ms var(--ease-entrance); } .etch-reveal > .etch-line { position: absolute; top: 8%; bottom: 8%; left: 0; width: 2px; background: linear-gradient(180deg, transparent, var(--accent), transparent); box-shadow: 0 0 6px 1px var(--accent-glow), 0 0 18px 4px var(--accent-glow-soft); opacity: 0; transform: translate3d(0, 0, 0); pointer-events: none; } .etch-reveal.is-visible > .etch-text { clip-path: inset(0 0 0 0); } .etch-reveal.is-visible > .etch-line { animation: laser-sweep 1000ms var(--ease-entrance) forwards; } @keyframes laser-sweep { 0% { opacity: 0; left: 0; } 12% { opacity: 1; } 82% { opacity: 1; left: 100%; } 100% { opacity: 0; left: 100%; } } /* ---- FLOATING DRIFT ---- */ .float { animation: drift 8s var(--ease-entrance) infinite alternate; } .float--slow { animation-duration: 11s; } .float--delay-1 { animation-delay: -2.4s; } .float--delay-2 { animation-delay: -5.1s; } @keyframes drift { from { transform: translate3d(0, 0, 0) rotate(0deg); } to { transform: translate3d(0, -14px, 0) rotate(1.6deg); } } /* ---- REDUCED MOTION: kill transforms, keep opacity ---- */ @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; scroll-behavior: auto !important; } .reveal, .reveal-left, .reveal-right, .reveal-scale { opacity: 1 !important; transform: none !important; } .etch-reveal > .etch-text { clip-path: none !important; } .etch-reveal > .etch-line { display: none; } .float { animation: none !important; } .grain { display: none; } }