:root {
  --bg: #fff; --fg: #2c242d; --muted: #706773; --card: #fff;
  --line: #e5e0e5; --accent: #78396e; --ok: #2e7d4f; --warn: #a05a1c;
  /* The structural accent for section labels — brighter than --accent, which is
     reserved for links and priority figures. */
  --section-accent: #a32a85;
  --chart-blue: #0072b2; --chart-orange: #c34f00; --chart-green: #007f5f;
  --chart-purple: #8a3b8f; --chart-amber: #a76200; --chart-neutral: #3d3d3d;
  font-size: 16px;
}
@media (prefers-color-scheme: dark) {
  /* The plum-tinted dark of the approved design, not a neutral olive-grey: the
     reading surface keeps its own colour in dark mode rather than going flat. */
  :root { --bg: #211b22; --fg: #f1ebf1; --muted: #c2b5c3; --card: #2a222b;
          --line: #493c4a; --accent: #e3abd9; --section-accent: #f497d5;
          --ok: #6fbf8f; --warn: #d99a5b;
          --chart-blue: #56b4e9; --chart-orange: #f0a34a; --chart-green: #44d1a0;
          --chart-purple: #e69fcd; --chart-amber: #ffd166; --chart-neutral: #e8e8e8; }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--fg);
  font: 16px/1.55 -apple-system, "Segoe UI", Roboto, sans-serif; }
/* `will-change: transform` is not decoration: it gives the sticky header its own
   compositing layer. Without one the header hit-tests correctly (it is opaque
   and z-index 20) but its background is not reliably repainted over content
   scrolling beneath it, so headings bleed THROUGH the bar — on the owner's phone
   and in desktop responsive mode alike (T-20260820-15e3). */
header { display: flex; align-items: center; flex-wrap: wrap; gap: .55rem 1.2rem; padding: .7rem 1rem;
  border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; width: 100%; background: var(--bg);
  will-change: transform; }
/* THE HEADER CARRIES THE LOCKUP FILE, so the chrome cannot hold its own
   opinion about how the mark and the word relate — setting the word in the UI
   font beside the mark meant enlarging one left the other behind. Height only:
   the width follows the file's own viewBox, so the aspect cannot be squashed
   here, and the file carries its own light/dark rule. */
.mark { display: inline-flex; align-items: center; text-decoration: none; }
.mark-lockup { height: 2.5rem; width: auto; display: block; }

/* THE TENANT NAME IS THE WAY TO THE OTHER TENANTS. A native <details>, so it
   opens, closes and takes focus with no JavaScript. */
.tenant { position: relative; }
.tenant > summary { list-style: none; cursor: pointer; }
.tenant > summary::-webkit-details-marker { display: none; }
.tenant > summary:hover, .tenant[open] > summary { color: var(--fg); }
.tenant > summary::after { content: "⌄"; margin-left: .3rem; font-size: .8em;
  position: relative; top: -.2em; opacity: .7; }
.tenant-list { position: absolute; top: calc(100% + .45rem); left: -.6rem; z-index: 30;
  min-width: max(11rem, 100%); display: flex; flex-direction: column;
  background: var(--card); border: 1px solid var(--line); border-radius: .5rem;
  padding: .3rem; box-shadow: 0 .6rem 1.6rem rgb(0 0 0 / 18%); }
.tenant-list a { display: block; padding: .4rem .55rem; border-radius: .35rem;
  text-decoration: none; color: var(--fg); font-size: .9rem; white-space: nowrap; }
.tenant-list a:hover { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.tenant-list a[aria-current] { color: var(--muted); }

/* THE PAGE'S OWN TOP MATTER. `main` sheds its side padding on a phone so wide
   tables can use the full width, which left every heading above those tables
   flush against the glass. This is the gutter for the part of a page that is
   prose rather than table — the job `.reading-page` does on a record. */
.page-head { display: block; }

/* A REGISTER'S OWN WORDS, WHEREVER THEY APPEAR. An item's title on the TDL and
   a decision's title on the decisions index are the same sentences the record
   pages show, so they are set in the same face; following a link must not
   change the typeface of the text you were reading (owner, 2026-08-28). The
   rank, the score, the pills and the column headers around them are the
   software talking, and stay in the chrome's sans. brand/README.md states the
   rule this follows. */
.record-title { font-family: "Source Serif 4", Georgia, serif; font-size: 1.02em; }

/* THE LANDING PAGE'S MASTHEAD. The lockup is sized in `rem` against the
   viewport rather than fixed, so it is generous on a laptop and still whole on
   a phone; `height: auto` with the file's own viewBox aspect means it reserves
   its box before the image lands and cannot shift the page. */
.masthead { padding: 2.4rem 0 1.6rem; }
.masthead-lockup { width: min(30rem, 78vw); height: auto; display: block; }
/* THE TAGLINE IS BRAND, NOT FURNITURE, so it speaks the reading voice rather
   than the chrome's sans (owner, 2026-08-28). Source Serif is the face a
   register's own words are set in; the tagline is the site's own words, and
   the two belong together. See brand/README.md for the three-face rule. */
.masthead-strap { color: var(--muted); margin: 1rem 0 0; max-width: 34rem;
  font-family: "Source Serif 4", Georgia, serif; font-size: 1.12rem; }
@media (max-width: 640px) { .masthead { padding: 1.4rem 0 1rem; } }
/* A quiet way to the design surfaces — deliberately the last thing on the
   landing page and deliberately not in the nav: they are references, not
   registers (owner, 2026-08-28). */
.footer-links { margin: 3.2rem 0 .5rem; font-size: .82rem; color: var(--muted); }
.footer-links a { color: var(--muted); }
.proj { color: var(--muted); font-size: .9rem; margin-left: -.3rem; }
nav { display: flex; gap: .9rem; flex-wrap: wrap; }
nav a { color: var(--muted); text-decoration: none; padding: .1rem 0; }
nav a.active { color: var(--fg); border-bottom: 2px solid var(--accent); }
main { max-width: 62rem; margin: 0 auto; padding: 1rem; }
footer { text-align: center; color: var(--muted); font-size: .8rem; padding: 1.5rem 0 2rem; }
.banner { font-size: .85rem; padding: .4rem .7rem; border-radius: .4rem; }
.banner.ok { background: color-mix(in srgb, var(--ok) 12%, transparent); }
.banner.warn { background: color-mix(in srgb, var(--warn) 18%, transparent); }
table { border-collapse: collapse; width: 100%; font-size: .92rem; }
th, td { text-align: left; padding: .45rem .5rem; border-bottom: 1px solid var(--line);
  vertical-align: top; }
th { color: var(--muted); font-weight: 600; font-size: .8rem; }
tr.section td { background: color-mix(in srgb, var(--accent) 8%, transparent);
  font-weight: 600; font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; }
a { color: var(--accent); }
td a { text-decoration: none; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: .6rem;
  padding: 1rem 1.2rem; margin: .8rem 0; overflow-wrap: anywhere; }
.meta { color: var(--muted); font-size: .85rem; display: flex; gap: 1rem; flex-wrap: wrap; }
.copy-target, .id-copy { display: inline-flex; align-items: stretch; border: 1px solid var(--line);
  border-radius: .4rem; overflow: hidden; background: var(--card); transition: border-color .16s, background .16s; }
.copy-target { white-space: nowrap; }
.copy-target > a, .copy-target > code, .id-copy > code { display: inline-flex; align-items: center; padding: .2rem .42rem;
  color: var(--fg); text-decoration: none; }
.copy-id { display: inline-flex; align-items: center; gap: .32rem; padding: .2rem .42rem;
  border: 1px solid var(--line); background: var(--card); color: var(--muted); font-size: .75rem;
  font-weight: 600; line-height: 1.1; box-shadow: none; transition: color .16s, border-color .16s, background .16s; }
.copy-label { display: inline-block; min-width: 3.75em; white-space: nowrap; }
.copy-target .copy-id, .id-copy .copy-id { border: 0; border-left: 1px solid var(--line); border-radius: 0;
  background: transparent; }
.copy-id:hover, .copy-id:focus-visible { border-color: var(--accent); color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, var(--card)); outline: none; }
.copy-icon { width: .9rem; height: .9rem; fill: none; stroke: currentColor; stroke-width: 1.35; }
.copy-back { opacity: .6; }
.copy-id.copied { border-color: var(--ok); color: var(--ok);
  background: color-mix(in srgb, var(--ok) 9%, var(--card)); }
.copy-target.copied, .id-copy.copied { border-color: var(--ok); background: color-mix(in srgb, var(--ok) 6%, var(--card)); }
.record-details { background: var(--card); border: 1px solid var(--line); border-radius: .6rem;
  margin: .8rem 0; padding: .55rem .8rem; }
.record-details summary { cursor: pointer; color: var(--muted); font-size: .9rem; }
.record-details dl { display: grid; grid-template-columns: minmax(8rem, 12rem) 1fr; gap: .3rem .8rem;
  margin: .7rem 0 .1rem; font-size: .9rem; }
.record-details dt { color: var(--muted); }
.record-details dd { margin: 0; overflow-wrap: anywhere; }
@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 400 700;
  font-display: swap; src: url("/fonts/source-serif-4-latin.woff2?v=2a24bad466f09b88") format("woff2"); }
