/* ═══════════════════════════════════════════════════════ DESIGN TOKENS ═══════════════════════════════════════════════════════ */ :root { /* ── Colour — dark default ── */ --c-bg: #0e0e0d; --c-surface: #161614; --c-border: #272724; --c-muted: #8c8c82; /* WCAG AA ≥ 5:1 on --c-bg */ --c-text: #e8e6df; --c-accent: #c9a96e; /* WCAG AA ≥ 8:1 on --c-bg */ --c-accent-dk: #a07840; --f-serif: 'Georgia', 'Times New Roman', serif; --f-sans: 'Helvetica Neue', 'Arial', sans-serif; /* ── Type scale ───────────────────────────────────── All in rem → scale with the fluid html font-size. html base: 15 px (mobile) → 20 px (≥1600 × 1440). ─────────────────────────────────────────────────── */ --t-ui: 0.6875rem; /* ~11→14 px — ctrl buttons, tiny meta */ --t-label: 0.75rem; /* ~11→15 px — nav, eyebrows, roles */ --t-body: 1rem; /* 15→20 px — ALL prose */ --t-name: 1.125rem; /* ~17→22 px — team member names */ --t-h3: 1.5rem; /* ~22→30 px — footer headings */ --t-h2: 2rem; /* 30→40 px — section headings */ /* ── Line heights ── */ --lh-tight: 1.1; /* display headings (h1) */ --lh-heading: 1.2; /* h2, h3, team name */ --lh-body: 1.75; /* standard prose */ --lh-loose: 1.9; /* legal / footer text */ /* ── Letter spacing ── */ --ls-display: -0.015em; /* large serif headings */ --ls-label: 0.15em; /* roles, all-caps labels */ --ls-wider: 0.2em; /* section eyebrows, nav */ /* ── Spacing ── */ --space-xs: 0.5rem; --space-sm: 1rem; --space-md: 2rem; --space-lg: 4rem; --space-xl: clamp(3.5rem, 8vw, 7rem); --radius: 2px; --max-w: 960px; } /* ── Light mode via system preference ── */ @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --c-bg: #f5f3ee; --c-surface: #eceae3; --c-border: #d4d0c5; --c-muted: #4e4c45; /* WCAG AA ≥ 6:1 */ --c-text: #1a1918; --c-accent: #7a5a28; /* WCAG AA ≥ 5.7:1 */ --c-accent-dk: #5c4018; } } /* ── Manual overrides via data-theme ── */ [data-theme="light"] { --c-bg: #f5f3ee; --c-surface: #eceae3; --c-border: #d4d0c5; --c-muted: #4e4c45; --c-text: #1a1918; --c-accent: #7a5a28; --c-accent-dk: #5c4018; } [data-theme="dark"] { --c-bg: #0e0e0d; --c-surface: #161614; --c-border: #272724; --c-muted: #8c8c82; --c-text: #e8e6df; --c-accent: #c9a96e; --c-accent-dk: #a07840; } /* ═══════════════════════════════════════════════════════ BASE ═══════════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; background: var(--c-bg); color: var(--c-text); font-family: var(--f-sans); /* 15 px mobile → 20 px at ≥ 1600 vw AND ≥ 1440 vh */ font-size: clamp(15px, min(0.5vw, 0.5556vh) + 12px, 20px); -webkit-font-smoothing: antialiased; transition: background 0.25s, color 0.25s; } body { min-height: 100vh; display: flex; flex-direction: column; } a { color: inherit; text-decoration: none; } /* ── Layout ── */ .container { width: 100%; max-width: var(--max-w); margin-inline: auto; padding-inline: var(--space-md); } .divider { border: none; border-top: 1px solid var(--c-border); } /* ═══════════════════════════════════════════════════════ HEADER ═══════════════════════════════════════════════════════ */ header { padding-block: 1.25rem; border-bottom: 1px solid var(--c-border); position: sticky; top: 0; background: color-mix(in srgb, var(--c-bg) 88%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); z-index: 10; transition: background 0.25s, border-color 0.25s; } header .container { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); } /* Logo */ .logo { font-family: var(--f-serif); font-size: var(--t-name); font-weight: 400; letter-spacing: var(--ls-label); color: var(--c-text); flex-shrink: 0; line-height: 1; } .logo span { color: var(--c-accent); } .header-controls { display: flex; align-items: center; gap: var(--space-md); } /* Nav */ nav { display: flex; gap: var(--space-md); } nav a { font-size: var(--t-label); letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--c-muted); transition: color 0.2s; position: relative; padding-bottom: 2px; line-height: 1; } nav a:hover { color: var(--c-text); } nav a.active { color: var(--c-text); } nav a.active::after { content: ''; position: absolute; bottom: -2px; left: 0; right: 0; height: 1px; background: var(--c-accent); } /* Controls — work on both