/* generated by tools/articles/sync.mjs from tools/articles/runtime/article.css: do not edit */
/* ==========================================================================
   ottmar.work articles: the blend ("template": "v2"; also the /blog archive)
   The "80%": one calm centred column of serif text, Space Grotesk headings, Inter for everything that is
   interface (kicker, badges, captions, notes, citation markers, sources). A few devices, used when called for:
   the stepped-window hero with the title in its notch, a full-bleed section break, figures at four widths,
   a typographic video poster, a hairline ledger, a standout question, hanging numerals, the end mark.
   Namespace xa- (the article chassis), xc (citation markers); the enhanced "20%" components (xf- feature,
   xv- charts, xp- pockets) plug into the same grid lines. Window geometry (masks, title size and place) is
   generated per article into the page's own stylesheet (<slug>/page.css).
   ========================================================================== */

:root {
  /* palette (site tokens) */
  --black: #1a1814;
  --ink-2: #4a463d;          /* captions, notes: 8.6:1 on cream */
  --white: #f5ede0;          /* cream ground */
  --face: #f7f0e6;           /* the tiles' face */
  --gray: #6e6a60;           /* meta, credits, dek: 4.64:1 */
  --gray-light: #c8c2b8;     /* on ink only */
  --orange: #c8622a;         /* marks, rules, large type only: 3.45:1 */
  --orange-text: #a54f1d;    /* small orange text: 4.84:1 */
  --rule: rgba(90, 83, 69, 0.22);
  --rule-strong: rgba(90, 83, 69, 0.5);
  --panel: #ece3d3;          /* a feature panel, a code card: one step down from the ground */

  /* faces: display, interface, reading */
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-ui: 'Inter', system-ui, sans-serif;

  /* the reading voice: Newsreader (the owner's choice), with its tuning: size 19 -> 22 px, weight, line height,
     measure (in body-size ems: ~64 characters a line) */
  --serif: 'Newsreader', 'Newsreader fallback', Georgia, 'Times New Roman', serif;   /* fallback: Georgia scaled to its widths (/fonts/fonts-v2.css) */
  --fs-body: clamp(1.1875rem, 1.1179rem + 0.2857vw, 1.375rem);
  --wght: 430;
  --bold: 640;
  --lh: 1.5;
  --measure: 27.5;
  --dek-wght: 340;
  --dek-hero-wght: 380;
  --pull-wght: 380;
  --measure-len: calc(var(--measure) * var(--fs-body));

  --gutter: clamp(1.5rem, 3vw, 5rem);            /* the home grid's gutter */
  --nav-h: 3.5rem;
  --r-media: 12px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);         /* the site's one curve */

  --fs-label: 0.75rem;
  --fs-small: 0.875rem;
  --fs-caption: 0.8125rem;
  --fs-title: clamp(2.75rem, 1.4rem + 5vw, 5.5rem);          /* 44 -> 88: plain header */
  --fs-h2: clamp(1.625rem, 1.25rem + 1.2vw, 2.375rem);       /* 26 -> 38 */
  --fs-h3: clamp(1.25rem, 1.1rem + 0.45vw, 1.5rem);          /* 20 -> 24 */
  --fs-dek: clamp(1.375rem, 1.15rem + 0.75vw, 1.75rem);      /* 22 -> 28: plain header */
  --fs-dek-hero: clamp(1.375rem, 1rem + 1.4vw, 2.25rem);     /* 22 -> 36: under a 167 px title */
  --fs-h3n: clamp(1.5rem, 1.1rem + 1.1vw, 1.875rem);         /* 24 -> 30: the numbered sections (the five directions) */
  --fs-pull: clamp(1.625rem, 1.2rem + 1.35vw, 2.375rem);     /* 26 -> 38 */
  --fs-standout: clamp(1.75rem, 1.2rem + 1.8vw, 2.75rem);    /* 28 -> 44 */

  --flow: 1em;                                               /* between paragraphs */
  --space-block: clamp(2rem, 1.4rem + 2vw, 3.25rem);         /* figures, video, standout */
  --space-section: clamp(2.75rem, 2rem + 2.5vw, 4.25rem);    /* before an h2 */
}
/* ---------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, h3, h4, p, ol, ul, dl, dd, figure, blockquote { margin: 0; }

html {
  font-size: 100%;                               /* the reader's own size setting counts */
  scroll-padding-top: calc(var(--nav-h) + 1.25rem);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
