/* ChicagoLandmarkReports.org — the design system.
 *
 * Palette is the Chicago flag, sampled from preservationchicago.org's own
 * stylesheet rather than guessed, so this site reads as PC's without being a
 * copy of the hotels site.
 *
 * ONE RULE ABOVE THE REST: red is a status color and nothing else. This site
 * exists to distinguish designated from preliminary from failed. Spend red on
 * a button and you blunt the only signal that has to stay sharp.
 */

:root {
  --blue:      #4db2ec;   /* the flag's light blue. PC's primary accent      */
  --blue-deep: #2f92c9;   /* same hue, darkened for text on white (contrast) */
  --navy:      #174970;   /* structure: headers, rules, map chrome           */
  --navy-ink:  #0f3352;
  --red:       #ba0c2f;   /* the flag's star. STATUS ONLY.                   */
  --paper:     #f4f2ee;   /* the ground. this is a reading site              */
  --card:      #ffffff;
  --ink:       #14181c;
  --ink-soft:  #4a5560;
  --ink-faint: #77828d;
  --line:      #dfdcd6;
  --line-soft: #ecEae5;
  --amber:     #a86a12;   /* preliminary status                             */

  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --sans:  "Source Sans 3", "Open Sans", -apple-system, "Segoe UI", Roboto, sans-serif;

  --wrap: 1180px;
  --radius: 6px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* The hidden attribute has to beat any display rule set further down, or an
   element toggled off in script stays on screen. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  font-size: 16px;
  line-height: 1.55;
}

a { color: inherit; text-decoration: none; }
/* ONE SIGNAL, NOT TWO. Adam, 2026-09-09: "Hyperlinks. should just be
   underlined or blue, but not both." A body link was navy AND underlined in
   blue, which is two claims on the reader's eye for one piece of information.
   The underline stays and the color goes: on a page this text-heavy an
   underline is unmistakable, and it leaves the navy for structure -- headings,
   rules, the masthead -- where it means something. Color returns on hover,
   which is the one moment it carries new information. */
a.inline { color: inherit; text-decoration: underline;
           text-underline-offset: 2px; text-decoration-color: var(--ink-faint);
           text-decoration-thickness: 1.5px; }
a.inline:hover { color: var(--blue-deep); text-decoration-color: var(--blue); }

/* ---------------------------------------------------------------- masthead */

