@charset "utf-8";
/* ==========================================================================
   NCModernist / USModernist — 2026 design system
   White cube, American Gothic type, 12-column grid, hairline modules.
   ========================================================================== */

/* ---------- 1. Tokens ---------------------------------------------------- */

:root {
  /* Framework */
  --white: #ffffff;
  --black: #000000;
  --fog: #f2f2f2;
  --rule: #000000;          /* module hairlines */
  --rule-soft: #d6d6d6;     /* interior dividers */

  /* Accents — each one has a job. Never decorative. */
  --accent: #f03e24;        /* primary action, current state */
  --signal: #f2cb14;        /* endangered / at risk */
  --archive: #009eb3;       /* library, media, radio */
  --tour: #f7941d;          /* tours, parties, events */

  /* Type */
  --sans: "Libre Franklin", "Franklin Gothic", "Helvetica Neue", Arial, sans-serif;
  --mono: "Roboto Mono", "SFMono-Regular", Menlo, Consolas, monospace;

  /* 14pt is the floor everywhere on the page. 14pt = 18.67px. */
  --t-display: clamp(2.5rem, 7.5vw, 6.75rem);
  --t-h1: clamp(1.875rem, 4.2vw, 3.375rem);
  --t-h2: clamp(1.5rem, 2.4vw, 2.125rem);
  --t-h3: 20pt;
  --t-h4: 16pt;
  --t-body: 14pt;
  --t-small: 14pt;
  --t-meta: 14pt;

  /* Spacing — everything is a multiple of 12 */
  --u: 12px;
  --u2: 24px;
  --u3: 36px;
  --u4: 48px;
  --u6: 72px;
  --u8: 96px;
  --u12: 144px;

  --maxw: 1440px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------- 2. Reset ----------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--white);
  color: var(--black);
  font-family: var(--sans);
  font-size: var(--t-body);
  font-weight: 400;
  line-height: 1.5;
  font-feature-settings: "kern" 1, "zero" 0;
  font-variant-numeric: lining-nums tabular-nums;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; border: 0; display: block; }
iframe { max-width: 100%; border: 0; }
hr { border: 0; border-top: 1px solid var(--rule); margin: var(--u4) 0; }

a { color: var(--black); text-decoration: underline; text-underline-offset: 3px;
    text-decoration-thickness: 1px; transition: color .18s var(--ease); }
a:hover { color: var(--accent); }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--black); color: var(--white); padding: var(--u) var(--u2);
  font: 700 var(--t-small)/1 var(--sans); text-transform: uppercase;
  letter-spacing: .1em; text-decoration: none;
}
.skip:focus { left: 0; }

/* ---------- 3. Typography ------------------------------------------------ */

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--u2);
  font-weight: 800;
  letter-spacing: -0.02em;   /* tight tracking */
  line-height: 1.04;         /* tight leading */
  text-wrap: balance;
}

h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); letter-spacing: -0.015em; }
h3 { font-size: var(--t-h3); letter-spacing: -0.01em; line-height: 1.15; }
h4, h5 { font-size: var(--t-h4); letter-spacing: 0; line-height: 1.25; }

p { margin: 0 0 var(--u2); max-width: 68ch; }

.display {
  font-size: var(--t-display);
  font-weight: 900;
  letter-spacing: -0.035em;
  line-height: 0.92;
  margin: 0 0 var(--u2);
}

.lede { font-size: 17pt; line-height: 1.4; font-weight: 400; max-width: 56ch; }

/* Longer full names need a smaller display size to hold the column.
   "(Vinny) Petrarca AIA" measures 7.76 em in Neutra Text Bold, which is the
   binding line at roughly 85px in a six-column measure. */
.display--long { font-size: clamp(1.875rem, 5.2vw, 5rem); }


/* Birth and death years, hung directly beneath the surname. The negative
   margin closes the headline's own bottom gap so the dates sit tight to the
   name rather than reading as the first line of body copy. */
.lifespan {
  display: block;
  margin: calc(var(--u2) * -1 + 8px) 0 var(--u2);
  font-size: 15pt;
  font-weight: 400;
  letter-spacing: .02em;
}

/* Post-nominal credential set after the surname, scaled back so it reads as
   a qualification rather than part of the name. */
