/* Project pages — shared layout. Uses the type tokens from site.css.
   Everything sits in one centred column (8 of 12) except the opening image. */
.col{grid-column:3/11}

/* 1 · opening image */
.opener{margin:0;height:calc(100svh - 68px);min-height:420px;overflow:hidden;background:#eeecea}
.opener img{width:100%;height:112%;object-fit:cover;transform:translate3d(0,var(--py,0px),0)}

/* 2 · statement + challenge | approach */
.intro-block{padding-block:clamp(72px,10vw,144px) clamp(56px,7vw,104px)}
.kicker{display:flex;justify-content:space-between;align-items:baseline;gap:16px;font-size:var(--fs-sm);margin-bottom:clamp(20px,2.4vw,32px)}
.kicker h1{font-weight:400;font-size:var(--fs-sm)}
.intro-block .statement{font-size:var(--fs-3xl);line-height:var(--lh-3xl);letter-spacing:var(--ls-3xl);max-width:18ch}
.pair-text{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,64px);margin-top:clamp(48px,6vw,88px)}
.pair-text h2{font-weight:400;font-size:var(--fs-sm);color:var(--grey);margin-bottom:10px}
.pair-text p{font-size:var(--fs-lg);line-height:var(--lh-lg);letter-spacing:var(--ls-lg)}
.ideas{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);margin-top:clamp(40px,5vw,72px)}
.ideas li{border-top:1px solid var(--ink);padding-top:12px;font-size:var(--fs-xl);line-height:var(--lh-xl);letter-spacing:var(--ls-xl)}
.ideas li span{display:block;font-size:var(--fs-sm);letter-spacing:0;color:var(--grey);margin-bottom:20px}

/* 3 · gallery: singles and pairs inside the column */
.gallery{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,4vw,56px) var(--gap)}
.shot{grid-column:1/-1;margin:0}
.shot.half{grid-column:span 1}
.shot .frame{overflow:hidden;border-radius:10px;background:#eeecea;aspect-ratio:16/9}
.shot.half .frame{aspect-ratio:4/3}
.shot.tall .frame{aspect-ratio:14/15}
.shot img{width:100%;height:100%;object-fit:cover}
.shot figcaption{margin-top:10px;font-size:var(--fs-sm);color:var(--grey)}

/* 4 · story */
.story{padding-block:clamp(96px,12vw,176px) 0}
.story__text{grid-column:4/10}
.story__text h2{font-weight:400;font-size:var(--fs-sm);color:var(--grey);margin-bottom:10px}
.story__text h2+p{font-size:var(--fs-body);line-height:var(--lh-body)}
.story__text p+h2{margin-top:clamp(32px,4vw,48px)}

/* 5 · details */
.details{padding-block:clamp(80px,10vw,144px) 0}
.details__row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,64px);border-top:1px solid var(--line);padding-top:16px;font-size:var(--fs-md)}
.details dl{display:grid;gap:14px}
.details dt,.details .label{font-size:var(--fs-sm);color:var(--grey);margin-bottom:2px}
.details ul li{line-height:1.7}

/* 6 · next project */
.next{display:block;margin-top:clamp(80px,10vw,144px);border-top:1px solid var(--line);padding-top:16px}
.next .label{font-size:var(--fs-sm);color:var(--grey)}
.next__row{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-top:10px;font-size:var(--fs-3xl);line-height:var(--lh-3xl);letter-spacing:var(--ls-3xl)}
.next__arrow{transition:transform .5s var(--ease)}
.next:hover .next__name{color:var(--grey)}
.next:hover .next__arrow{transform:translateX(8px)}
.next__name{transition:color .35s}

@media (max-width:760px){
  .col,.story__text{grid-column:1/-1}
  .opener{height:62svh}
  .pair-text,.details__row{grid-template-columns:1fr;gap:28px}
  .ideas{grid-template-columns:1fr}
  .gallery{grid-template-columns:1fr}
  .shot.half{grid-column:1/-1}
}
@media (prefers-reduced-motion:reduce){.opener img{transform:none;height:100%}}