@font-face {
  font-family: 'Atkinson Hyperlegible Next';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('./fonts/AtkinsonHyperlegibleNext-Variable.woff2') format('woff2');
}

@font-face {
  font-family: 'Atkinson Hyperlegible Next';
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
  src: url('./fonts/AtkinsonHyperlegibleNext-VariableItalic.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('./fonts/InterVariable.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter Variable';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('./fonts/InterVariable-Italic.woff2') format('woff2');
}

:root {
  /* Colour */
  --color-ink: #111111;
  --color-paper: #f7f5f0;
  --color-muted: #66645f;
  --color-line: rgba(17, 17, 17, 0.18);
  --color-soft-line: rgba(17, 17, 17, 0.1);
  --color-code-surface: rgba(17, 17, 17, 0.06);

  /* Typography */
  --font-sans: 'Atkinson Hyperlegible Next', 'Helvetica Neue', Arial, sans-serif;
  --font-display: 'Inter Variable', 'Atkinson Hyperlegible Next', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-size-body: 1rem;
  --font-size-supporting: .875rem;
  --font-size-compact: .9375rem;
  --font-size-reading: 1.0625rem;
  --font-size-subheading: 1.25rem;
  --font-size-section: 1.625rem;
  --font-size-feature: 1.75rem;
  --font-size-meta: .75rem;
  --font-size-label: .75rem;
  --font-size-brand: 1.3125rem;
  --font-size-brand-mark: 1.75rem;
  --font-size-nav: .8125rem;
  --font-size-brand-compact: 1.125rem;
  --font-size-brand-mark-compact: 1.5rem;
  --font-size-nav-compact: .75rem;
  --font-size-display-mobile: 3.25rem;
  --font-size-display-smallest: 3rem;
  --font-size-simple-mobile: 3.25rem;
  --font-size-simple-smallest: 2.75rem;
  --font-size-display-tablet-fluid: calc(12.5vw - 2.75rem);
  --font-size-hero-fluid: 8.2vw;
  --font-size-hero-max: 6.5rem;
  --font-size-manifesto-fluid: 3.1vw;
  --font-size-manifesto-max: 2.8125rem;
  --font-size-card-fluid: 3vw;
  --font-size-card-max: 2.4375rem;
  --font-size-newsletter-min: 2.125rem;
  --font-size-newsletter-fluid: 4.7vw;
  --font-size-newsletter-max: 4.0625rem;
  --font-size-article-fluid: 8vw;
  --font-size-article-tablet-fluid: calc(9.875vw - 1.2rem);
  --font-size-article-max: 6.25rem;
  --font-size-dek-min: 1.25rem;
  --font-size-dek-fluid: 2.2vw;
  --font-size-dek-max: 1.8125rem;
  --font-size-copy: 1.0625rem;
  --font-size-code: .9em;
  --font-size-manifesto-compact: 2rem;
  --font-weight-regular: 400;
  --font-weight-display: 500;
  --font-weight-strong: 600;
  --font-weight-wordmark: 600;
  --iteration-count-once: 1;
  --line-height-body: 1.55;
  --line-height-copy: 1.5;
  --line-height-reading: 1.45;
  --line-height-dek: 1.25;
  --line-height-manifesto: 1.08;
  --line-height-card-heading: 1.03;
  --line-height-label: 1.2;
  --line-height-display: .98;
  --line-height-display-article: .96;
  --line-height-heading: 1.1;
  --line-height-article-body: 1.62;
  --letter-spacing-display: -.055em;
  --letter-spacing-wordmark: -.04em;
  --letter-spacing-manifesto: -.04em;
  --letter-spacing-card-heading: -.04em;
  --letter-spacing-newsletter: -.05em;
  --letter-spacing-article-dek: -.02em;
  --letter-spacing-article-heading: -.03em;
  --letter-spacing-approach-heading: -.04em;
  --letter-spacing-reading: 0;
  --letter-spacing-label: .12em;
  --letter-spacing-draft: .08em;
  --letter-spacing-meta: .08em;
  --letter-spacing-nav: .01em;
  --letter-offset-link: .18em;
  --font-style-normal: normal;
  --font-style-italic: italic;
  --font-variant-tabular: tabular-nums;
  --text-transform-uppercase: uppercase;
  --text-decoration-none: none;
  --text-decoration-underline: underline;

  /* Shared spacing and geometry */
  --space-none: 0;
  --space-1: 3px;
  --space-2: 5px;
  --space-3: 6px;
  --space-4: 7px;
  --space-5: 8px;
  --space-6: 10px;
  --space-7: 12px;
  --space-8: 13px;
  --space-9: 14px;
  --space-10: 17px;
  --space-11: 18px;
  --space-12: 19px;
  --space-13: 20px;
  --space-14: 22px;
  --space-15: 23px;
  --space-16: 24px;
  --space-17: 25px;
  --space-18: 27px;
  --space-19: 28px;
  --space-20: 30px;
  --space-21: 32px;
  --space-22: 33px;
  --space-23: 34px;
  --space-24: 35px;
  --space-25: 37px;
  --space-26: 38px;
  --space-27: 40px;
  --space-28: 42px;
  --space-29: 45px;
  --space-30: 48px;
  --space-31: 50px;
  --space-32: 55px;
  --space-33: 56px;
  --space-34: 60px;
  --space-35: 65px;
  --space-36: 70px;
  --space-37: 75px;
  --space-38: 78px;
  --space-39: 80px;
  --space-40: 82px;
  --space-41: 85px;
  --space-42: 90px;
  --space-43: 92px;
  --space-44: 95px;
  --space-45: 100px;
  --space-46: 104px;
  --space-47: 105px;
  --space-48: 110px;
  --space-49: 118px;
  --space-50: 120px;
  --space-51: 130px;
  --space-52: 150px;
  --space-negative-5: -8px;
  --layout-content-max: 1240px;
  --layout-copy-offset: 25%;
  --layout-full-width: 100%;
  --layout-header-height: 92px;
  --layout-header-height-compact: 74px;
  --layout-hero-min-height: 660px;
  --layout-hero-min-height-compact: 600px;
  --layout-card-min-height: 340px;
  --layout-card-min-height-compact: 300px;
  --layout-touch-target: 44px;
  --layout-circle-link: 48px;
  --layout-hero-title-max: 950px;
  --layout-hero-copy-max: 370px;
  --layout-manifesto-copy-max: 720px;
  --layout-card-title-max: 490px;
  --layout-card-copy-max: 480px;
  --layout-newsletter-copy-max: 420px;
  --layout-empty-state-max: 520px;
  --layout-footer-copy-max: 240px;
  --layout-article-intro-max: 900px;
  --layout-article-dek-max: 42ch;
  --layout-article-content-max: 68ch;
  --layout-simple-title-max: 1000px;
  --layout-simple-copy-max: 62ch;
  --layout-approach-copy-max: 340px;
  --layout-grid-one: 1fr;
  --layout-grid-two: 2fr;
  --layout-grid-count: 2;
  --layout-footer-first-column: 1.3fr;
  --layout-breakpoint-compact: 720px;
  --layout-breakpoint-compact-entry: 721px;
  --layout-breakpoint-narrow: 280px;
  --layout-breakpoint-tablet: 1023px;
  --layout-breakpoint-tablet-entry: 767px;

  /* Borders, radius, stacking, and motion */
  --border-thin: 1px;
  --border-focus: 2px;
  --radius-circle: 50%;
  --z-skip-link: 1;
  --motion-duration-standard: .2s;
  --motion-duration-reduced: .01ms;
  --motion-easing-standard: ease;
  --motion-hidden-offset: -160%;
  --flex-none: 0 0 auto;
  --grid-baseline: baseline;
  --grid-column-full: 1 / -1;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: var(--space-none); background: var(--color-paper); color: var(--color-ink); font-family: var(--font-sans); font-size: var(--font-size-body); line-height: var(--line-height-body); }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); text-wrap: balance; }