@media (prefers-reduced-motion: no-preference) { html.xa-smooth { scroll-behavior: smooth; } }
body {
  background: var(--white);
  color: var(--black);
  font-family: var(--font-ui);
  font-synthesis: none;                          /* never a fake italic or bold */
  overflow-wrap: break-word;                     /* last resort: a word wider than its line breaks rather than widen
                                                    the page (200 % text on a phone; hyphens: auto has no dictionary
                                                    in every browser) */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, picture, svg, iframe { display: block; max-width: 100%; }
img { height: auto; }
::selection { background: rgba(200, 98, 42, 0.24); color: var(--black); }
:focus-visible { outline: 2px solid var(--black); outline-offset: 3px; border-radius: 2px; }

.xa-vh {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.xa-skip {
  position: absolute; left: var(--gutter); top: 0.6rem; z-index: 40;
  padding: 0.6rem 0.9rem; background: var(--black); color: var(--white);
  font: 500 var(--fs-label)/1 var(--font-ui); letter-spacing: 0.12em; text-transform: uppercase;
  text-decoration: none; transform: translateY(-300%);
}
.xa-skip:focus { transform: none; }

/* ---------------------------------------------------------------- nav (56 px) */
.xa-nav {
  position: sticky; top: 0; z-index: 30;
  height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0 var(--gutter);
  background: rgba(245, 237, 224, 0.92);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
/* two links in the site's quiet label style: home on the left, the archive ("Articles") on the right. The archive's
   own link is marked in ink with the links' orange underline (aria-current="page"). */
.xa-nav__home, .xa-nav__link {
  flex: none;
  font: 500 var(--fs-label)/1 var(--font-ui);
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gray); text-decoration: none;
  padding: 0.9rem 0;
  transition: color 0.3s ease;
}
.xa-nav__link { margin-right: -0.2em; }          /* the tracking after the last letter: the word ends on the gutter */
.xa-nav__home:hover, .xa-nav__link:hover { color: var(--black); }
.xa-nav__link[aria-current="page"] {
  color: var(--black);
  text-decoration: underline 1px var(--orange);
  text-underline-offset: 0.45em;
}
/* 200 % text on a phone: the two links no longer fit one row (about 31em of page at that size), so the nav takes two
   short rows instead of widening the page. The query is in em, which follows the reader's text size; at 100 % text it
   applies only below 304 px, where the two still fit one row and nothing changes but the links' padding. */
@media (max-width: 19em) {
  .xa-nav { height: auto; min-height: var(--nav-h); flex-wrap: wrap; align-content: center; column-gap: 1rem; padding-block: 0.25rem; }
  .xa-nav__home, .xa-nav__link { padding-block: 0.25rem; }
}

/* ==========================================================================
   THE GRID: one text axis, four widths
   full | wide | popout | content (the measure) | popout | wide | full
   ========================================================================== */
.xa { container: xa / inline-size; }
.xa-body, .xa-head--plain, .xa-noted, .xa-sources, .xa-arc {
  display: grid;
  grid-template-columns:
    [full-start] minmax(var(--gutter), 1fr)
    [wide-start] minmax(0, 13rem)
    [popout-start] minmax(0, 4rem)
    [content-start] min(var(--measure-len), 100% - 2 * var(--gutter)) [content-end]
    minmax(0, 4rem) [popout-end]
    minmax(0, 13rem) [wide-end]
    minmax(var(--gutter), 1fr) [full-end];
}
.xa-body > *, .xa-head--plain > *, .xa-noted > *, .xa-sources > *, .xa-arc > * { grid-column: content; min-width: 0; }

/* ---------------------------------------------------------------- header: kicker, badges, dek */
.xa-kicker {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 0.625rem 1rem;
  margin-bottom: clamp(1rem, 0.7rem + 1.1vw, 1.75rem);
}
.xa-meta {
  font: 500 var(--fs-label)/1.2 var(--font-ui);
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gray);
  font-variant-numeric: tabular-nums;
}
.xa-badges { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; padding: 0; }
.xa-badge {
  font: 500 0.6875rem/1 var(--font-ui);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gray);
  border: 1px solid currentColor; border-radius: 999px;
  padding: 6px 10px 5px;                         /* no nowrap: it wraps inside its pill only when it is wider than the
                                                    row (200 % text on a phone) instead of being cut off by the frame */
}
.xa-badge--temporary { color: var(--orange-text); }
/* Phones (under 640 px): the badges always take their own row under the date, a little tighter, so the kicker has
   the same number of lines in Inter and in the system font it shows until Inter arrives (a slow first visit). With
   the badges free to join the date's row, the row count changed on the swap at 592-616 px, and the pair broke onto
   two lines in Inter but not in Segoe UI at 360-368 px; the hero below moved (slow-font CLS 0.21 and 0.17). The pair
   is now about 301 px in Inter and 287 in Segoe UI: one line from a 360 px screen in either (10 px to spare in
   Inter), and one badge a line below 360 px in both. */
@media (max-width: 639.98px) {
  .xa-kicker > .xa-badges { flex-basis: 100%; }
  .xa-badge { letter-spacing: 0.1em; padding-inline: 8px; }
}
@media (max-width: 359.98px) {
  .xa-kicker > .xa-badges { flex-direction: column; align-items: flex-start; }
}

.xa-dek {
  font-family: var(--serif);
  font-size: var(--fs-dek);
  font-weight: var(--dek-wght);
  font-optical-sizing: auto;
  line-height: 1.3;
  color: var(--gray);
  text-wrap: balance;
}
.xa-dek em { font-style: italic; color: var(--black); }

/* plain header: text-only articles */
.xa-head--plain {
  font-size: var(--fs-body);                      /* the grid's column is measured in the body size */
  padding-top: clamp(2.5rem, 1.5rem + 4vw, 6rem);
  padding-bottom: clamp(2.25rem, 1.5rem + 2.5vw, 3.75rem);
}
.xa-head--plain > .xa-title {
  grid-column: content-start / wide-end;          /* the headline may run into the right margin */
  font: 300 var(--fs-title)/0.98 var(--font-display);
  letter-spacing: -0.04em;
  text-wrap: balance;
}
.xa-head--plain > .xa-dek { margin-top: clamp(1rem, 0.8rem + 0.8vw, 1.6rem); }
/* the plain header's kicker sits in the column, not the hero's full frame: its badges take their own row at every
   width (as on phones), so the row count is the same in Inter and in the system font before it arrives (from 640 to
   about 1100 px the date and the badges shared one row in one and not in the other: slow-font CLS 0.17) */
.xa-head--plain > .xa-kicker > .xa-badges { flex-basis: 100%; }
/* the archive's note under its dek (lib/site.mjs archivePage): the badges its rows carry, said once with the author */
.xa-head--plain > .xa-dek + .xa-kicker--about { margin: clamp(1.1rem, 0.85rem + 0.9vw, 1.6rem) 0 0; }
/* the plain header's dek on phones (22 px, weight 340, below 480 px): Newsreader is narrower there than the body
   (430) that fonts-v2.css matches its Georgia fallback to (91.3 %), so Georgia ran wide (roman 1.0 %, italic 1.9 %,
   measured on the Five ways forward body set at 340 / 22 px) and a dek near a line's end wrapped to one more line
   until Newsreader came ("Remembering the good times we had" at 360 px: slow-font CLS 0.14). A fallback matched at
   that size and weight: roman 91.3 / 1.0099 = 90.4 %, italic 83.7 / 1.0192 = 82.1 %. From 480 px the dek grows
   toward 28 px, where the sheet's fallback is within 0.1 %. Local fonts only: nothing is downloaded. */
@font-face { font-family: 'Newsreader dek fallback'; font-style: normal; font-weight: 400; src: local('Georgia'); size-adjust: 90.4%; }
@font-face { font-family: 'Newsreader dek fallback'; font-style: italic; font-weight: 400; src: local('Georgia Italic'), local('Georgia-Italic'); size-adjust: 82.1%; }
@media (max-width: 479.98px) {
  .xa-head--plain > .xa-dek { font-family: 'Newsreader', 'Newsreader dek fallback', Georgia, 'Times New Roman', serif; }
}

/* hero header: the stepped window, title in its notch */
.xa-head--hero { padding: clamp(1.25rem, 0.75rem + 1.6vw, 2.5rem) 0 clamp(2.75rem, 1.75rem + 3.5vw, 5rem); }
.xa-frame { width: min(100% - 2 * var(--gutter), 105rem); margin-inline: auto; overflow-x: clip; container: xa-hf / inline-size; }
.xa-head--hero .xa-dek {
  margin-top: clamp(1.25rem, 0.9rem + 1.2vw, 2.25rem); max-width: 24em;
  font-size: var(--fs-dek-hero); font-weight: var(--dek-hero-wght); line-height: 1.24;
}
/* the caption when the window has no notch for it (below a 1100 px frame): after the dek, so title and dek read as
   one unit (the page's windows CSS shows this copy or the one in the notch, never both) */
.xa-hero__after { display: none; margin-top: clamp(0.9rem, 0.7rem + 0.6vw, 1.25rem); max-width: 40rem; color: var(--gray); }
.xa-hero__figure { margin: 0; }

/* ==========================================================================
   WINDOWS (hero, section break): module-based, generated per article
   ========================================================================== */
.xa-win { position: relative; container: xa-win / inline-size; }
.xa-window {
  position: relative;
  overflow: hidden;
  background: var(--black);
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.xa-window img, .xa-window picture { position: absolute; inset: 0; width: 100%; height: 100%; }
.xa-window img { object-fit: cover; }
.xa-win__title {
  position: absolute; z-index: 2;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--fs, 3rem);
  line-height: 1;
  letter-spacing: -0.04em;
  white-space: nowrap;
  color: var(--black);
  text-wrap: nowrap;
  /* the cap top sits where the window recipe puts it: Space Grotesk at line-height 1 has 0.1429 em above its caps.
     A margin in every engine, not text-box: trim-both: Chrome (154) re-laid the trimmed title out with stale line
     boxes when the entry ripple removed its filter from the hero, and the second line dropped (23 px at 1440). */
  margin-top: calc(-0.1429 * var(--fs, 3rem));
}
.xa-win__title br { display: none; }
.xa-win__caption { position: static; margin-top: 0.75rem; max-width: 40rem; }

/* ==========================================================================
   BODY: the 80%
   ========================================================================== */
.xa-body {
  font-family: var(--serif);
  font-size: var(--fs-body);
  font-weight: var(--wght);
  line-height: var(--lh);
  font-optical-sizing: auto;
  font-kerning: normal;
  font-variant-numeric: proportional-nums;      /* Newsreader and Source Serif default to tabular figures */
  counter-reset: xa-num;
}
.xa-body > * + * { margin-top: var(--flow); }
.xa-body p, .xa-body li, .xa-body dd { hanging-punctuation: first; }
/* the last paragraph's closing words and the end mark never part; a short closing paragraph is balanced */
.xa-keep, .xa-tail { white-space: nowrap; }
/* 200 % text on a phone (a column of about 6 em): a bound pair as long as "stop wondering." is wider than the line,
   so there the words may part rather than widen the page. In em, which follows the reader's text size: at 100 % text
   it applies only below 208 px. */
@media (max-width: 13em) { .xa-keep { white-space: normal; } }
.xa-body .xa-last { text-wrap: balance; }
.xa-body strong { font-weight: var(--bold); }
.xa-body em, .xa-body i, .xa-body cite { font-style: italic; }

/* links: ink text (15:1), the orange is the underline (non-text, 3.45:1) */
.xa-body a:not([class]), .xa-sources__list a, .xa-cap a, .xa-note a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-color: var(--orange);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  text-decoration-skip-ink: auto;
  transition: text-decoration-thickness 0.15s ease;
}
.xa-body a:not([class]):hover, .xa-sources__list a:hover, .xa-cap a:hover, .xa-note a:hover { text-decoration-thickness: 2px; }

/* drop cap: Space Grotesk 300 over three lines (Chrome, Safari; Firefox shows a plain first letter) */
@supports (initial-letter: 3) or (-webkit-initial-letter: 3) {
  .xa-body > .dropcap::first-letter {
    -webkit-initial-letter: 3;
    initial-letter: 3;
    font-family: var(--font-display);
    font-weight: 300;
    color: var(--black);
    margin-inline-end: 0.1em;
  }
}
/* lead-in: the opening words in the serif's semibold (the lean font files carry no small caps) */
.xa-body .leadin { font-weight: var(--bold); }

/* headings */
.xa-body > h2 {
  margin-top: var(--space-section);
  font: 400 var(--fs-h2)/1.12 var(--font-display);
  letter-spacing: -0.022em;
  text-wrap: balance;
}
.xa-body > h3 {
  margin-top: 2.75rem;
  font: 500 var(--fs-h3)/1.2 var(--font-display);
  letter-spacing: -0.012em;
  text-wrap: balance;
}
.xa-body > :is(h2, h3) + * { margin-top: 0.7rem; }
.xa-body > :is(.standout, .xa-fig, .xa-video, .xa-pull, .xa-break, .xa-quote, .xf, .xv, .xu) + h2 { margin-top: var(--space-section); }
.xa-body > h2 + h3 { margin-top: 1.75rem; }

/* numbered sections (the five directions): 01-05 in Space Grotesk 300, orange, about twice the heading's size.
   On a phone the numeral stands above its heading; from a 46rem column it hangs in the left margin on the
   heading's baseline. The only orange numerals on the page. */
