/* ============================================================
   Donato Architecture Studio — project case-study pages
   ------------------------------------------------------------
   Shared by projects/kansas-street.html, wisconsin-street.html
   and burlingame.html. Extracted in Prompt 306 (Audit AD, AD.06)
   from three page-local copies that had already drifted apart.

   Loaded after css/site.css and BEFORE each page's own <style>,
   so a page-local rule of equal specificity still wins. Two
   things rely on that and are intentionally NOT here:

   1. BURLINGAME'S HERO. Its cover photo is landscape, so its
      .pjhero / __split / __left / __right are single-column and
      differ from the two-column hero Kansas and Wisconsin share.
      The Kansas/Wisconsin version is the default below;
      burlingame.html overrides all four page-locally.
   2. THE MOBILE .pjhero__right. All three pages genuinely differ
      (4/5 vs 3/2 aspect, and Kansas alone omits min-height: 0),
      so that one rule stays page-local on every page rather than
      being forced into a false default.

   WISCONSIN GAINS THE LANDSCAPE CAP by being here. The
   .plate--landscape.plate__photo max-height was present on Kansas
   and Burlingame and absent on Wisconsin — invisible only because
   Wisconsin currently has no landscape plates. Adding one would
   have reproduced the Prompt 105 defect (photos at ~2x viewport
   height) on that page alone.
   ============================================================ */

/* ============================================================
     PROJECT PAGE — editorial spread for an architectural
     monograph. Each page reads as a sub-document: a hero title
     block, a run of full-bleed plates with captions, a credits
     colophon, and a next-project link.
     ============================================================ */

  /* Reusable section frame -------------------------------------- */
  .frame { padding: clamp(80px, 11vw, 140px) 0; position: relative; }

.frame--bleed { padding: 0; }

/* .section-head core lives in css/site.css (Prompt 83). Project pages keep
     the compact section-title scale + project-page margin rhythm. */
  .section-head { margin-bottom: clamp(36px, 5vw, 72px); }

/* Title size now inherits the canonical --fs-section-title (Prompt 134). */

  /* ============================================================
     HERO — split editorial spread
     Title block (left) · cover plate (right). Kansas and
     Wisconsin use this two-column split; burlingame.html
     overrides it page-locally to a single column because its
     cover photo is landscape.
     ============================================================ */
  .pjhero {
    position: relative;
    min-height: 100vh;
    background: var(--paper);
    overflow: hidden;
  }

.pjhero__split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: clamp(28px, 4vw, 56px);
    min-height: 100vh;
    align-items: stretch;
  }

/* Left — title block, dossier-style */
  .pjhero__left {
    padding: clamp(120px, 18vh, 180px) clamp(20px, 3vw, 40px) clamp(40px, 6vh, 80px) var(--gut);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: clamp(40px, 7vh, 96px);
    position: relative;
  }

.breadcrumb {
    font-family: var(--display);
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--graphite);
    display: inline-flex;
    gap: 14px;
    align-items: center;
  }

.breadcrumb a { color: var(--graphite); transition: color 220ms ease; }

.breadcrumb a:hover { color: var(--ink); }

.breadcrumb .sep { color: var(--graphite); }

.pjhero__top {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

.pjhero__title {
    font-family: var(--display);
    font-weight: 400;
    font-size: clamp(48px, 7.8vw, 124px);
    line-height: 0.95;
    letter-spacing: -0.018em;
    margin: 0;
    color: var(--ink);
  }

.pjhero__sub {
    font-family: var(--display);
    font-size: clamp(11px, 0.9vw, 13px);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--graphite);
    margin: 24px 0 0 0;
  }

.pjhero__sub .dot {
    display: inline-block;
    width: 4px; height: 4px;
    background: var(--slate);
    border-radius: 50%;
    margin: 0 12px;
    vertical-align: middle;
    transform: translateY(-2px);
  }

/* Title block bottom — sheet metadata mini-table */
  .pjhero__sheet {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px 28px;
    border-top: 1px solid var(--ink);
    padding-top: 18px;
    max-width: 520px;
  }

.pjhero__sheet div { font-family: var(--display); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; }

.pjhero__sheet .k { color: var(--graphite); display: block; margin-bottom: 6px; }

.pjhero__sheet .v { color: var(--ink); line-height: 1.45; }

