/* ========================================================================== TOKENS - the entire visual identity of the site lives in this file. style.css never hardcodes a color, size, or font. It only reads var(--x) from here. Change a value below and every page updates. Direction: Swiss grid / archival. Blueprint palette, structural hairlines, monospace for data and serif for language. HOUSE RULE: no em-dash characters anywhere in this repo. Use a hyphen. ========================================================================== */ /* --- Typefaces ------------------------------------------------------------ Self-hosted so the site makes zero third-party requests and still renders on a locked-down school network. Both families are SIL Open Font License. Latin subset only, variable weight axes. -------------------------------------------------------------------------- */ @font-face { font-family: "Newsreader"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("../assets/fonts/newsreader-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Newsreader"; font-style: italic; font-weight: 200 800; font-display: swap; src: url("../assets/fonts/newsreader-italic-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 100 800; font-display: swap; src: url("../assets/fonts/jetbrains-mono-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { /* --- Color: light (blueprint / archival) ------------------------------ One accent, used identically everywhere: section numbers, links, active nav, focus rings, audio scrub fill. Nothing else is colored. Accent on bg measures 6.2:1, comfortably past WCAG AA. ---------------------------------------------------------------------- */ --bg: #f2f3f1; /* page background, cool paper */ --surface: #f8f9f8; /* the few raised panels there are */ --fg: #1b1f24; /* primary text, slate */ --muted: #656e75; /* metadata, captions, secondary text */ --rule: #cdd2d4; /* every hairline in the grid */ --rule-strong: #a8b0b4; /* hairlines that need to read as edges */ --accent: #2f5d8c; /* ink blue, the only accent */ --accent-contrast: #ffffff;/* text sitting on top of --accent */ --scrim: rgb(27 31 36 / 0.06); /* hover wash, tinted to --fg */ /* The lightbox backdrop is deliberately invariant: a photo viewer reads the same dark chrome regardless of which site theme is active, so these are not redeclared in the dark-mode blocks below. */ --overlay-scrim: rgb(10 12 14 / 0.92); --overlay-fg: #f2f3f1; color-scheme: light; /* --- Typography ------------------------------------------------------- Mono is for data and labels. Serif is for language. Nothing is set in both. Newsreader carries an optical-size axis, so body and display draw from the same file at different optical weights. ---------------------------------------------------------------------- */ --font-display: "Newsreader", ui-serif, Georgia, serif; --font-body: "Newsreader", ui-serif, Georgia, serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* Fluid scale. clamp() = min, preferred (viewport-relative), max. */ --step--2: clamp(0.69rem, 0.67rem + 0.11vw, 0.75rem); /* rail numbers */ --step--1: clamp(0.78rem, 0.75rem + 0.16vw, 0.88rem); /* metadata */ --step-0: clamp(1.05rem, 1.00rem + 0.26vw, 1.19rem); /* body prose */ --step-1: clamp(1.31rem, 1.21rem + 0.50vw, 1.63rem); /* piece title */ --step-2: clamp(1.64rem, 1.46rem + 0.90vw, 2.24rem); /* section head */ --step-3: clamp(2.05rem, 1.75rem + 1.50vw, 3.07rem); /* page title */ --step-4: clamp(2.75rem, 2.00rem + 3.75vw, 5.50rem); /* page title */ --step-5: clamp(3.25rem, 1.60rem + 7.00vw, 8.50rem); /* wordmark */ --weight-body: 400; --weight-medium: 500; --weight-display: 500; /* the serif is strong enough without bold */ --leading-tight: 1.08; /* wordmark and large display */ --leading-snug: 1.22; /* section and piece headings */ --leading-normal: 1.5; /* interface prose */ --leading-read: 1.65; /* essay body, tuned for long-form reading */ --tracking-tight: -0.021em; --tracking-normal: 0; --tracking-wide: 0.12em; /* mono uppercase labels */ /* --- Spacing (4px base) ------------------------------------------------ */ --space-2xs: 0.25rem; --space-xs: 0.5rem; --space-sm: 0.75rem; --space-md: 1rem; --space-lg: 1.5rem; --space-xl: 2.5rem; --space-2xl: 4rem; --space-3xl: 7rem; /* vertical rhythm between major sections */ /* --- Layout ------------------------------------------------------------ The rail is the spine of the whole design: a fixed-width left column carrying the section number, with a 12-column content field beside it. ---------------------------------------------------------------------- */ --container: 78rem; /* outer max width */ --rail: 6rem; /* left rail carrying section numbers */ --gutter: var(--space-lg); /* page side padding */ --grid-gap: var(--space-lg); --measure: 66ch; /* max prose width, for readability */ --nav-height: 4rem; --player-bar-height: 5.5rem; /* docked height of the universal player */ --drop: var(--space-2xl); /* vertical offset of a staggered block */ /* --- Surface treatment ------------------------------------------------- Sharp corners everywhere. A Swiss grid with rounded corners is incoherent, and one radius value satisfies shape consistency outright. ---------------------------------------------------------------------- */ --radius: 0; --hairline: 1px; --shadow: none; /* depth comes from rules and space, not shadow */ /* Print. An essay printed from this site should read like a manuscript. */ --print-bg: #ffffff; --print-fg: #000000; --print-size: 11pt; /* --- Motion (MOTION_INTENSITY 4) --------------------------------------- */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --transition: 200ms var(--ease-out); --transition-slow: 400ms var(--ease-out); /* Two-way states (hover in, hover out) get a symmetric curve. One-way arrivals such as reveals keep --ease-out. */ --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --transition-hover: 220ms var(--ease-in-out); --reveal-duration: 500ms; --reveal-stagger: 60ms; } /* --- Color: dark ---------------------------------------------------------- Same system inverted, not a different design. The accent lifts to stay readable on a dark ground (7.4:1). Declared twice on purpose: once for visitors who never touch the toggle and are on a dark OS, once for the explicit choice, so the toggle wins in both directions. -------------------------------------------------------------------------- */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #14171a; --surface: #1b1f23; --fg: #e6e9e8; --muted: #8a949b; --rule: #2c3237; --rule-strong: #454d54; --accent: #7fa9d6; --accent-contrast: #0f1214; --scrim: rgb(230 233 232 / 0.07); color-scheme: dark; } } :root[data-theme="dark"] { --bg: #14171a; --surface: #1b1f23; --fg: #e6e9e8; --muted: #8a949b; --rule: #2c3237; --rule-strong: #454d54; --accent: #7fa9d6; --accent-contrast: #0f1214; --scrim: rgb(230 233 232 / 0.07); color-scheme: dark; } /* Mobile: the rail folds above the content, so it stops reserving width. */ @media (max-width: 767px) { :root { --rail: 0rem; --space-3xl: 4.5rem; --gutter: var(--space-md); } }