/* Urban Art Core. Nothing shouts: the photographs and the data carry the page.
   Cool graphite grounds in light and dark, Geist for everything, Geist Mono for
   identifiers, hairlines between groups, one accent that marks data and links. */
@layer reset, tokens, base, layout, components, utilities, responsive, print;

@font-face {
  font-family: Geist;
  src: url("/fonts/geist-latin-wght.19f9c92546aa300c312235e3125af1b81394d8db9a4bc4a425cd5b641d2d54e1.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("/fonts/geist-mono-latin-wght.684ad5b531f81d43c1e8c7038262d5db7cdc1f68006e04d6c7769efa8d33c8cc.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
/* Arial scaled to Geist's metrics, so text keeps its place until Geist has loaded. */
@font-face { font-family: "Geist Fallback"; src: local("Arial"), local("ArialMT"); size-adjust: 104.71%; ascent-override: 95.98%; descent-override: 28.17%; line-gap-override: 0%; }

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  body, h1, h2, h3, h4, p, figure, dl, dd, ol, ul, blockquote { margin: 0; }
  img, picture, video, iframe { display: block; max-width: 100%; height: auto; }
  button, input, select, textarea { font: inherit; color: inherit; }
  [hidden] { display: none !important; }
}

@layer tokens {
  /* Every colour is an OKLCH pair resolved by light-dark(). The root follows the device;
     data-theme (set by theme.js from the masthead toggle) only flips the scheme. */
  :root {
    color-scheme: light dark;
    --ground: light-dark(oklch(98.5% 0.003 250), oklch(21% 0.008 255));
    --ground-2: light-dark(oklch(95.5% 0.005 250), oklch(25% 0.01 255));
    --ground-3: light-dark(oklch(91.5% 0.007 250), oklch(29.5% 0.011 255));
    --ink: light-dark(oklch(24% 0.01 255), oklch(91% 0.005 255));
    --ink-2: light-dark(oklch(47% 0.012 255), oklch(72% 0.01 255));
    --rule: light-dark(oklch(88% 0.006 250), oklch(33% 0.01 255));
    --rule-strong: light-dark(oklch(62% 0.01 255), oklch(54% 0.012 255));
    /* the one accent: rust by day, desaturated and lighter by night */
    --signal: light-dark(oklch(48% 0.12 35), oklch(79% 0.09 45));
    --signal-soft: color-mix(in oklch, var(--signal) 14%, transparent);
    --on-signal: light-dark(oklch(98.5% 0.003 250), oklch(21% 0.008 255));
    --scrim: rgb(10 12 14 / .88);

    --font: Geist, "Geist Fallback", "SF Pro Text", "Segoe UI", system-ui, sans-serif;
    --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    --text: clamp(1.0625rem, 1.02rem + .15vw, 1.125rem);
    --small: .875rem;
    --tiny: .8125rem;
    --h1: clamp(2rem, 1.5rem + 2vw, 3.1rem);
    --h2: clamp(1.4rem, 1.25rem + .6vw, 1.7rem);
    --h3: 1.2rem;
    --lede: clamp(1.125rem, 1.08rem + .25vw, 1.25rem);
    --figure: clamp(1.6rem, 1.35rem + 1vw, 2.25rem);

    --s1: .25rem; --s2: .5rem; --s3: .75rem; --s4: 1rem; --s5: 1.5rem; --s6: 2rem; --s7: 3rem; --s8: 4.5rem; --s9: 7rem;
    --gutter: clamp(1.25rem, 4vw, 3rem);
    --measure: 66ch;
    --page-max: 78rem;
    --radius: 10px; --radius-plate: 14px; --radius-img: 6px;
    --ease: cubic-bezier(.2, .7, .2, 1);
    --dur-fast: 120ms; --dur: 220ms;
  }
  :root[data-theme=light] { color-scheme: light; }
  :root[data-theme=dark] { color-scheme: dark; }
  @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0ms; --dur: 0ms; } }
}

@layer base {
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: var(--s5); }
  /* The body is a container so full-bleed bands (the home hero) can span its width in cqw; 100vw would include the scrollbar and overflow. */
  body { background: var(--ground); color: var(--ink); font-family: var(--font); font-size: var(--text); line-height: 1.7; font-feature-settings: "kern", "liga", "calt"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; min-height: 100dvh; display: flex; flex-direction: column; container-type: inline-size; }
  h1, h2, h3, h4 { font-weight: 600; line-height: 1.3; letter-spacing: -.015em; text-wrap: balance; overflow-wrap: break-word; }
  h1 { font-size: var(--h1); line-height: 1.1; letter-spacing: -.03em; }
  h2 { font-size: var(--h2); line-height: 1.25; }
  h3 { font-size: var(--h3); }
  h4 { font-size: 1rem; letter-spacing: 0; }
  p { text-wrap: pretty; }
  a { color: var(--signal); text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; text-decoration-color: color-mix(in oklch, currentColor 45%, transparent); transition: color var(--dur-fast) var(--ease), text-decoration-color var(--dur-fast) var(--ease); }
  a:hover { text-decoration-color: currentColor; }
  :focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; border-radius: 4px; }
  ::selection { background: var(--signal-soft); color: var(--ink); }
  time, .num { font-variant-numeric: tabular-nums; }
  code, kbd, pre { font-family: var(--mono); font-size: .875em; }
  code { background: var(--ground-3); padding: .1em .35em; border-radius: .3em; overflow-wrap: anywhere; }
  pre { background: var(--ground-2); border: 1px solid var(--rule); border-radius: var(--radius); padding: var(--s4) var(--s5); overflow-x: auto; white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--tiny); line-height: 1.6; }
  pre code { background: none; padding: 0; }
  dt { color: var(--ink-2); font-size: var(--tiny); font-weight: 500; }
  dd { overflow-wrap: anywhere; }
  button, select, input, textarea { background: var(--ground); border: 1px solid var(--rule-strong); border-radius: 8px; color: var(--ink); }
  button, select { min-height: 2.5rem; padding: .45rem .9rem; cursor: pointer; font-size: var(--small); font-weight: 500; }
  button:hover { border-color: var(--ink-2); background: color-mix(in oklch, var(--ink) 6%, transparent); }
  button:disabled { opacity: .45; cursor: default; }
  textarea { width: 100%; padding: .8rem; }
  table { border-collapse: collapse; width: 100%; font-size: var(--small); }
  th, td { text-align: left; padding: var(--s3); border-bottom: 1px solid var(--rule); vertical-align: top; }
  th { font-weight: 500; font-size: var(--tiny); color: var(--ink-2); }
  hr { border: 0; border-top: 1px solid var(--rule); margin: var(--s6) 0; }
}

@layer layout {
  .wrap, .masthead > div, .site-footer > div { width: min(100% - 2 * var(--gutter), var(--page-max)); margin-inline: auto; }
  main { flex: 1; width: min(100% - 2 * var(--gutter), var(--page-max)); margin-inline: auto; padding-block: var(--s6) var(--s8); }
  main:focus { outline: none; }
  /* The masthead: wordmark, primary navigation, theme toggle, on a hairline. */
  .masthead { border-bottom: 1px solid var(--rule); }
  .masthead > div { display: flex; align-items: center; gap: var(--s5) var(--s6); min-height: 3.75rem; }
  .wordmark { display: inline-flex; flex: none; width: 13.625rem; max-width: 100%; }
  .wordmark svg { display: block; width: 100%; height: auto; }
  .wordmark-mark { fill: var(--signal); }
  .wordmark-type { fill: var(--ink); }
  .primary-nav { display: flex; gap: var(--s5); margin-left: auto; font-size: var(--small); font-weight: 500; }
  .primary-nav a { display: inline-flex; align-items: center; gap: .35rem; color: var(--ink-2); text-decoration: none; padding-block: 1.15rem; border-bottom: 2px solid transparent; margin-bottom: -1px; }
  .primary-nav a:hover, .primary-nav a[aria-current] { color: var(--ink); }
  .primary-nav a[aria-current] { border-bottom-color: var(--signal); }
  .theme-toggle { display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem; min-height: 0; padding: 0; color: var(--ink-2); background: none; }
  .theme-toggle .icon { width: 1.05rem; height: 1.05rem; }
  .theme-toggle[aria-pressed=false] .icon:last-child, .theme-toggle[aria-pressed=true] .icon:first-child { display: none; }
  /* The footer: who made it, what to explore, what to take. */
  .site-footer { border-top: 1px solid var(--rule); background: var(--ground-2); font-size: var(--small); }
  .site-footer > div:first-child { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 2.2fr); gap: var(--s7); padding-block: var(--s7); }
  .site-footer-about p { color: var(--ink-2); max-width: 40ch; margin-top: var(--s3); }
  .site-footer-about a { color: inherit; }
  .site-footer-nav { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s5); }
  .site-footer-nav h2 { font-size: var(--tiny); font-weight: 500; color: var(--ink-2); margin-bottom: var(--s2); letter-spacing: 0; }
  .site-footer-nav ul { list-style: none; padding: 0; }
  .site-footer-nav li { margin-bottom: .25rem; }
  .site-footer-nav a, .site-footer-legal a { color: var(--ink); text-decoration: none; display: inline-flex; align-items: center; gap: .45rem; min-height: 1.5rem; }
  .site-footer-nav a:hover, .site-footer-legal a:hover { color: var(--signal); }
  .site-footer-nav .icon { color: var(--ink-2); }
  .site-footer-legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s2) var(--s4); padding-block: var(--s4); border-top: 1px solid var(--rule); color: var(--ink-2); }
  .site-footer-legal nav { display: flex; gap: var(--s4); }
  .skip { position: absolute; left: var(--s4); top: -100px; z-index: 100; background: var(--ground); padding: var(--s3) var(--s4); border-radius: var(--radius); }
  .skip:focus { top: var(--s4); }

  /* The page skeleton: breadcrumb, then eyebrow, h1, lede, a meta line and a facts row. */
  .crumbs { font-size: var(--small); color: var(--ink-2); margin-bottom: var(--s5); }
  .crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); list-style: none; padding: 0; }
  .crumbs li + li::before { content: "/"; margin-right: var(--s2); color: var(--rule-strong); }
  .crumbs a { color: var(--ink-2); text-decoration: none; }
  .crumbs a:hover { color: var(--ink); }
  .crumbs [aria-current] { color: var(--ink); }
  .eyebrow { display: block; margin-bottom: var(--s3); font-size: var(--small); font-weight: 500; line-height: 1.3; color: var(--ink-2); letter-spacing: 0; text-transform: none; }
  .eyebrow a { color: inherit; text-decoration: none; }
  .eyebrow a:hover { color: var(--ink); text-decoration: underline; }
  .eyebrow .icon { width: .95em; height: .95em; vertical-align: -.1em; color: var(--signal); margin-right: .2em; }
  .lede, .dek { font-size: var(--lede); line-height: 1.55; color: var(--ink-2); max-width: 60ch; text-wrap: pretty; }
  .page-head { margin-bottom: var(--s7); }
  .page-head h1 { margin-bottom: var(--s3); }
  .page-head-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); margin-top: var(--s4); font-size: var(--small); color: var(--ink-2); }
  .page-head-meta a { color: var(--ink); }
  .page-head .facts { margin-top: var(--s6); padding-top: var(--s5); border-top: 1px solid var(--rule); }
  .facts { display: flex; flex-wrap: wrap; gap: var(--s4) var(--s7); }
  .facts > div { display: grid; gap: var(--s1); align-content: start; }
  .facts dt { white-space: nowrap; }
  .facts dd { font-weight: 600; font-size: var(--figure); letter-spacing: -.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
  .facts dd.muted { font-size: 1rem; font-weight: 500; letter-spacing: 0; color: var(--ink); }
  .facts dd.words { font-weight: 500; font-size: var(--small); letter-spacing: 0; line-height: 1.4; }
  .facts a { color: var(--ink); text-decoration: none; }
  .facts a:hover { color: var(--signal); }
  /* A link inside a line of text ("Banksy, 120 posts") needs an underline to stand out from it. */
  .facts dd.muted a { text-decoration: underline 1px color-mix(in oklch, currentColor 45%, transparent); text-underline-offset: .2em; }
  .facts dd.muted a:hover { text-decoration-color: currentColor; }
  /* Entity head: title column and one at-a-glance panel beside it. */
  .entity-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(16rem, 21rem); gap: var(--s6) var(--s8); align-items: start; margin-bottom: var(--s7); }
  .entity-head .page-head { margin-bottom: 0; }
  .fact-panel { display: grid; gap: var(--s4); padding: var(--s5); background: var(--ground-2); border-radius: var(--radius-plate); font-size: var(--small); }
  .fact-figure { display: flex; align-items: end; justify-content: space-between; gap: var(--s4); }
  .fact-figure p { display: grid; gap: var(--s1); margin: 0; color: var(--ink-2); line-height: 1.2; font-variant-numeric: tabular-nums; }
  .fact-number { color: var(--ink); font-weight: 500; }
  .fact-number strong { font-size: var(--figure); font-weight: 600; letter-spacing: -.03em; line-height: 1; margin-right: .1em; }
  .spark { list-style: none; margin: 0; padding: 0; display: flex; align-items: stretch; gap: 4px; height: 3.25rem; }
  .spark li { display: grid; grid-template-rows: 1fr auto; justify-items: center; gap: 4px; width: 1.4rem; }
  .spark-bar { align-self: end; width: 100%; height: max(var(--n), 2px); background: var(--signal); border-radius: 3px 3px 0 0; }
  .spark-year { font-family: var(--mono); font-size: 10px; line-height: 1; color: var(--ink-2); }
  .fact-list { display: grid; margin: 0; border-top: 1px solid var(--rule); }
  .fact-list > div { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: var(--s3); padding-block: var(--s2); }
  .fact-list > div + div { border-top: 1px solid var(--rule); }
  .fact-list dt { color: var(--ink-2); }
  .fact-list dd { margin: 0; color: var(--ink); }
  .fact-list a, .fact-foot a { color: var(--ink); text-decoration: none; }
  .fact-list a:hover, .fact-foot a:hover { color: var(--signal); text-decoration: underline; }
  /* Dot-grid locator map at the top of a place's panel (assets/maps/<slug>.svg). */
  .fact-map { margin: calc(-1 * var(--s5)) calc(-1 * var(--s5)) 0; }
  .place-map { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; border-radius: var(--radius-plate) var(--radius-plate) 0 0; background: var(--ground-2); }
  .map-dots { stroke: var(--rule-strong); opacity: .55; fill: none; }
  .map-country { stroke: var(--ink-2); fill: none; }
  .map-others { stroke: var(--ink); opacity: .55; fill: none; }
  .map-halo { fill: var(--signal); opacity: .2; }
  .map-mark { fill: var(--signal); stroke: var(--ground-2); stroke-width: 3; }
  .fact-foot { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s2); margin: 0; font-size: var(--tiny); color: var(--ink-2); }
  .fact-foot { justify-content: space-between; margin-top: calc(-1 * var(--s2)); padding-top: var(--s3); border-top: 1px solid var(--rule); }
  .page-foot { margin-top: var(--s8); padding-top: var(--s5); border-top: 1px solid var(--rule); color: var(--ink-2); font-size: var(--small); }
  .page-foot h2 { font-size: var(--h3); margin-bottom: var(--s3); }
  .section { margin-top: var(--s8); }
  /* Sections further down a long page skip style and layout work until they near the viewport. */
  main > .section, main > section.section { content-visibility: auto; contain-intrinsic-size: auto 40rem; }
  .section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s2) var(--s5); margin-bottom: var(--s5); }
  .section-head p { color: var(--ink-2); font-size: var(--small); max-width: 56ch; }
  .section-title { font-size: var(--h2); }
  .prose { max-width: var(--measure); }
}

