/* ========================================================= layout.css — base typography, page shell, utilities ========================================================= */ body { font-family: var(--font-body); font-weight: var(--fw-body); font-size: var(--fs-body); color: var(--text); background: var(--bg); } /* ---- Page shell ---- */ .page { display: flex; flex-direction: column; min-height: 100vh; } main { flex: 1 0 auto; width: 100%; } .wrap { width: 100%; max-width: var(--bp-xl); margin-inline: auto; padding-inline: var(--gutter); } .section { padding-block: var(--space-6); } .section--tight { padding-block: var(--space-5); } /* ---- Headings & text ---- */ h1, h2, h3 { font-family: var(--font-display); } .h1 { font-size: var(--fs-h1); font-weight: var(--fw-title); line-height: 1.02; letter-spacing: -0.01em; } .h2 { font-size: var(--fs-h2); font-weight: var(--fw-subhead); line-height: 1.05; } .h3 { font-size: var(--fs-h3); font-weight: var(--fw-subhead); line-height: 1.1; } .body { font-size: var(--fs-body); line-height: var(--lh-body); max-width: var(--measure); } /* Inline text links within content: underlined by default, stronger on hover/focus. */ .body a, .lede a, .bio__lede a, .hero__identity a { text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); text-underline-offset: 0.18em; transition: text-decoration-color var(--dur-fast) var(--ease-out); } .body a:hover, .body a:focus-visible, .lede a:hover, .lede a:focus-visible, .bio__lede a:hover, .bio__lede a:focus-visible, .hero__identity a:hover, .hero__identity a:focus-visible { text-decoration-color: currentColor; } .lede { font-size: var(--fs-h3); font-weight: var(--fw-body); line-height: 1.35; max-width: 28ch; } .label { font-size: var(--fs-nav); font-weight: var(--fw-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-mute); } .text-mute { color: var(--text-mute); } /* ---- Focus visibility (§9) ---- */ :focus-visible { outline: 2px solid var(--text); outline-offset: 3px; border-radius: 2px; } /* ---- Skip link ---- */ .skip-link { position: absolute; left: var(--space-2); top: -100%; z-index: 200; background: var(--text); color: var(--bg); padding: var(--space-1) var(--space-2); border-radius: var(--radius); transition: top var(--dur-fast) var(--ease-out); } .skip-link:focus { top: var(--space-2); } /* ---- Utility ---- */ .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; } .stack > * + * { margin-top: var(--space-2); } /* ---- Page fade transitions (progressive enhancement) ---- Only active when transitions.js adds .has-transitions to . Without JS, content is always fully visible. */ .has-transitions body { opacity: 0; transition: opacity var(--dur-med) var(--ease-out); } .has-transitions.is-entered body { opacity: 1; } .has-transitions.is-leaving body { opacity: 0; transition: opacity var(--dur-fast) var(--ease-out); } @media (prefers-reduced-motion: reduce) { .has-transitions body, .has-transitions.is-leaving body { opacity: 1 !important; transition: none !important; } }