/* Pinned Google Fonts snapshot, 2026-10-24. Sources and OFL licenses: /assets/fonts/manifest.json. */
/* Cal Sans latin-ext */
@font-face {
font-family: 'Cal Sans';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/assets/fonts/cal-sans-normal-latin-ext-cbfc071b0b52.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Cal Sans latin */
@font-face {
font-family: 'Cal Sans';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/assets/fonts/cal-sans-normal-latin-cc7be70f8ec4.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;
}
/* Fira Code latin-ext */
@font-face {
font-family: 'Fira Code';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url(/assets/fonts/fira-code-normal-latin-ext-e08f04687410.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Fira Code latin */
@font-face {
font-family: 'Fira Code';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url(/assets/fonts/fira-code-normal-latin-d32d5b5a7c97.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;
}
/* Fira Code latin-ext */
@font-face {
font-family: 'Fira Code';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/assets/fonts/fira-code-normal-latin-ext-e08f04687410.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Fira Code latin */
@font-face {
font-family: 'Fira Code';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/assets/fonts/fira-code-normal-latin-d32d5b5a7c97.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;
}
/* Fira Code latin-ext */
@font-face {
font-family: 'Fira Code';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(/assets/fonts/fira-code-normal-latin-ext-e08f04687410.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Fira Code latin */
@font-face {
font-family: 'Fira Code';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(/assets/fonts/fira-code-normal-latin-d32d5b5a7c97.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;
}
/* Fira Code latin-ext */
@font-face {
font-family: 'Fira Code';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(/assets/fonts/fira-code-normal-latin-ext-e08f04687410.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Fira Code latin */
@font-face {
font-family: 'Fira Code';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(/assets/fonts/fira-code-normal-latin-d32d5b5a7c97.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;
}
/* Fira Code latin-ext */
@font-face {
font-family: 'Fira Code';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(/assets/fonts/fira-code-normal-latin-ext-e08f04687410.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Fira Code latin */
@font-face {
font-family: 'Fira Code';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(/assets/fonts/fira-code-normal-latin-d32d5b5a7c97.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;
}
/* Inter latin-ext */
@font-face {
font-family: 'Inter';
font-style: italic;
font-weight: 100 900;
font-display: swap;
src: url(/assets/fonts/inter-italic-latin-ext-7d263a256b58.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Inter latin */
@font-face {
font-family: 'Inter';
font-style: italic;
font-weight: 100 900;
font-display: swap;
src: url(/assets/fonts/inter-italic-latin-124b693f9bb5.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;
}
/* Inter latin-ext */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url(/assets/fonts/inter-normal-latin-ext-8bc9dee39dea.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Inter latin */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url(/assets/fonts/inter-normal-latin-dd8a4575be98.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;
}
/* Titillium Web latin-ext */
@font-face {
font-family: 'Titillium Web';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/assets/fonts/titillium-web-normal-latin-ext-b4bb9daaf656.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Titillium Web latin */
@font-face {
font-family: 'Titillium Web';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/assets/fonts/titillium-web-normal-latin-f93ddc83566b.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;
}
/* Yesterday in AI — generated from tokens.json by scripts/build_tokens_css.py. Do not edit by hand. */
:root, [data-theme="light"], [data-bs-theme="light"] {
--ink-0: #f8f6f0;
--ink-50: #eceae5;
--ink-100: #d7d5ce;
--ink-200: #b0afac;
--ink-300: #7d858b;
--ink-400: #4e5962;
--ink-600: #1f2126;
--ink-900: #101820;
--signal-50: #fadfd4;
--signal-100: #f6bfa9;
--signal-500: #bf4714;
--signal-600: #b64216;
--signal-700: #5d2610;
--bg: var(--ink-0);
--bg-subtle: var(--ink-50);
--bg-inverse: var(--ink-900);
--bg-rail: #fffdfa;
--bg-elev: #fffdfa;
--fg: var(--ink-900);
--fg-body: var(--ink-600);
--fg-muted: var(--ink-400);
--fg-faint: var(--ink-300);
--fg-on-dark: var(--ink-0);
--border: var(--ink-100);
--border-soft: var(--ink-100);
--border-strong: var(--ink-900);
--border-control: #7d858b;
--nav-bg: #101820;
--nav-ink: #f8f6f0;
--accent: var(--signal-500);
--accent-hover: var(--signal-600);
--accent-press: var(--signal-700);
--accent-tint: var(--signal-50);
--tag-tldr: #1f2126;
--tag-bigmoves: #5d2610;
--tag-ops: #004817;
--tag-vendors: #00446f;
--tag-security: #64001a;
--tag-policy: #614b23;
--tag-quick: #4e5962;
--bs-body-bg: var(--bg);
--bs-body-color: var(--fg-body);
--bs-emphasis-color: var(--fg);
--bs-secondary-color: var(--fg-muted);
--bs-tertiary-color: var(--fg-faint);
--bs-border-color: var(--border);
--bs-border-color-translucent: var(--border-soft);
--bs-link-color: var(--accent);
--bs-link-hover-color: var(--accent-hover);
--bs-primary: var(--accent);
--tag-color: var(--tag-bigmoves);
--bs-btn-bg: var(--accent);
--bs-btn-border-color: var(--accent);
--bs-btn-hover-bg: var(--accent-hover);
--bs-btn-hover-border-color: var(--accent-hover);
--bs-btn-active-bg: var(--accent-press);
--bs-btn-active-border-color: var(--accent-press);
--bs-btn-color: #ffffff;
--bs-btn-hover-color: #ffffff;
--shadow-0: none;
--shadow-1: 0 0.125rem 0.25rem rgba(7, 9, 15, 0.075);
--shadow-2: 0 0.5rem 1rem rgba(7, 9, 15, 0.15);
--shadow-pop: 0 1rem 3rem rgba(7, 9, 15, 0.175);
--shadow-inset: inset 0 1px 2px rgba(7, 9, 15, 0.075);
}
[data-theme="dark"], [data-bs-theme="dark"] {
--ink-0: #101820;
--ink-50: #17222c;
--ink-100: #40505c;
--ink-200: #4f5052;
--ink-300: #647683;
--ink-400: #bac6ce;
--ink-600: #e0deda;
--ink-900: #f8f6f0;
--signal-50: #2e1308;
--signal-100: #8b3a17;
--signal-500: #e86027;
--signal-600: #f1a07d;
--signal-700: #ffb18c;
--bg: var(--ink-0);
--bg-subtle: var(--ink-50);
--bg-inverse: var(--ink-900);
--bg-rail: #17222c;
--bg-elev: #17222c;
--fg: var(--ink-900);
--fg-body: var(--ink-600);
--fg-muted: var(--ink-400);
--fg-faint: var(--ink-300);
--fg-on-dark: var(--ink-0);
--border: var(--ink-100);
--border-soft: var(--ink-100);
--border-strong: var(--ink-900);
--border-control: #647683;
--nav-bg: #101820;
--nav-ink: #f8f6f0;
--accent: var(--signal-500);
--accent-hover: var(--signal-600);
--accent-press: var(--signal-700);
--accent-tint: var(--signal-50);
--tag-tldr: #e0deda;
--tag-bigmoves: #f1a07d;
--tag-ops: #66d188;
--tag-vendors: #8dd6f3;
--tag-security: #fb668d;
--tag-policy: #f7d79a;
--tag-quick: #bac6ce;
--bs-body-bg: var(--bg);
--bs-body-color: var(--fg-body);
--bs-emphasis-color: var(--fg);
--bs-secondary-color: var(--fg-muted);
--bs-tertiary-color: var(--fg-faint);
--bs-border-color: var(--border);
--bs-link-color: var(--accent);
--bs-link-hover-color: var(--accent-hover);
--bs-primary: var(--accent);
--bs-btn-color: #101820;
--bs-btn-hover-color: #101820;
}
:root {
--sp-1: 4px;
--sp-2: 8px;
--sp-3: 12px;
--sp-4: 16px;
--sp-5: 20px;
--sp-6: 24px;
--sp-8: 32px;
--sp-10: 40px;
--sp-12: 48px;
--sp-16: 64px;
--sp-20: 80px;
--sp-24: 96px;
--r-0: 0px;
--r-1: 2px;
--r-2: 0.375rem;
--r-3: 0.375rem;
--r-pill: 1rem;
--fs-12: 0.75rem;
--fs-13: 0.8125rem;
--fs-14: 0.875rem;
--fs-16: 1rem;
--fs-18: 1.125rem;
--fs-20: 1.25rem;
--fs-24: 1.5rem;
--fs-30: 1.875rem;
--fs-38: 2.375rem;
--fs-48: 3rem;
--fs-64: 4rem;
--fs-80: 5rem;
--fs-96: 6rem;
--lh-tight: 1.15;
--lh-snug: 1.15;
--lh-normal: 1.3;
--lh-body: 1.65;
--lh-prose: 1.7;
--tr-eyebrow: 0.07em;
--tr-tight: -0.025em;
--tr-display: -0.025em;
--w-prose: 680px;
--w-page: 1200px;
--w-wide: 1440px;
--w-text: 760px;
--container-max: 1280px;
--measure: 46rem;
--nav-height: 70px;
--target-min: 44px;
--field-min: 48px;
--focus-width: 3px;
--bs-primary-rgb: 191, 71, 20;
--font-display: "Cal Sans", "Titillium Web", sans-serif;
--font-headline: "Cal Sans", "Titillium Web", sans-serif;
--font-sans: Inter, "Noto Sans", "Helvetica Neue", "Segoe UI", Roboto, "Liberation Sans", sans-serif;
--font-serif: Inter, "Noto Sans", "Helvetica Neue", "Segoe UI", Roboto, "Liberation Sans", sans-serif;
--font-mono: "Fira Code", SFMono-Regular, Menlo, Monaco, Consolas, monospace;
--text-h1: 400 5.6rem/1.15 var(--font-display);
--text-display: 400 5.6rem/1.15 var(--font-display);
--text-display-xl: 400 160px/0.95 var(--font-display);
--text-h2: 400 2.45rem/1.15 var(--font-display);
--text-pullquote: 400 2.45rem/1.15 var(--font-display);
--text-footer-name: 400 1.75rem/1.15 var(--font-display);
--text-title-row: 400 1.35rem/1.15 var(--font-display);
--text-h3: 400 1.3rem/1.15 var(--font-display);
--text-h4: 400 1.15rem/1.3 var(--font-display);
--text-h5: 400 1rem/1.3 var(--font-display);
--text-lede: 400 1.35rem/1.7 var(--font-sans);
--text-body: 400 18px/1.65 var(--font-sans);
--text-p: 400 18px/1.65 var(--font-sans);
--text-prose: 400 18px/1.65 var(--font-sans);
--text-text-link: 600 18px/1.65 var(--font-sans);
--text-button: 400 18px/1.6 var(--font-sans);
--text-body-sm: 400 0.95rem/1.65 var(--font-sans);
--text-small: 400 0.88rem/1.65 var(--font-sans);
--text-caption: 400 0.82rem/1.65 var(--font-sans);
--text-eyebrow: 600 0.77rem/1.65 var(--font-sans);
--text-nav-link: 400 15px/1.65 var(--font-sans);
--text-status: 600 0.7rem/1.5 var(--font-sans);
--text-meta: 400 0.83rem/1.65 var(--font-mono);
--text-number: 400 0.8rem/1.65 var(--font-mono);
--text-code: 400 0.9rem/1.6 var(--font-mono);
--text-pre: 400 0.9rem/1.6 var(--font-mono);
}
.h1 {
font-family: var(--font-display);
font-size: 5.6rem;
line-height: 1.15;
font-weight: 400;
letter-spacing: -0.025em;
}
.display {
font-family: var(--font-display);
font-size: 5.6rem;
line-height: 1.15;
font-weight: 400;
letter-spacing: -0.025em;
}
.display-xl {
font-family: var(--font-display);
font-size: 160px;
line-height: 0.95;
font-weight: 400;
letter-spacing: -0.025em;
}
.h2 {
font-family: var(--font-display);
font-size: 2.45rem;
line-height: 1.15;
font-weight: 400;
letter-spacing: -0.025em;
}
.pullquote {
font-family: var(--font-display);
font-size: 2.45rem;
line-height: 1.15;
font-weight: 400;
letter-spacing: -0.025em;
}
.footer-name {
font-family: var(--font-display);
font-size: 1.75rem;
line-height: 1.15;
font-weight: 400;
letter-spacing: 0;
}
.title-row {
font-family: var(--font-display);
font-size: 1.35rem;
line-height: 1.15;
font-weight: 400;
letter-spacing: -0.025em;
}
.h3 {
font-family: var(--font-display);
font-size: 1.3rem;
line-height: 1.15;
font-weight: 400;
letter-spacing: -0.025em;
}
.h4 {
font-family: var(--font-display);
font-size: 1.15rem;
line-height: 1.3;
font-weight: 400;
letter-spacing: -0.025em;
}
.h5 {
font-family: var(--font-display);
font-size: 1rem;
line-height: 1.3;
font-weight: 400;
letter-spacing: -0.025em;
}
.lede {
font-family: var(--font-sans);
font-size: 1.35rem;
line-height: 1.7;
font-weight: 400;
letter-spacing: 0;
}
.body {
font-family: var(--font-sans);
font-size: 18px;
line-height: 1.65;
font-weight: 400;
letter-spacing: 0;
}
.p {
font-family: var(--font-sans);
font-size: 18px;
line-height: 1.65;
font-weight: 400;
letter-spacing: 0;
}
.prose {
font-family: var(--font-sans);
font-size: 18px;
line-height: 1.65;
font-weight: 400;
letter-spacing: 0;
}
.text-link {
font-family: var(--font-sans);
font-size: 18px;
line-height: 1.65;
font-weight: 600;
letter-spacing: 0;
}
.button {
font-family: var(--font-sans);
font-size: 18px;
line-height: 1.6;
font-weight: 400;
letter-spacing: 0;
}
.body-sm {
font-family: var(--font-sans);
font-size: 0.95rem;
line-height: 1.65;
font-weight: 400;
letter-spacing: 0;
}
.small {
font-family: var(--font-sans);
font-size: 0.88rem;
line-height: 1.65;
font-weight: 400;
letter-spacing: 0;
}
.caption {
font-family: var(--font-sans);
font-size: 0.82rem;
line-height: 1.65;
font-weight: 400;
letter-spacing: 0;
}
.eyebrow {
font-family: var(--font-sans);
font-size: 0.77rem;
line-height: 1.65;
font-weight: 600;
letter-spacing: 0.07em;
}
.nav-link {
font-family: var(--font-sans);
font-size: 15px;
line-height: 1.65;
font-weight: 400;
letter-spacing: 0;
}
.status {
font-family: var(--font-sans);
font-size: 0.7rem;
line-height: 1.5;
font-weight: 600;
letter-spacing: 0;
}
.meta {
font-family: var(--font-mono);
font-size: 0.83rem;
line-height: 1.65;
font-weight: 400;
letter-spacing: 0;
}
.number {
font-family: var(--font-mono);
font-size: 0.8rem;
line-height: 1.65;
font-weight: 400;
letter-spacing: 0;
}
.code {
font-family: var(--font-mono);
font-size: 0.9rem;
line-height: 1.6;
font-weight: 400;
letter-spacing: 0;
}
.pre {
font-family: var(--font-mono);
font-size: 0.9rem;
line-height: 1.6;
font-weight: 400;
letter-spacing: 0;
}
/* The sister site's own font request (preview.tedt.org css/shared-fonts.css) */
/* The single shared font request is loaded from the document head. */
/* ============================================================
Yesterday in AI — component and base styles
Load after tokens.css (and after Bootstrap 5.3 if you use it):
Themes: set data-theme="light" | "dark" on .
Every value comes from tokens.css; never paste raw values.
============================================================ */
/* ---------- Web fonts ----------
Shared with the sister site preview.tedt.org (Public Workbench):
Cal Sans — display and every heading, weight 400 (Titillium Web as fallback)
Inter — body, UI, eyebrows, status pills; 400 for text and buttons,
600 for eyebrows, status and standalone links
Fira Code — dates, section numbers, meta, code
*/
/* ============================================================
LIGHT THEME (default)
============================================================ */
:root,
[data-bs-theme="light"] {
--bs-body-font-family: var(--font-sans);
--bs-body-font-size: var(--fs-18);
--bs-body-line-height: var(--lh-body);
}
/* ============================================================
DARK THEME
============================================================ */
[data-bs-theme="dark"] {
--bs-primary-rgb: 232, 96, 39;
}
/* ============================================================
GLOBAL TOKENS (theme-independent)
============================================================ */
:root {
/* Motion. The page has no motion family, so these values live here. */
--ease: cubic-bezier(0.2, 0.6, 0.2, 1);
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--dur-1: 120ms;
--dur-2: 200ms;
--dur-3: 320ms;
}
/* ============================================================
BASE
============================================================ */
html { font-size: 100%; }
body {
background: var(--bg);
color: var(--fg-body);
font-family: var(--font-sans);
font-size: var(--fs-18);
line-height: var(--lh-body);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
::selection { background: var(--accent); color: var(--bs-btn-color); }
/* ============================================================
SEMANTIC TYPOGRAPHY
============================================================ */
/* Eyebrow — sentence case, never all caps */
.eyebrow {
font-family: var(--font-sans);
font-size: 0.77rem;
font-weight: 600;
letter-spacing: var(--tr-eyebrow);
line-height: 1.65;
color: var(--fg-muted);
}
.meta {
font-family: var(--font-mono);
font-size: 0.83rem;
font-weight: 400;
line-height: 1.65;
color: var(--fg-muted);
}
/* Status pill — the site's .ia-status */
.status {
display: inline-block;
padding: 0.2rem 0.6rem;
font-family: var(--font-sans);
font-size: 0.7rem;
font-weight: 600;
line-height: 1.5;
white-space: nowrap;
color: var(--fg);
background: var(--bg-elev);
border: 1px solid var(--border);
border-radius: var(--r-pill);
}
/* Standalone link with an arrow — the site's .ia-text-link */
.text-link { font-weight: 600; }
/* Section / item numbers — mono in the accent */
.number {
font-family: var(--font-mono);
font-size: 0.8rem;
color: var(--accent-hover);
}
/* Display and headings — Cal Sans 400 */
.display, .h1, h1, .h2, h2, .h3, h3, .h4, h4, .h5, h5 {
font-family: var(--font-display);
font-weight: 400;
letter-spacing: var(--tr-tight);
line-height: var(--lh-tight);
color: var(--fg);
text-wrap: balance;
}
.display, .h1, h1 { font-size: clamp(2.75rem, 5.8vw, 5.6rem); letter-spacing: var(--tr-display); }
.display-xl { font-family: var(--font-display); font-size: clamp(64px, 11vw, 160px); font-weight: 400; line-height: 0.95; letter-spacing: var(--tr-display); }
.h2, h2 { font-size: clamp(1.7rem, 2.3vw, 2.45rem); }
.h3, h3 { font-size: 1.3rem; }
.title-row { font-family: var(--font-display); font-weight: 400; font-size: 1.35rem; line-height: var(--lh-tight); letter-spacing: var(--tr-tight); color: var(--fg); }
.h4, h4 { font-size: 1.15rem; line-height: var(--lh-normal); }
.h5, h5 { font-size: var(--fs-16); line-height: var(--lh-normal); }
/* Lede / prose */
.lede {
font-family: var(--font-sans);
font-weight: 400;
font-size: clamp(1.08rem, 1.6vw, 1.35rem);
line-height: var(--lh-prose);
max-width: var(--measure);
color: var(--fg-muted);
text-wrap: pretty;
}
.p, p {
font-family: var(--font-sans);
font-size: var(--fs-18);
line-height: var(--lh-body);
color: var(--fg-body);
text-wrap: pretty;
}
.prose {
font-family: var(--font-sans);
font-size: var(--fs-18);
line-height: var(--lh-body);
max-width: var(--w-prose);
color: var(--fg-body);
}
.prose p + p { margin-top: var(--sp-5); }
.small { font-size: 0.88rem; line-height: 1.65; color: var(--fg-muted); }
.body-sm { font-size: 0.95rem; line-height: 1.65; color: var(--fg-muted); }
.caption { font-size: 0.82rem; line-height: 1.65; color: var(--fg-muted); }
.code, code, pre {
font-family: var(--font-mono);
font-size: 0.9rem;
line-height: 1.6;
}
:not(pre) > code {
background: var(--bg-subtle);
padding: 0.1em 0.35em;
border-radius: var(--r-1);
color: var(--fg);
border: 1px solid var(--border-soft);
}
a {
color: var(--accent);
text-decoration: underline;
text-underline-offset: 0.2em;
text-decoration-thickness: 1px;
transition: color var(--dur-1) var(--ease), text-decoration-thickness var(--dur-1) var(--ease);
}
a:hover { color: var(--accent-hover); text-decoration-thickness: 3px; }
/* Focus — always visible, 3px at a 4px offset */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .btn:focus-visible {
outline: var(--focus-width) solid var(--accent);
outline-offset: 4px;
box-shadow: none;
}
.navbar a:focus-visible, .navbar button:focus-visible { outline-color: var(--nav-ink); }
/* Page container — matches the sister site's .ia-container */
.yia-container {
max-width: var(--container-max);
margin-inline: auto;
padding-inline: clamp(1.25rem, 4vw, 3rem);
}
/* Hairline-opened section */
.yia-section { border-top: 1px solid var(--border); padding-block: 3rem; }
a:active { color: var(--accent-press); }
hr {
border: 0;
border-top: 1px solid var(--border);
margin: var(--sp-8) 0;
opacity: 1;
}
/* ============================================================
BRAND PRIMITIVES
============================================================ */
.wordmark {
display: inline-flex;
align-items: baseline;
gap: 0.3ch;
font-family: var(--font-display);
font-weight: 400;
font-size: 1.75rem;
line-height: 1;
letter-spacing: var(--tr-tight);
color: var(--fg);
text-decoration: none;
}
.wordmark:hover { color: var(--fg); text-decoration: none; }
.navbar .wordmark, .navbar .wordmark:hover { color: var(--nav-ink); }
.wordmark .wm-cadence { color: inherit; }
.wordmark .wm-slash { color: var(--accent); margin: 0 0.05ch; }
.wordmark .wm-tail { color: inherit; }
/* The logo reads "YesterdAI":
YesterdAI */
.wordmark .wm-ai { color: var(--accent); }
.wordmark:has(.wm-ai) { gap: 0; } /* YesterdAI is one word: no gap before "AI" */
/* Section tag — dot + label, set like the site's status pills */
.tag {
display: inline-flex;
align-items: center;
gap: 0.45em;
font-family: var(--font-sans);
font-size: 0.7rem;
font-weight: 600;
line-height: 1.5;
color: var(--fg);
}
.tag::before {
content: "";
width: 0.55em; height: 0.55em;
background: var(--tag-color, var(--fg-muted));
border-radius: var(--r-pill);
flex: none;
}
.tag-bigmoves { }
.tag-ops { --tag-color: var(--tag-ops); }
.tag-vendors { --tag-color: var(--tag-vendors); }
.tag-security { --tag-color: var(--tag-security); }
.tag-policy { --tag-color: var(--tag-policy); }
.tag-quick { --tag-color: var(--tag-quick); }
/* Section header w/ strong rule */
.section-header {
border-top: 2px solid var(--border-strong);
padding-top: var(--sp-4);
margin-top: var(--sp-12);
margin-bottom: var(--sp-6);
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--sp-4);
flex-wrap: wrap;
}
.section-header .lede { color: var(--fg-muted); font-size: 0.95rem; }
/* Hairline rule between feed items */
.feed-item {
border-bottom: 1px solid var(--border-soft);
padding: var(--sp-5) 0;
}
.feed-item:last-child { border-bottom: 0; }
/* Cluster of related links under a lead headline (Techmeme-style) */
.cluster {
list-style: none;
margin: var(--sp-2) 0 0;
padding: 0;
display: grid;
gap: var(--sp-1);
}
.cluster li {
display: flex;
gap: var(--sp-2);
align-items: baseline;
font-size: 0.9rem;
line-height: 1.65;
}
.cluster li::before {
content: "›";
font-family: var(--font-mono);
color: var(--fg-faint);
flex: none;
width: 0.9em;
}
.cluster .src {
font-family: var(--font-mono);
font-size: 0.83rem;
color: var(--fg-muted);
}
/* ============================================================
BOOTSTRAP COMPONENT REFINEMENTS
============================================================ */
.btn {
font-family: var(--font-sans);
font-size: var(--fs-18);
font-weight: 400;
line-height: 1.6;
padding: 0.75rem 1.25rem;
min-height: var(--target-min);
border-radius: var(--r-2);
transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
}
.btn:hover { filter: brightness(0.9); }
.btn:active { transform: translateY(1px); }
.btn-primary {
}
.btn-dark, .btn-outline-dark {
--bs-btn-color: var(--fg);
--bs-btn-border-color: var(--border-strong);
--bs-btn-hover-bg: var(--ink-900);
--bs-btn-hover-color: var(--fg-on-dark);
}
/* Navbar — ink in both themes, as on the sister site */
.navbar {
background: var(--nav-bg) !important;
color: var(--nav-ink);
min-height: var(--nav-height);
border-bottom: 0;
}
.navbar .nav-link {
font-family: var(--font-sans);
font-weight: 400;
font-size: 15px;
min-height: var(--target-min);
display: flex;
align-items: center;
color: var(--nav-ink);
}
.navbar .nav-link:hover { color: var(--nav-ink); text-decoration: underline; text-decoration-thickness: 3px; }
.navbar .nav-link.active { color: var(--nav-ink); text-decoration: underline; }
.dropdown-menu {
border-radius: var(--r-2);
border-color: var(--border);
box-shadow: var(--shadow-pop);
font-size: 0.9rem;
background: var(--bg-elev);
}
.dropdown-item { color: var(--fg-body); }
.dropdown-item:hover, .dropdown-item:focus { background: var(--bg-subtle); color: var(--fg); }
.form-control, .form-select {
background: var(--bg-elev);
border-color: var(--border-control);
color: var(--fg);
min-height: var(--field-min);
font-size: var(--fs-16);
border-radius: var(--r-2);
}
.form-control:focus, .form-select:focus { border-color: var(--accent); }
.badge { font-family: var(--font-sans); font-size: 0.7rem; font-weight: 600; line-height: 1.5; }
/* Card override — bordered, no shadow by default */
.card {
background: var(--bg-elev);
border: 1px solid var(--border);
border-radius: var(--r-3);
box-shadow: none;
}
.card:hover { border-color: var(--border-control); }
/* Pull quote */
.pullquote {
margin: var(--sp-10) 0;
padding: var(--sp-6) 0 var(--sp-6) var(--sp-6);
border-left: 3px solid var(--accent);
font-family: var(--font-display);
font-weight: 400;
font-size: clamp(1.75rem, 3.5vw, 2.45rem);
line-height: var(--lh-tight);
letter-spacing: var(--tr-tight);
color: var(--fg);
text-wrap: balance;
}
.pullquote cite {
display: block;
margin-top: var(--sp-3);
font-family: var(--font-mono);
font-style: normal;
font-size: 0.83rem;
color: var(--fg-muted);
}
/* Editorial table */
table.editorial {
width: 100%;
border-collapse: collapse;
font-family: var(--font-sans);
font-size: 0.95rem;
line-height: 1.65;
margin: var(--sp-6) 0;
}
table.editorial th, table.editorial td {
padding: var(--sp-3) var(--sp-4);
text-align: left;
border-bottom: 1px solid var(--border-soft);
vertical-align: top;
}
table.editorial thead th {
font-family: var(--font-sans);
font-size: 0.77rem;
letter-spacing: var(--tr-eyebrow);
color: var(--fg-muted);
font-weight: 600;
border-bottom: 2px solid var(--border-strong);
}
table.editorial tbody tr:hover { background: var(--bg-subtle); }
table.editorial td .num {
font-family: var(--font-mono);
font-variant-numeric: tabular-nums;
color: var(--fg);
}
/* Skeleton loader */
@keyframes skeleton-shimmer {
0% { background-position: -200px 0; }
100% { background-position: calc(200px + 100%) 0; }
}
.skeleton {
display: inline-block;
height: 1em;
border-radius: var(--r-1);
background: linear-gradient(90deg, var(--bg-subtle) 0%, var(--ink-100) 50%, var(--bg-subtle) 100%);
background-size: 200px 100%;
background-repeat: no-repeat;
animation: skeleton-shimmer 1.4s linear infinite;
}
.skeleton-line { width: 100%; height: 0.9em; margin: 0.4em 0; }
.skeleton-title { height: 1.6em; width: 80%; margin-bottom: 0.6em; }
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
transition-duration: 0ms !important;
animation-duration: 0ms !important;
}
}
/* ============================================================
UTILITIES (Bootstrap-compatible naming, brand tokens)
============================================================ */
.bg-paper { background-color: var(--bg) !important; }
.bg-elev { background-color: var(--bg-elev) !important; }
.bg-subtle { background-color: var(--bg-subtle) !important; }
.bg-rail { background-color: var(--bg-rail) !important; }
.bg-inverse { background-color: var(--bg-inverse) !important; color: var(--fg-on-dark) !important; }
.text-fg { color: var(--fg) !important; }
.text-body-em { color: var(--fg-body) !important; }
.text-muted-em { color: var(--fg-muted) !important; }
.text-faint { color: var(--fg-faint) !important; }
.text-accent { color: var(--accent) !important; }
.border-soft { border-color: var(--border-soft) !important; }
.border-strong { border-color: var(--border-strong) !important; }
.rule-strong { border-top: 2px solid var(--border-strong); }
.font-display { font-family: var(--font-display) !important; }
.font-headline { font-family: var(--font-headline) !important; }
.font-sans { font-family: var(--font-sans) !important; }
.font-mono { font-family: var(--font-mono) !important; }
:root {
--rail-width: 14rem;
--nav-gap: clamp(var(--sp-3), 2vw, var(--sp-8));
--page-inset: clamp(var(--sp-5), 4vw, var(--sp-12));
--heading-story: clamp(var(--fs-24), 2.4vw, var(--fs-38));
--heading-lead: clamp(var(--fs-30), 3.2vw, var(--fs-48));
--heading-page: clamp(var(--fs-38), 4.8vw, var(--fs-64));
--story-image-min: 14rem;
--story-image-max: 22rem;
--story-image-share: 42%;
--line: 1px;
--strong-line: 2px;
--nav-z: 20;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--sp-8); }
body { margin: 0; overflow-wrap: break-word; }
img { display: block; max-width: 100%; height: auto; }
button, input, select { font: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
a { text-underline-offset: .2em; }
main:focus { outline: none; }
.yia-container { width: 100%; margin-inline: auto; max-width: var(--container-max); padding-inline: var(--page-inset); }
.skip-link { position: absolute; top: var(--sp-4); left: var(--sp-4); z-index: calc(var(--nav-z) + 1); padding: var(--sp-3) var(--sp-5); background: var(--bg-elev); transform: translateY(-200%); }
.skip-link:focus { transform: translateY(0); }
.site-nav { background: var(--nav-bg); color: var(--nav-ink); border-bottom: var(--line) solid var(--border-control); }
.nav-inner { display: flex; align-items: center; min-height: var(--nav-height); gap: var(--nav-gap); }
.brand-link { display: flex; align-items: center; min-height: var(--target-min); margin-right: auto; flex-shrink: 0; }
.nav-links { display: flex; align-items: center; flex-wrap: wrap; gap: var(--nav-gap); }
.nav-links a { display: flex; align-items: center; min-height: var(--target-min); font: var(--text-nav-link); color: var(--nav-ink); text-decoration-color: transparent; }
.nav-links a:hover, .nav-links [aria-current] { text-decoration-color: currentColor; }
.site-nav a:focus-visible, .site-nav button:focus-visible { outline-color: var(--nav-ink); }
.theme-button { min-width: var(--target-min); min-height: var(--target-min); padding: var(--sp-2) var(--sp-3); background: transparent; border: var(--line) solid var(--border-control); color: var(--nav-ink); border-radius: var(--r-2); font: var(--text-small); }
.theme-button:hover { border-color: var(--nav-ink); }
.page-shell { padding-block: var(--sp-12) var(--sp-20); min-height: 60vh; }
.page-heading { padding-bottom: var(--sp-8); }
.page-heading h1 { margin-block: var(--sp-3) var(--sp-4); font-size: var(--heading-page); }
.page-heading .lede { margin-bottom: 0; }
.briefing-shell, .edition-shell { padding-bottom: var(--sp-16); }
.briefing-heading, .edition-masthead { padding-block: var(--sp-8); }
.briefing-heading h1, .edition-masthead h1 { font-size: var(--heading-page); max-width: var(--w-text); margin-block: var(--sp-4); }
.briefing-heading .lede, .edition-masthead .lede { margin-block: 0 var(--sp-4); max-width: var(--w-text); }
.edition-kicker { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--sp-2) var(--sp-6); justify-content: space-between; }
.edition-kicker p { margin: 0; }
.retrospective-label { color: var(--fg-muted); font: var(--text-small); }
.briefing-layout, .edition-layout { display: grid; grid-template-columns: minmax(0, 1fr) var(--rail-width); gap: var(--sp-12); align-items: start; }
.briefing-main, .edition-main { min-width: 0; container-type: inline-size; }
.section-header { display: flex; gap: var(--sp-3); align-items: baseline; border-top: var(--strong-line) solid var(--border-strong); padding-block: var(--sp-3); margin: 0; }
.section-header h2 { margin: 0; font: var(--text-h3); }
.section-header .meta { margin-left: auto; }
.tldr-panel { margin-block: 0 var(--sp-6); }
.tldr-panel ol { list-style: none; padding: 0; margin: 0; counter-reset: briefing; }
.tldr-panel li { counter-increment: briefing; position: relative; padding: var(--sp-3) 0 var(--sp-3) var(--sp-8); border-bottom: var(--line) solid var(--border-soft); }
.tldr-panel li::before { content: '0' counter(briefing); position: absolute; left: 0; top: var(--sp-3); font: var(--text-number); color: var(--accent-hover); }
.tldr-panel a { color: var(--fg); }
.story-meta { display: flex; align-items: baseline; gap: var(--sp-3); flex-wrap: wrap; margin: 0 0 var(--sp-3); }
.story-row { display: flow-root; padding-block: var(--sp-6); border-bottom: var(--line) solid var(--border-soft); }
.story-title { font-size: var(--heading-story); margin: 0 0 var(--sp-4); text-wrap: pretty; }
.story-title a { color: var(--fg); }
.story-title a:hover { color: var(--accent-hover); }
.story-featured .story-title { font-size: var(--heading-lead); }
.story-row p { margin-block: 0 var(--sp-3); }
.story-thumbnail { float: right; width: clamp(var(--story-image-min), var(--story-image-share), var(--story-image-max)); margin: 0 0 var(--sp-4) var(--sp-6); }
.story-thumbnail img, .hero-image { width: 100%; height: auto; border-radius: var(--r-2); background: var(--bg-subtle); }
.story-summary { color: var(--fg-body); }
.story-source { display: flex; gap: var(--sp-2) var(--sp-4); flex-wrap: wrap; padding-top: var(--sp-2); }
.tag { color: var(--fg); }
.tag-big-moves { --tag-color: var(--tag-bigmoves); }
.tag-enterprise-ops { --tag-color: var(--tag-ops); }
.tag-vendors { --tag-color: var(--tag-vendors); }
.tag-security { --tag-color: var(--tag-security); }
.tag-policy { --tag-color: var(--tag-policy); }
.edition-section { margin-top: var(--sp-10); }
.briefing-rail, .edition-rail { display: grid; gap: var(--sp-8); }
.rail-note { border-top: var(--strong-line) solid var(--border-strong); padding-top: var(--sp-4); }
.rail-note h2 { font: var(--text-h3); margin-block: var(--sp-3); }
.topic-links, .edition-contents { padding: 0; margin: var(--sp-3) 0 0; list-style: none; }
.topic-links a, .edition-contents a { display: inline-flex; min-height: var(--target-min); align-items: center; font: var(--text-small); }
.edition-contents li { display: flex; align-items: center; justify-content: space-between; }
.quick-hits { list-style: none; padding: 0; }
.quick-hits li { padding-block: var(--sp-4); border-bottom: var(--line) solid var(--border-soft); }
.quick-hits p { margin: var(--sp-2) 0 0; }
.reading-links, .edition-pagination, .article-bottom { display: flex; gap: var(--sp-4) var(--sp-6); justify-content: space-between; align-items: baseline; flex-wrap: wrap; margin-top: var(--sp-6); }
.reading-links a, .edition-pagination a, .article-bottom a { display: inline-flex; align-items: center; min-height: var(--target-min); }
.site-footer { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: var(--sp-8); border-top: var(--strong-line) solid var(--border-strong); padding-block: var(--sp-8) var(--sp-6); }
.footer-intro p { margin-bottom: var(--sp-3); }
.footer-links { list-style: none; padding: 0; margin: 0; display: grid; font: var(--text-small); }
.footer-links a { display: inline-flex; align-items: center; min-height: var(--target-min); padding-block: var(--sp-2); }
.footer-bottom { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4); padding-top: var(--sp-4); border-top: var(--line) solid var(--border); }
.footer-bottom a { display: inline-flex; min-height: var(--target-min); align-items: center; }
.logo-dark { display: none; }
[data-theme='dark'] .logo-light { display: none; }
[data-theme='dark'] .logo-dark { display: block; }
.article-shell { padding-block: var(--sp-8) var(--sp-16); }
.article-heading { max-width: var(--w-text); margin-inline: auto; padding-bottom: var(--sp-5); }
.article-heading h1 { font-size: var(--heading-page); margin-block: var(--sp-4); }
.article-heading .story-meta { margin-top: var(--sp-4); }
.article-heading .lede { margin-bottom: var(--sp-4); }
.article-byline, .source-credit { margin-block: var(--sp-2); }
.article-reading { max-width: var(--w-prose); margin-inline: auto; }
.article-takeaways { padding-block: var(--sp-4); border-block: var(--line) solid var(--border); margin-bottom: var(--sp-6); }
.article-takeaways h2 { margin: 0; font: var(--text-eyebrow); }
.article-takeaways ul { margin-block: var(--sp-3) 0; padding-left: var(--sp-5); }
.article-takeaways li + li { margin-top: var(--sp-2); }
.article-toc { margin-block: 0 var(--sp-6); }
.article-toc p { margin-bottom: var(--sp-2); }
.article-toc ul { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-5); list-style: none; padding: 0; margin: 0; }
.article-toc a { display: inline-flex; align-items: center; min-height: var(--target-min); font: var(--text-small); }
.article-figure { margin: 0 0 var(--sp-8); }
figcaption { font: var(--text-caption); color: var(--fg-muted); margin-top: var(--sp-2); }
.article-body h2 { margin-top: var(--sp-8); }
.article-body p { margin-block: 0 var(--sp-5); }
.article-body ul { padding-left: var(--sp-6); }
.legacy-anchor { display: block; height: 0; }
.article-sources { margin-top: var(--sp-8); padding-top: var(--sp-4); border-top: var(--strong-line) solid var(--border-strong); }
.article-sources h2 { font: var(--text-h3); }
.article-sources ul { padding-left: var(--sp-5); }
.article-sources li { padding-bottom: var(--sp-4); }
.source-detail { display: block; color: var(--fg-muted); }
.article-topics { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); margin-top: var(--sp-3); }
.article-topics a { display: inline-flex; min-height: var(--target-min); align-items: center; font: var(--text-small); }
.related-stories { margin-top: var(--sp-8); }
.related-stories article { padding-block: var(--sp-3); border-bottom: var(--line) solid var(--border-soft); }
.related-stories .meta { margin-bottom: var(--sp-2); }
.related-stories h3 { margin: 0; }
.archive-months { display: flex; flex-wrap: wrap; gap: var(--sp-5); margin-bottom: var(--sp-6); }
.archive-months a { display: inline-flex; min-height: var(--target-min); align-items: center; }
.archive-month + .archive-month { margin-top: var(--sp-8); }
.archive-row { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: var(--sp-6); border-bottom: var(--line) solid var(--border); padding-block: var(--sp-6); align-items: baseline; }
.archive-row h3 { font-size: var(--fs-24); margin: 0 0 var(--sp-3); }
.archive-row .meta { margin: 0; }
.archive-row .retrospective-label { display: block; margin-top: var(--sp-2); }
.archive-headlines { padding-left: var(--sp-5); margin-block: 0 var(--sp-3); }
.archive-headlines li { margin-bottom: var(--sp-2); font: var(--text-small); }
.wire-toolbar { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; padding-block: var(--sp-4); border-block: var(--line) solid var(--border); }
.live-label { display: inline-flex; align-items: center; gap: var(--sp-2); font: var(--text-eyebrow); }
.live-dot { height: var(--sp-2); width: var(--sp-2); border-radius: 50%; background: var(--accent); }
.wire-context { max-width: var(--w-text); margin-block: var(--sp-4); }
.wire-row { display: grid; grid-template-columns: var(--sp-8) minmax(0, 1fr); gap: var(--sp-4); padding-block: var(--sp-6); border-bottom: var(--line) solid var(--border-soft); }
.wire-row h2 { font-size: var(--heading-story); margin-block: var(--sp-2) var(--sp-3); max-width: var(--w-text); }
.wire-row .number { padding-top: var(--sp-2); }
.wire-row .body-sm { max-width: var(--w-text); }
.search-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-3); }
.search-form label { grid-column: 1 / -1; font: var(--text-eyebrow); }
.form-control { min-height: var(--field-min); width: 100%; min-width: 0; padding: var(--sp-3) var(--sp-4); color: var(--fg); background: var(--bg-elev); border: var(--line) solid var(--border-control); border-radius: var(--r-2); }
.search-button { border: var(--line) solid var(--fg); background: var(--fg); color: var(--bg); padding-inline: var(--sp-6); border-radius: var(--r-2); min-height: var(--field-min); }
.topic-filters { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-block: var(--sp-5); }
.filter-button { min-height: var(--target-min); padding: var(--sp-2) var(--sp-4); background: transparent; color: var(--fg); border: var(--line) solid var(--border-control); border-radius: var(--r-2); font: var(--text-small); }
.filter-button[aria-pressed='true'] { border-color: var(--accent); color: var(--accent); text-decoration: underline; text-underline-offset: .2em; }
.subject-select { display: flex; align-items: center; gap: var(--sp-3); max-width: var(--measure); }
.subject-select label { flex-shrink: 0; font: var(--text-small); }
.search-empty { border-top: var(--strong-line) solid var(--border-strong); padding-block: var(--sp-5); }
.compact-story { padding-block: var(--sp-5); border-top: var(--line) solid var(--border); max-width: var(--w-text); }
.compact-story .meta { margin-block: 0 var(--sp-2); }
.compact-story h2 { font-size: var(--fs-24); margin-block: 0 var(--sp-3); text-wrap: pretty; }
.compact-story p:last-child { margin-bottom: 0; }
.search-pagination { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4); margin-top: var(--sp-5); }
.search-pagination button { min-height: var(--target-min); }
.topic-directory { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-8); }
.topic-directory section { border-top: var(--strong-line) solid var(--border-strong); padding-top: var(--sp-4); }
.topic-directory h2 { font: var(--text-h3); margin-top: 0; }
.about-prose { margin-inline: auto; }
.publication-notice { border-left: var(--strong-line) solid var(--accent); padding: var(--sp-3) var(--sp-4); max-width: var(--w-text); background: var(--bg-elev); }
@container (max-width: 600px) {
.story-thumbnail { float: none; display: block; width: 100%; max-width: var(--story-image-max); margin: 0 0 var(--sp-4); }
}
@media (max-width: 1100px) {
.briefing-layout, .edition-layout { grid-template-columns: minmax(0, 1fr); }
.briefing-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.edition-rail { display: none; }
}
@media (max-width: 900px) {
.nav-inner { flex-wrap: wrap; padding-block: var(--sp-2); }
.brand-link { order: 0; } .theme-button { order: 1; }
.nav-links { order: 2; width: 100%; justify-content: space-between; }
}
@media (max-width: 600px) {
:root { --heading-page: clamp(var(--fs-30), 8.2vw, var(--fs-48)); }
.briefing-heading, .edition-masthead { padding-block: var(--sp-6); }
.edition-kicker { display: block; }
.edition-kicker .meta { margin-top: var(--sp-2); }
.briefing-heading .lede, .edition-masthead .lede { font-size: var(--fs-18); }
.briefing-rail, .site-footer, .topic-directory { grid-template-columns: minmax(0, 1fr); }
.story-thumbnail { float: none; width: 100%; max-width: none; margin: 0 0 var(--sp-4); }
.page-shell { padding-top: var(--sp-8); }
.archive-row { grid-template-columns: 1fr; gap: var(--sp-3); }
.archive-row .retrospective-label { display: inline; margin-left: var(--sp-3); }
.nav-links { gap: var(--sp-2); }
.nav-links a { font-size: var(--fs-13); }
.story-meta .meta { font-size: var(--fs-12); }
.search-form { grid-template-columns: 1fr; }
.subject-select { display: block; }
.subject-select select { margin-top: var(--sp-2); }
.article-toc ul { display: block; }
.article-toc a { min-height: var(--target-min); }
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after { animation-duration: 0ms !important; transition-duration: 0ms !important; }
}