h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; word-break: normal; }
p, li, blockquote { overflow-wrap: anywhere; }
p, li, blockquote { text-wrap: pretty; }
a { color: inherit; text-decoration: var(--text-decoration-none); }
strong { font-weight: var(--font-weight-strong); }
a:focus-visible { outline: var(--border-focus) solid var(--color-ink); outline-offset: var(--space-4); }
.skip-link { position: absolute; top: var(--space-5); left: var(--space-5); z-index: var(--z-skip-link); min-height: var(--layout-touch-target); display: inline-flex; align-items: center; padding: var(--space-6) var(--space-9); background: var(--color-ink); color: var(--color-paper); transform: translateY(var(--motion-hidden-offset)); }
.skip-link:focus { transform: translateY(var(--space-none)); }

.site-header, main, .site-footer { max-width: var(--layout-content-max); margin: var(--space-none) auto; padding-left: var(--space-23); padding-right: var(--space-23); }
.site-header { height: var(--layout-header-height); display: flex; justify-content: space-between; align-items: center; border-bottom: var(--border-thin) solid var(--color-line); }
.wordmark { min-height: var(--layout-touch-target); display: inline-flex; align-items: center; font-family: var(--font-display); font-size: var(--font-size-brand); font-weight: var(--font-weight-wordmark); letter-spacing: var(--letter-spacing-wordmark); }
.wordmark span { font-size: var(--font-size-brand-mark); }
.site-header nav { display: flex; align-items: center; gap: var(--space-19); font-size: var(--font-size-nav); letter-spacing: var(--letter-spacing-nav); }
.site-header nav a { min-height: var(--layout-touch-target); display: inline-flex; align-items: center; color: var(--color-muted); transition: color var(--motion-duration-standard) var(--motion-easing-standard); }
.site-header nav a:hover, .site-header nav a.is-active { color: var(--color-ink); }

