@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,
  .portraits:has(img:nth-child(3)) img,
  .portraits:has(img:nth-child(5)) img,
  .portraits:has(img:nth-child(7)) img { height: 130px; }
}

@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__pics { display: flex; flex-wrap: wrap; gap: var(--u2); margin-top: var(--u2); }
.aside__pics img { max-height: 260px; width: auto; flex: 0 0 auto;
  border: 1px solid var(--rule-soft); object-fit: contain; }
.aside p:last-child { margin-bottom: 0; }

/* ---------- 12b. General pages (main.dwt) --------------------------------
   Essays, event listings, award tables, resource directories. These were
   centred layout tables on the legacy site and the owner wants them centred
   still — so this is a different measure from the architect pages, which are
   left-ranged catalogue records.
   ------------------------------------------------------------------------- */

.page {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
  /* Stated rather than inherited: these pages come from legacy markup and
     nothing in them should reach for a browser default face. */
  font-family: var(--sans);
  font-size: var(--t-body);
  line-height: 1.5;
}
.page,
.page p, .page li, .page td, .page th, .page div, .page span,
.page b, .page strong, .page i, .page em, .page u, .page small,
.page h1, .page h2, .page h3, .page h4, .page h5, .page h6,
.page a, .page blockquote, .page dt, .page dd, .page caption {
  font-family: var(--sans) !important;
}
.page p { max-width: none; margin: 0 auto var(--u2); }
.page h1, .page h2, .page h3, .page h4 { text-align: center; }
.page ul, .page ol {
  display: inline-block;
  text-align: left;
  margin: 0 auto var(--u2);
}
.page hr { border: 0; border-top: 1px solid var(--rule); margin: var(--u4) auto; }

/* A run of pictures the legacy page stacked one above another. Laid out
   horizontally and flush, the way the portrait strips are, so a row of logos
   or award photographs reads as a row again. */
.strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 0;
  margin: var(--u3) auto;
}
.strip img {
  height: auto;
  width: auto;
  max-width: 100%;
  max-height: 340px;
  flex: 0 0 auto;
  object-fit: contain;
  margin: 0 -1px -1px 0;
  border: 1px solid var(--rule-soft);
  display: block;
  cursor: zoom-in;
}
/* the more pictures in a row, the smaller they need to be to sit side by side */
@supports selector(:has(*)) {
  .strip:has(img:nth-child(2)) img { max-height: 260px; }
  .strip:has(img:nth-child(4)) img { max-height: 190px; }
  .strip:has(img:nth-child(6)) img { max-height: 140px; }
}
/* a single picture stands alone, unbordered */
.strip img:only-child { border: 0; margin: 0; max-height: 460px; }

@media (max-width: 620px) {
  .strip img,
  .strip:has(img:nth-child(2)) img,
  .strip:has(img:nth-child(4)) img,
  .strip:has(img:nth-child(6)) img { max-height: 150px; }
  .strip img:only-child { max-height: 260px; }
}

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

/* No photograph on file, but the address is known. */
.streetview {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px dashed var(--rule);
  padding: var(--u2) var(--u3);
  font-family: var(--sans);
  font-size: var(--t-small);
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-2);
}
.streetview::before { content: '\1F441'; text-decoration: none; }
.streetview:hover { border-color: var(--accent); color: var(--accent); }

/* 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,
.video video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }

@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: 0;                     /* photographs sit flush, as a contact strip */
  align-items: flex-start;
  align-content: 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 per strip, so the photographs butt together into clean
   rows whatever their aspect ratios. The height steps down as the count goes
   up, so eight portraits still fit the 556px column instead of wrapping into
   a ragged tower. flex-shrink must stay off or a tight row squeezes the width
   while the fixed height holds, distorting the picture. */
.portraits img {
  height: 240px;
  width: auto;
  max-width: 100%;
  flex: 0 0 auto;
  object-fit: contain;        /* width is auto, so nothing is cropped */
  border: 1px solid var(--rule);
  margin: 0 -1px -1px 0;      /* collapse the shared edges into one line */
  display: block;
}

@supports selector(:has(*)) {
  .portraits:has(img:nth-child(3)) img { height: 200px; }
  .portraits:has(img:nth-child(5)) img { height: 150px; }
  .portraits:has(img:nth-child(7)) img { height: 120px; }
}

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