.masthead { background: var(--navy); color: #fff; }
.masthead .bar {
  max-width: var(--wrap); margin: 0 auto; padding: 0 24px;
  display: flex; align-items: center; gap: 28px; height: 74px;
}
/* ONE LOCKUP, SCALED BY ONE NUMBER. --wm multiplies every part of it: the
   star, the gap between star and text, the name and the subtitle. That
   matters because the 24.3px below is the size at which "Chicago Landmark
   Reports" measures the same width as the line beneath it -- measured, not
   guessed -- and only a single common factor keeps those two lines matched.
   Three sizes set by eye would not.

   The footer uses these same classes, so the phone sizes below fix the
   masthead and the footer together. Adam, 2026-09-10: "fix the wordmark
   overflow on mobile for both." */
.wordmark { --wm: 1;
            display: flex; align-items: center; gap: calc(10px * var(--wm));
            font-family: var(--serif);
            white-space: nowrap; flex: 0 0 auto; }
.wm-text { display: flex; flex-direction: column; }
/* 24.3px is the size at which "Chicago Landmark Reports" measures the same
   width as the line beneath it. Measured, not guessed. */
.wordmark b { font-size: calc(24.3px * var(--wm)); font-weight: 600;
              letter-spacing: .01em; line-height: 1.2; }
.wm-text > span { font-size: calc(12px * var(--wm)); color: var(--blue);
                  font-family: var(--sans);
                  letter-spacing: .03em; font-weight: 600; line-height: 1.3; }

/* IT OVERFLOWED EVERY PHONE. Star 36 + gap 10 + the subtitle's measured
   303.3 = 349.3px, against a viewport less 48px of padding, so it ran off
   the page below 397.3px -- 37px of sideways scroll on a 360px screen, in
   the masthead as well as the footer.

     .86 -> 300.4px, fits 360-399
     .76 -> 265.5px, fits 320-359

   Below 320px it still overflows. Left there deliberately: no current phone
   is narrower, and another step would put the subtitle under 9px, where it
   stops being readable and this stops being the lockup. */
@media (max-width: 399px) { .wordmark { --wm: .86; } }
@media (max-width: 359px) { .wordmark { --wm: .76; } }
.mnav { margin-left: auto; display: flex; align-items: center; gap: 18px;
        font-size: 14.5px; white-space: nowrap; }
.mnav a { color: #cfe4f2; padding: 4px 0; border-bottom: 2px solid transparent; }
.mnav a:hover, .mnav a.on { color: #fff; border-bottom-color: var(--blue); }

/* The six-pointed star of the Chicago flag -- the site's one ornament,
   drawn in _masthead.html to the City's published construction.

   The City's own values are Star Red #E4002B and Flag Blue #41B6E6; ours
   below are Preservation Chicago's, which are close but deliberately not
   the same. Not changed here. */
.star { display: inline-block; width: 1em; height: 1em; fill: var(--red); flex: 0 0 auto; }
/* Scaled with the rest of the lockup. This rule sits apart from the others
   and was missed when --wm was introduced, which left the star at 36px while
   the type shrank -- both out of proportion and 8px wider than the 320px
   arithmetic allowed for. */
.wordmark .star { width: calc(36px * var(--wm)); height: calc(36px * var(--wm)); }

/* Search, as a field rather than a link */
.msearch {
  display: flex; align-items: center; gap: 7px;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.28);
  border-radius: 100px; padding: 5px 13px; flex: 0 0 auto;
}
.msearch:focus-within { background: rgba(255,255,255,.2); border-color: var(--blue); }
.msearch svg { width: 14px; height: 14px; flex: 0 0 auto;
               fill: none; stroke: #a8c8de; stroke-width: 2; }
.msearch input {
  width: 96px; border: none; outline: none; background: transparent;
  color: #fff; font: 400 13.5px var(--sans);
}
.msearch input::placeholder { color: #a8c8de; }
.msearch input::-webkit-search-cancel-button { filter: invert(1) opacity(.5); }

/* -------------------------------------------------------------- breadcrumb */

.crumbs {
  background: var(--card); border-bottom: 1px solid var(--line);
  font-size: 13px; color: var(--ink-faint);
}
.crumbs div { max-width: var(--wrap); margin: 0 auto; padding: 9px 24px; }
.crumbs a { color: var(--ink-soft); }
.crumbs a:hover { color: var(--navy); text-decoration: underline; }
.crumbs .sep { padding: 0 7px; color: var(--line); }

/* ------------------------------------------------------------- title block */

.title-band { background: var(--card); border-bottom: 3px solid var(--navy); }
.title-band .inner { max-width: var(--wrap); margin: 0 auto; padding: 38px 24px 34px; }
/* The count line under the page title, on 423 listing and hub pages. It had
   NO RULE AT ALL until 2026-09-10 -- it was rendering as a default 16px black
   paragraph with default margins beneath a 44px serif heading. Found by
   check_css.py's new question: does every class in the built markup have a
   rule behind it? */
.title-band .also { margin: 7px 0 0; font-size: 14.5px; color: var(--ink-soft); }

/* ---------------------------------------- the facade band behind the title
   Adam, 2026-09-10, of the empty white to the right of a short page title:
   "it could be a texture that fills in the white space behind our
   subheaders." Then, having ruled out the fade and the grey wash: "I think
   I'd like to show the photos. Full color."

   So the photograph is full bleed and untouched -- no scrim, no wash, no
   desaturation -- and the words are lifted off it on a frosted plaque.

   WHITE LETTERS WERE THE OBVIOUS ALTERNATIVE AND THEY DO NOT WORK. It is
   not that the photographs are dark; ten of the fifteen are, five are
   light. What defeats bare type of either colour is that a facade is
   high-contrast by nature -- lit terra cotta immediately beside a black
   window reveal -- so somewhere under a 44px heading there is always a
   patch below 3:1, whichever colour the type is. On the plaque the worst
   of the fifteen measures 9.1:1.

   The band is 176px rather than today's ~120px because at 120px a facade
   is a stripe: the Krause ornament needs room to be ornament. */
.title-band--photo {
  position: relative; overflow: hidden;
  background-image: var(--band); background-size: cover;
  background-position: center; background-repeat: no-repeat;
}
.title-band--photo .inner {
  min-height: 176px; padding: 30px 24px;
  display: flex; flex-direction: column; justify-content: center;
  align-items: flex-start;
}

/* THE PLAQUE. 84% white over a 9px blur of whatever is behind it, so the
   texture carries THROUGH the mount rather than being covered by it --
   which is the whole difference between this and a white box. The alpha is
   measured, not chosen: it is the lowest value that keeps every one of the
   fifteen above 9:1, and lower still starts letting the facade's own
   contrast through the glass.

   inline-block, not a width: the plaque is as narrow as its words, which is
   the "narrow pill" Adam asked for -- a full-width bar would just be the
   old white band with a photograph peeking out at the edges. */
.plaque {
  display: inline-block; max-width: 100%;
  background: rgba(255, 255, 255, .84);
  -webkit-backdrop-filter: blur(9px) saturate(1.2);
          backdrop-filter: blur(9px) saturate(1.2);
  border-radius: var(--radius); padding: 16px 24px 17px;
  /* The inset hairline is what makes it read as an object on a LIGHT
     facade. Contrast was never the problem there -- Wrigley measures
     11.3:1 -- but without a defined edge the plaque dissolves into pale
     terra cotta and stops looking mounted. */
  box-shadow: 0 2px 16px rgba(0, 0, 0, .28),
              inset 0 0 0 1px rgba(255, 255, 255, .55);
}
/* NO BACKDROP-FILTER, NO PROBLEM. Older Safari and Firefox with the flag
   off ignore the blur and render the plaque as flat 84% white, which still
   measures above 4.5:1 on every band. This makes that case a deliberate
   design rather than an accident: opaque, so it is a clean white plaque. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .plaque { background: rgba(255, 255, 255, .94); }
}
.plaque h1 { color: var(--navy-ink); }
.plaque .also { margin: 5px 0 0; font-size: 14px; color: var(--ink-soft); }
/* Browse's search field, inside a plaque that is only as wide as its words.
   .bigsearch carries a max-width and no width, so in an inline-block parent
   it collapsed to the width of the word "Browse" and cut the placeholder to
   "Name, former name, add". It needs a width of its own here. */
.plaque .bigsearch { width: min(560px, 68vw); max-width: 100%; }

/* The photographer, in the corner, at the same size on all 431 pages. */
.band-credit {
  position: absolute; right: 12px; bottom: 10px; z-index: 2;
  font: 600 10px/1 var(--sans); letter-spacing: .07em; text-transform: uppercase;
  color: rgba(255, 255, 255, .82);
  text-shadow: 0 1px 3px rgba(0, 0, 0, .75);
}

@media (max-width: 700px) {
  /* The 640px band instead of the 1440: a quarter of the bytes for a screen
     that cannot show the difference. */
  .title-band--photo { background-image: var(--band-sm); }
  .title-band--photo .inner { min-height: 138px; padding: 22px 18px; }
  .plaque { padding: 12px 16px 13px; }
  /* At 360px the plaque is nearly the full width anyway, so the rounded
     corners and the shadow are doing nothing but eating room. */
  .band-credit { font-size: 9px; right: 7px; bottom: 5px; }
}

h1 {
  font-family: var(--serif); font-weight: 600; font-size: clamp(30px, 4.4vw, 44px);
  line-height: 1.12; color: var(--navy-ink); letter-spacing: -.005em;
}
/* A second name for the same building, in the title, in parentheses. */
h1 .alt { font-weight: 400; color: var(--ink-faint); }

/* status is the most important thing on the page, so it is a filled block,
   not a pill among pills */
.status {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13.5px; font-weight: 600; letter-spacing: .02em;
  padding: 6px 13px 6px 10px; border-radius: var(--radius);
}
.status--designated  { background: var(--navy); color: #fff; }
.status--preliminary { background: #fdf4e3; color: var(--amber); border: 1px solid #e8d3a8; }
.status--failed      { background: #f1eeee; color: #6b5c5c; border: 1px solid #ddd3d3; }
.status--designated .star { fill: var(--blue); }

.lnum {
  font-family: var(--sans); font-size: 13px; font-weight: 600; letter-spacing: .06em;
  color: var(--ink-soft); background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--radius); padding: 6px 11px;
}

.pill {
  font-size: 13.5px; color: var(--navy); background: #eaf6fd;
  border: 1px solid #cfe8f7; border-radius: 100px; padding: 5px 13px;
}
a.pill:hover { background: var(--blue); border-color: var(--blue); color: #fff; }

/* -------------------------------------------------------------------- grid */

.shell {
  max-width: var(--wrap); margin: 24px auto; padding: 0 24px;
  display: grid; grid-template-columns: minmax(0, 1fr) 404px; gap: 24px;
  align-items: start;
}

.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); margin-bottom: 24px;
}
.card:last-child { margin-bottom: 0; }

/* the report, read in place */
.reader-stage {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.08); overflow: hidden;
}
.reader-stage img, .reader-stage canvas { display: block; width: 100%; height: auto; }

/* Full screen: the panel becomes the whole screen, the page takes all the room
   left over after the control row, and the canvas is sized to fit rather than
   stretched to the width. */
.reader:fullscreen {
  background: var(--paper); border: none; border-radius: 0;
  padding: 20px; margin: 0;
  display: flex; flex-direction: column;
}
.reader:fullscreen .reader-stage {
  flex: 1; min-height: 0; border: none; background: transparent;
  display: flex; align-items: center; justify-content: center;
}
.reader:fullscreen .reader-stage img,
.reader:fullscreen .reader-stage canvas {
  width: auto; max-width: 100%; max-height: 100%;
  box-shadow: 0 2px 10px rgba(0,0,0,.18);
}
/* THE CONTROL ROW IS AS WIDE AS THE PAGE, AND CENTRED ON IT. Adam,
   2026-09-17: "let's move the page counter and the download PDF towards the
   center so they're aligned under the image." Full screen made the row as
   wide as the monitor while the page it belongs to is a single sheet in the
   middle, so the counter and the download button ended up in opposite
   corners with a metre of nothing between them. --page-w is written by the
   renderer, which is the only thing that knows how wide the page came out;
   the fallback keeps the row full width if script never runs. */
.reader:fullscreen .pager {
  width: min(100%, var(--page-w, 100%));
  margin-left: auto; margin-right: auto;
  justify-content: space-between;
}

/* ZOOM BELONGS TO THE BLOWN-UP READER, AND ONLY TO IT. Adam, 2026-09-17:
   "We don't need to make any changes to the PDF reader on the [record] page.
   The only changes to the reader are on the detail PDF blow up." The sidebar
   reader is a thumbnail of the document with page turns -- a reader who wants
   to read goes full screen, and that is where the type needs to be bigger:
   "the font is pretty small. We should be able to zoom in on the PDF to make
   it easier for people to read."

   So the controls are not in the sidebar at all, and above fit the full-screen
   stage becomes a window onto a larger page that scrolls and can be dragged. */
.pager .zgroup { display: none; }
.reader:fullscreen .pager .zgroup {
  display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto;
}
.reader:fullscreen .pager .zgroup #zlvl {
  width: auto; min-width: 46px; padding: 0 8px; font-size: 12.5px;
}
.reader:fullscreen.is-zoomed .reader-stage {
  display: block; overflow: auto; cursor: grab; overscroll-behavior: contain;
}
.reader:fullscreen.is-zoomed .reader-stage.is-dragging { cursor: grabbing; }
.reader:fullscreen.is-zoomed .reader-stage canvas {
  width: auto; max-width: none; max-height: none; margin: 0 auto;
}

/* Equal white space at the left edge, between the two controls, and at the
   right edge. */
.pager {
  display: flex; align-items: center; justify-content: space-evenly;
  flex-wrap: wrap; row-gap: 10px;
  margin: 10px 0 24px; font-size: 13.5px; color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
.pager .pgroup { display: inline-flex; align-items: center; gap: 10px; }
/* Same size and weight as "Page 1 of 11" beside it. */
.pager .btn { padding: 6px 13px; font-size: 13.5px; font-weight: 400;
              white-space: nowrap; flex: 0 0 auto; }
.pager .pgroup { flex: 0 0 auto; }
.pager button {
  width: 34px; height: 30px; cursor: pointer; font-size: 15px; line-height: 1;
  color: var(--navy); background: var(--card);
  border: 1px solid var(--line); border-radius: var(--radius);
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
}
.pager button:hover:not(:disabled) { border-color: var(--navy); background: #eaf6fd; }
.pager button:disabled { color: var(--line); cursor: default; }

/* THE FULL-SCREEN BUTTON CARRIES BOTH ICONS and shows one. The expand arrows
   until the reader is maximized, then an X -- Adam, 2026-09-14: "X is pretty
   universal for close." Escape works and always did; it is not discoverable.
   `hidden` is not reliably honoured on an SVG element the way it is on an
   HTML one, so the rule is explicit rather than left to the UA stylesheet:
   both icons visible at once is the failure this prevents. */
.ic-expand[hidden], .ic-close[hidden] { display: none; }
/* Once maximized the button is the way out, so it reads as an action rather
   than one more control in the bar. */
.pager button.is-full { border-color: var(--navy); background: #eaf6fd; }

aside .btns { margin: 12px 0 16px; }

/* Photographs, full width beneath both columns, however many there are. No
   lead image above the report: most designation reports carry a photograph on
   their cover, and the cover is already on the page. */
.gallery { max-width: var(--wrap); margin: 0 auto 24px; padding: 0 24px; }
.photos .ph { list-style: none; display: grid;
              grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
              gap: 18px; padding: 16px 20px 20px; }
.photos figure { margin: 0; }
.ph-frame {
  aspect-ratio: 4 / 3; background: var(--paper);
  border: 1px solid var(--line); border-radius: 3px;
}
.photos img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 3px; }
.photos figcaption { margin-top: 7px; font-size: 12.5px; line-height: 1.4; color: var(--ink-soft); }
.photos figcaption .cr { color: var(--ink-faint); }

/* verbatim passages */
.quotes h2 { border-bottom: 1px solid var(--line-soft); }
.quotes figure { padding: 16px 20px; }
.quotes figure + figure { border-top: 1px solid var(--line-soft); }
.quotes blockquote {
  font-family: var(--serif); font-size: 17px; line-height: 1.5; color: var(--ink);
  border-left: 3px solid var(--blue); padding-left: 16px;
}
/* One weight, one style, one color across the whole citation, and the whole
   citation is the link to that page of the PDF. */
.quotes figcaption { margin-top: 9px; padding-left: 19px; font-size: 13px; line-height: 1.45; }
.quotes figcaption a {
  color: var(--ink-soft); font-style: normal; font-weight: 400;
  text-decoration: underline; text-decoration-color: var(--line);
  text-underline-offset: 2px;
}
.quotes figcaption a:hover { color: var(--navy); text-decoration-color: var(--blue); }

/* OUR NOTE IS NOT THE SOURCE'S CITATION, and must not read as one. The line
   above a .qnote names the author, the journal and the page; the .qnote is
   this site speaking -- that Ferree was arguing against the thing he is
   quoted describing, or that the scan reads "mini- mum". Undifferentiated,
   the two ran together on the Reliance page and our editorial note looked
   like part of the attribution, which is the one thing a citation may not
   do. Set back from the quote's rule and lighter than the citation, so it
   reads as apparatus. Added 2026-09-27. */
.quotes .qnote {
  display: block; margin-top: 4px;
  font-size: 12.5px; line-height: 1.45; color: var(--ink-faint);
}
.quotes .qnote + .qnote { margin-top: 2px; }
.card > h2 {
  font-family: var(--sans); font-size: 12.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint);
  padding: 14px 20px; border-bottom: 1px solid var(--line-soft);
}
.card .body { padding: 20px; }

/* ------------------------------------------------------------- the report */

.doc { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 20px; padding: 20px; }
.doc-cover {
  aspect-ratio: 8.5 / 11; background: var(--paper);
  border: 1px solid var(--line); border-radius: 3px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 12px; color: var(--ink-faint); font-size: 10.5px;
  line-height: 1.35; box-shadow: 0 1px 3px rgba(0,0,0,.07);
}
.doc-cover .pg { font-size: 22px; font-family: var(--serif); color: var(--navy); }

.doc h3 { font-family: var(--serif); font-size: 21px; font-weight: 600;
          color: var(--navy-ink); line-height: 1.25; }
.doc .meta { margin-top: 8px; font-size: 14px; color: var(--ink-soft); }
.doc .meta b { color: var(--ink); font-weight: 600; }

/* a capability, stated as a small marker rather than a paragraph */
.flag {
  display: inline-block; margin-left: 8px; padding: 2px 9px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--navy); background: #eaf6fd; border: 1px solid #cfe8f7; border-radius: 100px;
  vertical-align: 1px;
}

.btns { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 16px; }
.btn {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 14px; font-weight: 600; padding: 9px 16px;
  border-radius: var(--radius); border: 1px solid var(--navy);
  background: var(--navy); color: #fff;
}
.btn:hover { background: var(--navy-ink); }
.btn--ghost { background: transparent; color: var(--navy); }
.btn--ghost:hover { background: #eaf6fd; }

/* a note the reader must not skim past, but which is not an alarm */
.note {
  border-left: 3px solid var(--blue); background: #f6fbfe;
  padding: 12px 15px; margin-top: 16px; font-size: 13.5px;
  color: var(--ink-soft); line-height: 1.5;
}
.note b { color: var(--navy-ink); }
.note--warn { border-left-color: var(--amber); background: #fdfaf3; }

/* --------------------------------------------------------------- the facts */

/* The label names the field; the value is the thing the reader came for, so the
   weight sits on the value and not on the label. */
table.facts { width: 100%; border-collapse: collapse; font-size: 15.5px; }
table.facts th {
  text-align: left; vertical-align: top; font-weight: 400; color: var(--ink-soft);
  width: 158px; padding: 11px 16px 11px 20px; white-space: nowrap;
}
table.facts td {
  vertical-align: top; padding: 11px 20px 11px 0;
  font-weight: 700; color: var(--ink);
}
/* Values that link still link, but they read as values, not as links. */
table.facts td a { color: inherit; text-decoration: none; }
table.facts tr + tr th, table.facts tr + tr td { border-top: 1px solid var(--line-soft); }
table.facts .val { font-size: 16px; }
/* Other legitimate renderings of the same architect. Regular weight against
   the bold value on purpose: the data is what carries weight, and a
   parenthetical that competes with it makes the record harder to read, not
   more complete. */
/* Its own line, smaller, and no "also" -- the position and the weight say
   what the word was saying. */
table.facts .variants {
  display: block; margin-top: 3px;
  font-size: 12.5px; font-weight: 400; line-height: 1.5;
  color: var(--ink-faint); white-space: normal;
}
/* THE SOURCE SITS ON THE SAME LINE AS THE FACT. Adam, 2026-10-28: "use this
   version in line with the date but the smaller font". Inline, not block like
   .variants above -- the citation belongs to the date, and a line of its own
   made it look like a second fact. It still wraps inside the cell on a narrow
   screen, which is where the whole table is one column wide.

   A LINK IN HERE HAS TO LOOK LIKE ONE. `a { color: inherit }` at the top of
   this file would otherwise render it in exactly the note's own faint gray
   with no underline, indistinguishable from the text around it -- which is
   how it first shipped on the record pages. Same treatment as .src a below:
   legible, never louder than the fact it supports. */
table.facts .cite {
  font-size: 12.5px; font-weight: 400; color: var(--ink-faint);
  margin-left: 8px; white-space: normal;
}
table.facts .cite a { color: var(--ink-soft); text-decoration: underline;
                      text-decoration-color: var(--line); }
table.facts .cite a:hover { color: var(--navy); }
/* provenance: always present, never louder than the fact it supports */
table.facts .src { display: block; margin-top: 3px; font-size: 12.5px; color: var(--ink-faint); }
table.facts .src a { color: var(--ink-soft); text-decoration: underline;
                     text-decoration-color: var(--line); }
table.facts .src a:hover { color: var(--navy); }

/* a fact we do not have is stated, never left blank */
.gap { color: var(--ink-faint); font-style: italic; }

/* ------------------------------------------------------------- from the report */

.excerpt { padding: 20px; }
.excerpt blockquote {
  font-family: var(--serif); font-size: 17.5px; line-height: 1.55; color: var(--ink);
  border-left: 3px solid var(--blue); padding-left: 18px;
}
.excerpt figcaption { margin-top: 11px; font-size: 13px; color: var(--ink-faint); }
.excerpt figcaption a { color: inherit; text-decoration: underline;
                        text-decoration-color: var(--ink-faint); }

/* ------------------------------------------------------------------- aside */

#map { height: 300px; background: var(--paper); border-radius: var(--radius); }

.mini { list-style: none; font-size: 14.5px; }
.mini li { padding: 11px 20px; border-top: 1px solid var(--line-soft); }
.mini li:first-child { border-top: none; }
.mini .n { font-weight: 600; color: var(--navy); }
.mini .d { font-size: 13px; color: var(--ink-faint); }
.mini a:hover .n { color: var(--blue-deep); text-decoration: underline; }

.srcs { font-size: 13.5px; color: var(--ink-soft); line-height: 1.6; padding: 20px; }
.srcs p + p { margin-top: 11px; }
.srcs a { color: inherit; text-decoration: underline;
          text-decoration-color: var(--ink-faint); }

/* ------------------------------------------------------------------ search */

.bigsearch {
  display: flex; align-items: center; gap: 11px; margin-top: 16px;
  max-width: 620px; padding: 11px 18px;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: 100px;
}
.bigsearch:focus-within { border-color: var(--blue); background: #fff;
                          box-shadow: 0 0 0 3px rgba(77,178,236,.18); }
.bigsearch svg { width: 18px; height: 18px; flex: 0 0 auto;
                 fill: none; stroke: var(--ink-faint); stroke-width: 2; }
.bigsearch input {
  flex: 1; min-width: 0; border: none; outline: none; background: transparent;
  font: 400 16px var(--sans); color: var(--ink);
}
.bigsearch input::placeholder { color: var(--ink-faint); }

.shell--search { grid-template-columns: 258px minmax(0, 1fr); }
.shell--search .filters { order: -1; }

.filters .fbody { padding: 4px 0 16px; }
.fgroup { padding: 12px 20px 4px; border-top: 1px solid var(--line-soft); }
.fgroup:first-child { border-top: none; }
.fgroup h3 { font-size: 13px; font-weight: 700; color: var(--ink);
             margin-bottom: 6px; letter-spacing: .01em; }
.opt { display: flex; align-items: center; gap: 8px; padding: 3px 0;
       font-size: 13.5px; color: var(--ink-soft); cursor: pointer; }
.opt input { width: 15px; height: 15px; accent-color: var(--navy);
             flex: 0 0 auto; cursor: pointer; }
.opt .ot { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis;
           white-space: nowrap; }
.opt .on { color: var(--ink-faint); font-size: 12.5px;
           font-variant-numeric: tabular-nums; }
.opt:hover .ot { color: var(--navy); }
.fmore { margin-top: 4px; padding: 0; border: none; background: none;
         color: var(--navy); font: 600 12.5px var(--sans); cursor: pointer; }
.fmore:hover { text-decoration: underline; }
.ofew { font-size: 12.5px; color: var(--ink-faint); font-style: italic; }
.filters .btn { margin: 14px 20px 0; }

.resbar {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; margin-bottom: 12px; font-size: 14px; color: var(--ink-soft);
}
.resbar #count { font-weight: 600; color: var(--ink); }
.sortwrap { font-size: 13.5px; color: var(--ink-faint); }
.sortwrap select { font: 400 13.5px var(--sans); color: var(--ink);
                   border: 1px solid var(--line); border-radius: var(--radius);
                   padding: 5px 8px; background: var(--card); }

.results { list-style: none; }
.results li { background: var(--card); border: 1px solid var(--line);
              border-radius: var(--radius); margin-bottom: 8px; }
.results a { display: block; padding: 13px 18px; }
.results li:hover { border-color: var(--blue); }
.rn { display: block; font-family: var(--serif); font-size: 19px;
      font-weight: 600; color: var(--navy-ink); line-height: 1.25; }
.ra { display: block; margin-top: 2px; font-size: 13px; color: var(--ink-faint); }
.rm { display: block; margin-top: 5px; font-size: 13.5px; color: var(--ink-soft); }
.rt { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.rtag { font-size: 11.5px; font-weight: 600; letter-spacing: .03em;
        color: var(--navy); background: #eaf6fd; border: 1px solid #cfe8f7;
        border-radius: 100px; padding: 2px 9px; }
.rtag--has { color: #1d6a3a; background: #e9f5ec; border-color: #cbe6d3; }
.rtag--no { color: var(--amber); background: #fdf6e9; border-color: #ecdcb9; }
/* The toolbar over a slim listing. It reorders and hides rows that are
   already in the page, so it earns its place only once the script has run --
   listing.html renders it hidden and the script unhides it. */
.listbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px;
  margin: 0 0 12px; padding: 10px 14px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius);
}
.listbar label { display: flex; align-items: center; gap: 8px; margin: 0; }
.lb-lab {
  font-size: 11.5px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink-faint);
}
.listbar input[type="search"], .listbar select {
  font: inherit; font-size: 14px; color: var(--ink);
  padding: 6px 10px; border: 1px solid var(--line);
  border-radius: 6px; background: #fff;
}
.listbar input[type="search"] { width: 280px; max-width: 46vw; }
.listbar input[type="search"]:focus, .listbar select:focus {
  outline: 2px solid var(--blue); outline-offset: 1px; border-color: var(--blue);
}
.lb-count { margin-left: auto; font-size: 13px; color: var(--ink-soft); }
@media (max-width: 640px) {
  .lb-count { margin-left: 0; }
  .listbar input[type="search"] { width: 100%; max-width: none; }
  .listbar .lb-find { flex: 1 1 100%; }
}

/* AN A-Z INDEX IS READ DOWN A COLUMN, NOT ACROSS A ROW. Adam, 2026-09-09:
   "maybe it would be better in columns than the current horizontal grid
   format." The bordered cards of .hubgrid are right for 26 building types
   and wrong for 312 architects: in a grid the eye has to sweep left to right
   to find the next name alphabetically. CSS columns flow top to bottom, so
   scanning for a surname is one downward movement, and the cards give way to
   plain rows because 312 borders are 312 pieces of furniture. */
.hubgrid.hubcols {
  /* .hubgrid sets display:grid, and a grid container ignores `columns`
     entirely -- the rule was there and doing nothing until this line. */
  display: block;
  columns: 240px; column-gap: 30px;
  border-top: 1px solid var(--line); padding-top: 6px;
}
.hubgrid.hubcols li {
  break-inside: avoid; margin: 0;
  background: none; border: 0; border-radius: 0;
}
.hubgrid.hubcols li a {
  display: flex; align-items: baseline; gap: 8px;
  /* .hubgrid a carries the card -- border, background, radius, padding --
     so a column list has to put all four back to nothing. 312 bordered
     cards are 312 pieces of furniture between the reader and the names. */
  background: none; border: 0; border-radius: 0; box-shadow: none;
  padding: 3.5px 2px; border-bottom: 1px solid transparent;
}
.hubgrid.hubcols li a:hover { border-bottom-color: var(--blue); }
.hubgrid.hubcols .hn { font-size: 14.5px; line-height: 1.35; }
.hubgrid.hubcols .hc {
  margin-left: auto; font-size: 11.5px; font-weight: 600;
  color: var(--ink-faint); font-variant-numeric: tabular-nums;
}

/* The A-Z jump row on a long hub. Adam, 2026-09-09, of the architect page:
   "totally overwhelming ... completely rethink it in a way that's useful for
   navigation." 312 practices, 236 of them holding a single landmark, so the
   page needs a way in that is not scrolling. Built from the headings that
   exist, so it cannot offer a letter the page does not have. */
.azjump {
  display: flex; flex-wrap: wrap; gap: 4px;
  margin: 0 0 16px; padding: 8px 10px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius);
}
.azjump a {
  display: inline-block; min-width: 26px; padding: 4px 6px;
  text-align: center; font-family: var(--sans); font-size: 13.5px;
  font-weight: 600; color: var(--navy); border-radius: 5px;
}
.azjump a:hover { background: var(--navy); color: #fff; }
/* The heading a jump link lands on should not sit under the masthead. */
.hubhead[id] { scroll-margin-top: 18px; }
/* Nor should the map. */
#areamap { scroll-margin-top: 18px; }
/* THE NEIGHBORHOOD HUB'S ROW: dropdown at the left, map link at the right.
   Adam's four steps of 2026-09-10 -- the count went, the region row went, the
   text field became a dropdown, and this link moved here from under the page
   title. */
/* AS WIDE AS THE CONTROL, NOT AS WIDE AS THE PAGE. Adam, 2026-09-17: "this
   is very long ... Make it shorter." One dropdown in an 1,132px bordered bar
   is nine tenths empty rule, and at full width it announced itself as the
   page's header rather than as one of two ways in. */
.hoodbar { justify-content: flex-start; width: -moz-fit-content;
           width: fit-content; max-width: 100%; margin: 0; }

/* The row above the map, on the map's own columns so the two line up. */
.hoodhead {
  display: grid; gap: 22px; align-items: center;
  grid-template-columns: minmax(0, 440px) minmax(0, 1fr);
  margin: 22px 0 16px;
}
.hoodhint {
  margin: 0; max-width: 60ch;
  font-size: 14px; line-height: 1.55; color: var(--ink-soft);
}
/* The first line names the collection, so it carries the page's ink while
   the instruction behind it stays quiet. */
.hoodhint b { display: block; color: var(--navy-ink); font-size: 15px;
              font-weight: 600; margin-bottom: 3px; }
@media (max-width: 820px) {
  .hoodhead { grid-template-columns: minmax(0, 1fr); gap: 12px; }
}
.hoodbar .lb-find { flex: 0 0 auto; }
.hoodbar select {
  font: inherit; font-size: 15px; padding: 7px 11px; max-width: 100%;
  color: var(--ink); background: #fff;
  border: 1px solid var(--line); border-radius: var(--radius);
}
.hoodbar select:focus { outline: 2px solid var(--blue); outline-offset: 1px; }
/* AT PHONE WIDTH THE ROW RAN OFF THE SCREEN. A <select> is as wide as its
   widest option, and the widest of the 77 is "Washington Heights (2)"; with
   flex: 0 0 auto it could not shrink, so the label plus the select came to
   more than 375px and space-evenly had nothing left to distribute. The
   dropdown's right edge, and its arrow, were off the screen. Found while
   checking the facade bands on a phone, 2026-09-10.

   Scoped to small screens: the even spacing above is what Adam asked for
   and it is correct wherever there is room for it. */
@media (max-width: 560px) {
  .hoodbar { justify-content: flex-start; }
  .hoodbar .lb-find { flex: 1 1 100%; min-width: 0; }
  .hoodbar .lb-find select { flex: 1 1 auto; min-width: 0; }
}
/* The 23 areas with nothing designated: named, and not choosable. */
.hoodbar option:disabled { color: var(--ink-faint); }
/* THE MINI MAP JUMP LINK. Adam, 2026-09-10: "The map should be a much zoomed
   in version that's landscape in orientation. The map should take the whole
   pill and show on map should be on top of the map centered."

   So the pill IS the image, and the button floats on it -- the pattern he
   pointed at. 168x90 keeps the snapshot's 1.867 aspect: big enough to be read
   as a map at a glance, which is what the 34px version failed at, and short
   enough not to make the control row a band.

   My first attempt was worse than small: a 34x38 box around a 0.615 thumbnail
   with preserveAspectRatio="slice", which cropped 31% of the city's height
   and drew a horizontal stripe through the middle of it. */
.minimap {
  /* No margin-left: auto -- the row distributes the pair with space-evenly
     now, rather than shoving this to the far edge. */
  position: relative; display: block; flex: none;
  width: 168px; height: 90px; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--radius);
  text-decoration: none; background: #dfe7ee;
}
.minimap img { display: block; width: 100%; height: 100%; object-fit: cover; }
.minimap-btn {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 13px; border-radius: 100px;
  font-size: 13px; font-weight: 600; white-space: nowrap;
  color: #fff; background: var(--navy);
  box-shadow: 0 1px 6px rgba(0,0,0,.30);
}
.minimap:hover .minimap-btn { background: var(--blue-deep); }
.minimap-btn svg { width: 14px; height: 14px; flex: none; }
.jumpmap:hover { color: var(--blue-deep); text-decoration: underline; }
.jumpmap span { margin-left: 3px; }
/* A decade heading is the one case where .hubhead's uppercase does damage:
   there is nothing to capitalize in "1970s" but the s, and a capital S after
   a zero reads as a 5. Adam, 2026-09-09: "the s is very hard to read. Maybe
   make it lowercase." */
/* Compound, because .hubhead is declared LATER in this file and would win
   on source order at equal specificity. The same trap as .hubgrid.hubcols,
   hit twice in one session. */
.hubhead.hubhead--decade { text-transform: none; }

/* The slim listing row, for /missing/. Two lines: the name, then the
   particulars with the type and neighborhood chips flowing after them on the
   same line. Adam, 2026-09-08: "instead of each item being four lines, it's
   two lines approximately." The chips sit on the text baseline rather than in
   a row of their own, which is what the third and fourth lines were. */
.results--slim li { margin-bottom: 5px; }
.results--slim a { padding: 8px 14px; }
.results--slim .rn { font-size: 16.5px; line-height: 1.3; }
.results--slim .ra { margin-top: 1px; font-size: 12.5px; }
.results--slim .rm { margin-top: 2px; line-height: 1.5; }
.results--slim .rm .rtag {
  display: inline-block; margin-left: 6px; vertical-align: 1px;
}
/* Adam, 2026-09-09: "align them vertically to provide more visual order."
   The name and particulars take the first column across both rows; the type
   and the neighborhood get a fixed column each, so every chip in the list
   starts on the same two vertical lines instead of wherever its row's text
   happened to end. 212px fits "Railroad and transit station", the longest
   type in the set, and 152px fits "Near South Side". */
.results--slim a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 212px 152px 168px;
  grid-template-rows: auto auto;
  align-items: center; column-gap: 14px;
}
/* THREE FIXED COLUMNS: type, neighborhood, and the seeking-report status.
   The status has one of its own because inline in the particulars it pushed
   every report-less record onto a third line -- Adam, 2026-09-09: "remove the
   seeking missing report or move it so that it does not bump pills to an
   extra line." 168px fits "Seeking missing report"; most of these cells are
   empty, since 114 of 498 records are seeking one.
   The page's own facet drops its column, so a type page has no type chip and
   a neighborhood page no neighborhood chip. */
.results--no-type a {
  grid-template-columns: minmax(0, 1fr) 152px 168px;
}
.results--no-hood a {
  grid-template-columns: minmax(0, 1fr) 212px 168px;
}
.results--slim .rn,
.results--slim .ra,
.results--slim .rm { grid-column: 1; }
/* EVERY CHIP CELL IS PLACED BY NUMBER. Auto-placement does not work here:
   .rn, .ra and .rm are pinned to column 1, and a cell spanning both rows
   cannot auto-place past them -- it opens a new implicit row instead, which
   stacked the chips above the record name and took rows from 62px to 147px.
   So each variant states its own columns. */
.results--slim .rc { grid-row: 1 / -1; }
.results--slim .rc--type   { grid-column: 2; }
.results--slim .rc--hood   { grid-column: 3; }
.results--slim .rc--status { grid-column: 4; }
/* A type page has no type column, a neighborhood page no neighborhood
   column, so everything after it shifts left by one. */
.results--no-type .rc--hood   { grid-column: 2; }
.results--no-type .rc--status { grid-column: 3; }
.results--no-hood .rc--type   { grid-column: 2; }
.results--no-hood .rc--status { grid-column: 3; }
/* /missing/ shows no status column: every record on it is seeking a report,
   so the chip would be the page's own title on all 114 rows. */
.results--no-status a { grid-template-columns: minmax(0, 1fr) 212px 152px; }
@media (max-width: 860px) {
  /* Two columns of chips need width to stay columns. Below that they go back
     to flowing after the particulars, which is honest about the space. */
  .results--slim a { display: block; }
  .results--slim .rc { display: inline-block; margin: 3px 6px 0 0; }
}

.noresults { font-size: 15px; color: var(--ink-soft); padding: 20px 2px; }
#more { display: block; margin: 4px auto 0; }

@media (max-width: 900px) {
  .shell--search { grid-template-columns: minmax(0, 1fr); }
  .shell--search .filters { order: 0; }
}

/* ------------------------------------------------------------ prose pages */

.shell--prose { grid-template-columns: minmax(0, 1fr); }
.prose { max-width: 68ch; font-size: 16.5px; line-height: 1.62; color: var(--ink); }
.prose p { margin-bottom: 15px; }
.prose h2 {
  font-family: var(--serif); font-size: 22px; font-weight: 600;
  color: var(--navy-ink); margin: 30px 0 10px;
}
.prose ul { margin: 0 0 16px 1.1em; }
.prose li { margin-bottom: 8px; }
/* A URL IN <code> IS ONE UNBREAKABLE WORD. The 404 page shows an example
   address, "https://www.chicagolandmarkreports.org/l/L-69/", which is 378px
   wide and has nothing in it a browser will break at -- so at 375px it made
   the whole page 431px and scroll sideways. It was also the only <code> on
   the site outside .prose, so it had no rule at all; the class checker
   could not see it, because it is an element and not a class.
   Found in a phone-width sweep of every page type, 2026-09-10. */
code { overflow-wrap: anywhere; }
.prose code {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: .88em; background: var(--card); border: 1px solid var(--line);
  border-radius: 3px; padding: 1px 5px;
}
.cite-eg {
  background: var(--card); border-left: 3px solid var(--blue);
  padding: 12px 16px; font-size: 15.5px;
}
.prose .btns { margin-top: 18px; }

/* ------------------------------------- the Chicago Historic Resources Survey
   On the 54 neighborhood pages, below the landmarks. A different kind of
   document from a designation report, so it is set apart rather than mixed
   in: its own heading, a sentence saying what it is, and links that leave
   the site for the Internet Archive.

   The sheets are numbered, not named, and the number means nothing to a
   reader on its own -- so they are laid out as a dense grid of small tiles
   rather than as a list, which is what a set of 43 interchangeable items
   actually is. */
/* SMALL, AND WIDE. Adam, 2026-09-11: "The CHRS is really an add on module so
   its not really ready for prime time. I'm happy to include it for now, but
   lets' minimize the space it takes up." And: "Lets make the paragraph
   Chicago Historic Resources Survey run wider."

   The 68ch measure was right for prose a reader is meant to settle into and
   wrong for this: it is a note, and a narrow measure turned two sentences
   into five lines of column. Full width, one notch smaller, and the whole
   block sits closer to what is above it. */
.chrs { margin-top: 20px; }
.chrs-lede {
  max-width: none; margin: 0 0 9px; font-size: 14px; line-height: 1.55;
  color: var(--ink-soft);
}
/* THE NEIGHBORHOOD'S OWN CHAPTER of the survey, which is the one CHRS link
   worth putting in front of a reader: a named document about this place,
   rather than a numbered map sheet. Sized between a pill and a card -- it
   is the most useful thing in the section and still not the page. */
/* ONE ROW, ONE SHAPE. Adam, 2026-09-11: "Let's use consistent pill styles,
   shapes, and try to use our horizontal space to reduce vertical height."
   The chapter link was a rounded card with a rule down its side and the
   sheets were a pill, stacked on two lines -- two shapes for two links that
   do the same kind of job. Both are pills now, side by side.

   The disclosure takes the whole row once it is OPEN, so the sheet grid
   still lays out across the full width instead of inside a pill-width
   column. */
.chrs-row {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 8px; margin: 0 0 10px;
}
.chrs-pill, .chrs-more > summary {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 15px; font-size: 13.5px; font-weight: 600;
  color: var(--navy); background: var(--card);
  border: 1px solid var(--line); border-radius: 100px;
  cursor: pointer; list-style: none;
}
.chrs-pill:hover, .chrs-more > summary:hover {
  border-color: var(--blue); background: #f6fbfe;
}
/* The chapter is the one worth reaching for, so it carries the accent. */
.chrs-pill--book { border-color: #bcdcf2; background: #f2f9fe; }
.cb-m { font-weight: 400; font-size: 12px; color: var(--ink-faint); }

/* One line that opens, rather than a wall of numbered tiles. */
.chrs-more { margin: 0; }
.chrs-more[open] { flex: 1 1 100%; }
.chrs-more > summary::-webkit-details-marker { display: none; }
.chrs-more > summary::after {
  content: '\25be'; font-size: 11px; color: var(--ink-faint);
}
.chrs-more[open] > summary::after { content: '\25b4'; }
.chrs-grid {
  list-style: none; display: grid; gap: 6px; margin: 10px 0;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
}
.chrs-grid a {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 8px; padding: 8px 11px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius);
}
.chrs-grid a:hover { border-color: var(--blue); background: #f6fbfe; }
.cs-n { font-size: 13.5px; font-weight: 600; color: var(--navy); }
.cs-mb { font-size: 11.5px; color: var(--ink-faint); }
.chrs-src { font-size: 12.5px; color: var(--ink-faint); }
.chrs-src a { color: var(--ink-faint); text-decoration: underline;
              text-decoration-color: var(--line); }
.chrs-src a:hover { color: var(--navy); text-decoration-color: var(--blue); }

/* ------------------------------------------- the survey's own page, /survey/
   Adam, 2026-09-11: "I don't mind using the full width of the page. I just
   don't wanna use unnecessary height." So the two long lists here -- 77
   community areas and 8 chapters -- are dense grids that fill the measure,
   not stacked lists. */

/* The right-hand column of /survey/: the book's cover, then its chapters.
   Reuses .rail's placement; --panel says the contents are supplied by the
   page rather than being the photo rail the About page uses. */
.rail--panel { display: block; }
/* A FRAME THAT COVERS THE RAGGED EDGE. Adam, 2026-09-11: "If the cover of
   the survey is a little bit uneven, we could use a border which could cover
   the edges up and make it look a little cleaner."

   Trimming it by threshold does not work: the scanner bed shows grey down
   the left and along the bottom while the top corners are white, so no
   single cut-off catches both. The image overflows its box by 2% on each
   side instead, and the box crops it -- the part that goes under the frame
   is exactly the part that is uneven. */
.railcover {
  margin: 0 0 18px; overflow: hidden; background: #fff;
  border: 1px solid var(--line); border-radius: var(--radius);
}
.railcover a { display: block; }
.railcover img {
  display: block; width: 104%; max-width: none; height: auto;
  margin: -2% 0 0 -2%;
}
.railcover figcaption {
  margin-top: 7px; font-size: 12px; line-height: 1.5; color: var(--ink-faint);
}
.railbook h2 {
  font-family: var(--sans); font-size: 12.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint);
  margin: 0 0 8px;
}
.railbook ul { list-style: none; display: grid; gap: 4px; margin: 0; }
.railbook a {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 8px; padding: 6px 11px; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--radius);
}
.railbook a:hover { border-color: var(--blue); background: #f6fbfe; }

/* The map of the 77 on /survey/. Wider than the prose measure, like the
   grids, and short enough not to push the chapter list off the screen. */
.surveymap { margin: 0 0 18px; }
/* PORTRAIT, because the city is. Without O'Hare Chicago measures 0.615 wide
   for every 1 tall, so the frame is given that aspect rather than a height
   in pixels -- the map then fills it whatever the rail's width. */
/* #camap, NOT "> div". This was "> div" and the key added below the map is
   also a direct child: it inherited the city's aspect ratio, stood 688px
   tall, and spread its three lines down the page with a gap where the map
   should have been. The rule is about the map, so it names the map. */
.surveymap > #camap {
  /* The city's own proportion -- without O'Hare, Chicago is 0.615 wide for
     every 1 tall -- so the shape reaches both sides of the frame rather
     than floating in the middle of it. */
  aspect-ratio: 0.615; width: 100%;
  border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden;
}
.surveymap figcaption {
  margin-top: 7px; font-size: 12.5px; color: var(--ink-faint);
}
.surveymap .mapboxgl-popup-content {
  padding: 8px 11px; border-radius: var(--radius);
  font-family: var(--sans); box-shadow: 0 2px 10px rgba(0,0,0,.18);
}
.surveymap .mapboxgl-popup-content b {
  display: block; font-size: 13.5px; color: var(--navy-ink);
}
.surveymap .mapboxgl-popup-content span {
  display: block; margin-top: 2px; font-size: 11.5px; color: var(--ink-faint);
}

/* The switch under the map that puts the field-map sheets on it. ONE LINE:
   the swatch key and the note on accuracy were cut because the map above is
   tall and the space was coming out of it. What the two colors mean, and
   that a pin is approximate, are in the hover popup instead.
   Hidden until the pins file has loaded -- a switch that switches nothing is
   worse than no switch. */
.mapkey {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px;
  margin-top: 9px; font-size: 12.5px; color: var(--ink-faint);
}
.mapkey-t {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--ink); cursor: pointer;
}
.mapkey-t input { margin: 0; cursor: pointer; }
.mapkey-t b { font-weight: 600; color: var(--ink); }

/* The filter over the 77, and the cover-or-reader box beneath the map. */
.cg-find h2 {
  font-family: var(--serif); font-size: 22px; font-weight: 600;
  color: var(--navy-ink); margin: 0 0 10px; letter-spacing: -.005em;
}
.cafind {
  display: flex; align-items: center; gap: 12px; margin: 0 0 10px;
  padding: 9px 13px; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--radius);
}
.cafind label { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; }
.cafind input {
  flex: 1 1 auto; min-width: 0; font: inherit; font-size: 14px;
  padding: 5px 9px; color: var(--ink); background: #fff;
  border: 1px solid var(--line); border-radius: 6px;
}
.cafind input:focus { outline: 2px solid var(--blue); outline-offset: 1px;
                      border-color: var(--blue); }
