*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --bg: #ffffff; --ink: #111111; --grey: #9C9C9C; --text: #111111; /* = --ink */ --muted: #9C9C9C; /* = --grey */ --border: transparent; /* hairlines off (was #e5e5e5) — flip back to restore all dividers */ --f: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; --f-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif; --h-size: clamp(2.25rem, 1.5rem + 3vw, 3.5rem); /* one size for every section heading on home + About */ --nav-h: 46px; /* Single-column gutter. Only ever applied below 901px — the three-column desktop regime keeps its own 2.5rem/1.5rem rhythm untouched. */ --gutter: clamp(1.15rem, 4vw, 2.5rem); --pnav-h: 66px; /* fixed prev/next bar on project pages */ --accent: #A87C6E; /* dusty rose */ /* Grain field — the grey noise band shared by Selected work (.hz) and the contact footer (.ft-field). Defined once here so the two can't drift. */ /* Gridded field — the light-grey graph paper shared by Services and the personal wall. Defined once here so the two can't drift. 44px cells. */ --grid-bg: #E8E6E2; --grid-img: repeating-linear-gradient(0deg, #ffffff 0 1px, transparent 1px 44px), repeating-linear-gradient(90deg, #ffffff 0 1px, transparent 1px 44px); --grain-bg: #d9d7d3; --grain-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='0.55'/%3E%3C/svg%3E"); } html { scroll-behavior: smooth; /* No page ever scrolls sideways. Clip, not hidden — hidden would make this a scroll container and every sticky/pinned section would stop pinning. */ overflow-x: clip; } body { font-family: var(--f); background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; } /* Headings are set in the serif; everything else stays in Inter. */ h1, h2, h3 { font-family: var(--f-serif); } /* Cross-fade between pages where supported (Chrome, Edge). Other browsers navigate normally. */ @view-transition { navigation: auto; } a { color: inherit; text-decoration: none; } img { display: block; width: 100%; height: 100%; object-fit: cover; } /* Keyboard focus — visible for tab users, invisible for mouse users */ :focus-visible { outline: 2px solid var(--text); outline-offset: 3px; border-radius: 2px; } /* Respect the OS "reduce motion" setting everywhere */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ══ Motion ══ Three primitives, used everywhere: .rv reveals on scroll — JS adds .in when it enters the viewport .line-mask > span entrance: a line slides up from behind its own edge .fade-in entrance: a soft fade + lift The two entrance types fire once gets .ready (JS, next frame after load), staggered by a per-element --d. Everything is gated on html.js so a no-JS page renders plainly rather than staying blank. Nothing rotates, nothing bounces; the restraint is the point. All of it is switched off by the prefers-reduced-motion block above. */ :root { --ease: cubic-bezier(0.22, 1, 0.36, 1); /* fast out, long settle */ --dur: 0.65s; --out-quart: cubic-bezier(0.165, 0.84, 0.44, 1); /* the work index's reveal curve */ } /* Read by screen readers and search engines, invisible on screen. For pages whose design has no visible

Button reset so the pill styles identically whether it's an or