/* ==========================================================================
   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;

  --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;
  --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 {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 1.08rem;
  letter-spacing: 0;
  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 {
  display: block;
  font-weight: 400;
  font-size: 0.66rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  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; }

/* -- Section shell ----------------------------------------------------- */
.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;
}
.section p { color: var(--brand-muted); 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 {
  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. It is a phrase now rather than a
     sentence, so it is set larger and tracked slightly open - at four words it
     reads as a second line of the title, not as body copy. */
  font-family: var(--font-serif);
  font-size: clamp(1.45rem, 3.1vw, 2.05rem);
  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);
  /* Two lines, like the headline above it. Set by measure rather than by a
     <br>, so it still breaks sensibly if the wording changes: "Celebrating
     Spectacular" measures 288px and adding "Vernacular" takes it to 428px, so
     anything between the two breaks after "Spectacular". 26ch sits in the
     middle and scales with the clamped font size, which keeps the break in the
     same place at every width. */
  max-width: 26ch;
  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); }
.photo-credit { text-align: center; font-size: 0.7rem; color: #666; padding: 6px 20px; }
.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 ------------------------------------------------------------ */
.notice {
  background: var(--brand-panel);
  border: 1px solid var(--brand-line);
  border-left: 4px solid var(--brand-blue);
  padding: 16px 20px;
  border-radius: 2px;
  margin-top: 28px;
  font-size: 0.84rem;
  color: var(--brand-muted);
  line-height: 1.6;
}
.notice strong { color: var(--brand-black); }
.notice.alert { border-left-color: var(--brand-red); }

/* -- 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: 32px; }
.faq-item { border-top: 1px solid var(--brand-line); }
.faq-item:last-child { border-bottom: 1px solid var(--brand-line); }
.faq-h { margin: 0; font: inherit; }
.faq-q {
  width: 100%;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  padding: 18px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  font-family: var(--font-header);
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--brand-blue);
  line-height: 1.3;
}
.faq-q svg { flex-shrink: 0; width: 16px; height: 16px; color: var(--brand-red); transition: transform .2s; }
.faq-item.open .faq-q svg { transform: rotate(45deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .25s ease; }
.faq-item.open .faq-a { max-height: 600px; }
.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; }

/* -- 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 ------------------------------------------------------------ */
.site-footer { background: var(--brand-blue-dark); color: rgba(255,255,255,0.7); padding: 44px 32px 34px; font-size: 0.82rem; }
.site-footer .inner-wide { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px 40px; align-items: start; }
.site-footer h4 {
  font-family: var(--font-header);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  margin: 0 0 10px;
}
.site-footer p { margin: 0 0 8px; line-height: 1.6; }
.site-footer a { color: #fff; text-decoration: underline; }
.site-footer a:hover { color: var(--brand-red); }
.footer-legal {
  max-width: var(--max-w-wide);
  margin: 30px auto 0;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,0.14);
  font-size: 0.74rem;
  color: rgba(255,255,255,0.5);
  line-height: 1.6;
}

/* -- Responsive -------------------------------------------------------- */
@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; }
  .site-footer .inner-wide { grid-template-columns: minmax(0, 1fr); }
  .nav { gap: 16px; }
}
@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. */
.quote {
  margin: 34px 0 0;
  padding: 0 0 0 22px;
  border-left: 3px solid var(--brand-red);
}
.quote p {
  font-family: var(--font-header);
  font-size: clamp(1.02rem, 1.9vw, 1.2rem);
  font-weight: 500;
  line-height: 1.5;
  color: var(--brand-blue);
  margin: 0 0 12px;
}
.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 { border-left-color: rgba(255,255,255,0.35); }
.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. */
.section p.lede {
  font-size: 1.04rem;
  line-height: 1.68;
  color: var(--brand-black);
}

/* -- 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; }