html { scroll-behavior: smooth; }
body {
font-family: var(--font-sans);
font-size: var(--fs-200);
line-height: 1.6;
color: var(--color-ink);
background: var(--color-bg);
min-height: 100vh;
display: flex;
flex-direction: column;
}
main { flex: 1; }
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-serif);
font-weight: 700;
line-height: 1.15;
color: var(--color-ink);
}
h1 { font-size: var(--fs-700); }
h2 { font-size: var(--fs-600); }
h3 { font-size: var(--fs-500); }
h4 { font-size: var(--fs-400); }
h5 { font-size: var(--fs-300); }
h6 { font-size: var(--fs-200); }
p + p { margin-top: var(--space-4); }
a {
color: var(--color-accent-strong);
text-decoration-thickness: 1px;
text-underline-offset: 0.18em;
}
a:hover { color: var(--color-accent-hover); }
.wrap {
width: 100%;
max-width: 72rem;
margin-inline: auto;
padding-inline: var(--space-5);
}
.skip-link {
position: absolute;
left: 0;
top: -100px;
background: var(--color-button);
color: #fff;
padding: 0.75rem 1.25rem;
z-index: 9999;
transition: top 200ms var(--ease-smooth);
border-radius: 0 0 var(--radius-sm) 0;
text-decoration: none;
}
.skip-link:focus-visible { top: 0; color: #fff; }
[aria-live] { position: relative; }
/* --- Animation pre-hide -------------------------------------------------
Elements that GSAP fades/slides in are hidden BEFORE first paint so they
never flash visible and then jump to hidden ("blink"). Gated so content is
always reachable without the animation:
• `.js` — added by an inline script; absent when JS is off, and
removed by animations.js if GSAP fails to load (or never inits).
• prefers-reduced-motion: no-preference — reduced-motion users see content
immediately (the animations early-return for them anyway).
animations.js sets these to opacity:1 (capturing the end value) then reveals
them. Keep this selector list in sync with REVEAL_SELECTOR there. */
@media (prefers-reduced-motion: no-preference) {
.js [data-anim="reveal"],
.js [data-anim="cards"] [data-product-card],
.js [data-anim="hero"] .hero__title,
.js [data-anim="hero"] .hero__subtitle,
.js [data-anim="hero"] .hero__actions,
.js [data-anim="quote"] blockquote,
.js [data-anim="quote"] cite,
.js [data-anim="quote"] .quote-band__footer,
.js [data-anim="timeline"] .timeline__item,
.js [data-anim="timeline"] .timeline__node,
.js [data-anim="process"] .process__node,
.js [data-anim="process"] .process__label {
opacity: 0;
}
}