.cafind-n { font-size: 12px; color: var(--ink-faint); white-space: nowrap; }


.raildoc { margin: 0 0 18px; }
.railread { border: 1px solid var(--line); border-radius: var(--radius);
            background: var(--card); overflow: hidden; }
.rr-head {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 11px; border-bottom: 1px solid var(--line-soft);
}
.rr-head b { flex: 1 1 auto; font-size: 13px; color: var(--navy-ink); }
.rr-head button {
  border: none; background: none; cursor: pointer; font-size: 17px;
  line-height: 1; color: var(--ink-faint); padding: 0 2px;
}
.rr-head button:hover { color: var(--navy); }
/* The stage keeps the book's own proportion so the box does not jump
   between the cover and the first page. */
.rr-stage { aspect-ratio: 0.773; background: #fff; overflow: hidden; }
.railread .pager { padding: 8px 11px; border-top: 1px solid var(--line-soft); }

/* THE SURVEY READER, MAXIMIZED. Adam, 2026-09-17: "I need to make sure that
   the PDF reader on the CHRS matches the PDF reader options on the main land
   Mark Reports website." Same rules as .reader:fullscreen, on .railread --
   the two readers are different components with the same job, and this is
   the smaller of the two duplications available: the alternative was making
   the rail reader use .reader's markup, which would have changed the rail. */
.railread:fullscreen {
  background: var(--paper); border: none; border-radius: 0;
  padding: 20px; margin: 0; display: flex; flex-direction: column;
}
.railread:fullscreen .rr-head { border-bottom: none; }
.railread:fullscreen .rr-stage {
  flex: 1; min-height: 0; aspect-ratio: auto; background: transparent;
  display: flex; align-items: center; justify-content: center;
}
.railread:fullscreen .rr-stage canvas {
  width: auto; max-width: 100%; max-height: 100%;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
}
.railread:fullscreen .pager {
  width: min(100%, var(--page-w, 100%));
  margin-left: auto; margin-right: auto;
  border-top: none; justify-content: space-between;
}
.railread:fullscreen .pager .zgroup {
  display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto;
}
.railread:fullscreen .pager .zgroup #caZlvl {
  width: auto; min-width: 46px; padding: 0 8px; font-size: 12.5px;
}
.railread:fullscreen.is-zoomed .rr-stage {
  display: block; overflow: auto; cursor: grab; overscroll-behavior: contain;
}
.railread:fullscreen.is-zoomed .rr-stage.is-dragging { cursor: grabbing; }
.railread:fullscreen.is-zoomed .rr-stage canvas {
  max-width: none; max-height: none; margin: 0 auto;
}
.rr-stage canvas { display: block; width: 100%; height: auto; }

/* The seven color categories, from Appendix A. A swatch and a sentence. */
.swatches { margin: 0 0 18px; }
.swatches dt {
  display: flex; align-items: center; gap: 9px;
  font-size: 15px; font-weight: 600; color: var(--ink);
  margin-top: 12px;
}
.swatches dt:first-child { margin-top: 0; }
.swatches dt i {
  width: 15px; height: 15px; flex: 0 0 auto; border-radius: 3px;
  border: 1px solid rgba(0, 0, 0, .22);
}
.swatches dd {
  margin: 2px 0 0 24px; font-size: 14.5px; line-height: 1.55;
  color: var(--ink-soft);
}

/* THE GRIDS BREAK OUT OF THE PROSE MEASURE, the paragraphs do not.
   .prose caps at 68ch, which is right for reading and wrong for 77 links --
   at that width they came out two columns and a very long page. Adam: "I
   don't mind using the full width of the page. I just don't wanna use
   unnecessary height." Text stays at its measure; lists take the shell. */
/* PACKED, NOT PADDED. Adam, 2026-09-11: "And use all the space. Puzzle it
   together so that it all fits nicely. No big gaps." Two columns of roomy
   tiles made the list 2,010px tall on its own; at three columns and a
   tighter tile it is a little over half that, which is what lets the list
   and the rail finish at about the same place. auto-fill rather than a
   fixed three, so it drops to two and then one as the column narrows. */
.prose > .areagrid {
  grid-template-columns: repeat(auto-fill, minmax(163px, 1fr));
  gap: 4px;
}
.prose > .areagrid a { padding: 5px 9px; gap: 7px; }
/* ONE STRING, ONE STYLE. Adam, 2026-09-11: "Remove nine point o megabytes.
   Add number fourteen in the exact same color, font, and in line with the
   main title." The number is no longer a separate span with its own size and
   colour -- it is part of the name, "Albany Park #14", the way the survey
   writes it. The file size is gone: it told a reader nothing they could act
   on, and it was the only thing on the tile competing with the name. */
.prose > .areagrid .ag-n { font-size: 13px; }

/* THE RAIL STACKS FROM THE TOP HERE. .rail spreads its children with
   space-between, which is right for the About page's photographs -- they
   are meant to run the length of the copy -- and wrong for a map, a reader
   and a chapter list, which were being flung 1,343px apart. */
.rail--panel {
  justify-content: flex-start !important;
  align-self: start !important;
}

/* A DOUBLE-WIDTH RIGHT COLUMN, AND NO GAP. Adam, 2026-09-11: "Double row
   column of neighborhoods, double wide map. there is a huge gap on the right
   hand side."

   He is right about the gap and it was arithmetic: .shell--railed is
   "68ch then 280px", which on this page came to 541 + 48 + 280 = 869 of the
   1,132 available, leaving 263px of nothing. The survey page takes the whole
   measure instead -- the left column flexes and the right is 560, twice the
   photo rail it was borrowing. */