.display__suffix {
  font-size: 0.34em;
  font-weight: 700;
  letter-spacing: .06em;
  vertical-align: baseline;
  margin-left: 0.22em;
}


/* Eyebrow: a real label, not decoration — it names the record type */
.eyebrow {
  display: inline-block;
  margin: 0 0 var(--u);
  font-family: var(--mono);
  font-size: var(--t-meta);
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.eyebrow--archive { color: var(--archive); }
.eyebrow--tour { color: var(--tour); }
.eyebrow--alert { color: var(--black); background: var(--signal); padding: 3px 8px; }

/* ---------- 4. Layout ---------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--u3);
}

.g12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--u2);
}

.col-3  { grid-column: span 3; }
.col-4  { grid-column: span 4; }
.col-5  { grid-column: span 5; }
.col-6  { grid-column: span 6; }
.col-7  { grid-column: span 7; }
.col-8  { grid-column: span 8; }
.col-9  { grid-column: span 9; }
.col-12 { grid-column: span 12; }

.bleed { width: 100%; margin: 0; }   /* edge-to-edge imagery */

/* ---------- 6. Header + navigation --------------------------------------- */

.masthead {
  position: sticky; top: 0; z-index: 80;
  background: var(--black);
  color: var(--white);
  border-bottom: 1px solid var(--black);
}
.masthead a { color: var(--white); }

.masthead__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--u2);
  padding-top: var(--u2);
  padding-bottom: var(--u2);
}

.brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-decoration: none;
}
.brand img { width: 309px; height: auto; }
.brand__tag {
  font-size: calc(var(--t-meta) * 1.5);
  font-family: var(--sans);
  font-weight: 400;
  color: var(--white);
  letter-spacing: .01em;
  text-align: center;
  white-space: nowrap;
  text-decoration: none;
}

.nav { display: flex; align-items: center; gap: var(--u2); }

.nav__toggle,
.printbtn,
.donate {
  display: inline-block;
  appearance: none;
  background: var(--accent);
  color: var(--white);
  border: 0; border-radius: 0;
  padding: 12px var(--u2);
  font-family: var(--sans);
  font-size: var(--t-small);
  font-weight: 800;
  line-height: 1;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}
.nav__toggle:hover,
.printbtn:hover,
.donate:hover { background: var(--white); color: var(--black); }

/* while the print button is fetching photographs */
.printbtn[disabled] { opacity: .6; cursor: progress; }
.printbtn[disabled]:hover { background: var(--accent); color: var(--white); }

.nav__panel {
  position: absolute;
  top: 100%; right: var(--u3);
  width: min(420px, calc(100vw - var(--u4)));
  background: var(--white);
  border: 1px solid var(--rule);
  border-top: 0;
  display: none;
}
.nav__panel[data-open="true"] { display: block; }

.nav__list { list-style: none; margin: 0; padding: 0; }
.nav__list li + li { border-top: 1px solid var(--rule-soft); }
.nav__panel,
.masthead .nav__panel a { background: var(--white); color: var(--black); }

.nav__list a {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--u2);
  padding: 14px var(--u2);
  text-decoration: none;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.masthead .nav__panel a:hover { color: var(--accent); background: var(--white); }
.nav__list a span {
  font-family: var(--mono); font-size: var(--t-meta);
  letter-spacing: .14em; text-transform: uppercase; opacity: .55;
}



/* Site notice — sits directly beneath the masthead on every page.
   Tinted block rather than a bordered card, so it reads as a standing
   condition of the archive rather than a piece of page content. */

/* Sits inside the black masthead, below the logo and nav row. */
.notice {
  background: transparent;
  color: var(--white);
  border-top: 1px solid rgba(255, 255, 255, 0.25);
}
.notice p { color: var(--white); }
.notice p {
  max-width: none;      /* overrides the 68ch measure on <p> */
  width: 100%;
  margin: 0 auto;
  padding: var(--u) var(--u2);
  text-align: center;
  font-family: var(--sans);
  font-weight: 400;
  line-height: 1.5;
  text-transform: none;
  letter-spacing: 0;
  /* Holds the sentence on one line. It measures 59.03 em in Neutra Text,
     so it would break at 1.69vw; 1.60vw leaves a safety margin. Below
     620px it wraps rather than shrink to an unreadable size on a phone. */
  /* 14pt fixed. The sentence measures 59.03 em in Neutra Text, so one line
     needs about 1150px; below that it wraps rather than shrink under 14pt. */
  white-space: nowrap;
  font-size: 14pt;
}

