/* ==========================================================================
BASE
Design tokens, reset, typography, global element defaults.
Google Fonts used to be pulled in here via @import, which forces an
extra sequential round-trip (browser has to fetch and parse this file
before it even discovers the font stylesheet). Every page now loads
fonts.googleapis.com directly via + in its own , in parallel with everything else —
same fonts, just requested earlier.
========================================================================== */
:root {
/* ---- color: ink & surface ---- */
--color-bg: #0b0b0c;
--color-bg-soft: #101012;
--color-surface: #17171a;
--color-surface-2: #1f1f23;
--color-border: #2a2a2f;
--color-border-soft: #201f22;
--color-text: #f5f3ec;
--color-text-dim: #a5a29a;
/* #6c6a64 measured at 3.64:1 against --color-bg — under WCAG AA's 4.5:1
minimum for normal-size text (this is used at fs-micro/fs-small in
places like footer dates and timestamps). Lightened to 4.91:1. */
--color-text-dimmer: #817f78;
/* ---- color: accent (electric cyan) ---- */
--color-accent: #22e0ff;
--color-accent-soft: #b8f5ff;
--color-accent-dim: #0f9fba;
--color-accent-ink: #0b0b0c;
/* ---- type ---- */
--font-display: 'Bricolage Grotesque', system-ui, -apple-system, sans-serif;
--font-body: 'Manrope', system-ui, -apple-system, sans-serif;
--font-price: 'Space Grotesk', system-ui, -apple-system, sans-serif;
--fs-hero: clamp(2.6rem, 5vw + 1.2rem, 5.25rem);
--fs-h1: clamp(2.1rem, 3vw + 1rem, 3.4rem);
--fs-h2: clamp(1.6rem, 1.6vw + 1rem, 2.35rem);
--fs-h3: 1.25rem;
--fs-lead: clamp(1.05rem, 0.4vw + 1rem, 1.25rem);
--fs-body: 1rem;
--fs-small: 0.875rem;
--fs-micro: 0.75rem;
/* ---- layout ---- */
--container: 1240px;
--container-narrow: 760px;
--gutter: clamp(20px, 5vw, 48px);
--section-pad: clamp(64px, 10vw, 140px);
--radius-sm: 8px;
--radius-md: 16px;
--radius-lg: 28px;
--radius-pill: 999px;
--ease-out: cubic-bezier(.16, .84, .44, 1);
--dur-fast: 0.2s;
--dur-med: 0.5s;
--dur-slow: 0.9s;
}
/* ---- reset ---- */
*, *::before, *::after { box-sizing: border-box; }
html {
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
}
/* Animations are intentionally always-on here, regardless of the OS-level
reduced-motion preference — this site leans on motion as part of the
design and nothing here is heavy enough to be a problem for anyone. */
body {
margin: 0;
background: var(--color-bg);
color: var(--color-text);
font-family: var(--font-body);
font-size: var(--fs-body);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
overflow-x: hidden;
position: relative;
}
/* subtle film-grain texture over the whole page for depth without gradients */
body::before {
content: "";
position: fixed;
inset: 0;
z-index: 1;
pointer-events: none;
opacity: 0.05;
mix-blend-mode: overlay;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
img, svg { display: block; max-width: 100%; }
h1, h2, h3, h4 {
font-family: var(--font-display);
font-weight: 700;
line-height: 1.05;
letter-spacing: -0.01em;
margin: 0;
color: var(--color-text);
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); font-weight: 600; }
p { margin: 0; }
a {
color: inherit;
text-decoration: none;
}
ul, ol { margin: 0; padding: 0; list-style: none; }
button, input, textarea, select {
font-family: inherit;
font-size: inherit;
color: inherit;
}
button { cursor: pointer; }
input, textarea, select {
background: var(--color-surface);
border: 1px solid var(--color-border);
color: var(--color-text);
}
::selection {
background: var(--color-accent);
color: var(--color-accent-ink);
}
/* focus states for accessibility, styled to fit the palette */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
outline: 2px solid var(--color-accent);
outline-offset: 3px;
border-radius: 4px;
}
/* ---- shared utility classes ---- */
.eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--font-body);
font-size: var(--fs-micro);
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--color-accent);
}
.eyebrow::before {
content: "";
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--color-accent);
}
.text-dim { color: var(--color-text-dim); }
.visually-hidden {
position: absolute !important;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
white-space: nowrap;
border: 0;
}