/* ============================================================ BASE — reset, typography primitives, layout, the rhythm system, and the reveal primitive. (Per-section styling lives in sections.css.) ============================================================ */ /* ---- Reset ---- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: auto; } body { font-family: var(--font-sans); font-size: var(--step-0); line-height: var(--leading-body); color: var(--text-on-dark); background: var(--ink-900); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: hidden; } img, picture, svg, video { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; } :focus-visible { outline: 2px solid var(--terracotta); outline-offset: 3px; } ::selection { background: var(--terracotta); color: #fff; } /* ---- Skip link (a11y) ---- First focusable element; hidden off-canvas until keyboard focus brings it on screen, above the fixed nav (z-index 50). Purely additive — invisible to mouse users, no layout impact. */ .skip-link { position: fixed; top: 0.75rem; left: 0.75rem; z-index: 200; transform: translateY(-160%); padding: 0.7rem 1.1rem; background: var(--ink-900); color: var(--text-on-dark); border: 1px solid var(--hairline-strong); border-radius: var(--radius-card); font-family: var(--font-body); font-size: var(--step--1); font-weight: 600; letter-spacing: 0.02em; transition: transform 0.18s var(--ease-out); } .skip-link:focus { transform: translateY(0); outline: 2px solid var(--terracotta); outline-offset: 3px; } /* ---- Lenis smooth-scroll hooks ---- */ html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; } .lenis.lenis-stopped { overflow: hidden; } /* ---- Typography primitives ---- */ .display { font-family: var(--font-display); font-weight: 400; font-optical-sizing: auto; line-height: var(--leading-display); letter-spacing: 0; } .eyebrow { font-size: var(--step--1); text-transform: uppercase; letter-spacing: var(--tracking-label); font-weight: 500; color: var(--text-on-dark-muted); } .em { font-style: italic; color: var(--terracotta); } /* the single terracotta emphasis */ .measure { max-width: var(--measure); } /* ---- Layout ---- */ .wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); } .wrap--wide { max-width: var(--maxw-wide); } .stack > * + * { margin-top: var(--space-m); } /* ---- The rhythm system: one dominant slate base, breaths, regrips ---- Each section declares its family via data-bg. Same-family neighbors share the exact canvas, so dark runs read as one continuous surface (seamless). */ .section { position: relative; padding-block: var(--section-pad-y); } .section[data-bg="ink"] { background: var(--ink-900); color: var(--text-on-dark); } .section[data-bg="ink-2"] { background: var(--ink-850); color: var(--text-on-dark); } .section[data-bg="marble"] { background: var(--marble-50); color: var(--text-on-light); } .section[data-bg="cream"] { background: var(--cream); color: var(--text-on-light); } .section[data-bg="terracotta"] { background: var(--terracotta); color: #fff; } /* ---- Reveal primitive ---- .js is set inline in (no flash). Elements hide, then the motion layer animates them in on scroll. No JS / reduced-motion => fully visible. */ .js [data-reveal] { opacity: 0; transform: translateY(24px); will-change: opacity, transform; } [data-reveal].is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .js [data-reveal] { opacity: 1; transform: none; will-change: auto; } html { scroll-behavior: auto; } }