/* ========================================================= SAENGÉ — Reset, base typography, utilities ========================================================= */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { font-family: var(--font-body); font-size: var(--text-base); line-height: var(--leading-normal); color: var(--color-text); background: var(--color-bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } img, svg, picture { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; } ul { list-style: none; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 500; line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); color: var(--color-text); } :focus-visible { outline: 2.5px solid var(--color-rose-deep); outline-offset: 3px; border-radius: 4px; } ::selection { background: var(--color-petal); color: var(--color-text); } /* ---- Layout primitives ---- */ .wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); } .section { padding-block: var(--space-section); } .eyebrow { display: inline-flex; align-items: center; gap: 0.6em; font-size: var(--text-xs); font-weight: 600; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-rose-deep); } .eyebrow::before { content: ""; width: 28px; height: 1px; background: currentColor; opacity: 0.6; } .section-head { max-width: 52ch; margin-bottom: var(--space-lg); } .section-head h2 { font-size: var(--text-2xl); margin-block: var(--space-sm) var(--space-xs); } .section-head p { color: var(--color-text-soft); font-size: var(--text-lg); } /* ---- Accessibility helpers ---- */ .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: 50%; top: -100%; transform: translateX(-50%); background: var(--color-text); color: var(--color-on-dark); padding: 0.75rem 1.25rem; border-radius: var(--radius-pill); z-index: 999; transition: top var(--duration-fast) var(--ease-out-expo); } .skip-link:focus { top: 0.75rem; } /* ---- Scroll-reveal base ---- Progressive enhancement: content is visible by default and only hidden (to animate in) when JS has added the .js class to . If JS fails, nothing is ever invisible. */ .js .reveal { opacity: 0; transform: translateY(24px); transition: opacity var(--duration-slow) var(--ease-out-expo), transform var(--duration-slow) var(--ease-out-expo); transition-delay: var(--reveal-delay, 0ms); } .js .reveal.is-visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }