/* Swiss / International Typographic Style */
:root {
  --ink: #0d0d0d;
  --paper: #fff;
  --red: #e30613;
  --gray: #757575;
  --rule: rgba(13, 13, 13, .22);
  --pagefind-ui-scale: 1;
  --pagefind-ui-primary: #e30613;
  --pagefind-ui-text: #0d0d0d;
  --pagefind-ui-background: #fff;
  --pagefind-ui-border: #0d0d0d;
  --pagefind-ui-tag: #f5f5f4;
  --pagefind-ui-border-width: 1px;
  --pagefind-ui-border-radius: 0;
  --pagefind-ui-font: Archivo, Helvetica, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; border-radius: 0 !important; box-shadow: none !important; }
/* Kill mobile font boosting: Chrome/Safari inflate text in wide blocks
   (code pres are width: max-content), which made snippets render huge. */
html { -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; text-rendering: optimizeLegibility; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: Archivo, Helvetica, Arial, sans-serif; font-size: 16px; }
body::before { display: block; height: 6px; background: var(--ink); content: ""; }
body.search-open { overflow: hidden; }
a { color: inherit; text-decoration: none; transition: color 120ms ease; }
a:hover { color: var(--red); }
button, input { font: inherit; }
button { color: inherit; }
img, svg { display: block; }
::selection { background: var(--red); color: var(--paper); }
:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
[hidden] { display: none !important; }
.caps, .section-label { font-size: 11px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; }
.site-wrap, .header-inner { width: min(1400px, calc(100% - 80px)); margin: 0 auto; }
.main-content { min-height: 60vh; }

/* Header */
.site-header { position: relative; z-index: 20; background: var(--paper); border-bottom: 1px solid var(--ink); }
.header-inner { min-height: 65px; display: flex; align-items: center; }
.wordmark { flex: 0 0 auto; }
.wordmark img { display: block; width: auto; height: 26px; filter: invert(1); }
.header-nav { display: flex; align-items: center; gap: 30px; margin-left: auto; }
.header-nav a, .nav-dropdown-trigger { white-space: nowrap; }
.nav-dropdown { position: relative; }
.nav-dropdown-trigger { display: flex; align-items: center; gap: 7px; padding: 22px 0; border: 0; background: transparent; cursor: pointer; font-size: 11px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; transition: color 120ms ease; }
.nav-dropdown-trigger:hover { color: var(--red); }
.nav-dropdown-menu { position: absolute; top: calc(100% - 1px); left: -16px; display: none; width: max-content; min-width: 210px; padding: 7px 0; background: var(--paper); border: 1px solid var(--ink); }
.nav-dropdown:hover .nav-dropdown-menu, .nav-dropdown:focus-within .nav-dropdown-menu, .nav-dropdown.open .nav-dropdown-menu { display: block; }
.nav-dropdown-menu a { display: block; padding: 10px 15px; font-size: 11px; font-weight: 600; letter-spacing: .11em; text-transform: uppercase; }
.nav-dropdown-menu a:hover { background: var(--red); color: var(--paper); }
.header-actions { display: flex; align-items: center; gap: 14px; margin-left: 28px; }
.header-icon { color: rgba(13,13,13,.6); }
.header-icon svg { width: 17px; height: 17px; fill: currentColor; }
.header-icon:hover { color: var(--red); }
.search-trigger { display: flex; align-items: center; gap: 7px; padding: 4px 0 4px 8px; border: 0; border-left: 1px solid var(--rule); background: transparent; cursor: pointer; transition: color 120ms ease; }
.search-trigger:hover { color: var(--red); }
.search-trigger svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
.search-hint { color: var(--gray); font-size: 9px; font-weight: 600; letter-spacing: .04em; }
.header-menu-toggle { display: none; width: 22px; padding: 2px 0; border: 0; background: transparent; cursor: pointer; }
.header-menu-toggle span { display: block; height: 1px; margin: 4px 0; background: currentColor; }
.mobile-menu { display: none; border-bottom: 1px solid var(--ink); background: var(--paper); }
.mobile-menu nav, .mobile-social { display: grid; }
.mobile-menu a { padding: 13px 20px; border-bottom: 1px solid var(--rule); }
.mobile-social { grid-template-columns: repeat(4, 1fr); }
.mobile-social a { text-align: center; border-right: 1px solid var(--rule); }

