/* ==========================================================================
   Chicago Historic Plaque Program
   Palette and type carried forward from the launch placeholder, which took
   them from preservationchicago.org: the Chicago flag blue and red.
   ========================================================================== */

:root {
  --brand-blue:       #164870;
  --brand-blue-dark:  #0f3252;
  --brand-blue-light: #1e5f96;
  --brand-red:        #F22626;
  --brand-red-dark:   #c71e1e;
  --brand-black:      #000000;
  --brand-white:      #FFFFFF;
  --brand-offwhite:   #F4F6F8;
  --brand-panel:      #EBF0F5;
  --brand-line:       #C8D4DE;
  --brand-muted:      #4A5568;
  /* Body copy. Pure black on a tinted panel buzzes slightly in Verdana,
     which is a heavy face; this is 15.1:1 against the off-white section
     background, still far above the 7:1 AAA floor, and reads softer over
     three paragraphs. The muted grey above is 6.9:1 - under AAA at the
     size the body copy now runs, which is why it left body text. */
  --brand-ink:        #1A202C;

  --bronze-hi:   #C9A355;
  --bronze-mid:  #8A6428;
  --bronze-lo:   #5C3E10;
  --bronze-dark: #3A2408;

  --font-header: "Roboto", Arial, sans-serif;
  --font-body:   Verdana, Geneva, sans-serif;
  /* The same serif Chicago Landmark Reports sets, so the two Preservation
     Chicago sites read as one family. Titles, the masthead and the logo
     wordmark only; the small uppercase labels, nav and buttons stay in Roboto,
     which is what that site does too. */
  --font-serif:  "Source Serif 4", Georgia, "Times New Roman", serif;
  /* Chicago Landmark Reports sets its masthead strapline in this. Read off
     that site 2026-09-24 rather than guessed from a screenshot. */
  --font-sans:   "Source Sans 3", "Open Sans", -apple-system, "Segoe UI", Roboto, sans-serif;
  --max-w: 800px;
  --max-w-wide: 1100px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--brand-offwhite);
  color: var(--brand-black);
  font-family: var(--font-body);
  font-size: 0.92rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: var(--brand-red); text-decoration: none; }
a:hover { color: var(--brand-red-dark); text-decoration: underline; }
img { max-width: 100%; height: auto; }

.skip-link {
  position: absolute; left: -9999px;
  background: var(--brand-blue); color: #fff; padding: 10px 16px; z-index: 100;
}
.skip-link:focus { left: 8px; top: 8px; }

