/* --------------------------------------------------- Victoria Clarke — Art & Therapy Tokens --------------------------------------------------- */ :root { --paper: #fdefe7; --paper-deep: #f5decf; --ink: #24404b; --ink-soft: #4a6d7e; --moss: #146b7a; --moss-deep: #0f4a54; --moss-tint: #dceef0; --clay: #794c10; --clay-deep: #5c3a0c; --peach: #fab085; --peach-deep: #f99b65; --sand-line: #ead9ce; --cream-card: #fff8f2; --marigold: #edb65f; --olive: #8a9463; --font-display: "Instrument Serif", Georgia, serif; --font-body: "Karla", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --max-width: 1120px; --radius: 22px; } /* On wide-gamut (P3) displays, swap the key accent colors for slightly richer equivalents — same hue and lightness, ~16% more chroma than sRGB allows. Everything else keeps the sRGB hex above as a universal fallback. */ @supports (color: color(display-p3 1 1 1)) { @media (color-gamut: p3) { :root { --moss: color(display-p3 0.1500 0.4183 0.4859); --moss-deep: color(display-p3 0.1031 0.2893 0.3346); --clay: color(display-p3 0.4651 0.2973 0.0525); --marigold: color(display-p3 0.9175 0.7144 0.3601); } } } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background-color: var(--paper); background-image: url("assets/paper-texture-light.webp"); background-size: 180px 180px; background-repeat: repeat; color: var(--ink); font-family: var(--font-body); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; font-variant-ligatures: common-ligatures discretionary-ligatures contextual; font-feature-settings: "liga" 1, "dlig" 1, "clig" 1, "calt" 1; } main { flex: 1; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } } ::selection { background: var(--marigold); color: var(--ink); } /* --------------------------------------------------- Scroll / entrance reveal (no-JS visitors: see everything immediately, since .reveal only hides content once JS confirms it can also reveal it — enforced via the