/* Search */
.search-modal { position: fixed; z-index: 100; inset: 0; display: none; place-items: start center; padding-top: 12vh; }
.search-modal.open { display: grid; }
.search-modal-backdrop { position: absolute; inset: 0; width: 100%; border: 0; background: rgba(13,13,13,.6); cursor: default; }
.search-modal-content { position: relative; width: min(720px, calc(100% - 40px)); max-height: 74vh; overflow: auto; padding: 22px; background: var(--paper); border: 1px solid var(--ink); }
.search-modal-label { padding-bottom: 14px; border-bottom: 1px solid var(--ink); color: var(--red); }
.search-unavailable { padding: 24px 0; color: var(--gray); text-align: center; }
#search-modal-input .pagefind-ui__search-input, #search-modal-input .pagefind-ui__result, #search-modal-input .pagefind-ui__button { border-color: var(--ink); border-radius: 0; }
#search-modal-input .pagefind-ui__search-input:focus { border-color: var(--red); }
#search-modal-input .pagefind-ui__result-link { font-weight: 700; }

/* Home and listings */
.home-hero { padding: 92px 0 60px; }
.home-hero h1 { max-width: 1180px; margin: 0; font-size: clamp(48px, 7vw, 96px); font-weight: 800; letter-spacing: -.04em; line-height: .95; }
.dot, .section-label { color: var(--red); }
.hero-sub { margin-top: 38px; color: var(--gray); }
.listing-header { padding: 62px 0 42px; border-bottom: 1px solid var(--ink); }
.listing-header h1 { max-width: 1080px; margin: 12px 0 0; font-size: clamp(44px, 6.5vw, 86px); font-weight: 800; letter-spacing: -.036em; line-height: .97; }
.listing-count { margin-top: 24px; color: var(--gray); }
.listing-category-rule { height: 3px; }
/* "The work" plate: full-bleed sheet of inlined diagram tiles above the index.
   The grid's ink background paints the 1px hairlines between cells, so slot
   count must always fill whole rows or the surplus shows as black. */