/* THE SURVEY PAGE IS A LAYOUT, NOT A PROSE PAGE WITH A RAIL.

   Adam, 2026-09-11: "Let's have the first thing appear on the upper left
   corner is the find search bar. Below that, the map. On the right, the PDF
   reader. Below that, list of all of the community areas ... the
   instructions can be integrated across from the find box so that the map
   and the reader are aligned."

        find box   |  what this is
        the map    |  the reader, then all 77 chapters

   Four cells on two rows. The map and the reader share row 2, so their tops
   line up whatever height the two cells above them take. The explanation
   below keeps a reading measure; the interface does not. */
.shell--survey > main.prose { max-width: none; }
/* Same for the credits directory: it is two columns of names beside a panel,
   not prose, and 68ch of it left two thirds of the page empty. The lede
   paragraph keeps a readable measure of its own. */
.shell--wide > main.prose { max-width: none; }
/* The description runs the full width too. Adam, 2026-09-19: "make the
   descripyion section full width." It had a 68ch measure of its own, which
   left it as a narrow paragraph over a page that is not narrow. */
.shell--wide > main.prose > .lede { max-width: none; }
.ca-prose { max-width: 68ch; margin-top: 26px; }
/* The closing prose, two columns below the white list of community areas. */
.ca-end { margin-top: 26px; }
@media (min-width: 900px) {
  .ca-end {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 40px; align-items: start;
  }
}
.ca-end-l, .ca-end-r { min-width: 0; }
/* Adam, 2026-09-11: "Let's nudge what the ratings mean today and everything
   below it up so that the two titles are aligned." The right cell's first
   heading already had its top margin cleared; the left one did not, so it
   started a heading's worth lower. */
.ca-end-l > h2:first-child,
.ca-end-r > h2:first-child { margin-top: 0; }
.cagrid { display: grid; gap: 12px; }
@media (min-width: 900px) {
  .cagrid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 40px; row-gap: 14px; align-items: start;
  }
  .cg-find { grid-column: 1; grid-row: 1; }
  .cg-lede { grid-column: 2; grid-row: 1; }
  .cg-map  { grid-column: 1; grid-row: 2; }
  .cg-doc  { grid-column: 2; grid-row: 2; }
}
.cg-lede p { margin: 0; font-size: 15.5px; line-height: 1.55;
             color: var(--ink-soft); }
/* The map keeps the city's own proportion; the book's chapters follow it
   down the left column, which is what fills the space the map does not. */
/* The eight chapters are few enough to sit two abreast rather than five. */
/* ALL 77, SET LIKE AN INDEX. Adam, 2026-09-11: "The pills are not an
   efficient use of space for a list of this length. What other lists are
   available?"

   He is right: a boxed pill spends a border, a background and eighteen
   pixels of padding on a two-word label, seventy-seven times, and the list
   ran about a thousand pixels. CSS columns flow the names DOWN each column
   in alphabetical order, which is how a book sets an index -- and it is the
   same object the survey itself is. Four or five columns, no chrome, about
   a third of the height.

   columns rather than a grid, because a grid fills across and would break
   the alphabetical run into rows of five. */
/* Adam, 2026-09-11: "Make this entire section bold. make this entire
   section white background so it looks distinct from what is above and
   below it." */
.calist {
  margin: 20px 0 0; padding: 16px 18px;
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius);
}
.calist-ul a { font-weight: 700; }
.calist > h2 {
  font-family: var(--serif); font-size: 22px; font-weight: 600;
  color: var(--navy-ink); margin: 0 0 12px; letter-spacing: -.005em;
}
.calist-ul {
  list-style: none; margin: 0; padding: 0;
  columns: 5 168px; column-gap: 26px;
}
.calist-ul li { break-inside: avoid; margin: 0 0 1px; }
.calist-ul a {
  display: block; padding: 3px 6px; border-radius: 4px;
  font-size: 13.5px; color: var(--navy);
}
.calist-ul a:hover { background: #eaf6fd; }

/* THE 77 COMMUNITY AREAS: A REGION PER COLUMN, NAMES DOWN IT. Adam,
   2026-09-17: "these are tough to read ... No pills, just lists", and then
   exactly: "the CHRS card background is the pattern to match. But the list
   itself should be distinct. Let's organize first by region, with lists
   below. Vertically oriented, not horizontally."

   So the card is the CHRS card and the arrangement is not. The pills read
   across in rows of four, which put Albany Park beside Edgewater beside
   Edison Park -- neighbours in the alphabet and nowhere else -- and made the
   region heading a stripe the eye jumped over. Here the REGION is the
   column: its name at the top, its communities in one vertical list under
   it, so "Northwest Side" is a thing you can read in a single downward
   glance. */
.hoodlist { margin-top: 26px; padding: 22px 24px 18px; }
/* COLUMN FLOW, NOT A GRID. A grid puts the nine regions in rows and makes
   every row as tall as its tallest member, so Central's three names sat
   beside Far North Side's twelve with nine lines of nothing beneath them.
   Flowed columns pack the regions one after another down each column, and
   break-inside keeps a region from being split across two of them. */
.hoodlist { columns: 4 196px; column-gap: 30px; }
.hoodregion { break-inside: avoid; margin-bottom: 22px; }
.hoodlist-h {
  font-size: 11.5px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: #6d8ba3;
  margin: 0 0 7px; padding-bottom: 6px;
  border-bottom: 1px solid var(--line-soft);
}
.hoodlist-ul { list-style: none; margin: 0; padding: 0; }
.hoodlist-ul a {
  display: flex; align-items: baseline; gap: 10px;
  padding: 3.5px 6px; border-radius: 4px;
  font-size: 13.5px; color: var(--navy);
}
.hoodlist-ul a:hover { background: #eaf6fd; }
.hoodlist-ul .hn { flex: 1 1 auto; }
/* Nothing designated there yet. The name still links -- its page says so --
   but a zero should not draw the eye the way 80 does. */
.hoodlist-ul .hc { flex: 0 0 auto; font-size: 12px; color: var(--ink-faint);
                   font-variant-numeric: tabular-nums; }
/* THE NUMBER IS NOT STYLED AT ALL, and that is the point. Adam asked four
   times for it to match the name, and each time I made it match on one more
   axis while leaving another -- first the size, then the family, and it was
   still a different colour. There is now no element around it: "Albany Park
   #14" is one text node inside the link, so there is nothing left that could
   differ.

   The only element still allowed its own colour here is the file size on the
   book's chapters, which is a different kind of thing from a name. */
.areagrid {
  list-style: none; display: grid; gap: 5px; margin: 0 0 20px;
  grid-template-columns: repeat(auto-fill, minmax(214px, 1fr));
}
.areagrid--wide { grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); }
.areagrid a {
  display: flex; align-items: baseline; gap: 9px; padding: 7px 12px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius);
}
.areagrid a:hover { border-color: var(--blue); background: #f6fbfe; }
/* The City's community-area number, which is how the survey files itself
   and how the field maps are labelled. Fixed width so the names line up. */
.ag-i {
  flex: 0 0 22px; text-align: right;
  font-size: 12px; font-variant-numeric: tabular-nums; color: var(--ink-faint);
}
.ag-n { flex: 1 1 auto; font-size: 14px; font-weight: 600; color: var(--navy); }
.ag-m { font-size: 11.5px; color: var(--ink-faint); white-space: nowrap; }

/* ------------------------------------------------------------- index pages */

.shell--wide { grid-template-columns: minmax(0, 1fr); }

.hubhead {
  font-family: var(--sans); font-size: 12.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint);
  margin: 20px 0 10px;
}
.hubhead:first-child { margin-top: 0; }

