/* Rudder — wearerudder.com Palette is AAA-verified: on the light theme every text tone clears 7:1 (ink 17.3:1, muted 7.6:1, faint 7.1:1 — faint darkened from the design's #8a8378, which sat at 3.7:1). The color theme enforces the same bar at runtime (see the inline script in ). */ :root { --bg: #fdfcfa; --ink: #1a1815; --muted: #57524a; --faint: #5b564f; --line: #e5dfd5; --sel: #e6e3dd; } @font-face { font-family: 'Archivo'; src: url('/fonts/Archivo-var.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: 'Archivo'; src: url('/fonts/Archivo-400-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: 'IBM Plex Mono'; src: url('/fonts/IBMPlexMono-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'IBM Plex Mono'; src: url('/fonts/IBMPlexMono-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } * { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: 'Archivo', Helvetica, Arial, sans-serif; font-size: 20px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } @media (prefers-reduced-motion: no-preference) { body { transition: background 0.25s ease, color 0.25s ease; } a, button, input, textarea { transition: background 0.15s ease, color 0.15s ease; } } ::selection { background: var(--sel); } a { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; } :focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; } .skip-link { position: absolute; left: -9999px; top: 0; background: var(--ink); color: var(--bg); padding: 12px 20px; font-weight: 700; z-index: 10; } .skip-link:focus { left: 0; } .wrap { max-width: 880px; margin: 0 auto; padding: clamp(28px, 5vw, 56px) clamp(20px, 4vw, 32px) 96px; } /* Header ------------------------------------------------------------- */ .site-header { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-bottom: clamp(56px, 9vw, 112px); } .logo-link { display: flex; align-items: center; text-decoration: none; padding: 8px 0; margin-right: auto; } .logo { height: clamp(34px, 5vw, 44px); width: auto; display: block; color: var(--ink); } .header-controls { display: flex; align-items: center; } #site-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; font-size: 17px; font-weight: 500; letter-spacing: -0.01em; } /* 44px minimum targets (WCAG 2.5.5) without changing the visual rhythm. */ #site-nav a { text-decoration: none; padding: 12px 8px; min-height: 44px; display: inline-flex; align-items: center; } #site-nav a:hover, #site-nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 4px; } #theme-toggle, #nav-toggle { background: none; border: none; padding: 12px; min-width: 44px; min-height: 44px; cursor: pointer; color: var(--ink); display: inline-flex; align-items: center; justify-content: center; } #nav-toggle[hidden] { display: none; } #nav-toggle .icon-close { display: none; } #nav-toggle[aria-expanded="true"] .icon-burger { display: none; } #nav-toggle[aria-expanded="true"] .icon-close { display: block; } /* Desktop: links inline between logo and controls; no hamburger. */ @media (min-width: 721px) { #nav-toggle { display: none; } #site-nav { order: 0; } .header-controls { order: 1; } } /* Mobile: top bar is logo + controls; the nav collapses behind the burger. Without JS (no .js on ) the nav simply stays visible. */ @media (max-width: 720px) { #site-nav { order: 2; flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 0; border-top: 1px solid var(--line); padding-top: 8px; } #site-nav a { padding: 12px 4px; } html.js #site-nav { display: none; } html.js #site-nav.open { display: flex; } } /* Type --------------------------------------------------------------- */ h1 { line-height: 1.05; font-weight: 850; letter-spacing: -0.035em; margin: 0 0 32px; text-wrap: balance; } .display-1 { font-size: clamp(38px, 6.5vw, 64px); } .display-2 { font-size: clamp(38px, 6vw, 56px); margin-bottom: 64px; } .display-3 { font-size: clamp(34px, 5.5vw, 52px); line-height: 1.08; letter-spacing: -0.03em; } .display-4 { font-size: clamp(32px, 5vw, 48px); line-height: 1.1; letter-spacing: -0.03em; margin-bottom: 48px; } .kicker { font-family: 'IBM Plex Mono', monospace; font-size: 12px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); margin: 0 0 32px; } .lede { margin: 0 0 28px; font-weight: 700; font-size: clamp(24px, 4vw, 30px); line-height: 1.25; letter-spacing: -0.02em; text-wrap: pretty; } .sub { font-size: clamp(20px, 3vw, 26px); line-height: 1.4; margin: 0; color: var(--muted); letter-spacing: -0.01em; max-width: 640px; text-wrap: balance; } .sub-lg { font-size: clamp(19px, 2.5vw, 22px); color: var(--muted); } .muted { color: var(--muted); } .item-title { margin: 0 0 14px; font-weight: 700; font-size: clamp(22px, 3.5vw, 26px); letter-spacing: -0.02em; } section, article { margin-bottom: clamp(72px, 10vw, 110px); } article { max-width: 700px; } .measure { max-width: 700px; } .measure-sm { max-width: 640px; } p { margin: 0 0 22px; } p:last-child { margin-bottom: 0; } /* Em-dash lists ------------------------------------------------------- */ .dash-list { list-style: none; margin: 0 0 44px; padding: 0; display: grid; gap: 22px; } .dash-list li { padding-left: 30px; position: relative; } .dash-list li::before { content: '\2014'; position: absolute; left: 0; font-family: 'IBM Plex Mono', monospace; color: var(--ink); } .dash-list:last-child { margin-bottom: 0; } /* CTA ------------------------------------------------------------------ */ .cta { border-top: 1px solid var(--line); padding-top: clamp(48px, 7vw, 72px); } .cta h2 { font-size: clamp(30px, 5vw, 44px); line-height: 1.12; font-weight: 850; letter-spacing: -0.03em; margin: 0 0 26px; text-wrap: balance; } .cta .muted { margin-bottom: 36px; } .btn { display: inline-block; font-size: 17px; font-weight: 700; letter-spacing: -0.01em; background: transparent; color: var(--ink); border: 2px solid var(--ink); padding: 14px 28px; min-height: 44px; text-decoration: none; cursor: pointer; font-family: inherit; } .btn:hover { background: var(--ink); color: var(--bg); } /* Forms ----------------------------------------------------------------- */ form { display: grid; gap: 28px; max-width: 620px; } .form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 28px; } .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .form-status { border: 1px solid var(--line); border-left: 4px solid var(--ink); padding: 16px 20px; margin: 0 0 32px; font-weight: 600; max-width: 640px; } .form-status:focus { outline: none; } form label { display: grid; gap: 8px; font-weight: 700; font-size: 16px; } input, textarea { font-family: inherit; font-size: 17px; line-height: 1.5; padding: 12px 14px; border: 2px solid var(--ink); background: var(--bg); color: var(--ink); border-radius: 0; min-height: 44px; } textarea { resize: vertical; } /* Article --------------------------------------------------------------- */ article h1 { margin-bottom: 40px; } article h1:has(+ .post-date) { margin-bottom: 14px; } .post-date { font-family: 'IBM Plex Mono', monospace; font-size: 14px; color: var(--muted); margin: 0 0 40px; } article h2 { font-size: clamp(24px, 3.5vw, 30px); line-height: 1.25; font-weight: 700; letter-spacing: -0.02em; margin: 56px 0 20px; } article h3 { font-size: clamp(20px, 3vw, 24px); line-height: 1.3; font-weight: 700; letter-spacing: -0.015em; margin: 40px 0 16px; } article p { margin-bottom: 24px; } .takeaway { margin: 40px 0 0; font-weight: 700; } article ol { margin: 0 0 24px; padding-left: 26px; display: grid; gap: 8px; } article ul.dash-list { margin-bottom: 24px; } .example { border-left: 1px solid var(--line); padding-left: 22px; margin: 0 0 24px; } .example > :last-child { margin-bottom: 0; } .log-date { font-family: 'IBM Plex Mono', monospace; font-size: 13px; color: var(--muted); white-space: nowrap; margin-left: 10px; } .backlinks { border-top: 1px solid var(--line); padding-top: clamp(48px, 7vw, 64px); } .backlinks p { margin-bottom: 12px; } .backlinks p:last-child { margin-bottom: 0; } /* Footer ------------------------------------------------------------------ */ .site-footer { border-top: 1px solid var(--line); padding-top: 32px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; font-family: 'IBM Plex Mono', monospace; font-size: 13px; color: var(--faint); } .footer-nav { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 0 28px; } .footer-nav a { color: var(--faint); display: inline-flex; align-items: center; min-height: 44px; }