.plate-label { padding: 0 0 12px; color: var(--red); }
.plate { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; width: 100vw; margin-left: calc(50% - 50vw); margin-bottom: 64px; background: var(--ink); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.plate-cell, .plate-hole { position: relative; display: block; overflow: hidden; background: var(--paper); }
.plate-hole { aspect-ratio: 588 / 420; }
.plate-art { display: block; }
/* Only the outer crop wrapper is responsive; the nested source SVG keeps the
   width/height that position it inside the crop window. */
.plate-art > svg { display: block; width: 100%; height: auto; }
/* Caption fades rather than slides: animating a tall element into place read as
   lag. The red edge is untransitioned so the cell responds on contact. */
.plate-cap { position: absolute; inset: auto 0 0 0; display: flex; gap: 9px; align-items: baseline; padding: 11px 13px; background: var(--paper); border-top: 3px solid var(--bar); opacity: 0; transition: opacity 80ms linear; }
.plate-cell:hover .plate-cap, .plate-cell:focus-visible .plate-cap { opacity: 1; }
.plate-cell:hover, .plate-cell:focus-visible { outline: 2px solid var(--red); outline-offset: -2px; }
.plate-no { color: var(--red); font-size: 10px; font-weight: 700; letter-spacing: .1em; }
.plate-title { font-size: 13px; font-weight: 700; letter-spacing: -.01em; line-height: 1.2; }
.index-rows { border-top: 1px solid var(--ink); }
.index-row { display: grid; grid-template-columns: 3px minmax(0, 1fr); gap: 0 26px; padding: 30px 0; border-bottom: 1px solid rgba(13, 13, 13, .1); }
.row-bar { align-self: stretch; }
.row-body { min-width: 0; }
.row-top { display: flex; gap: 26px; color: var(--gray); }
.row-no { color: var(--red); font-weight: 700; font-variant-numeric: tabular-nums; }
.row-title { max-width: 1060px; margin: 12px 0 0; font-size: 33px; font-weight: 700; letter-spacing: -.025em; line-height: 1.12; transition: color 120ms ease; }
.index-row:hover .row-title { color: var(--red); }
.row-comments { margin-left: 5px; color: var(--red); font-size: 10px; font-weight: 700; vertical-align: super; }
.term-row { display: grid; grid-template-columns: 48px 9px minmax(0, 1fr) 170px 44px; gap: 22px; align-items: center; padding: 27px 0; border-bottom: 1px solid rgba(13, 13, 13, .1); }
.category-swatch { display: inline-block; width: 9px; height: 9px; flex: 0 0 9px; }
.term-row h2 { margin: 0; font-size: 29px; font-weight: 700; letter-spacing: -.022em; line-height: 1.1; }
.term-count { color: var(--gray); }
.row-arrow { justify-self: end; font-size: 22px; transition: color 120ms ease, transform 120ms ease; }
.term-row:hover .row-arrow { color: var(--red); transform: translateX(5px); }

/* Article */
.article-header { padding: 60px 0 44px; border-bottom: 1px solid var(--ink); }
.article-kicker { color: var(--red); }
.article-header h1 { max-width: 940px; margin: 18px 0 0; font-size: clamp(36px, 5vw, 64px); font-weight: 800; letter-spacing: -.035em; line-height: 1; }
.unlisted-notice { display: inline-block; margin-top: 22px; padding: 7px 9px; border: 1px solid var(--ink); font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.article-grid { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 56px; padding: 44px 0 72px; }
.article-rail { position: sticky; top: 32px; align-self: start; }
.rail-block { margin-bottom: 6px; padding: 12px 0 22px; border-top: 1px solid var(--rule); }
.rail-label { color: var(--gray); font-size: 10px; }
.rail-value { margin-top: 6px; font-size: 12px; font-weight: 600; letter-spacing: .08em; line-height: 1.5; text-transform: uppercase; }
.rail-value .category-swatch { margin-right: 8px; vertical-align: 1px; }
.rail-tags { overflow-wrap: anywhere; }
#TableOfContents ul { margin: 0; padding: 0; list-style: none; }
#TableOfContents ul ul { padding-left: 13px; }
#TableOfContents ul ul ul { display: none; }
#TableOfContents a { display: block; margin-top: 12px; font-size: 11.5px; font-weight: 600; letter-spacing: .1em; line-height: 1.35; text-transform: uppercase; }
/* Include-composed posts can yield dozens of entries; keep the sticky rail
   inside the viewport instead of running past the fold. */
.rail-toc #TableOfContents { max-height: calc(100vh - 340px); overflow-y: auto; overscroll-behavior: contain; }
.prose { width: 100%; max-width: none; min-width: 0; }
/* Text column: prose keeps a coherent measure and its rules align to it;
   only code, tables, and figures bleed out to the full article column. */
.prose > * { max-width: 880px; }
.prose .highlight, .prose > pre, .prose table, .prose figure, .prose img, .prose video, .prose > .viz-embed { max-width: 100%; }
/* Embedded data-viz widgets: framed figures, chrome shared by every
   *-inline shortcode; each shortcode only sets its own width/aspect. */
.viz-embed { display: block; width: 100%; margin: 30px 0; overflow: hidden; background: var(--paper); border: 1px solid var(--ink); }
.crosspost { display: flex; align-items: center; gap: 11px; margin: 0 0 30px; padding: 11px 15px; background: #f5f5f4; border: 1px solid var(--rule); border-left: 3px solid var(--red); color: var(--gray); font-size: 13.5px; }
.crosspost svg { flex-shrink: 0; fill: var(--ink); }
.crosspost a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.crosspost a:hover { color: var(--red); }
.prose p { margin: 0 0 26px; color: #1b1b1b; font-size: 17.5px; line-height: 1.72; }
.prose a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.prose a:hover { color: var(--red); }
.prose ol, .prose ul { margin: 0 0 26px; padding-left: 24px; }
.prose li { margin-bottom: 8px; line-height: 1.6; }
.prose li::marker { color: var(--red); font-weight: 700; }
.prose h2 { margin: 52px 0 22px; padding-top: 22px; border-top: 2px solid var(--ink); font-size: 24px; font-weight: 800; letter-spacing: -.005em; line-height: 1.15; text-transform: uppercase; }
.prose h3 { margin: 36px 0 16px; font-size: 18px; font-weight: 700; line-height: 1.25; }
.prose h2 .hx, .prose h3 .hx { margin-right: 4px; color: var(--red); text-transform: none; }
.prose blockquote { margin: 0 0 26px; padding: 2px 0 2px 22px; border-left: 4px solid var(--red); font-size: 18px; font-weight: 500; }
.prose blockquote p { margin: 0; font-size: 18px; }
.prose hr { height: 1px; margin: 40px 0; border: 0; background: var(--rule); }
.prose hr:has(+ h2) { display: none; }
.prose :not(pre) > code { padding: 2px 4px; border: 1px solid var(--rule); background: #f5f5f4; font-family: MonoLisa, monospace; font-size: .84em; }
.prose .highlight { width: 100%; max-width: 100%; margin: 6px 0 30px; overflow-x: auto; border-top: 2px solid var(--ink); background: #f5f5f4; }
.prose .highlight > div, .prose .highlight pre { margin: 0; background: transparent !important; }
.prose .highlight pre { width: max-content; min-width: 100%; padding: 20px 22px; overflow: visible; }
.prose .highlight code { font-family: MonoLisa, monospace; font-size: 12.5px; line-height: 1.65; }
.prose > pre { margin: 6px 0 30px; padding: 20px 22px; overflow-x: auto; border-top: 2px solid var(--ink); background: #f5f5f4; }
.prose > pre code { font-family: MonoLisa, monospace; font-size: 12.5px; line-height: 1.65; }
.prose table { width: 100%; margin: 12px 0 30px; border-collapse: collapse; font-size: 14.5px; }
.prose th { padding: 11px 10px; border-bottom: 1px solid var(--ink); font-size: 11px; font-weight: 600; letter-spacing: .13em; text-align: left; text-transform: uppercase; }
.prose td { padding: 11px 10px; border-bottom: 1px solid var(--rule); }
.prose figure { max-width: 100%; margin: 10px 0 30px; }
.prose img, .prose video { max-width: 100%; height: auto; }
.prose figcaption { margin-top: 10px; color: var(--gray); font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
/* Images used as glyphs inside running text (e.g. the `0x![](0.gif):` heading
   gag) must be font-sized and inline, not promoted to block figures. */
.prose h1 img, .prose h2 img, .prose h3 img, .prose h4 img { display: inline-block; height: 1em; width: auto; margin: 0; vertical-align: -.1em; }
.prose p img:not(:only-child) { display: inline-block; height: 1.15em; width: auto; margin: 0; vertical-align: -.18em; }
#TableOfContents img { display: inline-block; height: 1em; width: auto; margin: 0; vertical-align: -.1em; }
/* Line numbers are chrome: never selected, never copied with the code. */
.prose .highlight .lnt, .prose .highlight .ln { user-select: none; -webkit-user-select: none; }
/* Selection inside code stays quiet so tokens remain readable. */
.prose .highlight ::selection, .prose pre ::selection, .prose :not(pre) > code::selection { background: rgba(227, 6, 19, .16); color: inherit; }
.prose .ps-msg, .prose .ps-threshold, .prose .ps-kw, .prose .ps-op, .prose .ps-fn, .prose .ps-builtin { color: #2c2c2c; }
.prose .ps-threshold, .prose .ps-builtin { color: var(--red); }
.prose .ps-kw { color: var(--ink); font-weight: 700; }
.prose .ps-comment { color: #9d9d9d; }

/* Article extras */
.article-extras { max-width: none; margin: 0 0 0 288px; padding-bottom: 50px; }
.share { position: relative; display: flex; flex-shrink: 0; align-self: flex-start; border: 1px solid var(--ink); }
.share-item { display: grid; width: 38px; height: 34px; place-items: center; border: 0; color: var(--ink); font: inherit; background: var(--paper); cursor: pointer; transition: color 120ms ease, background 120ms ease; }
.share-item + .share-item { border-left: 1px solid var(--ink); }
.share-item:hover { color: var(--paper); background: var(--ink); }
.share-copy .icon-check { display: none; }
.share-copy[data-copied] { color: var(--paper); background: var(--red); }
.share-copy[data-copied] .icon-link { display: none; }
.share-copy[data-copied] .icon-check { display: block; }
.share-preview { position: absolute; top: calc(100% + 9px); right: -1px; z-index: 30; width: 340px; padding: 8px; background: var(--paper); border: 1px solid var(--ink); visibility: hidden; opacity: 0; transform: translateY(-4px); transition: opacity 140ms ease, transform 140ms ease, visibility 140ms; }
.share:hover .share-preview, .share:focus-within .share-preview { visibility: visible; opacity: 1; transform: none; }
.share-preview img { display: block; width: 100%; height: auto; }
.share-preview-label { display: block; margin-top: 7px; color: var(--gray); font-size: 10px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; }
.article-head-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.post-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; padding: 22px 0 34px; border-top: 1px solid var(--ink); }
.post-nav-item { display: flex; flex-direction: column; gap: 8px; }
.post-nav-next { text-align: right; }
.post-nav-label { color: var(--red); }
.post-nav-title { font-size: 17px; font-weight: 700; line-height: 1.25; }
.author-box { display: flex; align-items: center; gap: 15px; padding: 22px 0; border-top: 1px solid var(--rule); }
.author-box-avatar { width: 44px; height: 44px; object-fit: cover; }
.author-box-name { margin: 0 0 3px; font-size: 15px; font-weight: 700; }
.author-box-bio { margin: 0; color: var(--gray); font-size: 14.5px; line-height: 1.45; }
.related-posts { margin-top: 34px; }
.related-list { margin-top: 10px; border-top: 1px solid var(--rule); }
.related-item { display: grid; grid-template-columns: 42px 1fr 24px; gap: 12px; align-items: baseline; padding: 17px 0; border-bottom: 1px solid var(--rule); font-size: 18px; font-weight: 700; }
.related-no { color: var(--red); font-size: 11px; }
.related-arrow { justify-self: end; transition: color 120ms ease, transform 120ms ease; }
.related-item:hover .related-arrow { transform: translateX(5px); }
.comments { margin-top: 48px; padding-top: 30px; border-top: 1px solid var(--ink); }

/* Footer and legacy sidebar */
.site-footer { display: flex; justify-content: space-between; margin-top: -1px; padding: 22px 0 44px; border-top: 1px solid var(--ink); color: var(--gray); }
.sidebar { max-width: 320px; background: var(--paper); border: 1px solid var(--ink); }
.sidebar-inner { padding: 22px; }
.sidebar-nav, .sidebar-section { display: grid; gap: 11px; margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--rule); }
.sidebar-section h3 { margin: 0; color: var(--red); }
.category-list { margin: 0; padding: 0; list-style: none; }
.category-list li { margin: 8px 0; }
.social-links { grid-template-columns: 1fr 1fr; }

@media (max-width: 1040px) {
  .article-grid { grid-template-columns: 1fr; gap: 0; }
  .article-rail { position: static; display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; margin-bottom: 12px; }
  .rail-toc { grid-column: 1 / -1; }
  .rail-toc #TableOfContents { max-height: none; overflow: visible; }
  .article-extras { margin-left: 0; }
}

@media (max-width: 760px) {
  .site-wrap, .header-inner { width: calc(100% - 40px); }
  /* Phones get one snap-scrolling row instead of a grid: flex has no empty
     slots, so the ink background can never show through. */
  .plate { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; margin-bottom: 40px; }
  .plate-hole { display: none; }
  .plate-cell { flex: 0 0 62%; scroll-snap-align: start; }
  .plate-cap { display: none; }
  .header-inner { min-height: 58px; }
  .header-nav, .header-icon, .search-hint { display: none; }
  .header-actions { margin-left: auto; }
  .search-trigger { border-left: 0; padding-left: 0; }
  .header-menu-toggle { display: block; }
  .mobile-menu.open { display: block; }
  .wordmark img { height: 22px; }
  .home-hero { padding: 44px 0 32px; }
  .home-hero h1 { font-size: 38px; letter-spacing: -.03em; line-height: 1.02; }
  .hero-sub { margin-top: 22px; }
  .listing-header { padding: 40px 0 30px; }
  .listing-header h1 { font-size: 42px; letter-spacing: -.03em; line-height: 1.02; }
  .index-row { gap: 0 16px; padding: 20px 0; }
  .row-top { flex-wrap: wrap; gap: 5px 14px; }
  .row-title { margin-top: 9px; font-size: 22px; line-height: 1.16; }
  .term-row { grid-template-columns: 34px 9px minmax(0, 1fr) auto; gap: 12px; padding: 20px 0; }
  .term-row h2 { font-size: 22px; }
  .term-row .row-arrow { display: none; }
  .article-header { padding: 40px 0 28px; }
  .article-header h1 { font-size: 36px; line-height: 1.06; }
  .article-head-row { flex-direction: column; gap: 14px; align-items: flex-start; }
  .share-preview { display: none; }
  .article-grid { padding: 32px 0 48px; }
  .article-rail { grid-template-columns: 1fr; }
  .rail-toc { grid-column: auto; }
  .prose p { font-size: 16.5px; }
  .prose h2 { font-size: 19px; }
  .prose .highlight pre, .prose > pre { padding: 14px 16px; }
  .prose .highlight code, .prose > pre code { font-size: 11.3px; }
  .post-nav { grid-template-columns: 1fr; }
  .post-nav-next { text-align: left; }
  .author-box { align-items: flex-start; }
  .site-footer { flex-direction: column; align-items: flex-start; gap: 8px; }
}