/* @component fonts — self-hosted, latin subset only. These are the exact woff2 files Google Fonts served for this page. */

@font-face {
  font-family: "Inter Tight";
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
  src: url("fonts/inter-tight-var.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;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("fonts/inter-var.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;
}

@font-face {
  font-family: "DM Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/dm-mono-400.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;
}

@font-face {
  font-family: "DM Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/dm-mono-500.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;
}

/* Site design tokens and component styles. Each component's rules follow its @component comment. style-gates: data */

/* @component foundations */

:root {
  color-scheme: light dark;

  --text-primary: light-dark(#1d1d1f, #f5f5f7);         /* body text */
  --text-secondary: light-dark(#636366, #a1a1a6);       /* supporting grey text */
  --text-tertiary: light-dark(#1d1d1f4d, #f5f5f74d);    /* hollow dots, faint marks; never body text */
  --text-primary-on: light-dark(#f5f5f7, #1d1d1f);      /* text on --fill-primary */
  --text-secondary-on: light-dark(#aeaeb2, #5c5c60);    /* grey text on --fill-primary */
  --fill-primary: light-dark(#1d1d1f, #f5f5f7);         /* the strong fill: solid chips, the nav, the badge */
  --fill-primary-on: light-dark(#f5f5f7, #1d1d1f);      /* the page background */
  --fill-secondary: light-dark(#1d1d1f80, #f5f5f780);
  --fill-tertiary: light-dark(#e8e8ea, #2a2a2d);        /* the grey card, panel and row tint */
  --fill-segment: light-dark(#3a3a3c, #e2e2e4);         /* the nav's tab track */
  --fill-system-green: #00a665;                         /* status: done, ready */
  --fill-system-orange: #ff4d00;                        /* status: now, current */
  --fill-system-red: light-dark(#da2f35, #f1555b);      /* status: blocked, error */
  --transparent-primary: light-dark(#1d1d1f4d, #f5f5f74d);
  --stroke-primary: light-dark(#1d1d1f24, #f5f5f724);   /* strong hairline */
  --stroke-secondary: light-dark(#1d1d1f12, #f5f5f712); /* faint hairline between rows */
  --stroke-primary-on: light-dark(#f5f5f71a, #1d1d1f1a);
  --stroke-composer: light-dark(#f5f5f780, #1d1d1f80);  /* the callout's glass edge */
  --stroke-system-orange: #ff4d0026;
  --hover-wash: light-dark(#1d1d1f0d, #f5f5f70d);
  --hover-wash-primary-on: light-dark(#f9f9fa26, #1d1d1f14);

  /* The hero is light text over a dark photo in both themes. */
  --hero-surface: #161f39;
  --hero-text: #f5f5f7;
  --hero-text-muted: #f5f5f7cc;
  --hero-scrim-strong: rgb(22 31 57 / 0.78);
  --hero-scrim-soft: rgb(22 31 57 / 0.3);
  --hero-scrim-side: rgb(22 31 57 / 0.45);
  --hero-glass: rgb(22 31 57 / 0.42);
  --hero-glass-faint: rgb(22 31 57 / 0.35);
  --hero-glass-stroke: rgb(245 245 247 / 0.28);

  --mat-regular: light-dark(rgb(255 255 255 / 0.56), rgb(29 29 31 / 0.55));
  --mat-thin: light-dark(rgb(255 255 255 / 0.22), rgb(29 29 31 / 0.4));
  --mat-agent: light-dark(rgb(255 255 255 / 0.84), rgb(29 29 31 / 0.66));
  --mat-inverse: color-mix(in srgb, var(--fill-primary) 86%, transparent);  /* the nav: dark on light, light on dark */
  --site-blur: blur(50px) saturate(1.6);
  --site-shadow: 0 8px 40px #1d1d1f1f;

  --sans: "GT Standard", "GT Standard L", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  --lh: 1.3;                                            /* every text style is 130% */
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-bold: 600;
  --size-caption: 12px;                                 /* the smallest text allowed */
  --size-meta: 13px;
  --size-small: 14px;
  --size-body: 15px;
  --size-prose: 16px;
  --size-heading: 20px;
  --size-figure: clamp(24px, 3vw, 32px);
  --size-title: clamp(26px, 3vw, 32px);
  --size-display: clamp(34px, 5vw, 48px);
  --size-lede: clamp(16px, 1.7vw, 20px);

  --type-caption: var(--weight-regular) var(--size-caption)/var(--lh) var(--sans);
  --type-tag: var(--weight-medium) var(--size-caption)/var(--lh) var(--sans);
  --type-small: var(--weight-regular) var(--size-small)/var(--lh) var(--sans);
  --type-label: var(--weight-medium) var(--size-small)/var(--lh) var(--sans);
  --type-body: var(--weight-regular) var(--size-body)/var(--lh) var(--sans);
  --type-body-strong: var(--weight-medium) var(--size-body)/var(--lh) var(--sans);
  --type-heading: var(--weight-medium) var(--size-heading)/var(--lh) var(--sans);
  --type-lede: var(--weight-medium) var(--size-lede)/var(--lh) var(--sans);
  --type-figure: var(--weight-regular) var(--size-figure)/var(--lh) var(--sans);
  --type-title: var(--weight-regular) var(--size-title)/var(--lh) var(--sans);
  --type-display: var(--weight-medium) var(--size-display)/var(--lh) var(--sans);
  --type-numeral: var(--weight-regular) 48px/1 var(--sans);

  --r-s: 12px;
  --r-m: 16px;
  --r-l: 24px;
  --r-xl: 32px;
  --r-pill: 100px;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --dur-quick: 160ms;
  --dur-draw: 1400ms;

  --page-max: 1120px;
  --gutter: clamp(16px, 3vw, 32px);                     /* the page's side padding */
  --tap: 44px;                                          /* the smallest touch target */
}

:root[data-theme="light"] { color-scheme: light; }

:root[data-theme="dark"] { color-scheme: dark; }

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--fill-primary-on);
  color: var(--text-primary);
  font: var(--type-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }

figure { margin-inline: 0; }

a { color: inherit; }

b, strong { font-weight: var(--weight-bold); }

p { margin: 0; text-wrap: pretty; }

h1, h2, h3 { margin: 0; text-wrap: balance; }

small { font-size: max(var(--size-caption), 0.85em); }

.sub { color: var(--text-secondary); }

:focus-visible { outline: 2px solid var(--fill-primary); outline-offset: 3px; border-radius: 6px; }

/* @component page */

.page {
  max-width: var(--page-max);
  margin: 0 auto;
  padding-inline: var(--gutter);
  padding-block: 12px 40px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

.main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; min-width: 0; }

/* @component table */

table { width: 100%; border-collapse: collapse; font: var(--type-small); font-variant-numeric: tabular-nums; }

caption { text-align: left; font: var(--type-caption); color: var(--text-secondary); padding: 0 0 10px; }

th, td { text-align: left; vertical-align: top; padding: 12px; border-bottom: 1px solid var(--stroke-secondary); }

th:first-child, td:first-child { padding-left: 0; }

th:last-child, td:last-child { padding-right: 0; }

thead th {
  font: var(--type-tag);
  color: var(--text-secondary);
  border-bottom-color: var(--stroke-primary);
  padding-top: 0;
  padding-bottom: 8px;
  white-space: nowrap;
}

tbody th { font-weight: var(--weight-bold); }

tbody tr:last-child > * { border-bottom: 0; }

td small, th small { display: block; font: var(--type-caption); color: var(--text-secondary); margin-top: 2px; }

/* @component figure */

.is-portrait img { width: auto; max-width: 100%; height: clamp(320px, 48vw, 560px); }

/* @media print: paper-safe output. Overrides live only here; screen styling is unchanged. */

@media print {
  .x-bar { display: none !important; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .x-reveal { transform: none !important; opacity: 1 !important; }
  .x-js .x-story .x-stage { transform: none !important; opacity: 1 !important; }
  .x-story.is-pinned { height: auto !important; }
  .x-story.is-pinned .x-story__pin { position: static !important; height: auto !important; }
  .x-stages__list, .x-stage { break-inside: avoid; page-break-inside: avoid; }
  html, body, .x-dark, .x-light, .x-off, .x-sec, .x-hero { background: #ffffff !important; }
  .x-dark, .x-light, .x-off { --x-bg: #ffffff !important; --x-stone: #ffffff !important; --x-ink: #000000 !important; --x-ink-2: #000000 !important; --x-line: #cccccc !important; }
  .x-page, .x-page * { color: #000000 !important; }
  .x-hero h1, .x-hero h1 em, .x-hero .x-kicker, .x-hero__line { color: #000000 !important; }
  .x-hero::before { display: none !important; }
  .x-hero { min-height: auto !important; height: auto !important; }
}