/* ==========================================================================
   Render vs Reality
   --------------------------------------------------------------------------
   Design notes, so the next person does not undo them by accident.

   PALETTE. Cool trace-paper grey, not cream. The one accent is survey-marking
   pink, the colour of utility paint and site flags. It is what a site looks
   like before a building exists, which is the subject of the whole archive.
   Pink is reserved for interaction: links out to renderings, focus rings, the
   active filter. It never decorates.

   STATUS. Encoded as a fill ramp, not five arbitrary colours. A square that is
   solid means it got built. It empties out through modified, phase incomplete,
   and stalled, and ends struck through at cancelled. Fill equals built. The
   brand mark is the same idea at 30px: outlined rect, filled rect. Hue is a
   secondary signal so the ramp is not shape-only at pin size.

   TITLE BLOCK. The rendering side of every comparison is a citation, not an
   image, because we do not reproduce renderings. It is set as a drawing title
   block: hairline frame, label and value rows, condensed uppercase labels.
   That is the one place hairlines are allowed.

   NEVER use fixed heights on image bands. aspect-ratio only. Fixed heights
   plus background-size:cover crops artwork and that bug has shipped too often.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body, h1, h2, h3, p, ul, ol, dl, dd, figure, fieldset, legend { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img, picture, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }

/* --------------------------------------------------------------------------
   Tokens
   -------------------------------------------------------------------------- */
:root {
  --paper:      #edefee;   /* cool trace paper. deliberately not cream */
  --paper-2:    #e3e6e5;
  --surface:    #f7f8f8;
  --ink:        #181c1b;
  --ink-2:      #4b5453;
  --ink-3:      #596463;   /* 4.88:1 or better on every site surface */
  --rule:       #ccd1cf;
  --rule-soft:  #dde1df;
  --accent:     #b8005f;   /* survey marking pink, darkened for contrast on paper */
  --accent-lift:#8f0049;
  --accent-wash:#fbe7f1;

  --st-built:      #2e6b52;
  --st-modified:   #6f6430;
  --st-phase:      #2b5c7a;
  --st-stalled:    #5b5568;
  --st-cancelled:  #8a3b45;

  --font-display: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-prose: "Iowan Old Style", "Palatino", "Palatino Linotype", "Book Antiqua", Georgia, serif;
  --font-util: "Avenir Next Condensed", "Roboto Condensed", "Arial Narrow", "Helvetica Neue", system-ui, sans-serif;

  --wrap: 1180px;
  --prose: 66ch;
  --r: 4px;

  --gap: 1.5rem;
  --band: clamp(3rem, 7vw, 5.5rem);
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper:     #141817;
    --paper-2:   #1b201f;
    --surface:   #1b201f;
    --ink:       #e8ebea;
    --ink-2:     #a8b2b0;
    --ink-3:     #8b9593;
    --rule:      #333b39;
    --rule-soft: #262d2c;
    --accent:      #ff6bab;
    --accent-lift: #ff96c4;
    --accent-wash: #2c1621;

    --st-built:     #63b992;
    --st-modified:  #bfae63;
    --st-phase:     #6fadd4;
    --st-stalled:   #a99fbe;
    --st-cancelled: #e08b95;
  }
}

html { background: var(--paper); }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

/* --------------------------------------------------------------------------
   Primitives
   -------------------------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 1.25rem; }
@media (min-width: 700px) { .wrap { padding-inline: 2rem; } }

a { color: inherit; text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-color: var(--accent); }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 50;
  background: var(--ink); color: var(--paper); padding: .7rem 1rem; text-decoration: none;
}
.skip:focus { left: 0; }

.kicker, .col-kicker, .rc-kicker, .callout-h, .record-kicker {
  font-family: var(--font-util);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .75rem;
  font-weight: 600;
  color: var(--ink-3);
}

.small { font-size: .875rem; color: var(--ink-2); line-height: 1.6; }
.lede { font-size: clamp(1.0625rem, 2.1vw, 1.3125rem); line-height: 1.5; color: var(--ink); }

.sec-h {
  font-size: clamp(1.25rem, 2.6vw, 1.6rem);
  letter-spacing: -.018em;
  font-weight: 660;
  line-height: 1.2;
}
.page-h {
  font-size: clamp(2rem, 6vw, 3.25rem);
  letter-spacing: -.032em;
  line-height: 1.03;
  font-weight: 680;
}

/* --------------------------------------------------------------------------
   Header and footer
   -------------------------------------------------------------------------- */
.site-head { border-bottom: 1px solid var(--rule-soft); }
.head-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; min-height: 66px; flex-wrap: wrap;
}
.brand { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--ink); }
.brand-mark { color: var(--ink); flex: none; }
.brand-text { display: inline-flex; align-items: baseline; gap: .34em; letter-spacing: -.02em; font-weight: 680; font-size: 1.0625rem; }
.brand-vs { font-family: var(--font-util); text-transform: uppercase; font-size: .7em; letter-spacing: .1em; color: var(--ink-3); font-weight: 600; }