.hero { padding: var(--space-49) var(--space-none) var(--space-45); min-height: var(--layout-hero-min-height); display: flex; flex-direction: column; justify-content: space-between; border-bottom: var(--border-thin) solid var(--color-line); }
.eyebrow { margin: var(--space-none); font-family: var(--font-sans); font-size: var(--font-size-label); line-height: var(--line-height-label); font-weight: var(--font-weight-regular); text-transform: var(--text-transform-uppercase); letter-spacing: var(--letter-spacing-label); }
.hero h1, .simple-page h1 { max-width: var(--layout-hero-title-max); margin: var(--space-33) var(--space-none) var(--space-none); font-size: clamp(var(--font-size-display-mobile), var(--font-size-hero-fluid), var(--font-size-hero-max)); line-height: var(--line-height-display); font-weight: var(--font-weight-display); letter-spacing: var(--letter-spacing-display); }
.hero h1 em, .simple-page h1 em { color: var(--color-muted); font-style: var(--font-style-normal); }
.simple-page h1 em { display: block; margin-top: var(--space-9); }
.hero-bottom { display: flex; justify-content: space-between; align-items: end; gap: var(--space-27); }
.hero-bottom p { max-width: var(--layout-hero-copy-max); margin: var(--space-none); font-size: var(--font-size-reading); line-height: var(--line-height-reading); letter-spacing: var(--letter-spacing-reading); }
.circle-link { width: var(--layout-circle-link); height: var(--layout-circle-link); display: grid; place-items: center; border: var(--border-thin) solid var(--color-ink); border-radius: var(--radius-circle); font-size: var(--font-size-subheading); transition: background var(--motion-duration-standard) var(--motion-easing-standard), color var(--motion-duration-standard) var(--motion-easing-standard); }
.circle-link:hover { background: var(--color-ink); color: var(--color-paper); }