/* The record pages are a reading surface, not cards of metadata. Full white
   keeps the serif page quiet; plum is reserved for links and priority. */
.reading-page { max-width: 42rem; }
.reading-back { margin: .25rem 0 1.25rem; font: .85rem/1.4 -apple-system, "Segoe UI", Roboto, sans-serif; }
/* THE RECORD IS ONE TYPEFACE, named here and overridden NOWHERE below: the
   top-matter, the section labels, the operational footer and the disclosure
   under it are all part of the record, and each says its piece with size,
   weight and colour instead of a second family. The approved design does the
   same — nothing under `.rec` in src/web/sandbox-prev.ts carries a family of
   its own. Sans belongs to the chrome AROUND the record (`.reading-back`,
   `.similar`), which is the service talking rather than the author. */
.reading-record { font-family: "Source Serif 4", Georgia, serif; }
/* The title sits BELOW the top-matter (owner's chosen variant), so it reads as
   the opening of the prose rather than a heading over a field sheet. The room
   above and below is what makes it graspable in that position. */
.reading-record h1 { margin: 1.4rem 0 1.5rem; font-size: clamp(1.35rem, 3vw, 1.75rem); font-weight: 500;
  line-height: 1.13; letter-spacing: -.015em; }
.reading-meta, .reading-footer { display: flex; flex-wrap: wrap; align-items: center; column-gap: .9rem; row-gap: .42rem; }
.reading-meta { margin: 0; color: var(--muted); font-size: .9rem; }
.reading-status { display: inline-block; padding: .3rem 0; font-size: 1.08rem; font-weight: 750; letter-spacing: .01em; }
.reading-status.open, .reading-status.active { color: var(--ok); }
.reading-status.done { color: var(--accent); }
.reading-status.dropped, .reading-status.superseded { color: var(--warn); }
/* A lease is a claim about RIGHT NOW, shown as a bright word rather than a
   bordered pill — the reading surface has no pills. Smaller than a status,
   because it qualifies the record rather than being its state. */