@layer components {
  .visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .icon { width: 1em; height: 1em; flex: none; vertical-align: -.125em; }
  .small, .note { font-size: var(--small); color: var(--ink-2); }
  .muted { color: var(--ink-2); }
  .count, .n { margin-left: .35em; font-size: var(--small); font-weight: 500; color: var(--ink-2); font-variant-numeric: tabular-nums; letter-spacing: 0; }
  .text-link { display: inline-flex; align-items: center; gap: .35em; min-height: 2.5rem; font-weight: 500; font-size: var(--small); text-decoration: none; }
  .text-link:hover { text-decoration: underline; }

  /* Surfaces: a panel is a block of another kind; a plate frames a data view. */
  .panel { background: var(--ground-2); border-radius: var(--radius); padding: var(--s5); }
  .panel > :last-child { margin-bottom: 0; }
  .plate { background: var(--ground-2); border: 1px solid var(--rule); border-radius: var(--radius-plate); padding: var(--s4) var(--s5); overflow: hidden; }
  .plate-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s2) var(--s4); font-size: var(--small); margin-bottom: var(--s3); }
  .plate-head > :first-child { font-weight: 500; }
  .plate-head a { text-decoration: none; }
  .plate-head a:hover { text-decoration: underline; }

  /* Buttons: `.button` is the one filled action of a view, `.button.quiet` every other one. */
  .button { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); font-weight: 500; font-size: var(--small); line-height: 1; padding: .7em 1.1em; min-height: 0; border-radius: var(--radius); border: 1px solid var(--signal); background: var(--signal); color: var(--on-signal); text-decoration: none; white-space: nowrap; cursor: pointer; }
  .button:hover { background: color-mix(in oklch, var(--signal) 82%, var(--ink)); border-color: color-mix(in oklch, var(--signal) 82%, var(--ink)); color: var(--on-signal); }
  .button.quiet { background: transparent; border-color: var(--rule-strong); color: var(--ink); }
  .button.quiet:hover { background: color-mix(in oklch, var(--ink) 6%, transparent); border-color: var(--ink-2); color: var(--ink); }

  /* Chips: a short label in a pill outline. */
  .chips { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s1) var(--s2); }
  .chip, .chips li { display: inline-flex; align-items: center; gap: .35em; min-height: 1.5rem; font-size: var(--tiny); font-weight: 500; padding: .1em .65em; border-radius: 999px; border: 1px solid var(--rule); background: transparent; color: var(--ink-2); line-height: 1.5; white-space: nowrap; }
  .chips a { color: var(--ink); text-decoration: none; }
  .chips li:hover { border-color: var(--rule-strong); }
  .chips .count { margin-left: 0; font-size: inherit; }

  /* Key/value: a definition list as a grid. */
  .kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--s2) var(--s5); font-size: var(--small); }
  .kv dt { padding-top: .15em; display: flex; align-items: center; gap: .4rem; }
  .kv dt .icon { color: var(--signal); }
  .kv a { color: var(--ink); }
  .kv a:hover { color: var(--signal); }

  /* Steps: a numbered procedure, one row per step; the current one has a rail. */
  .steps { list-style: none; counter-reset: step; padding: 0; }
  .steps > li { counter-increment: step; position: relative; padding: var(--s2) 0 var(--s2) 2rem; border-top: 1px solid var(--rule); border-left: 2px solid transparent; font-size: var(--small); line-height: 1.4; }
  .steps > li::before { content: counter(step); position: absolute; left: var(--s2); top: var(--s2); font-weight: 500; color: var(--ink-2); font-variant-numeric: tabular-nums; }
  .steps > li:last-child { border-bottom: 1px solid var(--rule); }
  .steps > li[aria-current] { border-left-color: var(--signal); }
  .steps > li[aria-current] a { color: var(--ink); font-weight: 600; }
  .steps a { color: var(--ink); text-decoration: none; }
  .steps a:hover { color: var(--signal); }
  .steps time { color: var(--ink-2); }

  /* Rows: a list of things as hairline rows, title left, meta right, a line under. */
  .rows { list-style: none; padding: 0; border-top: 1px solid var(--rule); }
  .rows > li { position: relative; padding: var(--s4) 0; border-bottom: 1px solid var(--rule); }
  .rows > li > :last-child { margin-bottom: 0; }
  .rows-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s1) var(--s4); margin-bottom: var(--s1); }
  .rows-title { font-size: var(--h3); font-weight: 600; letter-spacing: -.015em; }
  .rows-title a { color: var(--ink); text-decoration: none; }
  .rows-title a:hover { color: var(--signal); }
  .rows-title a::after { content: ""; position: absolute; inset: 0; }
  .rows > li:has(.rows-title a:focus-visible) { outline: 2px solid var(--signal); outline-offset: 4px; border-radius: 4px; }
  .rows-title a:focus-visible { outline: none; }
  .rows-meta { font-size: var(--small); color: var(--ink-2); font-variant-numeric: tabular-nums; }
  .rows p { margin-bottom: var(--s2); color: var(--ink-2); font-size: var(--small); max-width: 70ch; }
  .rows .chips { position: relative; z-index: 1; margin-top: var(--s2); }
  .rows.numbered { counter-reset: row; }
  .rows.numbered > li { counter-increment: row; padding-left: 2.5rem; }
  .rows.numbered > li::before { content: counter(row); position: absolute; left: 0; top: var(--s4); font-weight: 500; font-variant-numeric: tabular-nums; line-height: 1.3; color: var(--ink-2); }
  .rows-thumb { float: right; width: 7.5rem; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius-img); margin: .15rem 0 var(--s2) var(--s5); background: var(--ground-3); }
  .rows-thumb img, .rows-thumb picture { width: 100%; height: 100%; object-fit: cover; }
  .rows-thumb picture { display: block; }

  /* Cards: a photograph, a kicker, a title and a stats line (the home page and directories). */
  .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: var(--s6) var(--s5); padding: 0; list-style: none; }
  .card { position: relative; display: flex; flex-direction: column; gap: .3rem; }
  .card-media { order: -1; aspect-ratio: 3 / 2; overflow: hidden; border-radius: var(--radius); background: var(--ground-3); margin-bottom: .4rem; }
  .card-media picture, .card-media img { width: 100%; height: 100%; }
  .card-media img { object-fit: cover; transition: transform 400ms var(--ease); }
  .card-media.is-empty { display: grid; place-items: center; }
  .card-media .media-unavailable { border: 0; padding: 0; font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; }
  .card:hover .card-media img { transform: scale(1.03); }
  .card-kicker { display: flex; flex-wrap: wrap; gap: 0 .6rem; font-size: var(--tiny); font-weight: 500; color: var(--ink-2); }
  .card-reason { color: var(--signal); }
  .card-title { font-size: var(--h3); line-height: 1.25; letter-spacing: -.015em; }
  .card-title a { color: var(--ink); text-decoration: none; }
  .card-title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
  .card-title a:focus-visible { outline: none; }
  .card:has(.card-title a:focus-visible) { outline: 2px solid var(--signal); outline-offset: 6px; border-radius: 4px; }
  .card:hover .card-title a { color: var(--signal); }
  .card-dek { color: var(--ink-2); font-size: var(--small); line-height: 1.45; }
  .stats { display: flex; flex-wrap: wrap; gap: .2rem .8rem; font-size: var(--tiny); color: var(--ink-2); font-variant-numeric: tabular-nums; margin-top: .1rem; }
  .stats > :not(:first-child)::before { content: "•"; margin-right: .5rem; color: var(--rule-strong); }
  .card .chips { position: relative; z-index: 2; margin-top: var(--s2); }
  .collection-card .card-media { aspect-ratio: 16 / 9; }
  .collection-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); }
  .entity-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr)); }
  .place-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); }

  /* Home page (the finder layout): a photo hero, hubs, cards with stats, "back then", lifelines. */
  .home-hero { position: relative; display: grid; align-items: end; min-height: min(34rem, 80svh); margin-top: calc(-1 * var(--s6)); width: 100cqw; margin-left: calc(50% - 50cqw); color: #fff; background: var(--ground-3); overflow: hidden; }
  .home-hero-media { position: absolute; inset: 0; }
  .home-hero-media picture, .home-hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 40%; }
  .home-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgb(0 0 0 / .78) 0, rgb(0 0 0 / .2) 55%, transparent); pointer-events: none; }
  .home-hero-copy { position: relative; z-index: 1; width: min(100% - 2 * var(--gutter), var(--page-max)); margin-inline: auto; padding-block: var(--s9) var(--s6); max-width: 100%; }
  .home-hero-copy h1 { color: #fff; max-width: 15ch; font-size: clamp(2.4rem, 1.6rem + 3.6vw, 4.2rem); line-height: 1.02; }
  .home-hero-copy .lede { color: rgb(255 255 255 / .88); max-width: 52ch; margin-top: var(--s3); }
  .home-hero-actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin: var(--s5) 0; }
  .home-hero .button.quiet { color: #fff; border-color: rgb(255 255 255 / .7); }
  .home-hero .button.quiet:hover { background: rgb(255 255 255 / .12); color: #fff; }
  .home-hero-credit { font-size: var(--tiny); color: rgb(255 255 255 / .7); }
  .home-hero-credit a { color: #fff; display: inline-block; padding-block: .25rem; }
  .hubs { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: var(--s4); }
  .hub a { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: var(--s4); align-items: center; background: var(--ground-2); border-radius: var(--radius); overflow: hidden; color: var(--ink); text-decoration: none; min-height: 5.5rem; }
  .hub-media { width: 5.5rem; height: 5.5rem; background: var(--ground-3); }
  .hub-media picture, .hub-media img { width: 100%; height: 100%; object-fit: cover; }
  .hub-body { display: grid; gap: .1rem; padding-right: var(--s4); }
  .hub strong { font-size: 1.1rem; letter-spacing: -.02em; font-weight: 600; }
  .hub-body span { font-size: var(--tiny); color: var(--ink-2); }
  .hub a:hover strong { color: var(--signal); }
  /* The homepage's weekly sections (layouts/partials/home/): artist of the week, this week back then, the week grid. */
  .spotlight-head { display: grid; gap: var(--s6); grid-template-columns: minmax(0, 1.5fr) minmax(16rem, 1fr); align-items: start; margin-bottom: var(--s6); }
  .spotlight-title { font-size: clamp(2.4rem, 1.6rem + 3vw, 4rem); line-height: 1; margin: var(--s2) 0 var(--s3); }
  .spotlight-title a { color: var(--ink); text-decoration: none; }
  .spotlight-title a:hover { color: var(--signal); }
  .spotlight-actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s5); }
  .spotlight-posts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .spotlight-crossings { margin-top: var(--s6); }
  .spotlight-next { color: var(--ink-2); font-size: var(--small); margin-top: var(--s4); }
  .back-week { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s5); }
  .back-week h3 { display: flex; align-items: baseline; justify-content: space-between; border-top: 2px solid var(--ink); padding-top: var(--s2); margin-bottom: var(--s3); font-size: var(--figure); }
  .back-week h3 small { font-size: var(--tiny); color: var(--ink-2); font-weight: 400; letter-spacing: 0; }
  .back-week-more { list-style: none; padding: 0; margin-top: var(--s3); font-size: var(--small); display: grid; gap: var(--s2); }
  .back-week-more a { color: var(--ink); text-decoration: none; }
  .back-week-more a:hover { color: var(--signal); text-decoration: underline; }
  .back-week-more time { color: var(--ink-2); font-size: var(--tiny); white-space: nowrap; }
  .week-grid-scroll { overflow-x: auto; margin-top: var(--s4); }
  .week-grid-rows { display: grid; gap: 3px; min-width: 36rem; }
  .week-row, .week-axis { display: grid; grid-template-columns: 3rem repeat(52, minmax(0, 1fr)); gap: 3px; align-items: center; }
  .week-axis { grid-template-columns: 3rem repeat(12, minmax(0, 1fr)); font-size: var(--tiny); color: var(--ink-2); margin-top: var(--s2); }
  .week-year { font-size: var(--tiny); color: var(--ink-2); font-variant-numeric: tabular-nums; }
  .week-cell { aspect-ratio: 1; border-radius: 3px; background: color-mix(in srgb, var(--signal) calc(var(--n) * 8%), var(--ground-3)); }
  .week-cell[data-now] { outline: 2px solid var(--ink); outline-offset: 1px; }
  @media (max-width: 1000px) {
    .spotlight-head { grid-template-columns: 1fr; }
    .spotlight-posts, .back-week { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (max-width: 760px) {
    /* Cards become a row to swipe instead of a column four screens long. */
    .spotlight-posts { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: var(--s4); padding-bottom: var(--s2); }
    .spotlight-posts > .card { flex: 0 0 72%; scroll-snap-align: start; }
    .back-week { grid-template-columns: 1fr; }
  }
  /* Full rows: curated grids on the home page use a fixed column count and drop the items that would start an incomplete last row. */
  .full-rows { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); }
  .cols-3 { --cols: 3; }
  .cols-2 { --cols: 2; }
  @media (min-width: 1001px) {
    .full-rows.cols-4 > :nth-child(4n+1):nth-last-child(-n+3), .full-rows.cols-4 > :nth-child(4n+2):nth-last-child(-n+2), .full-rows.cols-4 > :nth-child(4n+3):nth-last-child(-n+1),
    .full-rows.cols-3 > :nth-child(3n+1):nth-last-child(-n+2), .full-rows.cols-3 > :nth-child(3n+2):nth-last-child(-n+1),
    .full-rows.cols-2 > :nth-child(2n+1):last-child { display: none; }
  }
  @media (min-width: 761px) and (max-width: 1000px) {
    .full-rows { --cols: 2; }
    .full-rows > :nth-child(2n+1):last-child { display: none; }
  }
  @media (max-width: 760px) {
    .full-rows { --cols: 1; }
    .full-rows.entity-grid { --cols: 2; }
    .full-rows.entity-grid > :nth-child(2n+1):last-child { display: none; }
  }
  .back-then h3 { margin-bottom: var(--s3); }
  .back-then ul { list-style: none; padding: 0; margin-bottom: var(--s2); }
  .back-then li { display: grid; padding: .4rem 0; border-bottom: 1px solid var(--rule); }
  .back-then li a { color: var(--ink); text-decoration: none; font-weight: 500; font-size: var(--small); line-height: 1.3; display: inline-block; padding-block: .2rem; }
  .back-then li a:hover { color: var(--signal); }
  .back-then li span { font-size: var(--tiny); color: var(--ink-2); }
  .back-then .text-link { font-size: var(--tiny); }

  /* Directories and A–Z. */
  .directory-switch { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4); margin-top: var(--s4); font-size: var(--small); font-weight: 500; }
  .directory-switch a { min-height: 2.5rem; display: inline-flex; align-items: center; color: var(--ink-2); text-decoration: none; border-bottom: 2px solid transparent; }
  .directory-switch a:hover { color: var(--ink); }
  .directory-switch a[aria-current] { color: var(--ink); border-bottom-color: var(--signal); }
  .az-nav { display: flex; flex-wrap: wrap; gap: .15rem; margin-bottom: var(--s5); position: sticky; top: 0; z-index: 3; background: var(--ground); padding-block: var(--s2); border-bottom: 1px solid var(--rule); }
  .az-nav a { display: inline-grid; place-items: center; min-width: 2.25rem; min-height: 2.25rem; text-decoration: none; font-weight: 500; font-size: var(--tiny); color: var(--ink-2); border-radius: 6px; }
  .az-nav a:hover { background: var(--ground-2); color: var(--ink); }
  .az-list { columns: 16rem auto; column-gap: var(--s6); }
  .az-group { break-inside: avoid; margin-bottom: var(--s5); scroll-margin-top: 4rem; }
  .az-group h3 { font-size: var(--tiny); font-weight: 500; color: var(--ink-2); border-bottom: 1px solid var(--rule); padding-bottom: var(--s1); margin-bottom: var(--s2); }
  .az-group ul { list-style: none; padding: 0; }
  .az-group li { display: flex; justify-content: space-between; gap: var(--s4); padding-block: .2rem; font-size: var(--small); }
  .az-group a { color: var(--ink); text-decoration: none; }
  .az-group a:hover { color: var(--signal); }
  .tag-groups { display: grid; gap: var(--s7); }
  .tag-group { scroll-margin-top: var(--s4); }
  .tag-group .section-title { display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s4); }
  .entity-type-icon { display: inline-flex; color: var(--signal); vertical-align: -.2em; }
  .bar-index { list-style: none; padding: 0; columns: 15rem auto; column-gap: var(--s6); }
  .bar-index li { position: relative; display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); padding-block: .3rem .45rem; break-inside: avoid; font-size: var(--small); }
  .bar-index li::after { content: ""; position: absolute; left: 0; bottom: .15rem; height: 2px; width: var(--p); background: color-mix(in oklch, var(--signal) 55%, transparent); border-radius: 2px; }
  .bar-index a { color: var(--ink); text-decoration: none; }
  .bar-index a:hover { color: var(--signal); }
  .bar-index .count { margin: 0; font-size: var(--tiny); }

  /* Lifelines: one row per tag, one column per month. Crossings add the companions'
     other posts as rings. A plate holds them on the home page and entity pages. */
  .lifelines { container-type: inline-size; }
  .lifelines-rows { list-style: none; padding: 0; border-top: 1px solid var(--rule); --name: 10rem; }
  .lifelines-rows li, .lifelines-axis { display: grid; grid-template-columns: var(--name) minmax(0, 1fr) 2.2rem; align-items: center; gap: var(--s3); min-height: 2rem; border-bottom: 1px solid var(--rule); }
  .lifeline-name { grid-column: 1; grid-row: 1; min-height: 1.5rem; line-height: 1.5rem; font-size: var(--small); font-weight: 500; color: var(--ink); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .lifelines-rows li:hover .lifeline-name { color: var(--signal); }
  .lifeline { grid-column: 2; grid-row: 1; display: grid; grid-template-columns: repeat(var(--months), minmax(0, 1fr)); align-items: center; height: 1.25rem; background: repeating-linear-gradient(90deg, transparent 0 calc(100% / 4 - 1px), var(--rule) calc(100% / 4 - 1px) calc(100% / 4)); }
  .lifeline-count { grid-column: 3; grid-row: 1; text-align: right; font-size: var(--tiny); color: var(--ink-2); font-variant-numeric: tabular-nums; }
  .beat { position: relative; z-index: 1; grid-row: 1; grid-column: var(--m); justify-self: center; width: calc((.28rem + var(--n) * .12rem) * var(--k, 1)); aspect-ratio: 1; border-radius: 50%; background: var(--signal); }
  .lifelines-rows li:hover .beat, .lifelines-rows li:focus-within .beat { background: var(--ink); }
  .lifelines-axis { border: 0; margin-top: var(--s1); font-size: var(--tiny); color: var(--ink-2); min-height: 1.4rem; }
  .lifelines-years { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; }
  .lifelines-dek { color: var(--ink-2); font-size: var(--small); margin-top: var(--s1); }
  .crossings .is-focus { border-bottom-color: var(--rule-strong); }
  .crossings .is-focus .lifeline-name { font-weight: 600; }
  .crossings .is-focus .beat { background: var(--ink); }
  .beat.is-other { --k: .8; background: transparent; box-shadow: inset 0 0 0 1.5px color-mix(in oklch, var(--ink-2) 65%, transparent); }
  .lifelines-rows li:hover .beat.is-other, .lifelines-rows li:focus-within .beat.is-other { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink); }
  .lifelines-key { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem var(--s3); margin-top: var(--s3); font-size: var(--tiny); color: var(--ink-2); }
  .lifelines-key > span { display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; }
  .key-dot { width: .6rem; height: .6rem; border-radius: 50%; background: var(--signal); flex: none; }
  .key-dot.is-other { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink-2); }
  /* Rows draw themselves as they scroll in. Scroll-driven, so no JavaScript and no timers. */
  @media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) {
      .lifelines-rows { view-timeline: --rows block; }
      .beat { animation: beat-in linear both; animation-timeline: --rows; animation-range: entry calc((var(--row) + .75 * var(--m) / var(--months)) / var(--count) * 100%) entry calc((var(--row) + .75 * var(--m) / var(--months) + .25) / var(--count) * 100%); }
      .lifelines-rows li::after { content: ""; grid-column: 2; grid-row: 1; height: 1px; align-self: center; background: color-mix(in oklch, var(--ink) 22%, transparent); transform-origin: 0 50%; animation: line-in linear both; animation-timeline: --rows; animation-range: entry calc(var(--row) / var(--count) * 100%) entry calc((var(--row) + 1) / var(--count) * 100%); pointer-events: none; }
    }
  }
  @keyframes beat-in { from { scale: 0; opacity: 0; } 70% { scale: 1.35; opacity: 1; } to { scale: 1; opacity: 1; } }
  @keyframes line-in { from { scale: 0 1; } to { scale: 1 1; } }
  @container (max-width: 560px) {
    .lifelines-rows li { grid-template-columns: minmax(0, 1fr) 2rem; gap: 0 var(--s2); padding-block: .35rem; }
    .lifeline { grid-column: 1 / -1; grid-row: 2; }
    .lifelines-axis { grid-template-columns: 0 minmax(0, 1fr) 2rem; gap: 0 var(--s2); }
    .beat { width: calc((.2rem + var(--n) * .1rem) * var(--k, 1)); }
    .lifeline-count { grid-column: 2; }
    .lifelines-rows li::after { grid-column: 1 / -1; grid-row: 2; }
  }

  /* Photo wall: justified rows from each photograph's own ratio; the last row keeps its size. */
  .photo-wall { display: flex; flex-wrap: wrap; gap: 4px; list-style: none; padding: 0; }
  .photo-wall::after { content: ""; flex: 999 1 0; }
  .photo-wall li { position: relative; flex: calc(var(--ar)) 1 calc(var(--ar) * 10rem); aspect-ratio: var(--ar); max-width: 100%; overflow: hidden; background: var(--ground-3); border-radius: 4px; }
  .photo-wall a { display: block; height: 100%; }
  .photo-wall picture { display: contents; }
  .photo-wall img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms var(--ease); }
  .photo-wall li:hover img, .photo-wall li:focus-within img { transform: scale(1.04); }
  .photo-wall a:focus-visible { outline: 2px solid var(--signal); outline-offset: -2px; }
  .wall-caption { position: absolute; inset: auto 0 0 0; padding: 1.4rem .6rem .5rem; font-size: var(--tiny); line-height: 1.3; color: #fff; background: linear-gradient(to top, rgb(0 0 0 / .72), transparent); opacity: 0; transition: opacity var(--dur) var(--ease); pointer-events: none; }
  .wall-caption time { display: block; opacity: .75; }
  .photo-wall li:hover .wall-caption, .photo-wall li:focus-within .wall-caption { opacity: 1; }
  .wall-year { display: grid; place-items: center; background: var(--ground); border: 1px solid var(--rule); font-weight: 600; font-size: clamp(1.2rem, 2vw, 1.8rem); letter-spacing: -.03em; color: var(--ink-2); }
  .wall-more { margin-top: var(--s3); font-size: var(--small); color: var(--ink-2); }
  @media (max-width: 700px) { .photo-wall li { flex-basis: calc(var(--ar) * 5.5rem); } }

  /* Collections: an ordered route of posts. */
  .route { list-style: none; padding: 0; counter-reset: stop; }
  .route-stop { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--s5) clamp(1.5rem, 4vw, 4rem); padding-block: var(--s6); border-top: 1px solid var(--rule); align-items: center; }
  .route-media { background: var(--ground-3); border-radius: var(--radius); overflow: hidden; aspect-ratio: 3 / 2; }
  .route-media picture, .route-media img { width: 100%; height: 100%; object-fit: cover; }
  .route-number { display: inline-grid; place-items: center; width: 1.8rem; height: 1.8rem; border-radius: 50%; background: var(--ink); color: var(--ground); font-weight: 600; font-size: var(--tiny); margin-right: var(--s2); font-variant-numeric: tabular-nums; }
  .route-copy h2 { margin-block: var(--s3) var(--s3); }
  .route-copy h2 a { color: var(--ink); text-decoration: none; }
  .route-copy h2 a:hover { color: var(--signal); }
  .route-note { font-size: var(--lede); line-height: 1.45; color: var(--ink-2); max-width: 44ch; }
  .collection-intro { margin-top: var(--s4); }

  /* Posts. The head is the shared skeleton; the body is the prose beside a rail. */
  .post-hero { margin-bottom: var(--s6); }
  .post-hero picture { max-width: min(100%, var(--image-width, 100%) * 1.25); margin-inline: auto; }
  .post-hero img { width: 100%; max-height: 85svh; object-fit: contain; border-radius: var(--radius); }
  .post-hero figcaption, .post-content figcaption { margin-top: var(--s2); font-size: var(--tiny); color: var(--ink-2); line-height: 1.5; }
  .post-body { display: grid; grid-template-columns: minmax(0, 1fr) 19rem; gap: var(--s8); align-items: start; }
  .post-rail { display: grid; gap: var(--s5); position: sticky; top: var(--s5); max-height: calc(100svh - 2 * var(--s5)); overflow-y: auto; overscroll-behavior: contain; }
  .post-rail .kv { grid-template-columns: 6rem minmax(0, 1fr); }
  .post-toc { border-top: 1px solid var(--rule); padding-top: var(--s3); }
  .post-toc h2 { margin: 0; }
  .post-toc ol { list-style: none; padding: 0; margin: var(--s2) 0 0; font-size: var(--small); line-height: 1.4; }
  .post-toc ol ol { padding-left: var(--s4); margin-top: var(--s1); }
  .post-toc li { padding-block: .3rem; }
  .post-toc a { color: var(--ink-2); text-decoration: none; }
  .post-toc a:hover { color: var(--signal); }
  .in-collection .eyebrow { margin-bottom: var(--s2); }
  .in-collection h2 { font-size: var(--h3); margin-bottom: var(--s3); }
  .in-collection h2 a { color: var(--ink); text-decoration: none; }
  .in-collection h2 a:hover { color: var(--signal); }
  .in-collection .text-link { margin-top: var(--s3); }
  .prose { font-size: var(--text); line-height: 1.7; }
  .prose > * { max-width: var(--measure); }
  .prose > * + * { margin-top: 1.2em; }
  .prose h2, .prose h3, .prose h4 { margin-top: 2em; }
  .prose h2 { font-size: var(--h2); }
  .prose h3 { font-size: var(--h3); }
  .prose em { color: var(--ink-2); }
  .prose blockquote { border-left: 2px solid var(--signal); padding-left: var(--s5); color: var(--ink-2); }
  .prose ul, .prose ol { padding-left: 1.3em; }
  .prose li + li { margin-top: .4em; }
  .prose table { display: block; overflow-x: auto; }
  .prose, .prose a { overflow-wrap: anywhere; }
  .prose > figure, .prose > .archive-figure, .prose > .report-gallery, .prose > .external-video { max-width: 100%; }
  .post-content { display: flow-root; }
  .post-content figure { margin-block: var(--s6); }
  .post-content picture { max-width: min(100%, var(--image-width, 100%) * 1.25); margin-inline: auto; }
  /* Definite width and ratio before decode: no layout shift as images load. */
  .post-content figure img { width: var(--image-width, auto); max-width: 100%; max-height: 85svh; aspect-ratio: var(--image-ratio, auto); object-fit: contain; height: auto; margin-inline: auto; border-radius: var(--radius-img); }
  .figure-open { display: block; width: 100%; padding: 0; margin: 0; border: 0; border-radius: 0; background: none; min-height: 0; cursor: zoom-in; }
  .figure-open:hover { border: 0; background: none; }
  .post-content figcaption { max-width: var(--measure); margin-inline: auto; text-align: center; }
  .archive-figure { min-width: 0; }
  .archive-figure figcaption [data-gallery] { display: inline-flex; align-items: center; min-height: 2.5rem; color: var(--ink-2); }
  .report-gallery { margin-block: var(--s7); }
  .report-gallery .section-heading { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s2) var(--s4); align-items: baseline; margin-bottom: var(--s5); }
  .report-gallery .section-heading p { color: var(--ink-2); font-size: var(--small); }
  .gallery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: var(--s5) var(--s4); align-items: start; }
  .gallery-grid figure { margin: 0; }
  .gallery-grid figcaption { text-align: left; margin-inline: 0; }

  /* Read next: the thread, related rows, the same month, earlier and later. */
  .read-next { margin-top: var(--s8); display: grid; gap: var(--s7); }
  .read-next .eyebrow { margin-bottom: var(--s4); }
  .trails { display: grid; gap: var(--s5); }
  .trail { display: grid; gap: var(--s3); }
  .trail-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s1) var(--s3); }
  .trail-head a { font-weight: 600; font-size: var(--h3); color: var(--ink); text-decoration: none; letter-spacing: -.015em; }
  .trail-head a:hover { color: var(--signal); }
  .trail-head span { color: var(--ink-2); font-size: var(--small); }
  .trail-steps { list-style: none; padding: 0; display: flex; gap: 3px; height: 5px; }
  .trail-steps li { flex: 1; background: var(--rule); border-radius: 2px; }
  .trail-steps li.here { background: var(--signal); }
  .trail-nav, .adjacent { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4) var(--s6); }
  .trail-nav a, .adjacent a { display: flex; flex-direction: column; gap: .15rem; color: var(--ink); text-decoration: none; line-height: 1.3; font-weight: 500; }
  .trail-nav a span, .adjacent a span { font-size: var(--tiny); color: var(--ink-2); font-weight: 500; }
  .trail-nav a:hover, .adjacent a:hover { color: var(--signal); }
  .trail-nav [href]:only-child:not(:first-child), .adjacent a[rel=next]:only-child { grid-column: 2; text-align: right; }
  .trail-nav a + a, .adjacent a + a { text-align: right; }
  .same-month ul { columns: 18rem auto; column-gap: var(--s6); padding-left: 1.1em; font-size: var(--small); }
  .same-month li { break-inside: avoid; padding-block: .15rem; }
  .same-month li a { color: var(--ink); }
  .same-month p { margin-top: var(--s3); font-size: var(--small); }
  .adjacent { border-top: 1px solid var(--rule); padding-top: var(--s5); }

  /* Lists and pagination. */
  .browse-line { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); border-top: 1px solid var(--rule); padding-block: var(--s5); margin-top: var(--s7); align-items: center; font-size: var(--small); }
  .browse-line a { min-height: 2.5rem; display: inline-flex; align-items: center; }
  .browse-line p { color: var(--ink-2); }

  /* Media and embeds. */
  .external-video { padding: var(--s5); margin-block: var(--s6); border: 1px solid var(--rule); border-radius: var(--radius); font-size: var(--small); background: var(--ground-2); }
  .video-player iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; margin-top: var(--s4); border-radius: var(--radius-img); }
  .media-unavailable, .media-animation-notice { display: block; padding: var(--s4); border: 1px dashed var(--rule-strong); border-radius: var(--radius); font-size: var(--small); color: var(--ink-2); }
  .media-animation-notice { border: 0; padding: var(--s2) 0 0; }

  /* Lightbox. Fixed size: a photograph that loads late appears in place and moves nothing. */
  dialog { color: var(--ink); background: var(--ground); border: 0; border-radius: var(--radius-plate); padding: var(--s4); width: min(1200px, 96vw); height: 96dvh; max-height: 96dvh; }
  dialog[open] { display: grid; grid-template-rows: auto minmax(0, 1fr); touch-action: pan-y pinch-zoom; }
  dialog figure { position: relative; display: grid; grid-template-rows: minmax(0, 1fr) auto; min-height: 0; margin: 0; }
  dialog figure picture { display: contents; }
  #image-error { position: absolute; inset: 0 0 auto; margin: 0; padding-top: 30%; text-align: center; color: var(--ink-2); pointer-events: none; }
  dialog::backdrop { background: var(--scrim); backdrop-filter: blur(4px); }
  .dialog-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin-bottom: var(--s3); }
  #image-count { font-variant-numeric: tabular-nums; color: var(--ink-2); font-size: var(--small); }
  #close-gallery { margin-left: auto; }
  dialog figure img { grid-row: 1; width: 100%; height: 100%; max-height: none; object-fit: contain; aspect-ratio: auto !important; }
  dialog figcaption { grid-row: 2; margin-top: var(--s3); font-size: var(--small); color: var(--ink-2); text-align: center; }

  /* The 404 and plain pages. */
  .page-head.plain { max-width: 60rem; }
}