.pjhero__sheet em { font-style: normal; color: var(--graphite); font-weight: 400; }

/* Role line spans the full sheet width so the Levy attribution fits on one
     row of metadata rather than wrapping in a narrow cell. */
  .pjhero__sheet .span { grid-column: 1 / -1; }

/* Right — photo plate */
  .pjhero__right {
    position: relative;
    overflow: hidden;
    background: var(--ink);
    margin-right: var(--gut);
  }

.pjhero__right picture { display: contents; }

.pjhero__right img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center;
  }

  /* ============================================================
     PLATES — full-bleed photographic moments
     ============================================================ */
  .plate {
    position: relative;
    background: var(--paper);
  }

.plate--bleed { padding: 0; }

.plate__photo {
    position: relative;
    overflow: hidden;
  }

.plate__photo img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 1800ms cubic-bezier(.2,.7,.2,1);
  }

.plate__photo:hover img { transform: scale(1.018); }

/* Prompt 105 fix: these were a broken descendant selector
     (".plate--landscape .plate__photo") that could never match markup
     where both classes sit on the same element, so the max-height cap
     silently never applied and photos rendered at full natural height.
     Now a compound selector, sized to the photo's own aspect ratio
     (not a forced 16:9/3:4 box) so nothing is cropped or letterboxed —
     just capped so the whole photo fits one viewport. */
  .plate--landscape.plate__photo {
    max-height: 85vh;
  }

.plate--landscape.plate__photo img {
    width: auto; height: auto;
    max-width: 100%; max-height: 85vh;
    object-fit: contain;
    margin: 0 auto;
  }

/* Plate caption — small monospace under photo */
  .plate__caption {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: clamp(20px, 3vw, 48px);
    padding-top: 16px;
    align-items: baseline;
    font-family: var(--display);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
  }

.plate__caption .what { color: var(--graphite); max-width: 50ch; line-height: 1.6; }

.plate__caption .credit { color: var(--graphite); text-align: right; white-space: nowrap; }

/* Spacing between plate clusters */
  .plate-spacer { height: clamp(60px, 9vw, 110px); }

/* ============================================================
     PAIRED PORTRAITS — Plate II
     ============================================================ */
  .duo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(16px, 2vw, 28px);
  }

.duo img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 1800ms cubic-bezier(.2,.7,.2,1);
  }

/* Per-portrait caption */
  .duo .micro-cap {
    margin-top: 12px;
    font-family: var(--display);
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--graphite);
    display: flex;
    justify-content: space-between;
    gap: 12px;
  }

.duo .micro-cap .ref { color: var(--ink); }

/* ============================================================
     CREDITS / COLOPHON
     ============================================================ */
  .credits { background: var(--paper-light); }

.credits__sheet {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
    border-top: 1px solid var(--ink);
    border-bottom: 1px solid var(--ink);
  }

.credits__row {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 24px;
    padding: 22px 28px 22px 0;
    border-bottom: 1px solid var(--rule);
    font-family: var(--display);
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
  }

.credits__row:nth-child(2n) { padding-left: 28px; padding-right: 0; }

.credits__row .k { color: var(--graphite); font-weight: 500; }

.credits__row .v { color: var(--ink); font-weight: 500; line-height: 1.45; }

.credits__row em { font-style: normal; color: var(--graphite); font-weight: 400; }

/* Final-hairline drop must respect row parity: with an even row count the
     whole last pair loses its border (second-to-last row is the pair's left
     cell = odd child); with an odd count only the lone last row drops it and
     the full pair above keeps a full-width rule (Prompt 107 — removing the
     Architect row left Kansas/Wisconsin with 9 rows). */
  .credits__row:last-child { border-bottom: 0; }

.credits__row:nth-child(odd):nth-last-child(2) { border-bottom: 0; }

/* Quiet credit-line link — slate-deep, no default underline, hover-only
     border-bottom + color shift. Architectural-monograph discretion. */
  .credits__row a {
    color: var(--slate-deep);
    border-bottom: 1px solid transparent;
    transition: border-bottom-color 240ms ease, color 240ms ease;
  }

.credits__row a:hover {
    color: var(--ink);
    border-bottom-color: var(--slate-deep);
  }