/* -- Masthead ---------------------------------------------------------- */
.masthead {
  background: var(--brand-blue);
  border-bottom: 3px solid var(--brand-red);
}
.masthead-inner {
  max-width: var(--max-w-wide);
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.masthead-title {
  /* Matched to chicagolandmarkreports.org: Source Serif 4 at 600, barely tracked.
     700 with no tracking read heavier and tighter than CLR's mark. */
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.08rem;
  letter-spacing: 0.01em;
  color: #fff;
  line-height: 1.2;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 11px;
}
.masthead-logo { width: 41px; height: 33px; flex-shrink: 0; display: block; }
.masthead-words { display: block; }
.masthead-title:hover { color: #fff; text-decoration: none; }
.masthead-words span {
  /* CLR's strapline, exactly: Source Sans 3, 12px, 600, 0.03em, sentence case,
     and the logo's rim blue. The uppercase, wide-tracked, half-transparent
     version here was the thing that read as clumsy beside it. */
  display: block;
  font-family: var(--font-sans);
  font-weight: 600;
  /* Sized and tracked so the strapline's ink ends where the title's does - the
     final s of "Homes" under the final m of "Program". At CLR's 12px/0.03em it
     fell 38px short. Solved by measurement, not arithmetic: at 13px the
     tracking that lands it on 272px is 0.065em. BOTH VALUES ARE TIED TO THE
     PRESENT WORDING; change either line and the alignment goes. */
  font-size: 0.8125rem;
  letter-spacing: 0.065em;
  text-transform: none;
  color: #4db2ec;
  margin-top: 3px;
}
.nav { display: flex; gap: 22px; flex-wrap: wrap; }
.nav a {
  font-family: var(--font-header);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.78);
}
.nav a:hover, .nav a[aria-current="page"] { color: #fff; text-decoration: none; }
.nav a[aria-current="page"] { border-bottom: 2px solid var(--brand-red); padding-bottom: 2px; }

/* The page's own title, below the hero. The hero is identical on every page,
   so this is what tells a reader - and a search engine - which page they are
   on.

   It lives on the content's white and sits tight above it, with a rule
   underneath. A grey band here made a third background zone in a short stretch
   - photograph, grey, white - and the title belonged to none of them. */
.page-title { background: var(--brand-white); padding: 46px 32px 0; }
/* The section below carries 64px of its own top padding, which left the
   heading floating between the photograph and the content it heads. */
/* One gap on every page. Each page's first element brought its own margin, so
   the distance from the rule to the content ran 12px on About, 22px on the FAQ
   and 42px on Plaques. */
.page-title + .section { padding-top: 30px; }
.page-title + .section .inner > :first-child,
.page-title + .section .inner-wide > :first-child { margin-top: 0; }
/* About opens on a section label, whose own trailing hairline landed a second
   rule directly beneath the title's. One line is enough. */
.page-title + .section .inner > .section-label:first-child::after,
.page-title + .section .inner-wide > .section-label:first-child::after { display: none; }
.page-title .inner { max-width: var(--max-w); margin: 0 auto; }
.page-title .inner { padding-bottom: 18px; border-bottom: 2px solid var(--brand-blue); }
.page-title h1 {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(1.9rem, 4.4vw, 2.9rem);
  color: var(--brand-blue);
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin: 0;
}


/* -- Section shell ----------------------------------------------------- */
/* The two bands. Tried --brand-panel #EBF0F5 here for a stronger step;
   Adam, 2026-09-24: too much. The section keeps the body off-white, a
   1.08:1 step from the white band - enough to separate sections, gentle
   enough not to be read as a callout. */
.section { padding: 64px 32px; }
.section + .section { border-top: 1px solid var(--brand-line); }
.section.panel { background: var(--brand-white); }

.inner { max-width: var(--max-w); margin: 0 auto; }
.inner-wide { max-width: var(--max-w-wide); margin: 0 auto; }

.section-label {
  font-family: var(--font-header);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--brand-blue);
  margin: 0 0 12px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.section-label::after { content: ""; flex: 1; height: 1px; background: var(--brand-line); }

.section h2 {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 3vw, 2.05rem);
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 18px;
  color: var(--brand-blue);
}
.section h3 {
  font-family: var(--font-header);
  font-size: 1rem;
  font-weight: 700;
  color: var(--brand-blue);
  margin: 28px 0 10px;
}
/* Adam, 2026-09-24: body copy is near-black. The muted grey was set small,
   and small and grey together were harder to read than either alone. */
.section p { color: var(--brand-ink); margin: 0 0 14px; line-height: 1.7; }
.section p:last-child { margin-bottom: 0; }
.section p strong { color: var(--brand-black); font-weight: 700; }

/* -- Hero -------------------------------------------------------------- */
/* THE HERO'S HEIGHT COMES FROM THE WINDOW, NOT FROM THE COPY.
 *
 * The rule, and the reasoning, are Chicago Landmark Reports'. Its stylesheet
 * records the same mistake being made four times: `cover` re-crops whenever
 * its box changes shape, so while the hero was as tall as whatever was written
 * inside it, adding a line of copy moved the photograph. "I think the image
 * has shifted."
 *
 * At 44vw the hero holds a fixed shape at every window width, so the crop is
 * decided by the viewport and by nothing else. Editing the headline cannot
 * move the picture. The clamp's top end is set past a normal laptop rather
 * than at the first round number, because the guarantee only holds between
 * the two ends.
 *
 * Adapted rather than copied in one respect: that site paints the photograph
 * as a background on a pseudo-element. Ours stays a real <img> so it keeps its
 * alt text, and so check_images.py can still see it - the guard that makes it
 * impossible to publish a photograph nobody has permission for only inspects
 * <img> tags.
 */
.hero {
  position: relative;
  height: clamp(440px, 44vw, 660px);
  overflow: hidden;
  display: grid;
  place-items: center;
}
.hero img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  /* Per-image focal point, set from data/photos.json. Default matches the
     landmark reports default: a little above centre, because in a streetscape
     the sky is the expendable part and the rooflines are not. */
  object-position: var(--hero-focus, center 44%);
  /* NO FILTER. Adam, 2026-09-21: "no tinting photographs. Full color."
     The photograph is shown as taken - no brightness, no saturation, no
     colour cast. Legibility is the type's problem to solve, not the
     picture's. */
}
.hero-content { position: relative; z-index: 1; text-align: center; padding: 60px 20px; }
.hero-content h1,
.hero-wordmark {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(2rem, 5vw, 3.4rem);
  color: #fff;
  line-height: 1.08;
  /* Tight to the tagline below it. The tagline is one line now, not two, and
     at an even 20/30 it sat between the title and the buttons belonging to
     neither. Bound to the title it reads as a subtitle, which is what it is. */
  margin: 0 0 12px;
  letter-spacing: -0.01em;
  /* With no scrim at all, the type carries the whole burden of legibility.
     A tight dark halo plus a wider soft one: the first holds the letterforms
     against light detail, the second lifts them off busy areas without
     bleeding a visible box onto the photograph. */
  text-shadow:
    0 1px 2px rgba(4,18,32,.95),
    0 2px 10px rgba(4,18,32,.85),
    0 4px 30px rgba(4,18,32,.75);
}
.hero-content p {
  /* Serif, like the headline above it. The tagline is a full sentence again as
     of 2026-09-24 - 101 characters against the old phrase's 39 - so it is set
     materially smaller. At the old size it ran four lines and pushed the hero
     content 33px PAST the photo on a 375px screen. The hero's height comes
     from the viewport and never from the copy, so the type gives way. */
  font-family: var(--font-serif);
  font-size: clamp(1.02rem, 2.3vw, 1.5rem);
  font-weight: 400;
  letter-spacing: 0.005em;
  color: #fff;
  text-shadow:
    0 1px 2px rgba(4,18,32,.95),
    0 2px 10px rgba(4,18,32,.9),
    0 4px 24px rgba(4,18,32,.8);
  /* Measure, not a <br>, so it rewraps sensibly if the wording changes again.
     34ch set it in three lines on a wide screen; 52ch is the point it drops to
     two, and 56ch keeps it there with margin rather than sitting on the edge.
     Narrow screens still take more lines, which the hero has room for. */
  max-width: 56ch;
  margin: 0 auto;
  line-height: 1.32;
}
.hero-actions { margin-top: 38px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
/* Both hero pills sit over a photograph, so both let it through. Scoped to the
   hero on purpose: the same classes carry the form's submit button and the
   closing call to action, which sit on flat panels where a translucent fill
   would just look like a printing error. */
.hero-actions .btn-primary {
  background: rgba(242,38,38,0.82);
  border: 1px solid rgba(242,38,38,0.5);
  box-shadow: 0 2px 14px rgba(4,18,32,.3);
  text-shadow: 0 1px 2px rgba(90,6,6,.55);
}
.hero-actions .btn-primary:hover { background: rgba(199,30,30,0.94); }
/* White, not the body grey. On the grey it read as a band of its own between
   the photograph and the page; on white it belongs to the content. */
.photo-credit { background: var(--brand-white); text-align: center; font-size: 0.7rem;
  color: #666; padding: 10px 20px 4px; }
.photo-credit a { color: #666; text-decoration: underline; }

/* -- Page head (interior pages) ---------------------------------------- */
.page-head { background: var(--brand-blue); padding: 52px 32px 46px; }
.page-head .inner { max-width: var(--max-w); }
.page-head .section-label { color: rgba(255,255,255,0.5); }
.page-head .section-label::after { background: rgba(255,255,255,0.2); }
.page-head h1 {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(1.7rem, 4vw, 2.6rem);
  color: #fff;
  line-height: 1.12;
  margin: 0 0 14px;
}
.page-head p { color: rgba(255,255,255,0.72); margin: 0; max-width: 560px; line-height: 1.65; }

/* -- Buttons ----------------------------------------------------------- */
.btn-primary {
  background: var(--brand-red);
  color: var(--brand-white);
  font-family: var(--font-header);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border: none;
  padding: 13px 26px;
  border-radius: 2px;
  cursor: pointer;
  transition: background .15s;
  white-space: nowrap;
  display: inline-block;
}
.btn-primary:hover { background: var(--brand-red-dark); color: #fff; text-decoration: none; }
.btn-primary[disabled] { background: var(--brand-muted); cursor: progress; }
/* Solid, not ghosted. A transparent button worked while the hero was darkened;
   over a full-colour photograph its white text sat on sunlit brick and
   disappeared. The photograph is not the thing to change - the button is. */
.btn-ghost {
  /* Partially see-through, so the photograph reads through the button rather
     than being punched out by it. 78% is the point where the navy label still
     holds against the lightest thing the hero can put behind it - sunlit brick
     - without the button becoming a solid white slab. */
  background: rgba(255,255,255,0.78);
  color: var(--brand-blue);
  border: 1px solid rgba(255,255,255,0.85);
  box-shadow: 0 2px 14px rgba(4,18,32,.3);
  font-family: var(--font-header);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 12px 26px;
  border-radius: 2px;
  display: inline-block;
}
.btn-ghost:hover { background: rgba(255,255,255,0.93); color: var(--brand-blue-dark); text-decoration: none; }

/* -- Bronze plaque section --------------------------------------------- */
.plaque-section { background: var(--brand-blue); padding: 36px 32px 40px; text-align: center; }
.plaque-section .section-label { justify-content: center; color: rgba(255,255,255,0.5); margin-bottom: 8px; }
.plaque-section .section-label::after { display: none; }
.plaque-section h2 { color: var(--brand-white); margin-bottom: 6px; }
.plaque-section > .inner > p { color: rgba(255,255,255,0.7); max-width: 500px; margin: 0 auto 18px; }
.plaque-art { width: 400px; max-width: 100%; margin: 0 auto; }
.plaque-caption {
  margin-top: 14px;
  font-size: 0.75rem;
  color: rgba(255,255,255,0.38);
  font-style: italic;
}
.plaque-details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 24px;
  text-align: left;
}
.plaque-detail {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 2px;
  padding: 16px 18px;
}
.plaque-detail .label {
  font-family: var(--font-header);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  margin-bottom: 6px;
}
.plaque-detail .value { font-size: 0.82rem; color: rgba(255,255,255,0.8); line-height: 1.5; }

/* -- Process steps ----------------------------------------------------- */
.steps { margin-top: 32px; }
.step {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 0 16px;
  padding: 20px 0;
  border-bottom: 1px solid var(--brand-line);
}
.step:last-child { border-bottom: none; }
.step-num {
  font-family: var(--font-header);
  font-size: 1.3rem;
  font-weight: 900;
  color: var(--brand-line);
  line-height: 1;
  padding-top: 3px;
  text-align: right;
}
.step-body strong {
  display: block;
  font-family: var(--font-header);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--brand-blue);
  margin-bottom: 5px;
}
.step-body p { margin: 0; font-size: 0.87rem; }

/* -- Notice ------------------------------------------------------------ */
/* Stating the limits of a plaque is honest, not a warning. The panel, the red
   bar and the bold type made a plain fact look like an alert, so it now reads
   as an ordinary footnote set off by a hairline. */
.notice {
  margin-top: 28px;
  padding-top: 14px;
  border-top: 1px solid var(--brand-line);
  font-size: 0.84rem;
  color: var(--brand-muted);
  line-height: 1.6;
}
.notice strong { font-weight: 400; }

/* -- Stat row ---------------------------------------------------------- */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin-top: 30px;
}
.stat { background: var(--brand-white); border: 1px solid var(--brand-line); border-radius: 2px; padding: 18px 20px; }
.stat .num {
  font-family: var(--font-header);
  font-size: 1.8rem;
  font-weight: 900;
  color: var(--brand-blue);
  line-height: 1;
}
.stat .cap { font-size: 0.78rem; color: var(--brand-muted); margin-top: 8px; line-height: 1.45; }

/* -- FAQ --------------------------------------------------------------- */
.faq-list { margin-top: 10px; }
.faq-item { border-top: 1px solid var(--brand-line); }
.faq-item:last-child { border-bottom: 1px solid var(--brand-line); }
.faq-q {
  /* A heading now, not a button: the answers are always open, so there is
     nothing to click and nothing to announce as expandable. */
  margin: 0;
  padding: 18px 0 8px;
  font-family: var(--font-header);
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--brand-blue);
  line-height: 1.3;
}
/* Answers are always visible - Adam, 2026-09-24: clicking should not be
   necessary to read them. */
