/* ========================================================================== FastSpeech — main stylesheet Mobile-first; uses native CSS variables. No framework. ========================================================================== */ /* ---------- 1. Reset ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; tab-size: 4; } body, h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; } ul, ol { padding: 0; list-style: none; } img, svg, video { display: block; max-width: 100%; height: auto; } button, input, select, textarea { font: inherit; color: inherit; } button { background: none; border: 0; cursor: pointer; padding: 0; } a { color: inherit; } /* ---------- 2. Tokens ---------- */ :root { /* Light editorial palette — paper, ink, coral. Default; the dark variant is opt-in via [data-theme="dark"] on . Both share the same Fraunces/Inter typography and the coral (#e26a3a) accent — only the lightness inverts. */ --c-bg: #faf7f1; --c-surface: #ffffff; --c-surface-2: #f1ecdf; --c-border: rgba(12, 16, 21, .10); --c-border-2: rgba(12, 16, 21, .22); --c-text: #14171f; --c-text-muted: #4d4836; --c-text-subtle: #8b8578; --c-brand: #e26a3a; --c-brand-hover: #c95428; --c-brand-soft: rgba(226, 106, 58, .10); --c-accent: #e26a3a; --c-warn: #b8861d; --c-danger: #c84025; --c-rating: #c98a18; /* Theme-conditional values used in places where rgba() doesn't read from a single colour token (header glass, button hover wash, hero glow). */ --c-glass: rgba(250, 247, 241, .78); --c-hover-soft: rgba(20, 23, 31, .04); --c-glow-secondary: rgba(20, 23, 31, .05); /* Layout */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --radius-1: 4px; --radius-2: 8px; --radius-3: 12px; --radius-4: 16px; --shadow-1: 0 1px 2px rgba(20, 23, 31, .06); --shadow-2: 0 4px 16px rgba(20, 23, 31, .08); --shadow-3: 0 30px 60px -20px rgba(20, 23, 31, .25); --max-width: 1200px; --header-h: 64px; --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-display: 'Fraunces', 'Times New Roman', Georgia, serif; --font-mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace; --fs-12: .75rem; --fs-14: .875rem; --fs-16: 1rem; --fs-18: 1.125rem; --fs-20: 1.25rem; --fs-24: 1.5rem; --fs-32: 2rem; --fs-40: 2.5rem; --fs-48: 3rem; --lh-tight: 1.2; --lh-normal: 1.5; --lh-loose: 1.7; --transition: 160ms cubic-bezier(.4, 0, .2, 1); } /* Dark variant — applied when . Same coral, just inverted background. The toggle is wired in assets/js/theme.js. */ :root[data-theme="dark"] { --c-bg: #0c1015; --c-surface: #161b22; --c-surface-2: #1f262f; --c-border: rgba(245, 241, 234, .12); --c-border-2: rgba(245, 241, 234, .25); --c-text: #f5f1ea; --c-text-muted: #cfc6b3; --c-text-subtle: #8b8578; --c-brand-hover: #f4a16f; --c-brand-soft: rgba(226, 106, 58, .12); --c-warn: #ddb24f; --c-danger: #e26a3a; --c-rating: #ddb24f; --c-glass: rgba(12, 16, 21, .72); --c-hover-soft: rgba(245, 241, 234, .06); --c-glow-secondary: rgba(245, 241, 234, .04); --shadow-1: 0 1px 2px rgba(0,0,0,.4); --shadow-2: 0 4px 16px rgba(0,0,0,.45); --shadow-3: 0 24px 60px -12px rgba(0,0,0,.6); } html { transition: background-color .35s ease, color .35s ease; } body { transition: background-color .35s ease, color .35s ease; } /* ---------- 3. Base ---------- */ html, body { height: 100%; scroll-behavior: smooth; } body { font-family: var(--font-sans); font-size: var(--fs-16); line-height: var(--lh-normal); color: var(--c-text); background: var(--c-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; min-height: 100vh; display: flex; flex-direction: column; } ::selection { background: var(--c-brand); color: var(--c-bg); } a { color: var(--c-brand); text-decoration: none; transition: color var(--transition); } a:hover { color: var(--c-brand-hover); text-decoration: none; } h1, h2, h3, h4 { font-family: var(--font-display); color: var(--c-text); font-variation-settings: "opsz" 144; letter-spacing: -0.02em; line-height: 1.05; } h1 { font-size: clamp(2.25rem, 5.5vw, 4rem); font-weight: 300; letter-spacing: -0.03em; } h2 { font-size: clamp(1.85rem, 3.4vw, 2.75rem); font-weight: 300; } h3 { font-size: var(--fs-24); font-weight: 400; } h4 { font-size: var(--fs-20); font-weight: 500; line-height: var(--lh-tight); letter-spacing: -0.01em; } h1 em, h2 em, h3 em { font-style: italic; font-weight: 400; color: var(--c-brand); } p { color: var(--c-text-muted); } small { font-size: var(--fs-14); color: var(--c-text-muted); } strong { color: var(--c-text); } .muted { color: var(--c-text-muted); } .subtle { color: var(--c-text-subtle); } :focus-visible { outline: 2px solid var(--c-brand); outline-offset: 2px; border-radius: var(--radius-1); } ::selection { background: var(--c-brand-soft); color: var(--c-text); } /* ---------- 4. Layout ---------- */ .container { width: 100%; max-width: var(--max-width); margin-inline: auto; padding-inline: var(--space-4); } @media (min-width: 768px) { .container { padding-inline: var(--space-5); } } main { flex: 1 0 auto; } .section { padding-block: var(--space-7); } @media (min-width: 768px) { .section { padding-block: var(--space-8); } } /* ---------- 5. Header ---------- */ .site-header { position: sticky; top: 0; z-index: 50; background: var(--c-glass); backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px); border-bottom: 1px solid var(--c-border); /* Height is locked from all sides — without min/max-height, a tall flex child (e.g. wrapping nav at narrow viewports) would stretch the header past var(--header-h), making the bar visually taller on some pages. */ height: var(--header-h); min-height: var(--header-h); max-height: var(--header-h); flex-shrink: 0; padding: 0; box-sizing: border-box; overflow: hidden; /* lock visual height */ display: flex; align-items: center; } @media (prefers-color-scheme: dark) { .site-header { background: rgba(15,17,21,.85); } } .site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); width: 100%; height: 100%; flex-wrap: nowrap; } .brand { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: 700; font-size: var(--fs-18); color: var(--c-text); text-decoration: none; } .brand__mark { width: 30px; height: 30px; background: linear-gradient(135deg, var(--c-text) 0%, var(--c-brand) 90%); color: var(--c-bg); border-radius: 8px; display: grid; place-items: center; font-family: var(--font-display); font-style: italic; font-weight: 700; font-size: 17px; box-shadow: 0 4px 12px -4px rgba(226, 106, 58, .35); } .nav-primary { display: none; gap: var(--space-5); } @media (min-width: 768px) { .nav-primary { display: flex; } } .nav-primary a { color: var(--c-text-muted); font-weight: 500; text-decoration: none; transition: color var(--transition); } .nav-primary a:hover { color: var(--c-text); } /* Theme toggle — sun/moon icon button in the header. The two icons live in a single