/* AUTO-GENERATED by scripts/sync-brand.sh — do not edit.
Source of truth: design/tokens/* and design/markdown.css */
/* ===== tokens/fonts.css ===== */
/* ============================================================
FONTS — webfont declarations
------------------------------------------------------------
The through-line is a warm humanist serif in the spirit of
Apple Garamond. Apple Garamond is not web-licensed, so
EB Garamond stands in for it (close in spirit, free).
Three characterful serifs shift the mood per mode
(Fraunces, Spectral, Newsreader) and JetBrains Mono carries
every eyebrow, dateline, caption and page number.
SUBSTITUTION FLAG: Apple Garamond -> EB Garamond.
Replace with a licensed Apple Garamond @font-face if you
have the files.
Fonts are served from Google Fonts; the @font-face rules
live in the imported stylesheet (shipped to consumers).
============================================================ */
@import url("https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400;1,9..144,500&family=Spectral:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,400&family=JetBrains+Mono:wght@400;500&display=swap");
/* ===== tokens/colors.css ===== */
/* ============================================================
COLORS
------------------------------------------------------------
Organizing principle: a restrained monochrome base
(near-black ink on warm white / cream), with exactly ONE
deliberate accent per mode. The base is always monochrome;
only the accent changes between modes. The accent is a
scalpel — links, list markers, one rule line — never fill.
This file declares:
1. The five base accents (raw palette).
2. The default semantic theme (Black Tee) on :root.
Per-mode neutral + accent + type overrides live in modes.css
as single-selector [data-mode="…"] theme scopes.
============================================================ */
:root {
/* --- base accents (raw, one per mode) --------------------- */
--accent-denim: #3c5a86; /* Black Tee — everyday uniform */
--accent-oxblood: #7a2531; /* Chromexcel — black-red Aldens */
--accent-violet: #644aad; /* Kollokium — the purple watch */
--accent-forest: #2e5a47; /* Forestlake — car + light interior */
--accent-graphite: #3a3f47; /* Steel — the dress watches */
/* --- default theme: Black Tee ---------------------------- */
/* base values */
--bg: #fbfbf9; /* page / canvas */
--paper: #ffffff; /* raised surfaces, cards */
--ink: #1a1916; /* primary text */
--muted: #76736a; /* secondary text */
--line: #e9e7e1; /* hairline borders */
--accent: var(--accent-denim);
--wash: color-mix(in srgb, var(--accent) 7%, var(--paper)); /* faint accent tint */
/* semantic aliases — name the role, not the value */
--surface-page: var(--bg);
--surface-card: var(--paper);
--text-strong: var(--ink);
--text-body: var(--ink);
--text-muted: var(--muted);
--border: var(--line);
--link: var(--accent);
--marker: var(--accent);
}
/* ===== tokens/typography.css ===== */
/* ============================================================
TYPOGRAPHY
------------------------------------------------------------
A warm humanist serif is the through-line. Body and headings
are always serif; eyebrows, datelines, captions and page
numbers are mono (an editorial signature for someone who
writes in .md and prompts Claude). No default system sans
ever appears in content.
Font-family tokens are the raw families; --font-head and
--font-body are the semantic selectors each mode rebinds.
============================================================ */
:root {
/* --- font families (raw) --------------------------------- */
--font-eb-garamond: "EB Garamond", Georgia, "Times New Roman", serif;
--font-fraunces: "Fraunces", Georgia, serif;
--font-spectral: "Spectral", Georgia, serif;
--font-newsreader: "Newsreader", Georgia, serif;
--font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
/* --- semantic roles (default: Black Tee = EB Garamond) --- */
--font-head: var(--font-eb-garamond); /* display / headings */
--font-body: var(--font-eb-garamond); /* running text */
/* --- type scale: editorial, serif-first ------------------ */
--text-eyebrow: 11.5px; /* mono, tracked, uppercase */
--text-caption: 15px; /* serif italic */
--text-prompt: 13.5px; /* mono code block */
--text-small: 14px;
--text-body-size: 19.5px;
--text-lead: 21px;
--text-list: 19px;
--text-quote: 22px; /* doc blockquote */
--text-h3: 28px;
--text-h2: 40px;
--text-h1: 52px;
/* --- slide (deck) scale ---------------------------------- */
--text-slide-eyebrow: 14px;
--text-slide-meta: 15px;
--text-slide-statement: 54px;
--text-slide-quote: 50px;
--text-slide-title: 66px;
--text-slide-card: 31px;
--text-slide-cap: 35px;
/* --- line heights ---------------------------------------- */
--leading-tight: 1.06;
--leading-snug: 1.22;
--leading-body: 1.62;
--leading-relaxed: 1.65;
/* --- letter-spacing (tracking) --------------------------- */
--track-eyebrow: 0.18em; /* mono labels */
--track-slide: 0.20em; /* slide eyebrows */
--track-mono: 0.05em; /* mono datelines */
--track-display: -0.015em;/* large serif */
/* --- weights --------------------------------------------- */
--weight-regular: 400;
--weight-medium: 500;
--weight-semi: 600;
}
/* ===== tokens/spacing.css ===== */
/* ============================================================
SPACING, RADII, ELEVATION
------------------------------------------------------------
Air over ornament. Generous, even spacing; soft humanist
radii; shadows so quiet they read as a lifted edge, never
a glow. Cards are paper on a warm room.
============================================================ */
:root {
/* --- spacing scale --------------------------------------- */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 24px;
--space-6: 32px;
--space-7: 48px;
--space-8: 64px;
--space-9: 96px;
/* --- measure (line length) ------------------------------- */
--measure: 66ch; /* comfortable reading width */
--measure-narrow: 40ch;
/* --- document & slide padding ---------------------------- */
--doc-pad-y: 60px;
--doc-pad-x: 72px;
--slide-pad-y: 84px;
--slide-pad-x: 96px;
/* --- radii (soft, humanist) ------------------------------ */
--radius-sm: 5px; /* inline code, chips */
--radius-md: 9px; /* photo wells, prompt block */
--radius-lg: 11px; /* controls, meta strip */
--radius-xl: 14px; /* sheets, deck frame */
--radius-pill: 999px;
/* --- hairlines ------------------------------------------- */
--rule: 1px; /* hairline border */
--rule-accent: 2px;/* accent scalpel line */
/* --- elevation (quiet, warm) ----------------------------- */
--shadow-card:
0 1px 1px rgba(40, 36, 28, 0.04),
0 18px 44px -22px rgba(40, 36, 28, 0.30);
--shadow-deck:
0 1px 1px rgba(40, 36, 28, 0.05),
0 22px 50px -24px rgba(40, 36, 28, 0.35);
/* --- motion ---------------------------------------------- */
--ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
--dur-fast: 0.16s;
--dur-slide: 0.45s;
}
/* ===== tokens/modes.css ===== */
/* ============================================================
MODES — the five themes
------------------------------------------------------------
Each mode is a base + ONE accent + a type pairing, named for
something of Joerg's. Apply a mode by setting data-mode on
any container (or on for the whole page):
…
:root defaults to Black Tee (see colors.css / typography.css);
the explicit [data-mode="blacktee"] scope below lets you nest
a Black Tee island inside another mode.
Every scope rebinds the same semantic tokens — only the
accent, the warm neutrals and the type pairing change.
============================================================ */
/* Black Tee — everyday uniform · notes, prompts, working docs (default) */
[data-mode="blacktee"] {
--bg:#fbfbf9; --paper:#ffffff; --ink:#1a1916; --muted:#76736a;
--line:#e9e7e1; --accent:var(--accent-denim);
--wash:color-mix(in srgb, var(--accent) 7%, var(--paper));
--font-head:var(--font-eb-garamond);
--font-body:var(--font-eb-garamond);
}
/* Chromexcel — black-red Aldens · personal essays, Substack */
[data-mode="chromexcel"] {
--bg:#f8f3ea; --paper:#fffdf7; --ink:#211711; --muted:#8b7a67;
--line:#e9dfcd; --accent:var(--accent-oxblood);
--wash:color-mix(in srgb, var(--accent) 7%, var(--paper));
--font-head:var(--font-fraunces);
--font-body:var(--font-eb-garamond);
}
/* Kollokium — the purple watch · talks, creative experiments */
[data-mode="kollokium"] {
--bg:#f9f7fc; --paper:#ffffff; --ink:#1d1826; --muted:#7c7488;
--line:#ebe6f2; --accent:var(--accent-violet);
--wash:color-mix(in srgb, var(--accent) 7%, var(--paper));
--font-head:var(--font-fraunces);
--font-body:var(--font-spectral);
}
/* Forestlake — car + light interior · photography, outdoors, slower pieces */
[data-mode="forestlake"] {
--bg:#f3f4ec; --paper:#fcfcf6; --ink:#18201a; --muted:#6f7a6e;
--line:#e0e3d6; --accent:var(--accent-forest);
--wash:color-mix(in srgb, var(--accent) 7%, var(--paper));
--font-head:var(--font-spectral);
--font-body:var(--font-spectral);
}
/* Steel & White Gold — dress watches · formal, board — no colour */
[data-mode="steel"] {
--bg:#fcfcfb; --paper:#ffffff; --ink:#181a1d; --muted:#8b9097;
--line:#e9eaec; --accent:var(--accent-graphite);
--wash:color-mix(in srgb, var(--accent) 7%, var(--paper));
--font-head:var(--font-newsreader);
--font-body:var(--font-newsreader);
}
/* ===== markdown.css ===== */
/* ============================================================
markdown.css — render ANY markdown beautifully
------------------------------------------------------------
Styles raw markdown -> HTML output using the design tokens, so
a plain .md file comes out tasteful with zero fiddling. Pair
this with styles.css (the tokens) and set data-mode on the
container to pick a mode:
…
All colour, type and spacing come from the tokens, so the
markdown re-skins across all five modes for free.
============================================================ */
.markdown {
color: var(--ink);
background: var(--bg);
font-family: var(--font-body);
font-size: var(--text-body-size);
line-height: var(--leading-body);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
.markdown > :first-child { margin-top: 0; }
.markdown > :last-child { margin-bottom: 0; }
/* --- headings -------------------------------------------------- */
.markdown h1, .markdown h2, .markdown h3,
.markdown h4, .markdown h5, .markdown h6 {
font-family: var(--font-head);
color: var(--ink);
font-weight: var(--weight-semi);
line-height: var(--leading-tight);
letter-spacing: var(--track-display);
text-wrap: balance;
}
.markdown h1 { font-size: var(--text-h1); margin: 0 0 .5em; }
.markdown h2 { font-size: var(--text-h2); margin: 1.3em 0 .55em; }
.markdown h3 { font-size: var(--text-h3); line-height: 1.15; margin: 1.4em 0 .4em; }
.markdown h4 { font-size: 22px; line-height: 1.2; margin: 1.4em 0 .35em; }
.markdown h5 { font-size: 19px; margin: 1.4em 0 .3em; }
.markdown h6 {
font-family: var(--font-mono); font-size: var(--text-eyebrow);
letter-spacing: var(--track-eyebrow); text-transform: uppercase;
font-weight: 500; color: var(--accent); margin: 1.6em 0 .8em;
}
.markdown h1 + p, .markdown h2 + p, .markdown h3 + p { margin-top: 0; }
/* --- body ------------------------------------------------------ */
.markdown p { margin: 0 0 1.05em; }
.markdown a {
color: var(--accent);
text-decoration-line: underline; text-decoration-thickness: 1px;
text-underline-offset: 3px;
text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent);
}
.markdown a:hover { text-decoration-color: var(--accent); }
.markdown strong { font-weight: var(--weight-semi); }
.markdown em { font-style: italic; }
.markdown small { font-size: .82em; color: var(--muted); }
.markdown mark { background: var(--wash); color: var(--ink); padding: 0 .15em; }
.markdown del { color: var(--muted); }
/* --- the lead (first paragraph, or .lead) ---------------------- */
.markdown > p:first-of-type, .markdown .lead { font-size: var(--text-lead); }
/* --- lists ----------------------------------------------------- */
.markdown ul { list-style: none; padding-left: 22px; margin: 0 0 1.2em; }
.markdown ul li { position: relative; padding-left: 4px; }
.markdown ul li::before {
content: "—"; position: absolute; left: -22px; color: var(--accent);
}
.markdown ol { padding-left: 26px; margin: 0 0 1.2em; }
.markdown ol li::marker { color: var(--accent); font-family: var(--font-mono); font-size: .85em; }
.markdown li { font-size: var(--text-list); line-height: 1.5; margin: .4em 0; }
.markdown li > ul, .markdown li > ol { margin: .3em 0 .2em; }
/* --- blockquote ------------------------------------------------ */
.markdown blockquote {
margin: 1.5em 0; padding: .1em 0 .1em 24px;
border-left: var(--rule-accent) solid var(--accent);
font-family: var(--font-head); font-style: italic;
font-size: var(--text-quote); line-height: 1.4;
color: color-mix(in srgb, var(--ink) 86%, var(--bg));
}
.markdown blockquote p { margin: 0 0 .4em; }
.markdown blockquote p:last-child { margin: 0; }
/* --- code ------------------------------------------------------ */
.markdown code {
font-family: var(--font-mono); font-size: .8em;
background: color-mix(in srgb, var(--accent) 8%, var(--paper));
color: color-mix(in srgb, var(--ink) 84%, var(--accent));
padding: 2px 6px; border-radius: var(--radius-sm);
}
.markdown pre {
font-family: var(--font-mono); font-size: var(--text-prompt);
line-height: var(--leading-relaxed);
background: color-mix(in srgb, var(--ink) 4%, var(--paper));
border: 1px solid var(--line); border-radius: var(--radius-md);
padding: 16px 18px; margin: 0 0 1.25em; overflow: auto;
}
.markdown pre code { background: none; color: inherit; padding: 0; font-size: 1em; border-radius: 0; }
/* --- rule ------------------------------------------------------ */
.markdown hr { border: none; border-top: 1px solid var(--line); margin: 2.1em 0; }
/* --- images & figures ----------------------------------------- */
.markdown img {
display: block; max-width: 100%; height: auto;
border-radius: var(--radius-md); box-shadow: inset 0 0 0 1px var(--line);
margin: 1.6em 0 .4em;
}
.markdown figure { margin: 1.6em 0; }
.markdown figcaption {
font-family: var(--font-head); font-style: italic;
font-size: var(--text-caption); color: var(--muted);
margin-top: 11px; line-height: 1.45;
}
/* --- tables ---------------------------------------------------- */
.markdown table {
width: 100%; border-collapse: collapse; margin: 0 0 1.4em;
font-size: var(--text-small);
}
.markdown th, .markdown td {
text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--line);
vertical-align: top;
}
.markdown thead th {
font-family: var(--font-mono); font-size: 11px; font-weight: 500;
letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
border-bottom: var(--rule-accent) solid var(--accent);
}
.markdown tbody tr:last-child td { border-bottom: none; }
/* --- task lists ------------------------------------------------ */
.markdown li input[type="checkbox"] { accent-color: var(--accent); margin-right: 8px; }
.markdown ul:has(> li > input[type="checkbox"]) li::before { content: none; }
.markdown ul:has(> li > input[type="checkbox"]) { padding-left: 4px; }
@media (max-width: 680px) {
.markdown h1 { font-size: 38px; }
.markdown h2 { font-size: 32px; }
}