/* Fonts are loaded via in index.html with preconnect — see
that file. CSS @import was blocking the render thread for ~2.1s on
mobile (per Lighthouse), since the import isn't discovered until
main.css itself has been fetched and parsed. */
* { margin: 0; padding: 0; box-sizing: border-box; }
/* ════════════════════════════════════════════════════════════════════════
DESIGN TOKENS — single source of truth.
Palette: warm yellow primary + cobalt blue accent on cream bg.
Type: Inter for body, Fraunces for display, JetBrains Mono for accent.
════════════════════════════════════════════════════════════════════════ */
:root {
/* ── Color: surfaces ───────────────────────────────────────────────── */
--color-bg: #FAF7F0; /* cream / ivory page bg */
--color-bg-soft: #F4EFE3; /* slightly deeper cream for striping */
--color-surface: #FFFFFF; /* card surface */
--color-surface-alt:#FFFBEC; /* warm-white card variant */
/* ── Color: lines ──────────────────────────────────────────────────── */
--color-line: #E4DFCE; /* visible divider */
--color-line-soft: #EFEBDA; /* subtle divider */
/* ── Color: text ───────────────────────────────────────────────────── */
/* Verified against --color-bg #FAF7F0:
text #1A1A1F → ~17 : 1 (AAA)
dim #5A5A66 → ~ 7 : 1 (AAA)
faint #6B6B78 → ~ 5 : 1 (AA — was #9A9AA5 / 2.7:1, failed) */
--color-text: #1A1A1F; /* primary ink */
--color-text-dim: #5A5A66; /* secondary */
--color-text-faint:#6B6B78; /* tertiary / meta — AA on cream + white */
/* ── Color: brand ──────────────────────────────────────────────────── */
--color-yellow: #F5C518; /* warm yellow primary */
--color-yellow-soft: #FFE56B; /* highlight bg, status pills */
--color-yellow-glow: #FFEFA8; /* very light wash */
--color-blue: #2347D9; /* cobalt — links, primary CTAs */
--color-blue-soft: #DDE4FF; /* tint for blue surfaces */
--color-blue-deep: #1832A6; /* hover / pressed */
/* Used as small text on a tinted-white background (e.g. card-impact
green pill: rgba(47,158,85,0.10) wash on white card). The brighter
#2F9E55 / #D97706 tones were ~3.0:1 — failed AA 4.5:1 for normal
text. Darkened to land at AA on the tinted bg while keeping
enough chroma to read as "green good" / "orange in-progress". */
--color-success: #1F7A3F; /* shipped status */
--color-warn: #A55300; /* now status */
/* ── Aliases (legacy/short) ────────────────────────────────────────── */
--color-accent: var(--color-blue);
/* ── Type families ─────────────────────────────────────────────────── */
--font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
--font-serif: 'Fraunces', Georgia, 'Times New Roman', serif;
--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
/* ── Type — size scale ─────────────────────────────────────────────── */
--fs-10: 10px;
--fs-11: 11px;
--fs-12: 12px;
--fs-13: 13px;
--fs-14: 14px;
--fs-15: 15px;
--fs-16: 16px;
--fs-17: 17px;
--fs-19: 19px;
--fs-22: 22px;
--fs-28: 28px;
--fs-display: clamp(40px, 6vw, 64px);
/* ── Type — weights ────────────────────────────────────────────────── */
--fw-regular: 400;
--fw-medium: 500;
--fw-semibold:600;
/* ── Type — line heights ───────────────────────────────────────────── */
--lh-tight: 1.05;
--lh-snug: 1.35;
--lh-base: 1.55;
--lh-relaxed: 1.7;
/* ── Type — tracking ───────────────────────────────────────────────── */
--tracking-tight: -0.02em;
--tracking-wide: 0.06em;
/* ── Spacing ───────────────────────────────────────────────────────── */
--sp-4: 4px;
--sp-6: 6px;
--sp-8: 8px;
--sp-10: 10px;
--sp-12: 12px;
--sp-14: 14px;
--sp-16: 16px;
--sp-20: 20px;
--sp-24: 24px;
--sp-32: 32px;
--sp-40: 40px;
--sp-48: 48px;
--sp-64: 64px;
--sp-80: 80px;
--sp-100: 100px;
/* ── Layout ────────────────────────────────────────────────────────── */
--w-page: 1280px;
--w-prose: 640px;
/* ── Borders & radii ───────────────────────────────────────────────── */
--bw: 1px;
--bw-thick: 1.5px;
--r-sm: 6px;
--r-md: 10px;
--r-lg: 14px;
/* ── Motion ────────────────────────────────────────────────────────── */
--dur-quick: 0.15s;
--dur-base: 0.25s;
--dur-slow: 0.45s;
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--ease-in-out:cubic-bezier(0.65, 0, 0.35, 1);
/* ── Effects ───────────────────────────────────────────────────────── */
--shadow-card: 0 1px 2px rgba(20, 20, 30, 0.04), 0 4px 12px rgba(20, 20, 30, 0.04);
--shadow-card-hover: 0 2px 4px rgba(20, 20, 30, 0.06), 0 12px 24px rgba(20, 20, 30, 0.08);
--shadow-cta: 0 2px 0 var(--color-blue-deep);
color-scheme: light;
}
/* ── Dark theme ───────────────────────────────────────────────────────
is set by the inline script (from a
localStorage override, or — with none — the OS preference; render.js's
matchMedia listener keeps "auto" live). Re-pointing the colour/shadow
custom properties is enough — the rest of the stylesheet reads them. Warm
dark, to mirror the warm-cream light theme. The "soft" tints flip to
*dark* tints (they're used as backgrounds behind --color-text, which is
now light); the accents brighten a touch for legibility on dark. */
:root[data-theme="dark"] {
--color-bg: #14130D; /* warm near-black */
--color-bg-soft: #1C1A12;
--color-surface: #201E15; /* a hair lighter than bg — cards/panels */
--color-surface-alt:#262213;
--color-line: #3B382A;
--color-line-soft: #2A2820;
--color-text: #F1EEE3; /* warm off-white */
--color-text-dim: #B7B2A1;
--color-text-faint:#8D8979;
--color-yellow: #F3C622;
--color-yellow-soft: #4A3D11; /* dark amber — tinted bg behind light text */
--color-yellow-glow: #31290C;
--color-blue: #8DA2FF; /* links / accent — legible on dark */
--color-blue-soft: #20274C; /* dark navy tint */
--color-blue-deep: #B4C1FF; /* hover / pressed — brighter on dark */
--color-success: #4FC074;
--color-warn: #E89D40;
--shadow-card: 0 1px 2px rgba(0, 0, 0, 0.45), 0 6px 18px rgba(0, 0, 0, 0.40);
--shadow-card-hover: 0 2px 6px rgba(0, 0, 0, 0.55), 0 16px 32px rgba(0, 0, 0, 0.50);
--shadow-cta: 0 2px 0 rgba(0, 0, 0, 0.55);
color-scheme: dark;
}
/* dark equivalents of the timeline category tints — the bright ones are
hardcoded hexes in the Timeline section (not custom properties). */
:root[data-theme="dark"] .vt-tone-3 { --tone-fill: #163420; } /* mint-green */
:root[data-theme="dark"] .vt-tone-4 { --tone-fill: #3B2A12; } /* amber */
:root[data-theme="dark"] .vt-tone-0 { --tone-fill: #2A271C; } /* neutral */
/* ════════════════════════════════════════════════════════════════════════
BASE
════════════════════════════════════════════════════════════════════════ */
html {
scroll-behavior: smooth;
scroll-padding-top: var(--sp-24);
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
html, body {
background: var(--color-bg);
color: var(--color-text);
font-family: var(--font-sans);
font-size: var(--fs-14);
line-height: var(--lh-base);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
::selection {
background: var(--color-yellow-soft);
color: var(--color-text);
}
/* ── A11y: focus rings ─────────────────────────────────────────────── */
:focus-visible {
outline: 2px solid var(--color-blue);
outline-offset: 2px;
border-radius: 3px;
}
button:focus-visible,
.cta:focus-visible,
.filter-chip:focus-visible,
.view-tab:focus-visible {
outline-offset: 3px;
}
/* ── A11y: skip-to-content ─────────────────────────────────────────── */
.skip-link {
position: absolute;
top: -40px;
left: var(--sp-12);
z-index: 100;
padding: var(--sp-8) var(--sp-12);
background: var(--color-blue);
color: var(--color-bg);
font-family: var(--font-mono);
font-size: var(--fs-12);
border-radius: var(--r-sm);
transition: top var(--dur-quick);
}
.skip-link:focus { top: var(--sp-12); }
/* ── A11y: reduced motion ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* ════════════════════════════════════════════════════════════════════════
PAGE LAYOUT
════════════════════════════════════════════════════════════════════════ */
.page {
max-width: var(--w-page);
margin: 0 auto;
padding: var(--sp-48) var(--sp-32) var(--sp-100);
}
/* ════════════════════════════════════════════════════════════════════════
TOP NAV
════════════════════════════════════════════════════════════════════════ */
.topnav {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--sp-64);
font-family: var(--font-mono);
font-size: var(--fs-13);
color: var(--color-text-dim);
}
.topnav .brand {
font-weight: var(--fw-semibold);
color: var(--color-text);
letter-spacing: var(--tracking-tight);
}
/* The brand mark — a "doodle": a crescent moon by default (celestial, like the
name / "a star to ship by"), which scripts/doodle.js turns into tonight's
actual lunar phase, or a special-day emoji on holidays / a birthday / a
project ship-iversary. It's an inline