/* ════════════════════════════════════════════════════════════════════════ Ampinity — design system (design-system.md). Cinematic, engineering-led, calm and warm. Near-black base, one connective-thread accent that swaps by sector. Materiality from hairlines + light, not heavy shadow. Crisp radii. Boldness spent in exactly one place: the connective thread. ════════════════════════════════════════════════════════════════════════ */ *,*::before,*::after { box-sizing:border-box; } html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; } body { margin:0; background:var(--ink-900); color:var(--on-ink-hi); font-family:var(--font-text); font-size:var(--t-body); line-height:1.55; font-weight:400; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; /* clip (not hidden): keeps overflow-y as visible so never becomes a scroll container — otherwise it coerces to overflow-y:auto and breaks the root scroll-snap on the homepage film. */ overflow-x:clip; } img,svg,video,canvas { display:block; max-width:100%; height:auto; } a { color:inherit; text-decoration:none; } :focus-visible { outline:2px solid var(--focus); outline-offset:2px; border-radius:var(--r-sm); } ::selection { background:var(--accent); color:var(--ink-900); } /* ── Skip link (a11y) ── */ /* Hidden by moving UP (not off-screen left) so it can never widen the document. */ .skip-link { position:fixed; left:var(--s-4); top:-60px; z-index:var(--z-modal); background:var(--accent); color:var(--ink-900); padding:var(--s-3) var(--s-5); font:600 var(--t-caption)/1 var(--font-text); transition:top var(--dur) var(--ease-standard); } .skip-link:focus { top:var(--s-4); } /* ── Layout ── */ .container { width:100%; max-width:var(--container-max); margin-inline:auto; padding-inline:var(--gutter); } .container--wide { max-width:var(--container-wide); } .section { padding-block:var(--s-10); } .section--tight { padding-block:var(--s-8); } .section.on-paper { background:var(--paper-50); color:var(--on-paper-hi); } .section.on-paper .muted { color:var(--on-paper-mid); } /* Contrast law (design-system §2): on paper, body text uses dark hi/mid tokens and the cyan accent must use its AA-compliant deep variant — never bright cyan. */ .section.on-paper .lede, .section.on-paper p { color:var(--on-paper-mid); } .section.on-paper h1,.section.on-paper h2,.section.on-paper h3,.section.on-paper h4 { color:var(--on-paper-hi); } .section.on-paper .eyebrow { color:var(--accent-ink); } .section.on-paper .eyebrow::before { background:var(--accent-deep); } .section.on-paper .manifesto p { color:var(--on-paper-mid); } .section.on-paper .manifesto p.lead, .section.on-paper .manifesto p.close { color:var(--on-paper-hi); } .section.on-paper .credo { color:var(--on-paper-hi); } /* Dark card/panel components keep light-on-dark text even inside .on-paper (light) sections — the section's near-black text tokens must NOT bleed into a dark card (WCAG 1.4.3: near-black on ink-800 ≈ 1.1:1, illegible). */ .section.on-paper .sector-card h3, .section.on-paper .house-link .name, .section.on-paper .leader .name { color:var(--on-ink-hi); } .section.on-paper .sector-card .line, .section.on-paper .sector-card p, .section.on-paper .house-link .n, .section.on-paper .leader .certain { color:var(--on-ink-mid); } .muted { color:var(--on-ink-mid); } .measure { max-width:64ch; } .measure-sm { max-width:48ch; } /* ── Typography ── */ .logotype { font-family:var(--font-logotype); font-weight:700; letter-spacing:0.04em; text-transform:uppercase; } .display-2xl{font:600 var(--t-display-2xl)/1.0 var(--font-display);letter-spacing:-0.02em;margin:0;} .display-xl {font:600 var(--t-display-xl)/1.03 var(--font-display);letter-spacing:-0.02em;margin:0;} h1,.h1{font:600 var(--t-h1)/1.06 var(--font-display);letter-spacing:-0.015em;margin:0 0 var(--s-4);} h2,.h2{font:550 var(--t-h2)/1.12 var(--font-display);letter-spacing:-0.01em;margin:0 0 var(--s-4);} h3,.h3{font:550 var(--t-h3)/1.2 var(--font-display);letter-spacing:-0.005em;margin:0 0 var(--s-3);} h4,.h4{font:550 var(--t-h4)/1.3 var(--font-display);margin:0 0 var(--s-3);} p{margin:0 0 var(--s-4);} /* Title Case — scoped to headings + primary nav only; body copy stays as written. The top-level mega-menu labels are