/* Credits role-note — Patrick's voice describing his contribution on
     the project. Peer-section to .credits__sheet (same 220px+1fr grid
     logic). Prompt 248 (Arlene's edit doc item 12): set in the SAME
     mono metadata treatment as the credits rows (family/size/tracking/
     casing match .credits__row) so the block carries one type voice —
     client instruction, overriding the earlier sans-for-prose choice. */
  .credits__note {
    margin-top: clamp(28px, 4vw, 44px);
    padding-top: 22px;
    border-top: 1px solid var(--rule);
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 24px 28px;
    align-items: start;
  }

.credits__note-label {
    font-family: var(--display);
    font-weight: 500;
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--graphite);
    margin: 0;
  }

.credits__note-body {
    font-family: var(--display);
    font-weight: 500;
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    line-height: 1.8;
    color: var(--ink);
    margin: 0;
    max-width: 58ch;
  }

/* ============================================================
     NEXT PROJECT — typographic + image overlay
     ============================================================ */
  .next-link {
    display: block;
    background: var(--paper);
    border-top: 1px solid var(--ink);
    padding: clamp(72px, 10vw, 120px) 0 clamp(72px, 10vw, 120px) 0;
    position: relative;
    overflow: hidden;
    transition: background 600ms ease;
  }

.next-link__inner {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: clamp(20px, 3vw, 48px);
    align-items: baseline;
    position: relative;
    z-index: 2;
  }

.next-link__title {
    font-family: var(--display);
    font-weight: 400;
    font-size: clamp(36px, 6vw, 86px);
    line-height: 1.0;
    letter-spacing: -0.012em;
    margin: 0;
    transition: transform 800ms cubic-bezier(.2,.7,.2,1), color 320ms ease;
  }

.next-link__title small {
    display: block;
    font-size: clamp(11px, 0.9vw, 13px);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--graphite);
    font-weight: 500;
    margin-bottom: 16px;
    transition: color 320ms ease;
  }

.next-link__arrow {
    font-family: var(--display);
    font-size: 12px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-weight: 500;
    color: var(--ink);
    display: inline-flex;
    align-items: center;
    gap: 16px;
    align-self: end;
    padding-bottom: 8px;
    transition: color 320ms ease, transform 800ms cubic-bezier(.2,.7,.2,1);
  }

.next-link:hover { background: var(--ink); color: var(--paper); }

.next-link:hover .next-link__title small, .next-link:hover .next-link__title, .next-link:hover .next-link__arrow { color: var(--paper); }

.next-link:hover .next-link__title { transform: translateX(8px); }

.next-link:hover .next-link__arrow { transform: translateX(10px); }

@media (max-width: 900px) {
  .pjhero { min-height: auto; }
  .pjhero__split { grid-template-columns: 1fr; min-height: auto; gap: 0; }
  .pjhero__left { padding: 110px var(--gut) 40px var(--gut); }
  .pjhero__sheet { max-width: none; }
  .pjhero__title { font-size: clamp(56px, 16vw, 96px); }
  .credits__sheet { grid-template-columns: 1fr; }
  .credits__row,
    .credits__row:nth-child(2n) { padding: 22px 0; }
  .credits__row { grid-template-columns: 160px 1fr; }
  .credits__row:last-child { border-bottom: 0; }
  .credits__sheet .credits__row:nth-last-child(2) { border-bottom: 1px solid var(--rule); }
  .credits__note { grid-template-columns: 160px 1fr; gap: 16px; }
}

@media (max-width: 700px) {
  .plate__caption { grid-template-columns: 1fr; }
  .plate__caption .credit { grid-column: 1 / -1; text-align: left; padding-top: 4px; }
  .duo { grid-template-columns: 1fr; gap: 40px; }
  .next-link__inner { grid-template-columns: 1fr; gap: 18px; }
  .next-link__arrow { grid-column: 1; padding-bottom: 0; padding-top: 18px; }
}

@media (max-width: 359px) {
  .credits__row,
    .credits__note { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  /* Same class of problem in the hero: "Wisconsin" at the 56px clamp
       floor sets a 293px min-content against a 280px column (Kansas and
       Cabrillo are shorter words and clear it). Lowering ONLY the floor
       hands control back to the existing 16vw track below 350px and
       leaves 350px and up numerically identical. */
    .pjhero__title { font-size: clamp(48px, 16vw, 96px); }
}