@media (max-width: 1180px) {
  .notice p { white-space: normal; }
}

/* Keyboard tip: a different kind of statement from the trespassing notice,
   so it sits on its own line and steps back. */
.notice__tip {
  display: block;
  margin-top: 4px;
  /* Inherits the size and colour of the sentence above it. */
}

@media (max-width: 620px) {
  .notice p { white-space: normal; }
}

/* Header and footer: nothing below 14pt, whatever the tokens do later. */

.masthead,
.masthead a,
.nav__list a,
.foot,
.foot a,
.foot p,
.foot h5,
.foot__legal,
.notice p { font-size: var(--t-body); }

.brand__tag { font-size: 21pt; }

.nav__toggle,
.printbtn,
.donate { font-size: 14pt; }

/* ---------- 7. Modules --------------------------------------------------- */

/* Hairline-bound container — makes dense information scannable */
.frame { border: 1px solid var(--rule); padding: var(--u2); }
.frame--flush { padding: 0; }
.frame__head {
  border-bottom: 1px solid var(--rule);
  margin: calc(var(--u2) * -1) calc(var(--u2) * -1) var(--u2);
  padding: 10px var(--u2);
  font-family: var(--mono); font-size: var(--t-meta);
  letter-spacing: .16em; text-transform: uppercase;
}

/* Catalog metadata — tiny, ultra-neat, against big imagery */
.meta { border-top: 1px solid var(--rule); margin: 0; }
.meta div {
  display: grid;
  grid-template-columns: 11ch 1fr;
  gap: var(--u2);
  padding: 9px 0;
  border-bottom: 1px solid var(--rule-soft);
  font-family: var(--mono);
  font-size: var(--t-small);
  line-height: 1.35;
}
.meta dt {
  font-size: var(--t-meta); letter-spacing: .14em;
  text-transform: uppercase; opacity: .55; margin: 0;
}
.meta dd { margin: 0; }

/* Status chips carry meaning, matched to the accent roles */
.chip {
  display: inline-block; padding: 3px 8px;
  font-family: var(--mono); font-size: var(--t-meta);
  letter-spacing: .14em; text-transform: uppercase;
}
.chip--ok { background: var(--black); color: var(--white); }
.chip--no { border: 1px solid var(--rule); background: var(--white); color: var(--black); }
.chip--risk { background: var(--signal); color: var(--black); }
.chip--gone { background: var(--accent); color: var(--white); }
.chip--unknown { border: 1px solid var(--rule); }

/* Plate: cropped image with its label hung underneath */
.plate figcaption {
  margin-top: 10px;
  font-family: var(--mono);
  font-size: var(--t-meta);
  letter-spacing: .1em;
  line-height: 1.5;
  text-transform: uppercase;
}

/* Section rule with a hung label */
.section { padding: var(--u6) 0; }
.section--tight { padding: var(--u4) 0; }
.section__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--u2);
  border-top: 2px solid var(--black);
  padding-top: 10px;
  margin-bottom: var(--u3);
}
.section__head h2 { margin: 0; }
.section__count {
  font-family: var(--mono); font-size: var(--t-meta);
  letter-spacing: .16em; text-transform: uppercase;
}

/* Index rows — for architect and house lists */
.index { border-top: 1px solid var(--rule); }
.index a {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--u2);
  align-items: baseline;
  padding: 14px 0;
  border-bottom: 1px solid var(--rule-soft);
  text-decoration: none;
}
.index a:hover { background: var(--fog); padding-left: 10px; padding-right: 10px; }
.index strong { font-weight: 700; letter-spacing: -0.01em; }
.index span {
  font-family: var(--mono); font-size: var(--t-meta);
  letter-spacing: .12em; text-transform: uppercase; opacity: .6;
}

/* ---------- 8. Footer ---------------------------------------------------- */