.manifesto { display: grid; grid-template-columns: var(--layout-grid-one) var(--layout-grid-two); gap: var(--space-27); padding: var(--space-47) var(--space-none) var(--space-49); border-bottom: var(--border-thin) solid var(--color-line); }
.manifesto > .eyebrow { align-self: start; }
.manifesto-copy { max-width: var(--layout-manifesto-copy-max); margin: var(--space-negative-5) var(--space-none) var(--space-none); font-family: var(--font-display); font-size: clamp(var(--font-size-feature), var(--font-size-manifesto-fluid), var(--font-size-manifesto-max)); line-height: var(--line-height-manifesto); letter-spacing: var(--letter-spacing-manifesto); }
.notes-section { padding: var(--space-46) var(--space-none) var(--space-51); }
.section-heading { display: flex; justify-content: space-between; align-items: var(--grid-baseline); padding-bottom: var(--space-12); border-bottom: var(--border-thin) solid var(--color-line); }
.section-heading span { font-size: var(--font-size-meta); color: var(--color-muted); font-variant-numeric: var(--font-variant-tabular); }
.article-grid { display: grid; grid-template-columns: repeat(var(--layout-grid-count), var(--layout-grid-one)); gap: var(--space-none) var(--space-21); }
.article-card { position: relative; min-height: var(--layout-card-min-height); padding: var(--space-18) var(--space-none) var(--space-25); border-bottom: var(--border-thin) solid var(--color-line); }
.article-card__meta { display: flex; justify-content: space-between; gap: var(--space-9); margin-bottom: var(--space-34); font-size: var(--font-size-label); text-transform: var(--text-transform-uppercase); letter-spacing: var(--letter-spacing-meta); color: var(--color-muted); font-variant-numeric: var(--font-variant-tabular); }
.article-card__meta span { min-width: var(--space-none); overflow-wrap: anywhere; }
.article-card__meta span:last-child { text-align: end; }
.article-card__date { white-space: nowrap; }
.article-card h3 { max-width: var(--layout-card-title-max); margin: var(--space-none) var(--space-none) var(--space-8); font-size: clamp(var(--font-size-section), var(--font-size-card-fluid), var(--font-size-card-max)); line-height: var(--line-height-card-heading); font-weight: var(--font-weight-display); letter-spacing: var(--letter-spacing-card-heading); }
.article-card h3 a { min-height: var(--layout-touch-target); display: inline-flex; align-items: center; }
.article-card h3 a::after { content: ''; position: absolute; top: var(--space-none); right: var(--space-none); bottom: var(--space-none); left: var(--space-none); }
.article-card h3 a:hover { color: var(--color-muted); }
.article-card p { max-width: var(--layout-card-copy-max); margin: var(--space-none); font-size: var(--font-size-compact); line-height: var(--line-height-reading); color: var(--color-muted); }
.text-link, .article-card__cta { min-height: var(--layout-touch-target); display: inline-flex; align-items: center; margin-top: var(--space-19); border-bottom: var(--border-thin) solid var(--color-ink); padding-bottom: var(--space-1); font-size: var(--font-size-meta); }
.text-link span, .article-card__cta span { margin-left: var(--space-4); }
.draft-label { position: absolute; right: var(--space-none); bottom: var(--space-26); font-size: var(--font-size-label); text-transform: var(--text-transform-uppercase); letter-spacing: var(--letter-spacing-draft); }

.newsletter { display: grid; grid-template-columns: repeat(var(--layout-grid-count), var(--layout-grid-one)); gap: var(--space-31); padding: var(--space-40) var(--space-none) var(--space-45); border-top: var(--border-thin) solid var(--color-line); }
.newsletter h2 { margin: var(--space-19) var(--space-none) var(--space-none); font-size: clamp(var(--font-size-newsletter-min), var(--font-size-newsletter-fluid), var(--font-size-newsletter-max)); line-height: var(--line-height-display); font-weight: var(--font-weight-display); letter-spacing: var(--letter-spacing-newsletter); }
.newsletter-status { align-self: end; max-width: var(--layout-newsletter-copy-max); padding-bottom: var(--space-2); }
.newsletter-status p { margin: var(--space-none); font-size: var(--font-size-reading); line-height: var(--line-height-reading); letter-spacing: var(--letter-spacing-reading); }
.empty-state { grid-column: var(--grid-column-full); max-width: var(--layout-empty-state-max); margin: var(--space-23) var(--space-none) var(--space-none); }
.empty-state p:not(.eyebrow) { margin: var(--space-9) var(--space-none) var(--space-none); font-size: var(--font-size-reading); line-height: var(--line-height-reading); color: var(--color-muted); }
.empty-state .text-link { margin-top: var(--space-14); }

