/* ═══════════════════════════════════════════════════════════════ HOLOCENE v10 — "DITHER" design system A plotted computer-art print · live 1-bit dithering · generative glyph field · registration marks & stamps · Print/Negative/Riso Shared by every page; page-specific rules live in each page. ═══════════════════════════════════════════════════════════════ */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } /* ── palette ── SPECTRA is the DEFAULT plate — the view a cold visitor gets, and therefore the one WCAG 2.1 AA is scoped to. It conforms: body ink 19.60:1, muted 5.33:1, focus 6.32:1, every accent pairing over 4.5:1 (3:1 for large text and non-text). PRINT, NEGATIVE, FLUORO, MERIDIAN, BLUEPRINT, OXBLOOD and FOREST also pass — each carries its measured ratios beside its tokens below. RISO is a deliberately non-conforming opt-in plate, held outside the conformance scope on purpose. (This paragraph used to name PRINT as the default, which stopped being true when the default moved to spectra. It is worth keeping accurate: it is what tells the next person which single plate an accessibility audit must clear.) --focus is separate from --acc precisely so a skin may take its accent somewhere illegible without taking the focus ring with it. Every skin must define a --focus that clears 3:1 against its own --paper. Non-negotiable: the focus ring is how a keyboard user finds the way back out. */ :root { --paper: #f2efe7; --ink: #16140f; --mute: #716d5a; /* 4.53:1 on --paper. Was #77735f = 4.15:1 (failed) */ --line: #16140f; --acc: #5b00ff; --acc-ink: #f2efe7; /* text over accent fills */ --acc-on-ink: #b48cff;/* accent ON an --ink surface (ribbon). 7.13:1 */ --acc2: var(--acc); /* second highlight. Follows --acc, so a plate that does not name its own gets its OWN highlight here — it was written as the literal #5b00ff, which meant negative and riso showed print's purple instead of theirs. fluoro and spectra still take it somewhere else. */ --focus: #5b00ff; /* 6.33:1 on --paper */ /* EARLY / LATE on a night that carries two shows. Two pens of their own on every plate: EARLY is always the WARMER of the two (a red, a maroon, an amber) and LATE the cooler (a blue, a teal, a lavender), so the pair reads by temperature before it reads by word. Neither is the pen the dates already use, and neither is --acc, so the marker reads as a different KIND of fact and not as more date. Every skin's pair clears AA as type on its own --paper — that is the only way the marks are used (see .spec-when, .crow-mark, .spec-mark). */ --mark-early: #b8410a;/* vermilion. 4.81:1 on --paper */ --mark-late: #1a5f7a;/* petrol blue. 6.17:1 — not the cobalt or green the dates take */ /* How far the cursor reaches: the hero's x-ray disc (--xr). */ --prox: 234px; /* How close the cursor has to come to a plate before its colour comes up through the dither, measured to the plate's nearest edge. Two thirds of the disc: at the disc's own reach the posters were lighting up before the cursor had really arrived. */ --prox-plate: 156px; --ev-a0: #5b00ff; --ev-a1: #16140f; --ev-a2: #5b00ff; --ev-a3: #16140f; --disp: 'Bricolage Grotesque', 'Arial Black', sans-serif; --mono: 'Martian Mono', ui-monospace, monospace; --pad: clamp(1.1rem, 3.6vw, 3.6rem); --ease: cubic-bezier(0.22, 1, 0.36, 1); } /* PRINT — the bare plate: off-white paper, near-black ink, and a plotter's pen rack. It stayed a one-pen print for a long time (violet, and nothing else) while SPECTRA and MERIDIAN each carried five, which made the plate with the least colour also the one that had earned the most. Five pens now: the same electric violet leads, and beside it magenta, vermilion, cobalt and a pen green — all saturated, all DARK, because on this paper a pen is ink and never a fill. Every one clears AA as type on the paper (violet 6.33:1, magenta 4.89:1, vermilion 4.81:1, cobalt 6.36:1, green 4.74:1), and paper type clears the same ratios on any of them as a solid. Where SPECTRA blocks and MERIDIAN draws, PRINT writes: the colour is in the letters and the frames, one pen per element, and the page never fills a shape with anything but the ink or a pen. Scoped with :not([data-skin]) because PRINT has no attribute — it IS the absence of one. Two tints for the ribbon bar, which is ink and needs light colour on it (11.33:1 and 7.13:1). */ :root { --p-violet: #5b00ff; --p-mag: #c8007a; --p-verm: #b8410a; --p-cob: #0047d6; --p-green: #0a7a3a; --p-mint-on-ink: #5ee39a; } html:not([data-skin]) { --acc2: var(--p-green); /* WHAT'S NEXT, the stamp, the sparks: green, not violet again */ --ev-a0: #5b00ff; --ev-a1: #c8007a; --ev-a2: #0047d6; --ev-a3: #0a7a3a; } /* Wordmark: hover turns over to magenta, which is the pen violet sits beside. */ html:not([data-skin]) .bar-logo:hover { background-color: var(--p-mag); } /* Nav. The base hover is an ink frame; here each item draws its frame AND its label in its own pen, so the bar is a rack of five and shows one at a time. The page you are on keeps a violet frame with an ink label, which is the one combination hovering never produces. */ html:not([data-skin]) .nav-links a:not(.nav-cta):nth-of-type(5n+1):hover { color: var(--p-violet); border-color: var(--p-violet); } html:not([data-skin]) .nav-links a:not(.nav-cta):nth-of-type(5n+2):hover { color: var(--p-mag); border-color: var(--p-mag); } html:not([data-skin]) .nav-links a:not(.nav-cta):nth-of-type(5n+3):hover { color: var(--p-verm); border-color: var(--p-verm); } html:not([data-skin]) .nav-links a:not(.nav-cta):nth-of-type(5n+4):hover { color: var(--p-cob); border-color: var(--p-cob); } html:not([data-skin]) .nav-links a:not(.nav-cta):nth-of-type(5n+5):hover { color: var(--p-green); border-color: var(--p-green); } html:not([data-skin]) .nav-links a:not(.nav-cta).active { color: var(--ink); border-color: var(--p-violet); } /* BOOK THE ROOM flips to vermilion, so the bar's hovers are not all violet. */ html:not([data-skin]) .nav-links a.nav-cta:hover { background: var(--p-verm); color: var(--paper); } /* Fullscreen menu — one pen per line. */ html:not([data-skin]) .menu a.menu-link:nth-child(5n+1):hover { color: var(--p-violet); } html:not([data-skin]) .menu a.menu-link:nth-child(5n+2):hover { color: var(--p-mag); } html:not([data-skin]) .menu a.menu-link:nth-child(5n+3):hover { color: var(--p-verm); } html:not([data-skin]) .menu a.menu-link:nth-child(5n+4):hover { color: var(--p-cob); } html:not([data-skin]) .menu a.menu-link:nth-child(5n+5):hover { color: var(--p-green); } /* Highlighted words. The hero and the plate captions keep the violet; every other heading family takes a different pen, so the rack is visible down a page and no two neighbouring sections are underlined in the same colour. */ html:not([data-skin]) .mdiv h2 i, html:not([data-skin]) .prose h2 i { color: var(--p-cob); } html:not([data-skin]) .cta-band h2 i { color: var(--p-mag); } html:not([data-skin]) .tech-cap i, html:not([data-skin]) .stat-num i { color: var(--p-verm); } html:not([data-skin]) .hh h2 i, html:not([data-skin]) .hh h2 .t-serif { color: var(--p-mag); } html:not([data-skin]) .cta-band::before { color: var(--p-green); } html:not([data-skin]) .cta-band::after { color: var(--p-cob); } html:not([data-skin]) .hero-side u, html:not([data-skin]) .hero-annot .desc u { text-decoration-color: var(--p-mag); text-decoration-thickness: 3px; } /* Dates: pen type, rotating down the grid. The list view takes cobalt so the two views of a month are not the same page. */ html:not([data-skin]) .spec:nth-child(4n+2) .spec-date { color: var(--p-mag); } html:not([data-skin]) .spec:nth-child(4n+3) .spec-date { color: var(--p-green); } html:not([data-skin]) .spec:nth-child(4n+4) .spec-date { color: var(--p-cob); } html:not([data-skin]) .crow-date { color: var(--p-cob); } /* Solids: buttons stay violet, the newsletter goes green, the venue strip marks "here" in cobalt. Paper type on all three. */ @media (hover: hover) { html:not([data-skin]) .newsletter-form button:hover { background: var(--p-green); color: var(--paper); } } html:not([data-skin]) ::selection { background: var(--p-mag); color: var(--paper); } /* Ribbon: the bar is ink, so the shows run in a mint tint beside the lavender lead — two tints, not one, so the belt is not a single colour of type. */ html:not([data-skin]) .ribbon-track span.hot { color: var(--p-mint-on-ink); } /* Plot layer — decoration, so the pens can go on at low strength. */ html:not([data-skin]) .plot .ring { border-color: color-mix(in srgb, var(--p-mag) 45%, transparent); } html:not([data-skin]) .plot .ring::after { border-color: color-mix(in srgb, var(--p-cob) 35%, transparent); } html:not([data-skin]) .plot .cross-h { background: color-mix(in srgb, var(--p-green) 35%, transparent); } html:not([data-skin]) .plot .cross-v { background: color-mix(in srgb, var(--p-violet) 45%, transparent); } html:not([data-skin]) .plot .reg { border-color: var(--p-violet); opacity: 1; } html:not([data-skin]) .quote { border-left-color: var(--p-verm); } html:not([data-skin]) .hh { border-color: var(--p-green); } html:not([data-skin]) .dmap .pin .ring { border-color: var(--p-mag); } /* Footer heads, one pen each. */ html:not([data-skin]) .foot-col:nth-child(1) .foot-col-title { color: var(--p-violet); } html:not([data-skin]) .foot-col:nth-child(2) .foot-col-title { color: var(--p-mag); } html:not([data-skin]) .foot-col:nth-child(3) .foot-col-title { color: var(--p-green); } html:not([data-skin]) .newsletter-label { color: var(--p-cob); } /* ── skins ── */ [data-skin="negative"] { --paper: #0e0d0a; --ink: #f2efe7; --mute: #8b8776; --line: #f2efe7; --acc: #9a5cff; --acc-ink: #0e0d0a; --acc-on-ink: #5b00ff;/* --ink is the LIGHT colour here, so this goes dark. 6.33:1 */ --focus: #9a5cff; /* 4.95:1 on --paper */ --mark-early: #ffb245;/* warm amber. 10.83:1 on the near-black stock */ --mark-late: #7ec4ff;/* sky blue. 10.39:1 */ --ev-a0: #9a5cff; --ev-a1: #f2efe7; --ev-a2: #9a5cff; --ev-a3: #f2efe7; } /* RISO — opt-in decorative plate. Its fluoro accent is 2.92:1 on paper and its --mute is 3.08:1; both are deliberate and out of conformance scope. The two things that are NOT optional are wired below: the focus ring falls back to the blue ink (8.31:1), and the plate picker — the way back to PRINT — drops its muted treatment so it stays legible from inside this skin. */ [data-skin="riso"] { --paper: #efe9db; --ink: #1c33a8; --mute: #7181c4; --line: #1c33a8; --acc: #ff3d1f; --acc-ink: #efe9db; --acc-on-ink: #ff8f6b;/* 4.50:1 on the blue ink bar */ --focus: #1c33a8; /* 8.31:1 on --paper — NOT --acc, which is 2.92:1 */ --mark-early: #9e1b1b;/* maroon. 6.61:1 — a dark red, not the fluoro red --acc */ --mark-late: #0f6b60;/* deep teal. 5.27:1 — neither the blue ink nor the red */ --ev-a0: #ff3d1f; --ev-a1: #1c33a8; --ev-a2: #ff3d1f; --ev-a3: #1c33a8; } [data-skin="riso"] .skin-btn, [data-skin="riso"] .skin-picker .lbl { color: var(--ink); } /* FLUORO — near-black stock, one very bright ink. The whole plate is built so the brightness costs nothing in legibility: on this ground the lime is 16.52:1 and the body text 17.17:1, both far past AA. Second highlight is a cold cyan (11.74:1) so the two brights read as separate passes of the press rather than one glow. */ [data-skin="fluoro"] { /* Neutral since 20 Oct 2026: white, black and grey with no tint, so only the neons carry colour. Was lime-tinted: --ink/--line #e9f4de, --paper and --acc-ink #0b0d08, --mute #93a389. The greys keep the old brightness, so every contrast ratio below is unchanged (grey on paper 7.30:1). */ --paper: #0c0c0c; --ink: #ffffff; --mute: #9e9e9e; --line: #ffffff; --acc: #c8ff00; --acc-ink: #0c0c0c; --acc-on-ink: #3d5c00;/* --ink is the LIGHT colour here, so this goes dark. 7.69:1 */ --acc2: #00e0d5; --focus: #c8ff00; /* 16.52:1 on --paper */ --mark-early: #ff8a00;/* the orange tube. 8.26:1 */ --mark-late: #4db8ff;/* a sky-blue tube. 8.94:1 — not the cyan or lavender the dates take */ --ev-a0: #c8ff00; --ev-a1: #00e0d5; --ev-a2: #c8ff00; --ev-a3: #00e0d5; } /* ── FLUORO: five tubes, not one ── A near-black ground is the one stock where every bright is also legible type, so this plate does not need SPECTRA's two registers: the same five neons are fills with dark type through them AND type on the dark, and both directions clear AA by a wide margin — lime 16.52:1, cyan 11.74:1, orange 8.26:1, lavender 7.58:1, pink 6.03:1. The lime still leads. The other four are the colours a sign shop keeps beside it. The one surface that is NOT dark is the ribbon bar, which is filled with the light --ink; the two colours for that are pushed down until they hold on it (9.56:1 and 7.69:1). */ [data-skin="fluoro"] { --f-lime: #c8ff00; --f-cyan: #00e0d5; --f-pink: #ff3ea5; --f-orange: #ff8a00; --f-lav: #b78bff; --f-pink-on-ink: #8a0050; --ev-a0: #c8ff00; --ev-a1: #00e0d5; --ev-a2: #ff3ea5; --ev-a3: #ff8a00; } /* Wordmark lit at rest — lime, and it turns pink under the cursor. */ [data-skin="fluoro"] .bar-logo { background-color: var(--f-lime); } [data-skin="fluoro"] .bar-logo:hover { background-color: var(--f-pink); } [data-skin="fluoro"] .bar-logo:hover::before { background-color: var(--paper); } /* Nav: each item fills in its own tube with the dark ground as its type. */ [data-skin="fluoro"] .nav-links a:not(.nav-cta) { transition: color 0.15s, border-color 0.15s, background-color 0.15s; } [data-skin="fluoro"] .nav-links a:not(.nav-cta):hover { color: var(--paper); } [data-skin="fluoro"] .nav-links a:not(.nav-cta):nth-of-type(5n+1):hover { background: var(--f-lime); border-color: var(--f-lime); } [data-skin="fluoro"] .nav-links a:not(.nav-cta):nth-of-type(5n+2):hover { background: var(--f-cyan); border-color: var(--f-cyan); } [data-skin="fluoro"] .nav-links a:not(.nav-cta):nth-of-type(5n+3):hover { background: var(--f-pink); border-color: var(--f-pink); } [data-skin="fluoro"] .nav-links a:not(.nav-cta):nth-of-type(5n+4):hover { background: var(--f-orange); border-color: var(--f-orange); } [data-skin="fluoro"] .nav-links a:not(.nav-cta):nth-of-type(5n+5):hover { background: var(--f-lav); border-color: var(--f-lav); } /* The page you are on: lime frame, no fill, light label. */ [data-skin="fluoro"] .nav-links a:not(.nav-cta).active { color: var(--ink); border-color: var(--f-lime); } [data-skin="fluoro"] .nav-links a.nav-cta:hover { background: var(--f-pink); color: var(--paper); } /* Fullscreen menu — poster type, one tube per line. */ [data-skin="fluoro"] .menu a.menu-link:nth-child(5n+1):hover { color: var(--f-lime); } [data-skin="fluoro"] .menu a.menu-link:nth-child(5n+2):hover { color: var(--f-cyan); } [data-skin="fluoro"] .menu a.menu-link:nth-child(5n+3):hover { color: var(--f-pink); } [data-skin="fluoro"] .menu a.menu-link:nth-child(5n+4):hover { color: var(--f-orange); } [data-skin="fluoro"] .menu a.menu-link:nth-child(5n+5):hover { color: var(--f-lav); } /* Highlighted words: lit type, a different tube per heading family. The hero and the plate captions keep the lime. */ [data-skin="fluoro"] .mdiv h2 i, [data-skin="fluoro"] .prose h2 i { color: var(--f-cyan); } [data-skin="fluoro"] .idx-cap h2 i { color: var(--f-pink); } [data-skin="fluoro"] .cta-band h2 i { color: var(--f-orange); } [data-skin="fluoro"] .tech-cap i, [data-skin="fluoro"] .stat-num i { color: var(--f-lav); } [data-skin="fluoro"] .hh h2 i, [data-skin="fluoro"] .hh h2 .t-serif { color: var(--f-pink); } [data-skin="fluoro"] .cta-band::before { color: var(--f-pink); } [data-skin="fluoro"] .cta-band::after { color: var(--f-orange); } [data-skin="fluoro"] .hero-side u, [data-skin="fluoro"] .hero-annot .desc u { text-decoration-color: var(--f-orange); text-decoration-thickness: 4px; } /* Dates rotate through the tubes; the list view takes lavender. */ [data-skin="fluoro"] .spec:nth-child(4n+2) .spec-date { color: var(--f-pink); } [data-skin="fluoro"] .spec:nth-child(4n+3) .spec-date { color: var(--f-cyan); } [data-skin="fluoro"] .spec:nth-child(4n+4) .spec-date { color: var(--f-orange); } [data-skin="fluoro"] .crow-date { color: var(--f-lav); } /* Solids: lime stays on the buttons; the newsletter goes cyan, "here" on the venue strip goes pink, the CMS banner orange. Dark type on all of them. */ @media (hover: hover) { [data-skin="fluoro"] .newsletter-form button:hover { background: var(--f-cyan); color: var(--paper); } } [data-skin="fluoro"] .cms-banner { background: var(--f-orange); color: var(--paper); } [data-skin="fluoro"] ::selection { background: var(--f-lime); color: var(--paper); } /* Ribbon: the bar is the LIGHT ink, so the shows go to a deep magenta against the deep-green lead — the plate's two tubes, switched off. */ [data-skin="fluoro"] .ribbon-track span.hot { color: var(--f-pink-on-ink); } /* Plot layer — the tubes at low strength under everything. */ [data-skin="fluoro"] .plot .ring { border-color: color-mix(in srgb, var(--f-pink) 55%, transparent); } [data-skin="fluoro"] .plot .ring::after { border-color: color-mix(in srgb, var(--f-lav) 45%, transparent); } [data-skin="fluoro"] .plot .cross-h { background: color-mix(in srgb, var(--f-cyan) 35%, transparent); } [data-skin="fluoro"] .plot .cross-v { background: color-mix(in srgb, var(--f-orange) 55%, transparent); } [data-skin="fluoro"] .plot .reg { border-color: var(--f-lime); opacity: 1; } [data-skin="fluoro"] .quote { border-left-color: var(--f-pink); } [data-skin="fluoro"] .hh { border-color: var(--f-cyan); } [data-skin="fluoro"] .dmap .pin .ring { border-color: var(--f-orange); } /* Footer heads, one tube each. */ [data-skin="fluoro"] .foot-col:nth-child(1) .foot-col-title { color: var(--f-lime); } [data-skin="fluoro"] .foot-col:nth-child(2) .foot-col-title { color: var(--f-cyan); } [data-skin="fluoro"] .foot-col:nth-child(3) .foot-col-title { color: var(--f-pink); } [data-skin="fluoro"] .newsletter-label { color: var(--f-lav); } /* The outlined hero word takes the cyan, so the two brightest tubes share the top of the page. */ [data-skin="fluoro"] .hw-xray { -webkit-text-stroke-color: var(--f-cyan); } /* SPECTRA — white stock, black ink, and the whole house palette let loose on top of it. The base is achromatic on purpose: nothing in the paper or the body text carries a hue, so every colour on the page is an accent doing a job. Two registers, because white paper needs both — BRIGHTS chartreuse, lavender, mint, sky, azure, exactly as the house palette defines them. They are FILLS. Black type sits on them (16.25:1, 10.48:1, 12.58:1, 10.10:1, 5.40:1) — nav hovers, date chips, highlighted words, buttons, the plot layer. DEEPS the same five pushed down until they hold their own as ink on white: azure 6.32:1, violet 6.46:1, green 5.31:1, olive 5.90:1. These are the TYPE colours — anything small and coloured uses one. A bright is never asked to be small text and a deep is never asked to be a fill, so the plate can be as loud as it likes without a single pairing going under AA. Body is 19.60:1, muted 5.33:1, focus 6.32:1. */ [data-skin="spectra"] { --paper: #ffffff; --ink: #111111; --mute: #6b6b6b; --line: #111111; --acc: #2f5fa8; /* deep azure. 6.32:1 on --paper */ --acc-ink: #ffffff; /* type over an --acc fill. 6.32:1 */ --acc-on-ink: #d4ff00;/* the ribbon bar is --ink, so this goes BRIGHT. 16.25:1 */ --acc2: #0b7a5c; /* deep mint. 5.31:1 */ --focus: #2f5fa8; /* 6.32:1 on --paper */ --mark-early: #b8410a;/* vermilion. 5.53:1 — the one warm ink on this plate, on purpose */ --mark-late: #0b7a5c;/* deep mint. 5.31:1 — the dates take violet */ --ev-a0: #2f5fa8; --ev-a1: #5b4bc4; --ev-a2: #0b7a5c; --ev-a3: #5c6b00; /* the brights, named once so the rules below read as colour and not as hex */ --s-chart: #d4ff00; --s-lav: #c4b8ff; --s-mint: #00f0b5; --s-sky: #7ec4ff; --s-az: #4a8ae0; --s-violet: #5b4bc4; --s-olive: #5c6b00; } /* ── SPECTRA: where the colour actually lands ── Scoped to the plate so no other skin inherits any of it. */ /* Wordmark. It is a mask, so it takes a colour the way type does — violet at rest, and it turns over to the deep green on hover rather than to --acc, which is the one colour already carrying the rest of the bar. */ [data-skin="spectra"] .bar-logo { background-color: var(--s-violet); } [data-skin="spectra"] .bar-logo:hover { background-color: var(--acc2); } /* Nav. The hover frame was an empty box changing colour; here it FILLS, and each item owns a different bright — so the bar reads as a row of colour chips that only ever shows one at a time. Type goes to --ink on every one of them, which is what keeps a 1.1:1 chartreuse legible: it is never the ink. */ [data-skin="spectra"] .nav-links a:not(.nav-cta) { transition: color 0.15s, border-color 0.15s, background-color 0.15s; } [data-skin="spectra"] .nav-links a:not(.nav-cta):hover, [data-skin="spectra"] .nav-links a:not(.nav-cta).active { color: var(--ink); } [data-skin="spectra"] .nav-links a:not(.nav-cta):nth-of-type(7n+1):hover { background: var(--s-chart); border-color: var(--s-chart); } [data-skin="spectra"] .nav-links a:not(.nav-cta):nth-of-type(7n+2):hover { background: var(--s-lav); border-color: var(--s-lav); } [data-skin="spectra"] .nav-links a:not(.nav-cta):nth-of-type(7n+3):hover { background: var(--s-mint); border-color: var(--s-mint); } [data-skin="spectra"] .nav-links a:not(.nav-cta):nth-of-type(7n+4):hover { background: var(--s-sky); border-color: var(--s-sky); } [data-skin="spectra"] .nav-links a:not(.nav-cta):nth-of-type(7n+5):hover { background: var(--s-az); border-color: var(--s-az); } [data-skin="spectra"] .nav-links a:not(.nav-cta):nth-of-type(7n+6):hover { background: var(--s-chart); border-color: var(--s-chart); } [data-skin="spectra"] .nav-links a:not(.nav-cta):nth-of-type(7n+7):hover { background: var(--s-lav); border-color: var(--s-lav); } /* The page you are on keeps its frame drawn, in its own colour, with no fill — so "here" and "hovering" never look the same. */ [data-skin="spectra"] .nav-links a:not(.nav-cta).active { border-color: var(--s-violet); } /* BOOK THE ROOM: black block that flips to chartreuse. */ [data-skin="spectra"] .nav-links a.nav-cta:hover { background: var(--s-chart); color: var(--ink); } /* Fullscreen menu — same rotation, one colour per line, so the mobile menu is the bar's colour set at poster size. Large display type, so these can take a bright as the ink itself: the deeps would waste the scale. */ [data-skin="spectra"] .menu a.menu-link:nth-child(7n+1):hover { color: var(--s-violet); } [data-skin="spectra"] .menu a.menu-link:nth-child(7n+2):hover { color: var(--acc2); } [data-skin="spectra"] .menu a.menu-link:nth-child(7n+3):hover { color: var(--acc); } [data-skin="spectra"] .menu a.menu-link:nth-child(7n+4):hover { color: var(--s-olive); } [data-skin="spectra"] .menu a.menu-link:nth-child(7n+5):hover { color: var(--s-violet); } [data-skin="spectra"] .menu a.menu-link:nth-child(7n+6):hover { color: var(--acc2); } [data-skin="spectra"] .menu a.menu-link:nth-child(7n+7):hover { color: var(--acc); } /* Highlighted words in headings. Print sets these in the accent; here they get the marker-pen treatment instead — a bright block with black type through it. The em-scale padding keeps the block on the word at every clamp size. */ [data-skin="spectra"] .cap h2 i, [data-skin="spectra"] .ph-title i, [data-skin="spectra"] .mdiv h2 i, [data-skin="spectra"] .prose h2 i, [data-skin="spectra"] .tech-cap i, [data-skin="spectra"] .stat-num i, [data-skin="spectra"] .hh h2 i, [data-skin="spectra"] .hh h2 .t-serif { color: var(--ink); background: var(--s-chart); padding: 0 0.14em; box-decoration-break: clone; -webkit-box-decoration-break: clone; } [data-skin="spectra"] .idx-cap h2 i { color: var(--ink); background: var(--s-mint); padding: 0 0.14em; box-decoration-break: clone; -webkit-box-decoration-break: clone; } [data-skin="spectra"] .cta-band h2 i { color: var(--ink); background: var(--s-lav); padding: 0 0.14em; box-decoration-break: clone; -webkit-box-decoration-break: clone; } /* The two ✳ marks in the corners of the band, and the underlines in the hero copy — decoration, so they take brights straight. */ [data-skin="spectra"] .cta-band::before { color: var(--s-mint); } [data-skin="spectra"] .cta-band::after { color: var(--s-sky); } [data-skin="spectra"] .hero-side u, [data-skin="spectra"] .hero-annot .desc u { text-decoration-color: var(--s-chart); text-decoration-thickness: 6px; } /* Dates. Every listing gets a colour chip where it had coloured text, and the card grid and the list view take different ones so the two views of the same month don't read as the same page. */ [data-skin="spectra"] .spec-date { display: inline-block; color: var(--ink); background: var(--s-mint); padding: 2px 7px; margin-bottom: 7px; } [data-skin="spectra"] .spec-date i { color: color-mix(in srgb, var(--ink) 62%, transparent); } [data-skin="spectra"] .crow-date { color: var(--s-violet); } [data-skin="spectra"] .spec:nth-child(4n+2) .spec-date { background: var(--s-lav); } [data-skin="spectra"] .spec:nth-child(4n+3) .spec-date { background: var(--s-sky); } [data-skin="spectra"] .spec:nth-child(4n+4) .spec-date { background: var(--s-chart); } /* Buttons and the stamp. Solid fills go bright with black type; the outlined ones keep a deep, because there the colour IS the type. */ [data-skin="spectra"] .btn-solid, [data-skin="spectra"] .modal-close:hover, [data-skin="spectra"] .modal-meta span.hl { background: var(--s-chart); border-color: var(--s-chart); color: var(--ink); } @media (hover: hover) { [data-skin="spectra"] .spec-buy:hover, [data-skin="spectra"] .newsletter-form button:hover { background: var(--s-chart); border-color: var(--s-chart); color: var(--ink); } } [data-skin="spectra"] .cms-banner { background: var(--s-chart); color: var(--ink); } [data-skin="spectra"] ::selection { background: var(--s-chart); color: var(--ink); } /* Ribbon. The bar is black, so both labels can run bright — chartreuse for the lead, mint for the shows, which is the only place on the plate where two brights sit side by side as type. */ [data-skin="spectra"] .ribbon-track span.hot { color: var(--s-mint); } /* The plot layer — rings, crosshairs, registration marks. Pure decoration under everything else, so this is where the brights can be brights with no contrast question attached at all. */ [data-skin="spectra"] .plot .ring { border-color: color-mix(in srgb, var(--s-lav) 85%, transparent); } [data-skin="spectra"] .plot .ring::after { border-color: color-mix(in srgb, var(--s-mint) 70%, transparent); } /* Sky at 32%, not 80%. Full-bleed horizontal rules read far heavier than the same colour does in a ring or a tick — this one line was the loudest thing on the plate at 80%, and it is meant to be plot chrome. 60% off. */ [data-skin="spectra"] .plot .cross-h { background: color-mix(in srgb, var(--s-sky) 32%, transparent); } [data-skin="spectra"] .plot .cross-v { background: color-mix(in srgb, var(--s-chart) 90%, transparent); } [data-skin="spectra"] .plot .reg { border-color: var(--s-violet); opacity: 1; } [data-skin="spectra"] .quote { border-left-width: 6px; border-left-color: var(--s-chart); } [data-skin="spectra"] .hh { border-color: var(--s-lav); } [data-skin="spectra"] .dmap .pin .ring { border-color: var(--s-mint); } /* Footer column heads, each its own deep — small caps, so deeps not brights. */ [data-skin="spectra"] .foot-col:nth-child(1) .foot-col-title { color: var(--s-violet); } [data-skin="spectra"] .foot-col:nth-child(2) .foot-col-title { color: var(--acc2); } [data-skin="spectra"] .foot-col:nth-child(3) .foot-col-title { color: var(--s-olive); } [data-skin="spectra"] .newsletter-label { color: var(--s-violet); } /* The giant outlined hero word, and the big spec numerals: display scale, but drawn as a 1–3px stroke rather than filled, so a bright would vanish. Deep violet holds the line. */ [data-skin="spectra"] .hw-xray { -webkit-text-stroke-color: var(--s-violet); } /* MERIDIAN — the only plate printed on COLOURED stock. Pale pink paper, deep teal ink, and five pens carried across it: teal, raspberry, lemon, coral, cobalt. Warm and saturated where SPECTRA is cool and neon, and nothing in it is achromatic — there is no black and no white anywhere in the base, which is what keeps it from reading as another version of that plate. The stock was a peach-pink (#f7ddd6) and the set ran teal / crimson / gold / tangerine, with the small-type register forced down into mustard, burnt orange and brown — the whole plate read as harvest. The paper is now a true pale pink with no orange in it, the ink is a cleaner, darker teal, the muted text is a dusty plum instead of taupe, gold gave way to a clean lemon and tangerine to a coral, and NO yellow or orange is ever asked to be small type — the brown that produces is the one colour this plate must not have. It also spends its colour differently. SPECTRA blocks: filled chips, filled nav, marker-pen words. MERIDIAN draws: coloured RULES under the nav, coloured INK in the headings, outlined chips instead of filled ones. Same breadth of palette, opposite instinct. Three registers, because a light stock leaves no choice and a teal ink takes one away — BRIGHTS teal, lemon, coral as fills (ink type on them: 5.64:1, 11.15:1, 5.54:1). Raspberry and cobalt sit in the middle where neither the ink nor the paper clears 4.5:1 on them, so those two are RULES and decoration only, never a filled label. DEEPS four pushed down to hold as SMALL type on the pink: raspberry 5.94:1, cobalt 5.29:1, teal 5.08:1, coral (a brick) 4.60:1. The catch: the ink is itself a deep teal, so the deep teal (2.28:1 from it) reads as the ink and is never used AS colour. The deep cobalt is a saturated blue this time (2.19:1 from the ink, but a different hue), so it can carry small type where the old dull one could not. Lemon has no deep: see above. MIDS four lifted to where they clear 3:1 on the pink AND 3:1 from the ink (teal 3.39/3.41, raspberry 4.15/2.78, cobalt 4.39/2.63, coral 3.29/3.52). Large type only — the heading highlights and the fullscreen menu, both 26px+ bold, which is where AA allows 3:1. This is the register that lets teal appear as words at all. Colour at rest, not only under the cursor: the rentals button is a coral block, the lead weekday numeral is mid raspberry, and every highlighted word carries a bright rule beneath a mid — so the page is drawn in the whole set before anything is hovered. Body ink is 11.57:1, muted 5.08:1, focus 5.29:1. */ [data-skin="meridian"] { --paper: #f9dfe7; --ink: #032f2c; --mute: #7a5468; --line: #032f2c; --acc: #a80f44; /* deep raspberry. 5.94:1 on --paper */ --acc-ink: #ffffff; /* type over an --acc fill. 7.46:1 */ --acc-on-ink: #ffe14d;/* the ribbon bar is the teal --ink, so this goes BRIGHT. 11.15:1 */ --acc2: #1d4fd8; /* deep cobalt. 5.29:1. NOT the deep teal — that is 2.28:1 from the teal ink and reads as ink on the stamp */ --focus: #1d4fd8; /* deep cobalt. 5.29:1 on --paper */ --mark-early: #b8391c;/* brick, the coral's deep. 4.60:1 — not the raspberry --acc */ --mark-late: #1d4fd8;/* deep cobalt. 5.29:1 */ --ev-a0: #a80f44; --ev-a1: #1d4fd8; --ev-a2: #0b6b62; --ev-a3: #b8391c; /* the Meridian five, plus their deeps and mids */ --m-teal: #12b5a3; --m-rasp: #e8175a; --m-lem: #ffe14d; --m-cor: #ff7660; --m-cob: #2f6ff5; --m-teal-d: #0b6b62; --m-rasp-d: #a80f44; --m-cob-d: #1d4fd8; --m-cor-d: #b8391c; --m-teal-m: #0c8a7a; --m-rasp-m: #d5124f; --m-cob-m: #2a5fe0; --m-cor-m: #dd4a2a; } /* ── MERIDIAN: rules and ink, not blocks ── */ /* Wordmark: deep raspberry at rest, and under the cursor the bright teal with the ink mark through it — the one place the two ends of the set touch. */ [data-skin="meridian"] .bar-logo { background-color: var(--m-rasp-d); } [data-skin="meridian"] .bar-logo:hover { background-color: var(--m-teal); } [data-skin="meridian"] .bar-logo:hover::before { background-color: var(--ink); } /* Nav. The frame that SPECTRA fills, MERIDIAN drops to a single thick rule under the label — a bright, because a 3px underline is decoration and not type, which is the one place raspberry and cobalt can appear at full strength. The label itself goes to --ink, so the reading contrast never moves. */ [data-skin="meridian"] .nav-links a:not(.nav-cta) { border-color: transparent; border-bottom-width: 3px; transition: color 0.15s, border-color 0.15s; } /* border-color here too: the base hover draws an ink frame at the same specificity as the rest rule above and later in the file, so without this the rule sat inside a box. */ [data-skin="meridian"] .nav-links a:not(.nav-cta):hover, [data-skin="meridian"] .nav-links a:not(.nav-cta).active { color: var(--ink); border-color: transparent; } [data-skin="meridian"] .nav-links a:not(.nav-cta):nth-of-type(5n+1):hover { border-bottom-color: var(--m-teal); } [data-skin="meridian"] .nav-links a:not(.nav-cta):nth-of-type(5n+2):hover { border-bottom-color: var(--m-rasp); } [data-skin="meridian"] .nav-links a:not(.nav-cta):nth-of-type(5n+3):hover { border-bottom-color: var(--m-lem); } [data-skin="meridian"] .nav-links a:not(.nav-cta):nth-of-type(5n+4):hover { border-bottom-color: var(--m-cor); } [data-skin="meridian"] .nav-links a:not(.nav-cta):nth-of-type(5n+5):hover { border-bottom-color: var(--m-cob); } /* The page you are on keeps its rule drawn at all times. */ [data-skin="meridian"] .nav-links a:not(.nav-cta).active { border-bottom-color: var(--m-rasp); } /* PRIVATE RENTALS is a coral block at rest (ink type, 5.54:1) and goes to lemon under the cursor — the bar's one piece of colour before a hover. */ [data-skin="meridian"] .nav-links a.nav-cta { background: var(--m-cor); color: var(--ink); } [data-skin="meridian"] .nav-links a.nav-cta:hover { background: var(--m-lem); color: var(--ink); } /* Fullscreen menu — one line, one mid. Poster type, so the 3:1 register. Lemon has no mid (a yellow at 3:1 on pink is an ochre), so its line keeps the ink and takes the lemon as a rule under it instead. */ [data-skin="meridian"] .menu a.menu-link:nth-child(5n+1):hover { color: var(--m-teal-m); } [data-skin="meridian"] .menu a.menu-link:nth-child(5n+2):hover { color: var(--m-rasp-m); } [data-skin="meridian"] .menu a.menu-link:nth-child(5n+3):hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--m-lem); text-decoration-thickness: 0.12em; text-underline-offset: 0.08em; text-decoration-skip-ink: none; } [data-skin="meridian"] .menu a.menu-link:nth-child(5n+4):hover { color: var(--m-cor-m); } [data-skin="meridian"] .menu a.menu-link:nth-child(5n+5):hover { color: var(--m-cob-m); } /* Highlighted words are INK here, not a marker block — the exact inverse of SPECTRA, and the reason the two plates never look like siblings. Each heading family takes a different MID for the word and a different BRIGHT for a thick rule beneath it, so the set is visible down a page at rest. Display scale throughout, which is what admits the mids. */ [data-skin="meridian"] .cap h2 i, [data-skin="meridian"] .ph-title i, [data-skin="meridian"] .mdiv h2 i, [data-skin="meridian"] .prose h2 i, [data-skin="meridian"] .idx-cap h2 i, [data-skin="meridian"] .cta-band h2 i, [data-skin="meridian"] .tech-cap i, [data-skin="meridian"] .stat-num i, [data-skin="meridian"] .hh h2 i, [data-skin="meridian"] .hh h2 .t-serif { text-decoration: underline; text-decoration-thickness: 0.12em; text-underline-offset: 0.06em; text-decoration-skip-ink: none; } [data-skin="meridian"] .cap h2 i, [data-skin="meridian"] .ph-title i { color: var(--m-rasp-m); text-decoration-color: var(--m-lem); } [data-skin="meridian"] .mdiv h2 i, [data-skin="meridian"] .prose h2 i { color: var(--m-cob-m); text-decoration-color: var(--m-cor); } [data-skin="meridian"] .idx-cap h2 i { color: var(--m-teal-m); text-decoration-color: var(--m-lem); } [data-skin="meridian"] .cta-band h2 i { color: var(--m-cor-m); text-decoration-color: var(--m-teal); } [data-skin="meridian"] .tech-cap i, [data-skin="meridian"] .stat-num i { color: var(--m-teal-m); text-decoration-color: var(--m-rasp); } [data-skin="meridian"] .hh h2 i, [data-skin="meridian"] .hh h2 .t-serif { color: var(--m-rasp-m); text-decoration-color: var(--m-teal); } /* The lead weekday numeral is display scale too: mid raspberry, not the deep. */ [data-skin="meridian"] .spec:first-child .spec-num { color: var(--m-rasp-m); } [data-skin="meridian"] .cta-band::before { color: var(--m-lem); } [data-skin="meridian"] .cta-band::after { color: var(--m-teal); } /* Underlines in the hero copy stay bright and get thick — decoration. */ [data-skin="meridian"] .hero-side u, [data-skin="meridian"] .hero-annot .desc u { text-decoration-color: var(--m-lem); text-decoration-thickness: 6px; } /* Dates: outlined, not filled. Deep ink inside a bright rule. */ /* Small type, so the word is always a deep that reads as colour from the ink — raspberry, brick, cobalt — never the deep teal, and never a yellow. */ [data-skin="meridian"] .spec-date { display: inline-block; color: var(--m-rasp-d); border: 2px solid var(--m-rasp); padding: 1px 7px; margin-bottom: 7px; } [data-skin="meridian"] .spec:nth-child(4n+2) .spec-date { color: var(--m-cor-d); border-color: var(--m-cob); } [data-skin="meridian"] .spec:nth-child(4n+3) .spec-date { color: var(--m-cob-d); border-color: var(--m-teal); } [data-skin="meridian"] .spec:nth-child(4n+4) .spec-date { color: var(--ink); border-color: var(--m-cor); } [data-skin="meridian"] .crow-date { color: var(--m-cob-d); } /* The few things that ARE solid: buttons, and only in the three brights that can hold ink type. */ [data-skin="meridian"] .btn-solid, [data-skin="meridian"] .modal-close:hover, [data-skin="meridian"] .modal-meta span.hl { background: var(--m-lem); border-color: var(--m-lem); color: var(--ink); } @media (hover: hover) { [data-skin="meridian"] .spec-buy:hover, [data-skin="meridian"] .newsletter-form button:hover { background: var(--m-lem); border-color: var(--m-lem); color: var(--ink); } } [data-skin="meridian"] .cms-banner { background: var(--m-cor); color: var(--ink); } [data-skin="meridian"] ::selection { background: var(--m-lem); color: var(--ink); } /* Ribbon: the bar is the deep teal ink, so the shows can run coral against the lemon lead — the one warm-on-warm pairing the plate allows itself (5.54:1 and 11.15:1 on that bar). */ [data-skin="meridian"] .ribbon-track span.hot { color: var(--m-cor); } /* Plot layer. Pure decoration, so the two colours with nowhere else to go — raspberry and cobalt — get the run of it. */ [data-skin="meridian"] .plot .ring { border-color: color-mix(in srgb, var(--m-rasp) 55%, transparent); } [data-skin="meridian"] .plot .ring::after { border-color: color-mix(in srgb, var(--m-cob) 45%, transparent); } [data-skin="meridian"] .plot .cross-h { background: color-mix(in srgb, var(--m-cor) 55%, transparent); } [data-skin="meridian"] .plot .cross-v { background: color-mix(in srgb, var(--m-teal) 65%, transparent); } [data-skin="meridian"] .plot .reg { border-color: var(--m-rasp-d); opacity: 1; } [data-skin="meridian"] .quote { border-left-width: 6px; border-left-color: var(--m-cob); } [data-skin="meridian"] .hh { border-color: var(--m-teal); } [data-skin="meridian"] .dmap .pin .ring { border-color: var(--m-cor); } /* Footer heads: small caps, so the three deeps that read as colour. */ [data-skin="meridian"] .foot-col:nth-child(1) .foot-col-title { color: var(--m-rasp-d); } [data-skin="meridian"] .foot-col:nth-child(2) .foot-col-title { color: var(--m-cob-d); } [data-skin="meridian"] .foot-col:nth-child(3) .foot-col-title { color: var(--m-cor-d); } [data-skin="meridian"] .newsletter-label { color: var(--m-rasp-d); } /* Outlined display type — a 1-3px stroke, so it takes a deep, not a bright. */ [data-skin="meridian"] .hw-xray { -webkit-text-stroke-color: var(--m-rasp-d); } /* BLUEPRINT — the first plate whose ground is a COLOUR. Every other stock is a light paper or a near-black; this one is a saturated ultramarine, the blue of a cyanotype, with chalk for ink. The whole design system was built as a plotted print — registration marks, crosshairs, a live coordinate readout, posters reduced to one ink — and on this ground all of that chrome becomes what it always was underneath: a drawing on a blueprint. The posters need no work at all; they are already ink through a mask, so here they come out as chalk on blue. Five pens, all light, because on a deep ground a light colour is legible BOTH ways — as type on the blue and as a fill with the blue as its type — so this plate needs neither SPECTRA's two registers nor MERIDIAN's three. Sulphur leads: the yellow of a highlighter drawn across a drawing, and the focus ring. Coral is the redline — the colour an architect's corrections come back in — and takes the second-highlight jobs. Rose, ice and mint are the chalk pastels beside them. Type on the blue: sulphur 7.94:1, mint 7.42:1, ice 7.25:1, rose 6.07:1, coral 4.90:1; blue type on any of them is the same ratio read the other way. Where the plate DOES borrow: the two light-ground plates fill nothing and draw rules; the dark-ground FLUORO fills its nav. BLUEPRINT fills too, but with the ground as the type, so a hovered item reads as a hole cut in the sheet rather than a lit sign — the same move, the opposite reading. The one surface that is NOT blue is the ribbon bar, which is filled with the chalk --ink; the lead there is the ground itself and the shows are a deep coral (8.65:1 and 4.91:1 on that bar). Body ink is 8.65:1, muted 5.43:1, focus 7.94:1. */ [data-skin="blueprint"] { --paper: #1a2fb0; --ink: #f1ede3; --mute: #b4bce6; --line: #f1ede3; --acc: #ffe45c; /* sulphur. 7.94:1 on --paper */ --acc-ink: #1a2fb0; /* type over an --acc fill: the ground. 7.94:1 */ --acc-on-ink: #1a2fb0;/* the ribbon bar is the chalk --ink, so this goes DARK: the ground. 8.65:1 */ --acc2: #ff9a80; /* coral, the redline. 4.90:1 */ --focus: #ffe45c; /* 7.94:1 on --paper */ --mark-early: #ff9a80;/* coral. 4.90:1 — the warm one */ --mark-late: #a6e3ff;/* ice. 7.25:1 — not the mint or sulphur the dates take */ --ev-a0: #ffe45c; --ev-a1: #ff9a80; --ev-a2: #8cf0c9; --ev-a3: #ffb4c8; --b-sulph: #ffe45c; --b-coral: #ff9a80; --b-rose: #ffb4c8; --b-ice: #a6e3ff; --b-mint: #8cf0c9; --b-coral-on-ink: #b83a1e;/* the redline, deep enough for the chalk bar. 4.91:1 */ } /* ── BLUEPRINT: chalk on blue, and five pastels ── */ /* Wordmark lit at rest — a sulphur block with the blue mark through it, the one highlighter stroke in the bar — and it turns coral under the cursor. */ [data-skin="blueprint"] .bar-logo { background-color: var(--b-sulph); } [data-skin="blueprint"] .bar-logo:hover { background-color: var(--b-coral); } [data-skin="blueprint"] .bar-logo:hover::before { background-color: var(--paper); } /* Nav: each item fills in its own pastel with the blue ground as its type. */ [data-skin="blueprint"] .nav-links a:not(.nav-cta) { transition: color 0.15s, border-color 0.15s, background-color 0.15s; } [data-skin="blueprint"] .nav-links a:not(.nav-cta):hover { color: var(--paper); } [data-skin="blueprint"] .nav-links a:not(.nav-cta):nth-of-type(5n+1):hover { background: var(--b-sulph); border-color: var(--b-sulph); } [data-skin="blueprint"] .nav-links a:not(.nav-cta):nth-of-type(5n+2):hover { background: var(--b-coral); border-color: var(--b-coral); } [data-skin="blueprint"] .nav-links a:not(.nav-cta):nth-of-type(5n+3):hover { background: var(--b-mint); border-color: var(--b-mint); } [data-skin="blueprint"] .nav-links a:not(.nav-cta):nth-of-type(5n+4):hover { background: var(--b-rose); border-color: var(--b-rose); } [data-skin="blueprint"] .nav-links a:not(.nav-cta):nth-of-type(5n+5):hover { background: var(--b-ice); border-color: var(--b-ice); } /* The page you are on: sulphur frame, no fill, chalk label. */ [data-skin="blueprint"] .nav-links a:not(.nav-cta).active { color: var(--ink); border-color: var(--b-sulph); } /* PRIVATE RENTALS: the chalk block goes coral under the cursor. */ [data-skin="blueprint"] .nav-links a.nav-cta:hover { background: var(--b-coral); color: var(--paper); } /* Fullscreen menu — poster type, one pastel per line. */ [data-skin="blueprint"] .menu a.menu-link:nth-child(5n+1):hover { color: var(--b-sulph); } [data-skin="blueprint"] .menu a.menu-link:nth-child(5n+2):hover { color: var(--b-coral); } [data-skin="blueprint"] .menu a.menu-link:nth-child(5n+3):hover { color: var(--b-mint); } [data-skin="blueprint"] .menu a.menu-link:nth-child(5n+4):hover { color: var(--b-rose); } [data-skin="blueprint"] .menu a.menu-link:nth-child(5n+5):hover { color: var(--b-ice); } /* Highlighted words. The hero and the plate captions take the highlighter itself — a sulphur block with the blue through it, the one place the plate blocks. Every other heading family is lit type in a different pastel. */ [data-skin="blueprint"] .cap h2 i, [data-skin="blueprint"] .ph-title i { color: var(--paper); background: var(--b-sulph); padding: 0 0.14em; box-decoration-break: clone; -webkit-box-decoration-break: clone; } [data-skin="blueprint"] .mdiv h2 i, [data-skin="blueprint"] .prose h2 i { color: var(--b-coral); } [data-skin="blueprint"] .idx-cap h2 i { color: var(--b-mint); } [data-skin="blueprint"] .cta-band h2 i { color: var(--b-rose); } [data-skin="blueprint"] .tech-cap i, [data-skin="blueprint"] .stat-num i { color: var(--b-ice); } [data-skin="blueprint"] .hh h2 i, [data-skin="blueprint"] .hh h2 .t-serif { color: var(--b-coral); } [data-skin="blueprint"] .cta-band::before { color: var(--b-coral); } [data-skin="blueprint"] .cta-band::after { color: var(--b-mint); } /* The redline under the hero copy. */ [data-skin="blueprint"] .hero-side u, [data-skin="blueprint"] .hero-annot .desc u { text-decoration-color: var(--b-coral); text-decoration-thickness: 4px; } /* Dates rotate through the pastels; the list view takes ice. */ [data-skin="blueprint"] .spec-date { color: var(--b-sulph); } [data-skin="blueprint"] .spec:nth-child(4n+2) .spec-date { color: var(--b-coral); } [data-skin="blueprint"] .spec:nth-child(4n+3) .spec-date { color: var(--b-mint); } [data-skin="blueprint"] .spec:nth-child(4n+4) .spec-date { color: var(--b-rose); } [data-skin="blueprint"] .crow-date { color: var(--b-ice); } /* Solids: sulphur stays on the buttons (that is --acc); the newsletter goes mint, "here" on the venue strip goes rose, the CMS banner coral. Blue type on all of them. */ @media (hover: hover) { [data-skin="blueprint"] .newsletter-form button:hover { background: var(--b-mint); color: var(--paper); } } [data-skin="blueprint"] .cms-banner { background: var(--b-coral); color: var(--paper); } [data-skin="blueprint"] ::selection { background: var(--b-sulph); color: var(--paper); } /* Ribbon: the bar is the chalk ink, so the shows go to the deep coral beside the blue lead — redline on a title block. */ [data-skin="blueprint"] .ribbon-track span.hot { color: var(--b-coral-on-ink); } /* Plot layer — on this plate it is not decoration so much as the point. The crosshairs go chalk at higher strength than any other plate allows, the rings take rose and ice, the registration marks the highlighter. */ [data-skin="blueprint"] .plot .ring { border-color: color-mix(in srgb, var(--b-rose) 60%, transparent); } [data-skin="blueprint"] .plot .ring::after { border-color: color-mix(in srgb, var(--b-ice) 50%, transparent); } [data-skin="blueprint"] .plot .cross-h { background: color-mix(in srgb, var(--ink) 40%, transparent); } [data-skin="blueprint"] .plot .cross-v { background: color-mix(in srgb, var(--ink) 40%, transparent); } [data-skin="blueprint"] .plot .reg { border-color: var(--b-sulph); opacity: 1; } [data-skin="blueprint"] .quote { border-left-color: var(--b-coral); } [data-skin="blueprint"] .hh { border-color: var(--b-mint); } [data-skin="blueprint"] .dmap .pin .ring { border-color: var(--b-coral); } /* Footer heads, one pastel each. */ [data-skin="blueprint"] .foot-col:nth-child(1) .foot-col-title { color: var(--b-sulph); } [data-skin="blueprint"] .foot-col:nth-child(2) .foot-col-title { color: var(--b-coral); } [data-skin="blueprint"] .foot-col:nth-child(3) .foot-col-title { color: var(--b-mint); } [data-skin="blueprint"] .newsletter-label { color: var(--b-rose); } /* The outlined hero word takes the sulphur, so the highlighter and the chalk share the top of the page. */ [data-skin="blueprint"] .hw-xray { -webkit-text-stroke-color: var(--b-sulph); } /* OXBLOOD — a warm dark ground. Wine-red stock, cream ink, and five light pens that read as gilt and velvet: brass, rose, celadon, apricot, powder blue. Where BLUEPRINT is a drawing office, this is the front of house — a playbill, a lobby, a bar at one in the morning. It is the plate for anyone who wants the site dark without the dark being black or cold. A deep ground makes every light colour legible both ways, so the five are type on the wine AND fills with the wine through them: brass 8.17:1, rose 7.93:1, celadon 9.86:1, apricot 8.47:1, powder 8.48:1. Brass leads and is the focus ring; rose is the second highlight. OXBLOOD frames. Nothing in the nav fills: a hovered item draws its frame AND its label in one pen, the way PRINT does on white, and the dates are outlined chips. Solid brass is kept for the few things that are buttons. The ribbon bar is the cream --ink, so the lead there is the wine itself and the shows are a deep brass (12.59:1 and 6.21:1 on that bar). Body ink is 12.59:1, muted 6.06:1, focus 8.17:1. */ [data-skin="oxblood"] { --paper: #4a1020; --ink: #f3e9d8; --mute: #c29a9c; --line: #f3e9d8; --acc: #e6b84a; /* brass. 8.17:1 on --paper */ --acc-ink: #4a1020; /* type over an --acc fill: the ground. 8.17:1 */ --acc-on-ink: #4a1020;/* the ribbon bar is the cream --ink, so this goes DARK: the ground. 12.59:1 */ --acc2: #f2a7b8; /* rose. 7.93:1 */ --focus: #e6b84a; /* 8.17:1 on --paper */ --mark-early: #ffb07a;/* apricot. 8.47:1 — the warm one */ --mark-late: #a9c4e8;/* powder blue. 8.48:1 */ --ev-a0: #e6b84a; --ev-a1: #f2a7b8; --ev-a2: #a8dcc0; --ev-a3: #ffb07a; --o-brass: #e6b84a; --o-rose: #f2a7b8; --o-cel: #a8dcc0; --o-apri: #ffb07a; --o-pow: #a9c4e8; --o-brass-on-ink: #6e5000;/* deep brass for the cream bar. 6.21:1 */ } /* ── OXBLOOD: gilt frames on wine ── */ /* Wordmark: a brass block with the wine mark through it; rose under the cursor. */ [data-skin="oxblood"] .bar-logo { background-color: var(--o-brass); } [data-skin="oxblood"] .bar-logo:hover { background-color: var(--o-rose); } [data-skin="oxblood"] .bar-logo:hover::before { background-color: var(--paper); } /* Nav: frame and label in one pen, no fill. */ [data-skin="oxblood"] .nav-links a:not(.nav-cta) { transition: color 0.15s, border-color 0.15s; } [data-skin="oxblood"] .nav-links a:not(.nav-cta):nth-of-type(5n+1):hover { color: var(--o-brass); border-color: var(--o-brass); } [data-skin="oxblood"] .nav-links a:not(.nav-cta):nth-of-type(5n+2):hover { color: var(--o-rose); border-color: var(--o-rose); } [data-skin="oxblood"] .nav-links a:not(.nav-cta):nth-of-type(5n+3):hover { color: var(--o-cel); border-color: var(--o-cel); } [data-skin="oxblood"] .nav-links a:not(.nav-cta):nth-of-type(5n+4):hover { color: var(--o-apri); border-color: var(--o-apri); } [data-skin="oxblood"] .nav-links a:not(.nav-cta):nth-of-type(5n+5):hover { color: var(--o-pow); border-color: var(--o-pow); } /* The page you are on: brass frame, cream label. */ [data-skin="oxblood"] .nav-links a:not(.nav-cta).active { color: var(--ink); border-color: var(--o-brass); } /* PRIVATE RENTALS: the cream block goes brass under the cursor. */ [data-skin="oxblood"] .nav-links a.nav-cta:hover { background: var(--o-brass); color: var(--paper); } /* Fullscreen menu — one pen per line. */ [data-skin="oxblood"] .menu a.menu-link:nth-child(5n+1):hover { color: var(--o-brass); } [data-skin="oxblood"] .menu a.menu-link:nth-child(5n+2):hover { color: var(--o-rose); } [data-skin="oxblood"] .menu a.menu-link:nth-child(5n+3):hover { color: var(--o-cel); } [data-skin="oxblood"] .menu a.menu-link:nth-child(5n+4):hover { color: var(--o-apri); } [data-skin="oxblood"] .menu a.menu-link:nth-child(5n+5):hover { color: var(--o-pow); } /* Highlighted words: lit type, brass at the top of the page and a different pen for each family below it. */ [data-skin="oxblood"] .cap h2 i, [data-skin="oxblood"] .ph-title i { color: var(--o-brass); } [data-skin="oxblood"] .mdiv h2 i, [data-skin="oxblood"] .prose h2 i { color: var(--o-rose); } [data-skin="oxblood"] .idx-cap h2 i { color: var(--o-cel); } [data-skin="oxblood"] .cta-band h2 i { color: var(--o-apri); } [data-skin="oxblood"] .tech-cap i, [data-skin="oxblood"] .stat-num i { color: var(--o-pow); } [data-skin="oxblood"] .hh h2 i, [data-skin="oxblood"] .hh h2 .t-serif { color: var(--o-rose); } [data-skin="oxblood"] .cta-band::before { color: var(--o-rose); } [data-skin="oxblood"] .cta-band::after { color: var(--o-cel); } [data-skin="oxblood"] .hero-side u, [data-skin="oxblood"] .hero-annot .desc u { text-decoration-color: var(--o-brass); text-decoration-thickness: 4px; } /* Dates: outlined chips, pen inside its own frame. */ [data-skin="oxblood"] .spec-date { display: inline-block; color: var(--o-brass); border: 1px solid var(--o-brass); padding: 2px 7px; margin-bottom: 7px; } [data-skin="oxblood"] .spec:nth-child(4n+2) .spec-date { color: var(--o-rose); border-color: var(--o-rose); } [data-skin="oxblood"] .spec:nth-child(4n+3) .spec-date { color: var(--o-cel); border-color: var(--o-cel); } [data-skin="oxblood"] .spec:nth-child(4n+4) .spec-date { color: var(--o-apri); border-color: var(--o-apri); } [data-skin="oxblood"] .crow-date { color: var(--o-pow); } /* Solids: brass stays on the buttons (that is --acc); the newsletter goes celadon, "here" rose, the CMS banner apricot. Wine type on all of them. */ @media (hover: hover) { [data-skin="oxblood"] .newsletter-form button:hover { background: var(--o-cel); color: var(--paper); } } [data-skin="oxblood"] .cms-banner { background: var(--o-apri); color: var(--paper); } [data-skin="oxblood"] ::selection { background: var(--o-brass); color: var(--paper); } /* Ribbon: the bar is cream, so the shows go to a deep brass beside the wine lead. */ [data-skin="oxblood"] .ribbon-track span.hot { color: var(--o-brass-on-ink); } /* Plot layer. */ [data-skin="oxblood"] .plot .ring { border-color: color-mix(in srgb, var(--o-rose) 55%, transparent); } [data-skin="oxblood"] .plot .ring::after { border-color: color-mix(in srgb, var(--o-pow) 45%, transparent); } [data-skin="oxblood"] .plot .cross-h { background: color-mix(in srgb, var(--o-brass) 40%, transparent); } [data-skin="oxblood"] .plot .cross-v { background: color-mix(in srgb, var(--o-cel) 40%, transparent); } [data-skin="oxblood"] .plot .reg { border-color: var(--o-brass); opacity: 1; } [data-skin="oxblood"] .quote { border-left-color: var(--o-brass); } [data-skin="oxblood"] .hh { border-color: var(--o-rose); } [data-skin="oxblood"] .dmap .pin .ring { border-color: var(--o-apri); } /* Footer heads. */ [data-skin="oxblood"] .foot-col:nth-child(1) .foot-col-title { color: var(--o-brass); } [data-skin="oxblood"] .foot-col:nth-child(2) .foot-col-title { color: var(--o-rose); } [data-skin="oxblood"] .foot-col:nth-child(3) .foot-col-title { color: var(--o-cel); } [data-skin="oxblood"] .newsletter-label { color: var(--o-apri); } [data-skin="oxblood"] .hw-xray { -webkit-text-stroke-color: var(--o-brass); } /* FOREST — the v4 study's green and orange, carried onto this design system. Forest-green stock — lifted a step from the study's #0f2418 so it reads as green and not as black, with the orange and the sage lifted with it to hold AA —, a warm white ink, ONE orange as the loud pen, and the study's two warm greys, sage and silver, as the quiet ones. One orange, on purpose. The study also carried an apricot and a honey, and on the page the three read as the same orange mismatched rather than as three colours — most plainly on the booking page, where orange heading blocks sat over a honey closing line. Apricot survives only as what orange turns under the cursor; honey is gone. Variety comes from the greys. Everything light is legible both ways on this ground: orange 4.96:1, apricot (hover only) 6.70:1, sage 5.19:1, silver 6.94:1. FOREST blocks, the way the v4 site did: filled orange buttons, a hovered nav item filled in its pen with the green through it, the hero's highlighted word an orange block, and the dates as filled chips. The greys keep it from being an orange site — they take every rule, ring and small label that is not a call to action. The ribbon bar is the white --ink; the lead there is the green itself and the shows are a deep orange (10.77:1 and 5.30:1 on that bar) — the one other orange, because the lead orange cannot be read on white. Body ink is 10.77:1, muted 5.61:1, focus 4.96:1. */ [data-skin="forest"] { --paper: #133f2b; --ink: #f7f4ec; --mute: #a8b6ac; --line: #f7f4ec; --acc: #f28f45; /* orange. 4.96:1 on --paper */ --acc-ink: #133f2b; /* type over an --acc fill: the ground. 4.96:1 */ --acc-on-ink: #133f2b;/* the ribbon bar is the white --ink, so this goes DARK: the ground. 10.77:1 */ --acc2: #b6bcb4; /* silver: the second highlight is a grey, not a second orange. 6.94:1 */ --focus: #f28f45; /* 4.96:1 on --paper */ --mark-early: #f28f45;/* orange. 4.96:1 — the warm one */ --mark-late: #b6bcb4;/* silver. 6.94:1 */ --ev-a0: #f28f45; --ev-a1: #b6bcb4; --ev-a2: #f28f45; --ev-a3: #9fb0a3; --f4-orange: #f28f45; --f4-sage: #9fb0a3; --f4-silver: #b6bcb4; --f4-orange-hover: #f0a860;/* apricot: orange under the cursor, and nowhere else */ --f4-orange-on-ink: #a8481a;/* deep orange for the white bar. 5.30:1 */ } /* ── FOREST: orange blocks, grey rules ── */ /* Wordmark: an orange block with the green mark through it; lighter under the cursor. */ [data-skin="forest"] .bar-logo { background-color: var(--f4-orange); } [data-skin="forest"] .bar-logo:hover { background-color: var(--f4-orange-hover); } [data-skin="forest"] .bar-logo:hover::before { background-color: var(--paper); } /* Nav: each item fills in its own pen with the green as its type. */ [data-skin="forest"] .nav-links a:not(.nav-cta) { transition: color 0.15s, border-color 0.15s, background-color 0.15s; } [data-skin="forest"] .nav-links a:not(.nav-cta):hover { color: var(--paper); } [data-skin="forest"] .nav-links a:not(.nav-cta):nth-of-type(5n+1):hover { background: var(--f4-orange); border-color: var(--f4-orange); } [data-skin="forest"] .nav-links a:not(.nav-cta):nth-of-type(5n+2):hover { background: var(--f4-silver); border-color: var(--f4-silver); } [data-skin="forest"] .nav-links a:not(.nav-cta):nth-of-type(5n+3):hover { background: var(--f4-orange); border-color: var(--f4-orange); } [data-skin="forest"] .nav-links a:not(.nav-cta):nth-of-type(5n+4):hover { background: var(--f4-sage); border-color: var(--f4-sage); } [data-skin="forest"] .nav-links a:not(.nav-cta):nth-of-type(5n+5):hover { background: var(--f4-silver); border-color: var(--f4-silver); } /* The page you are on: orange frame, no fill, white label. */ [data-skin="forest"] .nav-links a:not(.nav-cta).active { color: var(--ink); border-color: var(--f4-orange); } /* PRIVATE RENTALS is an orange block at rest and goes lighter under the cursor. */ [data-skin="forest"] .nav-links a.nav-cta { background: var(--f4-orange); border-color: var(--f4-orange); color: var(--paper); } [data-skin="forest"] .nav-links a.nav-cta:hover { background: var(--f4-orange-hover); border-color: var(--f4-orange-hover); color: var(--paper); } /* Fullscreen menu — one pen per line. */ [data-skin="forest"] .menu a.menu-link:nth-child(5n+1):hover { color: var(--f4-orange); } [data-skin="forest"] .menu a.menu-link:nth-child(5n+2):hover { color: var(--f4-silver); } [data-skin="forest"] .menu a.menu-link:nth-child(5n+3):hover { color: var(--f4-orange); } [data-skin="forest"] .menu a.menu-link:nth-child(5n+4):hover { color: var(--f4-sage); } [data-skin="forest"] .menu a.menu-link:nth-child(5n+5):hover { color: var(--f4-silver); } /* Highlighted words. The hero and the plate captions take an orange block with the green through it; the families below are lit type. */ [data-skin="forest"] .cap h2 i, [data-skin="forest"] .ph-title i { color: var(--paper); background: var(--f4-orange); padding: 0 0.14em; box-decoration-break: clone; -webkit-box-decoration-break: clone; } [data-skin="forest"] .mdiv h2 i, [data-skin="forest"] .prose h2 i { color: var(--f4-orange); } [data-skin="forest"] .idx-cap h2 i { color: var(--f4-orange); } [data-skin="forest"] .cta-band h2 i { color: var(--f4-orange); } [data-skin="forest"] .tech-cap i, [data-skin="forest"] .stat-num i { color: var(--f4-orange); } [data-skin="forest"] .hh h2 i, [data-skin="forest"] .hh h2 .t-serif { color: var(--f4-orange); } [data-skin="forest"] .cta-band::before { color: var(--f4-sage); } [data-skin="forest"] .cta-band::after { color: var(--f4-silver); } [data-skin="forest"] .hero-side u, [data-skin="forest"] .hero-annot .desc u { text-decoration-color: var(--f4-orange); text-decoration-thickness: 4px; } /* Dates: filled chips, green type through them; the list view takes orange type. */ [data-skin="forest"] .spec-date { display: inline-block; color: var(--paper); background: var(--f4-orange); padding: 2px 7px; margin-bottom: 7px; } [data-skin="forest"] .spec-date i { color: color-mix(in srgb, var(--paper) 70%, transparent); } [data-skin="forest"] .spec:nth-child(4n+2) .spec-date { background: var(--f4-silver); } [data-skin="forest"] .spec:nth-child(4n+3) .spec-date { background: var(--f4-orange); } [data-skin="forest"] .spec:nth-child(4n+4) .spec-date { background: var(--f4-sage); } [data-skin="forest"] .crow-date { color: var(--f4-orange); } /* Solids: orange on the buttons (that is --acc) and the CMS banner, lighter under the cursor; "here" is sage. Green type on all of them. */ @media (hover: hover) { [data-skin="forest"] .newsletter-form button:hover { background: var(--f4-orange-hover); color: var(--paper); } } [data-skin="forest"] .cms-banner { background: var(--f4-orange); color: var(--paper); } [data-skin="forest"] ::selection { background: var(--f4-orange); color: var(--paper); } /* Ribbon: the bar is white, so the shows go to a deep orange beside the green lead. */ [data-skin="forest"] .ribbon-track span.hot { color: var(--f4-orange-on-ink); } /* Plot layer — the greys, so the chrome stays chrome. */ [data-skin="forest"] .plot .ring { border-color: color-mix(in srgb, var(--f4-sage) 60%, transparent); } [data-skin="forest"] .plot .ring::after { border-color: color-mix(in srgb, var(--f4-silver) 45%, transparent); } [data-skin="forest"] .plot .cross-h { background: color-mix(in srgb, var(--f4-orange) 45%, transparent); } [data-skin="forest"] .plot .cross-v { background: color-mix(in srgb, var(--f4-sage) 50%, transparent); } [data-skin="forest"] .plot .reg { border-color: var(--f4-orange); opacity: 1; } [data-skin="forest"] .quote { border-left-color: var(--f4-orange); } [data-skin="forest"] .hh { border-color: var(--f4-sage); } [data-skin="forest"] .dmap .pin .ring { border-color: var(--f4-orange); } /* Footer heads. */ /* nth-child counts the address block, which comes first and has no heading — so Navigate is the 2nd child and Connect the 3rd. */ [data-skin="forest"] .foot-col:nth-child(2) .foot-col-title { color: var(--f4-orange); } [data-skin="forest"] .foot-col:nth-child(3) .foot-col-title { color: var(--f4-sage); } [data-skin="forest"] .newsletter-label { color: var(--f4-silver); } [data-skin="forest"] .hw-xray { -webkit-text-stroke-color: var(--f4-orange); } /* VELVET — plum stock, blush ink, and five juicy brights run warm and cool: mango, lime, cyan, rose, lilac. Spectra's instinct (the colour is in fills, a different fill per element) on a coloured ground; one of the Oct 27 2026 candidates, kept. Its tokens: --k1..--k5 fills; type on them is --on-k (the stock), 4.5:1 or more --t1..--t4 colours that hold as SMALL type on the stock, 4.5:1 or more --hot the ribbon's show names, on the blush --ink bar */ /* VELVET: plum stock, blush ink, juicy brights (mango, lime, cyan, rose, lilac). Ink 13.79:1, muted 7.15:1. */ [data-skin="velvet"] { --paper: #2d1b3f; --ink: #fbeee6; --mute: #bba9c4; --line: #fbeee6; --acc: #ffb347; --acc-ink: #2d1b3f; --acc-on-ink: #6a2c8a; --acc2: #c6f06a; --focus: #ffb347; --mark-early: #ffb347; --mark-late: #7fdcf2; --ev-a0: #ffb347; --ev-a1: #c6f06a; --ev-a2: #5fd8f0; --ev-a3: #ff9fc0; --k1: #ffb347; --k2: #c6f06a; --k3: #5fd8f0; --k4: #ff7aa8; --k5: #b9a3ff; --on-k: var(--paper); --t1: #ffb347; --t2: #c6f06a; --t3: #5fd8f0; --t4: #ff9fc0; --hot: #6a2c8a; } /* ── VELVET: where the colour lands ── */ [data-skin="velvet"] .bar-logo { background-color: var(--t1); } [data-skin="velvet"] .bar-logo:hover { background-color: var(--k1); } [data-skin="velvet"] .bar-logo:hover::before { background-color: var(--on-k); } [data-skin="velvet"] .nav-links a:not(.nav-cta) { transition: color 0.15s, border-color 0.15s, background-color 0.15s; } [data-skin="velvet"] .nav-links a:not(.nav-cta):hover { color: var(--on-k); } [data-skin="velvet"] .nav-links a:not(.nav-cta):nth-of-type(5n+1):hover { background: var(--k1); border-color: var(--k1); } [data-skin="velvet"] .nav-links a:not(.nav-cta):nth-of-type(5n+2):hover { background: var(--k2); border-color: var(--k2); } [data-skin="velvet"] .nav-links a:not(.nav-cta):nth-of-type(5n+3):hover { background: var(--k3); border-color: var(--k3); } [data-skin="velvet"] .nav-links a:not(.nav-cta):nth-of-type(5n+4):hover { background: var(--k4); border-color: var(--k4); } [data-skin="velvet"] .nav-links a:not(.nav-cta):nth-of-type(5n+5):hover { background: var(--k5); border-color: var(--k5); } [data-skin="velvet"] .nav-links a:not(.nav-cta).active { border-color: var(--t1); } [data-skin="velvet"] .nav-links a.nav-cta:hover { background: var(--k1); color: var(--on-k); } [data-skin="velvet"] .menu a.menu-link:nth-child(4n+1):hover { color: var(--t1); } [data-skin="velvet"] .menu a.menu-link:nth-child(4n+2):hover { color: var(--t2); } [data-skin="velvet"] .menu a.menu-link:nth-child(4n+3):hover { color: var(--t3); } [data-skin="velvet"] .menu a.menu-link:nth-child(4n+4):hover { color: var(--t4); } /* Highlighted words: a fill behind the word, a different one per family. */ [data-skin="velvet"] .cap h2 i, [data-skin="velvet"] .ph-title i, [data-skin="velvet"] .mdiv h2 i, [data-skin="velvet"] .prose h2 i, [data-skin="velvet"] .tech-cap i, [data-skin="velvet"] .stat-num i, [data-skin="velvet"] .hh h2 i, [data-skin="velvet"] .hh h2 .t-serif, [data-skin="velvet"] .idx-cap h2 i, [data-skin="velvet"] .cta-band h2 i { color: var(--on-k); background: var(--k1); padding: 0 0.14em; box-decoration-break: clone; -webkit-box-decoration-break: clone; } [data-skin="velvet"] .idx-cap h2 i { background: var(--k3); } /* Section heads take the fills in turn, so a long page shows the whole set. */ [data-skin="velvet"] .cap:nth-of-type(4n+2) h2 i { background: var(--k3); } [data-skin="velvet"] .cap:nth-of-type(4n+3) h2 i { background: var(--k5); } [data-skin="velvet"] .cap:nth-of-type(4n+4) h2 i { background: var(--k2); } [data-skin="velvet"] .cta-band h2 i { background: var(--k5); } [data-skin="velvet"] .mdiv h2 i, [data-skin="velvet"] .prose h2 i { background: var(--k2); } [data-skin="velvet"] .tech-cap i, [data-skin="velvet"] .stat-num i { background: var(--k4); } [data-skin="velvet"] .cta-band::before { color: var(--k2); } [data-skin="velvet"] .cta-band::after { color: var(--k4); } [data-skin="velvet"] .hero-side u, [data-skin="velvet"] .hero-annot .desc u { text-decoration-color: var(--k1); text-decoration-thickness: 6px; } /* Dates: chips, four fills in turn; the list view takes coloured type. */ [data-skin="velvet"] .spec-date { display: inline-block; color: var(--on-k); background: var(--k3); padding: 2px 7px; margin-bottom: 7px; } [data-skin="velvet"] .spec-date i { color: inherit; opacity: 0.75; } [data-skin="velvet"] .spec:nth-child(4n+2) .spec-date { background: var(--k5); } [data-skin="velvet"] .spec:nth-child(4n+3) .spec-date { background: var(--k2); } [data-skin="velvet"] .spec:nth-child(4n+4) .spec-date { background: var(--k4); } [data-skin="velvet"] .crow-date { color: var(--t1); } [data-skin="velvet"] .btn-solid, [data-skin="velvet"] .modal-close:hover, [data-skin="velvet"] .modal-meta span.hl { background: var(--k1); border-color: var(--k1); color: var(--on-k); } @media (hover: hover) { [data-skin="velvet"] .spec-buy:hover, [data-skin="velvet"] .newsletter-form button:hover { background: var(--k1); border-color: var(--k1); color: var(--on-k); } } [data-skin="velvet"] .cms-banner { background: var(--k1); color: var(--on-k); } [data-skin="velvet"] ::selection { background: var(--k1); color: var(--on-k); } [data-skin="velvet"] .ribbon-track span.hot { color: var(--hot); } /* Plot layer: decoration, so the fills go on as they are. */ [data-skin="velvet"] .plot .ring { border-color: color-mix(in srgb, var(--k5) 85%, transparent); } [data-skin="velvet"] .plot .ring::after { border-color: color-mix(in srgb, var(--k2) 75%, transparent); } [data-skin="velvet"] .plot .cross-h { background: color-mix(in srgb, var(--k3) 45%, transparent); } [data-skin="velvet"] .plot .cross-v { background: color-mix(in srgb, var(--k1) 85%, transparent); } [data-skin="velvet"] .plot .reg { border-color: var(--t1); opacity: 1; } [data-skin="velvet"] .quote { border-left-width: 6px; border-left-color: var(--k1); } [data-skin="velvet"] .hh { border-color: var(--k4); } [data-skin="velvet"] .dmap .pin .ring { border-color: var(--k3); } [data-skin="velvet"] .foot-col:nth-child(2) .foot-col-title { color: var(--t2); } [data-skin="velvet"] .foot-col:nth-child(3) .foot-col-title { color: var(--t3); } [data-skin="velvet"] .newsletter-label { color: var(--t4); } [data-skin="velvet"] .hw-xray { -webkit-text-stroke-color: var(--t1); } /* GRAPHITE — secret colour. A grey page: light grey stock, black ink, grey fills where the other plates put colour. The colour is there, but only where you are: the background is drawn in brights and greyed everywhere but a disc around the cursor (--field-reveal, dither.js), the posters bloom as they always do, and buttons, nav, chips and highlighted words turn a bright under the cursor and a DIFFERENT bright while pressed. BRIGHTS chartreuse, pink, cyan, orange, violet, mint: hover and press fills only, black type on them (15.97, 7.08, 11.00, 9.34, 7.98, 12.72:1), and the background's pens. DEEPS raspberry 5.76, blue 5.60, violet 6.56, green 5.48:1 on the stock: coloured type on hover (links, menu lines). Body 15.84:1, muted 5.61:1, focus (deep violet) 6.56:1. */ [data-skin="graphite"] { --paper: #ebebeb; --ink: #111111; --mute: #5c5c5c; --line: #111111; --acc: #111111; --acc-ink: #ebebeb; --acc-on-ink: #9a9a9a; --acc2: #5c5c5c; --focus: #5a2fc9; --mark-early: #a33f0b; --mark-late: #1d5a85; --ev-a0: #111111; --ev-a1: #5c5c5c; --ev-a2: #111111; --ev-a3: #5c5c5c; --g-fill: #cfcfcf; --g-chip: #d9d9d9; --g-chart: #c8ff00; --g-pink: #ff6aa8; --g-cyan: #38d6ff; --g-orange: #ffa12e; --g-violet: #b996ff; --g-mint: #2ef0a8; --g-rasp: #b0144f; --g-blue: #0a5f9e; --g-deepv: #5a2fc9; --g-green: #0b6b4a; /* the background: brights, revealed within this many px of the cursor, at full strength only within the core, fading out to the rim */ --field-acc: #ff3d8b; --field-acc2: #12b8f0; --field-ev-a0: #ff8a00; --field-ev-a1: #8a5cff; --field-ev-a2: #00c98a; --field-ev-a3: #b8e600; --field-reveal: 380; --field-reveal-core: 130; } /* The background's strokes are hairlines at low alpha, so their colour reads faint even where it is revealed; lift it. Grey stays grey under saturate(). */ [data-skin="graphite"] #field { filter: saturate(2.2) contrast(1.15); } /* Everything that turns colour eases into it. */ [data-skin="graphite"] :is(.bar-logo, .nav-links a, .btn, .spec-buy, .chip, .skin-btn, .spec-date, .cap h2 i, .ph-title i, .idx-cap h2 i, .cta-band h2 i, .faq-q span) { transition: background-color 0.18s, border-color 0.18s, color 0.18s; } /* Wordmark: a black block; a bright under the cursor, another while pressed. */ [data-skin="graphite"] .bar-logo:hover { background-color: var(--g-chart); } [data-skin="graphite"] .bar-logo:hover::before { background-color: var(--ink); } [data-skin="graphite"] .bar-logo:active { background-color: var(--g-pink); } /* Nav: each item its own bright under the cursor, the next one along while pressed. */ [data-skin="graphite"] .nav-links a:not(.nav-cta):hover { color: var(--ink); } [data-skin="graphite"] .nav-links a:not(.nav-cta):nth-of-type(6n+1):hover { background: var(--g-chart); border-color: var(--g-chart); } [data-skin="graphite"] .nav-links a:not(.nav-cta):nth-of-type(6n+2):hover { background: var(--g-pink); border-color: var(--g-pink); } [data-skin="graphite"] .nav-links a:not(.nav-cta):nth-of-type(6n+3):hover { background: var(--g-cyan); border-color: var(--g-cyan); } [data-skin="graphite"] .nav-links a:not(.nav-cta):nth-of-type(6n+4):hover { background: var(--g-orange); border-color: var(--g-orange); } [data-skin="graphite"] .nav-links a:not(.nav-cta):nth-of-type(6n+5):hover { background: var(--g-violet); border-color: var(--g-violet); } [data-skin="graphite"] .nav-links a:not(.nav-cta):nth-of-type(6n+6):hover { background: var(--g-mint); border-color: var(--g-mint); } [data-skin="graphite"] .nav-links a:not(.nav-cta):nth-of-type(6n+1):active { background: var(--g-pink); border-color: var(--g-pink); } [data-skin="graphite"] .nav-links a:not(.nav-cta):nth-of-type(6n+2):active { background: var(--g-cyan); border-color: var(--g-cyan); } [data-skin="graphite"] .nav-links a:not(.nav-cta):nth-of-type(6n+3):active { background: var(--g-orange); border-color: var(--g-orange); } [data-skin="graphite"] .nav-links a:not(.nav-cta):nth-of-type(6n+4):active { background: var(--g-violet); border-color: var(--g-violet); } [data-skin="graphite"] .nav-links a:not(.nav-cta):nth-of-type(6n+5):active { background: var(--g-mint); border-color: var(--g-mint); } [data-skin="graphite"] .nav-links a:not(.nav-cta):nth-of-type(6n+6):active { background: var(--g-chart); border-color: var(--g-chart); } [data-skin="graphite"] .nav-links a:not(.nav-cta).active { color: var(--ink); border-color: var(--ink); } [data-skin="graphite"] .nav-links a.nav-cta:hover { background: var(--g-orange); color: var(--ink); } [data-skin="graphite"] .nav-links a.nav-cta:active { background: var(--g-cyan); color: var(--ink); } /* Phone menu: lines turn a deep under the finger. */ [data-skin="graphite"] .menu a.menu-link:nth-child(4n+1):hover { color: var(--g-deepv); } [data-skin="graphite"] .menu a.menu-link:nth-child(4n+2):hover { color: var(--g-rasp); } [data-skin="graphite"] .menu a.menu-link:nth-child(4n+3):hover { color: var(--g-blue); } [data-skin="graphite"] .menu a.menu-link:nth-child(4n+4):hover { color: var(--g-green); } /* Highlighted words: a grey block at rest; the heading under the cursor takes a bright. */ [data-skin="graphite"] :is(.cap h2 i, .ph-title i, .mdiv h2 i, .prose h2 i, .tech-cap i, .stat-num i, .hh h2 i, .hh h2 .t-serif, .idx-cap h2 i, .cta-band h2 i) { color: var(--ink); background: var(--g-fill); padding: 0 0.14em; box-decoration-break: clone; -webkit-box-decoration-break: clone; } [data-skin="graphite"] .cap:nth-of-type(4n+1):hover h2 i, [data-skin="graphite"] .page-head:hover .ph-title i { background: var(--g-chart); } [data-skin="graphite"] .cap:nth-of-type(4n+2):hover h2 i, [data-skin="graphite"] .idx-cap:hover h2 i { background: var(--g-cyan); } [data-skin="graphite"] .cap:nth-of-type(4n+3):hover h2 i, [data-skin="graphite"] .cta-band:hover h2 i { background: var(--g-pink); } [data-skin="graphite"] .cap:nth-of-type(4n+4):hover h2 i { background: var(--g-orange); } [data-skin="graphite"] .hero-side u, [data-skin="graphite"] .hero-annot .desc u { text-decoration-color: var(--g-fill); text-decoration-thickness: 6px; } /* Show cards: a grey date chip; the card under the cursor lights its chip. */ [data-skin="graphite"] .spec-date { display: inline-block; color: var(--ink); background: var(--g-chip); padding: 2px 7px; margin-bottom: 7px; } [data-skin="graphite"] .spec-date i { color: inherit; opacity: 0.7; } [data-skin="graphite"] :is(.spec:hover, .spec.hot):nth-child(4n+1) .spec-date { background: var(--g-mint); } [data-skin="graphite"] :is(.spec:hover, .spec.hot):nth-child(4n+2) .spec-date { background: var(--g-pink); } [data-skin="graphite"] :is(.spec:hover, .spec.hot):nth-child(4n+3) .spec-date { background: var(--g-cyan); } [data-skin="graphite"] :is(.spec:hover, .spec.hot):nth-child(4n+4) .spec-date { background: var(--g-chart); } [data-skin="graphite"] .crow:hover .crow-date { color: var(--g-deepv); } /* A touch screen has no cursor to find the colour by, so the highlighted headings and the date chips flash a bright as they scroll into view (.g-pop, set once each by dither.js) and settle back to grey. No fill mode, so a chip the card-in-the-middle rule has lit stays lit after. */ [data-skin="graphite"] :is(.cap h2 i, .ph-title i, .mdiv h2 i, .prose h2 i, .idx-cap h2 i, .cta-band h2 i) { --rest: var(--g-fill); --pop: var(--g-chart); } [data-skin="graphite"] .cap:nth-of-type(4n+2) h2 i, [data-skin="graphite"] .idx-cap h2 i { --pop: var(--g-cyan); } [data-skin="graphite"] .cap:nth-of-type(4n+3) h2 i, [data-skin="graphite"] .cta-band h2 i { --pop: var(--g-pink); } [data-skin="graphite"] .cap:nth-of-type(4n+4) h2 i, [data-skin="graphite"] .mdiv h2 i { --pop: var(--g-orange); } [data-skin="graphite"] .spec-date { --rest: var(--g-chip); --pop: var(--g-mint); } [data-skin="graphite"] .spec:nth-child(4n+2) .spec-date { --pop: var(--g-pink); } [data-skin="graphite"] .spec:nth-child(4n+3) .spec-date { --pop: var(--g-cyan); } [data-skin="graphite"] .spec:nth-child(4n+4) .spec-date { --pop: var(--g-violet); } @keyframes g-pop { 0%, 40% { background-color: var(--pop); } 100% { background-color: var(--rest); } } @media (hover: none) and (prefers-reduced-motion: no-preference) { [data-skin="graphite"] .g-pop { animation: g-pop 2.6s ease-out; } } /* Buttons: black or outlined at rest; a bright under the cursor, another pressed. */ @media (hover: hover) { [data-skin="graphite"] .btn:hover, [data-skin="graphite"] .btn-solid:hover { background: var(--g-chart); border-color: var(--g-chart); color: var(--ink); } [data-skin="graphite"] .spec-buy:hover { background: var(--g-cyan); border-color: var(--g-cyan); color: var(--ink); } [data-skin="graphite"] .newsletter-form button:hover { background: var(--g-pink); border-color: var(--g-pink); color: var(--ink); } [data-skin="graphite"] .chip:not(.active):hover { background: var(--g-violet); border-color: var(--g-violet); color: var(--ink); } [data-skin="graphite"] .skin-btn:not(.active):hover { background: var(--g-mint); border-color: var(--g-mint); color: var(--ink); } [data-skin="graphite"] .faq-q:hover span { color: var(--g-rasp); } } [data-skin="graphite"] :is(.btn, .btn-solid, .newsletter-form button):active { background: var(--g-pink); border-color: var(--g-pink); color: var(--ink); } [data-skin="graphite"] :is(.spec-buy, .chip, .skin-btn):active { background: var(--g-orange); border-color: var(--g-orange); color: var(--ink); } /* Links in running text: a bright behind them under the cursor. */ [data-skin="graphite"] main :is(p, li, dd) a:hover { background: var(--g-chart); color: var(--ink); text-decoration-color: var(--ink); } [data-skin="graphite"] main :is(p, li, dd) a:active { background: var(--g-cyan); } [data-skin="graphite"] .foot-col a:hover { color: var(--ink); } [data-skin="graphite"] .foot-col a:nth-child(3n+2):hover { color: var(--g-deepv); } [data-skin="graphite"] .foot-col a:nth-child(3n+3):hover { color: var(--g-rasp); } [data-skin="graphite"] .foot-col a:nth-child(3n+4):hover { color: var(--g-blue); } [data-skin="graphite"] .cms-banner { background: var(--g-fill); color: var(--ink); } [data-skin="graphite"] ::selection { background: var(--g-chart); color: var(--ink); } /* Ribbon: grey on black at rest; the show names light up while it is hovered. */ [data-skin="graphite"] .ribbon-track span.hot { color: #9a9a9a; transition: color 0.2s; } [data-skin="graphite"] .ribbon:hover .ribbon-track span.hot { color: var(--g-chart); } /* Plot layer: grey chrome. */ [data-skin="graphite"] .plot .ring { border-color: color-mix(in srgb, var(--ink) 30%, transparent); } [data-skin="graphite"] .plot .reg { border-color: var(--ink); opacity: 0.7; } [data-skin="graphite"] .quote { border-left-width: 6px; border-left-color: var(--g-fill); } [data-skin="graphite"] .hh { border-color: var(--g-fill); } [data-skin="graphite"] .foot-col-title, [data-skin="graphite"] .newsletter-label { color: var(--mute); } [data-skin="graphite"] .hw-xray { -webkit-text-stroke-color: var(--ink); } html { scroll-behavior: smooth; } body { background: var(--paper); color: var(--ink); font-family: var(--mono); font-size: 13px; line-height: 1.7; -webkit-font-smoothing: antialiased; transition: background-color 0.35s ease, color 0.35s ease; overflow-x: hidden; } ::selection { background: var(--acc); color: var(--acc-ink); } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; } img { display: block; max-width: 100%; } /* ═════════ GENERATIVE FIELD + PLOT LAYERS ═════════ */ /* width/height are explicit because `inset: 0` does NOT stretch a replaced element — a canvas takes its intrinsic size from its width/height attributes, and this box only ever matched the viewport because dither.js sets the backing store to the viewport. A no-op while that stays true, and the thing that stops a smaller backing store from silently shrinking the canvas to a corner of the screen, which is exactly what happened once. */ #field { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; } /* overflow: the ring runs past the screen's edge on a narrow phone, and a fixed box's overflow still counts as page width there */ .plot { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } .plot .ring { position: absolute; width: 130vmin; height: 130vmin; left: 60%; top: 45%; translate: -50% -50%; border: 1px dashed color-mix(in srgb, var(--ink) 26%, transparent); border-radius: 50%; animation: ringspin 90s linear infinite; } .plot .ring::after { content: ''; position: absolute; inset: 12%; border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); border-radius: 50%; } @keyframes ringspin { to { rotate: 360deg; } } .plot .cross-h, .plot .cross-v { position: absolute; background: color-mix(in srgb, var(--ink) 14%, transparent); } .plot .cross-h { left: 0; right: 0; top: 45%; height: 1px; } .plot .cross-v { top: 0; bottom: 0; left: 60%; width: 1px; } .plot .reg { position: absolute; width: 18px; height: 18px; border-left: 1px solid var(--ink); border-top: 1px solid var(--ink); opacity: 0.6; } .plot .reg.tl { top: 10px; left: 10px; } .plot .reg.tr { top: 10px; right: 10px; rotate: 90deg; } .plot .reg.bl { bottom: 10px; left: 10px; rotate: 270deg; } .plot .reg.br { bottom: 10px; right: 10px; rotate: 180deg; } /* Before the translate/rotate properties (Chrome < 104) the centring and the corner turns go through transform instead, or the ring sits half a ring off to the lower right and every corner mark faces the same way. The spin and the twinkle stay still there; nothing else on these sets a transform. */ @supports not (translate: 0) { .plot .ring, .sparks i, .sparks .sp-ring, .sparks .sp-reg { transform: translate(-50%, -50%); } .plot .reg.tr { transform: rotate(90deg); } .plot .reg.bl { transform: rotate(270deg); } .plot .reg.br { transform: rotate(180deg); } } @media (max-width: 760px) { /* On a phone the fixed crosshair ran straight through paragraphs. */ .plot .cross-h, .plot .cross-v { display: none; } } /* Dark plates: native date pickers, selects and scrollbars follow them instead of staying light. */ [data-skin="negative"], [data-skin="fluoro"], [data-skin="blueprint"], [data-skin="oxblood"], [data-skin="forest"], [data-skin="velvet"] { color-scheme: dark; } main, .bar, footer, .ribbon-wrap, .cms-banner { position: relative; z-index: 1; } /* ═════════ TOP BAR ═════════ */ .bar { position: sticky; top: 0; z-index: 1100; display: flex; align-items: center; gap: 1.5rem; padding: 0 var(--pad); height: 54px; background: color-mix(in srgb, var(--paper) 90%, transparent); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border-bottom: 1px solid var(--line); } /* The Hc monogram, reversed out of a solid box built to the CTA's: the same 40px height and 12px of horizontal air as PRIVATE PARTIES at the other end of the bar, so the two ends of the nav are the same object. The whole "Holocene" ran 118.7px here and was the widest thing in a 54px bar; the H and the c joined the way the wordmark's own "oc" is says the same name in 31px. See holocene-hc.svg for where every number in it comes from. The box takes --ink (what the mark itself used to be painted in) and the mark takes --paper, so the pair inverts skin by skin without either being spelled white anywhere: on NEGATIVE and FLUORO, where --ink is the light one, the box goes light and the mark dark, which is the same reversal read the other way. Two elements rather than one because a mask and a background cannot both live on the same box — the mask would eat the box. The ::before carries the mark, the carries the field. The mark is still 20.8px — cap height, as the wordmark it replaced was cap height plus the comma's tail, so the H lands exactly where it always did and the bar's optical baseline never moves. Width follows the artwork's own 71.83/48.37. The link keeps its text in a .vh span for screen readers and search, which is the only place the full word is now. */ .bar-logo { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; min-height: 40px; padding: 0 12px; background-color: var(--ink); transition: background-color 0.15s; } .bar-logo::before { content: ''; display: block; height: 20.8px; width: calc(20.8px * 71.83 / 48.37); background-color: var(--paper); -webkit-mask: url("holocene-hc.svg") no-repeat center / contain; mask: url("holocene-hc.svg") no-repeat center / contain; transition: background-color 0.15s; } .bar-logo:hover { background-color: var(--acc); } .bar-logo:hover::before { background-color: var(--acc-ink); } /* `is-type` is gone with the wordmark. Home used to swap the bar to the word set in Bricolage whenever the hero wore the logo, so the page never showed the same Holocene in the same face twice. The monogram is not the word, so it collides with neither hero — and swapping a 31px mark for a 120px word would have shoved the whole nav sideways on every toggle, where the wordmark it replaced moved it by 2px. The bar-logo click still toggles the hero. */ /* The gap is now the air BETWEEN THE HOVER FRAMES, not between the labels — see the frame rule below for why the frames stopped being free. Small numbers, because each frame already carries 12px of its own inset either side and the eye reads that as the spacing. */ /* No gap: each link already carries a 1px transparent border, so the hover rectangles are the border boxes and these sit exactly edge to edge — touching, never overlapping. Spacing between the words is the 11px padding on each side, and that is where to change it. */ .nav-links { display: flex; align-items: center; gap: 0; margin-left: auto; } /* 12.5px cap — halfway between the original 10px and the 15px that proved too big. Still scales with the viewport, and never wraps inside a 54px bar. */ .nav-links a { display: inline-flex; align-items: center; min-height: 40px; white-space: nowrap; font-size: clamp(10px, 0.87vw, 12.5px); letter-spacing: 0.14em; text-transform: uppercase; color: var(--mute); transition: color 0.15s; } .nav-links a:hover, .nav-links a.active { color: var(--ink); } /* Hover frame, pulled in a pixel on each of its four sides from where it was: 11px of horizontal padding where it had 12, and 38px tall where it had 40, with box-sizing: border-box putting the border inside that height. Measured to its outer edge that leaves it exactly level with the CTA's box either side (11 + 1 of border against the CTA's 12 of padding) and a pixel inside it top and bottom — where it used to stand a pixel proud of it horizontally. It used to cost no width at all — `margin: 0 -13px` cancelled the padding and the border exactly, so the frame was drawn INTO the gap either side. That is what put the frames on top of each other: reaching 13px out of a gap that is only 19.2px wide at 1280 left adjacent frames overlapping by 6.8px, and at the narrow end the fill ran under the neighbouring label. Only one frame is ever coloured, so nothing looked wrong until a skin filled it. So the frame now occupies its own space and the row's gap measures the air between frames instead. Labels sit further apart than they did — that spread IS the frame, made visible. The border is present at all times and only changes colour, so nothing moves on hover — padding applied on hover alone would shove the whole row sideways. */ .nav-links a:not(.nav-cta) { min-height: 38px; padding: 0 11px; border: 1px solid transparent; transition: color 0.15s, border-color 0.15s; } .nav-links a:not(.nav-cta):hover { border-color: var(--ink); } /* 38px to match the link boxes it now abuts: at 40 it stood 1px proud top and bottom, which read as emphasis with a gap there and as a misalignment without. */ .nav-links a.nav-cta { color: var(--paper); background: var(--ink); min-height: 38px; padding: 7px 12px; } .nav-links a.nav-cta:hover { background: var(--acc); color: var(--acc-ink); } .burger { display: none; align-items: center; min-height: 44px; min-width: 44px; justify-content: flex-end; margin-left: auto; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; color: var(--ink); padding: 8px; } @media (max-width: 1000px) { .nav-links { display: none; } .burger { display: flex; } } /* ═════════ FULLSCREEN MENU ═════════ */ .menu { position: fixed; inset: 0; z-index: 1090; background: var(--paper); display: flex; flex-direction: column; justify-content: center; padding: 54px var(--pad) 0; opacity: 0; visibility: hidden; transition: opacity 0.25s, visibility 0.25s; } .menu.open { opacity: 1; visibility: visible; } .menu a.menu-link { font-family: var(--disp); font-weight: 800; font-size: clamp(32px, 7vw, 68px); line-height: 1.22; text-transform: uppercase; letter-spacing: -0.01em; display: flex; align-items: baseline; gap: 16px; opacity: 0; transform: translateY(14px) rotate(-0.5deg); transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), color 0.15s; } .menu.open a.menu-link { opacity: 1; transform: none; } /* The stagger delays the entrance (opacity, transform) only. The third value is the hover colour, which must answer at once, not 0.24s late. */ .menu.open a.menu-link:nth-child(2) { transition-delay: 0.04s, 0.04s, 0s; } .menu.open a.menu-link:nth-child(3) { transition-delay: 0.08s, 0.08s, 0s; } .menu.open a.menu-link:nth-child(4) { transition-delay: 0.12s, 0.12s, 0s; } .menu.open a.menu-link:nth-child(5) { transition-delay: 0.16s, 0.16s, 0s; } .menu.open a.menu-link:nth-child(6) { transition-delay: 0.2s, 0.2s, 0s; } .menu.open a.menu-link:nth-child(7) { transition-delay: 0.24s, 0.24s, 0s; } .menu a.menu-link:hover { color: var(--acc); } .menu a.menu-link em { font-family: var(--mono); font-style: normal; font-weight: 400; font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--mute); } .menu-foot { position: absolute; bottom: max(1.4rem, env(safe-area-inset-bottom)); left: var(--pad); right: var(--pad); display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mute); } /* ── CMS banner ── */ .cms-banner { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 10px 18px; text-align: center; background: var(--acc); color: var(--acc-ink); z-index: 1080; } .cms-banner span { font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; } .cms-banner i { font-style: normal; transition: transform 0.2s; } a.cms-banner:hover i { transform: translateX(4px); } /* ═════════ HOME HERO / TITLE BLOCK ═════════ */ /* Top pad is the old clamp less 0.25in, floored so it can't collapse on short viewports. Bottom pad is deliberately much tighter than the top: the ribbon is the next thing down and the gap to it was reading as a hole. */ .hero { padding: max(0.5rem, calc(clamp(2.2rem, 7vh, 5rem) - 24px)) var(--pad) clamp(0.4rem, 0.93vh, 0.73rem); } .hero-word { font-family: var(--disp); font-weight: 420; text-transform: uppercase; /* 10% up on every stop of the old clamp(50px, 14.8vw, 270px). */ font-size: clamp(55px, 16.28vw, 297px); line-height: 1.02; letter-spacing: -0.02em; /* No top margin: the coords strip that used to sit above it is gone, and its cushion went with it. */ margin: 0; white-space: nowrap; font-variation-settings: 'opsz' 96; } .hero-word .kl { display: inline-block; font-weight: inherit; transition: font-weight 0.12s linear; } /* Until index.html has drawn the real mark, the h1 is only the word HOLOCENE set in Bricolage, and on a reload that flashed up before the scripts at the foot of the page ran. Opacity, not visibility, so the heading stays in the accessibility tree meanwhile. If the script never gets there, the word shows after 3s anyway rather than leaving a hole; with no script at all the