.foot {
  background: var(--black);
  color: var(--white);
  padding: var(--u6) 0 var(--u3);
  margin-top: var(--u8);
}
.foot a { color: var(--white); }
.foot a:hover { color: var(--signal); }
.foot h5 {
  font-family: var(--mono); font-size: var(--t-body); font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase;
  padding-bottom: 10px; margin-bottom: var(--u2);
  border-bottom: 1px solid rgba(255,255,255,.35);
}
.foot p { font-size: var(--t-body); line-height: 1.55; max-width: 40ch; }
.foot__social { display: flex; gap: var(--u2); margin-top: var(--u2); }
.foot__social a { font-size: 1.5rem; text-decoration: none; }
.foot__legal {
  grid-column: span 12;
  border-top: 1px solid rgba(255,255,255,.35);
  margin-top: var(--u4); padding-top: var(--u2);
  font-family: var(--mono); font-size: var(--t-body);
  letter-spacing: .1em; text-transform: uppercase; opacity: .7;
}

.totop {
  position: fixed; right: var(--u2); bottom: var(--u2); z-index: 70;
  width: 44px; height: 44px;
  background: var(--black); color: var(--white);
  border: 0; cursor: pointer;
  font: 700 1rem/1 var(--sans);
  opacity: 0; pointer-events: none;
  transition: opacity .2s var(--ease);
}
.totop[data-show="true"] { opacity: 1; pointer-events: auto; }
.totop:hover { background: var(--accent); }

/* ---------- 9. Motion ---------------------------------------------------- */

.rise { opacity: 0; transform: translateY(20px); }
.rise[data-in="true"] {
  opacity: 1; transform: none;
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  .rise { opacity: 1 !important; transform: none !important; }
  html { scroll-behavior: auto; }
}

/* ---------- 10. Un-converted pages ---------------------------------------
   Pages re-skinned onto the new chrome but whose body is still legacy markup.
   The content area is quarantined so it renders as it did before: the page's
   own .auto-styleNN classes, <font> tags, and centring keep working, and the
   new global typography is held back at the container edge.

   Converted pages do NOT use this class.
   ------------------------------------------------------------------------- */

.editable--legacy {
  font-family: Montserrat, "Open Sans", Helvetica, Arial, sans-serif;
  font-size: 14pt;
  line-height: 1.5;
  color: #000;
  letter-spacing: normal;
}

.editable--legacy p {
  max-width: none;
  margin: 0 0 1em;
  font-size: inherit;
  line-height: inherit;
}

.editable--legacy h1 { font: 50px Montserrat, sans-serif; color: #222;
  margin: .8em 0; letter-spacing: -0.7px; font-weight: 400; line-height: 1.2; }
.editable--legacy h2 { font: 34px Montserrat, sans-serif; color: #222;
  margin: 20px 0; letter-spacing: -0.7px; font-weight: 500; line-height: 1.2; }
.editable--legacy h3, .editable--legacy h4,
.editable--legacy h5, .editable--legacy h6 {
  font-family: Montserrat, sans-serif; color: #222; font-weight: 500;
  letter-spacing: normal; line-height: 1.25; margin: 16px 0; }

/* images sat inline and centred on the old pages */
.editable--legacy img { display: inline; max-width: 100%; height: auto; margin: 0; }
.editable--legacy center,
.editable--legacy .center,
.editable--legacy [align="center"] { text-align: center; }

