/* --- root element + global links ---
is the dark "outside" canvas. is the page wrapper
capped at --max-w-page (1920px) and centered, so viewports wider
than the cap see a black frame on the left/right. `overflow-x: clip`
on body keeps full-bleed sections inside the wrapper instead of
bleeding into the frame. */
html {
font-family: var(--font-sans);
color: var(--color-fg);
background: var(--color-surface-dark);
font-size: var(--fs-sm);
line-height: 1.5;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
body {
min-height: 100vh;
max-width: var(--max-w-page);
margin-inline: auto;
display: flex;
flex-direction: column;
overflow-x: clip;
background: var(--color-bg);
}
a { color: var(--color-accent); text-decoration: none; }
a:hover { color: var(--color-accent-2); }
/* --- layout primitives ---
`main` is the flex item that stretches so the footer sticks to the
bottom. `.site-main` is just a content-width wrapper that route
templates put around their narrow column — full-bleed sections
(subscribe, related) live as siblings of `.site-main` inside `main`
instead of using a `100vw + negative-margin` breakout. */
main {
flex: 1;
overflow-x: hidden;
}
.site-main {
width: 100%;
max-width: var(--max-w);
margin-inline: auto;
padding: var(--sp-md) 1.25rem var(--sp-lg);
}
/* --- footer (sits on the page background, no chrome) --- */
.site-footer {
background: transparent;
}
.site-footer__inner {
max-width: var(--max-w);
margin-inline: auto;
padding: 1.5rem 1.25rem;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--sp-sm);
color: var(--color-muted);
font-size: 0.9rem;
}
/* --- hero (top-of-page banner used by archive + taxonomy) --- */
.hero {
padding: var(--sp-mega) 0 var(--sp-lg);
text-align: center;
}
.hero--small { padding: var(--sp-lg) 0 var(--sp-md); text-align: left; }
.hero__eyebrow {
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--color-muted);
margin-bottom: 0.5rem;
}
.hero__title {
font-family: var(--font-display);
font-size: var(--fs-title);
font-weight: 700;
line-height: 1;
text-transform: uppercase;
display: inline;
max-width: 100%;
overflow-wrap: break-word;
word-break: normal;
}
.hero__title-accent { color: var(--color-accent); }
.hero__title-rest { color: var(--color-fg); }
.hero__title--small {
font-size: var(--fs-giga);
text-transform: none;
display: block;
}
.hero__sub {
margin-top: 0.75rem;
font-size: clamp(1rem, 0.5vw + 0.95rem, 1.2rem);
color: var(--color-muted);
max-width: 56ch;
margin-inline: auto;
}
/* Respect the `hidden` attribute on flex/grid elements that override display. */
[hidden] { display: none !important; }