/* ──────────────────────────────────────────────────────────── Starting Late — design tokens Imported by base.css. Three palette variants and three type pairings, switched by `data-palette` / `data-type` on . ──────────────────────────────────────────────────────────── */ :root { /* Paper & ink — Editorial (default) */ --sl-bg: #fbfaf5; --sl-paper: #f3f0e6; --sl-cream: #ece5d3; --sl-ink: #131b21; --sl-muted: #6a7079; --sl-soft: #93958f; /* Accents */ --sl-accent: #c95a3a; /* faded brick — italic emphasis, single CTA */ --sl-deep: #0e2a3a; /* deep teal — the one dark band per page */ --sl-deep-ink: #d8e1dd; /* Outside-of-page */ --sl-outside: #d6d2c5; /* Functional */ --sl-rule: 2px solid var(--sl-ink); --sl-rule-thin: 1.5px solid var(--sl-ink); --sl-rule-hair: 1px solid rgba(19, 27, 33, 0.16); /* Type families — Geist (default ships) */ --sl-sans: "Geist", "Inter Tight", "Helvetica Neue", sans-serif; --sl-mono: "Geist Mono", "JetBrains Mono", ui-monospace, monospace; --sl-serif: "Newsreader", "Source Serif 4", Georgia, serif; /* Type scale */ --sl-display-xl: 80px; --sl-display-lg: 56px; --sl-display-md: 38px; --sl-display-sm: 26px; --sl-body-lg: 18px; --sl-body: 16px; --sl-body-sm: 14.5px; --sl-ui: 13px; --sl-mono-sm: 11px; --sl-track-mono: 0.18em; --sl-track-mono-tight: 0.12em; --sl-track-display: -0.02em; --sl-lh-display: 1.04; --sl-lh-body: 1.65; /* Rhythm */ --sl-pad-page: 32px; --sl-pad-section: 56px; --sl-max-width: 1240px; /* Motion */ --sl-dur: 140ms; --sl-ease: cubic-bezier(0.2, 0.7, 0.3, 1); } /* ── Palette variants ─────────────────────────────── */ html[data-palette="inverted"] { --sl-bg: #131b21; --sl-paper: #1b242b; --sl-cream: #ece5d3; --sl-ink: #ece5d3; --sl-muted: #8e948e; --sl-soft: #6c706a; --sl-accent: #d97a4f; --sl-deep: #0a1d22; --sl-deep-ink: #d8e1dd; --sl-outside: #0a1014; --sl-rule-hair: 1px solid rgba(236, 229, 211, 0.14); } html[data-palette="bone"] { --sl-bg: #ecebe6; --sl-paper: #e1ddd0; --sl-cream: #ecebe6; --sl-ink: #1a1a1a; --sl-muted: #5a5a52; --sl-soft: #8e8d83; --sl-accent: #6e5a2a; /* warmer sand-on-paper */ --sl-deep: #303a30; /* sage */ --sl-deep-ink: #e1dfd0; --sl-outside: #cac6b8; } /* ── Type variants ────────────────────────────────── */ html[data-type="plex"] { --sl-sans: "IBM Plex Sans", "Söhne", "Helvetica Neue", Helvetica, sans-serif; --sl-mono: "IBM Plex Mono", "JetBrains Mono", ui-monospace, Menlo, monospace; } html[data-type="serif"] { --sl-sans: "Newsreader", "Source Serif 4", Georgia, serif; --sl-mono: "JetBrains Mono", ui-monospace, monospace; } /* ──────────────────────────────────────────────────────────── Starting Late — base styles Tokens live in tokens.css. This file holds reset, page frame, masthead, top bar, footer, buttons, longform reading. ──────────────────────────────────────────────────────────── */ @import url("./tokens.css"); :root { /* Paper & ink */ --sl-bg: #fbfaf5; /* off-white */ --sl-paper: #f3f0e6; /* slightly darker panel */ --sl-cream: #ece5d3; /* used inside the dark band */ --sl-ink: #131b21; /* deep cool ink */ --sl-muted: #6a7079; /* labels, captions */ --sl-soft: #93958f; /* secondary captions */ /* Accents */ --sl-accent: #c95a3a; /* faded brick — italic emphasis, arrows, single CTA */ --sl-deep: #0e2a3a; /* deep teal — the one dark band per page */ --sl-deep-ink: #d8e1dd; /* on-deep text */ /* Outside-of-page */ --sl-outside: #d6d2c5; /* Functional */ --sl-rule: 2px solid var(--sl-ink); --sl-rule-thin: 1.5px solid var(--sl-ink); --sl-rule-hair: 1px solid rgba(19, 27, 33, 0.16); /* Type families */ --sl-sans: "IBM Plex Sans", "Söhne", "Helvetica Neue", Helvetica, sans-serif; --sl-mono: "IBM Plex Mono", "JetBrains Mono", ui-monospace, Menlo, monospace; --sl-serif: "Newsreader", "Source Serif 4", Georgia, serif; /* Type scale */ --sl-display-xl: 80px; --sl-display-lg: 56px; --sl-display-md: 38px; --sl-display-sm: 26px; --sl-body-lg: 18px; --sl-body: 16px; --sl-body-sm: 14.5px; --sl-ui: 13px; --sl-mono-sm: 11px; --sl-track-mono: 0.18em; --sl-track-mono-tight: 0.12em; --sl-track-display: -0.02em; --sl-lh-display: 1.04; --sl-lh-body: 1.65; /* Rhythm */ --sl-pad-page: 32px; --sl-pad-section: 56px; --sl-max-width: 1240px; /* Motion */ --sl-dur: 140ms; --sl-ease: cubic-bezier(0.2, 0.7, 0.3, 1); } /* ── Variants (palette) ──────────────────────────── */ html[data-palette="inverted"] { --sl-bg: #131b21; --sl-paper: #1b242b; --sl-cream: #ece5d3; --sl-ink: #ece5d3; --sl-muted: #8e948e; --sl-soft: #6c706a; --sl-accent: #d97a4f; --sl-deep: #0a1d22; --sl-deep-ink: #d8e1dd; --sl-outside: #0a1014; --sl-rule-hair: 1px solid rgba(236, 229, 211, 0.14); } html[data-palette="bone"] { --sl-bg: #ecebe6; --sl-paper: #e1ddd0; --sl-cream: #ecebe6; --sl-ink: #1a1a1a; --sl-muted: #5a5a52; --sl-soft: #8e8d83; --sl-accent: #6e5a2a; /* warmer sand-on-paper */ --sl-deep: #303a30; /* sage */ --sl-deep-ink: #e1dfd0; --sl-outside: #cac6b8; } /* ── Variants (type) ─────────────────────────────── */ html[data-type="grotesque"] { --sl-sans: "Geist", "Inter Tight", "Helvetica Neue", sans-serif; --sl-mono: "Geist Mono", "JetBrains Mono", ui-monospace, monospace; } html[data-type="serif"] { --sl-sans: "Newsreader", "Source Serif 4", Georgia, serif; --sl-mono: "JetBrains Mono", ui-monospace, monospace; } /* ── Reset + base ─────────────────────────────────── */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--sl-outside); color: var(--sl-ink); font-family: var(--sl-sans); } body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } button { font: inherit; cursor: pointer; } a { color: inherit; } /* ── Page frame ──────────────────────────────────── */ .page { width: 100%; max-width: var(--sl-max-width); margin: 0 auto; background: var(--sl-bg); border-left: 2px solid var(--sl-ink); border-right: 2px solid var(--sl-ink); } /* ── Utilities ───────────────────────────────────── */ .eyebrow { font-family: var(--sl-mono); font-size: var(--sl-mono-sm); letter-spacing: var(--sl-track-mono); text-transform: uppercase; color: var(--sl-muted); font-weight: 500; } .eyebrow.accent { color: var(--sl-accent); } .eyebrow.cream { color: rgba(216, 225, 221, 0.7); } .rule { border: 0; border-top: var(--sl-rule); margin: 0; } .rule-thin { border: 0; border-top: var(--sl-rule-thin); margin: 0; } .rule-hair { border: 0; border-top: var(--sl-rule-hair); margin: 0; } .italic { font-style: italic; } .accent { color: var(--sl-accent); } .code { font-family: var(--sl-mono); } /* ── Top bar ──────────────────────────────────────── */ .topbar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 11px var(--sl-pad-page); border-bottom: var(--sl-rule-thin); font-family: var(--sl-mono); font-size: var(--sl-mono-sm); letter-spacing: var(--sl-track-mono-tight); text-transform: uppercase; color: var(--sl-muted); } .topbar .left { justify-self: start; } .topbar .right { justify-self: end; } .topbar .mid { justify-self: center; text-transform: none; letter-spacing: 0; color: var(--sl-ink); font-family: var(--sl-sans); font-style: normal; font-size: 12.5px; } /* ── Masthead ─────────────────────────────────────── */ .masthead { padding: 26px var(--sl-pad-page) 22px; border-bottom: var(--sl-rule); display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: end; } .masthead a.title { text-decoration: none; color: inherit; } .masthead .title { font-family: var(--sl-sans); font-weight: 600; font-size: 38px; letter-spacing: -0.02em; line-height: 1; display: flex; align-items: baseline; gap: 14px; } .masthead .title-mark { font-family: var(--sl-mono); font-size: 11px; letter-spacing: var(--sl-track-mono); color: var(--sl-accent); text-transform: uppercase; align-self: center; padding: 3px 8px; border: 1.5px solid var(--sl-accent); border-radius: 1px; } .masthead .meta { margin-top: 10px; font-family: var(--sl-mono); font-size: var(--sl-mono-sm); letter-spacing: var(--sl-track-mono); text-transform: uppercase; color: var(--sl-muted); } nav.primary { display: flex; gap: 28px; align-items: center; font-family: var(--sl-mono); font-size: var(--sl-mono-sm); font-weight: 500; letter-spacing: var(--sl-track-mono); text-transform: uppercase; color: var(--sl-muted); } nav.primary a { color: var(--sl-muted); text-decoration: none; padding: 4px 0; position: relative; } nav.primary a:hover { color: var(--sl-ink); } nav.primary a.active { color: var(--sl-ink); } nav.primary a.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 2px; background: var(--sl-accent); } nav.primary a.nav-cta { color: var(--sl-bg); background: var(--sl-ink); padding: 7px 16px; border: 1.5px solid var(--sl-ink); letter-spacing: var(--sl-track-mono); } nav.primary a.nav-cta:hover { background: var(--sl-accent); border-color: var(--sl-accent); color: var(--sl-bg); } nav.primary a.nav-cta.active::after { display: none; } /* ── Buttons ──────────────────────────────────────── */ .btn-primary { font-family: var(--sl-mono); font-weight: 500; font-size: 12.5px; letter-spacing: var(--sl-track-mono); text-transform: uppercase; padding: 14px 22px; background: var(--sl-ink); color: var(--sl-bg); border: 2px solid var(--sl-ink); text-decoration: none; display: inline-block; transition: transform var(--sl-dur) var(--sl-ease); } .btn-primary:hover { transform: translate(2px, -2px); } .btn-secondary { font-family: var(--sl-sans); font-size: 14px; color: var(--sl-ink); border-bottom: 1.5px solid var(--sl-ink); padding-bottom: 3px; text-decoration: none; transition: color var(--sl-dur) var(--sl-ease); } .btn-secondary:hover { color: var(--sl-accent); border-bottom-color: var(--sl-accent); } .btn-accent { font-family: var(--sl-mono); font-weight: 500; font-size: 12.5px; letter-spacing: var(--sl-track-mono); text-transform: uppercase; padding: 14px 22px; background: var(--sl-accent); color: var(--sl-bg); border: 2px solid var(--sl-accent); text-decoration: none; display: inline-block; transition: transform var(--sl-dur) var(--sl-ease); } .btn-accent:hover { transform: translate(2px, -2px); } /* ── Footer ───────────────────────────────────────── */ footer.site { padding: 22px var(--sl-pad-page); display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; font-family: var(--sl-mono); font-size: var(--sl-mono-sm); letter-spacing: var(--sl-track-mono-tight); text-transform: uppercase; color: var(--sl-muted); border-top: var(--sl-rule); } footer.site .center { justify-self: center; } footer.site .right { justify-self: end; } /* Generic clickable cell */ a.cell-link { text-decoration: none; color: var(--sl-ink); transition: transform var(--sl-dur) var(--sl-ease), background var(--sl-dur) var(--sl-ease); display: block; } a.cell-link:hover { transform: translate(2px, -2px); } /* ── Long-form (article) reading ──────────────────── */ .longform { font-family: var(--sl-sans); font-size: 17px; line-height: 1.7; color: var(--sl-ink); } .longform p { margin: 0 0 1.2em; } .longform p.lede { font-size: 19px; line-height: 1.55; color: var(--sl-ink); } .longform p.lede::first-letter { font-family: var(--sl-mono); font-weight: 500; font-size: 64px; line-height: 0.9; float: left; padding: 6px 12px 0 0; color: var(--sl-accent); } .longform h2 { margin: 2em 0 0.6em; font-family: var(--sl-sans); font-weight: 600; font-size: 22px; letter-spacing: -0.01em; } .longform h2::before { content: attr(data-num) " "; font-family: var(--sl-mono); color: var(--sl-accent); font-weight: 500; letter-spacing: 0.1em; font-size: 13px; } .longform blockquote { margin: 2em 0; padding: 0 0 0 24px; border-left: 2px solid var(--sl-accent); font-style: italic; color: var(--sl-muted); font-size: 17px; } .longform a { color: var(--sl-accent); border-bottom: 1px solid var(--sl-accent); text-decoration: none; } .longform code { font-family: var(--sl-mono); font-size: 0.92em; background: var(--sl-paper); padding: 1px 5px; }