/* ============================================================================ Architecting the Writing Room - writingroom.efrederick.net Dark by design, not by toggle. Light text on a dark ground is the whole brief, so there is no prefers-color-scheme branch: this site looks the same everywhere on purpose. Two deliberate departures from literally inverting black and white: 1. The ground is #0e0f11, not #000, and body text is #e4e1dc, not #fff. At maximum contrast the glyph edges bloom into the background and the text smears on a long read. Backing both ends off a few percent still reads as black-and-white but survives 4,000 words. 2. Body copy is a serif. These are long technical essays, and a serif holds the eye across a 68ch measure better than a UI sans does. Accent is brass, NOT the red of the fiction site. Two different rooms. ========================================================================= */ :root { --bg: #0e0f11; --bg-raised: #16181c; --bg-code: #131519; --text: #e4e1dc; /* body copy - warm off-white, not #fff */ --text-head: #f4f2ef; /* headings sit a touch brighter */ --text-dim: #b3aea7; /* secondary prose, theses, ledes */ --text-mute: #8b9096; /* meta, dates, captions */ --accent: #d8a657; /* brass */ --accent-bright: #f0bd72; --accent-dim: #8a6c3a; --border: #24272c; --border-strong: #33373e; --serif: Charter, "Bitstream Charter", "Iowan Old Style", Georgia, Cambria, "Times New Roman", serif; --sans: ui-sans-serif, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --mono: ui-monospace, "Cascadia Mono", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; /* Deliberately rem, not ch. `ch` is relative to the element's own font size, so a shared `68ch` gave the lede (1.15rem), the series note (0.98rem), the entry thesis (1rem) and body copy (1.0625rem) four DIFFERENT column widths and the left-hand text edges stopped lining up down the page. 44rem is one width for every prose column regardless of its size. */ --measure: 44rem; } /* Justified body copy. Every run of prose gets this; headings, meta, captions, nav and code do not. Hyphenation is not optional alongside it - at a 68ch measure, unhyphenated justification pulls rivers of white space through the text as soon as a `docker-compose` or `character_state` lands near a line end. `text-wrap: pretty` cleans up the last line where supported. */ .page-hero p.lede, .series-note p, .entry .thesis, .article-content > p:not(.dateline), .article-content li, .article-content blockquote p, .gate-final p, .justified { text-align: justify; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; text-wrap: pretty; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } /* Background texture: faint falling code built from this room's own schema (see build-background.py). Painted by a fixed pseudo-element rather than `background-attachment: fixed`, which misbehaves on iOS. It sits at z-index -1, so ordinary flow content paints over it with no stacking context games. html carries the flat ground colour so there is never a flash of white before the image resolves. */ html { background-color: var(--bg); } body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-image: url("/img/bg-code.webp"); background-size: cover; background-position: center top; background-repeat: no-repeat; } body { margin: 0; background: transparent; color: var(--text); font-family: var(--serif); font-size: 1.0625rem; line-height: 1.75; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .container { width: 100%; max-width: 1040px; margin: 0 auto; padding: 0 2rem; } a { color: var(--accent); text-decoration: none; } a:hover { color: var(--accent-bright); } img { max-width: 100%; height: auto; } /* ---------------------------------------------------------------- nav ---- */ /* Scoped to .site-nav, not bare `nav`. These rules used to match any