/* ═══════════════════════════════════════════════════════════════════ styles.css — JOYUS STUDIO design system This file is the single source of truth for tokens and primitives. Every page on the site links it. The old DM Serif / DM Sans / warm-gray editorial-wing system was retired on 2026-05-20. The legacy class definitions that used to live here are GONE — pages that haven't been redesigned will look broken (no nav-bar styling, no 4-col footer, no per-hub hero gradient). Those pages wear a `

` sticker immediately after `` so the breakage reads as intentional. Migrate one WIP page at a time to the new primitives. See DESIGN-LANGUAGE.md (repo root) for the full audit. ═══════════════════════════════════════════════════════════════════ */ /* ── Reset ───────────────────────────────────────────────────────── */ * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } img { max-width: 100%; height: auto; display: block; } ul, ol { list-style: none; } /* ── Tokens ──────────────────────────────────────────────────────── */ :root { --bg: #FAF7F2; --ink: #2C3544; --ink-soft: #54606F; --ink-fade: #8892A0; --rule: rgba(44, 53, 68, 0.12); --pink: #E91E7B; --cyan: #4FC4CF; --yellow: #F2C94A; --white: #FFFFFF; --sans: 'Space Grotesk', system-ui, -apple-system, sans-serif; --hand: 'Caveat', cursive; --x: clamp(1.5rem, 4vw, 3rem); } /* ── Per-page accent (set on ) ─────────────── */ body[data-accent="pink"] { --accent: var(--pink); } body[data-accent="cyan"] { --accent: var(--cyan); } body[data-accent="yellow"] { --accent: var(--yellow); } body:not([data-accent]) { --accent: var(--pink); } /* ── Body baseline ───────────────────────────────────────────────── */ body { font-family: var(--sans); color: var(--ink); background: var(--bg); line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { color: inherit; text-decoration: none; } a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* Visually hidden — offscreen text that screen readers still read. Used for headings or labels that shouldn't appear in the visual design but are needed for semantic structure (e.g. the homepage's

). / .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } / Skip-to-content (accessibility) / .skip-to-content { position: absolute; left: -9999px; top: 0; z-index: 999; padding: 0.75rem 1.5rem; background: var(--accent); color: #fff; font-weight: 600; font-size: 0.9rem; text-decoration: none; border-radius: 0 0 8px 0; } .skip-to-content:focus { left: 0; } / ═══════════════════════════════════════════════════════════════════ PRIMITIVES — namespaced with .j- prefix to avoid colliding with any inline `.hero`, `.card`, `.eyebrow`, etc. that modern pages already carry in their own