/* ============ Design tokens ============ */ :root { --color-cream: #FDF1EE; --color-primary: #885784; --color-deep-purple: #602B7A; --color-white: #FFFFFF; --color-ink: #222941; --color-slate: #5C6378; --color-border: #E8DED1; --color-muted: #878BAE54; --font-heading: 'Roboto Slab', Georgia, serif; --font-body: 'Rubik', -apple-system, BlinkMacSystemFont, sans-serif; --radius-pill: 9999px; --radius-lg: 24px; --radius-md: 16px; --shadow-card: 0px 4px 3px rgba(0,0,0,0.1), 0px 2px 2px rgba(0,0,0,0.1); --shadow-soft: 0px 4px 20px -10px rgba(0,0,0,0.08); --container-max: 1280px; --gutter: clamp(20px, 6vw, 96px); --ease: cubic-bezier(0.16, 1, 0.3, 1); --dur-md: 0.6s; } /* ============ Reset ============ */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: auto; overflow-x: clip; width: 100%; } body, h1, h2, h3, h4, p, ul, figure { margin: 0; } ul { padding: 0; list-style: none; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; } svg { display: block; } /* One continuous canvas instead of stacked colored blocks: cream/white wash blended across the whole document, positioned by percentage so it lines up with section boundaries at any viewport size. --page-gradient is page-specific — each page measures its own section boundaries (see rules.txt "Background System") and sets it in a small inline