.editable--legacy a { color: #000; font-weight: bold; text-decoration: none; }
.editable--legacy a:hover { color: var(--accent); }

.editable--legacy hr { border: 0; border-top: 1px solid #ccc; margin: 24px 0; }
.editable--legacy table { border-collapse: collapse; }
.editable--legacy td, .editable--legacy th { border: 0; padding: 0; }

/* ---------- 11. Responsive ------------------------------------------------ */

@media (max-width: 900px) {
  .wrap { padding: 0 var(--u2); }
  .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9 { grid-column: span 12; }
  .brand img { width: 253px; }
  .nav__panel { right: var(--u2); }
  .section { padding: var(--u4) 0; }
  .foot { padding-top: var(--u4); margin-top: var(--u6); }
}

@media (max-width: 900px) {
  /* The architect's name carries an inline font-size in px, set for a 660px
     desktop column, so it has to be overridden here. The widest headline line
     in the archive measures 7.57 em in Neutra Text Bold, which caps it at
     about 12.2vw on a phone; 11vw leaves margin. !important is required
     because the inline style would otherwise win. */
  h1.display {
    font-size: 11vw !important;
    white-space: normal !important;
    line-height: 1.02;
  }
  .display__suffix { font-size: 0.36em; }
}

@media (max-width: 620px) {
  /* Phone: an eighth of an inch of white space at the page edge. */
  .wrap { padding: 0 0.125in; }
  h1.display { font-size: 10.5vw !important; }
  .notice p { padding: var(--u) 0.125in; }
  .portraits img { height: 150px; width: auto; flex: 0 0 auto; }
}

@media (max-width: 560px) {
  .brand__tag { display: none; }
  .meta div { grid-template-columns: 1fr; gap: 2px; }
}

/* ---------- 11b. Lightbox ------------------------------------------------
   Clicking a photograph opens it at its own native size. The <img> on the
   page is a scaled-down copy, so the lightbox must load the SAME file fresh
   and let the browser draw it at full resolution rather than upscaling the
   thumbnail — that is what makes a naive lightbox look blurry.
   ------------------------------------------------------------------------- */

.record__plates img,
.portraits img,
.editable--legacy img { cursor: zoom-in; }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, .93);
  padding: var(--u3);
  cursor: zoom-out;
}
.lightbox[data-open="true"] { display: flex; }

.lightbox img {
  /* never scaled beyond its own pixels, so it can never be soft */
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  image-rendering: auto;
  background: #000;
}

.lightbox__bar {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: var(--u2) var(--u3);
  color: var(--white);
  font-family: var(--sans);
  font-size: var(--t-small);
  display: flex;
  gap: var(--u2);
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.lightbox__bar a { color: var(--white); pointer-events: auto; }

.lightbox__close,
.lightbox__nav {
  position: absolute;
  background: transparent;
  border: 1px solid rgba(255,255,255,.5);
  color: var(--white);
  font: 700 var(--t-small)/1 var(--sans);
  padding: 12px 16px;
  cursor: pointer;
}
.lightbox__close { top: var(--u2); right: var(--u2); }
.lightbox__nav--prev { left: var(--u2); top: 50%; transform: translateY(-50%); }
.lightbox__nav--next { right: var(--u2); top: 50%; transform: translateY(-50%); }
.lightbox__close:hover, .lightbox__nav:hover { background: var(--white); color: var(--black); }

@media (max-width: 620px) {
  .lightbox { padding: var(--u); }
  .lightbox__nav { padding: 10px 12px; }
}

/* ---------- 12. Print ----------------------------------------------------
   The page prints as it appears on screen: black masthead, colour, layout
   intact. Only the controls themselves are dropped.
   ------------------------------------------------------------------------- */

@media print {
  /* Browsers strip backgrounds by default; this keeps the black band, the
     greyscale-unbuilt treatment and the accent colours. */
  *, *::before, *::after {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  @page { margin: 12mm; }

  html, body { background: var(--white); }
  body { font-size: 14pt; }

  /* sticky positioning has no meaning on paper and misplaces elements */
  .masthead, .record__meta { position: static !important; top: auto !important; }
  .record__meta { margin-top: 0; padding-top: 0; }

  /* the controls go; everything else stays */
  .printbtn, .nav__toggle, .donate, .nav__panel, .totop, .skip { display: none !important; }

  /* an image that failed to load prints as an empty frame; drop it */
  img:not([src]) { display: none !important; }

  /* keep a record's metadata together, and never split a photograph */
  .record { break-inside: auto; page-break-inside: auto; }
  .record__meta { break-inside: avoid; page-break-inside: avoid; }
  .record__plates img, figure, .portraits img {
    break-inside: avoid; page-break-inside: avoid;
  }
  h1, h2, h3, .record__title, .record__year {
    break-after: avoid; page-break-after: avoid;
  }

  /* the notice and footer are part of the page, so they print too */
  .notice, .foot { display: block; }

  /* links keep their on-screen appearance rather than printing their URLs */
  a[href]::after { content: none !important; }
}

/* Prose that sits between records — documentation projects, download
   offers, editorial notes carried over from the legacy pages. */
.aside {
  border: 1px solid var(--rule);
  border-left: 4px solid var(--accent);
  padding: var(--u2) var(--u3);
  margin: var(--u4) 0;
  max-width: 80ch;
  line-height: 1.55;
}
.aside p { margin: 0 0 var(--u); max-width: none; }
.aside p:last-child { margin-bottom: 0; }

/* ---------- 13. Catalog records (architect pages) -------------------------
   The work list on an architect page is a real chronology, so the year is
   load-bearing information and gets typographic weight. Metadata hangs left
   and sticks while the plates scroll past it.
   ------------------------------------------------------------------------- */

.record {
  scroll-margin-top: calc(var(--masthead-h, 120px) + var(--u2));
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--u2);
  border-top: 1px solid var(--rule);
  padding: var(--u4) 0;
}

.record__meta { grid-column: span 4; }

@media (min-width: 901px) {
  /* The metadata column travels with the photographs, then waits just under
     the masthead — level with the rule above its own year — until the next
     record pushes it on. --masthead-h is measured at runtime, so the offset
     stays correct however tall the bar is. */
  .record__meta {
    position: sticky;
    top: calc(var(--masthead-h, 120px) + var(--u2));
    align-self: start;
    padding-top: var(--u);
    margin-top: calc(var(--u) * -1);
  }
}

.record__year {
  display: block;
  font-family: var(--mono);
  font-size: 2.25rem;
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: var(--u);
}

.record__title {
  font-size: var(--t-h3);
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.15;
  margin: 0 0 10px;
}

.record__alias {
  display: block;
  font-family: var(--mono);
  font-size: calc(var(--t-meta) * 1.2);
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .6;
  margin-top: 6px;
  font-weight: 700;
}

/* Addresses and notes read at the same size as the biography. */
.record__note { font-size: inherit; line-height: 1.5; max-width: 40ch; margin: var(--u) 0 0; }
.record__where { font-size: inherit; line-height: 1.45; margin: 0 0 var(--u); }
.record__sources { font-size: inherit; line-height: 1.5; margin: var(--u4) 0 0;
  padding-top: var(--u2); border-top: 1px solid var(--rule); max-width: 80ch; }

.record__plates {
  grid-column: span 8;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--u2);
}
.record__plates img {
  height: auto;
  width: auto;
  max-height: 400px;
  max-width: 100%;
  border: 1px solid var(--rule-soft);
}

