/* Turnberry Open — design tokens and primitives.
Rationale, measurements, and the reasoning behind every value: DESIGN.md
Palette is measured from the artwork: python3 tools/palette.py */
@font-face {
font-family: 'Anton';
src: url('/assets/fonts/anton.woff2') format('woff2');
font-weight: 400;
font-display: swap;
}
@font-face {
font-family: 'Karla';
src: url('/assets/fonts/karla.woff2') format('woff2');
font-weight: 300 800;
font-display: swap;
}
@font-face {
font-family: 'JetBrains Mono';
src: url('/assets/fonts/jetbrains-mono.woff2') format('woff2');
font-weight: 400 700;
font-display: swap;
}
/* Oswald + Instrument Serif come from the Claude Design reframe. Self-hosted
like the rest: the design loaded them from Google, which this site does not
do. Latin subsets, verified for basic-latin coverage rather than assumed --
the first woff2 Google's css2 returns is a non-Latin subset and grabbing it
yields an 8KB file that renders nothing. */
@font-face {
font-family: 'Oswald';
src: url('/assets/fonts/oswald.woff2') format('woff2');
font-weight: 200 700;
font-display: swap;
}
@font-face {
font-family: 'Instrument Serif';
src: url('/assets/fonts/instrument-serif.woff2') format('woff2');
font-weight: 400;
font-display: swap;
}
:root {
/* Measured. Do not hand-tune without re-running tools/palette.py. */
--ground: #14140f;
--ground-lift: #23231b;
--ground-deep: #0e0e0a;
--stock: #f4f1ea;
--stock-warm: #fbfaf6;
--ink: #14140f;
--green: #1f6f4a;
--orange: #e8622a;
--mute-warm: #8a8778;
--mute-cool: #cdc9bb;
--gold: #e8c060;
--ember: #c4562b;
--sage: #a8b090;
/* --gold is a DARK-GROUND accent: 7.6:1 on the teal, 1.41:1 on the cream.
It shipped unflipped, so every year label, section link and price on the
light theme was effectively invisible. --accent is the theme-aware one;
--gold stays literal only where it is a BACKGROUND under ink text. */
--brass: #1f6f4a; /* design's green reads 5.8:1 on the warm white */
--fg: var(--stock);
--bg: var(--ground);
--muted: color-mix(in srgb, var(--stock) 62%, var(--ground));
--rule: color-mix(in srgb, var(--sage) 34%, transparent);
--accent: var(--gold);
--display: 'Oswald', 'Haettenschweiler', 'Arial Narrow', sans-serif;
--body: 'Oswald', ui-sans-serif, system-ui, sans-serif;
--serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;
--mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;
/* 1.25 major third from 16px; display steps set by hand so the condensed
face keeps its proportion at size. */
--t-xs: 0.8rem;
--t-sm: 0.9rem;
--t-base: 1rem;
--t-md: 1.25rem;
--t-lg: 1.563rem;
--t-xl: 1.953rem;
--t-2xl: 2.75rem;
--t-3xl: 4rem;
--t-4xl: clamp(3.5rem, 11vw, 8.5rem);
--sp-1: 0.25rem;
--sp-2: 0.5rem;
--sp-3: 0.75rem;
--sp-4: 1rem;
--sp-6: 1.5rem;
--sp-8: 2rem;
--sp-12: 3rem;
--sp-16: 4rem;
--sp-24: 6rem;
--measure: 62ch;
--radius: 2px;
--ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}
/* Light mode inverts the same measured pair — paper as ground, teal as ink.
Not a second palette, the same one the other way up. */
@media (prefers-color-scheme: light) {
:root {
--fg: var(--ink);
--bg: var(--stock);
--muted: color-mix(in srgb, var(--ink) 58%, var(--stock));
--rule: color-mix(in srgb, var(--ground) 26%, transparent);
--accent: var(--brass);
}
}
:root[data-theme='dark'] {
--fg: var(--stock);
--bg: var(--ground);
--muted: color-mix(in srgb, var(--stock) 62%, var(--ground));
--rule: color-mix(in srgb, var(--sage) 34%, transparent);
--accent: var(--gold);
}
:root[data-theme='light'] {
--fg: var(--ink);
--bg: var(--stock);
--muted: color-mix(in srgb, var(--ink) 58%, var(--stock));
--rule: color-mix(in srgb, var(--ground) 26%, transparent);
--accent: var(--brass);
}
*,
*::before,
*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0;
background: var(--bg);
color: var(--fg);
font-family: var(--body);
font-size: var(--t-base);
line-height: 1.6;
font-synthesis-weight: none;
-webkit-font-smoothing: antialiased;
}
h1, h2, h3 {
font-family: var(--display);
font-weight: 400;
line-height: 0.92;
letter-spacing: 0.01em;
text-transform: uppercase;
margin: 0;
}
h1 { font-size: var(--t-4xl); }
h2 { font-size: var(--t-3xl); }
h3 { font-size: var(--t-xl); }
p { max-width: var(--measure); margin: 0 0 var(--sp-4); }
a { color: inherit; text-underline-offset: 0.2em; }
a:hover { text-decoration-color: var(--accent); }
/* The year is the ordering device, so it gets the utility face everywhere:
eyebrow, label, anchor, URL. No invented 01/02/03 sequence. */
.year {
font-family: var(--mono);
font-size: var(--t-sm);
letter-spacing: 0.08em;
color: var(--accent);
font-variant-numeric: tabular-nums;
}
.eyebrow {
font-family: var(--mono);
font-size: var(--t-xs);
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--muted);
}
.rule { border: 0; border-top: 1px solid var(--rule); margin: var(--sp-12) 0; }
.wrap {
width: min(100% - 2 * var(--sp-6), 78rem);
margin-inline: auto;
}
/* --- The rack -----------------------------------------------------------
The gallery is a print rack, not a card grid: posters stand in slots seen
slightly edge-on, the way they sit in a shop. Scrolling moves along it.
The 1965 -> 2026 span reads as physical distance, which a grid flattens. */
.rack {
display: flex;
gap: var(--sp-4);
padding: var(--sp-12) var(--sp-6) var(--sp-16);
overflow-x: auto;
scroll-snap-type: x proximity;
perspective: 1600px;
scrollbar-color: var(--sage) transparent;
}
.slot {
flex: 0 0 auto;
scroll-snap-align: center;
position: relative;
background: var(--ground-lift);
padding: var(--sp-3) var(--sp-3) var(--sp-6);
border-radius: var(--radius);
box-shadow: inset 0 1px 0 color-mix(in srgb, var(--stock) 12%, transparent);
}
.slot__poster {
display: block;
width: clamp(9rem, 22vw, 15rem);
/* height:auto is load-bearing. The ![]()
carries width/height attributes as
presentational hints; overriding only width left height pinned at 1536px,
so aspect-ratio never drove the box and every poster rendered as a tall
cropped strip. */
height: auto;
aspect-ratio: 2 / 3; /* canonical. Matches the print master exactly. */
object-fit: cover;
background: var(--ground-deep);
transform: rotateY(-9deg);
transform-origin: left center;
transition: transform 420ms var(--ease), box-shadow 420ms var(--ease);
box-shadow: 0 12px 28px -12px var(--ground-deep);
}
.slot:hover .slot__poster,
.slot:focus-within .slot__poster {
transform: rotateY(0deg) translateY(-10px);
box-shadow: 0 26px 50px -18px var(--ground-deep);
}
.slot a:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; }
/* Founding pieces sit apart from the unbroken 1986-2026 run. The gap does the
explaining, so no label has to. */
.slot--founding { margin-right: var(--sp-16); }
.slot--founding .year { color: var(--ember); }
/* One orchestrated moment: the rack settles left to right on load, so the first
thing the page does is show its own shape. */
@keyframes settle {
from { opacity: 0; transform: translateY(14px); }
to { opacity: 1; transform: none; }
}
.rack .slot {
animation: settle 520ms var(--ease) both;
animation-delay: calc(var(--i, 0) * 28ms);
}
.btn {
display: inline-block;
font-family: var(--mono);
font-size: var(--t-sm);
letter-spacing: 0.08em;
text-transform: uppercase;
text-decoration: none;
padding: var(--sp-3) var(--sp-6);
color: var(--ink);
background: var(--gold);
border-radius: var(--radius);
transition: transform 160ms var(--ease), background 160ms var(--ease);
}
.btn:hover { background: var(--stock-warm); transform: translateY(-2px); }
.btn:focus-visible { outline: 2px solid var(--stock); outline-offset: 3px; }
.sold { color: var(--ember); }
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
/* The rack must read with zero motion: flatten the slots rather than leaving
them mid-rotation. */
.slot__poster { transform: none; }
}
@media (max-width: 40rem) {
.rack { padding-inline: var(--sp-4); }
.slot__poster { transform: none; }
}
/* --- chrome ------------------------------------------------------------- */
.visually-hidden,
.skip:not(:focus) {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.skip:focus {
position: fixed; inset: var(--sp-3) auto auto var(--sp-3);
z-index: 10; padding: var(--sp-3) var(--sp-4);
background: var(--gold); color: var(--ink); border-radius: var(--radius);
}
.masthead {
display: flex; align-items: center; justify-content: space-between;
gap: var(--sp-6); padding-block: var(--sp-6);
}
/* Mask rather than ![]()
or cross-document