.xa-body > h3.numbered { counter-increment: xa-num; margin-top: 3.25rem; font-size: var(--fs-h3n); }
.xa-body > h3.numbered::before {
  content: counter(xa-num, decimal-leading-zero);
  content: counter(xa-num, decimal-leading-zero) / "";
  display: block;
  margin-bottom: 0.3rem;
  font: 300 2.5rem/1 var(--font-display);
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--orange);                          /* large type: 3.45:1 is above the 3:1 it needs */
}

/* ordered lists: hanging numerals in Space Grotesk */
.xa-body > ol, .xa-body > ul { padding: 0; display: grid; gap: 0.6em; }
.xa-body > ol { list-style: none; counter-reset: xa-li; }
.xa-body > ol > li { counter-increment: xa-li; padding-left: 1.15em; }
.xa-body > ol > li::before {
  content: counter(xa-li);
  content: counter(xa-li) / "";
  display: inline-block;
  width: 1.15em; margin-left: -1.15em; padding-right: 0.45em;
  text-align: right;
  font-family: var(--font-display);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  color: var(--gray);
}
.xa-body > ul { padding-left: 1.3em; }
.xa-body > ul > li::marker { color: var(--gray); }

/* the ledger: hairline rows ("Fits if / First move") */
.xa-body > .ledger { margin-top: 1.1rem; border-top: 1px solid var(--rule-strong); font-size: 0.9em; line-height: 1.45; }
.ledger > div {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  column-gap: 1.25rem;
  align-items: baseline;
  padding: 0.6rem 0 0.65rem;
  border-bottom: 1px solid var(--rule);
}
.ledger dt {
  font: 500 0.6875rem/1.2 var(--font-ui);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gray);
}

