@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Stencil+Display:wght@700;800&family=Archivo:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500;600&display=swap');

:root {
  color-scheme: light;
  --ink: #14140F;
  --paper: #F1EEE6;
  --concrete: #B9B4A8;
  --concrete-dark: #7C776C;
  --steel: #4A4E52;
  --signal: #E4341C;
  --font-display: 'Big Shoulders Stencil Display', Impact, sans-serif;
  --font-body: 'Archivo', Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', Consolas, monospace;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-heavy: 800;
  --text-xs: clamp(.6875rem, .65rem + .16vw, .8125rem);
  --text-sm: clamp(.8125rem, .77rem + .2vw, .9375rem);
  --text-base: clamp(1rem, .97rem + .15vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1rem + .5vw, 1.5rem);
  --text-xl: clamp(1.375rem, 1.1rem + 1vw, 2rem);
  --text-2xl: clamp(1.75rem, 1.25rem + 2vw, 3rem);
  --text-3xl: clamp(2.25rem, 1.4rem + 3.6vw, 4.75rem);
  --text-4xl: clamp(2.875rem, 1.5rem + 5.7vw, 7rem);
  --text-hero: clamp(3.5rem, 1.7rem + 8.5vw, 9.5rem);
  --line-body: 1.65;
  --line-heading: .97;
  --line-meta: 1.5;
  --tracking-display: -.025em;
  --tracking-meta: .075em;
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.75rem;
  --space-8: 3.5rem;
  --space-9: 4.5rem;
  --space-10: 6rem;
  --space-11: 8rem;
  --space-12: 9.25rem;
  --gutter: clamp(20px, 5vw, 64px);
  --shell: 1240px;
  --reading: 68ch;
  --section-space: clamp(64px, 10vw, 148px);
  --rule: 4px;
  --hairline: 1px;
  --radius: 0;
  --target: 44px;
  --focus-width: 2px;
  --focus-offset: 5px;
  --header-height: 88px;
  --cookie-height: 0px;
  --layer-header: 30;
  --layer-preview: 40;
  --layer-chat: 60;
  --layer-consent: 70;
  --layer-dialog: 80;
  --duration-instant: 80ms;
  --duration-fast: 160ms;
  --duration-control: 240ms;
  --duration-panel: 360ms;
  --duration-scene: 760ms;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-spring: cubic-bezier(.16, 1.25, .45, 1);
  --magnet-limit: 5px;
  --stamp-turn: -9deg;
  --surface: var(--paper);
  --foreground: var(--ink);
}

*, *::before, *::after { box-sizing: border-box; }
html { margin: 0; padding: 0; font-size: 100%; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 6rem; }
body { margin: 0; min-width: 320px; background: var(--paper); color: var(--ink); font-family: var(--font-body); font-size: var(--text-base); font-weight: 400; line-height: var(--line-body); -webkit-font-smoothing: antialiased; }
main { display: block; }
main:focus { outline: none; }
h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
h1, h2, h3, h4, h5, h6 { color: inherit; font-family: var(--font-display); font-weight: 800; line-height: var(--line-heading); letter-spacing: var(--tracking-display); overflow-wrap: anywhere; text-wrap: balance; }
h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); line-height: 1.1; }
h5, h6 { font-family: var(--font-body); font-size: var(--text-base); font-weight: 700; line-height: 1.4; letter-spacing: 0; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .23em; overflow-wrap: anywhere; }
a:hover { text-decoration-thickness: 2px; }
button, input, select, textarea { font: inherit; color: inherit; border-radius: 0; }
button, input, select { min-height: var(--target); }
button { cursor: pointer; }
button, [type='button'], [type='submit'], [type='reset'] { -webkit-appearance: none; appearance: none; }
button, a, summary, label, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button:disabled, input:disabled, select:disabled { cursor: not-allowed; }
input, select, textarea { max-width: 100%; min-width: 0; }
textarea { resize: vertical; }
fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
legend { padding: 0; max-width: 100%; }
ul, ol { margin: 0; padding-inline-start: 1.4em; }
li { padding-inline-start: .15em; }
img, picture, video, canvas, iframe { display: block; max-width: 100%; }
img, video { height: auto; }
svg { max-width: 100%; }
img { font-size: var(--text-sm); line-height: 1.4; }
figure { min-width: 0; }
figcaption { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 500; line-height: 1.6; padding-block: .875rem; overflow-wrap: anywhere; }
hr { margin: var(--space-6) 0; border: 0; border-top: var(--rule) solid currentColor; }
address { font-style: normal; overflow-wrap: anywhere; }
strong, b { font-weight: 700; }
small { font-size: var(--text-sm); }
sub, sup { font-size: .75em; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -.45em; }
sub { bottom: -.2em; }
pre, code, kbd, samp { font-family: var(--font-mono); font-size: .88em; }
code { overflow-wrap: anywhere; }
pre { max-width: 100%; overflow: auto; padding: 1.25rem; border: 1px solid var(--steel); white-space: pre; }
table { border-collapse: collapse; width: 100%; text-align: left; }
caption { text-align: left; }
th { font-weight: 600; }
summary { cursor: pointer; }
[hidden] { display: none !important; }
[disabled] { opacity: .65; }
::selection { background: var(--signal); color: var(--ink); }
:focus-visible { outline: var(--focus-width) solid var(--signal); outline-offset: var(--focus-offset); }
:target { scroll-margin-top: 7rem; }

