/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ DESIGN TOKENS — brand palette + typography (unchanged) ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ :root { --ivory: #F8F5F0; --warm-white: #FDFBF8; --stone: #E8E2D9; --taupe: #B8AD9E; --charcoal: #2C2825; --deep: #1A1614; --gold: #9A8060; --gold-lt: #C4A97D; --muted: #6B6460; --f-display: 'Cormorant Garamond', Georgia, serif; --f-body: 'DM Sans', system-ui, sans-serif; --nav-h: 72px; --sp-section: clamp(6rem, 9vw, 10rem); --sp-section-xl: clamp(8rem, 12vw, 11rem); /* Layout shell tokens — centralised so ALL layout changes are one-line edits */ --max-w-content: 1100px; /* max-w-6xl equiv */ --max-w-prose: 56rem; /* max-w-4xl — text-heavy pages */ --sp-inline: clamp(1.5rem, 5vw, 4.5rem); /* horizontal page gutter */ --sp-page-top: clamp(8rem, 10vw, 10rem); /* pt-32 → pt-40 */ --sp-inner: clamp(5rem, 7vw, 7rem); /* py-20 → py-28 (in-page) */ scroll-padding-top: var(--nav-h); } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ RESET ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ LOGO WATERMARK — fixed, viewport-centered background mark ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ Why html gets the background: body::before { z-index: -1 } sits BEHIND body's own background paint. If body keeps its background colour, the pseudo-element is invisible. Moving the colour to html lets body be transparent so the watermark shows through — the visual result is pixel-identical. Safety guarantees: ✓ pointer-events: none — clicks & text selection pass through unaffected ✓ z-index: -1 — strictly below every real page element ✓ opacity: 0.03 / 0.05 — barely perceptible, light and dark theme respectively ✓ position: fixed — anchored to the viewport, so the mark stays perfectly centered at all times, even while the page scrolls ✓ top/left 50% + translate(-50%,-50%) — true dead-center on every screen size ✓ touch-action: none — no touch interference ───────────────────────────────────────────────────────────────── */ /* Step 1 — Move page background from body → html. body becomes transparent so body::before is visible. Zero visual change. */ html { background: var(--warm-white); } /* html is a PARENT of body — CSS custom properties redefined on body.dark-theme do not cascade upward, so would stay light-cream while goes dark. html.dark-theme (toggled alongside body.dark-theme in script.js) fixes the page-edge and watermark-area mismatch in Migraine Mode. */ html.dark-theme { background: #1a1a1a; /* warm, low-glare matte — replaces near-pitch-black */ } /* Gentle, non-jarring shift between light and dark themes — no sudden flash when Migraine Mode is toggled. */ html, body { transition: background-color 0.45s ease, color 0.45s ease, background 0.45s ease; } body { background: transparent; /* colour lives on html now */ position: relative; /* stacking context for ::before */ color: var(--charcoal); font-family: var(--f-body); font-weight: 300; line-height: 1.7; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Step 2 — Watermark pseudo-element Single logo mark, fixed to the viewport center — stays perfectly centered on screen at all times, including while scrolling. */ body::before { content: ''; position: fixed; /* anchors to viewport, not document */ top: 50%; left: 50%; transform: translate(-50%, -50%); width: clamp(220px, 38vmin, 480px); height: clamp(220px, 38vmin, 480px); z-index: -1; /* behind every real element */ pointer-events: none; /* clicks pass straight through */ touch-action: none; /* touch events pass through */ background-image: url('logo.png'); background-size: contain; background-repeat: no-repeat; background-position: center; opacity: 0.03; /* barely perceptible — light mode */ transition: opacity 0.45s ease; } /* Slightly higher opacity against the darker Migraine Mode background keeps the mark equally subtle either way. */ body.dark-theme::before { opacity: 0.05; } a { color: inherit; text-decoration: none; } ul { list-style: none; } .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; } /* Skip-to-content: visible on focus for keyboard / screen-reader users */ .skip-link { position: absolute; inset-block-start: 0.75rem; inset-inline-start: 0.75rem; z-index: 200; padding: 0.65rem 1.4rem; background: var(--charcoal); color: var(--ivory); font-size: 0.72rem; font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0; pointer-events: none; transform: translateY(-4px); transition: opacity 0.2s, transform 0.2s; } .skip-link:focus { opacity: 1; pointer-events: auto; transform: none; outline: 2px solid var(--gold); outline-offset: 2px; } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ LAYOUT SHELL CONTRACT ───────────────────────────────────────────── The global shell renders ONCE and is NEVER reproduced inside individual page views.

→ nav (1 instance, always visible)

→ page outlet (router swaps content)

→ individual page views (content only)