/* the standout: a display-size question between hairlines */
.xa-body > .standout {
  grid-column: popout;
  margin-top: var(--space-block);
  padding: 1.1rem 0 1.3rem;
  border-top: 1px solid var(--black);
  border-bottom: 1px solid var(--rule-strong);
  font: 300 var(--fs-standout)/1.1 var(--font-display);
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.xa-body > .standout + * { margin-top: var(--space-block); }

/* citation markers: Inter, small, never moving the line */
.xc {
  position: relative; top: -0.6em;
  font-size: 0.6em; line-height: 0; vertical-align: baseline;
  margin-left: 0.05em;
  font-family: var(--font-ui);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* gray (4.64:1) at rest: 30-odd orange markers flooded the page; orange when pointed at, focused or landed on */
.xc__n { padding: 0.25em 0.1em; font-weight: 500; color: var(--gray); text-decoration: none; border-radius: 2px; transition: color 0.15s ease; }
.xc__n:hover, .xc__n:focus-visible { color: var(--orange-text); text-decoration: underline; text-underline-offset: 0.15em; }
.xc__n:target { color: var(--orange-text); background: rgba(200, 98, 42, 0.18); }
.xc__sep { color: var(--gray); }

/* the end mark */
.xa-end {
  display: inline-block;
  width: 0.45em; height: 0.45em;
  margin-left: 0.4em;
  background: var(--orange);
  border-radius: 1px;
  vertical-align: 0.04em;
}

/* margin items: notes, pockets, stats. Each belongs to the paragraph before it (one .xa-noted row). Narrow:
   folded in under the paragraph. Wide (a 70rem article): in the right margin beside it, taking no height, so it
   never opens a gap in the text; article.js stacks items that would touch and folds back one that would run into
   something wider than the column. */
.xa-body > .xa-noted { grid-column: full; }
.xa-noted > p { grid-row: 1; }
.xa-noted > aside { grid-row: 2; margin-top: 0.85rem; }
.xa-note {
  padding-left: 0.9rem;
  border-left: 1px solid var(--rule-strong);
  font: 400 var(--fs-small)/1.5 var(--font-ui);
  color: var(--ink-2);
  text-wrap: pretty;
}
.xa-note .xc { font-size: 0.7em; }

/* pocket (a definition, a reason) and stat (one number): Inter, on a 2 px orange rule */
.xp__in {
  padding: 0.05rem 0 0.1rem 0.9rem;
  border-left: 2px solid var(--orange);
  font: 400 var(--fs-small)/1.5 var(--font-ui);
  color: var(--ink-2);
}
.xa-body .xp__in p { hanging-punctuation: none; }
.xp__label {
  margin-bottom: 0.3rem;
  font: 500 0.6875rem/1.3 var(--font-ui);
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--orange-text);
}
.xp__body { text-wrap: pretty; }
.xp__body strong { font-weight: 600; color: var(--black); }
.xp__value {
  margin: 0.1rem 0 0.35rem -0.03em;
  font: 300 2.75rem/0.95 var(--font-display);
  letter-spacing: -0.045em;
  color: var(--black);
}
.xp .xc { font-size: 0.75em; }

/* ---------------------------------------------------------------- pair: two figures, one crop, captions level */
.xa-body > .xa-pair {
  grid-column: popout;
  margin-top: var(--space-block);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(0.75rem, 0.4rem + 1vw, 1.5rem);
  align-items: start;
}
.xa-body > .xa-pair--wide { grid-column: wide; }
.xa-body > .xa-pair + * { margin-top: var(--space-block); }
.xa-pair__cell img { aspect-ratio: var(--xa-ratio); object-fit: cover; }

/* ---------------------------------------------------------------- index strip: the numbered sections ahead */
.xa-body > .xa-index { grid-column: popout; margin-top: 1.75rem; }
.xa-body > .xa-index + * { margin-top: 2.25rem; }
.xa-index__list {
  list-style: none; padding: 0; margin: 0;
  display: grid;
  border-top: 1px solid var(--black);
}
.xa-body .xa-index__list a {
  display: flex; align-items: baseline; gap: 0.75rem;
  padding: 0.6rem 0 0.65rem;
  border-bottom: 1px solid var(--rule);
  color: var(--black); text-decoration: none;
  font: 400 1.0625rem/1.25 var(--font-display);
  letter-spacing: -0.01em;
}
.xa-index__n { flex: none; font: 500 0.75rem/1 var(--font-ui); letter-spacing: 0.04em; font-variant-numeric: tabular-nums; color: var(--gray); }
.xa-body .xa-index__list a:hover .xa-index__name { text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }

/* ---------------------------------------------------------------- contents rail ("contents": true) */
.xa-body { position: relative; }
.xa-body > .xa-toc { display: none; }
.xa-body > .xa-toc + * { margin-top: 0; }
.xa-toc__in { font: 400 0.8125rem/1.35 var(--font-ui); transition: opacity 0.3s ease, visibility 0s; }
.xa-toc.is-covered .xa-toc__in { opacity: 0; visibility: hidden; transition: opacity 0.2s ease, visibility 0s linear 0.2s; }
.xa-toc__label { margin-bottom: 0.8rem; font: 500 var(--fs-label)/1.4 var(--font-ui); letter-spacing: 0.2em; text-transform: uppercase; color: var(--gray); }
.xa-toc__list { list-style: none; padding: 0; margin: 0; border-left: 1px solid var(--rule-strong); }
.xa-body .xa-toc__list a {
  display: block;
  margin-left: -1px;
  padding: 0.4rem 0 0.4rem 0.9rem;
  border-left: 2px solid transparent;
  color: var(--gray); text-decoration: none;
  text-wrap: balance;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.xa-body .xa-toc__list a:hover { color: var(--black); }
.xa-body .xa-toc__list a[aria-current="true"] { color: var(--black); border-left-color: var(--orange); }
/* what is wider than the column slides over the rail */
.xa-body > :is(.xa-fig--wide, .xa-fig--full, .xa-break, .xf, .xa-pair--wide, .xa-spec__demo) { position: relative; z-index: 1; }

/* ---------------------------------------------------------------- specimen cards (lab: content/articles/_specimen/) */
.xa-body > .xa-spec { margin-top: 3.25rem; padding-top: 0.9rem; border-top: 1px solid var(--rule-strong); font-family: var(--font-ui); }
.xa-body > h2 + .xa-spec { margin-top: 1.5rem; }
.xa-body > .xa-spec + * { margin-top: 1.5rem; }
.xa-spec__title { display: flex; align-items: baseline; gap: 0.65rem; font: 500 1.125rem/1.3 var(--font-display); letter-spacing: -0.01em; }
.xa-spec__n { font: 500 0.75rem/1 var(--font-ui); letter-spacing: 0.06em; font-variant-numeric: tabular-nums; color: var(--gray); }
.xa-spec__use { margin-top: 0.3rem; font: 400 0.9375rem/1.5 var(--font-ui); color: var(--ink-2); }
.xa-spec__use code, .xa-spec__code { font-family: ui-monospace, 'Cascadia Mono', Consolas, 'SF Mono', Menlo, monospace; }
.xa-spec__use code { padding: 0.08em 0.3em; border-radius: 3px; background: var(--panel); font-size: 0.85em; }
.xa-spec__code {
  margin: 0.75rem 0 0; padding: 0.75rem 0.95rem;
  background: var(--panel); border-radius: 8px;
  font-size: 0.75rem; line-height: 1.55; color: var(--ink-2);
  white-space: pre-wrap; overflow-wrap: anywhere; tab-size: 2;
}
.xa-body > .xa-spec__demo { grid-column: wide; border: 1px dashed var(--rule-strong); border-radius: var(--r-media); background: var(--white); }
.xa-body > .xa-spec__demo + * { margin-top: var(--space-block); }
.xa-spec__demo .xa-head--plain { padding-block: clamp(1.75rem, 1rem + 3vw, 3.5rem); }

/* pull quote: repeats the text (aria-hidden), set in the serif's italic */
.xa-body > .xa-pull {
  grid-column: popout;
  position: relative;
  margin-top: var(--space-block);
  padding-top: 1.1rem;
  border-top: 1px solid var(--rule-strong);
}
.xa-pull::before { content: ""; position: absolute; left: 0; top: -2px; width: 2.5rem; height: 3px; background: var(--orange); }
.xa-pull p {
  font-family: var(--serif);
  font-style: italic;
  font-weight: var(--pull-wght);
  font-size: var(--fs-pull);
  line-height: 1.15;
  max-width: 20em;
  text-wrap: balance;
  position: relative;
}
/* the opening mark hangs: placed where the text starts, then moved left by its own width */
.xa-pull__q { position: absolute; transform: translateX(-100%); }
.xa-body > .xa-pull + * { margin-top: var(--space-block); }

/* quotations */
.xa-body > .xa-quote { margin-top: 1.5em; }
.xa-quote blockquote { padding-left: 1.25em; border-left: 2px solid var(--rule-strong); }
.xa-quote figcaption { margin-top: 0.6rem; padding-left: 1.25rem; font: 400 var(--fs-caption)/1.45 var(--font-ui); color: var(--gray); }
.xa-quote figcaption::before { content: "— "; }
.xa-quote figcaption cite { font-style: normal; color: var(--ink-2); }
/* a plain <blockquote> in the body: a passage set apart (the older articles' closing questions, as their hand-written
   pages set them: a rule on the left, the serif's italic), with the quotation's rule and indent */
.xa-body > blockquote { margin-top: 1.5em; padding-left: 1.25em; border-left: 2px solid var(--rule-strong); font-style: italic; }
.xa-body > blockquote + :not(h2, h3) { margin-top: 1.5em; }

/* tables: their own scroll box, tabular figures */
.xa-table { overflow-x: auto; }
.xa-table table { width: 100%; border-collapse: collapse; font-size: 0.9em; font-variant-numeric: tabular-nums; }
.xa-table th, .xa-table td { padding: 0.5rem 1rem 0.5rem 0; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: baseline; }
.xa-table thead th { font: 500 var(--fs-label)/1.2 var(--font-ui); letter-spacing: 0.12em; text-transform: uppercase; color: var(--gray); }
.xa-table caption { caption-side: top; text-align: left; margin-bottom: 0.6rem; font: 500 var(--fs-small)/1.4 var(--font-ui); }

/* figures: content | popout | wide | full */
.xa-body > .xa-fig { margin-top: var(--space-block); }
.xa-body > .xa-fig + * { margin-top: var(--space-block); }
.xa-body > .xa-fig--popout { grid-column: popout; }
.xa-body > .xa-fig--wide { grid-column: wide; }
.xa-body > .xa-fig--full { grid-column: full; }
.xa-fig img { width: 100%; border-radius: var(--r-media); }
.xa-fig--full img { border-radius: 0; }
.xa-fig--full .xa-cap { width: min(var(--measure-len), 100% - 2 * var(--gutter)); margin-inline: auto; }

/* captions and credits (Inter roman; an <em> in a caption borrows the serif's italic) */
.xa-cap {
  margin-top: 0.7rem;
  font: 400 var(--fs-caption)/1.45 var(--font-ui);
  color: var(--ink-2);
  text-wrap: pretty;
}
.xa-cap :is(em, i, cite) { font-family: var(--serif); font-style: italic; font-size: 1.08em; }
.xa-credit { font-size: 1em; color: var(--gray); }

/* ---------------------------------------------------------------- the section break: full bleed */
.xa-body > .xa-break { grid-column: full; margin-top: calc(var(--space-section) * 1.15); }
.xa-body > .xa-break + * { margin-top: var(--space-block); }
.xa-break__figure { margin: 0; }
.xa-break__title { color: var(--black); }
.xa-break__cap { width: min(var(--measure-len), 100% - 2 * var(--gutter)); margin: 0.75rem auto 0; }

/* ---------------------------------------------------------------- video: the typographic poster */
.xa-body > .xa-video { grid-column: popout; margin-top: var(--space-block); }
.xa-body > .xa-video + * { margin-top: var(--space-block); }
.xa-yt {
  position: relative;
  container: yt / inline-size;
  aspect-ratio: 16 / 9;                          /* the same box before and after the iframe */
  width: 100%; min-width: 0;
  min-height: 200px;                             /* YouTube's minimum player */
  background: var(--black);
  border-radius: var(--r-media);
  overflow: hidden;
}
.xa-yt__play { position: absolute; inset: 0; display: block; color: var(--white); text-decoration: none; --m: calc(100cqi / 16); }
/* The poster is a picture of fixed proportions: its type has rem floors (the reader's text size counts) but each is
   capped at what the narrowest box (320 px) holds at 16 px text, so at 200 % text the headline no longer runs out of
   the box (check.mjs). It is aria-hidden; the caption under it carries the full title at the reader's size. */
.xa-yt__play:focus-visible { outline: 3px solid var(--white); outline-offset: -7px; border-radius: inherit; }
.xa-yt__poster { position: absolute; inset: 0; }
.xa-yt__sky {
  position: absolute; inset: 0;
  background: #312c26;                           /* one step up from the ink: a quiet window */
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  transform-origin: 100% 100%;
  transition: transform 0.7s var(--ease);
}
.xa-yt__channel {
  position: absolute; left: calc(var(--m) * 0.75); top: calc(var(--m) * 0.75);
  font: 500 min(max(0.6875rem, calc(var(--m) * 0.22)), calc(var(--m) * 0.55))/1.2 var(--font-ui);
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gray-light);
}
.xa-yt__headline {
  position: absolute; left: calc(var(--m) * 0.75); top: calc(var(--m) * 1.4);
  width: calc(var(--m) * 8.6);
  font: 300 min(max(1.125rem, calc(var(--m) * 0.82)), calc(var(--m) * 0.9))/1.02 var(--font-display);
  letter-spacing: -0.03em;
  color: var(--white);
  text-wrap: balance;
}
.xa-yt__btn {
  position: absolute; left: calc(var(--m) * 0.75); bottom: calc(var(--m) * 0.75);
  display: flex; align-items: center; gap: min(max(0.625rem, calc(var(--m) * 0.3)), calc(var(--m) * 0.5));
}
.xa-yt__icon {
  width: min(max(2.75rem, calc(var(--m) * 1.15)), calc(var(--m) * 2.2)); height: min(max(2.75rem, calc(var(--m) * 1.15)), calc(var(--m) * 2.2));
  border-radius: 50%;
  background: var(--white);
  display: grid; place-items: center;
  transition: transform 0.4s var(--ease);
}
.xa-yt__icon svg { width: 42%; height: 42%; fill: var(--black); margin-left: 6%; }
.xa-yt__label { font: 500 min(max(0.875rem, calc(var(--m) * 0.3)), calc(var(--m) * 0.7))/1.2 var(--font-ui); }
.xa-yt__dur { font: 400 min(max(0.8125rem, calc(var(--m) * 0.27)), calc(var(--m) * 0.65))/1.2 var(--font-ui); color: var(--gray-light); font-variant-numeric: tabular-nums; }
.xa-yt__play:hover .xa-yt__icon { transform: scale(1.06); }
.xa-yt__play:hover .xa-yt__sky { transform: scale(1.02); }
.xa-yt__frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.xa-video__title { color: var(--black); font-weight: 500; }
.xa-video__watch { white-space: nowrap; }

/* ---------------------------------------------------------------- sources */
.xa-sources { margin-top: clamp(3.5rem, 2.5rem + 3vw, 5.5rem); font-size: var(--fs-body); }
.xa-label {
  margin: 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule-strong);
  font: 500 var(--fs-label)/1.2 var(--font-ui);
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gray);
}
.xa-sources__list {
  margin: 1.1rem 0 0; padding: 0 0 0 2.4em;
  display: grid; gap: 0.5rem;
  font: 400 var(--fs-caption)/1.5 var(--font-ui);
  color: var(--ink-2);
}
.xa-sources__list li { padding-left: 0.35em; border-radius: 3px; transition: background-color 0.6s ease; }
.xa-sources__list li::marker { font-variant-numeric: tabular-nums; color: var(--gray); font-weight: 500; }
.xa-sources__list li:target { background: rgba(200, 98, 42, 0.12); box-shadow: 0 0 0 0.3rem rgba(200, 98, 42, 0.12); color: var(--black); }
.xa-sources__list a { overflow-wrap: anywhere; text-decoration-color: rgba(110, 106, 96, 0.5); }
.xa-sources__list a:hover { text-decoration-color: var(--orange); }
.xa-sources__list .xa-back, .xa-sources__list .xa-back a { color: var(--gray); text-decoration: none; font-weight: 600; white-space: nowrap; }
.xa-sources__list .xa-back a { padding: 0 0.15em; }
.xa-sources__list .xa-back a:hover, .xa-sources__list a.xa-back:hover, .xa-sources__list .xa-back a:focus-visible, .xa-sources__list a.xa-back:focus-visible { color: var(--orange-text); }