.faq-a { }
.faq-a p { padding-bottom: 18px; margin: 0; font-size: 0.87rem; color: var(--brand-muted); line-height: 1.65; }

/* -- Property directory ------------------------------------------------ */
.property-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
  margin-top: 30px;
}
.property-card {
  background: var(--brand-white);
  border: 1px solid var(--brand-line);
  border-radius: 2px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.property-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.property-card .body { padding: 16px 18px; }
.property-card h3 {
  font-family: var(--font-header);
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--brand-blue);
  margin: 0 0 6px;
}
.property-card p { margin: 0; font-size: 0.82rem; color: var(--brand-muted); line-height: 1.5; }
.property-meta {
  font-family: var(--font-header);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand-muted);
  margin-bottom: 8px;
}
.empty-state {
  background: var(--brand-panel);
  border: 1px dashed var(--brand-line);
  border-radius: 2px;
  padding: 36px 28px;
  text-align: center;
  margin-top: 30px;
}
.empty-state p { margin: 0 auto; max-width: 440px; }
.empty-state p + p { margin-top: 20px; }

/* -- Property page ----------------------------------------------------- */
.fact-table { width: 100%; border-collapse: collapse; margin-top: 24px; }
.fact-table th, .fact-table td {
  text-align: left;
  padding: 11px 14px;
  border-bottom: 1px solid var(--brand-line);
  font-size: 0.87rem;
  vertical-align: top;
}
.fact-table th {
  font-family: var(--font-header);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-blue);
  width: 34%;
}
.fact-table td { color: var(--brand-muted); }
.sources { margin-top: 28px; font-size: 0.8rem; color: var(--brand-muted); }
.sources ol { padding-left: 20px; margin: 8px 0 0; }
.sources li { margin-bottom: 6px; line-height: 1.5; }

