/* reads — the frame, the type, the colour. A publication, not a page: a nameplate, a measure, a rule, an accent, and nothing else. No JavaScript, no webfonts, no network beyond the HTML itself. */ /* ── Colour ────────────────────────────────────────────────────────────── color-scheme drives which side of every light-dark() call wins. By default the page follows the OS; an explicit data-theme on (set server-side from the reads_theme cookie) pins it. Everything downstream reads these variables, so the desktop dark softening at the bottom of this file is a redefinition here and nothing else. */ :root { color-scheme: light dark; /* Paper is warm, not white. On a screen full of serif prose the eye reads #fdfcfa as "page" and #ffffff as "screen", and the difference is a third of a percent of light. */ --paper: light-dark(#fdfcfa, #121212); /* Not pure black on pure white — that is ~21:1 and fatiguing for body copy. This is the ~12:1 range GitHub, Medium and Material's "87% opacity" guideline all land on. */ --ink: light-dark(#1f1f1f, #d4d4d4); --muted: light-dark(#5f5b57, #9d9894); /* The accent is an oxblood — the editorial red of a masthead rule and a section head, kept for the things that are actually links or actions. 5.9:1 on paper, 9:1 on dark. */ --accent: light-dark(#8a2b34, #e8a2a8); --accent-ink: light-dark(#6d2129, #f0bcc0); --accent-bg: light-dark(#f7eeee, #2a1a1c); --rule: light-dark(#e2ddd7, #2e2c2a); /* hairlines between items */ --rule-ink: light-dark(#1f1f1f, #b8b3ae); /* the masthead's heavy rule */ --card: light-dark(#f6f3ef, #1a1a1a); /* rail cards, code blocks, previews */ /* Iowan and Palatino are the best serifs a reader is likely to already have; Georgia is the floor. Times is last — it is a newspaper face cut for 8pt newsprint, and it is thin and mean on a screen. */ --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif; --sans: "Helvetica Neue", Helvetica, Arial, sans-serif; --mono: ui-monospace, "SF Mono", "Cascadia Mono", "Courier New", monospace; } html[data-theme="light"] { color-scheme: light; } html[data-theme="dark"] { color-scheme: dark; } html { background: var(--paper); color: var(--ink); -webkit-text-size-adjust: 100%; } body { font-family: var(--serif); font-size: 1.0625rem; line-height: 1.6; max-width: 38rem; margin: 0 auto; padding: 1.75rem 1.15rem 3rem; } /* ── Type ─────────────────────────────────────────────────────────────── */ h1, h2, h3, h4 { font-family: var(--serif); font-weight: 700; line-height: 1.25; } h2 { font-size: 1.45rem; margin: 2rem 0 0.5rem; } h3 { font-size: 1.15rem; margin: 1.5rem 0 0.4rem; } h4 { font-size: 1rem; margin: 1.25rem 0 0.3rem; } p { margin: 0 0 1rem; } :where(h1, h2, h3, h4) + p { margin-top: 0; } /* The one sans element in the design: labels. Small, letterspaced, uppercase — the typographic signal for "this is furniture, not prose". */ .kicker, .section-label, .nav, .byline, .meta, .cta, .chip { font-family: var(--sans); } .kicker, .section-label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase; color: var(--accent); margin: 0 0 0.5rem; } .section-label { color: var(--muted); border-top: 2px solid var(--rule-ink); padding-top: 0.4rem; margin: 2.5rem 0 1rem; } .byline, .meta { font-size: 0.8rem; color: var(--muted); letter-spacing: 0.01em; margin: 0.35rem 0 0; } .byline .author { color: var(--ink); font-weight: 600; } .byline .sep, .meta .sep { opacity: 0.55; padding: 0 0.1rem; } code { font-family: var(--mono); font-size: 0.9em; } /* ── Links ──────────────────────────────────────────────────────────────── The editorial model, borrowed from health and worth restating: structural links (a title in a list, the nav, the wordmark) inherit the ink, so a dense index reads as a page of headlines rather than a page of colour. Only links inside running prose take the accent, where a reader genuinely needs to see them without hunting. */ a { color: var(--ink); text-decoration: none; } a:hover { text-decoration: underline; text-underline-offset: 0.15em; } p a:not(.cta):not(.chip), li a.inline, p a:not(.cta):not(.chip):visited { color: var(--accent); text-decoration-color: color-mix(in srgb, var(--accent) 35%, transparent); text-decoration-line: underline; text-underline-offset: 0.15em; } p a:not(.cta):not(.chip):hover { color: var(--accent-ink); text-decoration-color: currentColor; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; } /* ── Masthead ───────────────────────────────────────────────────────────── The nameplate, a heavy rule, the sections, a hairline. That stack — thick over thin — is what a hundred years of printed front pages settled on, and it costs two borders. */ .masthead { border-bottom: 2px solid var(--rule-ink); padding-bottom: 0.5rem; margin-bottom: 0.35rem; } .wordmark { display: inline-block; font-family: var(--serif); font-size: 2.6rem; font-weight: 700; line-height: 1; letter-spacing: -0.02em; color: var(--ink); } .wordmark:hover { text-decoration: none; } .tagline { font-size: 0.78rem; font-family: var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin: 0.4rem 0 0; } .nav { border-top: 1px solid var(--rule); margin-top: 0.35rem; padding-top: 0.45rem; display: flex; gap: 1.35rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; } .nav a { color: var(--muted); } .nav a:hover { color: var(--ink); text-decoration: none; } /* The section you are in, marked once — aria-current is the fact, this is the paint. */ .nav a[aria-current="page"] { color: var(--ink); box-shadow: inset 0 -2px var(--accent); } main { margin-top: 1.75rem; } /* ── Colophon ─────────────────────────────────────────────────────────── */ .colophon { border-top: 1px solid var(--rule); margin-top: 3.5rem; padding-top: 1rem; font-size: 0.82rem; color: var(--muted); } .colophon-line { margin: 0 0 0.6rem; max-width: 34rem; } .colophon a { color: var(--muted); text-decoration: underline; text-decoration-color: var(--rule); } .colophon a:hover { color: var(--accent); } .theme-toggle { font-family: var(--sans); font-size: 0.75rem; letter-spacing: 0.04em; margin: 0; } .theme-toggle a { color: var(--muted); text-decoration: none; } .theme-toggle a:hover { color: var(--accent); text-decoration: underline; } .theme-toggle .current { color: var(--ink); font-weight: 700; } /* ── Desktop ────────────────────────────────────────────────────────────── One frame for every page. The body — and with it the masthead and the colophon — is the same width site-wide, so the furniture never shifts as you move between pages. Content adapts INSIDE the frame: prose holds its reading measure anchored under the nameplate, the front page splits into a feed and a rail, index pages fill the width. Below the breakpoint all of this collapses back to the single column above, untouched. */ @media (min-width: 64rem) { /* Up a notch for desktop reading distance. An integer px root keeps the serif crisp — a fractional root makes every derived child size fuzzy. */ html { font-size: 17px; } body { max-width: 72rem; padding: 2.25rem 2rem 4rem; } /* Nameplate and sections share one baseline: the wordmark left, the sections right, which is the arrangement a masthead wants once it has the width for it. */ .masthead { display: flex; align-items: baseline; justify-content: space-between; gap: 2rem; padding-bottom: 0.6rem; } .wordmark { font-size: 3.4rem; } .tagline { margin-top: 0.25rem; } .nav { border-top: none; margin: 0; padding: 0; font-size: 0.78rem; } main { margin-top: 2.25rem; } /* The default page is prose, at a reading measure, anchored under the nameplate's left edge — an article, /about, /submit, the delete confirmation. Feed and index pages opt out below and fill the frame. */ main { max-width: 42rem; } body.home main, body.wide main { max-width: none; } .colophon { display: flex; align-items: baseline; justify-content: space-between; gap: 2rem; } .colophon-line { margin: 0; } /* Softer dark on desktop only. The mobile palette is near-black with bright text — right on a phone held at arm's length, harsh across a large bright panel. Lift the page to a standard dark grey, ease the text down a notch, and raise the card surfaces so they still sit above it. Mobile never sees these; it keeps the palette above. */ html[data-theme="dark"] { --paper: #1d1d1d; --ink: #c9c5c1; --card: #262524; --rule: #383634; } } /* The same softening for the un-pinned reader whose OS is dark. Separate block because it needs prefers-color-scheme; a reader who explicitly pinned *light* is excluded, so their choice survives an OS-dark setting. */ @media (min-width: 64rem) and (prefers-color-scheme: dark) { html:not([data-theme="light"]):not([data-theme="dark"]) { --paper: #1d1d1d; --ink: #c9c5c1; --card: #262524; --rule: #383634; } }