/* base.css — body typography + link defaults. */
@font-face {
/* OTF is the always-works default. If WOFF2 is later produced (Task 14 Step 3),
it is added as a higher-priority source via the same @font-face. Browsers
will pick the first format they can use. */
font-family: "Caecilia Heavy Italic";
src: url("/fonts/pmncaeciliasans-head-heavyita.woff2") format("woff2"),
url("/fonts/pmncaeciliasans-head-heavyita.otf") format("opentype");
font-style: italic;
font-weight: 800;
font-display: swap;
}
/* Google Fonts (Syne + Figtree) — self-host or load via in HTML .
We use so we keep this stylesheet pure. */
html {
font-family: var(--font-body);
font-size: 16px;
color: var(--bone);
background: var(--ink);
}
body {
font-size: var(--fs-body);
line-height: var(--lh-body);
color: var(--bone-dim);
background: var(--ink);
font-feature-settings: "ss01" on, "ss02" on, "cv11" on;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4 { color: var(--bone); letter-spacing: -0.01em; }
h1, .display { font-family: var(--font-display); font-weight: 800; font-style: italic; line-height: var(--lh-tight); letter-spacing: -0.025em; }
h2 { font-family: var(--font-display); font-style: italic; font-weight: 800; line-height: var(--lh-snug); font-size: var(--fs-h2); letter-spacing: -0.02em; }
h3 { font-family: var(--font-secondary); font-weight: 700; font-size: var(--fs-h3); line-height: var(--lh-snug); }
.eyebrow {
font-family: var(--font-secondary);
font-weight: 700;
font-size: var(--fs-eyebrow);
text-transform: uppercase;
letter-spacing: 0.18em;
color: var(--accent);
}
a { color: var(--bone); text-decoration: none; transition: color var(--dur-fast) var(--ease-out-expo); }
a:hover { color: var(--accent); }
a:focus-visible { color: var(--accent); }
p { color: var(--bone-dim); max-width: 65ch; }
strong { color: var(--bone); font-weight: 600; }
code, pre, .mono { font-family: var(--font-mono); }
::selection { background: var(--accent); color: var(--ink); }
/* Skip-to-content link is the first focusable element on every page. */
.skip-to-content {
position: absolute;
left: -9999px;
top: var(--s-2);
padding: var(--s-2) var(--s-4);
background: var(--ink-3);
color: var(--bone);
border-radius: var(--r-1);
z-index: 9999;
}
.skip-to-content:focus { left: var(--s-2); }