/* ───────────────────────────────────────────────────────────── Surface Level — colors & type One typeface (Work Sans), high-contrast neutrals, no accent. Soft interaction lives in transitions, not in color. ───────────────────────────────────────────────────────────── */ @import url("https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,300..700;1,300..700&display=swap"); :root { /* ── Color ───────────────────────────────────────────────── There is no brand color. The system is bone-white paper with ink that softens at lower hierarchy levels. Anything more saturated than this belongs in an image, not a token. */ --paper: #ffffff; /* page background */ --paper-tint: #faf9f7; /* very subtle warm off-white for hover/inset surfaces */ --ink: #0a0a0a; /* primary text, near-black with warmth */ --ink-2: #3d3d3d; /* body prose */ --ink-3: #6e6e6e; /* meta — "entry - 1", timestamps */ --ink-4: #a8a8a8; /* placeholder, disabled */ --rule: #e8e6e1; /* hairlines, dividers */ --rule-strong: #cfcdc7; /* heavier rules */ --selection-bg: #0a0a0a; --selection-fg: #ffffff; /* ── Type ────────────────────────────────────────────────── One family, used at every level. Italic carries display warmth; bold carries hierarchy; regular carries body. */ --font-sans: "Work Sans", ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* Type scale — modular, generous on the display end */ --fs-display: 3.5rem; /* 56px — page-owning title */ --fs-h1: 2.25rem; /* 36px */ --fs-h2: 1.5rem; /* 24px */ --fs-h3: 1.125rem; /* 18px — entry titles */ --fs-body: 1rem; /* 16px */ --fs-small: 0.875rem; /* 14px — meta, nav */ --fs-micro: 0.75rem; /* 12px — captions */ --lh-tight: 1.15; --lh-snug: 1.35; --lh-body: 1.6; --lh-loose: 1.75; --tracking-tight: -0.01em; --tracking-normal: 0; --tracking-wide: 0.04em; /* ── Spacing — 4px base ───────────────────────────────── */ --s-0: 0; --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px; /* ── Radii — minimal. Most things are square. ─────────── */ --r-0: 0; --r-1: 2px; --r-2: 4px; --r-pill: 999px; /* ── Borders ──────────────────────────────────────────── */ --border-thin: 1px solid var(--rule); --border-strong: 1px solid var(--rule-strong); --border-ink: 1px solid var(--ink); /* ── Elevation — almost none. ─────────────────────────── */ --shadow-none: none; --shadow-1: 0 1px 0 rgba(10, 10, 10, 0.04); --shadow-2: 0 1px 2px rgba(10, 10, 10, 0.04), 0 4px 12px rgba(10, 10, 10, 0.03); /* ── Motion — soft, slow, no overshoot. ──────────────── */ --ease-soft: cubic-bezier(0.22, 0.61, 0.36, 1); /* default for everything */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* page-enter */ --dur-quick: 140ms; --dur-base: 260ms; --dur-slow: 520ms; /* ── Layout ───────────────────────────────────────────── */ --measure: 62ch; /* ideal reading column */ --content-max: 1200px; --gutter: 48px; } /* ── Dark mode override ──────────────────────────────────── Toggled via data-theme="dark" on by pull-light.js. Mirrors the light-mode warmth palette in reverse. */ html[data-theme="dark"] { --paper: #111110; --paper-tint: #1c1b18; --ink: #efede8; --ink-2: #a8a59e; --ink-3: #615e58; --ink-4: #383530; --rule: #222120; --rule-strong: #2d2c29; --selection-bg: #efede8; --selection-fg: #111110; } html[data-theme="dark"], html[data-theme="dark"] body { background: var(--paper); } /* ── Selection ─────────────────────────────────────────── */ ::selection { background: var(--selection-bg); color: var(--selection-fg); } /* ── Semantic element styles ──────────────────────────── */ .ds-root, .ds-root * { box-sizing: border-box; } .ds-root { font-family: var(--font-sans); color: var(--ink); background: var(--paper); font-size: var(--fs-body); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .ds-root .display { font-size: var(--fs-display); font-style: italic; font-weight: 400; line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); } .ds-root h1, .ds-root .h1 { font-size: var(--fs-h1); font-weight: 600; line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); margin: 0; } .ds-root h2, .ds-root .h2 { font-size: var(--fs-h2); font-weight: 600; line-height: var(--lh-snug); margin: 0; } .ds-root h3, .ds-root .h3, .ds-root .entry-title { font-size: var(--fs-h3); font-weight: 700; line-height: var(--lh-snug); margin: 0; } .ds-root p, .ds-root .body { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink-2); margin: 0; text-wrap: pretty; } .ds-root .body p + p, .ds-root .prose p + p { text-indent: 2em; margin-top: 0; } .ds-root .meta { font-size: var(--fs-small); color: var(--ink-3); font-weight: 400; } .ds-root .nav-item { font-size: var(--fs-small); color: var(--ink); text-decoration: none; font-weight: 400; } .ds-root .read-more { font-style: italic; color: var(--ink); font-size: var(--fs-body); } .ds-root code, .ds-root .mono { font-family: var(--font-mono); font-size: 0.9em; background: var(--paper-tint); padding: 1px 5px; border-radius: var(--r-1); border: var(--border-thin); } .ds-root hr, .ds-root .rule { border: 0; border-top: var(--border-thin); margin: var(--s-6) 0; } .ds-root a { color: inherit; text-decoration: none; background-image: linear-gradient(currentColor, currentColor); background-size: 100% 1px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size var(--dur-base) var(--ease-soft), opacity var(--dur-base) var(--ease-soft); } .ds-root a:hover { opacity: 0.55; } .ds-root a.no-underline { background-image: none; }