/* ============================================================ SPARZAN — Base / Reset Global element defaults. Build components on top of this. ============================================================ */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; /* Fixed pill nav sits at ~85px from viewport top; scroll-padding keeps anchored section headings clear of it on jump-links. */ scroll-padding-top: 100px; /* Hard-guard horizontal scroll on the root element too — some mobile browsers ignore overflow-x on if allows it. */ overflow-x: hidden; max-width: 100vw; } /* Same offset applied per-section so `.scroll-top`, focus-anchor, and other assist tools land content clear of the pill nav. */ section[id] { scroll-margin-top: 100px; } body { font-family: var(--font-sans); font-size: var(--fs-base); line-height: var(--lh-base); color: var(--ink-500); background: var(--paper); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; position: relative; overflow-x: clip; max-width: 100vw; min-height: 100vh; } img, svg, video, canvas { display: block; max-width: 100%; height: auto; } a { color: var(--brand-600); text-decoration: none; transition: color var(--dur-fast) var(--ease); } a:hover { color: var(--brand-700); } h1, h2, h3, h4 { font-family: var(--font-display); color: var(--ink-900); line-height: var(--lh-display); font-weight: var(--fw-medium); letter-spacing: var(--ls-display); } h1 { font-size: var(--fs-4xl); letter-spacing: var(--ls-display-tight); } h2 { font-size: var(--fs-3xl); } h3 { font-size: var(--fs-xl); letter-spacing: var(--ls-display-sub); line-height: var(--lh-tight); } h4 { letter-spacing: var(--ls-display-sub); line-height: var(--lh-tight); } p { max-width: 65ch; } ul, ol { padding-left: 1.2em; } :focus-visible { outline: 3px solid var(--brand-400); outline-offset: 3px; border-radius: 4px; } ::selection { background: var(--brand-200); color: var(--ink-900); } /* ---- Layout helpers --------------------------------------- */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } .container--sm { max-width: var(--container-sm); } .section { padding-block: var(--section-y); } .section--soft { background: var(--paper-soft); } /* Visually hidden but available to screen readers */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ---- Reveal-on-scroll (progressive enhancement) ----------- */ .reveal { opacity: 0; transform: translateY(24px); transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease); } .reveal.is-visible { opacity: 1; transform: none; } /* Respect users who prefer less motion */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } .reveal { opacity: 1; transform: none; } }