/* ---------------------------------------------------------------- keep reading: the real home tiles */
.xa-next { padding: clamp(4.5rem, 3rem + 5vw, 8rem) var(--gutter) clamp(2.5rem, 2rem + 2vw, 4rem); }
.xa-next__head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 0.5rem 2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rule-strong);
  margin-bottom: clamp(1.25rem, 1rem + 1vw, 2rem);
}
.xa-next__title { font: 400 var(--fs-h2)/1.1 var(--font-display); letter-spacing: -0.022em; }
.xa-next__home {
  font: 500 var(--fs-label)/1.2 var(--font-ui);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--black);
  text-decoration: underline; text-decoration-color: var(--orange); text-underline-offset: 0.3em;
}
/* no tablet reorder; a tile's <em> is as on the home page; and the home's widths: this page's Inter (fonts-v2.css)
   has an opsz axis, which at the deks' 16 px would set them about 1 % narrower than the home's Inter (no opsz), the
   file the tiles' line breaks were measured and gated with */
.xa-next .card { --order-2col: 0; font-synthesis: weight style; font-optical-sizing: none; }
@media not all and (max-width: 900px) { .xa-next .card[data-xa-fill] { display: none; } }

/* "All articles": when the candidates cannot fill the row */
.xa-all { display: flex; flex-direction: column; padding: var(--pad-top) var(--pad) var(--pad); }
.xa-all__label { margin: 0 0 0.7rem; font: 500 var(--fs-label)/1.4 var(--font-ui); letter-spacing: 0.2em; text-transform: uppercase; color: var(--gray); }
.xa-all__list { list-style: none; padding: 0; margin: 0 0 1rem; }
.xa-all__list li { border-top: 1px solid var(--rule-strong); font: 400 clamp(0.95rem, calc(var(--m) * 0.36), 1.25rem)/1.2 var(--font-display); letter-spacing: -0.01em; }
.xa-all__list a, .xa-all__list li[aria-current] { display: block; padding: 0.5em 0; color: var(--black); text-decoration: none; }
.xa-all__list a:hover { color: var(--orange-text); }
.xa-all__list li[aria-current] { color: var(--gray); }
.xa-all__here { margin-left: 0.4em; font: 500 0.625rem/1 var(--font-ui); letter-spacing: 0.14em; text-transform: uppercase; color: var(--orange-text); vertical-align: 0.2em; white-space: nowrap; }
.xa-all__links { margin: auto 0 0; display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem; font: 500 var(--fs-label)/1.4 var(--font-ui); letter-spacing: 0.14em; text-transform: uppercase; }
.xa-all__links a { color: var(--black); text-decoration: underline; text-decoration-color: var(--orange); text-underline-offset: 0.25em; }
@media (max-width: 900px) { .xa-next .xa-all[data-span2="1"] { grid-column: span 1; } }
/* as the fill (no tile left that would not repeat a picture on the page) it completes the 2-column row only: the
   cell's square (a span-1 tile's height), grown rather than cut off when the reader's text size needs more */
.xa-next .xa-all[data-xa-fill] { height: auto; min-height: calc(var(--rows, 8) * var(--m) + 2 * var(--inset)); }
@media (max-width: 640px) { .xa-next .xa-all[data-xa-fill] { display: none; } }
.xa-next--none { padding-block: clamp(3rem, 2rem + 3vw, 5rem); }

/* ---------------------------------------------------------------- the archive (/blog) */
/* every published article, newest first, in the Feed (/blog/assets/feed.css, lib/feed.mjs: the home page's list under
   the grid is the same component): on the article grid, from the header's left edge into the right margin's first
   track (popout), as the archive's entries ran before it, so the two margins stay near equal at every width */
.xa-arc { margin: 0 0 clamp(3rem, 2rem + 4vw, 6rem); }    /* the article grid (above) */
.xa-arc > .xl { grid-column: content-start / popout-end; }
/* the 404 (lib/site.mjs notFoundPage): its one paragraph keeps the archive's distance from the footer */
.xa-nf { margin-bottom: clamp(3rem, 2rem + 4vw, 6rem); }
/* and its title on one line at every width, never larger than "Page not found" allows in the column (Space Grotesk 300
   widths with 6 % to spare for the system font shown before it arrives, as a plain title on its tile's lines): left to
   wrap, it took two lines in Space Grotesk and one in the system font below 352 px, and the page jumped when the font
   came (slow-font CLS 0.033 at 320 px). 7.382 = lib/windows.mjs widthEm('Page not found') x 1.06 (test.mjs). Never
   under 2rem: at 100 % text that floor is below the cap down to a 290 px screen, and at 200 % text the title still
   grows with the reader's setting (and wraps) instead of shrinking under the body text with the doubled gutters. */
.xa-head--nf > .xa-title { font-size: max(2rem, min(var(--fs-title), (100cqi - 2 * var(--gutter)) / 7.382)); }

/* ---------------------------------------------------------------- footer */
.xa-footer { padding: 0 var(--gutter) 3rem; }
.xa-footer__copy { padding-top: 1.5rem; border-top: 1px solid var(--rule); font: 400 var(--fs-label)/1.4 var(--font-ui); letter-spacing: 0.05em; color: var(--gray); }

/* ==========================================================================
   CONTAINER BREAKPOINTS (the article's own width)
   ========================================================================== */
/* phones: hyphenate; the video goes edge to edge (YouTube needs 200 px of height); the ledger stacks */
@container xa (max-width: 40rem) {
  .xa-body p, .xa-body li, .xa-body dd { hyphens: auto; -webkit-hyphens: auto; }
  .ledger > div { grid-template-columns: minmax(0, 1fr); row-gap: 0.15rem; }
}
@container xa (min-width: 40.01rem) {
  .xa-body p, .xa-body li, .xa-body dd { text-wrap: pretty; }
}
@container xa (max-width: 26rem) {
  .xa-body > .xa-video { grid-column: full; }
  .xa-yt { border-radius: 0; }
  .xa-video__cap { padding-inline: var(--gutter); }
}
/* from tablet up: numerals hang outside the measure, so the text keeps one left edge */
@container xa (min-width: 46rem) {
  /* line-height 0: the big numeral sits on the heading's first baseline without making that line taller */
  .xa-body > h3.numbered::before {
    display: inline-block;
    width: 1.55em; margin: 0 0 0 -1.55em; padding-right: 0.3em;
    text-align: right;
    font-size: 2.1em; line-height: 0;
  }
  .xa-body > ol > li { padding-left: 0; }
  .xa-sources__list { padding-left: 0; }
}
/* phones: a pocket is one compact block with its label run in; a stat sets its number beside its line; pairs stack */
@container xa (max-width: 40rem) {
  .xp:not(.xp--stat) .xp__label { display: inline; margin: 0 0.25em 0 0; }   /* + the space after it in the markup */
  .xp:not(.xp--stat) .xp__body { display: inline; }
  .xp--stat .xp__in { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 0.85rem; align-items: baseline; }
  .xp--stat .xp__label { grid-column: 1 / -1; }
  .xp--stat .xp__value { margin: 0; font-size: 2.25rem; }
  .xa-body > .xa-pair { grid-template-columns: minmax(0, 1fr); row-gap: 1.75rem; }
}
/* very narrow in the reader's own text size (200 % text on a phone): the stat's number stacks above its line */
@container xa (max-width: 18rem) {
  .xp--stat .xp__in { display: block; }
}
/* the index strip: one column per section once there is room */
@container xa (min-width: 46rem) {
  .xa-index__list { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); column-gap: 1.25rem; border-top: 0; }
  .xa-body .xa-index__list a { flex-direction: column; gap: 0.45rem; height: 100%; padding: 0.7rem 0 0.2rem; border-top: 1px solid var(--black); border-bottom: 0; }
  .xa-body .xa-index__list a:hover { border-top-color: var(--orange); }
}
/* wide: margin items move into the right margin, beside their paragraph, and take no height there */
@container xa (min-width: 70rem) {
  .xa-noted > aside:not(.is-folded) {
    grid-column: content-end / wide-end;
    grid-row: 1;
    align-self: start;
    height: 0;
    margin: var(--xa-push, 0.3rem) 0 0;
    padding-left: 2.25rem;
  }
  .xa-noted > .xa-note:not(.is-folded) { border-left: 0; max-width: 18.25rem; }
  .xa-noted > .xp:not(.is-folded) > .xp__in { max-width: 15.5rem; }
  /* without the script, an item is folded back when something wider than the column comes right after it */
  :root:not(.xa-js) .xa-noted:has(+ :is(.xf, .xu, .xv, .xa-fig:not(.xa-fig--content), .xa-break, .xa-pair, .xa-video, .standout, .xa-pull, .xa-index)) > aside {
    grid-column: content; grid-row: 2; height: auto; margin: 0.85rem 0 0; padding-left: 0;
  }
  :root:not(.xa-js) .xa-noted:has(+ :is(.xf, .xu, .xv, .xa-fig:not(.xa-fig--content), .xa-break, .xa-pair, .xa-video, .standout, .xa-pull, .xa-index)) > .xa-note { padding-left: 0.9rem; border-left: 1px solid var(--rule-strong); }
}
/* wider still: the contents rail in the left margin, sticky under the nav */
@container xa (min-width: 75rem) {
  .xa-body > .xa-toc {
    display: block;
    position: absolute; inset-block: 0;
    grid-column: wide-start / popout-start;
    z-index: 0;
    margin: 0;
    padding-right: 1.75rem;
  }
  .xa-toc__in { position: sticky; top: calc(var(--nav-h) + 2.5rem); }
}

/* ---------------------------------------------------------------- motion */
/* the hero fades in; after a tile click (the home grid or Keep reading: html.xa-land, set before the first paint by
   the page's inline landing script) it lands instead: the home's click scales the tile to 1.06 and fades the page to
   cream, and the article opens on its hero coming down from 1.04 out of that cream (tile-native's landing).
   The entry ripple (/blog/assets/entry-ripple.js) settles the hero meanwhile. The kicker (date, badges) comes with
   the title, so the header arrives as one unit: after a landing it is never a lone row on the bare cream before the
   hero. Reduced motion: none of it. */
@media (prefers-reduced-motion: no-preference) {
  .xa-hero .xa-window { animation: xa-fade 1.1s var(--ease) both; }
  .xa-hero__title, .xa-head--hero .xa-dek, .xa-hero__after, .xa-head--hero .xa-kicker { animation: xa-fade 0.9s var(--ease) both 0.15s; }
  .xa-land .xa-hero { animation: xa-land 0.9s var(--ease) both; transform-origin: 50% 40%; }
  .xa-land .xa-hero .xa-window, .xa-land .xa-hero__title { animation: none; }
  .xa-land .xa-head--hero .xa-kicker { animation: xa-fade 0.9s var(--ease) both; }
}
@keyframes xa-fade { from { opacity: 0; } }
@keyframes xa-land { from { opacity: 0; transform: scale(1.04); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}