/* -- Interest form ----------------------------------------------------- */
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 32px;
}
.form-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.form-field.full { grid-column: 1 / -1; }
.form-field label {
  font-family: var(--font-header);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brand-black);
}
.form-field label .opt {
  font-weight: 400;
  color: var(--brand-muted);
  letter-spacing: 0;
  text-transform: none;
  font-size: 0.72rem;
}
.form-field input,
.form-field textarea,
.form-field select {
  font-family: var(--font-body);
  font-size: 0.87rem;
  color: var(--brand-black);
  border: 1px solid var(--brand-line);
  border-radius: 2px;
  padding: 9px 12px;
  background: var(--brand-white);
  outline: none;
  width: 100%;
  max-width: 100%;
  transition: border-color .15s, box-shadow .15s;
}
.form-field input:focus,
.form-field textarea:focus { border-color: var(--brand-blue); box-shadow: 0 0 0 3px rgba(22,72,112,0.12); }
.form-field textarea { resize: vertical; min-height: 90px; }

.radio-group { display: flex; flex-direction: column; gap: 10px; margin-top: 2px; }
.radio-opt, .checkbox-opt { display: flex; align-items: flex-start; gap: 9px; cursor: pointer; }
.radio-opt input, .checkbox-opt input { width: auto; margin-top: 2px; accent-color: var(--brand-blue); }
.radio-opt span, .checkbox-opt span { font-size: 0.87rem; color: var(--brand-muted); line-height: 1.4; }

