/* ------------------------------------------------------------------
Working Proof — clean port of the Carrd draft.
Design tokens live in :root. Layout centres on the .split-card
(two columns with a 1px rule between them, stacks under 736px).
------------------------------------------------------------------ */
/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
html, body, h1, h2, h3, h4, p, ul, li, table, td, th, hr, figure, blockquote {
margin: 0; padding: 0; border: 0; font: inherit; vertical-align: baseline;
}
ul { list-style: none; }
table { border-collapse: collapse; border-spacing: 0; }
a { color: inherit; text-decoration: underline; transition: color .25s ease; }
/* ---- Design tokens ---- */
:root {
/* B&W */
/*
--ink: #000000;
--paper: #ffffff;
--rule: #E3E3E3;
--accent: #f0eded;
*/
/* Muted punk */
/* --ink: #1a1a1a;
--paper: #ffed48;
--rule: #ffe60000;
--accent: #ff00f255; */
/* Muted punk */
--ink: #1a1a1a;
--paper: #f0c440;
--rule: #ffe60000;
--accent: #ff00f255;
/* Type */
--font-body: 'Inter', system-ui, sans-serif;
/* Layout */
--site-width: 75rem;
--pad-x: 6rem;
--pad-y: 4rem;
--stack: 1.5rem; /* vertical rhythm inside a column */
--column-gap: 9rem; /* horizontal gap between headline / body */
--section-gap: 6rem; /* space either side of a section rule */
--rule-gap: 3rem; /* space above/below the rule itself */
/* Background texture: opacity of the paper wash over .bg-media.
1 = pure paper (no texture), 0 = media fully visible.
The crossfader script rewrites --paper-tint per-image on each
swap, so this initial value only applies until the first swap. */
--paper-tint: 0.96;
/* Duration of the background image crossfade AND the wash opacity
transition — kept in sync so image and tint move together. */
--bg-fade: 4s;
}
/* Base font size scales with viewport, matching Carrd. */
html { font-size: 16pt; }
@media (max-width: 1680px) { html { font-size: 12pt; } }
@media (max-width: 980px) { html { font-size: 10pt; } }
@media (max-width: 736px) { html { font-size: 12pt; } }
/* Paper colour lives on as a fallback so the page still looks
right if the media/tint layers fail to render. Body stays transparent
so the fixed .bg-media and .bg-tint (negative z-index) show through. */
html { background: var(--paper); }
body {
background: transparent;
color: var(--ink);
font-family: var(--font-body);
line-height: 1;
min-width: 320px;
overflow-x: hidden;
word-wrap: break-word;
-webkit-text-size-adjust: none;
position: relative; /**/
}
strong { font-weight: bolder; }
em { font-style: italic; }
.accent {
color: var(--accent);
}
.accentbg {
background-color: var(--accent);
}
.highlight {
background-color: var(--accent);
}
/* ---- Background texture ------------------------------------------
Two fixed, full-viewport layers sit at negative z-index so they
render behind everything in the normal flow:
.bg-media — an ![]()
or