.hubgrid {
  list-style: none; display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
}
.hubgrid a {
  display: flex; align-items: baseline; gap: 10px; padding: 11px 14px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius);
}
.hubgrid a:hover { border-color: var(--blue); background: #f6fbfe; }
.hn { flex: 1; min-width: 0; font-size: 15px; font-weight: 600; color: var(--navy-ink);
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hc { font-size: 12.5px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }

.alsosee { margin-top: 28px; padding-top: 4px; border-top: 1px solid var(--line); }

/* --------------------------------------------------------------------- map */

/* The map fills what is left of the window. A research map that you have to
   scroll to see is a picture of a map. */
.maplayout {
  display: grid; grid-template-columns: 292px minmax(0, 1fr);
  height: calc(100vh - 74px); min-height: 560px;
}
.mappanel {
  display: flex; flex-direction: column; min-height: 0;
  background: var(--card); border-right: 1px solid var(--line);
}
.mp-head { padding: 18px 20px 14px; border-bottom: 1px solid var(--line-soft); }
.mp-head h1 { font-size: 27px; line-height: 1.1; }
.mp-head p { margin-top: 5px; font-size: 13.5px; font-weight: 600; color: var(--ink-soft); }
.mp-body { flex: 1; min-height: 0; overflow-y: auto; padding-bottom: 16px; }
.mp-body .btn { margin: 14px 20px 0; }
.mp-legend {
  border-top: 1px solid var(--line-soft); padding: 12px 20px;
  display: flex; flex-direction: column; gap: 6px;
  font-size: 12.5px; color: var(--ink-soft);
}
.mp-legend span { display: flex; align-items: center; gap: 8px; }
.sw { width: 14px; height: 14px; border-radius: 3px; flex: 0 0 auto; }
.sw--parcel { background: rgba(77,178,236,.45); border: 1.6px solid var(--navy); }
.sw--district { background: rgba(77,178,236,.16); border: 1.6px dashed var(--navy); }
.sw--sought { background: rgba(168,106,18,.35); border: 1.6px solid var(--amber); }
/* Written as .maplayout #map, not .mapcanvas: the record page sets
   #map { height: 300px } for its small inset map, and an ID selector beats a
   class one however far down the file the class appears. */
.maplayout #map { width: 100%; height: 100%; background: var(--paper); }

/* Mapbox's popup, in the site's voice rather than its own */
/* NO BLACK SCREEN OVER THE MAP. Adam, 2026-09-19, seeing it on the
   neighborhood hub: "lets remove this black screen."

   Mapbox's cooperativeGestures throws a dark scrim and a "use ctrl + scroll
   to zoom" caption over the whole map the moment a wheel passes across it.
   The BEHAVIOR is what we want -- a plain scroll keeps scrolling the page,
   which is why it was turned on -- so only the scrim goes. The map still
   zooms on ctrl or cmd with the wheel, and on two fingers, and the +/- and
   full-screen buttons in the corner say so without covering the city. */
.mapboxgl-scroll-zoom-blocker,
.mapboxgl-touch-pan-blocker { display: none !important; }

.mapboxgl-popup-content { padding: 0; border-radius: var(--radius);
                          box-shadow: 0 4px 16px rgba(0,0,0,.16); overflow: hidden; }
.mapboxgl-popup-close-button { font-size: 18px; color: var(--ink-faint);
                               padding: 2px 7px; }
a.pop { display: block; padding: 13px 16px; }
a.pop:hover { background: #f6fbfe; }
.pn { display: block; font-family: var(--serif); font-size: 17px; font-weight: 600;
      color: var(--navy-ink); line-height: 1.25; }
.pm { display: block; margin-top: 4px; font-size: 12.5px; color: var(--ink-soft); }
.pr { display: block; margin-top: 7px; font-size: 12.5px; font-weight: 600;
      color: var(--blue-deep); }

/* ------------------------------------------------- who wrote the reports */

/* On a record page: the report's own staff block, as a list of people and
   what each did. Quiet -- it is a credit, not a headline -- but not hidden,
   which is what it was until 2026-09-17. */
/* THE CREDIT IS A FACTS TABLE, not a stack of cards. Adam, 2026-09-19: "Lets
   use a more compressed version for the authors ... We can use a style
   similar to the top section." It IS .facts, so it inherits the blue label
   column and the black content column; only the caption and the source line
   need saying. */
/* The credit sits in the provenance band at the foot of a record, beside the
   source line, so it takes that band's measure rather than the main column's
   card width. */
/* WHO WROTE THE REPORT, beside where the report is cited. A list, not a
   table: Adam, 2026-09-19, "There should be no separations between the
   various authors. They should just be in a list." Hence no row rules and no
   label column -- the name leads, in the link blue the rest of the page uses
   for a name, and the job follows it in the softer ink the facts table gives
   its own labels. */
.prov-credits { padding-top: 4px; }
/* THE TYPE LINES UP WITH THE QUOTATIONS ABOVE IT, which is what Adam drew a
   line down, 2026-09-19. The two cards' edges already matched; their contents
   did not -- a quotation sits 39px in (the figure's 20, then the rule and its
   16), and this card's text sat at 19. Matching the inner column is what the
   eye reads as aligned, so the padding here is that 39. */
.prov-credits .credits {
  /* FULL WIDTH, LIKE THE CARD ABOVE IT. Adam, 2026-09-19, drawing the
     quotations' right edge across: "extend this pill to a line." A
     640px box under a 704px one read as a loose tile rather than part
     of the column. */
  margin: 0; padding: 16px 20px 18px 39px;
}
/* The sidebar cards set their own h2 -- uppercase, tracked, ruled off. This
   heading keeps the shape the caption above the table had, because the only
   thing that changed is the words in it. */
.prov-credits .credits h2 {
  font-family: var(--serif); font-size: 19px; font-weight: 600;
  letter-spacing: normal; text-transform: none; color: var(--navy-ink);
  margin: 0 0 8px; padding: 0; border: 0;
}
.credits ul { list-style: none; margin: 0; padding: 0; }
.credits li { font-size: 14.5px; line-height: 1.6; }
/* The name carries the weight, the job does not. Adam, 2026-09-19:
   "Make authors bold." */
.credits li a { font-weight: 600; }
.cr-role { color: var(--ink-soft); }

/* On /credits/: one line per person, opening to their reports. Columns,
   because a directory of 104 names in a single prose measure is a page
   nobody scans. */
/* /credits/ IS ONE PAGE: the names on the left, one person's reports on the
   right. Adam, 2026-09-19, having seen a version with a page per author: "the
   entire author universe should exist on one page" -- and of the lists, "No
   breaks, vertically oriented, two columns." So no letter headings, and each
   list flows down two columns. */
.authsplit {
  display: grid; gap: 26px 32px; align-items: start; margin-top: 16px;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
}
/* The left side of the split: both lists, each two columns wide. */
.authlists { min-width: 0; }
.authhead {
  font-family: var(--serif); font-size: 19px; font-weight: 600;
  color: var(--navy-ink); margin: 18px 0 6px;
  padding-bottom: 6px; border-bottom: 1px solid var(--line);
}
.authhead:first-child { margin-top: 0; }
.authlist { list-style: none; margin: 0; padding: 0; columns: 2 190px;
            column-gap: 26px; }
.authlist li { break-inside: avoid; }
.authlist button {
  display: flex; align-items: baseline; gap: 8px; width: 100%;
  padding: 3px 6px; border: none; background: none; border-radius: 4px;
  font: inherit; font-size: 13.5px; color: var(--navy);
  text-align: left; cursor: pointer;
}
.authlist button:hover { background: #eaf6fd; }
.authlist button.is-on { background: var(--navy); color: #fff; }
.authlist .an { flex: 1 1 auto; }
.authlist .ac { flex: 0 0 auto; font-size: 12px; color: var(--ink-faint);
                font-variant-numeric: tabular-nums; }
.authlist button.is-on .ac { color: #cfe4f2; }

.authpanel {
  /* DOWN BY THE HEIGHT OF THE HEADING BESIDE IT, so the panel's top edge sits
     on the rule under "Most prolific authors" rather than level with the
     heading's text. Adam, 2026-09-19: "nudge the preview box down. So the top
     bar aligns with the horizontal line." 43px is that heading's box measured
     in the browser -- its line, its 6px of padding and its 1px rule. */
  margin-top: 43px;
  position: sticky; top: 76px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 16px 18px;
  max-height: 78vh; overflow-y: auto;
}
.authpanel h2 { font-family: var(--serif); font-size: 20px; font-weight: 600;
                color: var(--navy-ink); margin: 0; }
.authroles { margin: 4px 0 0; font-size: 13px; color: var(--ink-soft); }
.authcount { margin: 6px 0 8px; font-size: 11.5px; font-weight: 700;
             letter-spacing: .06em; text-transform: uppercase;
             color: var(--ink-faint); }
.authreports { list-style: none; margin: 0; padding: 0; font-size: 13.5px; }
.authreports li { padding: 2.5px 0; border-top: 1px solid var(--line-soft); }
.authreports li:first-child { border-top: none; }

@media (max-width: 820px) {
  .authsplit { grid-template-columns: minmax(0, 1fr); }
  .authpanel { position: static; max-height: none; }
}

/* THE PILLS ABOVE THE RESULTS: what is narrowing this list right now. Each
   one removes itself. The kind is set small above the value, because "Loop"
   alone does not say whether it was typed or ticked. */
.chips { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 12px; }
.chip {
  display: inline-flex; align-items: baseline; gap: 7px;
  padding: 5px 10px 5px 11px; cursor: pointer;
  background: var(--card); border: 1px solid var(--line); border-radius: 999px;
  font: inherit; font-size: 13.5px; color: var(--navy-ink);
}
.chip:hover { border-color: var(--navy); background: #eaf6fd; }
.chip-k {
  font-size: 10px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-faint);
}
.chip-x { font-size: 14px; line-height: 1; color: var(--ink-faint); }
.chip:hover .chip-x { color: var(--navy); }
.chip--clear { border-style: dashed; color: var(--ink-soft); }

/* The matched word, in the row it matched. A tint rather than a highlighter:
   on a list where most rows match, a yellow block on every line is noise. */
.results mark {
  background: #dceffa; color: inherit; border-radius: 2px; padding: 0 1px;
}

/* MORE THAN ONE LANDMARK UNDER ONE CLICK. A designated building inside a
   designated district is two records and two reports, and they used to open
   as two popups on top of each other. One popup now, one entry each, divided
   by a rule -- and the kind above each name, because the choice a reader is
   making is between the building's report and the district's. */
.popset a.pop + a.pop { border-top: 1px solid var(--line); }
.pk { display: block; margin-bottom: 3px;
      font-size: 10.5px; font-weight: 700; letter-spacing: .07em;
      text-transform: uppercase; color: var(--ink-faint); }
.pmore { display: block; padding: 9px 16px; border-top: 1px solid var(--line);
         background: var(--paper); font-size: 12px; color: var(--ink-soft); }
/* The close button overlaps the first entry's kind line, which is short --
   a little room on the right of the first one keeps them apart. */
.popset a.pop:first-child .pk { padding-right: 20px; }

@media (max-width: 900px) {
  .maplayout { grid-template-columns: minmax(0, 1fr); height: auto; }
  .mappanel { border-right: none; border-bottom: 1px solid var(--line); }
  .mp-body { max-height: 320px; }
  .maplayout #map { height: 70vh; }
}

/* ------------------------------------------------------------------ footer */

.support { background: var(--navy); color: #cfe4f2; margin-top: 0; }
.support .inner { max-width: var(--wrap); margin: 0 auto; padding: 40px 24px; }
.support h2 { font-family: var(--serif); font-size: 27px; color: #fff; font-weight: 600; }
.support p { margin-top: 11px; max-width: 62ch; font-size: 15.5px; }
.support .btns { margin-top: 20px; }
.support .btn { background: var(--blue); border-color: var(--blue); color: var(--navy-ink); }
.support .btn:hover { background: #6cc2f2; }
.support .btn--ghost { background: transparent; color: #cfe4f2; border-color: #3d6b8f; }
.support .btn--ghost:hover { background: #1d5983; color: #fff; }

/* THE INSTITUTIONAL ASK, SET APART FROM THE COFFEE. Two different readers in
   one band: a researcher who might drop in five dollars, and a firm that
   might underwrite a year. Run together they read as one escalating pitch,
   which makes the small ask sound like a preamble. A rule and a little air
   separate them without giving sponsorship its own heading -- it is one
   paragraph, not a section, and a heading would oversell it. */
.support p.sponsor,
.colophon p.sponsor {
  margin-top: 18px; padding-top: 16px;
  border-top: 1px solid #2c5b7e;
}
.colophon p.sponsor { border-top-color: var(--line); }

footer.site { background: var(--navy-ink); color: #90aec5; font-size: 13.5px; }
footer.site .inner { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }

/* THREE COLUMNS, not a wrapping flex row. The old footer was two links and a
   right-floated counter that reflowed into whatever order the width allowed.
   The six hub links here existed only in the masthead, which left a reader
   who arrived on a record page from a search engine with nothing at the
   bottom of it. */
/* The site's mark signing the page off, on one slim row at the bottom. As a
   block above the columns it cost about 78px on 929 pages to repeat what the
   masthead already says. The star keeps the masthead's colours -- red path,
   navy disc, flag-blue rim -- because it is the same mark. */
/* THE FOOTER'S LOCKUP IS THE MASTHEAD'S. It uses .wordmark and .wm-text, so
   every rule that draws it is the same rule -- the star's 36px, the name's
   24.3px serif at .01em, the subtitle's 12px sans at .03em in flag blue. Two
   things had drifted while the rules were parallel, and neither was among the
   19 declared properties I had compared: the name's WHITE comes from
   `.masthead { color: #fff }`, which the footer had as #cfe4f2, and I had
   added footer-only sizes below 520px that the masthead has no equivalent of.

   All that belongs here is the grid position and that inherited colour. */
footer.site .wordmark {
  grid-row: 1; grid-column: 1 / span 2;
  color: #fff;
  /* CENTRED OVER THE TWO LINK COLUMNS IT SPANS, not pinned to their left
     edge. Adam, 2026-09-15: "I think we should shift the footer logo to be
     centered over the left and center columns."
     It already spanned both; `start` put it above the first column only,
     which left it reading as a heading for "This collection" rather than as
     the mark for everything under it. */
  justify-self: center;
  /* ...but centred over the INK, not over the tracks. Adam, 2026-09-15:
     "I don't think it's quite centered. It looks like it's weighted towards
     the right column." He was right, and it measures: at 1440px the two
     tracks span 147-825, so centre is 486, but the second column's longest
     label ("By year designated") is 150px inside a 268px track. The text of
     the two lists actually runs 147-707, centre 427, and the gap between
     them centres at 424. The mark sat 59px right of everything visible.

     Take back the slack: margin-right = column 2's unused width, which
     justify-self then halves. The slack is not a constant -- the columns are
     fr units -- so it is written as a share of this item's own grid area W,
     which is col1 + 44px gap + col2 = (2.25/3.7) of the free space + 44:

         slack = 0.95/3.7 * (W - 44) / (2.25/3.7) - 150
               = 0.4223 * W - 168.6

     678px wide that is 118px, and it is 41px where the three-column grid is
     narrowest, both matching the measured track. */
  margin-right: calc(42.23% - 168.6px);
  /* DOWN 10px, so the two lockups read as one line. Adam, 2026-09-15: "I
     think we should have the two logos aligned, which means the landmark
     report should come down slightly." They are not the same height -- ours
     is 55px (36px star, 24.3px name, 12px subtitle), the Preservation Chicago
     logo is 69px at its 380px width -- so sharing a top edge leaves our
     centre 10px above theirs. It also brings the star disc level with the
     compass rose, which is the pairing the eye actually reads. A margin
     rather than a relative offset, so the 20px row gap to the labels is
     unchanged. Measured again at 15px once align-self below stopped the item
     stretching: pinned to the top of the row the lockup is 45px rather than
     the row's height, so the gap to close is larger. */
  margin-top: 15px;
  /* AND DO NOT STRETCH. A grid item defaults to align-self: stretch, so the
     lockup was as tall as row one and its contents centred inside that --
     which means the 10px above was only correct while row one happened to be
     the lockup's own height. Adding a line to the Preservation Chicago column
     made row one 80px instead of 55 and the mark drifted 12px down again.
     Pinned to the top of the row, the 10px is measured against the logo
     beside it and stays right whatever else grows. */
  align-self: start;
  /* No margin here: the grid's row gap is the only space between the lockup
     and the labels below it. Both together came to 56px, which read as a
     hole rather than a separation. */
  margin-bottom: 0;
}
/* No underline on hover. footer.site a:hover underlines every link down
   there, which is right for a line of text and wrong for a logo -- a mark
   does not need underlining to say it is a link, and the rule cuts across
   the star and the subtitle. Adam, 2026-09-10: "there's no reason to show
   the underline." The colour already stays #fff, so the mark does not shift
   at all on hover; the cursor says it is a link. */
footer.site .wordmark:hover { color: #fff; text-decoration: none; }
footer.site .fc-a { grid-row: 2; grid-column: 1; }
footer.site .fc-b { grid-row: 2; grid-column: 2; }
footer.site .footpc { grid-row: 1 / span 2; grid-column: 3; }

footer.site .footcols {
  display: grid; gap: 20px 44px; padding-top: 32px; padding-bottom: 26px;
  /* 1.3 / 0.95 / 1.45 rather than 1 / 1 / 1.5. At the shell's 1132px less
     two 44px gaps, that is 367 / 268 / 409 instead of 298 / 298 / 447. The
     first column has to clear 36 + 10 + 303.3 = 349.3px, which is the star,
     its gap, and the widest line of the masthead lockup as measured with the
     real fonts loaded. 367 leaves 18px for rendering differences between
     platforms. The middle column loses width it was not using: its longest
     label is "All landmarks, A-Z". */
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.95fr) minmax(0, 1.45fr);
  /* Two rows: the lockup over the two link columns, the links beneath it.
     The Preservation Chicago block spans both, so it keeps its place at the
     top and nothing grows. */
  grid-template-rows: auto auto;
}
footer.site .footcol,
footer.site .footnav { display: flex; flex-direction: column;
                       align-items: flex-start; }
footer.site .footlabel {
  font-size: 11.5px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: #6d8ba3; margin-bottom: 12px;
}
footer.site .footcol a { padding: 3.5px 0; line-height: 1.4; }

/* NO UNDERLINES IN A LIST OF LINKS. The body-copy rule is the opposite --
   underline, no color -- and it is right there, where an underline marks the
   exception in a paragraph. Here every line is a link, so underlining all
   nine would draw nine rules and distinguish nothing. Position does that
   work, and the underline comes back on hover to confirm the target. */
footer.site a { color: #cfe4f2; text-decoration: none; }
footer.site a:hover { color: #fff; text-decoration: underline;
                      text-decoration-color: #6ba3cf; }

footer.site .footpc { gap: 13px; }
footer.site .pcfoot { display: block; }
footer.site .pcfoot img { display: block; width: 208px; height: auto; }
/* Adam, 2026-09-10: "The issue with color is in the section of column three
   where preservation Chicago is described. The blue font is very hard to
   read." Measured on the footer's --navy-ink ground, #7f9db5 comes to
   4.58:1 -- over the 4.5:1 floor by a hair, which is exactly how something
   passes a check and still reads badly at 13px across five lines. The
   footer's own link colour is 9.92:1 and is already proven legible down
   here, so the paragraph takes it. */
footer.site .footpc span { font-size: 13px; line-height: 1.55; color: #cfe4f2; }
/* The credit sentence keeps its underline: it is prose with a link inside
   it, which is the case the body rule is for. */
footer.site .footpc span a { text-decoration: underline;
                             /* #3d6b8f measured 2.29:1 on this ground: a
                                rule nobody can see is not a rule. */
                             text-decoration-color: #6ba3cf; }
/* a.support, not .support: "footer.site .footcol a" is (0,2,2) and sets
   padding on every link in the column, so the pill's own (0,2,1) rule never
   won and the padding change did not stick -- twice. */
footer.site .footcol a.support {
  /* Adam, 2026-09-10: "Let's center the pill support this work. in the center
     of that column of text." align-self overrides the column's
     align-items: flex-start for this one item; the column's text runs its
     full width, so the pill's centre is that text block's centre. */
  align-self: center; white-space: nowrap;
  border: 1px solid #3d6b8f; border-radius: 100px;
  /* Adam, 2026-09-11: "let's make the pill around support this work wider so
     that the s in support and the k in work don't hit the outer edge." */
  padding: 8px 30px; color: #cfe4f2;
}
footer.site .footcol a.support:hover { background: var(--blue); border-color: var(--blue);
                             color: #08243a; text-decoration: none; }


@media (max-width: 860px) {
  footer.site .footcols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto auto auto;
  }
  /* Two equal columns here, and the lockup spans both, so there is no slack
     to take back -- the ink-centring margin above is for the three-column
     grid only and would drag the mark off to the left. */
     The 8px drop goes with it: the Preservation Chicago logo is on its own
     row down here, so there is nothing left to line up with. */
  footer.site .wordmark { grid-row: 1; grid-column: 1 / -1;
                          margin-right: 0; margin-top: 0; }
  footer.site .fc-a { grid-row: 2; grid-column: 1; }
  footer.site .fc-b { grid-row: 2; grid-column: 2; }
  /* The credit spans both columns rather than being squeezed beside a list. */
  footer.site .footpc { grid-row: 3; grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  footer.site .footcols { grid-template-columns: minmax(0, 1fr); gap: 26px;
                          grid-template-rows: none; }
  footer.site .wordmark,
  footer.site .fc-a, footer.site .fc-b, footer.site .footpc {
    grid-row: auto; grid-column: 1;
  }
  /* NO type overrides here. They made the footer lockup a different lockup
     below 520px, which is the opposite of what was asked for. Neither lockup
     has a small-screen size -- at 349px wide this overflows a 360px phone in
     the MASTHEAD too -- and that is one fix to .wordmark for both, worth
     doing deliberately rather than as a footer patch. */
}

/* ------------------------------------------------------------- responsive */

/* THE BAR WRAPS BEFORE IT HIDES. _masthead.html records the measurement that
   set the 900px breakpoint below -- "eight items come to 458px and the whole
   bar to 1,026 inside 1,132." CHRS was added after that, which makes nine
   links; the bar now measures 1,093 (wordmark 349 + gap 28 + nav 668 + 48 of
   padding) and every width from 901 to 1092 scrolled sideways by up to 104px,
   on every page of the site.

   Wrapping, rather than raising the breakpoint to 1100. There is no menu
   button below 900px -- the nav simply goes -- so moving the breakpoint up
   would take navigation away from ordinary laptops. On two rows the nav needs
   716px and fits the whole band with every link kept.

   Caught 2026-09-27 by the width sweep. */
@media (max-width: 1092px) and (min-width: 901px) {
  .masthead .bar { flex-wrap: wrap; height: auto; padding-top: 12px;
                   padding-bottom: 12px; row-gap: 10px; }
  .mnav { margin-left: 0; flex: 1 0 100%; }
}

@media (max-width: 900px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .mnav { display: none; }
  .doc { grid-template-columns: 96px minmax(0, 1fr); gap: 16px; }
  table.facts th { width: 118px; padding-left: 16px; }
}

/* A correction offered only after a query found nothing, and only toward a
   word the collection really contains. */
.didyou {
  margin-bottom: 10px; padding: 9px 14px; font-size: 14px;
  color: var(--ink-soft); background: #fdf6e9;
  border: 1px solid #ecdcb9; border-radius: var(--radius);
}

/* ------------------------------------------------------------ landing page */

.hero { background: var(--card); border-bottom: 3px solid var(--navy); }
.hero .inner { max-width: var(--wrap); margin: 0 auto; padding: 52px 24px 46px; }
.hero h1 { font-size: clamp(30px, 4.6vw, 46px); max-width: 22ch; }
.hero .lede { margin-top: 14px; max-width: 62ch; font-size: 17px;
              line-height: 1.55; color: var(--ink-soft); }
.bigsearch--hero { margin-top: 24px; max-width: 660px; padding: 13px 20px; }
.bigsearch--hero input { font-size: 17px; }
.bigsearch--hero button {
  flex: 0 0 auto; border: none; cursor: pointer; border-radius: 100px;
  background: var(--navy); color: #fff; font: 600 14px var(--sans);
  padding: 8px 18px;
}
.bigsearch--hero button:hover { background: var(--navy-ink); }

.routes {
  list-style: none; display: grid; gap: 10px; margin-bottom: 30px;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
}
.routes a {
  display: block; padding: 15px 18px; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--radius); height: 100%;
}
.routes a:hover { border-color: var(--blue); background: #f6fbfe; }
.rt-n { display: block; font-family: var(--serif); font-size: 20px;
        font-weight: 600; color: var(--navy-ink); }
.rt-d { display: block; margin-top: 3px; font-size: 13.5px; color: var(--ink-soft); }

.gapcard {
  margin-top: 28px; padding: 22px 24px; background: #fdf6e9;
  border: 1px solid #ecdcb9; border-radius: var(--radius);
}
.gapcard h2 { font-family: var(--serif); font-size: 23px; font-weight: 600;
              color: var(--navy-ink); }
.gapcard p { margin-top: 8px; max-width: 62ch; font-size: 15.5px;
             color: var(--ink-soft); }

/* --------------------------------------------------------- alphabetical list */

.azbar { background: var(--card); border-bottom: 1px solid var(--line);
         position: sticky; top: 0; z-index: 50; }
.azbar .inner { max-width: var(--wrap); margin: 0 auto; padding: 9px 24px;
                display: flex; flex-wrap: wrap; gap: 2px; }
.azbar a {
  min-width: 27px; text-align: center; padding: 4px 5px; border-radius: 4px;
  font-size: 13.5px; font-weight: 600; color: var(--navy);
}
.azbar a:hover { background: var(--blue); color: #fff; }

/* A PILL, NOT A TWENTY-SEVENTH LETTER. It sits at the far end of the bar
   where the letters run out, and it is bordered so that it reads as a
   control rather than as another initial to jump to. margin-left:auto puts
   it hard right on a wide screen; when the letters wrap on a narrow one it
   simply follows them onto the last line. */
.azbar .aztop {
  margin-left: auto; min-width: 0;
  padding: 3px 11px; border: 1px solid var(--line); border-radius: 999px;
  font-size: 12.5px; font-weight: 600; color: var(--ink-soft);
  white-space: nowrap;
}
.azbar .aztop span { font-size: 11.5px; }
.azbar .aztop:hover { background: var(--navy); border-color: var(--navy); color: #fff; }

.azgroup { margin-bottom: 26px; }
.azletter {
  font-family: var(--serif); font-size: 27px; font-weight: 600;
  color: var(--navy-ink); padding-bottom: 5px; margin-bottom: 8px;
  border-bottom: 2px solid var(--navy); scroll-margin-top: 56px;
}
.azlist { list-style: none; }
.azlist li { border-bottom: 1px solid var(--line-soft); }
.azlist a { display: block; padding: 9px 4px; }
.azlist a:hover { background: var(--card); }

/* A NAME ON THIS SITE MUST BE COPYABLE. Adam, 2026-09-14: "Is it possible to
   make the titles in the pills copy and pasteable? Right now, it drags a
   pop-up box with a localhost address."
   The whole row is one link so that the entire line is a target, and a
   browser makes every link draggable: dragging across the name started a
   link-drag and handed over the URL instead of selecting the words. A
   researcher copying "Gauler Twin House, 5921 N. Magnolia Ave." into a note
   or an email is doing the most ordinary thing this site supports, and it
   did not work.
   Dragging off, selection explicitly on. The link still clicks. */
.azlist a, .hubgrid a { -webkit-user-drag: none; }
.az-n, .az-m, .hn, .hc {
  -webkit-user-select: text; user-select: text; cursor: text;
}
/* ...but the padding around the words is still the link's, so a click that
   lands beside the text behaves as a click, not as a stray caret. */
.azlist a, .hubgrid a { cursor: pointer; }
.az-n { font-size: 16px; font-weight: 600; color: var(--navy-ink); }
/* A cross-reference is a name the building no longer goes by, so it is set
   lighter than a primary entry and says which record it leads to. */
.azlist .xref .az-n { font-weight: 400; font-style: italic; color: var(--ink-soft); }
.az-see { font-size: 14px; color: var(--ink); }
.az-see::before { content: "\2192\00a0"; color: var(--ink-faint); }
/* The address AND the City's L-number are on every line, primary or
   cross-reference. Two different buildings are called the Jewelers Building;
   a name is not unique, and those two identifiers are. */
.az-m { display: block; margin-top: 1px; font-size: 13px; color: var(--ink-soft); }

@media (max-width: 640px) { .azbar a { min-width: 23px; font-size: 12.5px; } }

/* --------------------------------------------------- name notes and sources */

/* Preservation Chicago's own ruling on a contested name, shown where a reader
   who has just read the name will look for it. 21 records carry one. */
.namenote .body { padding: 16px 20px 18px; }
.namenote p { font-size: 15.5px; line-height: 1.6; color: var(--ink); }

/* PROTECTED INTERIORS. The clauses are the ordinance's own words, so they are
   set in the serif the quotes use rather than the UI face -- a reader should
   see at a glance that this is the document speaking and not the site.
   Marked with the same blue rule as a blockquote for the same reason.
   No bullet glyphs: the report's list is already a list, and dots would add a
   layer of our own punctuation on top of the City's. */
.interiors h2 { border-bottom: 1px solid var(--line-soft); }
.interiors ul { margin: 0; padding: 16px 20px 6px; list-style: none; }
.interiors li {
  font-family: var(--serif); font-size: 16px; line-height: 1.5; color: var(--ink);
  border-left: 3px solid var(--blue); padding-left: 16px;
}
.interiors li + li { margin-top: 11px; }
/* EXCLUSIONS MUST NOT READ AS PROTECTIONS. Same serif, because they are the
   ordinance's words too, but a muted rule instead of the blue one and a
   heading of their own. The blue mark means "protected" everywhere else on
   the page, so it cannot also mean "not protected" here. */
.interiors .excl { padding: 2px 20px 0; }
.interiors .excl h3 {
  margin: 14px 0 9px; font-size: 13px; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink-faint); font-weight: 600;
}
.interiors .excl ul { padding: 0; }
.interiors .excl li {
  border-left-color: var(--line); color: var(--ink-soft); font-size: 15.5px;
}
.interiors .src { margin: 0; padding: 4px 20px 16px 39px; font-size: 13px; line-height: 1.45; }
.interiors .src a {
  color: var(--ink-soft); text-decoration: underline;
  text-decoration-color: var(--line); text-underline-offset: 2px;
}
.interiors .src a:hover { color: var(--navy); text-decoration-color: var(--blue); }

/* Citations at the foot of the page: for confirmation, for trust, and to give
   credit where it is due. Every entry is a source the record actually drew on. */
/* Provenance. Present, checkable, and quiet -- it is not the page.
   The report is named as the source; everything else is one small line. */
.prov {
  /* --wrap and 24px, exactly as .shell: at 1180px and 28px the share column
     landed four pixels left of the aside it is meant to line up with, which
     is the kind of miss that reads as sloppiness without being nameable. */
  max-width: var(--wrap); margin: 4px auto 34px; padding: 0 24px;
  border-top: 1px solid var(--line-soft); padding-top: 14px;
}
.prov-primary {
  margin: 0; font-size: 13px; line-height: 1.6; color: var(--ink-soft);
}
.prov-primary a { color: var(--navy); text-decoration: underline;
                  text-decoration-color: var(--line); }
.prov-primary a:hover { text-decoration-color: var(--blue); }
.prov-secondary {
  margin: 5px 0 0; font-size: 11.5px; line-height: 1.6; color: var(--ink-faint);
}
.prov-secondary a { color: var(--ink-faint); text-decoration: underline;
                    text-decoration-color: var(--line-soft); }
.prov-secondary a:hover { color: var(--navy); }

.srcblock ol { list-style: none; counter-reset: src; }
.srcblock li {
  counter-increment: src; position: relative;
  padding: 13px 20px 13px 52px; border-top: 1px solid var(--line-soft);
}
.srcblock li:first-child { border-top: none; }
.srcblock li::before {
  content: counter(src); position: absolute; left: 20px; top: 13px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--paper); border: 1px solid var(--line);
  font-size: 11.5px; font-weight: 700; color: var(--ink-soft);
  display: flex; align-items: center; justify-content: center;
}
.s-l { display: block; font-size: 12px; font-weight: 700; letter-spacing: .08em;
       text-transform: uppercase; color: var(--ink-faint); }
.s-t { display: block; margin-top: 3px; font-size: 14.5px; line-height: 1.5;
       color: var(--ink); }
.s-k { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 6px; font-size: 13.5px; }
.s-k a { color: var(--navy); text-decoration: underline;
         text-decoration-color: var(--line); }
.s-k a:hover { text-decoration-color: var(--blue); }

/* The colophon: who made this, who helped, and how to help back. It sits at
   the foot of the home page because a reader who never opens About should
   still see the credit and the partners. Three columns on a wide screen,
   stacked on a narrow one. */
.colophon {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px;
  margin: 34px 0 8px; padding-top: 26px;
  border-top: 1px solid var(--line-soft);
}
.colophon h2 {
  font-size: 12px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink-soft);
  margin: 0 0 10px;
}
.colophon p { margin: 0 0 10px; font-size: 14.5px; line-height: 1.62; }
.colophon .btns { margin-top: 14px; }
@media (max-width: 860px) {
  .colophon { grid-template-columns: 1fr; gap: 26px; }
}

/* The band of report covers on the landing page. The documents are the
   imagery: no photograph is sourced from anyone, and most Commission covers
   carry their own picture of the building.

   ONE ROW THAT SCROLLS, not a grid that wraps. Adam, 2026-09-09: "It'd be
   fun to scroll through the covers", and then "the thumbnails are a little
   small ... make them a little larger even if we lose some of the count."
   So the cover is 210px wide rather than 150, about five are in view at
   once instead of sixteen, and the strip holds far more than fits.

   Every cover is generated 900px wide from the held PDF at a ratio close to
   1:1.29, so a fixed 210x272 box crops a few pixels off the tallest and
   nothing off the rest -- and a fixed box is what keeps the row's baseline
   straight, which a ragged one would not. */
.coverrow { position: relative; margin: 0 0 34px; }
.coverband {
  list-style: none; margin: 0; gap: 14px;
  /* TWO ROWS THAT SCROLL SIDEWAYS. Adam, 2026-09-09: "I like the two rows.
     Can that be accomplished? With this new format?" -- a grid flowing down
     a column and then across does it: the two rows are fixed, the columns
     are created as covers require them, and the overflow stays horizontal.
     Twice as many covers are in view as a single row showed, at the larger
     size. */
  display: grid; grid-auto-flow: column;
  grid-template-rows: repeat(2, auto); grid-auto-columns: 210px;
  /* Snap so the strip never comes to rest with a sliver of a column
     showing -- after an arrow, a swipe or a trackpad flick alike. Proximity
     rather than mandatory: mandatory would fight a reader who is dragging
     slowly through the covers on purpose. */
  overflow-x: auto; scroll-snap-type: x proximity;
  /* Room above for the hover lift and below for the scrollbar, so neither
     is clipped by the overflow box. */
  padding: 3px 0 12px; scrollbar-width: thin;
  overscroll-behavior-x: contain;
}
.coverband:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }
.coverband li { scroll-snap-align: start; }
.coverband img {
  display: block; width: 210px; height: 272px; object-fit: cover;
  background: #fff; border: 1px solid var(--line); border-radius: 3px;
  box-shadow: 0 1px 3px rgba(0,0,0,.07);
  transition: box-shadow .15s ease, transform .15s ease;
}
.coverband a:hover img {
  box-shadow: 0 4px 14px rgba(23,73,112,.24); transform: translateY(-2px);
}

/* The arrows sit ON the strip's edges rather than outside it, because the
   landing page's wide shell already runs close to the window and an arrow
   hung outside would be the first thing clipped on a laptop screen. */
.cnav {
  position: absolute; top: calc(50% - 7px); transform: translateY(-50%);
  width: 38px; height: 38px; padding: 0; border-radius: 50%;
  border: 1px solid var(--line); background: #fff; color: var(--navy);
  display: grid; place-items: center; cursor: pointer; z-index: 2;
  box-shadow: 0 2px 10px rgba(0,0,0,.16);
  transition: background .15s ease, color .15s ease, opacity .15s ease;
}
.cnav svg { width: 22px; height: 22px; }
.cnav--prev { left: -6px; }
.cnav--next { right: -6px; }
.cnav:hover { background: var(--navy); color: #fff; border-color: var(--navy); }
/* Kept in place rather than removed at the ends of the strip: an arrow that
   vanishes makes the other one jump, and the reader loses the control they
   were aiming at. */
.cnav:disabled { opacity: .3; cursor: default; box-shadow: none; }
.cnav:disabled:hover { background: #fff; color: var(--navy); border-color: var(--line); }

@media (max-width: 640px) {
  /* A thumb already does this better than a 38px target can. */
  .cnav { display: none; }
  .coverband { grid-auto-columns: 150px; }
  .coverband img { width: 150px; height: 194px; }
}
@media (prefers-reduced-motion: reduce) {
  .coverband { scroll-behavior: auto; }
  .coverband a:hover img { transform: none; }
}

/* Preservation Chicago's own circle mark, from their asset library. */
.pcmark { display: inline-block; margin: 0 0 12px; }
.pcmark img { display: block; width: 240px; height: auto; }

/* ------------------------------------------------- landing page, revised
 *
 * Adam, 2026-09-08: put the facet buttons "to smaller buttons on the right
 * side of the main hero. They do basically relate to search. And this way, we
 * can have the ... from the collection scroll immediately below, which is
 * colorful, and then the recents."
 *
 * So the hero is two columns: the headline, search box and examples on the
 * left; the six ways of narrowing the same records on the right, smaller,
 * reading as facets of the search rather than a second menu.
 */
.hero--split .inner { padding-bottom: 34px; }
/* Adam, 2026-09-08: "I actually liked the hero before. I just wanted you to
   nudge the location of the two elements to the left. So it'd be a little
   more white space, not actually change them."

   So the two columns keep the proportions they had. The only change is the
   trailing padding, which pulls both of them left inside the same centered
   wrapper and leaves the white space on the right. An earlier attempt
   rebalanced the COLUMNS instead, which squeezed the headline onto four lines
   and clipped the search placeholder -- resizing the thing he liked. */
/* THE HERO'S COLUMNS ARE ANCHORED TO THE MASTHEAD ABOVE IT.
   Adam, 2026-09-08: "maybe try to align the copy to the header above and fix
   the location to stationary points."

   Two anchors, both borrowed from the masthead so they cannot drift:

     --edge   the distance from the section's edge to the masthead's content
              edge: half the leftover beside the 1180px wrapper, plus the
              bar's own 24px padding. The nav's right edge sits here.
     --wm     the further 46px that the wordmark's TEXT is indented by the
              star (36px) and its gap (10px). "Every Chicago Landmark" starts
              on the same line as "Chicago Landmark Reports".

   The copy is flush to that line and the pills are flush to the nav's right
   edge; the middle column absorbs whatever the window has spare, so the
   center gap breathes and the two blocks themselves do not move. */
.hero--split {
  --edge: max(24px, calc((100% - var(--wrap)) / 2 + 24px));
  --wm: 46px;
  /* Adam, 2026-09-08: "shift the search buttons so that the edge of the
     buttons aligns with the t in type on the header." That is one nav link
     and one nav gap in from the right: "Type" measures 30px and .mnav's gap
     is 18px. The nav is right-aligned, which is what makes this a fixed
     distance rather than a guess. */
  --pill-inset: 48px;
  display: grid;
  grid-template-columns:
    calc(var(--edge) + var(--wm))   /* left gutter, to the wordmark's text */
    minmax(0, 620px)                /* headline, lede, search, examples */
    minmax(24px, 1fr)               /* the gap in the center */
    auto                            /* the pills, at their own width */
    calc(var(--edge) + var(--pill-inset));   /* right gutter, to the T of Type */
  /* Adam: "shift the Preston Bradley Hall note to the very bottom of the
     photograph." The copy takes the free height and the credit sits on the
     floor of the hero; without this the rows pack at the top and the credit
     floats with 70-odd pixels of photograph below it. */
  grid-template-rows: 1fr auto;
  column-gap: 0;
  max-width: none; margin: 0; padding-right: 0;
  align-items: start;
}
.hero--split > .inner {
  grid-column: 2; max-width: none; padding-left: 0; padding-right: 0;
  /* .hero .inner centers itself with `margin: 0 auto`, which in a grid area
     makes the box shrink to its widest line and sit in the middle of the
     column -- 48px off the anchor line, and moving with the copy. It has to
     be flush left in its column for the anchor to mean anything. */
  margin-left: 0; margin-right: 0;
}
.hero--split > .herofacets { grid-column: 4; justify-self: end; }
.herofacets { padding: 62px 0 34px 0; }
/* Adam, 2026-09-08: "now that we have a nice photograph to work with. Let's
   make the search buttons in the hero oval shaped and all in a vertical line.
   Smaller profile."

   One column of pills, label only. The descriptions are dropped here rather
   than hidden with CSS -- they were doing the work of explaining six routes
   on a bare page, and the page is no longer bare. The words Search, Map,
   Neighborhood, Architect, Type and Year say what they do. */
.routes--aside {
  display: flex; flex-direction: column; gap: 10px;
  align-items: flex-start;      /* pills size to their label, not the column */
}
.routes--aside a {
  display: block; padding: 10px 26px; text-align: center; min-width: 152px;
  border-radius: 100px; background: rgba(255,255,255,.94);
  border: 1px solid rgba(255,255,255,.6);
  box-shadow: 0 2px 10px rgba(4,18,32,.18);
}
.routes--aside .rt-n {
  display: block; font-family: var(--sans); font-size: 15.5px;
  font-weight: 600; letter-spacing: .01em; color: var(--navy-ink);
}
.routes--aside .rt-d { display: none; }
/* The hero photograph. Adam chooses it from the contact sheet; the file, its
   focal point and its credit all come from HERO in scripts/build_pages.py,
   which sets --hero-image and --hero-focus on the section itself. */
.hero--photo {
  position: relative; isolation: isolate;
  /* The image layer is taller than the section on purpose -- its height is
     driven by the viewport width so content cannot re-crop it -- so the
     section has to clip it. Without this it spills into the covers band
     below. */
  overflow: hidden;
  background: var(--navy-ink);
  border-bottom: 3px solid var(--navy);
  /* THE SECTION'S HEIGHT COMES FROM THE WINDOW, NOT FROM THE COPY.
     This is the fix for the thing that went wrong four times. A `cover`
     background re-crops whenever its box changes shape, so while the hero was
     as tall as whatever was written in it, adding a line moved the
     photograph -- "I think the image has shifted." The previous attempt made
     the image LAYER taller than the section instead, which held the crop
     still but pushed the bottom of the frame below the clip: "now we lost the
     bottom of the photograph where you see the arches."
     So the section itself is sized from the viewport, the image layer fills
     it exactly, and the whole chosen crop is on screen. */
  /* Adam, 2026-09-08: "the photo adjusts in real time to the size of the
     screen. It's really hard to fix the layout." While the height is 50vw
     the hero is exactly 2:1 whatever the window does, so `cover` crops the
     same picture at every width -- resizing moves nothing. That only holds
     between the two ends of the clamp, so the top end is set past a normal
     laptop rather than at 720. */
  height: clamp(560px, 50vw, 790px);
}
/* THE IMAGE'S BOX IS DRIVEN BY WIDTH, NOT BY THE CONTENT.
   This is the fix for a thing that went wrong three times: every time a line
   of copy was added or the padding changed, the section grew, and a `cover`
   background re-crops whenever its box changes -- so the photograph appeared
   to shift on its own. Adam caught it each time: "I think the image has
   shifted."
   Height is 66.67vw, which is the 3:2 photographs' own aspect against the
   viewport width, so the crop now depends on the window and nothing else.
   min-height covers the one case where a section could grow taller than
   that, on a narrow screen. */
.hero--photo::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background: var(--hero-image) var(--hero-focus, center 44%) / cover no-repeat;
}
/* A light scrim, and only where the words are. Adam, 2026-09-08: "What's the
   point of having a photograph if it's cropped and so dark that you can barely
   make it out?" The horizontal wash carries the headline; the radial one sits
   under the lede and the search box, where thin text was disappearing into the
   detail. Both are gone by the middle of the frame. */
.hero--photo::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    /* a soft floor, so the credit line and the example links stay legible
       over whatever the photograph has at the bottom of the frame -- the
       Chicago Theater marquee is a wall of light bulbs */
    linear-gradient(to top,
      rgba(6,26,44,.52) 0%, rgba(6,26,44,.22) 12%, rgba(6,26,44,0) 26%),
    /* Adam, 2026-09-08: "We can lighten up the blue tint on the left." The
       type's own shadow carries most of the legibility now, so the wash only
       has to take the edge off whatever is behind the words. */
    /* A TIGHT pool behind the words rather than a broad wash across the
       frame. The Cultural Center's dome is bright glass and gold mosaic, so a
       light overall tint left white type struggling; concentrating the same
       darkness where the text actually sits keeps the photograph bright and
       the headline solid. */
    radial-gradient(76% 78% at 15% 50%,
      rgba(6,26,44,.70) 0%, rgba(6,26,44,.52) 38%,
      rgba(6,26,44,.20) 68%, rgba(6,26,44,0) 100%),
    linear-gradient(96deg,
      rgba(6,26,44,.34) 0%, rgba(6,26,44,.20) 30%,
      rgba(6,26,44,.06) 54%, rgba(6,26,44,0) 74%);
}
.hero--photo > .inner,
.hero--photo > .herofacets { position: relative; }
.hero--photo > .inner { padding: 44px 0 0; }
.hero--photo > .herofacets { padding: 44px 0 0; }

/* Type carries its own shadow so the scrim does not have to be heavy. */
.hero--photo h1 {
  color: #fff; text-shadow: 0 2px 18px rgba(4,18,32,.85), 0 1px 3px rgba(4,18,32,.5);
  font-size: clamp(34px, 4.9vw, 54px); line-height: 1.08;
  max-width: 20ch;
}
.hero--photo .lede {
  color: #eef4fa; text-shadow: 0 1px 12px rgba(4,18,32,.9), 0 1px 2px rgba(4,18,32,.6);
  margin-top: 20px; font-size: 18px; line-height: 1.62; max-width: 54ch;
}
.hero--photo .bigsearch--hero { margin-top: 26px; }

.hero--photo .routes--aside a:hover {
  background: var(--navy); border-color: var(--navy);
}
.hero--photo .routes--aside a:hover .rt-n { color: #fff; }

/* The credit runs the full width of the hero now, because it carries a
   sentence or two about the room as well as the attribution. Left-aligned
   over its own dark band so it stays readable whatever the photograph does
   at the bottom of the frame. */
.herocredit {
  grid-column: 1 / -1; position: relative;
  margin: 0;
  /* the same left edge as the headline, not a padding of its own */
  padding: 10px var(--edge) 12px calc(var(--edge) + var(--wm));
  font-size: 11.5px; line-height: 1.55; letter-spacing: .01em;
  color: rgba(255,255,255,.82);
  text-shadow: 0 1px 8px rgba(4,18,32,.9);
  /* The band has to carry a paragraph now, and the bottom right of this
     frame is a lit chandelier, so it is a little heavier than a credit line
     needed. */
  background: linear-gradient(to top,
    rgba(4,18,32,.80) 0%, rgba(4,18,32,.62) 55%, rgba(4,18,32,.28) 85%,
    rgba(4,18,32,0) 100%);
}
.herocredit b { color: #fff; font-weight: 600; }
.herocredit .hc-src { color: rgba(255,255,255,.62); }
@media (max-width: 980px) {
  /* stacked, so the copy sets the height again and the photograph simply
     fills whatever that turns out to be */
  .hero--photo { height: auto; min-height: 520px; }
  .hero--split {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;   /* stacked: nothing to push to a floor */
  }
  .hero--split > .inner,
  .hero--split > .herofacets {
    grid-column: 1; justify-self: stretch;
    padding-left: 24px; padding-right: 24px;
  }
  .herocredit { text-align: left; }
}

/* "Although the recents maybe should be half the width and double row." */
.results--two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.results--two li { margin: 0; }
@media (max-width: 980px) { .results--two { grid-template-columns: 1fr; } }

/* Preservation Chicago's white lockup in the footer, on the navy. It carries
   the tagline -- "Strengthening Chicago by protecting historic architecture"
   -- which is this site's own argument, so it earns the space. */
footer.site .pcfoot { display: block; flex: 0 0 auto; }
/* max-width, not width alone. The footer column is a grid track that can be
   narrower than 380px between 700px and about 1000px, and a fixed width will
   not shrink into it -- it pushes the page sideways instead, on every page of
   the site. Caught 2026-09-27 while checking the Rookery plates. */
footer.site .pcfoot img { display: block; width: 380px; max-width: 100%; height: auto; opacity: .95; }
footer.site .pcfoot:hover img { opacity: 1; }
@media (max-width: 700px) { footer.site .pcfoot img { width: 260px; } }

/* The slim form of the gap card: an invitation rather than a tally, so it
   takes a single line of body text instead of a heading and a button. */
.gapcard--slim {
  margin-top: 22px; padding: 14px 18px;
  /* Copy left, action right. The card's own sentence says Preservation
     Chicago "would be glad to hear from you", so the button is what that
     sentence asks for rather than something dropped in to fill the gap the
     92ch measure left.

     ALIGNED WITH "BUY US A COFFEE" BELOW IT. Adam, 2026-09-10: "Maybe it
     would be better to align vertically contact us pill with buy us a
     coffee pill." That button sits at the left edge of the colophon's third
     column, and the colophon is three equal columns with a 30px gap, so its
     third column starts at 2/3 of the shell's content width plus 20px. This
     card carries 18px of its own padding, which offsets everything inside
     it, so the text column is solved for rather than guessed:

       card content C = W - 36          (18px padding each side)
       target within card = 2W/3 + 20 - 18
       text column T = target - 30 gap = 2C/3 - 4

     Hence calc(66.6667% - 4px), which holds at any width because C tracks W.
     Checked at 1132: the button lands at 774.67px from the content edge, and
     so does "Buy us a coffee". */
  display: grid; grid-template-columns: calc(66.6667% - 4px) 1fr;
  gap: 30px; align-items: center;
}
.gapcard--slim p { margin: 0; max-width: 92ch; font-size: 14.5px; line-height: 1.6; }
.gapcard--slim strong { color: var(--navy-ink); }
.btn--gap {
  /* At the column's left edge, not stretched across it: that edge is the
     line it shares with the button below. */
  justify-self: start;
  white-space: nowrap; font-size: 14px; padding: 9px 18px;
  background: var(--navy); border-color: var(--navy); color: #fff;
}
.btn--gap:hover { background: var(--navy-ink); border-color: var(--navy-ink); }
@media (max-width: 720px) {
  /* A 150px button beside eight lines of wrapped text is worse than a button
     under them. */
  .gapcard--slim { grid-template-columns: minmax(0, 1fr); }
  .btn--gap { justify-self: stretch; text-align: center; }
}

/* Brighten the hero photograph. Adam, 2026-09-08: "Cadillac's brighten up the
   photo ... Actually, the current one isn't so bad." The lift is on the image
   itself, not the scrim, so the type keeps the contrast it needs. */
.hero--photo::before { filter: brightness(1.14) saturate(1.06); }

/* PHOTOGRAPHS BESIDE THE ABOUT COPY. Adam, 2026-09-09: "We need to add some
   photos to the right hand side of the about page. Verticals would be ideal."

   The rail is a second grid column rather than floats, so the prose keeps its
   68ch measure exactly -- a float would narrow the text column and change the
   line length the page was set for. Only pages that pass photographs get the
   class, so /cite/ is untouched. */
.shell--railed > main.prose { grid-column: 1; }
/* Stacked under the copy by default; the desktop rule below turns it into a
   column beside it. This has to come FIRST: it is unconditional and would
   otherwise beat the media query on source order, which is exactly what left
   the photographs 26px low. */
.rail { margin: 26px 0 0; }
@media (min-width: 1000px) {
  .shell--railed {
    display: grid;
    /* 1180px of shell less 48px of padding leaves 1132; a 68ch measure is
       about 640, so 280 for the photographs and 48 between them fits with
       room to spare. */
    grid-template-columns: minmax(0, 68ch) 280px;
    gap: 48px;
  }
  /* The prose sets the row's height; the rail matches it and spreads its
     photographs over that whole height. Stacking them from the top with a
     fixed margin is what left half the column white when the copy ran to
     2,700px and three photographs filled 1,300. space-between means the copy
     can be rewritten, longer or shorter, without anyone re-tuning a gap. */
  .shell--railed > main.prose { align-self: start; }
  .rail {
    align-self: stretch;
    display: flex; flex-direction: column; justify-content: space-between;
    gap: 22px;
    /* FLUSH WITH THE FIRST LINE OF COPY. Adam, 2026-09-10: "shift the photos
       up so that the top of the photo is aligned with the top of the first
       paragraph." It was 26px low because the unconditional .rail margin used
       to be written after this block and won on source order -- so the
       margin-top: 6px here never applied. The base rule is above now. */
    margin-top: 0;
  }
}
.railshot { margin: 0; }
.railshot img {
  /* Adam, 2026-09-10: "let's add a black border to the photographs" and then
     "match the border color to the horizontal line that separates about from
     the content." That line is .title-band's border-bottom, 3px solid
     var(--navy) -- so the frames carry the same navy, at 1px. It reads as the
     same rule continued around the photographs rather than a second color
     introduced beside it. Square, not rounded: a radius on a hard rule reads
     as a mistake. No drop shadow either -- a rule and a shadow are two frames
     around one photograph. */
  display: block; width: 100%; height: auto;
  border: 1px solid var(--navy);
  transition: box-shadow .15s ease, transform .15s ease;
}
.railshot a:hover img {
  box-shadow: 0 5px 16px rgba(23,73,112,.30); transform: translateY(-2px);
}
.railshot figcaption {
  /* Two lines, not three: the name, then the designation and the credit on
     one line. Six frames with a three-line caption each put 150px of small
     type into a column of photographs. */
  margin-top: 7px; font-size: 12.5px; line-height: 1.42; color: var(--ink-soft);
}
.railshot figcaption .sep { color: var(--ink-faint); padding: 0 2px; }
.railshot figcaption b { color: var(--ink); font-weight: 600; }
.railshot .cred { color: var(--ink-faint); }

/* Below the breakpoint the rail becomes a row under the copy: three portrait
   frames side by side read as a set, where three stacked ones would push the
   footer a screen and a half away. */
@media (max-width: 999px) {
  /* Two rows of three under the copy. Six stacked would push the footer
     three screens down on a tablet. */
  .rail { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
}
@media (max-width: 560px) {
  /* Two columns, and the last two dropped: on a phone the copy is the page,
     and eight screens of scrolling to reach the footer is not a kindness. */
  .rail { grid-template-columns: repeat(2, 1fr); }
  .railshot:nth-child(n+5) { display: none; }
}

/* The selected landmark on the map, marked with the site's own star. One at
   a time and 30px across, which is the size at which a six-pointed star is
   legible -- the 469 circles stay circles because at 6px the notches between
   the points fall below a pixel and the amber/blue colour, which is the
   actual information, loses the area it needs. */
.selstar { width: 30px; height: 30px; cursor: pointer;
           filter: drop-shadow(0 1px 3px rgba(0,0,0,.45)); }
.selstar svg { width: 100%; height: 100%; display: block; }
@media (prefers-reduced-motion: no-preference) {
  .selstar { animation: selstar-in .18s ease-out; }
  @keyframes selstar-in {
    from { transform: scale(.6); opacity: 0; }
    to   { transform: scale(1);  opacity: 1; }
  }
}

/* DESIGNATIONS PER YEAR, at the foot of /year/. Adam, 2026-09-10: "a graph
   ... which shows all the years on an axis and the different numbers per
   year graphically."

   Drawn as SVG by build_indexes.py, so there is no library and no fetch: 85
   rectangles off a count the build already has. Each column is a link to
   that year, and the hit area is the full column height -- a one-record bar
   is 7px tall and nobody can click that.

   Navy for reports held, amber for reports still sought, the same coding the
   map uses. It is the one thing this chart says that a plain count cannot:
   the gaps fall in the 1970s and 1980s, which is what you would expect of
   paper that was never reprinted.

   THE .yc-hit FILL IS LOAD-BEARING. An SVG rect with no fill paints BLACK,
   and these are 57 full-height rectangles laid over the bars -- without this
   rule the chart is a black box with white gaps between the columns, which
   is exactly what shipped when this block went missing. */
.yearchart { margin: 34px 0 8px; padding-top: 24px;
             border-top: 1px solid var(--line-soft); }
.yearchart svg { display: block; width: 100%; height: auto; overflow: visible; }
.yc-grid { stroke: var(--line); stroke-width: 1; }
.yc-num { fill: var(--ink-faint); font-size: 9.5px; text-anchor: end;
          font-family: var(--sans); }
.yc-yr  { fill: var(--ink-soft); font-size: 10.5px; text-anchor: middle;
          font-family: var(--sans); font-weight: 600; }
.yc-held   { fill: var(--navy); }
.yc-sought { fill: #e8a33d; }
.yc-hit { fill: transparent; }
.yearchart a:hover .yc-hit { fill: rgba(23,73,112,.10); }
.yearchart a:focus-visible .yc-hit { fill: rgba(23,73,112,.16); }

/* THE READOUT, INSTANT. A native SVG <title> tooltip waits for the operating
   system's delay, which no stylesheet can shorten, so the text is part of the
   chart and :hover reveals it -- no delay, no script. The white stroke under
   the glyphs (paint-order: stroke) keeps it readable where it crosses a
   gridline or a bar. pointer-events: none so it never intercepts the click
   meant for the column. */
.yc-tip {
  opacity: 0; pointer-events: none;
  fill: var(--ink); font-size: 11px; font-weight: 600;
  font-family: var(--sans);
  paint-order: stroke; stroke: #fff; stroke-width: 3.5px;
  stroke-linejoin: round;
}
/* The <g> is the year with no designations -- it has no page, so it is not
   a link, but hovering it should still say so. */
.yearchart a:hover .yc-tip,
.yearchart g:hover .yc-tip,
.yearchart a:focus-visible .yc-tip { opacity: 1; }
.yearchart g:hover .yc-hit { fill: rgba(23,73,112,.06); }
.yearchart figcaption {
  margin-top: 12px; font-size: 13px; color: var(--ink-soft);
  display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: baseline;
}
.yc-key { display: inline-flex; align-items: center; gap: 6px;
          font-size: 12.5px; color: var(--ink-soft); white-space: nowrap; }
.yc-key i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.yc-key i + i { margin-left: 10px; }
.yc-k-held   { background: var(--navy); }
.yc-k-sought { background: #e8a33d; }

/* THE TYPE CHART is the year chart laid on its side, and shares everything
   above -- the palette, the held-against-sought stacking, the drawn readout.
   Only the axis differs, and these are the four rules that differ with it.
   Years are a sequence with four-digit labels and suit columns; building
   types are 28 categories running to "office and commercial buildings",
   which a column chart would clip or turn sideways. */
.typechart .tc-lab {
  fill: var(--ink); font-size: 11.5px; text-anchor: end;
  font-family: var(--sans);
}
/* The count sits past the end of its own bar, so it stays readable whether
   the bar is 12px long or 470. */
.typechart .tc-n {
  fill: var(--ink-faint); font-size: 10.5px; font-family: var(--sans);
}
/* The scale runs along the bottom here, not down the left, so the year
   chart's right-aligned numbers would hang off their gridlines. */
.typechart .tc-num { text-anchor: middle; }
/* Readouts start just inside the axis rather than centring on a column:
   a row is only 20px tall and the label is already to its left. */
.typechart .tc-tip { text-anchor: start; }

/* THE NEIGHBORHOOD MAP, below the list on /neighborhood/. Adam, 2026-09-09:
   "Can we include a neighborhood map below the list on the neighborhood tab."

   The list is how you find a neighborhood you already have in mind. The map
   is how you see where the landmarks are, which the list cannot show: the
   Loop has 80, the Near North Side 50, and 23 of the 77 community areas have
   none. */
.hoodmap { margin: 34px 0 8px; padding-top: 24px;
           border-top: 1px solid var(--line-soft); }
/* MAP LEFT, THE LANDMARKS OF WHATEVER YOU TOUCH ON THE RIGHT. Adam,
   2026-09-10: "Let's shift the map to the left alignment. And then when you
   hover over a neighborhood, those landmarks appear in a window on the right
   hand side ... as you move them along, you can view many of them in real
   time."

   Which also answers what was wrong with the map: Chicago is a tall narrow
   shape, so a full-width box left most of the frame empty. What goes beside
   it is the collection itself. */
.hm-split {
  display: grid; gap: 22px; align-items: stretch;
  /* EQUAL COLUMNS. Capped at 900 and centred rather than filling the 1,132px
     shell: at full width each column is 555px, and 555 at the map's 0.615
     aspect stands 902px tall. 439 gives a 714px map, which is large -- "we
     can just make it huge" -- without turning the section into two screens
     of scrolling. */
  /* FULL SHELL WIDTH, AND THE EXTRA ROOM GOES TO THE PANEL. Adam,
     2026-09-17: "let's make the map and reader full width as we've done in
     other places on the website."

     Not by widening both columns equally: Chicago at 0.615 is a tall narrow
     shape, and a 555px map stands 902px high, which is the reason the block
     was capped at 900px in the first place. So the map is held at the size
     that was already right and the panel -- a list of landmarks, which wants
     the width -- takes everything else. */
  grid-template-columns: minmax(0, 440px) minmax(0, 1fr);
}
#hoodmap {
  /* 0.615, NOT 0.82: that was the aspect WITH O'Hare, a detached western
     panhandle holding no landmarks that pushed the bounding box 0.1034
     degrees west for nothing. Chicago proper measures 0.3126 by 0.5080 in
     Mercator, so the frame is a good deal narrower and the crop closer --
     which is what Adam asked for. */
  aspect-ratio: 615 / 1000;
  width: 100%;
  border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; background: var(--card);
}
.hm-panel {
  /* Matches the map's height and scrolls inside itself: the Loop's 80
     landmarks are a long list, and the page should not grow by 2,000px
     because the pointer crossed the Loop.

     BY THE GRID, NOT BY AN ASPECT RATIO. While the two columns were equal,
     615/1000 on both made them the same height. They are no longer equal --
     the panel is now the wider one -- and the same ratio would have made it
     a thousand pixels tall beside a 714px map. Stretching to the row leaves
     the map deciding the height, which is what "matches the map" meant. */
  height: 100%;
  overflow-y: auto;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--card); padding: 15px 17px;
  font-size: 14px; line-height: 1.5;
}
.hm-panel b { display: block; font-family: var(--serif); font-size: 19px;
              font-weight: 600; color: var(--navy-ink); line-height: 1.2; }
.hm-count { display: block; margin: 3px 0 11px; font-size: 12.5px;
            color: var(--ink-soft); }
.hm-lab { display: block; margin: 4px 0 2px; font-size: 11px;
          font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
          color: var(--ink-faint); }
.hm-panel ul { list-style: none; margin: 0; padding: 0; }
.hm-panel li + li { border-top: 1px solid var(--line-soft); }
/* ONE LINE PER LANDMARK, so more of the Loop's 80 is in view. The name
   takes the space and truncates; the year holds the right edge. */
.hm-panel li a { display: flex; align-items: baseline; gap: 10px;
                 padding: 4px 0; text-decoration: none; color: inherit; }
.hm-panel li a:hover { color: var(--blue-deep); }
.hm-n { flex: 1 1 auto; min-width: 0; overflow: hidden;
        text-overflow: ellipsis; white-space: nowrap; }
.hm-y { flex: 0 0 auto; font-size: 12px; color: var(--ink-faint);
        font-variant-numeric: tabular-nums; }
/* A report still sought, in the amber the map and the year chart use for the
   same thing. Four words would not fit on this line. */
.hm-sought { display: inline-block; width: 6px; height: 6px; border-radius: 50%;
             background: #e8a33d; margin-right: 5px; vertical-align: middle; }
.hm-unpin {
  float: right; margin: -2px 0 0 8px; padding: 3px 9px;
  font: inherit; font-size: 11px; font-weight: 600; cursor: pointer;
  color: var(--navy); background: #eaf4fc;
  border: 1px solid var(--blue); border-radius: 100px;
}
.hm-unpin:hover { background: var(--blue); color: #fff; }
.hm-all { display: inline-block; margin-top: 12px; font-size: 13px;
          font-weight: 600; color: var(--navy); text-decoration: none; }
.hm-all:hover { color: var(--blue-deep); text-decoration: underline; }
.hm-none { color: var(--ink-soft); font-size: 13.5px; }

@media (max-width: 760px) {
  /* Stacked, and the panel takes its own height rather than the map's: a
     0.615 box below a 0.615 box is two screens of scrolling. */
  .hm-split { grid-template-columns: minmax(0, 1fr); }
  .hm-panel { aspect-ratio: auto; max-height: 340px; }
}
.hoodmap figcaption {
  margin-top: 12px; font-size: 13px; color: var(--ink-soft);
  line-height: 1.5; max-width: 78ch;
}
.hm-key { display: inline-flex; align-items: center; gap: 5px;
          margin-right: 12px; font-size: 12.5px; white-space: nowrap; }
.hm-key i { width: 12px; height: 12px; border-radius: 2px;
            display: inline-block; margin-left: 8px; }
.hm-key i:first-child { margin-left: 0; }
/* The same five steps the fill uses, so the key is the map's own scale. */
.hm-k0 { background: #e9e4da; }
.hm-k1 { background: #cfe0ee; }
.hm-k2 { background: #93c4e4; }
.hm-k3 { background: #4db2ec; }
.hm-k4 { background: #174970; }
/* The reset button matches Mapbox's own controls, which draw their icons at
   this size inside a 29px square. */
.hm-reset svg { width: 19px; height: 19px; display: block; margin: 0 auto;
                color: #333; }
.hm-reset:hover svg { color: #000; }
/* HALF SEE-THROUGH, his figure. Mapbox paints the popup's background on
   .mapboxgl-popup-content and its tip on the -tip element, so both have to
   take it or the tip stays a solid white spike. A blur behind the panel is
   what keeps 13px type legible over a dark navy fill -- 50% white over
   #174970 is otherwise grey mud. */
.hm-poplet .mapboxgl-popup-content {
  background: rgba(255,255,255,.5);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  box-shadow: 0 1px 6px rgba(0,0,0,.18);
  padding: 8px 11px;
}
.hm-poplet .mapboxgl-popup-tip { opacity: .5; }
.hm-pop { display: block; font-size: 13px; line-height: 1.45; color: var(--ink); }
.hm-pop b { display: block; color: var(--navy-ink); }

/* ---------------------------------------------------------- full text
 *
 * The passages inside the documents, under the record results on /search/.
 * Deliberately quieter than a record row: a record IS the thing you were
 * looking for, a passage is evidence that one of them mentions your phrase.
 * So the document name leads, the excerpt is the body, and the whole block
 * sits behind a rule that says plainly where the records stop.
 */
.ftx { margin-top: 34px; padding-top: 22px; border-top: 2px solid var(--line); }
.ftx-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.ftx-head h2 {
  font-family: var(--serif); font-size: 20px; font-weight: 600;
  color: var(--navy-ink); margin: 0;
}
.ftx-n { font-size: 13.5px; color: var(--ink-soft); }

.ftx-tabs { display: flex; flex-wrap: wrap; gap: 7px; margin: 12px 0 14px; }
.ftx-tab {
  font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
  color: var(--navy); background: var(--card);
  border: 1px solid var(--line); border-radius: 100px; padding: 5px 13px;
}
.ftx-tab:hover { border-color: var(--blue); }
/* The chosen corpus is filled, not merely outlined: with three pills in a
   row an outline alone reads as "hovered", not "on". */
.ftx-tab.is-on {
  color: #fff; background: var(--navy); border-color: var(--navy);
}

.ftx-list { list-style: none; }
.ftx-list li {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); margin-bottom: 7px;
}
.ftx-list li:hover { border-color: var(--blue); }
/* SCOPED TO THE RESULT'S OWN LINK. As `.ftx-list a` this also caught
   the page chips added when results were grouped by document, and
   beat their own rule on specificity -- every chip came out as an
   11px-by-16px block. */
.ftx-list .fx-main { display: block; padding: 11px 16px; }

.fx-h { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; }
.fx-doc {
  font-family: var(--serif); font-size: 16px; font-weight: 600;
  color: var(--navy-ink);
}
.fx-pg { font-size: 12.5px; color: var(--ink-soft); }
/* ONE ROW PER DOCUMENT, and its pages underneath. A report that uses a phrase
   throughout was filling the first screen by itself -- "terra cotta" returned
   the Terra Cotta Row District eight times -- so the pages are chips now, and
   each one opens the reader at that page. */
.fx-n { font-size: 12.5px; color: var(--ink-faint); }
.fx-pgs {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px;
  padding: 0 18px 12px; margin-top: -4px;
}
.fx-pgl { font-size: 12px; color: var(--ink-faint); margin-right: 2px; }
.fx-pgc {
  font-size: 12.5px; font-variant-numeric: tabular-nums; color: var(--navy);
  background: var(--paper-2, #f4f6f8); border: 1px solid var(--line-soft);
  border-radius: 6px; padding: 1px 7px; text-decoration: none;
}
.fx-pgc:hover { background: #eaf6fd; border-color: #cfe8f7;
                color: var(--blue-deep); }
.fx-c {
  font-size: 11px; font-weight: 600; letter-spacing: .03em;
  color: var(--navy); background: #eaf6fd; border: 1px solid #cfe8f7;
  border-radius: 100px; padding: 1px 8px;
}
/* The excerpt is the reason the row is here, so it gets the reading face and
   room to breathe. Three lines at most: enough to judge the hit, not so much
   that eight results become a wall. */
.fx-x {
  display: block; margin-top: 6px;
  font-family: var(--serif); font-size: 14.5px; line-height: 1.5;
  color: var(--ink);
}
.fx-x mark { background: #fdf0c4; color: inherit; padding: 0 1px; }
.fx-s { display: block; margin-top: 5px; font-size: 12.5px; color: var(--ink-faint); }

/* A community area the Commission has never designated in. The page is not
 * a stub -- it carries the survey's findings -- so the note reads as context
 * for what follows rather than as an apology for what is missing.
 */
.emptyhood {
  margin: 0 0 18px; padding: 14px 18px;
  background: var(--card); border: 1px solid var(--line);
  border-left: 3px solid var(--blue); border-radius: var(--radius);
  font-size: 15px; line-height: 1.55; color: var(--ink-soft);
  max-width: 62ch;
}

/* The ask under a missing report sat hard against the sentence that explains
 * it -- Adam, 2026-09-14: "too tight to the copy above ... give it some white
 * space padding so that it can breathe." The button is a different kind of
 * thing from the paragraph, and the space is what says so.
 */
/* The record-page ask only: this button follows a p.gap, and the
 * homepage version follows an ordinary paragraph, so the homepage
 * card is left exactly as it is. */
p.gap + .btn--gap { margin-top: 14px; }

/* The reader on a neighborhood page. It shares .reader / .reader-stage /
 * .pager with the record page, so a PDF looks and behaves the same wherever
 * it is opened; only the wrapper and the caption are new.
 */
.chrs-reader { margin: 14px 0 4px; max-width: 680px; }
.chrs-reading {
  margin: 7px 0 0; font-size: 13px; color: var(--ink-soft);
}

/* The combined field maps, beside the chapter pill. Same shape as the
 * chapter: two documents of equal standing, one to read and one to browse.
 */
.chrs-pill--maps {
  background: var(--card); border-color: var(--line-soft);
}
.chrs-pill--maps:hover { border-color: var(--blue); }

/* The map panel's own name, so the outline runs h1 -> h2 -> h3 like the
 * search page and the column of controls is announced rather than inferred.
 * Sized as a label, not a title -- it sits above the facet groups, and the
 * page's heading is already the h1 in the panel head.
 */
.mp-filter {
  padding: 14px 20px 0;
  font-size: 11.5px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-faint);
}

/* SHARE THIS LANDMARK. Adam, 2026-09-14, with the Cortland Bridge in the
   news: "It would be nice to be able to easily tweet it out through social
   media. It'll also help to draw attention and traffic to the site."
   Plain links to each platform's own share URL -- no SDK, no iframe, no
   button that phones home before it is clicked. They work with JavaScript
   off, which nothing built from a vendor widget does. */
.sharecard .body { padding: 16px 18px 18px; }
.sharehd {
  font-family: var(--sans); font-size: 11.5px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint);
  margin: 0 0 10px;
}
.sharerow {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 7px;
}
/* Icon AND word. An icon alone is a guess, and these six are not all
   recognisable at 15px -- Bluesky least of all. */
.sh {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 11px; border: 1px solid var(--line); border-radius: var(--radius);
  font-family: var(--sans); font-size: 12.5px; color: var(--ink);
  background: var(--card); white-space: nowrap;
}
.sh svg { flex: 0 0 auto; }
.sh:hover { border-color: var(--navy); background: #eaf6fd; color: var(--navy-ink); }
.sh:focus-visible { outline: 2px solid var(--navy); outline-offset: 1px; }

/* A platform's own colour, on hover only. At rest the row is one quiet set of
   buttons in the site's palette, because six brand colours stacked next to a
   source citation would shout louder than the citation. The tint appears
   under the cursor, which is the moment it is useful -- it confirms which
   one is about to be clicked. */
.sh-x:hover  { border-color: #14171a; background: #14171a; color: #fff; }
.sh-bs:hover { border-color: #1185fe; background: #1185fe; color: #fff; }
.sh-fb:hover { border-color: #1877f2; background: #1877f2; color: #fff; }
.sh-li:hover { border-color: #0a66c2; background: #0a66c2; color: #fff; }
.sh-em:hover { border-color: var(--navy); background: var(--navy); color: #fff; }
.sh-cp:hover { border-color: var(--navy); background: var(--navy); color: #fff; }
.sh-rd:hover { border-color: #ff4500; background: #ff4500; color: #fff; }

/* SOURCES AND SHARE, SIDE BY SIDE. Adam, 2026-09-14: "let's make two columns
   for the sources and the share buttons so that they consume the same
   vertical distance." Stacked, the share row pushed the page taller while
   the whole right half of the source line sat empty. Two columns use the
   width that was already there and end the record on one line of its own.
   Source first in the markup and first in the reading order: the citation is
   the claim, the share row is what someone does about it. */
/* THE SAME TWO COLUMNS AS THE PAGE ABOVE IT. Adam, 2026-09-14: "Shift the
   column so that it aligns with the column above. Move the share to the left
   alignment and allow the long source copy to run further horizontally...
   essentially double stacked social media buttons."
   404px is .shell's aside, and 24px its gap, so the share row starts on the
   same vertical as the reader and the related list -- the record ends on the
   grid it was built on instead of near it. The source keeps everything to the
   left of that, which is most of the width, and the seven buttons wrap into
   two rows inside the column rather than stretching it. */
.prov { display: grid; grid-template-columns: minmax(0, 1fr) 404px;
        gap: 10px 24px; align-items: start; }
.prov > .sharecard {
  grid-column: 2; grid-row: 1 / span 2; justify-self: start;
  /* Aligned to the card's TEXT, not to its border. Adam, 2026-09-14: "but I
     don't think they quite line up." The column was flush with the aside at
     516px and looked wrong, because the reader's eye follows the line the
     words make -- and the related list's own items sit 21px further in, the
     card's 1px border plus their 20px padding. Matching the border aligned
     two things nobody was comparing. */
  padding-left: calc(1px + 20px);
}
.prov .sharehd { margin-bottom: 7px; }
/* Under 900px the aside is already below the content, so this follows it. */
@media (max-width: 900px) {
  .prov { grid-template-columns: 1fr; }
  .prov > .sharecard { grid-column: 1; grid-row: auto; }
}

/* ---------------------------------------------------------------- touch input
   A FORM FIELD UNDER 16px MAKES iOS SAFARI ZOOM THE PAGE and leave it zoomed,
   so a reader who taps the search box on an iPhone is stuck at 1.3x with the
   layout cut off, and the only way back is a pinch. It is not a rendering
   preference: Safari does it to bring small type up to a readable size, and
   16px is the exact threshold at which it stops.

   Three fields on this site were 14px -- the list filter, its select, and the
   community-area finder on the survey page.

   KEYED TO THE POINTER, NOT TO A WIDTH. The phone breakpoint here stops at
   700px and an iPad in portrait is 768px, so a width rule misses every tablet
   -- which is a touch device and zooms exactly the same way. (hover: none)
   and (pointer: coarse) is the pair that means "a finger", and it leaves the
   desktop sizes alone. */
@media (hover: none) and (pointer: coarse) {
  .listbar input[type="search"],
  .listbar select,
  .cafind input,
  input[type="text"],
  input[type="search"],
  input[type="email"],
  select,
  textarea { font-size: 16px; }
}






/* ---- the plate reader ----------------------------------------------
   Eight plates stacked made the Rookery page 7,900px tall, and these must be
   large to be legible -- the photogravures are tonal and turn to mush small.
   One at a time under the map, with the pager the report reader uses, and an
   expanded view with zoom for anyone studying the ornament.

   EXPANDED IS AN OVERLAY, not :fullscreen. iOS Safari implements element
   full screen only for <video>, so the button would do nothing at all on an
   iPhone. A fixed overlay works everywhere. The real API is still requested
   on top where it is allowed, which only removes the browser chrome. */
/* PHOTOGRAPHS OF THE BUILDING TODAY. A grid rather than the plate reader's
   one-at-a-time pager, because these are ordinary photographs that read fine
   at 440px, where a tonal photogravure does not.

   AUTO-FIT WITH A minmax FLOOR, so one photograph fills the row and six make
   a grid, with no count baked into the markup. The floor is min(100%, 320px)
   rather than a bare 320px: on a 375px phone inside the card's padding a
   fixed 320px track cannot shrink, and the page scrolls sideways. That exact
   fault has been fixed on this site before. */
.card.photos .photo-grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
}
.card.photos figure.photo { margin: 0; }
.card.photos figure.photo a {
  display: block; background: #fff;
  border: 1px solid var(--rule, #d8d4cd);
}
/* The DPD images vary wildly in shape and several are small, so the frame is
   a fixed height and the photograph is contained inside it. Cropping to fill
   would cut the top off a tower, which is the subject. */
.card.photos figure.photo img {
  width: 100%; height: 300px; object-fit: contain; display: block;
}
.card.photos figcaption { padding: 6px 2px 0; }
.card.photos .cred { font-size: .82rem; color: var(--soft, #6b675f); }
@media (max-width: 700px) {
  .card.photos figure.photo img { height: 240px; }
}

.card.plates figure.plate { margin: 0; }
.card.plates figure.plate[hidden] { display: none; }
.card.plates .plate-stage {
  display: block; height: 340px; background: #fff;
  border: 1px solid var(--rule, #d8d4cd);
}
.card.plates .plate-stage img {
  width: 100%; height: 100%; object-fit: contain; display: block;
}
.card.plates figcaption { font-size: .9rem; line-height: 1.45; margin: .6rem 0 0; }
.card.plates .cred { display: block; margin-top: .25rem; font-size: .82rem;
                     color: var(--soft, #55525c); }
.plate-pager { display: flex; align-items: center; justify-content: center;
               gap: .6rem; margin-top: .6rem; flex-wrap: wrap; }
/* Zoom belongs to the expanded view; in the sidebar the controls would lie.
   `.pager .zgroup` is hidden globally, so showing it takes a rule of the
   same shape the report reader uses. */
.card.plates:not(.is-full) .plate-pager .zgroup { display: none; }
.card.plates.is-full .plate-pager .zgroup { display: inline-flex; gap: .25rem; }

body.plate-open { overflow: hidden; }
.card.plates.is-full {
  position: fixed; inset: 0; z-index: 1000; margin: 0; border-radius: 0;
  background: var(--wash, #f6f4f0); padding: 1rem;
  display: flex; flex-direction: column; overflow: hidden;
}
.card.plates.is-full h2 { flex: none; }
.card.plates.is-full figure.plate { flex: 1; display: flex;
                                    flex-direction: column; min-height: 0; }
.card.plates.is-full .plate-stage { flex: 1; height: auto; min-height: 0;
                                    border: 0; background: transparent;
                                    overflow: hidden; }
.card.plates.is-full figcaption { flex: none; max-width: 70ch;
                                  margin: .6rem auto 0; text-align: center; }
.card.plates.is-full .plate-pager { flex: none; }
/* Zoomed, the stage scrolls and the plate is dragged like a map. */
.card.plates.is-full.is-zoomed .plate-stage { overflow: auto; cursor: grab; }
.card.plates.is-full.is-dragging .plate-stage { cursor: grabbing; }
.card.plates.is-full.is-zoomed .plate-stage img { object-fit: none; height: auto; }

/* ------------------------------------- the CHRS inventory, by community area

   17,212 buildings read off the scanned survey, 77 pages of them. Two things
   this needs that no other page does: a plain-prose caveat block that is NOT
   the gapcard (that one is a grid, copy left and button right, and it split
   the note into columns), and a dense table that stays readable at 2,193
   rows without becoming a wall. */
.accuracy {
  margin: 22px 0 26px; padding: 16px 20px;
  background: #fdf6e9; border: 1px solid #ecdcb9; border-radius: var(--radius);
  font-size: 14.5px; line-height: 1.6;
}
.accuracy p { margin: 0 0 10px; }
.accuracy p:last-child { margin-bottom: 0; }

.tablewrap { overflow-x: auto; }          /* a phone scrolls the table, not the page */
table.inv {
  width: 100%; border-collapse: collapse;
  font-size: 13.5px; line-height: 1.45;
}
table.inv th {
  text-align: left; font-family: var(--sans); font-size: 12px;
  text-transform: uppercase; letter-spacing: .06em; color: var(--ink-faint);
  border-bottom: 2px solid var(--line); padding: 8px 10px 6px; white-space: nowrap;
}
table.inv td { padding: 5px 10px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
table.inv tbody tr:hover { background: #fbfaf8; }
table.inv td:first-child { font-weight: 600; white-space: nowrap; }
table.inv td:nth-child(2) { white-space: nowrap; }
/* A date that is not a year: the long-address bleed described in the note
   above. Marked where it sits so the reader can see which row to check
   against the scan, rather than being quietly blanked. */
table.inv td.odd { background: #fdf3f4; color: var(--ink-soft); }
@media (max-width: 700px) { table.inv { font-size: 12.5px; } table.inv td, table.inv th { padding: 5px 7px; } }

/* The building count beside each community area in the survey list: a second
   link, to that area's records, alongside the link to the scan. Muted and
   small because the name is the primary action. */
/* NO PILL. Adam, 2026-09-17, about this very list: "these are tough to read
   ... No pills, just lists". So the count is a plain number after the name,
   not a badge -- and the row is a flex pair because .calist-ul a is
   display:block, which otherwise puts the count on its own full-width line
   underneath and makes the list twice as long. */
.calist-ul li { display: flex; align-items: baseline; gap: 6px; }
.calist-ul li > a:first-child { flex: 1 1 auto; min-width: 0; }
.calist-ul .ca-n {
  flex: 0 0 auto; display: inline; padding: 3px 4px;
  font-size: 11.5px; font-weight: 400; font-variant-numeric: tabular-nums;
  color: var(--ink-faint); text-decoration: none;
}
.calist-ul .ca-n:hover { color: var(--navy); text-decoration: underline; }

/* The "read the scan / all areas" line under a survey page's opening
   paragraph: navigation, not prose, so it sits tighter than a paragraph. */
.alsoline { margin: -6px 0 18px; font-size: 14px; color: var(--ink-soft); }

/* "The survey recorded nothing here", in the inventory tables. Muted so a
   column of them reads as quiet rather than as a column of content. */
table.inv .nil { color: var(--ink-faint); opacity: .55; }

/* /press/ -- what other publications have said about this collection.
   Adam, 2026-10-24: "a nice way to create credibility. And to create a
   circular amplification loop."

   Each entry is one article, and the PUBLICATION'S OWN SENTENCE is the
   content -- so the quote is set like the quotations elsewhere on the site,
   with the blue rule, and the outlet line sits quiet above it. A rule
   between entries rather than a card each: a short page of cards reads as a
   thin brag, a reading list reads as a record. */
.prose .press-item { margin: 0 0 26px; padding-bottom: 22px;
  border-bottom: 1px solid var(--line); }
.prose .press-item:last-child { border-bottom: 0; padding-bottom: 0; }
.prose .press-item h2 { margin-bottom: 4px; }
.prose .press-meta { margin: 0 0 12px; font-size: 14px;
  color: var(--ink-soft); }
.prose .press-item blockquote { margin: 0 0 12px; padding-left: 14px;
  border-left: 3px solid var(--navy); color: var(--ink); }
.prose .press-item blockquote p { margin: 0; font-size: 17px;
  line-height: 1.55; }