.project-hero-image {
  width: 100%; aspect-ratio: 16/9;
  background: var(--panel);
  overflow: hidden;
}
.project-hero-image img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}

.project-facts {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-bottom: 0.5px solid var(--border);
}
.fact {
  padding: 40px 36px;
  border-right: 0.5px solid var(--border);
}
.fact:last-child { border-right: none; }
.fact-label {
  font-size: 9px; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--accent-dark); margin-bottom: 10px;
}
.fact-value {
  font-family: 'Cormorant Garamond', serif;
  font-size: 24px; font-weight: 400;
  color: var(--charcoal); line-height: 1.2;
}

.project-body {
  padding: 88px 48px;
  display: grid; grid-template-columns: 200px 1fr;
  gap: 72px; align-items: start;
  border-bottom: 0.5px solid var(--border);
}
.project-text {
  font-size: 14px; line-height: 2.0;
  color: var(--mid); max-width: 660px;
}
.project-text p + p { margin-top: 1.3em; }
.project-text .lead {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(20px, 2.2vw, 28px);
  font-weight: 300; line-height: 1.45;
  color: var(--charcoal);
}

.plans-section { padding: 88px 48px; }
.plans {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 2px; background: var(--border);
}
.plans.one {
  grid-template-columns: minmax(0, 900px);
  justify-content: center;
  /* The parent paints the border colour so it shows through the 2px grid gap.
     With one column there is no gap, only leftover width either side. */
  background: none;
}
.plan {
  background: var(--white);
  /* Share one row for the drawings and another for the captions, so two plans
     side by side line up however long their notes run. */
  display: grid; grid-template-rows: subgrid; grid-row: span 2;
}
/* An odd number of plans leaves one alone beside the grid. The ground floor is
   the one people read hardest, so it takes the full width and the upper floors
   pair off underneath. */
.plan.wide { grid-column: 1 / -1; }
.plan.wide .plan-image img { max-width: 1000px; margin: 0 auto; }
.plan-image {
  padding: 32px;
  display: flex; align-items: center; justify-content: center;
}
.plan-image img { width: 100%; height: auto; display: block; }
/* Some drawings only exist as small scans. Stretching one to fill the panel
   just shows the reader how few pixels it has. */
.plan-image.native img { width: auto; max-width: 100%; }
.plan-caption {
  padding: 20px 28px 26px;
  border-top: 0.5px solid var(--border);
}
.plan-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 20px; font-weight: 400;
  color: var(--charcoal); margin-bottom: 6px;
}
.plan-note { font-size: 11px; line-height: 1.85; color: var(--muted); }

.gallery-section { padding: 88px 48px; }
.gallery-section + .gallery-section { border-top: 0.5px solid var(--border); }
.gallery {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 2px; background: var(--border);
}
.gallery figure {
  background: var(--cream); overflow: hidden;
  /* Subgrid puts every image on one shared row and every caption on another,
     so photographs side by side are the same size even when one caption runs
     to an extra line, and no caption floats above empty cream. */
  display: grid; grid-template-rows: subgrid; grid-row: span 2;
}
.gallery figure.full { grid-column: 1 / -1; }
.gallery .shot {
  width: 100%; aspect-ratio: 4/3;
  background: var(--panel); overflow: hidden;
  /* The aspect-ratio sizes the row; min-height lets a shorter image grow into
     a row set by a taller one beside it, rather than sitting at the top of it. */
  min-height: 100%;
}
.gallery figure.full .shot { aspect-ratio: 16/9; }
.gallery figure.tall .shot { aspect-ratio: 3/4; }
/* A single photograph should not leave half a row showing the grid behind it.
   A portrait one keeps its own proportions rather than being cropped to a
   panoramic box. */
.gallery figure:only-child { grid-column: 1 / -1; }
/* A portrait photograph across the full width would be cropped to a letterbox,
   so it keeps its own proportions and sits centred instead. */
.gallery figure.tall:only-child .shot,
.gallery figure.tall.full .shot {
  align-self: start; aspect-ratio: auto; min-height: 0;
  max-width: 620px; margin: 0 auto;
}
/* A drawing is not a photograph. Cropping an elevation to a photographic box
   cuts the ends off the building, so a wide one runs full width at its own
   proportions. */
.gallery figure.wide { grid-column: 1 / -1; }
.gallery figure.wide .shot {
  aspect-ratio: auto; min-height: 0; align-self: start;
}
.gallery figure.wide .shot img { height: auto; }
.gallery figure.tall:only-child .shot img,
.gallery figure.tall.full .shot img { height: auto; }
.gallery .shot img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform 0.6s cubic-bezier(0.25,0.46,0.45,0.94);
}
.gallery figure:hover .shot img { transform: scale(1.03); }
.gallery figcaption {
  padding: 18px 24px 22px;
  border-top: 0.5px solid var(--border);
  font-size: 11px; letter-spacing: 0.04em; color: var(--muted);
}

.project-footer {
  display: grid; grid-template-columns: 1fr 1fr;
  border-top: 0.5px solid var(--border);
}
.project-footer-left {
  padding: 72px 48px;
  border-right: 0.5px solid var(--border);
}
.project-footer-right {
  padding: 72px 48px;
  background: var(--panel);
  display: flex; flex-direction: column; justify-content: center;
}
.project-footer-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(24px, 2.6vw, 34px);
  font-weight: 300; line-height: 1.15;
  color: var(--charcoal); margin-bottom: 18px;
}
.project-footer-text {
  font-size: 12px; line-height: 1.95;
  color: var(--mid); margin-bottom: 32px; max-width: 380px;
}

@media (max-width: 1080px) {
  .project-body { padding: 64px 28px; gap: 40px; }
  .plans-section, .gallery-section { padding: 64px 28px; }
  .project-footer-left, .project-footer-right { padding: 56px 28px; }
  .fact { padding: 32px 24px; }
  .fact-value { font-size: 21px; }
  .plan-image { padding: 22px; }
}

@media (max-width: 860px) {
  .project-hero-image { aspect-ratio: 3/2; }
  .project-facts { grid-template-columns: repeat(2, 1fr); }
  .fact:nth-child(2n) { border-right: none; }
  .fact:nth-child(-n+2) { border-bottom: 0.5px solid var(--border); }
  .project-body { grid-template-columns: 1fr; gap: 24px; }
  .plans { grid-template-columns: 1fr; }
  .gallery { grid-template-columns: 1fr; }
  /* Stacked single file, a portrait photograph stays portrait. Cropping it
     to a landscape box would throw away half the building. */
  .gallery figure.tall .shot { aspect-ratio: 4/5; }
  .project-footer { grid-template-columns: 1fr; }
  .project-footer-left {
    border-right: none; border-bottom: 0.5px solid var(--border);
  }
  .project-footer-text { max-width: none; }
}

@media (max-width: 560px) {
  .project-hero-image { aspect-ratio: 4/3; }
  .project-facts { grid-template-columns: 1fr; }
  .fact {
    padding: 24px 20px;
    border-right: none; border-bottom: 0.5px solid var(--border);
  }
  .fact:last-child { border-bottom: none; }
  .project-body { padding: 48px 20px; }
  .plans-section, .gallery-section { padding: 48px 20px; }
  .plan-image { padding: 14px; }
  .plan-caption { padding: 16px 20px 20px; }
  .gallery figcaption { padding: 14px 20px 18px; }
  .project-footer-left, .project-footer-right { padding: 48px 20px; }
}