/* Placeholder graphic for records with no photograph on file. */
.record__plates--nophoto img { border: 0; max-height: 50px; opacity: .55; }

.record--unbuilt .record__plates img { filter: grayscale(1); transition: filter .3s var(--ease); }
.record--unbuilt .record__plates img:hover { filter: none; }

@media (max-width: 900px) {
  .record { padding: var(--u3) 0; }
  .record__meta, .record__plates { grid-column: span 12; }
  .record__plates img { max-height: 320px; }
}

/* Video embeds carried over from the legacy pages. Fluid, 16:9, so they fit
   the biography column at any width instead of the old fixed 640x360. */
.video {
  position: relative;
  width: 100%;
  max-width: 640px;
  aspect-ratio: 16 / 9;
  margin: var(--u2) 0 0;
  border: 1px solid var(--rule);
  background: var(--black);
}
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

@supports not (aspect-ratio: 16 / 9) {
  .video { height: 0; padding-bottom: 56.25%; }
}

/* Portraits of the architect, set beside the biography */
.portraits {
  display: flex;
  flex-wrap: wrap;
  gap: var(--u2);
  align-items: flex-start;
  /* Sits in the same grid row as the headline, so the tops align. The nudge
     is the h1's half-leading (0.04em in Neutra Text Bold). */
  margin-top: clamp(1.6px, 0.3vw, 4.3px);
}
/* One uniform height for every portrait, whatever its aspect ratio. 240px is
   the largest that still packs four photos into two rows filling 549 of the
   556px column; 260px breaks them to three.

   flex-shrink must be off: portraits are flex items, and a flex item shrinks
   horizontally when the row is tight while its fixed height stays put — which
   squashes the picture. object-fit is the belt to that braces: even if the
   width is ever clamped, the image stays in proportion. */
.portraits img {
  border: 1px solid var(--rule);
  height: 240px;
  width: auto;
  max-width: 100%;
  flex: 0 0 auto;
  object-fit: contain;
}

@media (max-width: 900px) {
  .portraits { margin-top: var(--u2); }
}