/* ============================================================ YUKIMURO — design tokens No accent colour anywhere. The only colour on this site is the photography. Selected states are solid ink fills. ============================================================ */ :root { /* ---- colour: light ground (cold off-white, grey-green cast) ---- */ --paper: #E8E9E6; --paper-2: #DEDFDB; --paper-3: #D3D5D0; --ink: #15181A; --ink-2: #2A2E2F; --mute: #7E8482; --line: rgba(21, 24, 26, 0.14); --line-soft: rgba(21, 24, 26, 0.07); --line-strong: rgba(21, 24, 26, 0.32); /* semantic aliases — everything downstream uses these */ --bg: var(--paper); --bg-2: var(--paper-2); --bg-3: var(--paper-3); --fg: var(--ink); --fg-2: var(--ink-2); --fg-mute: var(--mute); --rule: var(--line); --rule-soft: var(--line-soft); --rule-strong: var(--line-strong); --fill: var(--ink); /* selected / active fill */ --on-fill: var(--paper); /* placeholder tone for un-shot photography */ --shot-bg: #D9DBD7; --shot-fg: rgba(21, 24, 26, 0.30); /* ---- type ---- */ --sans: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; --serif: "Newsreader", "Iowan Old Style", Georgia, serif; --jp: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif; /* fluid scale — 1440px reference */ --t-display: clamp(3.1rem, 7.6vw, 7.2rem); /* hero */ --t-h1: clamp(2.4rem, 5.4vw, 5rem); /* chapter heads */ --t-h2: clamp(1.75rem, 3.2vw, 2.9rem); /* sub heads */ --t-h3: clamp(1.2rem, 1.7vw, 1.5rem); --t-lead: clamp(1.05rem, 1.42vw, 1.34rem);/* opening paragraphs */ --t-body: clamp(0.95rem, 1.02vw, 1.03rem); --t-small: 0.8125rem; --t-micro: 0.6875rem; /* tracked caps / data */ --track-caps: 0.19em; --track-caps-wide: 0.34em; --track-display: -0.035em; /* ---- layout ---- */ --gutter: clamp(1.25rem, 4.4vw, 4.5rem); --col-gap: clamp(1.25rem, 2.2vw, 2.25rem); --measure: 34ch; --measure-wide: 52ch; --chapter-pad-y: clamp(4.5rem, 11vh, 9rem); --stack-sm: clamp(0.75rem, 1vw, 1rem); --stack-md: clamp(1.5rem, 2.6vw, 2.5rem); --stack-lg: clamp(3rem, 6vw, 5.5rem); --stack-xl: clamp(5rem, 11vw, 10rem); /* ---- motion ---- */ --ease: cubic-bezier(0.22, 1, 0.36, 1); /* out-expo-ish */ --ease-io: cubic-bezier(0.65, 0.02, 0.16, 1); /* in-out, for curtains */ --ease-soft: cubic-bezier(0.33, 0.9, 0.25, 1); --d-fast: 240ms; --d-base: 620ms; --d-slow: 900ms; --d-wipe: 980ms; --d-theme: 700ms; --nav-h: 4.75rem; } /* ---- colour: dark ground. Set on at the baths chapter. ---- */ :root[data-theme="dark"] { --bg: #0F1213; --bg-2: #171B1C; --bg-3: #1F2425; --fg: #E8E9E6; --fg-2: #C3C7C4; --fg-mute: #7C8280; --rule: rgba(232, 233, 230, 0.16); --rule-soft: rgba(232, 233, 230, 0.075); --rule-strong: rgba(232, 233, 230, 0.36); --fill: #E8E9E6; --on-fill: #0F1213; --shot-bg: #1B1F20; --shot-fg: rgba(232, 233, 230, 0.26); } /* ---- The inversion ---- Where color-mix is available, js/scroll.js scrubs --inv from 0 to 1 across the approach to the baths chapter and every semantic token interpolates continuously — the whole page darkens with the scroll. The [data-theme="dark"] attribute is still set past the midpoint (for the theme-color meta and as the value source above), and this block deliberately restates both selectors so it wins the cascade at either end. */ @supports (color: color-mix(in oklab, red calc(50% * 1), blue)) { :root, :root[data-theme="dark"] { --mix: calc(var(--inv, 0) * 100%); --bg: color-mix(in oklab, var(--paper), #0F1213 var(--mix)); --bg-2: color-mix(in oklab, var(--paper-2), #171B1C var(--mix)); --bg-3: color-mix(in oklab, var(--paper-3), #1F2425 var(--mix)); --fg: color-mix(in oklab, var(--ink), #E8E9E6 var(--mix)); --fg-2: color-mix(in oklab, var(--ink-2), #C3C7C4 var(--mix)); --fg-mute: color-mix(in oklab, var(--mute), #7C8280 var(--mix)); --rule: color-mix(in oklab, rgba(21,24,26,0.14), rgba(232,233,230,0.16) var(--mix)); --rule-soft: color-mix(in oklab, rgba(21,24,26,0.07), rgba(232,233,230,0.075) var(--mix)); --rule-strong: color-mix(in oklab, rgba(21,24,26,0.32), rgba(232,233,230,0.36) var(--mix)); --fill: color-mix(in oklab, var(--ink), #E8E9E6 var(--mix)); --on-fill: color-mix(in oklab, var(--paper), #0F1213 var(--mix)); --shot-bg: color-mix(in oklab, #D9DBD7, #1B1F20 var(--mix)); --shot-fg: color-mix(in oklab, rgba(21,24,26,0.30), rgba(232,233,230,0.26) var(--mix)); } } /* Without color-mix the flip is binary, so it is smoothed here as one crossfade — every opaque surface must be in this list or it snaps a frame ahead of the type. Scrubbed values must NOT be transitioned (they would rubber-band), hence the guard. */ @supports not (color: color-mix(in oklab, red calc(50% * 1), blue)) { html { transition: background-color var(--d-theme) var(--ease-io); } body, .chapter, .rule, .hair, .nav, .nav a, .chapter-rail, .shot, .shot__frame, .shot__ph span, .shot__cap, .cellarboard, .protocol, .cardnote, .spec, .spec td, .spec th { transition: background-color var(--d-theme) var(--ease-io), border-color var(--d-theme) var(--ease-io), color var(--d-theme) var(--ease-io); } } @media (prefers-reduced-motion: reduce) { :root { --d-fast: 1ms; --d-base: 1ms; --d-slow: 1ms; --d-wipe: 1ms; --d-theme: 1ms; } }