.site-footer { display: grid; grid-template-columns: var(--layout-footer-first-column) var(--layout-grid-one) var(--layout-grid-one); gap: var(--space-20); padding-top: var(--space-20); padding-bottom: var(--space-22); border-top: var(--border-thin) solid var(--color-line); }
.site-footer p { max-width: var(--layout-footer-copy-max); margin: var(--space-11) var(--space-none) var(--space-none); font-size: var(--font-size-meta); line-height: var(--line-height-reading); color: var(--color-muted); }
.footer-links, .footer-meta { display: flex; flex-direction: column; gap: var(--space-2); font-size: var(--font-size-meta); }
.footer-links a { min-height: var(--layout-touch-target); display: inline-flex; align-items: center; }
.footer-meta { align-items: end; color: var(--color-muted); font-variant-numeric: var(--font-variant-tabular); }

.article-page { padding: var(--space-37) var(--space-none) var(--space-51); }
.article-intro { max-width: var(--layout-article-intro-max); padding-bottom: var(--space-42); }
.back-link { min-height: var(--layout-touch-target); display: inline-flex; align-items: center; margin-bottom: var(--space-44); font-size: var(--font-size-meta); color: var(--color-muted); }
.article-intro h1, .article-intro h2 { margin: var(--space-24) var(--space-none) var(--space-17); font-size: clamp(var(--font-size-display-mobile), var(--font-size-article-fluid), var(--font-size-article-max)); line-height: var(--line-height-display-article); font-weight: var(--font-weight-display); letter-spacing: var(--letter-spacing-display); }
.article-dek { max-width: var(--layout-article-dek-max); margin: var(--space-none); font-size: clamp(var(--font-size-dek-min), var(--font-size-dek-fluid), var(--font-size-dek-max)); line-height: var(--line-height-dek); letter-spacing: var(--letter-spacing-article-dek); }
.article-date { display: block; margin: var(--space-27) var(--space-none) var(--space-none); font-size: var(--font-size-meta); color: var(--color-muted); font-variant-numeric: var(--font-variant-tabular); }
.article-outline { display: block; max-width: var(--layout-article-content-max); margin: var(--space-none) var(--space-none) var(--space-37) min(var(--layout-copy-offset), calc(var(--layout-full-width) - var(--layout-article-content-max))); padding: var(--space-17) var(--space-none); border-top: var(--border-thin) solid var(--color-line); border-bottom: var(--border-thin) solid var(--color-line); }
.article-outline ol { display: grid; grid-template-columns: repeat(var(--layout-grid-count), var(--layout-grid-one)); gap: var(--space-none) var(--space-21); margin: var(--space-9) var(--space-none) var(--space-none); padding-left: var(--space-17); }
.article-outline li { padding-right: var(--space-9); font-size: var(--font-size-compact); line-height: var(--line-height-reading); }
.article-outline a { min-height: var(--layout-touch-target); display: inline-flex; align-items: center; color: var(--color-muted); text-decoration: var(--text-decoration-underline); text-decoration-thickness: var(--border-thin); text-underline-offset: var(--letter-offset-link); transition: color var(--motion-duration-standard) var(--motion-easing-standard); }
.article-outline a:hover { color: var(--color-ink); }
.article-content, .article-end { max-width: var(--layout-article-content-max); margin-left: min(var(--layout-copy-offset), calc(var(--layout-full-width) - var(--layout-article-content-max))); }
.article-content h2 { margin: var(--space-38) var(--space-none) var(--space-10); font-size: var(--font-size-section); line-height: var(--line-height-heading); font-weight: var(--font-weight-display); letter-spacing: var(--letter-spacing-article-heading); }
.article-content h3 { margin: var(--space-32) var(--space-none) var(--space-9); font-size: var(--font-size-subheading); line-height: var(--line-height-heading); font-weight: var(--font-weight-display); }
.article-content h4, .article-content h5, .article-content h6 { margin: var(--space-27) var(--space-none) var(--space-7); font-family: var(--font-sans); line-height: var(--line-height-heading); font-weight: var(--font-weight-display); }
.article-content h4 { font-size: var(--font-size-reading); }
.article-content h5 { font-size: var(--font-size-body); }
.article-content h6 { font-size: var(--font-size-compact); letter-spacing: var(--letter-spacing-reading); }
.article-content p { margin: var(--space-none) var(--space-none) var(--space-15); font-size: var(--font-size-reading); line-height: var(--line-height-article-body); }
.article-content ul, .article-content ol { margin: var(--space-none) var(--space-none) var(--space-15); padding-left: var(--space-17); font-size: var(--font-size-reading); line-height: var(--line-height-article-body); }
.article-content li + li { margin-top: var(--space-5); }
.article-content blockquote { margin: var(--space-24) var(--space-none); padding-left: var(--space-13); border-left: var(--border-focus) solid var(--color-line); font-size: var(--font-size-subheading); line-height: var(--line-height-reading); font-style: var(--font-style-italic); }
.article-content pre { max-width: var(--layout-full-width); margin: var(--space-24) var(--space-none); overflow-x: auto; padding: var(--space-10); background: var(--color-code-surface); }
.article-content code { font-family: var(--font-mono); font-size: var(--font-size-code); }
.article-content a { text-decoration: var(--text-decoration-underline); text-decoration-thickness: var(--border-thin); text-underline-offset: var(--letter-offset-link); }
.article-content em { color: var(--color-muted); font-style: var(--font-style-italic); }
.article-end { margin-top: var(--space-45); margin-right: var(--space-none); margin-bottom: var(--space-none); padding-top: var(--space-17); border-top: var(--border-thin) solid var(--color-line); display: flex; justify-content: space-between; font-size: var(--font-size-meta); color: var(--color-muted); }
.article-end .text-link { margin: var(--space-none); color: var(--color-ink); }

