elements (font-size md, body charcoal, generous line-height,
measure cap ~65ch). Applied via class="section-body" in HTML. */
.section-body {
font-size: var(--text-md);
color: var(--color-body);
line-height: 1.75;
max-width: 72ch;
margin-bottom: var(--sp-5);
}
.section-body:last-child { margin-bottom: 0; }
/* Inline text link inside body copy (e.g. Boken purchase line) — teal-dark
passes AA on white; underline gives a non-color affordance too. */
.inline-link {
color: var(--color-terra-dark);
text-decoration: underline;
text-underline-offset: 2px;
}
.inline-link:hover,
.inline-link:focus-visible { color: var(--color-navy); }
/* ============================================================
BUTTONS
============================================================ */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
font-family: var(--font-sans); font-size: var(--text-base); font-weight: 600;
letter-spacing: 0.02em;
line-height: 1; padding: 0.9rem 1.6rem;
border-radius: var(--radius-sm);
transition: background 200ms ease, color 200ms ease,
transform 150ms ease, box-shadow 200ms ease,
border-color 200ms ease, opacity 200ms ease;
min-height: 48px; white-space: nowrap;
cursor: pointer;
}
.btn:focus-visible {
outline: 3px solid var(--color-terra);
outline-offset: 3px;
}
.btn:active { transform: translateY(1px); }
/* PRIMARY — confident, single dominant CTA */
.btn-primary {
background: var(--color-terra);
color: #fff;
border: 2px solid transparent;
}
.btn-primary:hover {
background: var(--color-terra-dark);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(60,110,113,0.32);
}
/* OUTLINE — secondary, lower visual weight */
.btn-outline {
background: transparent;
color: var(--color-ink);
border: 1.5px solid rgba(53,53,53,0.25);
}
.btn-outline:hover { border-color: var(--color-terra-dark); color: var(--color-terra-dark); }
/* OUTLINE WHITE — for dark backgrounds */
.btn-outline-white {
background: transparent;
color: #fff;
border: 1.5px solid rgba(255,255,255,0.45);
}
.btn-outline-white:hover { border-color: rgba(255,255,255,0.85); background: rgba(255,255,255,0.07); }
/* SAGE — secondary action on cream/white backgrounds */
.btn-sage {
background: var(--color-sage);
color: #fff;
border: 2px solid transparent;
}
.btn-sage:hover { background: var(--color-sage-dark); transform: translateY(-1px); }
.btn-sm { padding: 0.65rem 1.25rem; font-size: var(--text-sm); min-height: 44px; }
/* ============================================================
HEADER / NAV
============================================================ */
.site-header {
position: sticky; top: 0; z-index: 210;
height: var(--header-h);
/* backdrop-filter is on ::before (see below) — NOT here.
backdrop-filter on the element itself creates a containing block
for position:fixed children, trapping the off-canvas .site-nav
relative to the 68px header instead of the viewport. Pseudo-
elements never create a containing block for fixed siblings. */
background: rgba(255,255,255,0.94);
border-bottom: 1px solid var(--color-border);
/* Transform-only hide/reveal (never top/height — those trigger
layout). Exponential ease-out matches the site's established
reveal curve (see .reveal/.hero-title etc.) so the header's own
motion feels native to the rest of the page. */
transition: box-shadow var(--transition-base),
transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
}
/* Directional auto-hide — JS toggles this on scroll-down past the
threshold; removed immediately on scroll-up. Kept OFF the mobile
nav-open state and focus-within by JS (it force-removes the class),
so the drawer/close-button/keyboard focus are never hidden. */
.site-header--hidden {
transform: translateY(-100%);
}
/* Explicit hard-disable while the drawer is open: html.nav-open beats
.site-header--hidden regardless of any scroll that happens while it's
open (belt-and-braces alongside the JS force-show branch in
applyHeaderDirection — see site.js). Keeps the logo + close button
reachable at all times.
position:fixed IS still needed here, but for a different reason than
before: html.nav-open sets overflow:hidden on html+body (see above),
and overflow:hidden on ANY axis makes that element a scroll container
— so position:sticky would resolve against html/body as its nearest
scrolling ancestor instead of the viewport, rendering the header at
top:-