/* ---- retune the whole site from this block ---- */ :root { --accent: #c9a227; --bg: #101010; --fg: #b6b5b0; /* body: greyed, sits between the title and the caption */ --head: #ededea; /* headings: brightest, a touch off pure white */ --muted: color-mix(in srgb, var(--fg) 58%, var(--bg)); /* captions/footnotes: furthest back */ --body: 1.25rem; /* one body size; h1 is 2x */ --measure: 36em; /* ---- type sparkle: diffuse glow + tiny chromatic aberration + soft focus ---- */ --glow-rgb: 236, 228, 203; /* warm near-white halo (warmth 0.14) */ --glow-r1: 10.85px; --glow-a1: 0.13; /* tight inner glow */ --glow-r2: 31px; --glow-a2: 0.065; /* wide outer glow */ --ca-x: 0.9px; --ca-blur: 0.15px; --ca-a: 0.07; /* chromatic aberration */ --ca-red: 255, 60, 60; --ca-cyan: 60, 200, 255; --head-glow: 3; /* headings: glow multiplier vs body */ --head-ca: 5; /* headings: chromatic-aberration multiplier vs body (titles fringe hard) */ --text-blur: 0.005px; /* soft focus, text only; a Safari whisper (Chrome is below its blur threshold here) */ --ca-mul: 1; /* per-element CA multiplier (headings override) */ --glow-mul: 1; /* per-element glow multiplier (headings override) */ } @media (prefers-color-scheme: light) { :root { --bg: #f4f3f0; --fg: #565652; --head: #1a1a1a; --glow-rgb: 45, 40, 23; } } /* ----------------------------------------------- */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 600; font-size: var(--body); line-height: 1.55; background: var(--bg); color: var(--fg); max-width: var(--measure); margin: 0 auto; padding: 6vh 1.25rem 4rem; } h1 { font-size: 2em; line-height: 1.1; font-weight: 600; letter-spacing: -0.02em; color: var(--head); } h2 { font-size: 1em; font-weight: 600; color: var(--head); margin-top: 3.75rem; } p, ul, ol, figure { margin-top: 1.4rem; } ul, ol { list-style-position: inside; } li { margin-top: 0.35rem; } a { color: inherit; text-decoration-line: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 0.2em; } a:hover { color: var(--accent); } img, video { max-width: 100%; height: auto; display: block; } figcaption { color: var(--muted); margin-top: 0.75rem; } /* full-viewport-width media, scales with the browser (breaks out of the centred column) */ html { overflow-x: clip; } .fullbleed { width: 100vw; margin-inline: calc(50% - 50vw); } .fullbleed video { display: block; width: 100vw; height: auto; } .fullbleed figcaption { max-width: var(--measure); margin: 0.75rem auto 0; padding: 0 1.25rem; } /* inline text that opens a popover; styled to read exactly like a link */ .pop-link { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-decoration-line: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 0.2em; } .pop-link:hover { color: var(--accent); } [popover] { margin: auto; /* the global margin reset kills the UA centring; restore it */ background: #000; border: 0; padding: 0; max-width: min(70vw, 320px); border-radius: 16px; overflow: hidden; /* clips the gif to the rounded corners */ } [popover]::backdrop { background: rgb(0 0 0 / 0.85); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } [popover] img { width: 100%; height: auto; image-rendering: pixelated; } /* fixed colours, not the theme variables: the popover is black in both schemes because the gif has a black background */ .pop-caption { margin: 0; padding: 0.5rem 0.9rem 0.8rem; color: #8a8a86; text-align: left; } #footnote { margin-top: 4rem; } .muted { color: var(--muted); } blockquote { margin-top: 1.4rem; padding-left: 1.25rem; border-left: 2px solid var(--accent); } blockquote .cite { color: var(--muted); } footer { margin-top: 6rem; color: var(--muted); } footer a { text-decoration-color: currentColor; text-decoration-thickness: 1px; } footer a:hover { color: var(--fg); } /* ================================================================ Type sparkle: a diffuse glow, a tiny chromatic aberration, and a tiny soft-focus blur, on the real (selectable) text only. Retune from the variable block at the top of the file. The text-shadow is declared on body and re-declared on h1/h2 because a text-shadow's var() values resolve at the element that declares it, not where it is inherited, so headings must repeat the rule to pick up their own --gmul (the heading-boost multiplier). ================================================================ */ body { text-shadow: calc(-1 * var(--ca-x) * var(--ca-mul)) 0 var(--ca-blur) rgba(var(--ca-red), calc(var(--ca-a) * var(--ca-mul))), calc(var(--ca-x) * var(--ca-mul)) 0 var(--ca-blur) rgba(var(--ca-cyan), calc(var(--ca-a) * var(--ca-mul))), 0 0 var(--glow-r1) rgba(var(--glow-rgb), calc(var(--glow-a1) * var(--glow-mul))), 0 0 var(--glow-r2) rgba(var(--glow-rgb), calc(var(--glow-a2) * var(--glow-mul))); } h1, h2 { --ca-mul: var(--head-ca); --glow-mul: var(--head-glow); text-shadow: calc(-1 * var(--ca-x) * var(--ca-mul)) 0 var(--ca-blur) rgba(var(--ca-red), calc(var(--ca-a) * var(--ca-mul))), calc(var(--ca-x) * var(--ca-mul)) 0 var(--ca-blur) rgba(var(--ca-cyan), calc(var(--ca-a) * var(--ca-mul))), 0 0 var(--glow-r1) rgba(var(--glow-rgb), calc(var(--glow-a1) * var(--glow-mul))), 0 0 var(--glow-r2) rgba(var(--glow-rgb), calc(var(--glow-a2) * var(--glow-mul))); } /* soft-focus blur on the MAIN HEADING only. A blur across all the body copy read too soft, and per-element filters hit iOS WebKit's filter-layer budget and drop out mid-page; one filtered element avoids both. Photos/video and the rest of the text stay crisp; the glow and chromatic aberration remain. */ h1 { filter: blur(var(--text-blur)); } /* keep the Lemmings popover crisp and clean (a separate black card) */ [popover], [popover] * { text-shadow: none; filter: none; } /* accessibility: readers who ask for higher contrast get crisp text */ @media (prefers-contrast: more) { body, h1, h2 { text-shadow: none; } h1 { filter: none; } }