/* Approved A: documentary photo journal; all photography is original. */
.page-projects { background: var(--snow); }
.project-wrap { width: min(1400px, calc(100% - 96px)); margin-inline: auto; }
.project-hero { position: relative; isolation: isolate; display: flex; align-items: end; min-height: 550px; padding: 180px 0 44px; background: var(--navy); color: var(--white); }
.project-hero > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 32%; }
.project-hero::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(7,30,44,.65), rgba(7,30,44,.08) 70%), linear-gradient(0deg, rgba(7,30,44,.35), transparent 70%); }
.project-hero h1 { margin: 0; font-size: clamp(3rem, 6vw, 5.6rem); line-height: 1.1; color: var(--white); }
.project-hero h1::after { content: ''; display: block; width: 100px; height: 4px; background: var(--green); margin-top: 24px; }
.project-hero p { max-width: 38ch; margin: 24px 0 0; font-size: clamp(1rem, 1.6vw, 1.35rem); font-weight: 700; line-height: 1.45; color: var(--white); }
.project-directory { padding-block: 14px; display: flex; gap: 18px 30px; align-items: baseline; flex-wrap: wrap; }
.project-directory strong { font-size: 1.1rem; }
.project-directory nav { display: flex; gap: 10px 24px; flex-wrap: wrap; }
.project-directory a { font-size: .85rem; text-decoration: none; padding-block: 8px; font-weight: 700; }
.project-directory a:hover { color: var(--blue); text-decoration: underline; }
.project-grid { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 64px 26px; padding-bottom: 96px; }
.project-card { grid-column: span 2; min-width: 0; }
.project-card:nth-child(4n+1), .project-card:nth-child(4n+4) { grid-column: span 3; }
.project-card:last-child { grid-column: 1 / -1; }
.project-card__photo { display: block; border-radius: var(--radius); overflow: hidden; background: var(--ice); }
.project-card img { width: 100%; height: clamp(240px, 20vw, 340px); object-fit: cover; }
.project-card:last-child img { height: clamp(280px, 30vw, 460px); object-position: center 60%; }
.project-card h2 { font-size: clamp(1.6rem, 2.25vw, 2rem); margin: 12px 0 8px; }
.project-card h2 a { text-decoration: none; }
.project-card p { color: var(--ink-soft); margin: 0 0 14px; max-width: 55ch; line-height: 1.55; }
.project-link { color: var(--blue); font-weight: 700; padding-block: 8px; }
.project-link:hover { color: var(--ink); }
.project-breadcrumb { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 24px; font-size: .9rem; }
.project-detail .project-hero { min-height: 620px; }
.project-detail .project-hero p { max-width: 50ch; }
.project-overview { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 100px); padding-block: 80px; }
.project-overview h2 { font-size: clamp(1.6rem, 2.5vw, 2.5rem); margin: 0 0 24px; }
.project-overview p { color: var(--ink-soft); margin: 0 0 20px; max-width: 65ch; }
.project-overview .project-type { color: var(--blue); font-size: 1rem; }
.project-overview ul { padding-left: 22px; margin: 0; }
.project-overview li { padding-left: 6px; margin-bottom: 14px; }
.project-archive-note { border-top: 1px solid var(--line); padding-top: 18px; font-size: .875rem; }
.project-gallery-heading { display: flex; justify-content: space-between; gap: 24px; align-items: baseline; margin-bottom: 26px; }
.project-gallery-heading h2 { font-size: clamp(2rem, 3vw, 3rem); margin: 0; }
.project-gallery-heading p { color: var(--ink-soft); font-size: .875rem; margin: 0; }
.project-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 26px; }
.project-gallery figure { margin: 0; min-width: 0; }
.project-gallery a { display: block; border-radius: var(--radius); overflow: hidden; background: var(--ice); }
.project-gallery img { width: 100%; height: clamp(260px, 31vw, 470px); object-fit: contain; }
.project-gallery figcaption { margin-top: 12px; color: var(--ink-soft); font-size: .9rem; line-height: 1.5; }
.project-gallery figure:last-child:nth-child(odd) { grid-column: 1 / -1; }
.project-related { margin-top: 80px; padding-block: 30px 70px; border-top: 1px solid var(--line); display: flex; align-items: baseline; justify-content: space-between; gap: 30px; }
.project-related small { display: block; font-size: .85rem; font-weight: 400; color: var(--ink-soft); }
.project-related strong { font-size: clamp(1.35rem, 3vw, 2rem); }
@media (min-width: 1450px) { .page-projects .site-header { left: max(20px, calc((100% - 1460px) / 2)); right: max(20px, calc((100% - 1460px) / 2)); } }
@media (max-width: 1024px) {
  .project-wrap { width: calc(100% - 48px); }
  .project-hero { min-height: 520px; }
  .project-detail .project-hero { min-height: 560px; }
  .project-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 48px 22px; }
  .project-card, .project-card:nth-child(n) { grid-column: auto; }
  .project-card:last-child { grid-column: 1/-1; }
  .project-card img { height: 260px; }
  .project-directory { padding-block: 24px; }
  .project-overview { gap: 32px; padding-block: 56px; }
}
@media (max-width: 640px) {
  .project-wrap { width: calc(100% - 36px); }
  .project-hero { min-height: 480px; padding-bottom: 34px; }
  .project-hero > img { object-position: 63% center; }
  .project-hero::before { background: linear-gradient(0deg, rgba(7,30,44,.82), rgba(7,30,44,.1) 95%); }
  .project-hero h1 { font-size: clamp(2.7rem, 10vw, 3.6rem); overflow-wrap: anywhere; }
  .project-grid { display: block; padding-bottom: 56px; }
  .project-card + .project-card { margin-top: 40px; }
  .project-card img, .project-card:last-child img { height: auto; aspect-ratio: 1.5; }
  .project-directory nav { gap: 4px 20px; }
  .project-directory strong { width: 100%; }
  .project-detail .project-hero { min-height: 520px; }
  .project-overview { display: block; padding-block: 44px; }
  .project-overview > div + div { margin-top: 36px; }
  .project-gallery-heading { display: block; }
  .project-gallery-heading p { margin-top: 12px; }
  .project-gallery { display: block; }
  .project-gallery figure + figure { margin-top: 30px; }
  .project-gallery img { height: auto; max-height: 70svh; }
  .project-related { margin-top: 48px; flex-wrap: wrap; padding-bottom: 48px; }
}