.reading-status.held { color: var(--accent); font-size: .84rem; }
.reading-status.stale { color: var(--warn); font-size: .84rem; }
/* THE SAME FACT, ON A CITATION. A register id anywhere on the site carries a
   marker for the state of what it points at, so a reader learns it without
   following the link. The HUES are the status words directly above — open
   green, done plum, ended otherwise orange — because one fact must not have two
   colour vocabularies on one page.
   COLOUR IS NEVER THE WHOLE SIGNAL, and the rule the shapes follow is HOLLOW IS
   STILL LIVE, FILLED IS FINISHED — the reading every checkbox, progress dot and
   issue tracker has already taught: a ring is work not yet filled in, a solid
   mark is work completed. The shape then says WHICH ending: a disc closed done,
   a square closed some other way. A dotted ring is an id this register does not
   hold. The first cut had fill the other way round — filled for open, because
   live work is the salient kind — and the owner read a finished item's ring as
   open on the day it shipped. Intuition beats the argument; do not swap it back.
   Sized in `em` so it tracks whatever text it sits in — footer field, table cell
   or body prose. */
.id-state { display: inline-block; width: .55em; height: .55em; margin-left: .32em;
  vertical-align: .04em; border: .11em solid currentColor; border-radius: 50%; background: transparent; }
.id-state.open, .id-state.active { color: var(--ok); }
.id-state.done { color: var(--accent); background: currentColor; }
.id-state.dropped, .id-state.superseded { color: var(--warn); background: currentColor; border-radius: .06em; }
.id-state.pinned, .id-state.other { color: var(--muted); background: currentColor; border-radius: .06em; }
.id-state.unknown { color: var(--muted); border-style: dotted; }
/* A marker must never wrap away from the id it belongs to. `idLink` writes its
   own `nowrap`; a markdown citation is an anchor the renderer did not write. */
