/* ============================================================================= SECOND WIND - BASE (reset, typography, utilities) ============================================================================= */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { font-family: var(--font-body); font-size: var(--fs-body); line-height: 1.6; color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; min-height: 100dvh; } /* Prevent horizontal overflow WITHOUT turning into a scroll container (which would break window.scrollTo / anchor jumps). `clip` avoids that. */ html { overflow-x: clip; } img, picture, svg, video { display: block; max-width: 100%; height: auto; } img { background: var(--paper-2); } input, button, textarea, select { font: inherit; color: inherit; } button { cursor: pointer; background: none; border: none; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; padding: 0; } :focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 2px; } /* ---- Headings ---- */ h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 800; line-height: 1.02; letter-spacing: -0.02em; color: var(--ink); } h1 { font-size: var(--fs-h1); } h2 { font-size: var(--fs-h2); } h3 { font-size: var(--fs-h3); letter-spacing: -0.015em; } p { max-width: 68ch; } strong { font-weight: 700; } /* ---- Reusable type helpers ---- */ .display { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-display); line-height: 0.92; letter-spacing: -0.03em; } .lead { font-size: var(--fs-lead); color: var(--ink-2); line-height: 1.5; max-width: 60ch; } .serif { font-family: var(--font-serif); } .kicker { font-family: var(--font-body); font-weight: 700; font-size: var(--fs-kicker); letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent-deep); display: inline-flex; align-items: center; gap: 0.6em; width: fit-content !important; } .kicker::before { content: ""; width: 1.75rem; height: 2px; background: var(--accent); display: inline-block; } .kicker--num::before { content: none; } .eyebrow-num { font-family: var(--font-display); font-weight: 800; color: var(--accent); } .muted { color: var(--ink-3); } .text-center { text-align: center; } .balance { text-wrap: balance; } /* ---- Layout utilities ---- */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } .container--narrow { max-width: var(--container-narrow); } .section { padding-block: var(--section-y); } .band { background: var(--paper-2); } .band-3 { background: var(--paper-3); } .ink-band { background: var(--ink); color: var(--paper); } .ink-band h1, .ink-band h2, .ink-band h3 { color: var(--paper); } .stack > * + * { margin-top: var(--s4); } .stack-lg > * + * { margin-top: var(--s6); } .grid { display: grid; gap: var(--gutter); } .flex { display: flex; } .items-center { align-items: center; } .justify-between { justify-content: space-between; } .wrap { flex-wrap: wrap; } .gap-2 { gap: var(--s2); } .gap-3 { gap: var(--s3); } .gap-4 { gap: var(--s4); } .hidden { display: none !important; } .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ---- Section header pattern (numbered, editorial) ---- */ .sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s5); margin-bottom: var(--s6); flex-wrap: wrap; } .sec-head__title {max-width: 50%;} .sec-head p {color: var(--ink-2);width: 50%;} /* ---- Hairline rule ---- */ .rule { height: 1px; background: var(--line); border: 0; } /* ---- Skip link ---- */ .skip-link { position: fixed; top: 0.5rem; left: 0.5rem; z-index: var(--z-skip); background: var(--ink); color: var(--paper); padding: 0.7rem 1.1rem; border-radius: var(--r-md); transform: translateY(-160%); transition: transform var(--dur-2) var(--ease); font-weight: 600; } .skip-link:focus { transform: translateY(0); }