/* ========================================================================== tokens.css — single source of truth for the visual system. Every other stylesheet consumes these variables and defines no raw colors, sizes, or timings of its own. Change the look here, once. ========================================================================== */ :root { /* --- Palette: raw ramps (never used directly in components) ----------- */ --ink-950: #0b0b0d; --ink-900: #121214; --ink-850: #17171a; --ink-800: #1e1e22; --ink-700: #2a2a30; --ink-600: #3d3d46; --ink-500: #5b5b66; --ink-400: #8a8a96; --ink-300: #b4b4be; --ink-200: #d6d6dc; --ink-100: #ebebef; --ink-050: #f6f6f8; --white: #ffffff; /* Red — deliberately not orange, which reads as Buddha Jones' mark. Contrast-checked: 600 on light bg 5.9:1, 400 on dark bg 7.1:1, both clearing WCAG AA for normal text. Keep those ratios if you retune. */ --accent-500: #e5342a; --accent-400: #ff6b5e; /* dark-theme accent */ --accent-600: #b8241c; /* light-theme accent */ /* Green — the only non-red hue in the system. It exists solely so a form can say "sent" without borrowing the accent, which on this site means "link" everywhere else. Contrast-checked on --color-bg-sunken: 600 on light 5.7:1, 400 on dark 9.7:1. */ --green-600: #15683d; --green-400: #4fd18b; /* --- Semantic colors: light theme (default) --------------------------- */ --color-bg: var(--ink-050); --color-bg-raised: var(--white); --color-bg-sunken: var(--ink-100); --color-text: var(--ink-900); --color-text-muted: var(--ink-500); --color-text-subtle: var(--ink-400); --color-border: var(--ink-200); --color-border-strong: var(--ink-300); --color-accent: var(--accent-600); --color-accent-hover: var(--accent-500); --color-on-accent: var(--white); --color-overlay: rgb(11 11 13 / 0.55); --color-header-bg: rgb(246 246 248 / 0.82); /* Form feedback. --color-danger is deliberately the accent red: an invalid field and a link share a hue here, so error text is always paired with an icon-free but explicit word ("Something went wrong"), never colour alone. */ --color-success: var(--green-600); --color-danger: var(--color-accent); /* --- Ink over artwork -------------------------------------------------- These sit on top of a photograph, not on the page background, so they are the one group that is deliberately NOT redefined per theme: the image underneath does not get lighter in light mode. Defining them once here is intentional — do not "fix" it by adding dark-theme overrides. --color-media-scrim, --color-media-scrim-soft, --color-on-media and --color-on-media-muted all dress the landing hero, whose type sits over a blurred reel. The rest went idle when .piece-nav stopped setting type over artwork and when the /work/ card and its play badge were retired; they are kept because the next page that puts a caption on an image will want them. Delete them if that never happens. ---------------------------------------------------------------------- */ --color-media-scrim: rgb(11 11 13 / 0.86); /* Softer variant for artwork that is meant to stay visible through the scrim — a blurred backdrop rather than a plain darkening layer. */ --color-media-scrim-soft: rgb(11 11 13 / 0.58); --color-on-media: var(--white); --color-on-media-muted: rgb(255 255 255 / 0.78); /* Drop shadow for type over artwork: a tight dark edge for letter definition plus a wide soft haze to hold the text together over a bright patch. */ --shadow-text: 0 1px 2px rgb(11 11 13 / 0.90), 0 2px 14px rgb(11 11 13 / 0.65); /* Blur radius for a backdrop image sitting behind type. */ --blur-media: 16px; /* Blur for the landing hero's backdrop reel — the default for the knob the markup overrides per page (see the hero block in index.html). UNITLESS on purpose. home.css feeds this one number into two places: the blur radius, and the scale that hides the transparent edge a CSS blur leaves behind. Those have to move together or a heavy blur shows bare corners, and CSS cannot divide one length by another to derive the second from the first — so the number carries no unit and each use multiplies it into what it needs. Set it as a plain integer: 16, not 16px. */ --hero-blur: 16; /* --- Typography ------------------------------------------------------- */ --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-display: "Fraunces", ui-serif, Georgia, "Times New Roman", serif; /* Pofo-flavoured alternative display face, used on piece pages. Swap --font-display-alt back to var(--font-display) to unify the site. */ --font-display-alt: "Montserrat", var(--font-sans); --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; /* Fluid type scale — clamp(min, preferred, max), 1.250 ratio */ --text-xs: 0.78rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: clamp(1.06rem, 0.30vw + 1.00rem, 1.20rem); --text-xl: clamp(1.25rem, 0.55vw + 1.14rem, 1.50rem); --text-2xl: clamp(1.55rem, 1.05vw + 1.34rem, 2.10rem); --text-3xl: clamp(1.95rem, 1.90vw + 1.57rem, 2.90rem); --text-4xl: clamp(2.45rem, 3.30vw + 1.79rem, 4.00rem); --text-5xl: clamp(3.00rem, 5.50vw + 1.90rem, 5.50rem); --leading-tight: 1.12; --leading-snug: 1.30; --leading-normal: 1.62; --tracking-tight: -0.02em; --tracking-wide: 0.08em; --tracking-caps: 0.14em; /* --- Spacing: 4px base, used for every margin/padding/gap ------------- */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4rem; --space-9: 6rem; --space-10: 8rem; /* Vertical rhythm between full-width page sections. Tightened on 2026-08-28 from clamp(3rem, 7vw, 8rem). At 1440 that put 8rem above and 8rem below every boundary — 16rem of empty background between two sections, enough that the next one was off screen and the page read as finished. 5vw lands ~4.5rem at 1440 and ~2.7rem at 900, so the top of the next section is always in view before the current one stops. Change it here and the whole site moves together: .section, .piece-section, .related-work and the connect band all read this. */ --section-y: clamp(var(--space-6), 5vw, var(--space-9)); /* --- Layout ----------------------------------------------------------- */ --width-page: 84rem; /* outer max width */ --width-text: 42rem; /* comfortable reading measure */ --gutter: clamp(var(--space-4), 4vw, var(--space-7)); --header-h: 4.5rem; /* --- Borders, radii, elevation ---------------------------------------- */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 16px; --radius-full: 999px; --shadow-sm: 0 1px 2px rgb(11 11 13 / 0.06), 0 1px 3px rgb(11 11 13 / 0.08); --shadow-md: 0 4px 10px rgb(11 11 13 / 0.07), 0 12px 28px rgb(11 11 13 / 0.09); --shadow-lg: 0 10px 24px rgb(11 11 13 / 0.10), 0 30px 60px rgb(11 11 13 / 0.14); /* --- Motion ----------------------------------------------------------- */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-inout: cubic-bezier(0.65, 0, 0.35, 1); --dur-fast: 140ms; --dur-med: 260ms; --dur-slow: 520ms; /* --- Stacking order — every z-index in the site comes from here ------- */ --z-base: 1; --z-sticky: 100; --z-header: 200; --z-overlay: 300; --z-modal: 400; } /* --- Dark theme ----------------------------------------------------------- Two triggers, same declarations: the OS preference (when the user has made no explicit choice) and an explicit data-theme="dark" set by the toggle. `:not([data-theme="light"])` lets an explicit light choice beat the OS. -------------------------------------------------------------------------- */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --color-bg: var(--ink-950); --color-bg-raised: var(--ink-850); --color-bg-sunken: var(--ink-900); --color-text: var(--ink-050); --color-text-muted: var(--ink-400); --color-text-subtle: var(--ink-500); --color-border: var(--ink-700); --color-border-strong: var(--ink-600); --color-accent: var(--accent-400); --color-accent-hover: var(--accent-500); --color-on-accent: var(--ink-950); --color-overlay: rgb(0 0 0 / 0.70); --color-header-bg: rgb(11 11 13 / 0.78); --color-success: var(--green-400); --color-danger: var(--color-accent); --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.40); --shadow-md: 0 4px 10px rgb(0 0 0 / 0.45), 0 12px 28px rgb(0 0 0 / 0.35); --shadow-lg: 0 10px 24px rgb(0 0 0 / 0.50), 0 30px 60px rgb(0 0 0 / 0.45); } } :root[data-theme="dark"] { --color-bg: var(--ink-950); --color-bg-raised: var(--ink-850); --color-bg-sunken: var(--ink-900); --color-text: var(--ink-050); --color-text-muted: var(--ink-400); --color-text-subtle: var(--ink-500); --color-border: var(--ink-700); --color-border-strong: var(--ink-600); --color-accent: var(--accent-400); --color-accent-hover: var(--accent-500); --color-on-accent: var(--ink-950); --color-overlay: rgb(0 0 0 / 0.70); --color-header-bg: rgb(11 11 13 / 0.78); --color-success: var(--green-400); --color-danger: var(--color-accent); --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.40); --shadow-md: 0 4px 10px rgb(0 0 0 / 0.45), 0 12px 28px rgb(0 0 0 / 0.35); --shadow-lg: 0 10px 24px rgb(0 0 0 / 0.50), 0 30px 60px rgb(0 0 0 / 0.45); } /* Tell the UA to paint form controls and scrollbars for the active theme. */ :root { color-scheme: light; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; } } :root[data-theme="dark"] { color-scheme: dark; } :root[data-theme="light"] { color-scheme: light; }