/* Base resets, typography defaults, shared utilities, buttons, eyebrows. */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--kos-bone); color: var(--kos-coal); scroll-behavior: smooth; } body { /* `clip` instead of `hidden` so descendants with `position: sticky` don't lose their stick (overflow-x: hidden creates a scroll container, which `clip` does not). Falls back to hidden in browsers that don't support clip (Safari < 16). */ overflow-x: clip; font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } section { scroll-margin-top: 88px; } .shell { max-width: 1320px; margin: 0 auto; padding: 0 40px; } h1, h2, h3, h4, .display { font-family: var(--font-display); font-weight: 400; line-height: var(--lh-heading); letter-spacing: var(--tracking-tight); text-transform: uppercase; margin: 0; } h1 { font-size: var(--fs-h1); line-height: var(--lh-display); } h2 { font-size: var(--fs-h2); } h3 { font-size: var(--fs-h3); } h4 { font-size: var(--fs-h4); letter-spacing: var(--tracking-label); } p { font-size: var(--fs-body); line-height: var(--lh-body); margin: 0 0 var(--s-4) 0; text-wrap: pretty; } a { color: inherit; text-decoration: none; } ::selection { background: var(--kos-brick); color: var(--kos-bone); } /* ---- Eyebrow / label ------------------------------------------------- */ .eyebrow { font-family: var(--font-body); font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--kos-brick); margin: 0 0 12px; } .eyebrow.cool { color: var(--kos-cobalt); } .eyebrow.ink { color: var(--kos-coal); } .eyebrow.bone { color: var(--kos-bone); } /* ---- Buttons --------------------------------------------------------- */ .btn { font-family: var(--font-body); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; font-size: 11px; padding: 15px 22px; border: 2px solid var(--kos-coal); background: var(--kos-brick); color: var(--kos-bone); border-radius: 2px; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; transition: background 140ms var(--ease-out), color 140ms var(--ease-out), transform 80ms var(--ease-out); text-decoration: none; } .btn:hover { background: var(--kos-coal); color: var(--kos-bone); } .btn:active { transform: translateY(1px); box-shadow: var(--shadow-press); } .btn.sec { background: transparent; color: var(--kos-coal); } .btn.sec:hover { background: var(--kos-brick); color: var(--kos-bone); border-color: var(--kos-brick); } .btn.sm { padding: 11px 16px; font-size: 10px; } .btn.ghost { background: transparent; color: var(--kos-bone); border-color: var(--kos-bone); } .btn.ghost:hover { background: var(--kos-bone); color: var(--kos-coal); } .textlink { font-family: var(--font-body); font-weight: 700; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--kos-coal); border-bottom: 2px solid var(--kos-coal); padding-bottom: 2px; cursor: pointer; display: inline-flex; gap: 10px; align-items: center; background: none; border-left: 0; border-right: 0; border-top: 0; } .textlink.inv { color: var(--kos-bone); border-bottom-color: var(--kos-bone); } .textlink.cool { color: var(--kos-cobalt); border-bottom-color: var(--kos-cobalt); } .textlink:hover { color: var(--kos-brick); border-bottom-color: var(--kos-brick); } /* ---- Lenis smooth scroll (only active when JS initializes Lenis; respects prefers-reduced-motion via main.js) ---- When Lenis is running, it adds `lenis lenis-smooth` classes to . These rules let Lenis own the scroll behavior cleanly. */ html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; } .lenis.lenis-stopped { overflow: clip; } /* Visually hidden but accessible */ .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; } /* ---- Focus states (keyboard-only via :focus-visible) ---------------- */ /* Modern browsers: :focus-visible matches keyboard focus, NOT mouse clicks — so mouse users don't see outlines, keyboard users get clear indicators. */ :focus { outline: none; } :focus-visible { outline: 2px solid var(--kos-brick); outline-offset: 3px; border-radius: 1px; } /* On dark / brick-red backgrounds, switch to bone for contrast */ .footer :focus-visible, .listen :focus-visible, .menu-drawer :focus-visible { outline-color: var(--kos-bone); } /* Platform tiles are flush against neighbours — draw outline inside */ .platform:focus-visible { outline: 2px solid var(--kos-bone); outline-offset: -4px; } /* Filled .btn — give the brick button a coal outline so it stands out against the red background of Listen panel and against bone elsewhere */ .btn:focus-visible { outline: 2px solid var(--kos-coal); outline-offset: 3px; } .btn.ghost:focus-visible, .listen .btn:focus-visible { outline-color: var(--kos-bone); } /* ---- Skip link (keyboard accessibility) ----------------------------- */ .skip-link { position: absolute; top: 0; left: 0; background: var(--kos-coal); color: var(--kos-bone); padding: 12px 20px; font-family: var(--font-body); font-weight: 700; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none; transform: translateY(-110%); transition: transform 200ms var(--ease-out); z-index: 100; } .skip-link:focus, .skip-link:focus-visible { transform: translateY(0); outline: 2px solid var(--kos-brick); outline-offset: -2px; }