a:has(> .id-state) { white-space: nowrap; }
.priority-pair { display: inline-flex; align-items: baseline; gap: .65rem; white-space: nowrap; }
.priority > span:first-child, .topic-detail > span:first-child, .override-detail > span:first-child,
.reading-footer-label { color: var(--muted); opacity: .72; }
.priority b { color: var(--accent); font-size: 1.18em; line-height: 1; }
.meta-detail { font-size: .8rem; }
.override-detail { color: var(--muted); white-space: nowrap; }
.reading-record section { margin: 1.15rem 0; }
/* Section labels carry their own accent rather than the muted grey of the
   operational chrome: they are the structure a reader navigates the prose by,
   and the approved design gave them the plum. Falls back to muted if a theme
   supplies no accent. */
.reading-record section h2 { margin: 0 0 .3rem; color: var(--section-accent, var(--muted));
  font-size: .74rem; font-weight: 650; letter-spacing: .05em; text-transform: uppercase; }
.reading-record section .md > :first-child { margin-top: 0; }
.reading-record section .md > :last-child { margin-bottom: 0; }
.reading-footer { margin-top: 1.5rem; color: var(--muted);
  font-size: .8rem; line-height: 1.7; }
.reading-footer-field { overflow-wrap: anywhere; }
.reading-footer a { color: inherit; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); }
.reading-details { margin-top: 1.2rem; color: var(--muted); font-size: .82rem; }
.reading-details summary { cursor: pointer; width: max-content; }
.reading-details summary span { opacity: .7; }
.reading-details dl { display: grid; grid-template-columns: minmax(7rem, 10rem) 1fr; gap: .25rem .7rem; margin: .55rem 0 0; }
.reading-details dt { opacity: .72; }
.reading-details dd { margin: 0; overflow-wrap: anywhere; }
/* SIMILAR OPEN ITEMS — the register's neighbours of a record, after it and
   outside it. Sans-serif and muted throughout, because it is what the service
   knows about the item's surroundings, not something the author wrote; the
   score leads each row so the ranking is scannable without reading the titles. */
.similar { margin: 2.4rem 0 0; padding-top: 1.3rem; border-top: 1px solid var(--line);
  font-family: -apple-system, "Segoe UI", Roboto, sans-serif; }
.similar h2 { display: flex; align-items: baseline; gap: .5rem; margin: 0 0 .7rem; color: var(--muted);
  font-size: .74rem; font-weight: 650; letter-spacing: .05em; text-transform: uppercase; }
.similar-count { font-weight: 400; letter-spacing: 0; opacity: .7; text-transform: none; }
.similar-list { margin: 0; padding: 0; list-style: none; }
.similar-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .6rem;
  padding: .42rem 0; border-top: 1px solid color-mix(in srgb, var(--line) 55%, transparent); }
.similar-list li:first-child { border-top: 0; }
.similar-score { flex: none; min-width: 2.4rem; color: var(--accent);
  font-variant-numeric: tabular-nums; font-size: .84rem; }
.similar-item { flex: 1 1 16rem; font-size: .92rem; }
.similar .meta-detail { color: var(--muted); }
.similar-floor { margin: .8rem 0 0; color: var(--muted); font-size: .78rem; opacity: .8; }
.pill { display: inline-block; padding: 0 .5rem; border-radius: 1rem; font-size: .75rem;
  border: 1px solid var(--line); color: var(--muted); }
.pill.open { color: var(--ok); border-color: var(--ok); }
.pill.dropped { color: var(--warn); border-color: var(--warn); }
/* An expired lease is a warning, not a status: the item reads as held and
   nobody is holding it. */
.pill.stale { color: var(--warn); border-color: var(--warn); }
.md pre, .md code { background: color-mix(in srgb, var(--fg) 7%, transparent);
  border-radius: .3rem; padding: 0 .25rem; font-size: .88em; overflow-x: auto; }
.md pre { padding: .6rem; }
.md table { font-size: .85rem; }
.md h1, .md h2, .md h3 { line-height: 1.25; }
/* An id is one token — wrapped mid-id it stops being readable as an id. */
.nowrap { white-space: nowrap; }
.events li { margin: .25rem 0; }
.events time { color: var(--muted); font-size: .8rem; margin-right: .5rem; }
.events .event-agent { color: var(--muted); font-size: .85rem; }
.progress { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin: .8rem 0;
  padding: .55rem .75rem; border-radius: .5rem; background: color-mix(in srgb, var(--ok) 10%, transparent); }
.progress span, .progress a { color: var(--muted); font-size: .9rem; }
.queue-heading { display: flex; align-items: baseline; }
.queue-counts { display: inline-flex; gap: .8rem; margin-left: clamp(2rem, 7vw, 5rem);
  color: var(--muted); font-size: .8em; font-weight: 500; white-space: nowrap; }
.queue-counts span:first-child { color: var(--ok); }
.queue-views { display: flex; gap: .35rem; margin: .65rem 0 1rem; }
.queue-views a { border: 1px solid var(--line); border-radius: 1rem; color: var(--muted); font-size: .82rem;
  padding: .18rem .65rem; text-decoration: none; }
.queue-views a.active { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--card)); }
.mobile-start { display: none; }
.queue-activity { margin: 1rem 0 1.5rem; }
.queue-activity-heading { display: flex; align-items: baseline; gap: .6rem; margin-bottom: .45rem; }
.queue-activity h2 { margin: 0; font-size: .9rem; }
.queue-activity-heading span { color: var(--muted); font-size: .78rem; }
.heatmap-scroll { overflow-x: auto; padding-bottom: .25rem; }
.heatmap { display: grid; grid-template-rows: repeat(7, .65rem); grid-auto-columns: .65rem;
  grid-auto-flow: column; gap: .17rem; width: max-content; }
.heatmap-cell { display: block; width: .65rem; height: .65rem; min-width: 0; padding: 0; border: 0;
  border-radius: .12rem; background: color-mix(in srgb, var(--fg) 7%, var(--card)); }
.heatmap-cell:hover, .heatmap-cell:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.heatmap-cell.level-1 { background: color-mix(in srgb, var(--ok) 25%, var(--card)); }
.heatmap-cell.level-2 { background: color-mix(in srgb, var(--ok) 45%, var(--card)); }
.heatmap-cell.level-3 { background: color-mix(in srgb, var(--ok) 68%, var(--card)); }
.heatmap-cell.level-4 { background: var(--ok); }
.heatmap-readout, .chart-readout { min-height: 1.4em; margin: .45rem 0 0; color: var(--muted); font-size: .8rem; }
.heatmap-controls { display: flex; gap: .65rem; margin-top: .35rem; font-size: .8rem; }
.heatmap-step { text-decoration: none; }
.bar { display: inline-block; vertical-align: middle; width: min(18rem, var(--bar)); height: .65rem;
  border-radius: .4rem; background: var(--accent); }
.chart-wrap { position: relative; overflow-x: auto; margin: .25rem 0 1.5rem; padding: .55rem .65rem; border: 1px solid var(--line); border-radius: .55rem; background: var(--card); }
.chart { display: block; width: 100%; min-width: 38rem; height: auto; overflow: visible; }
.chart-no-data { margin: .35rem 0; color: var(--muted); }
.chart-empty { min-height: 4.2rem; }
.chart-grid { stroke: var(--line); stroke-width: 1; }
.chart-axis, .chart-axis-label { fill: var(--muted); font-size: 10px; }
.chart-axis-label { font-size: 11px; }
.chart-axis-rotate { transform: rotate(-38deg); transform-origin: 0 0; }
.chart-line { fill: none; stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.chart-point { cursor: pointer; outline: none; }
.chart-point:focus-visible { stroke: var(--fg); stroke-width: 2.5; }
.chart-lines .chart-point { stroke: var(--card); stroke-width: 1.2; }
.chart-legend { display: flex; flex-wrap: wrap; gap: .35rem .9rem; margin: .3rem 0 .1rem; color: var(--muted); font-size: .8rem; }
.chart-legend span { display: inline-flex; gap: .35rem; align-items: center; }
.chart-legend i { width: .7rem; height: .7rem; border-radius: 50%; background: var(--series); }
.chart-bar-rect { fill: var(--accent); opacity: .82; }
.chart-histogram .chart-point:hover .chart-bar-rect, .chart-histogram .chart-point:focus .chart-bar-rect { opacity: 1; }
.box-whisker { stroke: var(--muted); stroke-width: 1.2; }
.box-body { fill: color-mix(in srgb, var(--accent) 42%, var(--card)); stroke: var(--accent); stroke-width: 1.2; }
.box-median { stroke: var(--fg); stroke-width: 1.5; }
.chart-diagonal { stroke: var(--muted); stroke-dasharray: 5 4; }
.scatter-point { fill: var(--accent); stroke: var(--card); stroke-width: 1.4; }
.chart-observation-count { margin: .2rem 0 0; color: var(--muted); font-size: .78rem; }
.stats-frequency { width: auto; min-width: 20rem; margin-bottom: .2rem; }
.stats-frequency th, .stats-frequency td { padding-right: 1.25rem; }
.stats-frequency .frequency-count { width: 7ch; white-space: nowrap; text-align: left; }
.frequency-more { width: fit-content; margin: .35rem 0 1.4rem; }
.frequency-more summary { cursor: pointer; color: var(--accent); font-size: .9rem; }
.frequency-more table { margin-top: .35rem; }
input, button { font: inherit; padding: .45rem .7rem; border-radius: .4rem;
  border: 1px solid var(--line); background: var(--card); color: var(--fg); }
button { background: var(--accent); color: #fff; border: none; cursor: pointer; }
@media (max-width: 640px) {
  /* `main` sheds its side padding so wide TABLES can use the full width. Prose
     must not: a record page rendered flush to the screen edge is hard to read
     and looks broken, so the reading surface keeps its own gutter. */
  main { padding: .6rem 0; }
  .reading-page, .page-head { padding: 0 .9rem; }

  /* THE TENANT DROPS UNDER THE MARK. A slug like `compute-economics` does not
     fit beside a lockup and a nav row, and wrapping it mid-word made the header
     look broken; giving it the whole line puts the nav on the next one, which
     is where it was already ending up (owner, 2026-08-28). */
  .tenant, .proj { flex-basis: 100%; }
  nav { flex-basis: 100%; }
  .tenant-list { left: 0; }
  .mark-lockup { height: 2.35rem; }
  th.hide-sm, td.hide-sm { display: none; }
  .record-details dl { grid-template-columns: 1fr; gap: .1rem; }
  .record-details dd { margin-bottom: .5rem; }
  .queue-heading { align-items: flex-start; flex-direction: column; gap: .1rem; }
  .queue-counts { margin-left: 0; font-size: .72em; }
  .mobile-start { display: inline-block; }
  .chart-wrap { padding: .4rem; }
  .reading-meta, .reading-footer { column-gap: .65rem; }
  .reading-details dl { grid-template-columns: 1fr; gap: .1rem; }
}
/* DEFERRED FURNITURE — the slot a fragment lands in. The similar strip is the
   most expensive thing on a record page and the LAST thing on it, so the record
   is sent without it and it arrives after paint (T-20260823-9ca8). It reserves
   the strip's own top rule and rough height so the arrival extends the page
   rather than jolting it, and it is the final element, so nothing above it can
   be pushed. Empty when JavaScript is off except for the link in its noscript. */
.similar-pending { margin: 2.4rem 0 0; padding-top: 1.3rem; border-top: 1px solid var(--line);
  min-height: 3rem; font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: .85rem; color: var(--muted); }

/* THE DESIGN GALLERY (/design-gallery). Its own few rules rather than reusing
   the record card: what it shows is IMAGES at wildly different aspect ratios —
   a square mark, a 3.4:1 lockup, a 1200x630 card — and a grid that fixes a
   tile height would letterbox most of them. */
.gallery-intro, .gallery-note { color: var(--muted); max-width: 42rem; }
.gallery-surfaces { list-style: none; padding: 0; margin: .6rem 0 1.6rem; }
.gallery-surface { margin: 0 0 .9rem; }
.gallery-surface p { color: var(--muted); font-size: .9rem; margin: .15rem 0 0; max-width: 42rem; }
.gallery-grid { display: grid; gap: 1rem; margin: 1rem 0 2.4rem;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.gallery-item { margin: 0; border: 1px solid var(--line); border-radius: .6rem;
  background: var(--card); overflow: hidden; display: flex; flex-direction: column; }
.gallery-item.wide { grid-column: span 2; }
.gallery-item a { display: grid; place-items: center; padding: 1rem; min-height: 8rem;
  background: color-mix(in srgb, var(--fg) 3%, transparent); }
/* The reverse mark is white, so it needs a dark ground to be visible at all —
   the one tile that supplies its own. */
.gallery-item.on-dark a { background: #211b22; }
.gallery-item img { max-width: 100%; max-height: 12rem; height: auto; display: block; }
.gallery-item figcaption { padding: .6rem .8rem .8rem; border-top: 1px solid var(--line);
  font-size: .82rem; display: flex; flex-direction: column; gap: .2rem; }
.gallery-item figcaption span { color: var(--muted); }
@media (max-width: 640px) {
  .gallery-grid { grid-template-columns: 1fr; padding: 0 .9rem; }
  .gallery-item.wide { grid-column: span 1; }
}