.site-nav { display: flex; gap: clamp(.85rem, 2.4vw, 1.6rem); }
.site-nav a {
  font-family: var(--font-util); text-transform: uppercase; letter-spacing: .1em;
  font-size: .8125rem; font-weight: 600; color: var(--ink-2); text-decoration: none;
  padding-block: .35rem;
}
.site-nav a:hover { color: var(--ink); box-shadow: inset 0 -2px 0 var(--accent); }

.site-foot { border-top: 1px solid var(--rule-soft); margin-top: var(--band); padding-block: 2.5rem 3rem; }
.foot-inner { display: grid; gap: 2rem; }
@media (min-width: 800px) { .foot-inner { grid-template-columns: 1fr 1fr; gap: 3rem; } }
.foot-brand { font-weight: 680; letter-spacing: -.02em; margin-bottom: .4rem; }
.foot-note { font-size: .875rem; color: var(--ink-2); line-height: 1.6; max-width: 46ch; }
.foot-note + .foot-note { margin-top: .75rem; }
.foot-nav { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; margin-bottom: 1rem; }
.foot-nav a {
  font-family: var(--font-util); text-transform: uppercase; letter-spacing: .1em;
  font-size: .8125rem; font-weight: 600; text-decoration: none; color: var(--ink-2);
}
.foot-nav a:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); }
.foot-by { color: var(--ink-3); }

/* --------------------------------------------------------------------------
   Status ramp. The signature element.
   Solid square = built. It empties out and ends struck through at cancelled.
   -------------------------------------------------------------------------- */
.ramp { margin-top: clamp(2.25rem, 5vw, 3.25rem); }
.ramp-label { margin-bottom: .85rem; }
.ramp-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
  gap: .5rem;
  max-width: 720px;
}
.ramp-cell {
  display: flex; flex-direction: column; gap: .45rem;
  padding: .7rem .6rem .75rem;
  border: 1px solid var(--rule-soft);
  border-radius: var(--r);
  background: var(--surface);
  text-decoration: none; color: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease;
}
.ramp-cell:hover { border-color: var(--accent); background: var(--accent-wash); }
.ramp-cell[aria-current="true"] { border-color: var(--accent); background: var(--accent-wash); box-shadow: inset 0 0 0 1px var(--accent); }
.ramp-name {
  font-family: var(--font-util); text-transform: uppercase; letter-spacing: .09em;
  font-size: .6875rem; font-weight: 600; color: var(--ink-2); line-height: 1.25;
}
.ramp-n { font-size: 1.125rem; font-weight: 680; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }

/* the glyph itself */
.fill {
  --f: 100%;
  --c: var(--ink);
  position: relative; display: block;
  width: 20px; aspect-ratio: 1;
  border: 1.5px solid var(--c);
  border-radius: 1px;
  overflow: hidden;
  flex: none;
}
.fill::before {
  content: ""; position: absolute; inset: 0;
  background: var(--c);
  clip-path: inset(calc(100% - var(--f)) 0 0 0);
}
.fill[data-s="built"]            { --c: var(--st-built);     --f: 100%; }
.fill[data-s="built-modified"]   { --c: var(--st-modified);  --f: 66%; }
.fill[data-s="phase-incomplete"] { --c: var(--st-phase);     --f: 40%; }
.fill[data-s="stalled"]          { --c: var(--st-stalled);   --f: 0%; }
.fill[data-s="cancelled"]        { --c: var(--st-cancelled); --f: 0%; }
.fill[data-s="cancelled"]::after {
  content: ""; position: absolute; inset: -2px;
  background: linear-gradient(to top left, transparent calc(50% - 1px), var(--c) calc(50% - 1px), var(--c) calc(50% + 1px), transparent calc(50% + 1px));
}

/* staggered reveal, once, on load */
@media (prefers-reduced-motion: no-preference) {
  .js .ramp-cell { animation: rise .5s cubic-bezier(.2,.7,.3,1) backwards; }
  .js .ramp-cell:nth-child(1) { animation-delay: .04s; }
  .js .ramp-cell:nth-child(2) { animation-delay: .10s; }
  .js .ramp-cell:nth-child(3) { animation-delay: .16s; }
  .js .ramp-cell:nth-child(4) { animation-delay: .22s; }
  .js .ramp-cell:nth-child(5) { animation-delay: .28s; }
  @keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
}

/* --------------------------------------------------------------------------
   Status pill
   -------------------------------------------------------------------------- */
