since 2026-08-31, not a : the footer wordmark is the thing every
visitor tries to click at the end of a page, and on a subpage it is the most
obvious way back. It goes to #top on the homepage and to the homepage
everywhere else. inline-flex plus the 44px floor because it is now a control
and audit.js measures it as one. */
.footer__brand {
display: inline-flex; align-items: center; gap: var(--s-3);
min-height: 44px;
text-decoration: none; color: var(--ink);
transition: color var(--t-fast) var(--ease-soft);
}
.footer__brand:hover { color: var(--terracotta); }
.footer__line { color: var(--ink-soft); font-size: .95rem; }
.footer__meta { color: var(--ink-faint); font-size: .82rem; }
/* ---------- Not found (404.html) ----------
The only page on the site with no content of its own, so it has to earn its
height rather than sit in a thin band under the nav with a screenful of cream
below it. `min-height` uses svh, not vh: on iOS vh counts the retracted URL
bar, which would push the footer below the fold on first paint and make the
page look scrollable when there is nothing to scroll to. The nav (68px) and a
breathing allowance come off the top so the block centres against what the
visitor can actually see. */
.notfound { display: grid; align-items: center; min-height: calc(100svh - 68px - var(--s-8)); }
/* Cap the TEXT, never `.shell` itself. `.shell` centres with margin-inline:auto,
so a max-width on the same element shrinks the thing being centred and the
whole block drifts to the middle of the page — left-aligned everywhere else
on the site, centred only here. Same approach as .hero__title's 16ch. */
.notfound__title { max-width: 18ch; }
.notfound__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }
@media (max-width: 399px) {
/* Matches the hero's treatment at the same boundary — below 400px two buttons
side by side leave neither with a readable label. */
.notfound__actions { flex-direction: column; align-items: stretch; }
.notfound__actions .btn { width: 100%; }
}
/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
/* The card stagger sets real per-property delays; without this they would
survive the reset and hold elements back for up to 270ms. */
transition-delay: 0s !important;
animation-delay: 0s !important;
scroll-behavior: auto !important;
}
.reveal { opacity: 1; transform: none; }
.mirror__rule { transform: scaleX(1); }
.path__line path { stroke-dashoffset: 0; }
.hero__scroll { display: none; }
/* Motion variants and micro-interactions all resolve to their end state. */
.js .reveal--rise,
.js .reveal--rise.is-in { opacity: 1; transform: none; clip-path: none; }
.js .reveal--settle,
.js .reveal--settle.is-in { opacity: 1; letter-spacing: .17em; }
.js .reveal--bloom,
.js .reveal--bloom.is-in { opacity: 1; transform: none; }
.btn--primary::after { display: none; }
.step__dot::after { animation: none !important; opacity: 0; }
/* Deliberately does NOT force `translate`. `--drift` is only ever set by the
parallax handler, and that handler is skipped entirely under reduced motion
(main.js guards on `!reduced`), so --drift stays 0 and each breakpoint's own
translate already resolves to its correct static placement. The previous
`translate: -50% -50% !important` re-introduced precisely the negative Y offset
the phone band must never have: against the band's `top: 0` it lifted the mark
by half its height (~140px), clipping it above the hero and tucking it under
the sticky header — the exact failure the band placement was built to avoid,
and only for reduced-motion users, which is why it went unnoticed. */
.hero__spiral { will-change: auto; }
}