/* ========================================================================== Gabriel Walker · baritone — foundations Monochrome editorial system. Bodoni Moda (display) + Switzer (text). ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400;0,6..96,500;1,6..96,400&display=swap'); @import url('https://api.fontshare.com/v2/css?f[]=switzer@300,400,500,600&display=swap'); :root { /* type */ --display: 'Bodoni Moda', 'Didot', 'Bodoni MT', Georgia, serif; --text: 'Switzer', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif; /* ink scale — warmed paper */ --paper: #fbfaf8; --paper-off: #f4f2ee; --paper-deep: #ebe8e2; --ink: #14141a; --ink-soft: #3a3a42; --muted: #71717c; --faint: #9d9da7; --line: #e2ded6; --line-soft: #efece6; --night: #14141a; --night-ink: #f8f6f2; /* ---- accent system ------------------------------------------------- Every colour is sampled from Gabriel's own photographs: the cobalt from the Riders to the Sea backdrop and his navy suit, the brass from the gold pocket square, the green from the stage light behind Masetto. -------------------------------------------------------------------- */ --cobalt: #1b3a6b; --brass: #8a5f21; --green: #2c4a3a; --oxblood: #6b2230; --violet: #3d3a52; --sand: #6f6247; /* per-page accent — overridden on */ --accent: var(--cobalt); --accent-ink: #fbfaf8; /* text that sits ON the accent block */ --accent-tint: #eef1f6; /* 8% wash of the accent for soft fills */ --accent-2: var(--brass); /* scale */ --t-xs: 0.6875rem; --t-sm: 0.8125rem; --t-base: 1rem; --t-md: 1.0625rem; --t-lg: 1.25rem; --t-xl: 1.625rem; --t-2xl: clamp(2rem, 3.4vw, 3rem); --t-3xl: clamp(2.75rem, 5.6vw, 4.75rem); --t-hero: clamp(3.5rem, 10.5vw, 9.5rem); /* rhythm */ --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 3rem; --s-8: 3.5rem; --s-9: 5rem; --s-10: 7rem; --gutter: clamp(1.25rem, 5vw, 4.5rem); --measure: 63ch; --header-h: 78px; --ease: cubic-bezier(0.22, 1, 0.36, 1); --ease-wipe: cubic-bezier(0.76, 0, 0.24, 1); } /* ---- per-page accent assignments ------------------------------------- */ body[data-accent="cobalt"] { --accent: var(--cobalt); --accent-tint: #edf0f5; } body[data-accent="brass"] { --accent: var(--brass); --accent-tint: #f6efe3; } body[data-accent="green"] { --accent: var(--green); --accent-tint: #ecf0ed; } body[data-accent="oxblood"] { --accent: var(--oxblood); --accent-tint: #f6ecee; } body[data-accent="violet"] { --accent: var(--violet); --accent-tint: #efeef3; } body[data-accent="sand"] { --accent: var(--sand); --accent-tint: #f2f0e7; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--text); font-size: var(--t-md); font-weight: 400; line-height: 1.68; letter-spacing: 0.002em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } h1, h2, h3, h4 { font-family: var(--display); font-weight: 400; line-height: 1.06; letter-spacing: -0.018em; margin: 0; text-wrap: balance; } p { margin: 0; } p + p { margin-top: 1.15em; } a { color: inherit; text-decoration: none; } img, svg, video, audio { display: block; max-width: 100%; } img { height: auto; } ul, ol { margin: 0; padding: 0; list-style: none; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } hr { border: 0; border-top: 1px solid var(--line); margin: 0; } ::selection { background: var(--ink); color: var(--paper); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } .skip { position: absolute; left: -9999px; top: 0; background: var(--ink); color: var(--paper); padding: 0.75rem 1.25rem; z-index: 999; } .skip:focus { left: 0; } .vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }