/* generated by tools/articles/sync.mjs from tools/articles/runtime/feed.css + lib/feed.mjs thumbCss: do not edit */
/* ==========================================================================
   ottmar.work: the Feed, the article list (lib/feed.mjs). One component in two places: the home page's list under
   the grid (public/index.html, the feed region) and the /blog archive.
   A row: the thumbnail on the left (a small stepped window, or a text tile in miniature), then the kicker (date,
   reading time, the "Temporary content" badge), the title in the display face and the dek in the serif (on phones the
   kicker one line above, the dek beside the picture or, when long, under it). The whole row is the title's link.
   Self-contained: the tokens live on .xl, since the home page has its own :root (styles.css) and the archive
   article.css's; the faces are the page's (the home: /fonts/fonts.css, and /blog/assets/feed-fonts.css
   for Newsreader when a dek shows; the archive: /fonts/fonts-v2.css). Namespace xl-. The build appends the window
   masks and the miniature's proportions (lib/feed.mjs thumbCss). Single look on purpose: the site is cream only.
   ========================================================================== */
.xl {
  --xl-ink: #1a1814;
  --xl-gray: #6e6a60;            /* kicker, dek: 4.64:1 on cream */
  --xl-face: #f7f0e6;            /* the tiles' face */
  --xl-orange: #c8622a;          /* marks and rules only: 3.45:1 */
  --xl-orange-text: #a54f1d;     /* small orange text: 4.84:1 */
  --xl-rule: rgba(90, 83, 69, 0.22);
  --xl-rule-strong: rgba(90, 83, 69, 0.5);
  --xl-display: 'Space Grotesk', system-ui, sans-serif;
  --xl-ui: 'Inter', system-ui, sans-serif;
  --xl-serif: 'Newsreader', 'Xl Newsreader fallback', Georgia, 'Times New Roman', serif;
  --xl-ease: cubic-bezier(0.16, 1, 0.3, 1);       /* the site's one curve */
  --xl-tw: 168px;                /* the thumbnail's width (lib/feed.mjs THUMB.css, the sizes attribute) */
  --xl-gap: clamp(1.25rem, 0.6rem + 1.6vw, 2.25rem);
  color: var(--xl-ink);
  font-family: var(--xl-ui);
  font-weight: 400;
  line-height: 1.5;
  font-synthesis: none;          /* never a fake italic or bold */
  text-align: left;
}
@media (max-width: 900px) { .xl { --xl-tw: 144px; } }
@media (max-width: 640px) { .xl { --xl-tw: 104px; --xl-gap: 1rem; } }
@media (max-width: 400px) { .xl { --xl-tw: 88px; --xl-gap: 0.875rem; } }

/* The deks' fallback until Newsreader arrives: Georgia scaled to Newsreader's widths at the deks' weight (340; the
   article chassis measured 90.4 % roman, 82.1 % italic for its 340 dek), so a dek wraps where it will wrap in
   Newsreader and the rows under it do not move when the font comes. Local fonts only: nothing is downloaded. */
@font-face { font-family: 'Xl Newsreader fallback'; font-style: normal; font-weight: 400; src: local('Georgia'); size-adjust: 90.4%; }
@font-face { font-family: 'Xl Newsreader fallback'; font-style: italic; font-weight: 400; src: local('Georgia Italic'), local('Georgia-Italic'); size-adjust: 82.1%; }

.xl-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;
}

/* ---------------------------------------------------------------- the row */
.xl-list { list-style: none; margin: 0; padding: 0; }
.xl-item {
  position: relative;
  display: grid;
  grid-template-columns: var(--xl-tw) minmax(0, 1fr);
  grid-template-rows: auto auto 1fr;
  grid-template-areas: "thumb kick" "thumb title" "thumb dek";
  column-gap: var(--xl-gap);
  align-items: start;
  margin: 0;
  padding: clamp(1.25rem, 1rem + 0.8vw, 1.75rem) 0;
}
.xl-item + .xl-item { border-top: 1px solid var(--xl-rule); }

.xl-kicker {
  grid-area: kick;
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 0.5rem 1rem;
  margin: 0 0 0.65rem;
}
.xl-meta {
  font: 500 0.75rem/1.2 var(--xl-ui);
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--xl-gray);
  font-variant-numeric: tabular-nums;
}
.xl-short { display: none; }
/* the article's own badge, as its kicker shows it (article.css .xa-badge--temporary), a size smaller; "Temporary" on
   phones ("content" stays for screen readers); quiet (gray) in the home list's note */
.xl-badge {
  display: inline-block;
  font: 500 0.625rem/1 var(--xl-ui);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--xl-orange-text);
  border: 1px solid currentColor; border-radius: 999px;
  padding: 5px 8px 4px;                          /* no nowrap: at 200 % text on a phone it wraps inside its pill rather
                                                    than run off the screen (at 100 % it never needs to) */
}
.xl-badge--quiet { color: var(--xl-gray); }

.xl-title {
  grid-area: title;
  margin: 0;
  font: 400 clamp(1.3125rem, 1.05rem + 0.8vw, 1.75rem)/1.15 var(--xl-display);
  letter-spacing: -0.022em;
  color: var(--xl-ink);
  text-wrap: balance;
}
/* the title's link is the row's: its box covers the row (one Tab stop and one name per article, the title) */
.xl-title a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.14em;
  transition: text-decoration-color 0.25s ease;
  -webkit-tap-highlight-color: transparent;
}
.xl-title a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: 6px; }
.xl-item:hover .xl-title a, .xl-title a:focus-visible { text-decoration-color: var(--xl-orange); }
.xl-title a:focus-visible { outline: none; }
.xl-title a:focus-visible::after { outline: 2px solid var(--xl-ink); outline-offset: 4px; }

.xl-dek {
  grid-area: dek;
  margin: 0.45rem 0 0;
  max-width: 34em;
  font-family: var(--xl-serif);
  font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  font-weight: 340;
  font-optical-sizing: auto;
  line-height: 1.4;
  color: var(--xl-gray);
  text-wrap: pretty;
}
.xl-dek em { font-style: italic; color: var(--xl-ink); }

/* the thumbnail: a 4:3 box; the image through the stepped window (the masks, appended by the build: rising from the
   bottom, or hanging from the top for a sky picture, .xl-thumb--hang), or the text tile in miniature (its sizes in cqi
   of the box: the same proportions at every width) */
.xl-thumb {
  grid-area: thumb;
  position: relative;
  display: block;
  width: var(--xl-tw);
  aspect-ratio: 4 / 3;
  overflow: hidden;
  container-type: inline-size;
}
.xl-thumb--image {
  background: var(--xl-ink);                     /* the window before its picture arrives, as on the tiles */
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.xl-thumb img {
  position: absolute; inset: 0;
  display: block;
  width: 100%; height: 100%; max-width: none;
  object-fit: cover;
  transition: transform 1.1s var(--xl-ease);
}
.xl-item:hover .xl-thumb img { transform: scale(1.04); }
.xl-thumb--type {
  background: var(--xl-face);
  border: 1px solid var(--xl-rule-strong);
  transition: border-color 0.3s ease;
}
.xl-item:hover .xl-thumb--type { border-color: var(--xl-ink); }
.xl-mini {
  position: absolute;
  font-family: var(--xl-display);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.04em;
  white-space: nowrap;
  color: var(--xl-gray);                         /* a tile's surface, not a second headline beside the title */
  transition: color 0.3s ease;
}
.xl-item:hover .xl-mini { color: var(--xl-ink); }

/* phones: one kicker line above ("OCT 2026 · 6 MIN READ (TEMPORARY)": it fits a 320 px screen in Inter and in the
   system font before it, so the row count never changes when Inter arrives; nothing in it is nowrap, so at 200 % text
   it wraps instead of running off the screen), then the
   title and the dek beside the thumbnail (the home lab's prototype, mirrored). A long dek (lib/feed.mjs DEK_BESIDE_MAX,
   .xl-item--dek-under) goes under both at full width instead of growing a tall column beside a small picture. */
@media (max-width: 640px) {
  .xl-item {
    grid-template-rows: auto auto 1fr;
    grid-template-areas: "kick kick" "thumb title" "thumb dek";
    padding: 1.2rem 0 1.35rem;
  }
  .xl-item--dek-under {
    grid-template-rows: auto auto auto;
    grid-template-areas: "kick kick" "thumb title" "dek dek";
  }
  .xl-kicker { flex-wrap: wrap; gap: 0.4rem 0.625rem; margin-bottom: 0.7rem; }
  .xl-meta { letter-spacing: 0.15em; }
  .xl-badge { letter-spacing: 0.1em; padding: 4px 7px 3px; }
  .xl-long { display: none; }
  .xl-short { display: inline; }
  .xl-title { font-size: 1.25rem; line-height: 1.15; }
  .xl-thumb { margin-top: 0.15rem; }
  .xl-dek { margin-top: 0.35rem; max-width: none; font-size: 1.0625rem; line-height: 1.38; }
  .xl-item--dek-under .xl-dek { margin-top: 0.8rem; }
}
@media (max-width: 400px) {
  .xl-title { font-size: 1.1875rem; }
  .xl-kicker { column-gap: 0.5rem; }
  .xl-meta { letter-spacing: 0.1em; }
  .xl-badge { letter-spacing: 0.08em; padding-inline: 6px; }
}

/* ---------------------------------------------------------------- "All articles" */
/* the vertical padding makes the target 26 px or more, the side padding room for the focus ring and the arrow's hover
   nudge (all inside the link's box, so nothing pokes past the grid's right edge); negative margins on every side but
   the right keep the label in place; the ring is an outline 3 px out (an outline never adds overflow) */
.xl-all {
  display: inline-flex; align-items: center; gap: 0.6em;
  padding: 0.375rem 0.25rem; margin: -0.375rem 0 -0.375rem -0.25rem;
  font: 500 clamp(0.75rem, 0.6rem + 0.25vw, 0.9375rem)/1.2 var(--xl-ui);
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--xl-ink);
  text-decoration: none;
  border-radius: 4px;
  -webkit-tap-highlight-color: transparent;
}
.xl-all__arr {
  font-family: var(--xl-display); font-weight: 400; letter-spacing: 0;
  color: var(--xl-orange-text);
  transition: transform 0.45s var(--xl-ease);
}
.xl-all:hover .xl-all__arr { transform: translateX(4px); }
.xl-all:focus-visible { outline: 2px solid var(--xl-ink); outline-offset: 3px; }

/* ---------------------------------------------------------------- the home page: under the grid */
/* inside .cards-section__grid (tiles.css gives the region's children full rows after the tiles), on the grid's own
   columns: the head across all three, the list on the first two, and the third column holds the note that explains
   the badges once (lib/feed.mjs aboutHTML; a strip under the head from 900 px down). The note is not sticky: main.js
   translates the grid with the scroll, and a sticky box would stick at a place offset by that lift. */
.xl--home:not(.xl--empty) {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 12px;                              /* the tiles' gap */
  margin: clamp(3rem, 2rem + 3vw, 5.5rem) 0 0;
}
.xl-head {
  grid-column: 1 / -1;
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 0.5rem 2rem;
  padding-bottom: clamp(0.85rem, 0.7rem + 0.5vw, 1.15rem);
  border-bottom: 1px solid var(--xl-ink);
}
.xl-head__title {
  margin: 0;
  font: 300 clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem)/1.05 var(--xl-display);
  letter-spacing: -0.03em;
  color: var(--xl-ink);
}
.xl--home > .xl-list { grid-column: 1 / span 2; grid-row: 2; }
.xl--home > .xl-about {
  grid-column: 3; grid-row: 2; align-self: start;
  padding: clamp(1.25rem, 1rem + 0.8vw, 1.75rem) 0 0 clamp(1.25rem, 3vw, 3.5rem);   /* level with the first row's kicker */
}
.xl-about__text { margin: 0.8rem 0 0; max-width: 20rem; font: 400 0.875rem/1.55 var(--xl-ui); color: var(--xl-gray); }
@media (max-width: 900px) {
  .xl--home:not(.xl--empty) { grid-template-columns: minmax(0, 1fr); }
  .xl--home > .xl-about {
    grid-column: 1 / -1; grid-row: 2;
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.9rem;
    padding: 1rem 0 0.25rem;
  }
  .xl--home > .xl-about .xl-about__text { margin: 0; max-width: none; }
  .xl--home > .xl-list { grid-column: 1 / -1; grid-row: 3; }
}
/* the empty state (every published article is on the grid): one quiet link to the archive at the grid's right edge,
   just under the last row, where the state with entries has it (the head's right); no rule: the tiles' bottom edges
   close the grid */
.xl--empty {
  margin: clamp(0.75rem, 0.5rem + 0.6vw, 1.25rem) 0 0;
  text-align: right;
}

/* JavaScript off: the home page keeps its dark ground (main.js paints the cream wash as the reader scrolls), so the
   list sits on a tile's face and border, and reads as the tiles above it do; the empty state's link alone is cream
   on the dark ground, its arrow orange */
@media (scripting: none) {
  .xl--home:not(.xl--empty) {
    padding: clamp(1rem, 0.75rem + 1vw, 1.75rem) clamp(1rem, 0.6rem + 1.4vw, 2rem);
    background: var(--xl-face);
    border: 1px solid var(--xl-rule-strong);
    border-radius: 20px;
  }
  .xl--empty .xl-all { color: var(--xl-face); }
  .xl--empty .xl-all__arr { color: var(--xl-orange); }
  .xl--empty .xl-all:focus-visible { outline-color: var(--xl-face); }
}

/* ---------------------------------------------------------------- the archive (/blog; placed by article.css .xa-arc) */
.xl--archive.xl-list { border-top: 1px solid var(--xl-rule-strong); }
/* year headings, when the articles span more than one year */
.xl-year + .xl-year { margin-top: clamp(2.5rem, 2rem + 2vw, 4rem); }
.xl-year__title {
  margin: 0;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--xl-rule-strong);
  font: 300 clamp(1.75rem, 1.3rem + 1.6vw, 2.75rem)/1 var(--xl-display);
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--xl-ink);
}

@media (prefers-reduced-motion: reduce) {
  .xl *, .xl *::before, .xl *::after { transition: none !important; }
  .xl-item:hover .xl-thumb img { transform: none; }
}
/* generated by tools/articles/lib/feed.mjs: the thumbnail's stepped window (THUMB: 8 x 6 modules, [[0,6],[4,5],[6,4]] from the bottom; a sky picture's, .xl-thumb--hang, the same skyline from the top), stretched over its 4:3 box; the miniature text tile in proportion to a home column */
.xl-thumb--image { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 600' preserveAspectRatio='none'%3E%3Cpath d='M0 41.37C0 26.89 0 19.65 2.82 14.12C5.3 9.25 9.25 5.3 14.12 2.82C19.65 0 26.89 0 41.37 0L350.71 0C378.38 0 400.81 22.43 400.81 50.1L400.81 50.1C400.81 77.77 423.24 100.2 450.91 100.2L549.49 100.2C577.16 100.2 599.6 122.63 599.6 150.3L599.6 150.3C599.6 177.97 622.03 200.4 649.7 200.4L735.35 200.4C771.06 200.4 800 229.35 800 265.05L800 558.63C800 573.11 800 580.35 797.18 585.88C794.7 590.75 790.75 594.7 785.88 597.18C780.35 600 773.11 600 758.63 600L41.37 600C26.89 600 19.65 600 14.12 597.18C9.25 594.7 5.3 590.75 2.82 585.88C0 580.35 0 573.11 0 558.63Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 600' preserveAspectRatio='none'%3E%3Cpath d='M0 41.37C0 26.89 0 19.65 2.82 14.12C5.3 9.25 9.25 5.3 14.12 2.82C19.65 0 26.89 0 41.37 0L350.71 0C378.38 0 400.81 22.43 400.81 50.1L400.81 50.1C400.81 77.77 423.24 100.2 450.91 100.2L549.49 100.2C577.16 100.2 599.6 122.63 599.6 150.3L599.6 150.3C599.6 177.97 622.03 200.4 649.7 200.4L735.35 200.4C771.06 200.4 800 229.35 800 265.05L800 558.63C800 573.11 800 580.35 797.18 585.88C794.7 590.75 790.75 594.7 785.88 597.18C780.35 600 773.11 600 758.63 600L41.37 600C26.89 600 19.65 600 14.12 597.18C9.25 594.7 5.3 590.75 2.82 585.88C0 580.35 0 573.11 0 558.63Z'/%3E%3C/svg%3E"); }
.xl-thumb--image.xl-thumb--hang { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 600' preserveAspectRatio='none'%3E%3Cpath d='M0 41.37C0 26.89 0 19.65 2.82 14.12C5.3 9.25 9.25 5.3 14.12 2.82C19.65 0 26.89 0 41.37 0L758.63 0C773.11 0 780.35 0 785.88 2.82C790.75 5.3 794.7 9.25 797.18 14.12C800 19.65 800 26.89 800 41.37L800 336.16C800 371.86 771.06 400.81 735.35 400.81L648.89 400.81C621.67 400.81 599.6 422.88 599.6 450.1L599.6 450.1C599.6 477.32 577.53 499.39 550.3 499.39L451.11 499.39C423.33 499.39 400.81 521.92 400.81 549.7L400.81 549.7C400.81 577.48 378.29 600 350.51 600L41.37 600C26.89 600 19.65 600 14.12 597.18C9.25 594.7 5.3 590.75 2.82 585.88C0 580.35 0 573.11 0 558.63Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 600' preserveAspectRatio='none'%3E%3Cpath d='M0 41.37C0 26.89 0 19.65 2.82 14.12C5.3 9.25 9.25 5.3 14.12 2.82C19.65 0 26.89 0 41.37 0L758.63 0C773.11 0 780.35 0 785.88 2.82C790.75 5.3 794.7 9.25 797.18 14.12C800 19.65 800 26.89 800 41.37L800 336.16C800 371.86 771.06 400.81 735.35 400.81L648.89 400.81C621.67 400.81 599.6 422.88 599.6 450.1L599.6 450.1C599.6 477.32 577.53 499.39 550.3 499.39L451.11 499.39C423.33 499.39 400.81 521.92 400.81 549.7L400.81 549.7C400.81 577.48 378.29 600 350.51 600L41.37 600C26.89 600 19.65 600 14.12 597.18C9.25 594.7 5.3 590.75 2.82 585.88C0 580.35 0 573.11 0 558.63Z'/%3E%3C/svg%3E"); }
.xl-thumb--type { border-radius: calc(var(--xl-tw) * 0.04515); }
.xl-mini { top: 8.805cqi; left: 8.805cqi; right: 8.805cqi; font-size: 11.99cqi; margin-top: -0.1429em; }
.xl-mini--fit-80 { font-size: 9.592cqi; }
.xl-mini--fit-85 { font-size: 10.191cqi; }
.xl-mini--fit-90 { font-size: 10.791cqi; }
.xl-mini--fit-95 { font-size: 11.39cqi; }