/* ============================================================
   projects : /art/ and the eight project pages (round 22, oct 2026)
   one full-screen section per project, fading through its photos.
   monochrome frame; the photographs carry the colour.
   ============================================================ */

/* ---------- intro ---------- */
.pj-intro{position:relative;min-height:80vh;min-height:80svh;display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(130px,20vh,210px) 0 clamp(64px,10vh,120px)}
.pj-intro .wrap > .meta{display:block;margin-bottom:22px}
.pj-intro-copy{margin-top:clamp(28px,4vh,46px);max-width:60ch}
.pj-intro-copy p{color:var(--grey);font-size:1.02rem;line-height:1.8}
.pj-intro-copy p + p{margin-top:1.1em}
.pj-intro-copy .lede{color:var(--off);font-size:clamp(1.06rem,1.5vw,1.24rem);line-height:1.7}

/* ---------- one project, full screen ---------- */
.pj{position:relative;isolation:isolate;min-height:100vh;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;background:var(--black)}
.pj-stage{position:absolute;inset:0;z-index:-1;overflow:hidden;background:var(--black)}
.pj-stage::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(0,0,0,.5) 0%,rgba(0,0,0,.2) 36%,rgba(0,0,0,0) 60%),
             linear-gradient(180deg,rgba(0,0,0,.6) 0%,rgba(0,0,0,0) 20%,rgba(0,0,0,0) 44%,rgba(0,0,0,.5) 68%,rgba(0,0,0,.9) 100%)}
.pj-slide{position:absolute;inset:0;opacity:0;transition:opacity 1.7s ease}
.pj-slide.is-on{opacity:1}
.pj-slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--op,50% 50%);
  opacity:var(--dim,.86);transform:scale(1.06);transition:transform 11s linear,filter .8s ease}
.pj-slide.is-on img{transform:scale(1)}
.pj-slide--pair{display:grid;grid-template-columns:1fr 1fr;gap:2px}
.pj-half{position:relative;overflow:hidden}
@media (orientation:portrait){
  .pj-slide[data-o="l"]{display:none}
  .pj-slide img{object-position:var(--op-p,var(--op,50% 50%))}
  .pj-stage::after{background:linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,0) 15%,rgba(0,0,0,0) 34%,rgba(0,0,0,.6) 56%,rgba(0,0,0,.93) 100%)}
}
@media (orientation:landscape){.pj-slide[data-o="p"]{display:none}}

