:root { --bg: #F5F1EB; --bg-alt: #EDEAE3; --surface: #FFFFFF; --surface-tint: #FAF8F5; --border: #DDD9D0; --border-light: #EAE7E0; --text: #1A1714; --text-body: #3D3A35; --text-muted: #6B6760; --text-subtle: #9B9892; --accent: #C85C2D; --accent-light: #E8895D; --accent-bg: #FDF1EB; --accent-border:#F0C4A8; --green: #2A7A4B; --green-bg: #EAF5EF; --green-border: #A8D9BC; --blue: #2563A8; --blue-bg: #EAF1FA; --blue-border: #A8C5E8; --red: #B83535; --red-bg: #FAEBEB; --red-border: #E8AAAA; --code-bg: #1A1714; /* code blocks stay dark in BOTH modes */ --shadow: rgba(200,92,45,0.08); --serif: 'Newsreader', Georgia, serif; --sans: 'Inter', system-ui, sans-serif; --mono: 'JetBrains Mono', 'Courier New', monospace; color-scheme: light; } /* ─── DARK MODE ───────────────────────────────────────── */ /* Same design, dark palette. Toggled via [data-theme] on (nav button + OS default + localStorage — see scripts). Warm dark, not pure black; the terracotta accent brightens so it reads on dark. */ [data-theme="dark"] { --bg: #14110D; --bg-alt: #1E1A14; --surface: #1A1611; --surface-tint: #211C16; --border: #332C24; --border-light: #2A241D; --text: #F2EEE7; --text-body: #D8D2C8; --text-muted: #A39C90; --text-subtle: #7A7468; --accent: #E8895D; --accent-light: #F0A079; --accent-bg: #2C1E14; --accent-border:#5A3826; --green: #5FD699; --green-bg: #14241B; --green-border: #2E5640; --blue: #6FB0F0; --blue-bg: #142233; --blue-border: #2C4A6E; --red: #F08585; --red-bg: #2E1717; --red-border: #663434; --code-bg: #0E0B08; --shadow: rgba(0,0,0,0.45); color-scheme: dark; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { background: var(--bg); color: var(--text-body); font-family: var(--sans); font-size: 17px; line-height: 1.75; font-weight: 400; } /* ─── NAV ─────────────────────────────────────────────── */ nav { background: var(--surface); border-bottom: 1px solid var(--border); padding: 0 48px; height: 52px; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 100; } .nav-brand { font-family: var(--sans); font-size: 13px; font-weight: 600; color: var(--text); letter-spacing: 0.01em; text-decoration: none; } .nav-right { display: flex; align-items: center; gap: 20px; font-size: 13px; color: var(--text-muted); } .nav-tag { background: var(--accent); color: #fff; font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 3px; letter-spacing: 0.04em; } /* Light/dark toggle — shows the moon in light mode (click → dark) and the sun in dark mode (click → light). */ .theme-toggle { background: none; border: 1px solid var(--border); border-radius: 6px; width: 30px; height: 30px; flex-shrink: 0; cursor: pointer; color: var(--text-muted); font-family: var(--sans); font-size: 14px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; transition: color 0.15s, border-color 0.15s; } .theme-toggle:hover { color: var(--accent); border-color: var(--accent-border); } .theme-icon-sun { display: none; } [data-theme="dark"] .theme-icon-sun { display: inline; } [data-theme="dark"] .theme-icon-moon { display: none; } /* ─── LAYOUT ──────────────────────────────────────────── */ .page-wrap { max-width: 760px; margin: 0 auto; padding: 0 24px 80px; } /* ─── HERO ────────────────────────────────────────────── */ .hero { padding: 64px 0 48px; border-bottom: 1px solid var(--border); margin-bottom: 48px; } .hero-eyebrow { font-family: var(--sans); font-size: 12px; font-weight: 600; color: var(--accent); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 16px; } .hero h1 { font-family: var(--serif); font-size: clamp(34px, 5vw, 52px); font-weight: 600; line-height: 1.1; letter-spacing: -0.02em; color: var(--text); margin-bottom: 20px; } .hero-deck { font-size: 18px; line-height: 1.65; color: var(--text-muted); max-width: 640px; font-weight: 300; } .hero-meta { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 12px; color: var(--text-subtle); font-family: var(--mono); } .hero-meta-sep { color: var(--border); } /* ─── BODY TEXT ───────────────────────────────────────── */ .prose p { color: var(--text-body); margin-bottom: 20px; font-size: 17px; line-height: 1.78; } .prose p:last-child { margin-bottom: 0; } strong { color: var(--text); font-weight: 600; } em { font-style: italic; color: var(--text-body); } /* ─── SECTION HEADING ─────────────────────────────────── */ /* scroll-margin-top keeps the sticky 52px nav from covering the heading when you jump to a #anchor. */ .section { margin-top: 56px; scroll-margin-top: 72px; } .section-label { font-family: var(--sans); font-size: 11px; font-weight: 600; color: var(--accent); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 8px; } .section-label a { color: inherit; text-decoration: none; transition: color 0.15s; } .section-label a:hover { color: var(--text); } .section h2 { font-family: var(--serif); font-size: 28px; font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; color: var(--text); margin-bottom: 24px; } /* Self-linking heading: the whole H2 is an anchor to its own section, and a '#' affordance appears on hover. */ .section h2 a.anchor { color: inherit; text-decoration: none; position: relative; } .section h2 a.anchor:hover::before { content: '#'; position: absolute; left: -22px; color: var(--accent); font-weight: 400; } h3 { font-family: var(--serif); font-size: 20px; font-weight: 600; color: var(--text); margin: 32px 0 14px; letter-spacing: -0.01em; } /* ─── BANNER ──────────────────────────────────────────── */ .banner { background: var(--accent-bg); border: 1px solid var(--accent-border); border-left: 3px solid var(--accent); border-radius: 6px; padding: 16px 20px; margin-bottom: 40px; display: flex; gap: 12px; align-items: flex-start; } .banner-badge { background: var(--accent); color: #fff; font-family: var(--mono); font-size: 10px; font-weight: 500; padding: 2px 8px; border-radius: 3px; white-space: nowrap; flex-shrink: 0; margin-top: 2px; } .banner p { font-size: 14px; color: var(--text-muted); line-height: 1.6; margin: 0; } .banner a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; } /* ─── PLAIN ENGLISH ───────────────────────────────────── */ .plain-english { background: var(--surface); border: 1px solid var(--border); border-top: 3px solid var(--accent); border-radius: 0 0 8px 8px; padding: 28px 32px; margin: 0 0 56px; } .plain-english .pe-label { font-family: var(--sans); font-size: 11px; font-weight: 700; color: var(--accent); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 16px; } .pe-list { list-style: none; padding: 0; } .pe-list li { display: flex; gap: 14px; align-items: flex-start; padding: 14px 0; border-bottom: 1px solid var(--border-light); font-size: 16px; color: var(--text-body); line-height: 1.6; } .pe-list li:last-child { border-bottom: none; } .pe-num { width: 26px; height: 26px; background: var(--accent); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; flex-shrink: 0; margin-top: 1px; font-family: var(--mono); } /* ─── TOC (jump links) ────────────────────────────────── */ /* Optional. Hrefs point at the section ids; pairs with the self-linking H2 anchors below. 2-up grid, single column on mobile. */ .toc { background: var(--surface-tint); border: 1px solid var(--border); border-radius: 8px; padding: 20px 24px 22px; margin: 0 0 56px; } .toc-label { font-family: var(--sans); font-size: 11px; font-weight: 700; color: var(--accent); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 14px; } .toc-list { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 28px; } .toc-list li { display: flex; align-items: baseline; gap: 10px; font-size: 14px; line-height: 1.5; } .toc-num { font-family: var(--mono); font-size: 11px; color: var(--text-subtle); flex-shrink: 0; width: 18px; } .toc-list a { color: var(--text-body); text-decoration: none; border-bottom: 1px solid transparent; transition: color 0.15s, border-color 0.15s; } .toc-list a:hover { color: var(--accent); border-bottom-color: var(--accent-border); } /* ─── CARDS GRID ──────────────────────────────────────── */ /* Auto-balancing so you never get an orphan row: default 3-up → 3 cards = 1×3, 6 cards = 3×2 exactly 2 or 4 cards drop to 2 columns → 2 = 1×2, 4 = 2×2 Force a count with .cols-2 / .cols-3 if you ever need to. */ .cards-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 24px 0; } .cards-grid:has(> .card:nth-child(2):last-child), .cards-grid:has(> .card:nth-child(4):last-child), .cards-grid.cols-2 { grid-template-columns: repeat(2, 1fr); } .cards-grid.cols-3 { grid-template-columns: repeat(3, 1fr); } .card { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 20px 22px; transition: border-color 0.2s, box-shadow 0.2s; } .card:hover { border-color: var(--accent-border); box-shadow: 0 2px 8px var(--shadow); } .card-icon { font-size: 20px; margin-bottom: 10px; } .card h4 { font-family: var(--sans); font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 7px; } .card p { font-size: 13px; color: var(--text-muted); line-height: 1.6; margin: 0; } .card.card-red { border-color: var(--red-border); } .card.card-red:hover { border-color: var(--red); box-shadow: 0 2px 8px rgba(184,53,53,0.08); } .card.card-red .card-icon-badge { display: inline-block; background: var(--red-bg); color: var(--red); font-size: 10px; font-weight: 700; letter-spacing: 0.06em; padding: 2px 7px; border-radius: 3px; margin-bottom: 10px; text-transform: uppercase; } .card.card-green { border-color: var(--green-border); } .card.card-green:hover { border-color: var(--green); box-shadow: 0 2px 8px rgba(42,122,75,0.08); } .card.card-green .card-icon-badge { display: inline-block; background: var(--green-bg); color: var(--green); font-size: 10px; font-weight: 700; letter-spacing: 0.06em; padding: 2px 7px; border-radius: 3px; margin-bottom: 10px; text-transform: uppercase; } .card.card-blue { border-color: var(--blue-border); } .card.card-blue:hover { border-color: var(--blue); box-shadow: 0 2px 8px rgba(37,99,168,0.08); } .card.card-blue .card-icon-badge { display: inline-block; background: var(--blue-bg); color: var(--blue); font-size: 10px; font-weight: 700; letter-spacing: 0.06em; padding: 2px 7px; border-radius: 3px; margin-bottom: 10px; text-transform: uppercase; } /* ─── CODE BLOCK ──────────────────────────────────────── */ .code-block { background: var(--code-bg); border-radius: 7px; overflow: hidden; margin: 20px 0; } .code-block .cb-label { padding: 9px 16px; background: rgba(255,255,255,0.06); border-bottom: 1px solid rgba(255,255,255,0.08); font-family: var(--mono); font-size: 11px; color: #888; letter-spacing: 0.06em; text-transform: uppercase; display: flex; align-items: center; justify-content: space-between; } .code-block pre { padding: 20px; font-family: var(--mono); font-size: 13.5px; line-height: 1.7; color: #e8e8e8; overflow-x: auto; white-space: pre; } .code-block .tok-key { color: #fdba74; } .code-block .tok-val { color: #86efac; } .code-block .tok-cmt { color: #6b7280; font-style: italic; } .code-block .tok-str { color: #93c5fd; } .code-block .tok-acc { color: #fde047; } /* ─── CALLOUT ─────────────────────────────────────────── */ .callout { background: var(--accent-bg); border: 1px solid var(--accent-border); border-left: 3px solid var(--accent); border-radius: 0 6px 6px 0; padding: 18px 22px; margin: 24px 0; } .callout .callout-lbl { font-size: 11px; font-weight: 700; color: var(--accent); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 6px; } .callout p { font-size: 15px; color: var(--text-muted); margin: 0; line-height: 1.7; } /* ─── DETAIL LIST ─────────────────────────────────────── */ ul.dl { list-style: none; padding: 0; margin: 0 0 24px; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: var(--surface); } /* Not flex: a lead-in + body text must flow inline as one paragraph. Flex would split the →, the , and the body into three separate columns. So: left gutter + absolutely positioned →. */ ul.dl li { position: relative; padding: 13px 18px 13px 34px; font-size: 15px; color: var(--text-body); border-bottom: 1px solid var(--border-light); line-height: 1.65; } ul.dl li:last-child { border-bottom: none; } ul.dl li::before { content: '→'; position: absolute; left: 14px; top: 13px; color: var(--accent); font-size: 14px; } /* ─── TABLE ───────────────────────────────────────────── */ /* Default column sizing is content-driven (table-layout: auto) — best for prose tables. To CONTROL column widths, add class="fixed" to the AND a of — fixed layout is what actually makes those widths stick (auto layout treats colgroup widths as hints and routinely ignores them, the usual "table looks off" cause). Long unbroken strings wrap rather than blow a column out; on narrow screens the wrapper scrolls horizontally. */ .data-table { overflow-x: auto; margin: 24px 0; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); } .data-table table { width: 100%; border-collapse: collapse; font-size: 14px; } .data-table table.fixed { table-layout: fixed; } .data-table thead th { padding: 11px 16px; text-align: left; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; background: var(--bg-alt); border-bottom: 1px solid var(--border); color: var(--text-muted); white-space: nowrap; /* short header labels stay on one line */ vertical-align: bottom; } .data-table tbody td { padding: 11px 16px; border-bottom: 1px solid var(--border-light); color: var(--text-body); vertical-align: top; line-height: 1.55; overflow-wrap: anywhere; /* long tokens/URLs wrap, never overflow */ } .data-table tbody tr:last-child td { border-bottom: none; } .data-table tbody tr:hover td { background: var(--surface-tint); } .data-table tbody td:first-child { font-weight: 600; color: var(--text); } /* row label */ /* Alignment helpers — apply to the
AND every in that column */ .data-table th.center, .data-table td.center { text-align: center; } .data-table th.num, .data-table td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } .data-table th.nowrap, .data-table td.nowrap { white-space: nowrap; } .td-yes { color: var(--green); font-weight: 600; } .td-no { color: var(--red); font-weight: 600; } .td-mono { font-family: var(--mono); font-size: 12px; color: var(--accent); } /* ─── FOOTER ──────────────────────────────────────────── */ footer { background: var(--surface); border-top: 1px solid var(--border); padding: 20px 48px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; font-size: 13px; color: var(--text-muted); } footer a { color: var(--accent); text-decoration: none; } footer a:hover { text-decoration: underline; } .footer-refs { font-size: 12px; color: var(--text-subtle); } @media (max-width: 600px) { nav { padding: 0 20px; } .hero { padding: 40px 0 36px; } .page-wrap { padding: 0 16px 60px; } footer { padding: 16px 20px; } .plain-english { padding: 20px; } .toc-list { grid-template-columns: 1fr; } /* All card grids collapse to a single column on phones. */ .cards-grid, .cards-grid.cols-2, .cards-grid.cols-3, .cards-grid:has(> .card:nth-child(2):last-child), .cards-grid:has(> .card:nth-child(4):last-child) { grid-template-columns: 1fr; } }