/* ═══════════════════════════════════════════════════════════════
   project-page.css — layout for individual project pages.
   Load AFTER styles.css. Uses only tokens styles.css already
   defines (--ink, --bone, --muted, --f-head, --f-body, --sp-lg),
   with fallbacks in case a name differs on your side.

   Nothing here touches the nav, footer, side rails, or .cta-section.
   ═══════════════════════════════════════════════════════════════ */

.project-page{
  --pp-rule: rgba(26,25,22,0.15);
  --pp-rule-soft: rgba(26,25,22,0.08);
  --pp-gap: clamp(8px, 1.4vw, 18px);
}

/* ── 1. Hero ─────────────────────────────────────────────────
   Nothing here on purpose. styles.css already breaks the hero out of
   the side-rail gutter and sets 70vh desktop / 3:2 under 1024px /
   square under 640px. An earlier version of this file overrode those
   with margin:0 and a fixed height, which quietly un-did the breakout
   and made the hero narrower than designed. Left alone now. */

/* ── 2. Project header ───────────────────────────────────────
   Intentionally the same shape as .page-header on Process, Story
   and Owners, so a project page announces itself like every other
   page on the site. */
.project-header{ padding: clamp(40px,6vw,80px) 0 clamp(32px,4vw,52px); }
.project-header__label{
  font-size:11px; text-transform:uppercase; letter-spacing:0.16em;
  color:var(--muted,#6E6A61); margin:0 0 18px;
}
.project-header__h1{
  font-size:clamp(34px,6vw,64px); line-height:1.08;
  margin:0; max-width:16ch;
}
.project-header__lede{
  font-size:clamp(16px,2vw,19px); line-height:1.75;
  margin:24px 0 0; max-width:56ch;
}

/* ── 3. Narrative + facts ────────────────────────────────────
   One place for prose, one place for facts. This absorbs both the
   old top meta bar and the old bottom "Project Partners" block. */
.project-body{
  display:grid;
  grid-template-columns: minmax(0,1.55fr) minmax(0,0.85fr);
  gap: clamp(40px,5vw,80px);
  align-items:start;
  border-top:1px solid var(--pp-rule);
  padding: clamp(36px,4vw,56px) 0 var(--sp-lg,88px);
}
.project-body__prose > *:first-child{ margin-top:0; }
.project-body__prose h2{
  font-family:var(--f-head,Lora,Georgia,serif); font-weight:700;
  font-size:clamp(22px,2.6vw,30px); line-height:1.25;
  margin:0 0 26px; max-width:22ch;
}
.project-body__prose p{
  font-size:16px; line-height:1.85; margin:0 0 22px; max-width:64ch;
}

/* Fact column — sits at the top of the column beside the prose and
   stays put; it scrolls away with the rest of the page. Drops below
   the prose on smaller screens. */
.project-facts{ align-self:start; }
.project-facts__group + .project-facts__group{ margin-top:32px; }
.project-facts__title{
  font-size:11px; text-transform:uppercase; letter-spacing:0.16em;
  color:var(--muted,#6E6A61); margin:0 0 14px;
}
.fact-list{ margin:0; border-top:1px solid var(--pp-rule); }
.fact-list__row{
  display:flex; justify-content:space-between; gap:20px;
  padding:11px 0; border-bottom:1px solid var(--pp-rule-soft);
}
.fact-list__k{ font-size:12px; color:var(--muted,#6E6A61); white-space:nowrap; }
.fact-list__v{ font-size:14px; font-weight:400; text-align:right; }
/* Partner names link out. Quiet at rest: same colour, no underline; a
   small north-east arrow says "this leaves the site". Underline on hover
   and keyboard focus. Firms only, never private clients. */
/* !important on both: Kayle reported these going browser-default blue on
   his phone (2026-09-25) after genuinely visiting the real firm sites the
   links point to. Two real revisits tested here in Chromium (slicktimber.com,
   ftet.com) rendered correctly without it, so this couldn't be reproduced
   directly — likely an iOS Safari :visited quirk this tool can't show.
   Forcing it removes any doubt either way; cheap and can't make it worse. */
.fact-link{ color:inherit !important; text-decoration:none; }
.fact-link:visited{ color:inherit !important; }
.fact-link::after{ content:"\2197"; font-size:0.8em; margin-left:0.3em; opacity:0.7; }
.fact-link:hover, .fact-link:focus-visible{ text-decoration:underline; text-underline-offset:3px; }
.fact-link:hover::after, .fact-link:focus-visible::after{ opacity:1; }

/* Numbers, when you have them. Two columns, so four figures look
   deliberate instead of like a six-slot band with gaps in it.
   Delete the whole .project-facts__group on frames without numbers
   and nothing else shifts. */
.fact-nums{
  display:grid; grid-template-columns:1fr 1fr; gap:22px 20px;
  border-top:1px solid var(--pp-rule); padding-top:20px;
}
.fact-num__n{
  font-family:var(--f-head,Lora,Georgia,serif); font-weight:700;
  font-size:26px; line-height:1;
}
.fact-num__l{
  font-size:11px; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--muted,#6E6A61); margin-top:7px;
}

/* ── 4. Gallery ──────────────────────────────────────────────
   Deliberately almost empty. styles.css already handles this well:
   .project-gallery__full / __pair / __portrait carry per-breakpoint
   aspect ratios (3/2 landscape, 4/5 on phones) and video rules for
   all three slot types. None of that is touched.

   The one change: below 640px styles.css breaks the gallery out of
   the body side-rail gutter with negative margins and
   width: calc(100% + 2 * var(--side-w)), so photos run edge to edge
   and pass underneath the side labels — which is what turns the
   right-hand label white (body.rails-hidden). Since you want the
   gallery centered and contained, that breakout is cancelled here.
   The gallery now sits inside the body gutter, clear of both rails. */
@media (max-width: 639px){
  .page.project-page .project-gallery{
    margin-left:0; margin-right:0;
    width:100%; max-width:100%;
    padding-left:0; padding-right:0;
    padding-top:var(--sp-sm); padding-bottom:var(--sp-sm);
  }
}

/* The run-up to the gallery was two full paddings stacked — the facts
   card's own bottom padding, then the gallery's own top padding — and
   read as a dead, empty gap after "By the Numbers," worst on phones
   where ~130px of blank cream is a real fraction of the screen. Same
   thing in reverse after the last photo, into the credits block or the
   pager. Tightened both ends below 900px, the same point the facts card
   goes single-column and "By the Numbers" becomes the last thing before
   the photos; untouched at 900px+, where the facts sit beside the copy
   and that much air reads as intentional, not empty. */
@media (max-width: 900px){
  .project-body{ padding-bottom: var(--sp-sm, 24px); }
}
@media (min-width: 640px) and (max-width: 900px){
  .page.project-page .project-gallery{ padding-top: var(--sp-sm); padding-bottom: var(--sp-sm); }
}

/* Drawings in a gallery slot are contained on white, never cropped. */
.project-gallery__pair-img.is-drawing, .project-gallery__portrait-img.is-drawing, .project-gallery__full.is-drawing { background: var(--white, #fff); }
.is-drawing img { object-fit: contain; padding: 3%; }

/* ── 5. Prev / next ──────────────────────────────────────────
   Replaces both the lone "← All Projects" link and the duplicate
   "More Projects" grid that sat right underneath it. */
.project-pager{
  display:grid; grid-template-columns:1fr 1fr;
  border-top:1px solid var(--pp-rule);
  border-bottom:1px solid var(--pp-rule);
  margin-top: 0;
  border-bottom: 0;
}
.project-pager__link{
  display:block; padding: clamp(26px,3.5vw,44px) 0; text-decoration:none;
}
.project-pager__link + .project-pager__link{
  border-left:1px solid var(--pp-rule);
  padding-left: clamp(20px,3vw,40px);
  text-align:right;
}
.project-pager__dir{
  display:block; margin-bottom:10px;
  font-size:11px; text-transform:uppercase; letter-spacing:0.16em;
  color:var(--muted,#6E6A61);
}
.project-pager__name{
  display:block;
  font-family:var(--f-head,Lora,Georgia,serif); font-weight:700;
  font-size:clamp(18px,2.4vw,26px); line-height:1.25;
}
.project-pager__all{
  display:block; text-align:center; border-top:1px solid var(--pp-rule); border-bottom:1px solid var(--pp-rule); padding:22px 0;
  font-size:12px; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--muted,#6E6A61); text-decoration:none;
}
.project-pager__all:visited{ color:#6B675F; } /* literal hex — var() is blocked inside :visited */
.project-pager__all:hover{ color:var(--ink,#1A1916); }

/* ── Breakpoints — the only two the page needs ──────────────── */
@media (max-width: 900px){
  .project-body{ grid-template-columns:1fr; gap:44px; }
}

/* Project Partners, repositioned below 900px. Stacked single-column, the
   aside used to put three fact groups — quick facts, partners, numbers —
   between the copy and the gallery, and Project Partners is usually the
   longest of the three (a client, an architect, an engineer, a
   photographer). That made for a long scroll before the first photo.
   Below 900px the aside's own copy hides and an identical block (written
   once per project page, right after the gallery in the HTML) takes its
   place instead — quick facts and numbers stay put, right after the
   prose, and partner credits read like a colophon after the photos. */
@media (max-width: 900px){
  .project-facts__group--partners{ display:none; }
}
.project-credits{ display:none; }
@media (max-width: 900px){
  .project-credits{
    display:block;
    /* top/bottom only: `padding: … 0` was zeroing .wrap's 42px side padding,
       so this block hugged the edge while the prose above it was inset. */
    padding-top: clamp(28px,4vw,44px);
    padding-bottom: clamp(28px,4vw,44px);
    border-top:1px solid var(--pp-rule);
  }
}
@media (max-width: 640px){
  .project-pager{ grid-template-columns:1fr; }
  .project-pager__link + .project-pager__link{
    border-left:0; border-top:1px solid var(--pp-rule);
    padding-left:0; text-align:left;
  }
  .fact-list__row{ flex-direction:column; gap:4px; }
  .fact-list__v{ text-align:left; }
}

/* ─── HERO IMAGE FILL ──────────────────────────────────────────
   Below 1024px styles.css gives .project-hero `aspect-ratio: 3/2`
   with `height: auto`. The container then has no resolved height to
   resolve a percentage against, so .project-hero__img's `height:100%`
   falls back to auto and the photo sits at its intrinsic height —
   letterboxed, showing the container's own #2a2e25 background above
   and below. Most visible in the 640–1023px band, where the 3/2 box
   is furthest from a typical photo's proportions.

   Taking the image out of flow and pinning it to the box sidesteps
   the percentage entirely. .project-hero is already
   position:relative with overflow:hidden, so this needs nothing
   added to the container — and no geometry is touched, so the
   breakout margins in styles.css still own the width. */
.page.project-page .project-hero picture { display: contents; }
.page.project-page .project-hero__img,
.page.project-page .project-hero img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}