.pj-body{width:100%;padding-bottom:clamp(54px,9vh,108px);text-shadow:0 1px 3px rgba(0,0,0,.45),0 0 28px rgba(0,0,0,.5)}
/* .pj in front: projects.css loads before style.css, so these need the extra weight */
.pj .pj-meta{display:block;color:#DCDCDC;margin-bottom:18px}
.pj .pj-title{font-size:clamp(2.5rem,6.2vw,5.4rem);line-height:1;letter-spacing:-.02em;max-width:15ch}
.pj .pj-title--long{font-size:clamp(2.1rem,4.6vw,4.1rem);line-height:1.04;max-width:22ch}
.pj-title a{color:inherit}
.pj-title a::after{content:"";position:absolute;inset:0;z-index:1}
.pj-title a:focus-visible{outline:none}
.pj-title a:focus-visible::after{outline:1px solid var(--white);outline-offset:-10px}
.pj-line{margin-top:22px;max-width:44ch;color:#E4E4E4;font-size:clamp(1rem,1.3vw,1.1rem);line-height:1.6}
.pj .pj-go{display:inline-block;margin-top:28px;color:var(--white);border-bottom:1px solid rgba(255,255,255,.35);padding-bottom:4px;transition:border-color .3s ease}
.pj:hover .pj-go,.pj:focus-within .pj-go{border-color:var(--white)}
.pj:hover .pj-slide.is-on img{filter:brightness(1.1)}

/* ---------- side index (wide screens) ---------- */
.pj-spine{position:fixed;right:clamp(16px,2.2vw,34px);top:50%;transform:translateY(-50%);z-index:40;display:flex;flex-direction:column;align-items:flex-end;gap:20px;opacity:0;pointer-events:none;transition:opacity .5s ease}
.pj-spine.on{opacity:1;pointer-events:auto}
.pj-spine a{display:flex;flex-direction:row-reverse;align-items:center;gap:12px}
.pj-dot{width:7px;height:7px;flex:0 0 auto;background:rgba(255,255,255,.3);transition:background .35s ease,transform .35s ease}
.pj-lbl{font-family:'Work Sans',sans-serif;font-weight:500;font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;white-space:nowrap;color:var(--grey);
  opacity:0;transform:translateX(6px);transition:opacity .35s ease,transform .35s ease,color .35s ease}
.pj-spine a:hover .pj-lbl,.pj-spine a:focus-visible .pj-lbl,.pj-spine a.on .pj-lbl{opacity:1;transform:none}
.pj-spine a.on .pj-lbl{color:var(--white)}
.pj-spine a.on .pj-dot{background:var(--white);transform:scale(1.25)}
@media(max-width:1180px){.pj-spine{display:none}}

/* ---------- closing list ---------- */
.pj-close{padding:clamp(80px,13vh,150px) 0}

/* ---------- project pages ---------- */
.pj.pj--hero .pj-title{max-width:16ch}
.pj.pj--hero .pj-title--long{max-width:22ch}
.pj--hero .scroll-cue{z-index:1}
.pj-read{padding:clamp(80px,14vh,170px) 0 clamp(24px,4vh,48px)}
.pj-read .read .facts{margin-top:clamp(36px,5vh,60px)}
.pj-read .read p + .pull{margin-top:1.4em}
/* photo captions line up with the text, not the full-bleed rail */
.evidence > figcaption.pj-cap{max-width:var(--max);padding:0 var(--gutter)}

/* video, loaded only when asked for */
.pj-video{position:relative;aspect-ratio:16/9;background:var(--surface);border:1px solid var(--hairline-soft);overflow:hidden}
.pj-video a,.pj-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.pj-video img{width:100%;height:100%;object-fit:cover;opacity:.78;transition:opacity .5s ease,transform 1.4s var(--ease)}
.pj-video a:hover img,.pj-video a:focus-visible img{opacity:1;transform:scale(1.015)}
.pj-play{position:absolute;left:50%;top:50%;width:74px;height:74px;margin:-37px 0 0 -37px;border:1px solid rgba(255,255,255,.75);background:rgba(0,0,0,.4);transition:background .3s ease}
.pj-play::before{content:"";position:absolute;left:29px;top:23px;border-style:solid;border-width:14px 0 14px 22px;border-color:transparent transparent transparent var(--white)}
.pj-video a:hover .pj-play,.pj-video a:focus-visible .pj-play{background:rgba(0,0,0,.65)}

/* next project */
.pj-nav{border-top:1px solid var(--hairline-soft)}
.pj-next{position:relative;isolation:isolate;display:flex;align-items:flex-end;min-height:clamp(320px,54vh,600px);overflow:hidden}
.pj-next img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;opacity:.5;transition:opacity .7s ease,transform 1.6s var(--ease)}
.pj-next::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(0,0,0,.35) 0%,rgba(0,0,0,.15) 40%,rgba(0,0,0,.85) 100%)}
.pj-next:hover img,.pj-next:focus-visible img{opacity:.72;transform:scale(1.02)}
.pj-next-in{display:block;width:100%;padding-bottom:clamp(40px,7vh,84px)}
.pj-next-in .meta{display:block;margin-bottom:14px;color:#D0D0D0}
.pj-next .pj-next-t{display:block;font-size:clamp(1.9rem,4.8vw,3.8rem);line-height:1.04;max-width:20ch}
.pj-aux{display:flex;flex-wrap:wrap;gap:14px 34px;padding-top:26px;padding-bottom:clamp(60px,10vh,110px)}

@media (prefers-reduced-motion:reduce){
  .pj-slide{transition:none}
  .pj-slide img{transform:none!important;transition:none}
}