.pill {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-util); text-transform: uppercase; letter-spacing: .1em;
  font-size: .75rem; font-weight: 600; color: var(--ink-2);
}
.pill--sm { font-size: .6875rem; }
.pill .dot {
  --f: 100%; --c: var(--ink);
  position: relative; display: block; width: 11px; aspect-ratio: 1;
  border: 1.4px solid var(--c); border-radius: 1px; overflow: hidden; flex: none;
}
.pill .dot::before { content: ""; position: absolute; inset: 0; background: var(--c); clip-path: inset(calc(100% - var(--f)) 0 0 0); }
.pill[data-s="built"] .dot            { --c: var(--st-built);     --f: 100%; }
.pill[data-s="built-modified"] .dot   { --c: var(--st-modified);  --f: 66%; }
.pill[data-s="phase-incomplete"] .dot { --c: var(--st-phase);     --f: 40%; }
.pill[data-s="stalled"] .dot          { --c: var(--st-stalled);   --f: 0%; }
.pill[data-s="cancelled"] .dot        { --c: var(--st-cancelled); --f: 0%; }
.pill[data-s="cancelled"] .dot::after {
  content: ""; position: absolute; inset: -1px;
  background: linear-gradient(to top left, transparent calc(50% - .8px), var(--c) calc(50% - .8px), var(--c) calc(50% + .8px), transparent calc(50% + .8px));
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero { padding-block: clamp(2.5rem, 7vw, 5rem) 0; }
.hero-h {
  font-size: clamp(2.5rem, 8.6vw, 5rem);
  line-height: .98;
  letter-spacing: -.038em;
  font-weight: 680;
  max-width: 15ch;
}
.hero-body { margin-top: clamp(1.5rem, 3.5vw, 2.25rem); max-width: 60ch; display: grid; gap: 1rem; }
.hero-body p { font-family: var(--font-prose); font-size: 1.0625rem; line-height: 1.62; color: var(--ink-2); }
.hero-body .lede { font-family: var(--font-display); color: var(--ink); font-size: clamp(1.125rem, 2.3vw, 1.375rem); line-height: 1.45; letter-spacing: -.012em; }
.hero-body a { color: var(--accent); text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.hero-body a:hover { color: var(--accent-lift); text-decoration-color: currentColor; }

/* --------------------------------------------------------------------------
   Archive grid
   -------------------------------------------------------------------------- */
.archive { padding-top: var(--band); }
.archive-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-bottom: 1rem; border-bottom: 1px solid var(--rule); }
.count { font-family: var(--font-util); text-transform: uppercase; letter-spacing: .1em; font-size: .8125rem; font-weight: 600; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.archive-meta { display: grid; justify-items: end; gap: .25rem; text-align: right; }
.reviewed, .research-date { font-family: var(--font-util); font-size: .75rem; letter-spacing: .035em; color: var(--ink-3); }
.research-date { margin-top: 1.25rem; }
@media (max-width: 520px) { .archive-meta { justify-items: start; text-align: left; } }

.filters { display: none; gap: .9rem 1.25rem; flex-wrap: wrap; align-items: flex-end; padding-block: 1.25rem; }
.js .filters { display: flex; }
.facet { display: grid; gap: .3rem; }
.facet label {
  font-family: var(--font-util); text-transform: uppercase; letter-spacing: .1em;
  font-size: .6875rem; font-weight: 600; color: var(--ink-3);
}
.facet select, .facet input {
  appearance: none;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  padding: .5rem 2rem .5rem .65rem;
  font-size: .875rem;
  max-width: 15rem;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 1rem center, right .68rem center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.facet input { background-image: none; padding-right: .65rem; width: min(18rem, 76vw); }
.facet--search { flex: 1 1 16rem; }
.facet--search input { width: 100%; }
.facet select:hover, .facet input:hover { border-color: var(--ink-3); }
.facet select:focus-visible, .facet input:focus-visible { border-color: var(--accent); outline: 2px solid var(--accent); outline-offset: 2px; }
.facet--action { align-self: end; }

.btn-quiet, .btn-link {
  background: none; border: 1px solid var(--rule); border-radius: var(--r);
  padding: .5rem .85rem; font-family: var(--font-util); text-transform: uppercase;
  letter-spacing: .1em; font-size: .6875rem; font-weight: 600; color: var(--ink-2); cursor: pointer;
}
.btn-quiet:hover, .btn-link:hover { border-color: var(--accent); color: var(--accent); }
.btn-link { border: 0; padding: 0; text-decoration: underline; text-decoration-color: var(--accent); }

.no-results { padding: 2.5rem 0; color: var(--ink-2); font-family: var(--font-prose); }

.grid {
  display: grid; gap: 2rem 1.5rem;
  grid-template-columns: 1fr;
  padding-top: 1.75rem;
}
@media (min-width: 620px) { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .grid { grid-template-columns: repeat(3, 1fr); gap: 2.75rem 1.75rem; } }

.card-hit { display: block; text-decoration: none; color: inherit; }
.card-hit:hover .card-name { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; }
.card-hit:hover .shot--pending { border-color: var(--ink-3); }
.card-body { padding-top: .9rem; display: grid; gap: .45rem; }
.card-name { font-size: 1.1875rem; letter-spacing: -.02em; font-weight: 660; line-height: 1.22; }
.card-sum { font-family: var(--font-prose); font-size: .9375rem; line-height: 1.55; color: var(--ink-2); }
.card-meta {
  font-family: var(--font-util); text-transform: uppercase; letter-spacing: .09em;
  font-size: .6875rem; font-weight: 600; color: var(--ink-3); margin-top: .1rem;
}
.archive-foot { padding-top: 2.5rem; font-family: var(--font-prose); color: var(--ink-2); }
.archive-foot a { color: var(--accent); }

/* --------------------------------------------------------------------------
   Photograph slot. aspect-ratio only, never a fixed height.
   -------------------------------------------------------------------------- */
.shot { --ratio: 3 / 2; margin: 0; }
.shot img { width: 100%; height: auto; aspect-ratio: var(--ratio); object-fit: cover; border-radius: var(--r); background: var(--paper-2); }
.shot-cap {
  margin-top: .55rem; font-family: var(--font-util); text-transform: uppercase;
  letter-spacing: .09em; font-size: .6875rem; font-weight: 600; color: var(--ink-3);
}
.shot-cap a { color: var(--ink-2); text-decoration: underline; text-underline-offset: .15em; }

.shot--pending {
  aspect-ratio: var(--ratio);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  background: var(--paper-2);
  display: grid; place-items: center;
  transition: border-color .16s ease;
}
/* trace-paper grid, only on the big entry-page slot. cards stay flat. */
.compare .shot--pending {
  background-color: var(--paper-2);
  background-image:
    linear-gradient(var(--rule-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--rule-soft) 1px, transparent 1px);
  background-size: 28px 28px, 28px 28px;
}
.pending-inner { display: grid; justify-items: center; gap: .3rem; padding: 1rem; text-align: center; }
.pending-mark { color: var(--accent); opacity: .85; margin-bottom: .25rem; }
.pending-lead {
  font-family: var(--font-util); text-transform: uppercase; letter-spacing: .12em;
  font-size: .8125rem; font-weight: 600; color: var(--ink-2);
}
.pending-sub { font-family: var(--font-prose); font-size: .8125rem; color: var(--ink-3); font-style: italic; }

/* --------------------------------------------------------------------------
   Entry page
   -------------------------------------------------------------------------- */
.entry-head { padding-block: clamp(1.75rem, 4vw, 3rem) 0; }
.crumbs { font-family: var(--font-util); text-transform: uppercase; letter-spacing: .1em; font-size: .75rem; font-weight: 600; color: var(--ink-3); margin-bottom: 1.5rem; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; }
.entry-title { display: grid; gap: .7rem; justify-items: start; }
/* ch has to sit on the h1 itself. On the wrapper it resolves against 16px and
   clamps the display type to about 210px, which wrapped short names onto two lines. */
.entry-title .page-h { max-width: 17ch; }
.entry-addr { font-family: var(--font-prose); color: var(--ink-2); font-size: 1rem; max-width: 46ch; }
.approx {
  font-family: var(--font-util); text-transform: uppercase; letter-spacing: .09em;
  font-size: .6875rem; font-weight: 600; color: var(--ink-3);
  border: 1px solid var(--rule); border-radius: 2px; padding: .05rem .35rem; white-space: nowrap;
}
.entry-head .lede { margin-top: 1.5rem; max-width: 62ch; font-family: var(--font-prose); line-height: 1.6; color: var(--ink-2); }

.compare {
  display: grid; gap: 1.75rem;
  padding-top: clamp(2rem, 4.5vw, 3rem);
}
.compare-col--render { order: -1; }
@media (min-width: 900px) {
  .compare { grid-template-columns: minmax(0, 1.62fr) minmax(0, 1fr); gap: 2.5rem; align-items: start; }
  .compare-col--render { order: 0; }
}
.col-kicker { margin-bottom: .7rem; }
.col-note { margin-top: .8rem; font-size: .875rem; color: var(--ink-3); line-height: 1.6; max-width: 52ch; }
.col-note a { color: var(--accent); }

/* the title block */
.render-card {
  border: 1px solid var(--ink);
  border-radius: var(--r);
  background: var(--surface);
  padding: 1.15rem 1.15rem 1.25rem;
}
.rc-kicker { padding-bottom: .7rem; border-bottom: 1px solid var(--ink); margin-bottom: .1rem; color: var(--ink); }
.rc-meta { display: grid; }
.rc-meta > div { display: grid; gap: .15rem; padding-block: .7rem; border-bottom: 1px solid var(--rule-soft); }
@media (min-width: 420px) { .rc-meta > div { grid-template-columns: 6.5rem 1fr; gap: .75rem; align-items: baseline; } }
.rc-meta dt {
  font-family: var(--font-util); text-transform: uppercase; letter-spacing: .1em;
  font-size: .6875rem; font-weight: 600; color: var(--ink-3);
}
.rc-meta dd { font-size: .875rem; line-height: 1.5; }
.rc-link {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  margin-top: 1.1rem; padding: .7rem .9rem;
  border: 1.5px solid var(--accent); border-radius: var(--r);
  color: var(--accent); text-decoration: none; font-weight: 640; letter-spacing: -.01em;
  transition: background .16s ease, color .16s ease;
}
.rc-link:hover { background: var(--accent); color: var(--surface); }
.rc-link svg { flex: none; }
.rc-host {
  flex-basis: 100%;
  font-family: var(--font-util); text-transform: lowercase; letter-spacing: .04em;
  font-size: .75rem; font-weight: 600; opacity: .8;
}
.rc-note, .rc-why { margin-top: .9rem; font-size: .8125rem; line-height: 1.6; color: var(--ink-3); }
.rc-note { padding: .7rem .8rem; background: var(--paper-2); border-radius: var(--r); color: var(--ink-2); }
.rc-why a { color: var(--accent); }

.entry-body { padding-top: var(--band); display: grid; gap: clamp(2.25rem, 5vw, 3.25rem); }
.prose { max-width: var(--prose); }
.prose p { font-family: var(--font-prose); font-size: 1.0625rem; line-height: 1.68; color: var(--ink-2); }
.prose p + p { margin-top: 1rem; }
.prose .sec-h { margin-bottom: 1rem; color: var(--ink); }
.prose a { color: var(--accent); }
.prose a:hover { color: var(--accent-lift); }

.changes { display: grid; gap: .85rem; }
.changes li {
  font-family: var(--font-prose); font-size: 1.0625rem; line-height: 1.6; color: var(--ink-2);
  padding-left: 1.35rem; position: relative;
}
.changes li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 7px; height: 7px; border: 1.4px solid var(--ink-3); border-radius: 1px;
}

.unknown {
  border-left: 3px solid var(--ink-3);
  padding: .15rem 0 .15rem 1rem;
  font-family: var(--font-display) !important;
  font-size: 1.0625rem !important;
  font-weight: 620;
  color: var(--ink) !important;
  letter-spacing: -.01em;
}
.record-kicker { margin-top: 1.5rem; margin-bottom: .5rem; }

.facts { display: grid; }
.facts > div { display: grid; gap: .2rem; padding-block: .85rem; border-bottom: 1px solid var(--rule-soft); }
@media (min-width: 560px) { .facts > div { grid-template-columns: 10rem 1fr; gap: 1rem; align-items: baseline; } }
.facts dt { font-family: var(--font-util); text-transform: uppercase; letter-spacing: .1em; font-size: .6875rem; font-weight: 600; color: var(--ink-3); }
.facts dd { font-size: .9375rem; line-height: 1.55; }

.sources { display: grid; gap: .85rem; counter-reset: src; }
.sources li { position: relative; padding-left: 2rem; counter-increment: src; font-size: .9375rem; line-height: 1.5; }
.sources li::before {
  content: counter(src, decimal-leading-zero);
  position: absolute; left: 0; top: .1em;
  font-family: var(--font-util); font-size: .75rem; font-weight: 600; color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.sources a { color: var(--ink); text-decoration-color: var(--accent); }
.src-host { display: block; font-family: var(--font-util); font-size: .75rem; letter-spacing: .05em; color: var(--ink-3); }
.sources + .small { margin-top: 1.5rem; }

/* Single-source disclosure. Quiet on purpose: it is a caveat, not a warning banner. */
.src-thin {
  margin-top: 1.35rem; padding: .15rem 0 .15rem 1rem;
  border-left: 3px solid var(--ink-3);
  font-size: .875rem; line-height: 1.6; color: var(--ink-2);
}
.src-thin + .small { margin-top: 1.5rem; }

.entry-nav {
  display: grid; margin-top: var(--band);
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}
@media (min-width: 700px) {
  .entry-nav { grid-template-columns: 1fr 1fr; }
  /* a border, not a 1px grid gap over a coloured background. the background
     approach bled grey into the .wrap padding at both edges. */
  .en-next { text-align: right; border-left: 1px solid var(--rule); padding-left: 1.5rem; }
  .en-prev { padding-right: 1.5rem; }
}
.entry-nav a {
  padding: 1.4rem 0; text-decoration: none;
  display: grid; gap: .3rem; font-weight: 640; letter-spacing: -.015em;
}
.entry-nav a span {
  font-family: var(--font-util); text-transform: uppercase; letter-spacing: .1em;
  font-size: .6875rem; font-weight: 600; color: var(--ink-3);
}
.entry-nav a:hover { color: var(--accent); }

/* --------------------------------------------------------------------------
   Document pages
   -------------------------------------------------------------------------- */
.page-head { padding-block: clamp(2rem, 5vw, 3.5rem) 0; }
.page-head .kicker { margin-bottom: .8rem; }
.page-head .lede { margin-top: 1.25rem; max-width: 58ch; }
.page-head .small { margin-top: .9rem; max-width: 58ch; }
.page-head a { color: var(--accent); }

.prose--page { padding-top: clamp(1.75rem, 4vw, 2.75rem); }
.prose--page .sec-h { margin-top: 2.5rem; }
.prose--page .sec-h:first-child { margin-top: 0; }
.bullets { display: grid; gap: .7rem; margin-top: 1rem; }
.bullets li {
  font-family: var(--font-prose); font-size: 1.0625rem; line-height: 1.6; color: var(--ink-2);
  padding-left: 1.35rem; position: relative;
}
.bullets li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 7px; height: 7px; background: var(--ink-3); border-radius: 1px;
}
.bullets strong { color: var(--ink); font-family: var(--font-display); font-weight: 640; font-size: .96em; }

.callout {
  border: 1px solid var(--ink); border-radius: var(--r);
  padding: 1.25rem 1.25rem 1.4rem; margin-bottom: 2rem; background: var(--surface);
}
.callout--warn { border-color: var(--accent); background: var(--accent-wash); }
.callout-h { margin-bottom: .6rem; color: var(--ink); }
.callout p { font-family: var(--font-prose); line-height: 1.6; color: var(--ink-2); }
.big-link {
  font-family: var(--font-display); font-size: clamp(1.25rem, 3.5vw, 1.75rem);
  font-weight: 660; letter-spacing: -.025em; color: var(--accent); word-break: break-word;
}

/* --------------------------------------------------------------------------
   City index
   -------------------------------------------------------------------------- */
.city-groups { padding-top: clamp(2rem, 4vw, 3rem); display: grid; gap: clamp(2.5rem, 5vw, 3.5rem); }
.city-group .sec-h { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; padding-bottom: .75rem; border-bottom: 1px solid var(--rule); }
.grp-n { font-family: var(--font-util); font-size: .8125rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.grp-blurb { font-family: var(--font-prose); font-size: .9375rem; color: var(--ink-3); margin-top: .7rem; }
.city-list { display: grid; gap: 1.5rem; margin-top: 1.5rem; }
.city-list a { display: grid; gap: .2rem; text-decoration: none; }
.cl-name { font-size: 1.125rem; font-weight: 650; letter-spacing: -.02em; }
.city-list a:hover .cl-name { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; }
.cl-meta { font-family: var(--font-util); text-transform: uppercase; letter-spacing: .09em; font-size: .6875rem; font-weight: 600; color: var(--ink-3); }
.cl-sum { font-family: var(--font-prose); font-size: .9375rem; line-height: 1.55; color: var(--ink-2); margin-top: .35rem; max-width: 62ch; }

/* --------------------------------------------------------------------------
   Map
   -------------------------------------------------------------------------- */
.map-wrap { padding-top: clamp(1.75rem, 4vw, 2.5rem); }
.map {
  aspect-ratio: 4 / 5;
  width: 100%;
  border: 1px solid var(--rule);
  border-radius: var(--r);
  background: var(--paper-2);
  z-index: 0;
}
@media (min-width: 700px) { .map { aspect-ratio: 16 / 10; } }
.js .map::after {
  content: "Loading the map. The full list is below and works either way.";
  display: grid; place-items: center; height: 100%; padding: 2rem; text-align: center;
  font-size: .875rem; color: var(--ink-3);
}
.js .map.is-ready::after { content: none; display: none; }
html:not(.js) .map { display: none; }

.map-legend { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; padding-top: 1rem; }
.map-credit { margin-top: .6rem; color: var(--ink-3); }
.map-list { padding-top: var(--band); display: grid; gap: 2rem; }
.map-list > .sec-h + .small { margin-top: -1.5rem; }
.ml-group { display: grid; gap: .75rem; }
.ml-h { display: flex; align-items: center; gap: .7rem; font-size: 1rem; padding-bottom: .6rem; border-bottom: 1px solid var(--rule-soft); }
.ml-list { display: grid; gap: .55rem; }
.ml-list a { font-weight: 620; letter-spacing: -.015em; text-decoration-color: var(--rule); }
.ml-list a:hover { text-decoration-color: var(--accent); }
.ml-meta { font-family: var(--font-util); text-transform: uppercase; letter-spacing: .09em; font-size: .6875rem; font-weight: 600; color: var(--ink-3); }

/* leaflet overrides, kept minimal */
.leaflet-container { font-family: var(--font-display); border-radius: var(--r); background: var(--paper-2); }
.leaflet-popup-content-wrapper { border-radius: var(--r); }
.leaflet-popup-content { margin: .8rem .9rem; font-size: .875rem; line-height: 1.45; }
.pin-name { font-weight: 660; letter-spacing: -.015em; display: block; margin-bottom: .2rem; }
.pin-meta { font-family: var(--font-util); text-transform: uppercase; letter-spacing: .09em; font-size: .6875rem; font-weight: 600; color: var(--ink-3); display: block; margin-top: .3rem; }
.pin-link { color: #b8005f; font-weight: 620; display: inline-block; margin-top: .45rem; }

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */
.form-wrap { padding-top: clamp(2rem, 4vw, 3rem); }
.rvr-form { max-width: 46rem; display: grid; gap: 1.75rem; }
.rvr-form fieldset { border: 0; border-top: 1px solid var(--rule); padding-top: 1.5rem; display: grid; gap: 1.25rem; }
.rvr-form legend {
  font-family: var(--font-util); text-transform: uppercase; letter-spacing: .12em;
  font-size: .75rem; font-weight: 600; color: var(--ink-3); padding-right: .75rem;
}
.field { display: grid; gap: .4rem; }
.field label { font-weight: 620; font-size: .9375rem; letter-spacing: -.01em; }
.req { font-family: var(--font-util); text-transform: uppercase; letter-spacing: .1em; font-size: .625rem; font-weight: 600; color: var(--accent); margin-left: .35rem; }
.field input[type="text"], .field input[type="url"], .field input[type="email"], .field input[type="date"], .field textarea {
  width: 100%; background: var(--surface); color: var(--ink);
  border: 1px solid var(--rule); border-radius: var(--r);
  padding: .65rem .75rem; font-size: 1rem; font-family: var(--font-display);
}
.field textarea { font-family: var(--font-prose); line-height: 1.55; resize: vertical; }
.field input:focus, .field textarea:focus { border-color: var(--accent); }
.field input[type="file"] { font-size: .875rem; }
.hint { font-size: .8125rem; color: var(--ink-3); line-height: 1.5; }
.field--check { grid-template-columns: auto 1fr; gap: .7rem; align-items: start; }
.field--check input { margin-top: .32rem; width: 1.05rem; height: 1.05rem; accent-color: var(--accent); flex: none; }
.field--check label { font-weight: 460; font-size: .9375rem; line-height: 1.55; font-family: var(--font-prose); }
.fs-permission { border-top-color: var(--accent); }
.hp { position: absolute; left: -9999px; }

.btn {
  background: var(--ink); color: var(--paper);
  border: 1.5px solid var(--ink); border-radius: var(--r);
  padding: .8rem 1.5rem; font-weight: 640; letter-spacing: -.01em; cursor: pointer;
  transition: background .16s ease, border-color .16s ease;
}
.btn:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.submit-row { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }

/* --------------------------------------------------------------------------
   Legend block on the home page
   -------------------------------------------------------------------------- */
.legend { padding-top: var(--band); }
.legend .sec-h { padding-bottom: 1rem; border-bottom: 1px solid var(--rule); }
.legend-list { display: grid; gap: 0; margin-top: .5rem; }
.legend-list > div { display: grid; gap: .3rem; padding-block: 1rem; border-bottom: 1px solid var(--rule-soft); }
@media (min-width: 620px) { .legend-list > div { grid-template-columns: 13rem 1fr; gap: 1.5rem; align-items: baseline; } }
.legend-list dd { font-family: var(--font-prose); font-size: .9375rem; line-height: 1.55; color: var(--ink-2); }

@media print {
  .site-nav, .filters, .ramp, .entry-nav, .map { display: none; }
  body { background: #fff; color: #000; }
}

/* ==========================================================================
   NATIONAL LANE
   --------------------------------------------------------------------------
   The archive is global now. Two things follow from that and both live here.

   1. CITY BADGE. Every card and every entry header carries its place. Louisville
      is marked in accent because it is the founding set and the only one we
      photograph ourselves. Everywhere else is a quiet outline badge. The
      difference is the point, not decoration.

   2. THE REALITY HALF. In Louisville it is our photograph. Everywhere else it is
      Google's own keyless embed, click to load, or a sourced reporting card where
      no imagery can honestly show the site. Never a fixed height on any of them.
      aspect-ratio only, same rule as the photo slot.
   ========================================================================== */

.card-tags { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }

.city-badge {
  font-family: var(--font-util); text-transform: uppercase; letter-spacing: .09em;
  font-size: .6875rem; font-weight: 600; color: var(--ink-3);
  border: 1px solid var(--rule); border-radius: 2px;
  padding: .08rem .38rem; white-space: nowrap;
}
.city-badge[data-r="louisville"] {
  color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  background: var(--accent-wash);
}
.entry-title .card-tags { margin-bottom: -.1rem; }

/* the city select carries thirty-odd options, so let it breathe */
.facet--city select { max-width: 17rem; }

/* --------------------------------------------------------------------------
   Pending slot variants. Same frame, honest label.
   -------------------------------------------------------------------------- */
.shot--sv .pending-mark,
.shot--reporting .pending-mark { color: var(--ink-3); opacity: .8; }

/* --------------------------------------------------------------------------
   Street View / map embed
   -------------------------------------------------------------------------- */
.sv-frame {
  display: grid;
  position: relative;
  aspect-ratio: var(--ratio, 16 / 10);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  overflow: hidden;
  background-color: var(--paper-2);
  background-image:
    linear-gradient(var(--rule-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--rule-soft) 1px, transparent 1px);
  background-size: 28px 28px, 28px 28px;
}
.sv-iframe { width: 100%; height: 100%; border: 0; display: block; }

/* With JS off there is no handler, so the button would be a dead control.
   Hide it there and let the "Open in Google Maps" link carry the job. */
.sv-load { display: none; }
.js .sv-load {
  display: grid; place-items: center;
  width: 100%; height: 100%;
  background: transparent; border: 0; cursor: pointer;
  color: var(--ink-2); text-align: center; padding: 1rem;
  transition: background .16s ease, color .16s ease;
}
.js .sv-load:hover { background: var(--accent-wash); color: var(--ink); }
.sv-load-inner { display: grid; justify-items: center; gap: .3rem; }
.sv-load svg { color: var(--accent); margin-bottom: .25rem; }
.sv-load-lead {
  font-family: var(--font-util); text-transform: uppercase; letter-spacing: .12em;
  font-size: .8125rem; font-weight: 600;
}
.sv-load-sub {
  font-family: var(--font-prose); font-size: .8125rem; color: var(--ink-3);
  font-style: italic; max-width: 34ch; line-height: 1.5;
}

.sv-meta {
  margin-top: .6rem;
  display: flex; align-items: center; gap: .65rem; flex-wrap: wrap;
}
.sv-badge {
  font-family: var(--font-util); text-transform: uppercase; letter-spacing: .09em;
  font-size: .6875rem; font-weight: 600; color: var(--ink-3);
  border: 1px solid var(--rule); border-radius: 2px; padding: .08rem .38rem;
}
.sv-open {
  display: inline-flex; align-items: center; gap: .3rem;
  font-family: var(--font-util); text-transform: uppercase; letter-spacing: .09em;
  font-size: .6875rem; font-weight: 600; color: var(--accent);
  text-decoration: none;
}
.sv-open:hover { text-decoration: underline; }

.sv-note {
  margin-top: .7rem; padding: .7rem .8rem;
  background: var(--paper-2); border-radius: var(--r);
  font-size: .8125rem; line-height: 1.6; color: var(--ink-2); max-width: 60ch;
}
.sv-note-k {
  display: block; font-family: var(--font-util); text-transform: uppercase;
  letter-spacing: .1em; font-size: .6875rem; font-weight: 600; color: var(--ink-3);
  margin-bottom: .2rem;
}

/* --------------------------------------------------------------------------
   Reality via reporting. Used where Street View cannot show the site at all.
   Set like the render citation block so the two halves read as siblings.
   -------------------------------------------------------------------------- */
.report-card {
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent);
  border-radius: var(--r);
  background: var(--surface);
  padding: 1.1rem 1.2rem;
}
.rp-why { font-family: var(--font-prose); font-size: .9375rem; line-height: 1.62; color: var(--ink-2); }
.rp-kicker {
  margin-top: 1rem; padding-top: .8rem; border-top: 1px solid var(--rule-soft);
  font-family: var(--font-util); text-transform: uppercase; letter-spacing: .1em;
  font-size: .6875rem; font-weight: 600; color: var(--ink-3);
}
.rp-cites { margin-top: .5rem; display: grid; gap: .5rem; counter-reset: rp; }
.rp-cites li { font-size: .875rem; line-height: 1.5; }
.rp-cites a { color: var(--accent); }
.rp-cites .src-host {
  display: block; font-family: var(--font-util); text-transform: uppercase;
  letter-spacing: .08em; font-size: .625rem; color: var(--ink-3); margin-top: .1rem;
}

/* --------------------------------------------------------------------------
   Home page: every entry by outcome. The no-JS target for the status ramp.
   -------------------------------------------------------------------------- */
.outcomes { padding-top: var(--band); }
.outcomes .sec-h { padding-bottom: 1rem; border-bottom: 1px solid var(--rule); }
.oc-group { padding-top: 2rem; }
.oc-h { display: flex; align-items: center; gap: .7rem; font-size: 1rem; }
.oc-list {
  margin-top: .9rem;
  display: grid; gap: .1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 700px) { .oc-list { grid-template-columns: 1fr 1fr; column-gap: 2rem; } }
.oc-list li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding-block: .5rem; border-bottom: 1px solid var(--rule-soft);
}
.oc-list a { text-decoration: none; font-size: .9375rem; }
.oc-list a:hover { text-decoration: underline; text-decoration-color: var(--accent); }
.oc-city {
  flex: none; font-family: var(--font-util); text-transform: uppercase;
  letter-spacing: .08em; font-size: .6875rem; color: var(--ink-3); white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Map zoom presets. Hidden until map.js turns them on, because without Leaflet
   they do nothing and a dead button is worse than no button.
   -------------------------------------------------------------------------- */
.map-zooms { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: .9rem; }
.map-zooms button {
  font-family: var(--font-util); text-transform: uppercase; letter-spacing: .09em;
  font-size: .6875rem; font-weight: 600; color: var(--ink-2);
  background: var(--surface); border: 1px solid var(--rule); border-radius: 2px;
  padding: .3rem .6rem; cursor: pointer;
  transition: border-color .16s ease, color .16s ease, background .16s ease;
}
.map-zooms button:hover { border-color: var(--accent); color: var(--accent); }
.map-zooms button[aria-current="true"] {
  border-color: var(--accent); color: var(--accent); background: var(--accent-wash);
}

/* Card summaries came in between 90 and 500 characters across the national lanes.
   Clamp the card view so the grid stays even; the full text is on the entry page. */
.card-sum {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  line-clamp: 5;
  overflow: hidden;
}