/* Project pages (site/app/work/[slug]): one rendering or two, brief, facts, related work.
   Built on the template's tokens (theme.css): --paper, --ink, --muted, --line, --dark, --gutter. */
.project-page { padding-top: 0; }
.project-crumbs { display: flex; gap: 10px; color: var(--ink); padding-top: 48px; }
.project-crumbs a:hover { color: var(--ink); }
.project-intro { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; padding-top: 0; padding-bottom: 46px; }
.project-intro h1 { font-size: clamp(54px, 7.4vw, 118px); font-weight: 500; line-height: .98; letter-spacing: -.04em; }
.project-kicker { font-size: 15px; color: var(--muted); max-width: 360px; text-align: right; padding-bottom: 12px; }
.project-hero { margin: 0 20px; position: relative; }
.project-hero img { width: 100%; height: auto; max-height: 86vh; object-fit: cover; display: block; background: #e3e3dc; }
.project-hero figcaption, .project-second figcaption { display: flex; justify-content: space-between; gap: 20px; padding-top: 12px; font-size: 13px; color: var(--muted); }
.project-hero figcaption { padding-inline: calc(var(--gutter) - 20px); }
.project-body { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(280px, .9fr); gap: 8vw; padding-top: 96px; padding-bottom: 96px; }
.project-brief .eyebrow { margin-bottom: 26px; }
.project-brief p:not(.eyebrow) { font-size: clamp(19px, 1.55vw, 23px); line-height: 1.5; letter-spacing: -.01em; max-width: 720px; }
.project-brief p + p { margin-top: 1.1em; }
.project-facts { position: sticky; top: 110px; align-self: start; }
.project-facts dl { margin: 0 0 32px; border-top: 1px solid var(--line); }
.project-facts dl > div { display: grid; grid-template-columns: 140px 1fr; gap: 16px; padding: 15px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.project-facts dt { color: var(--muted); }
.project-facts dd { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.project-tag { border: 1px solid var(--line); padding: 3px 9px; font-size: 12px; }
.project-second { padding-bottom: 40px; }
.project-second img { width: 100%; height: auto; display: block; background: #e3e3dc; }
.project-second.is-tall { display: flex; flex-direction: column; align-items: center; }
.project-second.is-tall img { width: auto; max-width: 100%; max-height: 92vh; }
.project-second.is-tall figcaption { align-self: stretch; }
.pp-related-grid { align-items: start; }
.project-related { border-top: 1px solid var(--line); }
.pp-related-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 44px; }
.pp-card .picture { aspect-ratio: 4 / 3; overflow: hidden; background: #e3e3dc; }
.pp-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s; }
.pp-card:hover img { transform: scale(1.035); }
.pp-card h3 { font-size: 18px; margin-top: 14px; }
.pp-card p { font-size: 13px; color: var(--muted); margin-top: 4px; }
@media (max-width: 900px) {
  .project-intro { display: block; padding-bottom: 28px; }
  .project-kicker { text-align: left; margin-top: 16px; }
  .project-hero { margin: 0; }
  .project-hero figcaption { padding-inline: var(--gutter); flex-direction: column; gap: 4px; }
  .project-body { grid-template-columns: 1fr; gap: 48px; padding-top: 56px; padding-bottom: 56px; }
  .project-facts { position: static; }
  .project-facts dl > div { grid-template-columns: 120px 1fr; }
  .pp-related-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
}

/* Review 2026-10-23: the site-wide image reveal scales pictures slightly, so their frames clip (no sideways scroll), and
   on phones the title is sized to fit with room under its descenders before the kicker. */
.project-hero, .project-second { overflow: clip; }
@media (max-width: 900px) {
  .project-intro h1 { font-size: clamp(40px, 11vw, 72px); line-height: 1.04; overflow-wrap: anywhere; }
  .project-kicker { margin-top: 20px; }
}

/* Tall header renderings (2026-10-25: towers were cropped by the full-width banner): the whole picture on the left,
   held in view while the title, brief and facts scroll beside it. */
.project-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6vw; align-items: start; padding-top: 32px; padding-bottom: 96px; }
.project-split-media { position: sticky; top: 100px; margin: 0; display: flex; flex-direction: column; align-items: center; }
.project-split-media img { display: block; width: auto; max-width: 100%; height: auto; max-height: calc(100vh - 150px); background: #e3e3dc; }
.project-split-media figcaption { align-self: stretch; padding-top: 12px; font-size: 13px; color: var(--muted); }
.project-split-copy { display: flex; flex-direction: column; gap: 48px; padding-top: 8px; }
.project-intro.is-split { display: block; padding: 0; }
.project-intro.is-split h1 { font-size: clamp(44px, 5.2vw, 88px); }
.project-intro.is-split .project-kicker { text-align: left; margin-top: 18px; padding: 0; max-width: none; }
.project-split .project-brief p:not(.eyebrow) { font-size: clamp(17px, 1.3vw, 20px); }
.project-split .project-facts { position: static; }
@media (max-width: 900px) {
  .project-split { grid-template-columns: 1fr; gap: 36px; padding-top: 20px; padding-bottom: 56px; }
  .project-split-media { position: static; }
  .project-split-media img { max-height: 78vh; }
  .project-split-copy { gap: 36px; }
}
@media (max-width: 900px) {   /* phones: the title before the picture */
  .project-split-copy { display: contents; }
  .project-intro.is-split { order: -1; }
}