.simple-page { padding: var(--space-51) var(--space-none) var(--space-52); border-bottom: var(--border-thin) solid var(--color-line); }
.simple-page h1 { max-width: var(--layout-simple-title-max); margin-top: var(--space-37); }
.simple-copy { max-width: var(--layout-simple-copy-max); margin: var(--space-48) var(--space-none) var(--space-none) var(--layout-copy-offset); }
.simple-copy p { margin: var(--space-none) var(--space-none) var(--space-16); font-size: var(--font-size-copy); line-height: var(--line-height-copy); letter-spacing: var(--letter-spacing-reading); }
.page-actions { display: flex; flex-wrap: wrap; gap: var(--space-9); margin-top: var(--space-19); }
.page-actions .text-link { margin-top: var(--space-none); }
.approach { padding: var(--space-45) var(--space-none) var(--space-50); border-bottom: var(--border-thin) solid var(--color-line); }
.approach-grid { display: grid; grid-template-columns: repeat(var(--layout-grid-count), var(--layout-grid-one)); gap: var(--space-none) var(--space-21); margin-top: var(--space-35); }
.approach-grid > div { padding: var(--space-17) var(--space-none) var(--space-21); border-top: var(--border-thin) solid var(--color-line); }
.approach-grid span { font-size: var(--font-size-label); color: var(--color-muted); }
.approach-grid h3 { margin: var(--space-24) var(--space-none) var(--space-6); font-size: var(--font-size-feature); line-height: var(--line-height-display); font-weight: var(--font-weight-display); letter-spacing: var(--letter-spacing-approach-heading); }
.approach-grid p { max-width: var(--layout-approach-copy-max); margin: var(--space-none); font-size: var(--font-size-supporting); line-height: var(--line-height-copy); color: var(--color-muted); }