@layer utilities {
  .theme-switching, .theme-switching *, .theme-switching *::before, .theme-switching *::after { transition: none !important; }
}

@layer responsive {
  @media (prefers-reduced-motion: no-preference) {
    @view-transition { navigation: auto; }
    ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 160ms; }
    /* The chosen photograph morphs into the post hero (fieldnotes.js names the card on the way out). */
    .post-hero img { view-transition-name: post-hero; }
    ::view-transition-group(post-hero) { animation-duration: 320ms; animation-timing-function: var(--ease); }
    ::view-transition-old(post-hero), ::view-transition-new(post-hero) { block-size: 100%; object-fit: cover; }
    #lightbox-image { view-transition-name: lightbox-photo; }
    ::view-transition-group(lightbox-photo) { animation-duration: 220ms; }
    ::view-transition-old(lightbox-photo), ::view-transition-new(lightbox-photo) { block-size: 100%; object-fit: contain; }
    dialog[open] { animation: fade-in 180ms var(--ease); }
    @keyframes fade-in { from { opacity: 0; transform: scale(.985); } }
  }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; }
    .card:hover .card-media img, .photo-wall li:hover img { transform: none; }
  }
  @media (max-width: 1000px) {
    .entity-head { grid-template-columns: minmax(0, 1fr); }
    .fact-panel { max-width: 34rem; }
    .site-footer > div:first-child, .post-body { grid-template-columns: 1fr; }
    .post-rail { position: static; max-height: none; overflow: visible; }
    .lifelines-rows { --name: 7rem; }
    .rows-thumb { width: 5.5rem; }
  }
  @media (max-width: 760px) {
    .masthead > div { flex-wrap: wrap; row-gap: 0; column-gap: var(--s4); min-height: 3.25rem; }
    .wordmark { margin-right: auto; }
    .primary-nav { order: 3; width: 100%; margin: 0; justify-content: space-between; gap: var(--s2); font-size: var(--tiny); overflow-x: auto; scrollbar-width: none; }
    .primary-nav a { padding-block: .6rem; white-space: nowrap; }
    .section-head, .route-stop, .trail-nav, .adjacent { grid-template-columns: minmax(0, 1fr); }
    .section-head { display: grid; }
    .trail-nav a + a, .adjacent a + a, .adjacent a[rel=next]:only-child, .trail-nav [href]:only-child:not(:first-child) { text-align: left; grid-column: auto; }
    .site-footer-nav { grid-template-columns: 1fr 1fr; }
    .kv { grid-template-columns: 1fr; gap: var(--s1) 0; }
    .kv dd { margin-bottom: var(--s2); }
    .post-rail .kv { grid-template-columns: 1fr; }
    .facts { gap: var(--s4) var(--s5); }
    .home-hero { min-height: 26rem; }
    .home-hero-copy { padding-top: var(--s8); }
    .gallery-grid { grid-template-columns: 1fr; }
  }
  @media (max-width: 420px) {
    /* The search link keeps its name for assistive technology; only the icon shows. */
    .nav-search span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .nav-search .icon { width: 1.1rem; height: 1.1rem; }
  }
}

@layer print {
  @media print {
    :root { color-scheme: light; }
    body { background: none; }
    .masthead nav, .theme-toggle, .site-footer, dialog, .read-next, .skip { display: none; }
    main { width: 100%; }
    figure { break-inside: avoid; }
    a { color: inherit; }
  }
}