* { margin: 0; padding: 0; box-sizing: border-box; } /* Guards against a hairline gap sometimes visible between two full-bleed sections on mobile (reported: a thin line at the section-3/section-4 boundary, only "sometimes" — consistent with sub-pixel rasterization, not a real layout gap: getBoundingClientRect() on the actual elements here measures ~0, but each section's own fractional-vh height can independently round to a different physical pixel at paint time, leaving a 1-device-pixel sliver where neither section's background paints and the page's own transparent shows through instead. Nudging each section 1px into the next guarantees a small overlap instead, so no rounding combination can ever expose a gap — the overlap itself is imperceptible (a shared edge pixel, not a visible seam), unlike the gap it prevents. */ .hero, .section-2-placeholder, .section-3, .section-4, .site-footer { margin-bottom: -1px; } /* Shared "empty room" dark-purple tokens — used by both the backing behind the river's drip gaps (.bocr-river-wrap, end of section-3) and section-4 itself, so the two stay in sync by construction: the exact same horizontal gradient, colors and stops, painted on both. That's what keeps the seam between them invisible — if either side ever needs retuning, change it here once rather than in two places that then have to be kept matching by hand. */ :root { --room-purple-edge: #0c0815; --room-purple-mid: #2b1f45; /* The "lit" color the room fades to once the candle's flame goes out (see the candle-ignite block in main.js) — same peachy cream as section-2's own resting color (--s2-color, set in main.js once its intro clip finishes) so the room reads as catching the same warm light rather than an unrelated new color. */ --room-warm: #fdedcb; } body { font-family: 'Fredoka', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-weight: 500; } /* Fredoka's own weights read noticeably rounder/thicker than a system sans at the same numeric weight — 700 for headings (vs. the browser default bold, which is also 700 but looks thinner in most system fonts) is enough to read as "cartoonish" without needing a separate display face. */ h1, h2, h3 { font-weight: 700; } /* Permanent top nav bar (see index.html's #site-header) — an opaque-ish cream bar rather than a transparent overlay so it stays legible over every section's own background (hero's sky, section-4's dark room), not just the one it happened to be designed against. z-index:100 is far above every other stacking context on the page (the highest elsewhere is 11, .bocr-plaque) so nothing can ever paint over it. */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; gap: 1rem; /* Thin, near-token vertical padding on purpose — the bar's own thickness comes from the logo clip's height (.site-header-logo below), not from padding around it, so it stays a tall video in a barely-padded bar rather than a tall video AND generous padding stacking into an oversized bar (the original 96px-tall logo + this same thin padding read as "too big, blocking too much" — cut down to a 56px-tall logo below to fix that). */ padding: 0.3rem clamp(1rem, 2.08vw, 2.5rem); /* 2026-09-14: "the nav bar has a very different color from the Milky logo" — was `rgba(255, 250, 240, 0.9)` + `backdrop-filter: blur(8px)`. .site-header-logo relies on mix-blend-mode:multiply (below) to drop its own baked-in pure-white (255,255,255) background out against whatever's behind it — multiply(white, X) = X exactly, so in theory that trick is immune to whatever color sits behind it. But at only 90% opacity, a blurred sliver of the ACTUAL page content behind this fixed header (which varies a lot across this page — hero sky, section-4's near-black room) was bleeding through the bar's own flat color, and mix-blend-mode support on