/* Native media queries cannot consume custom properties. These literals mirror the breakpoint tokens above. */
@media (max-width: 720px) {
  .site-header, main, .site-footer { padding-left: var(--space-13); padding-right: var(--space-13); }
  .site-header { height: auto; min-height: var(--layout-header-height-compact); flex-wrap: wrap; gap: var(--space-5); padding-top: var(--space-7); padding-bottom: var(--space-7); }
  .site-header nav { gap: var(--space-9); }
  .hero { min-height: var(--layout-hero-min-height-compact); padding: var(--space-37) var(--space-none) var(--space-35); }
  .hero h1 { margin-top: var(--space-37); font-size: var(--font-size-display-mobile); }
  .simple-page h1 { margin-top: var(--space-37); font-size: var(--font-size-simple-mobile); }
  .hero-bottom { align-items: start; }
  .hero-bottom p { font-size: var(--font-size-compact); }
  .circle-link { flex: var(--flex-none); }
  .manifesto, .newsletter { grid-template-columns: var(--layout-grid-one); gap: var(--space-28); padding-top: var(--space-37); padding-bottom: var(--space-39); }
  .manifesto-copy { margin-top: var(--space-none); font-size: var(--font-size-manifesto-compact); }
  .notes-section { padding: var(--space-37) var(--space-none) var(--space-40); }
  .article-grid { grid-template-columns: var(--layout-grid-one); }
  .article-card { min-height: var(--layout-card-min-height-compact); }
  .article-card__meta { margin-bottom: var(--space-29); }
  .draft-label { bottom: var(--space-26); }
  .site-footer { grid-template-columns: var(--layout-grid-one) var(--layout-grid-one); }
  .footer-meta { grid-column: var(--grid-column-full); align-items: start; flex-direction: row; justify-content: space-between; }
  .article-page { padding-top: var(--space-31); }
  .back-link { margin-bottom: var(--space-35); }
  .article-intro { padding-bottom: var(--space-36); }
  .article-intro h1, .article-intro h2 { font-size: var(--font-size-display-mobile); }
  .article-outline, .article-content, .article-end, .simple-copy { margin-left: var(--space-none); }
  .article-outline ol { grid-template-columns: var(--layout-grid-one); }
  .simple-page { padding-top: var(--space-39); padding-bottom: var(--space-42); }
  .simple-copy { margin-top: var(--space-37); }
  .approach { padding-top: var(--space-37); padding-bottom: var(--space-39); }
  .approach-grid { grid-template-columns: var(--layout-grid-one); margin-top: var(--space-29); }
}

@media (max-width: 280px) {
  .site-header { height: auto; min-height: var(--layout-header-height-compact); flex-direction: column; align-items: flex-start; justify-content: center; gap: var(--space-5); padding-top: var(--space-7); padding-bottom: var(--space-7); }
  .wordmark { font-size: var(--font-size-brand-compact); }
  .wordmark span { font-size: var(--font-size-brand-mark-compact); }
  .site-header nav { max-width: var(--layout-full-width); flex-wrap: wrap; gap: var(--space-3); font-size: var(--font-size-nav-compact); }
  .article-card__meta { flex-wrap: wrap; }
  .article-card__meta .article-card__date:last-child { width: var(--layout-full-width); text-align: start; }
  .hero h1, .article-intro h1, .article-intro h2 { font-size: var(--font-size-display-smallest); }
  .simple-page h1 { font-size: var(--font-size-simple-smallest); }
}

@media (min-width: 721px) and (max-width: 1023px) {
  .hero h1, .simple-page h1 { font-size: clamp(var(--font-size-display-mobile), var(--font-size-display-tablet-fluid), var(--font-size-hero-max)); }
  .article-intro h1, .article-intro h2 { font-size: clamp(var(--font-size-display-mobile), var(--font-size-article-tablet-fluid), var(--font-size-article-max)); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: var(--motion-duration-reduced) !important;
    animation-iteration-count: var(--iteration-count-once) !important;
    scroll-behavior: auto !important;
    transition-duration: var(--motion-duration-reduced) !important;
  }
}