/* ---------- Tokens ---------- */ :root { --ink: #1a1a1a; --ink-soft: #4a4a4a; --on-ink: #ffffff; /* text/icon colour for things sitting on an --ink background */ --bg: #ffffff; --line: #e6e6e6; --surface: #f2f2f2; /* raised UI bits: image placeholders, form fields */ --serif-display: "Cormorant", "Times New Roman", serif; /* ≈ orpheus-pro */ --serif-body: "EB Garamond", "Times New Roman", serif; /* ≈ adobe-garamond-pro */ --gutter: clamp(20px, 4vw, 54px); --maxw: 1500px; color-scheme: light; } /* Dark theme: auto by default (prefers-color-scheme), overridable by a .theme-toggle click which stamps data-theme and pins it via localStorage — see the inline script in . Deliberately NOT touched: the fixed #4d4d4d dark backdrop on reel/strips/slideshow sections — a per-project photo-display accent carried over from the live site's own design, not page chrome, so it stays constant regardless of theme (same logic as why the reel arrows stay black-on-#4d4d4d rather than swapping colour). Café Clock's off-white grid tint, by contrast, uses var(--surface) rather than a fixed hex, so it reads as "a shade off the page background" in both directions — slightly darker than white in light mode, slightly lighter than near-black in dark mode — instead of staying a fixed pale grey that would look like a stark bright patch on a dark page. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ink: #ededed; --ink-soft: #a8a8a8; --on-ink: #121212; --bg: #1a1a1a; --line: #383838; --surface: #242424; color-scheme: dark; } } :root[data-theme="dark"] { --ink: #ededed; --ink-soft: #a8a8a8; --on-ink: #121212; --bg: #1a1a1a; --line: #383838; --surface: #242424; color-scheme: dark; } /* ---------- Reset-ish ---------- */ * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--serif-body); font-size: 20px; line-height: 1.5; font-weight: 400; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } a:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; } h1, h2, h3, h4 { font-family: var(--serif-display); font-weight: 400; line-height: 1.1; margin: 0; letter-spacing: 0.01em; } .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); } /* ---------- Header ---------- */ .site-header { display: flex; align-items: center; justify-content: space-between; gap: clamp(20px, 4vw, 60px); padding: 34px var(--gutter) 30px; max-width: var(--maxw); margin: 0 auto; flex-wrap: wrap; } .brand { font-family: var(--serif-display); font-size: clamp(24px, 2.4vw, 31px); letter-spacing: 0.01em; white-space: nowrap; } .brand a:hover { text-decoration: none; } .header-menu { display: flex; align-items: center; gap: clamp(20px, 4vw, 60px); flex-wrap: wrap; } .main-nav { display: flex; gap: clamp(14px, 1.6vw, 24px); font-size: 21px; } .main-nav a { padding-bottom: 2px; } .main-nav a.active { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; } .social { display: flex; align-items: center; gap: 18px; } .social a { display: inline-flex; } /* Icon svg viewBoxes (here and on .theme-toggle below) are cropped tight to each glyph's own drawn bounds (Instagram's icon originally had ~17 units of empty viewBox margin per side; the moon/sun paths fill nearly all of theirs) — so a single shared box size now maps directly to the same visual glyph size and left edge for all of them, instead of needing a different magic-number size per icon to compensate for mismatched padding. */ .social svg { width: 14px; height: 14px; fill: currentColor; display: block; } /* ---- dark mode toggle: shows a moon when currently light (click for dark), a sun when currently dark (click for light) — same not([data-theme="light"]) pattern as the token overrides above, so it stays in sync with them exactly */ .theme-toggle { background: none; border: 0; padding: 0; cursor: pointer; color: var(--ink); display: flex; align-items: center; } .theme-toggle svg { width: 14px; height: 14px; display: none; } .theme-toggle .icon-moon { display: block; } :root[data-theme="dark"] .theme-toggle .icon-moon { display: none; } :root[data-theme="dark"] .theme-toggle .icon-sun { display: block; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: none; } :root:not([data-theme="light"]) .theme-toggle .icon-sun { display: block; } } /* ---- mobile nav toggle: hidden on desktop, hamburger + fullscreen overlay on mobile ---- */ .nav-toggle { display: none; flex-direction: column; justify-content: center; gap: 7px; width: 30px; height: 24px; border: 0; background: none; padding: 0; cursor: pointer; flex-shrink: 0; /* Mobile browsers can tint an unstyled