.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-submit {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--brand-line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.form-submit p { font-size: 0.8rem; color: var(--brand-muted); margin: 0; max-width: 420px; line-height: 1.5; }

.form-status { margin-top: 18px; font-size: 0.87rem; line-height: 1.6; }
.form-status.error { color: var(--brand-red-dark); font-weight: 700; }
.thanks {
  background: var(--brand-panel);
  border-left: 4px solid var(--brand-blue);
  padding: 22px 24px;
  border-radius: 2px;
  margin-top: 28px;
}
.thanks h3 { margin-top: 0; }

/* -- Footer -------------------------------------------------------------
   Built to the pattern of chicagolandmarkreports.org's footer, with its values
   read off that site on 2026-09-24 rather than eyeballed: the navy, the
   small-caps column heads in Source Sans 3, the pale-blue links, and the
   pill-shaped support button. The two Preservation Chicago sites should look
   like siblings. */
/* One face, one size, one colour across all three columns. They had been
   Verdana 13.44px, Source Sans 13.76px and Verdana 13.12px at 85% opacity -
   three columns, four differences, none of them meaning anything. */
.site-footer { background: #0f3352; color: #cfe4f2; padding: 26px 32px 28px;
  font-family: var(--font-sans); font-size: 0.84rem; }

.footer-top {
  /* Same three-column grid as the row below, so each mark sits over the columns
     it heads. */
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px 40px; align-items: center;
  padding-bottom: 16px; margin-bottom: 16px;
}
.footer-mark {
  grid-column: 1 / span 2; justify-self: start;
  display: flex; align-items: center; gap: 11px; text-decoration: none;
}
.footer-mark:hover { text-decoration: none; }
.footer-mark svg { width: 41px; height: 33px; flex-shrink: 0; }
.footer-words {
  display: block; text-align: left;
  font-family: var(--font-serif); font-weight: 600;
  font-size: 1.08rem; letter-spacing: 0.01em; color: #fff; line-height: 1.2;
}
.footer-words span {
  display: block; font-family: var(--font-sans); font-weight: 600;
  font-size: 0.75rem; letter-spacing: 0.03em; text-transform: none;
  color: #4db2ec; margin-top: 3px;
  /* The tagline is a 101-character sentence; this measure sets it in two
     lines rather than three. */
  max-width: 62ch;
}
.footer-pc { grid-column: 3; }
.footer-pc img { display: block; width: 230px; height: auto; }
.footer-pc:hover { opacity: 0.85; }

.footer-cols {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px 40px; align-items: start;
}
.site-footer h4 {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #6d8ba3;
  margin: 0 0 8px;
}
.site-footer p { margin: 0 0 8px; line-height: 1.55; }
.footer-cols > div > a {
  display: block; margin-bottom: 4px;
  font-family: var(--font-sans); font-size: 0.84rem;
  color: #cfe4f2; text-decoration: none;
}
.footer-cols > div > a:hover { color: #fff; text-decoration: underline; }
.footer-pc-block { margin-top: 0; }

.footer-cta { text-align: center; margin-top: 14px; }
.footer-btn {
  display: inline-block; margin-top: 2px;
  background: #174970; color: #cfe4f2;
  border: 1px solid #3d6b8f; border-radius: 100px;
  padding: 8px 30px; font-family: var(--font-sans); font-size: 0.86rem;
  text-decoration: none;
}
.footer-btn:hover { background: #1d5a89; color: #fff; text-decoration: none; }
.site-footer a { color: #cfe4f2; }
.site-footer a:hover { color: #fff; }


/* -- Responsive -------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto; } }

/* -- Photographs -------------------------------------------------------- */
/* Credit is rendered from data/photos.json, never typed into a page, so a
   photograph cannot appear on the site without its photographer's name. */
.photo { margin: 30px 0 34px; }
.photo img { width: 100%; display: block; border-radius: 2px; }
.photo figcaption {
  font-size: 0.78rem;
  color: var(--brand-muted);
  line-height: 1.5;
  padding-top: 8px;
}
.photo figcaption .cr {
  /* Part of the caption sentence, not a label under it: the credit reads as the
     last clause of what it credits. Set off by a gap and by italic rather than
     by its own line. */
  display: inline;
  margin-left: 0.9em;
  font-style: italic;
  color: var(--brand-blue);
}
.photo-credit .cr { font-weight: 700; }

/* -- Quotations --------------------------------------------------------- */
/* Rendered from data/quotes.json and checked against the saved article by
   scripts/check_quotes.py. Never typed into a page. */
/* Adam, 2026-09-24: the quotations were competing with the copy around them.
   They were set in the header face, a size larger than the body, half a weight
   heavier and in the brand blue, against body copy that is Verdana and muted -
   four differences at once, on a page that already carries several faces. The
   quotation now reads in the body face at the body's size and colour. What
   marks it as speech is the rule, the quotation marks and the attribution
   beneath, which is enough. */
/* Treatment C, Adam 2026-09-24, chosen from eight put side by side. A rule in
   the margin made the quotation look like an indented paragraph; the thing
   that marks it now is an oversized bronze quotation mark hung outside the
   text column, with the quotation itself in the serif. Bronze because that is
   what the plaques are cast in - the mark is program identity rather than
   decoration - and no new typeface enters the page. */
.quote {
  position: relative;
  margin: 34px 0 0;
  padding: 0 0 0 74px;
  border-left: 0;
}
.quote::before {
  content: "\201C";
  position: absolute;
  left: 0;
  top: -22px;
  font-family: var(--font-serif);
  font-size: 6.4rem;
  line-height: 1;
  /* Palette blue, a shade off the quotation text, so the mark belongs to
     the site rather than to the plaque. Bronze was the only thing on the
     page in that hue. Not the flag red: that is the action colour, on
     buttons, the nav underline and the masthead rule. */
  color: var(--brand-blue-light);
  /* Decoration: the quotation marks are already in the text for a screen
     reader, and this one would be read as a stray character. */
  speak: never;
}
.quote p {
  font-family: var(--font-serif);
  font-size: 1.22rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--brand-blue);
  margin: 0 0 14px;
}
.quote p:last-of-type { margin-bottom: 14px; }
.quote cite {
  display: block;
  font-style: normal;
  font-family: var(--font-header);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-black);
}
.quote cite .role {
  display: block;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: none;
  font-size: 0.78rem;
  color: var(--brand-muted);
  margin-top: 4px;
}
.quote cite .src {
  display: block;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: none;
  font-size: 0.74rem;
  color: var(--brand-muted);
  margin-top: 6px;
}
.plaque-section .quote::before { color: rgba(255,255,255,0.45); }
.plaque-section .quote p { color: #fff; }

.quote { margin-bottom: 26px; }
.section .quote + p { margin-top: 0; }

.photo.portrait { max-width: 460px; }
.photo.portrait img { border-radius: 2px; }

/* -- Photo row ---------------------------------------------------------- */
.photo-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-top: 30px;
}
.photo-row .photo { margin: 0; max-width: none; }
.photo-row .photo img { aspect-ratio: 3 / 4; object-fit: cover; }
.photo-row .photo figcaption { font-size: 0.76rem; }

/* -- Lede ---------------------------------------------------------------- */
/* The first paragraph of the introduction, set a little larger: a visitor who
   reads one sentence should get the whole idea from it. */
/* The lede was a larger, darker opening paragraph. Adam, 2026-09-24: the
   smaller body size reads better, so every paragraph in a section now sets
   the same way and the class is gone from the templates. Kept as a no-op
   rather than deleted, so an old page with the class on it does not suddenly
   set itself differently. */
.section p.lede { font-size: inherit; line-height: 1.7; color: var(--brand-ink); }

/* -- Quotation, joined -------------------------------------------------- */
/* One flowing quotation in italic, with a single-line attribution beneath it
   in the same face at one size. The earlier treatment broke a quotation into
   one paragraph per fragment, which read as two separate quotes, and stacked
   the name, the role and the source on three lines in three different
   treatments. */
/* Experiment, Adam 2026-09-21: the italic moved off the quotation and onto the
   attribution beneath it. The quotation is already marked as speech by its
   quotation marks and its size; the caption is the line that benefits from
   being set apart. */
.quote--joined p {
  font-style: normal;
  font-weight: 400;
  margin: 0 0 12px;
}
.quote--joined cite {
  display: block;
  /* Indented past the quotation, so the attribution reads as something hanging
     off the quote rather than as another line of it. */
  padding-left: 1.7em;
  font-style: italic;
  font-family: var(--font-header);
  font-size: 0.88rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--brand-muted);
}
.quote--joined cite b { font-weight: 700; }

/* Same colour as the rest of the citation, still a link. No underline: that
   was not asked for. */
.quote cite a { color: inherit; text-decoration: none; }

.section-footnote { margin-top: 14px; font-size: 0.84rem; }

/* The homes-requested counter, under the plaque grid. The number is the
   only large figure on the page, so it carries its own weight; the
   sentence around it stays at body size. */
.request-count {
  margin: 26px 0 0;
  color: var(--brand-ink);
  line-height: 1.7;
}
.request-count strong {
  font-family: var(--font-serif);
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--brand-blue);
  margin-right: 6px;
  /* Out of the line box: at 1.9rem the number was setting the leading for
     the whole paragraph and opening a gap between its two lines. */
  display: inline-block;
  line-height: 1;
  vertical-align: -0.12em;
}

/* Inside the empty box the counter leads, so it sits above the line it
   introduces rather than below a grid. */
/* In a centred box a big number ahead of running text leaves the second
   line hanging under it. The number takes its own line instead, which is
   what a stat wants anyway. */
.empty-state .request-count { max-width: 480px; margin: 0 auto; }
.empty-state .request-count strong {
  display: block;
  font-size: 2.6rem;
  margin: 0 0 2px;
  vertical-align: baseline;
}

/* -- Phones ------------------------------------------------------------ */
/* LAST in the file on purpose. This block used to sit two thirds of the way
   up, and 161 lines of ordinary rules came after it - so a mobile override
   with equal specificity silently lost to the desktop rule below it, which
   is what happened to .photo figcaption. Keep new mobile rules here. */
@media (max-width: 700px) {
  .plaque-details { grid-template-columns: minmax(0, 1fr); }
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .form-field.full { grid-column: 1; }
  .form-submit { flex-direction: column; align-items: flex-start; }
  .section { padding: 48px 20px; }
  .page-head { padding: 40px 20px 36px; }
  .masthead-inner { padding: 12px 20px; }
  .masthead-logo { width: 35px; height: 28px; }
  .footer-cols { grid-template-columns: minmax(0, 1fr); }
  .footer-top { grid-template-columns: minmax(0, 1fr); justify-items: start; }
  .footer-mark { grid-column: 1; }
  .footer-pc { grid-column: 1; }
  .footer-pc img { width: 210px; }
  .nav { gap: 6px; }

  /* Tap targets. The nav links were 23px tall and, for FAQ, 26px wide - well
     under the 44px both Apple and Google ask for, and this is the site's only
     navigation on a phone. Padding rather than a bigger font, so the masthead
     keeps its proportions. */
  .nav a { padding: 11px 10px; }
  .nav a[aria-current="page"] { padding-bottom: 9px; }

  /* Body text. Measured at 375px, these ran 11.8px to 13.9px. 11.8px was the
     footer disclaimer - the one paragraph with legal weight. Nothing a visitor
     reads should be under 14px on a phone. */
  .site-footer, .footer-legal { font-size: 0.88rem; }
  .plaque-caption { font-size: 0.88rem; }
  .plaque-detail .value { font-size: 0.9rem; }
  .notice { font-size: 0.9rem; }
  .step-body p { font-size: 0.9rem; }
  .photo figcaption { font-size: 0.88rem; }
  .faq-a p { font-size: 0.92rem; }
  .section-footnote { font-size: 0.9rem; }
  /* The small-caps eyebrow labels stay small by design, but 10.4px is tight
     on a phone. A modest bump; the treatment is unchanged. */
  .section-label { font-size: 0.72rem; }

  /* The hung quotation mark keeps its job at a third of the width, but
     74px of indent on a 375px screen is a fifth of the line. */
  .quote { padding-left: 46px; }
  .quote::before { font-size: 4.2rem; top: -12px; }
  .quote p { font-size: 1.08rem; }
}

/* -- Very narrow phones -------------------------------------------------- */
/* 320px is the floor that still matters - an SE, an older Android. With the
   long tagline the hero content came to within 3px of the photo's bottom edge
   there, which is not clearance, it is luck. */
@media (max-width: 380px) {
  .hero-content p { font-size: 0.95rem; }
  .hero-content h1, .hero-wordmark { font-size: clamp(1.6rem, 8vw, 2rem); }
  .hero-actions { gap: 10px; }
}

/* -- Touch devices ------------------------------------------------------ */
/* Keyed to the POINTER, not the width. The phone block stops at 700px, but an
   iPad in portrait is 768px and Safari zooms there too - a width-based fix
   would have left every tablet doing it. */
@media (hover: none) and (pointer: coarse) {
  /* iOS Safari zooms the whole page when a focused field is under 16px, and
     then leaves it zoomed. The fields were 13.9px and 13.3px, so every tap
     into the form threw the layout sideways. 16px exactly - not larger,
     which would look out of scale beside the labels. */
  .form-field input,
  .form-field textarea,
  .form-field select { font-size: 16px; padding: 12px; }

  /* A radio row was 335x19: wide, but nowhere near the 44px of height Apple
     and Google both ask for, and a mis-tap picks the wrong mounting option.
     The label is the target, so the padding goes on it. */
  .radio-opt, .checkbox-opt { padding: 11px 0; align-items: center; }
  .radio-opt input, .checkbox-opt input { width: 20px; height: 20px; margin-top: 0; }
  .radio-opt span, .checkbox-opt span { font-size: 0.95rem; }
}