.shell, .container { width: min(var(--shell), calc(100% - var(--gutter) * 2)); margin-inline: auto; }
.block { padding-block: var(--section-space); border-bottom: var(--rule) solid var(--ink); background: var(--surface); color: var(--foreground); }
.block--ink, .theme-ink { --surface: var(--ink); --foreground: var(--paper); background: var(--ink); color: var(--paper); }
.block--paper, .theme-paper { --surface: var(--paper); --foreground: var(--ink); background: var(--paper); color: var(--ink); }
.block--concrete, .theme-concrete { --surface: var(--concrete); --foreground: var(--ink); background: var(--concrete); color: var(--ink); }
.block--signal, .theme-signal { --surface: var(--signal); --foreground: var(--ink); background: var(--signal); color: var(--ink); }
.stack { display: flex; flex-direction: column; gap: var(--stack-gap, var(--space-5)); }
.stack > *, .cluster > *, .split > *, .grid > * { min-width: 0; }
.cluster { display: flex; align-items: center; flex-wrap: wrap; gap: var(--cluster-gap, var(--space-4)); }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); }
.grid { display: grid; gap: var(--grid-gap, var(--space-6)); }
.grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.flow > * + * { margin-block-start: var(--flow-space, 1.25rem); }
.reading-width { max-width: var(--reading); }
.align-start { align-items: start; }
.align-end { align-items: end; }
.text-balance { text-wrap: balance; }
.text-small { font-size: var(--text-sm); }
.text-muted { color: var(--steel); }
.theme-ink .text-muted, .block--ink .text-muted { color: var(--concrete); }
.eyebrow, .meta, .section-label { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 500; letter-spacing: var(--tracking-meta); line-height: var(--line-meta); text-transform: uppercase; overflow-wrap: anywhere; }
.lead { font-size: var(--text-lg); line-height: 1.45; max-width: 49ch; }
.display { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: var(--tracking-display); line-height: var(--line-heading); }
.rule-top { border-top: var(--rule) solid currentColor; }
.rule-bottom { border-bottom: var(--rule) solid currentColor; }
.prose { max-width: var(--reading); overflow-wrap: anywhere; }
.prose > * + * { margin-top: 1.35em; }
.prose h2 { font-size: var(--text-2xl); margin-top: 1.7em; }
.prose h3 { font-family: var(--font-body); font-size: var(--text-lg); font-weight: 700; letter-spacing: -.02em; line-height: 1.3; margin-top: 1.6em; }
.prose h2 + *, .prose h3 + * { margin-top: .8em; }
.prose li + li { margin-top: .6em; }
.prose li::marker { color: var(--signal); }
.prose blockquote { border-left: var(--rule) solid var(--signal); padding: .5rem 0 .5rem 1.5rem; font-size: var(--text-lg); }
.prose a { font-weight: 600; }
.prose dt { font-weight: 700; margin-top: 1.1em; }
.prose dd { margin-top: .4em; }
.prose .button { margin-top: 1.5rem; }
.sr-only, .visually-hidden, .honeypot { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
.table-scroll { overflow-x: auto; max-width: 100%; overscroll-behavior-inline: contain; }
.table-scroll:focus-visible { outline-offset: -2px; }
.hazard-rule { display: block; min-height: 12px; background: repeating-linear-gradient(135deg, var(--ink) 0, var(--ink) 12px, var(--signal) 12px, var(--signal) 24px); }
.no-scroll { overflow: hidden; }

@media (min-width: 1600px) { :root { --header-height: 96px; } }
@media (max-width: 767px) {
  .split, .grid--three, .grid--four { grid-template-columns: minmax(0, 1fr); }
  .grid--two { gap: var(--space-5); }
  .prose { max-width: 100%; }
  .block { padding-block: clamp(3.5rem, 12vw, 5rem); }
}
@media (max-width: 413px) {
  .grid--two { grid-template-columns: minmax(0, 1fr); }
  :root { --focus-offset: 3px; }
  .cluster { gap: .75rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  html { scroll-behavior: auto; }
  [data-magnetic], .stamp, [data-stamp] { transform: none !important; }
  .hover-preview { display: none !important; }
}
@media (forced-colors: active) {
  :focus-visible { outline: 3px solid Highlight; }
  .hazard-rule { background: CanvasText; }
  button, input, select, textarea { border: 1px solid ButtonText; }
  .theme-ink, .block--ink { background: Canvas; color: CanvasText; }
}
@media print {
  :root { --gutter: 0px; --section-space: 1.5rem; }
  html, body { background: white !important; color: black !important; font-size: 11pt; }
  .shell, .container { width: 100%; max-width: none; }
  .block, .theme-ink, .block--ink, .theme-signal { background: white !important; color: black !important; }
  a { text-decoration: underline; }
  h1 { font-size: 36pt; }
  h2 { font-size: 24pt; }
  h3 { font-size: 18pt; }
  h1, h2, h3, summary { break-after: avoid; }
  figure, tr, blockquote { break-inside: avoid; }
  img { max-height: 90mm; width: auto; }
  .no-print { display: none !important; }
}
