/* Project page — builds on style.css */

/* hero */
.p-hero{position:relative;height:100vh;height:100svh;min-height:560px;overflow:hidden;background:#000}
.p-hero__img{position:absolute;inset:0}
.p-hero__img img{width:100%;height:100%;object-fit:cover;transform:scale(1.1);filter:blur(10px);animation:pHero 1.8s var(--ease) .1s forwards}
@keyframes pHero{to{transform:scale(1);filter:blur(0)}}
.p-hero__shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.45) 0%,rgba(0,0,0,0) 26%,rgba(0,0,0,0) 50%,rgba(0,0,0,.75) 100%)}
.project .hero__frame{opacity:1;transform:none}
.p-hero__content{position:absolute;left:0;right:0;bottom:0;padding:0 calc(var(--gut) + 18px) clamp(64px,10vh,110px)}
.p-back{display:inline-flex;gap:10px;align-items:center;font-size:13px;letter-spacing:.06em;color:rgba(243,239,233,.75);margin-bottom:28px;transition:color .3s,gap .3s}
.p-back:hover{color:var(--ink);gap:14px}
.p-hero .eyebrow{color:#cf7ccd}
.p-title{font:500 clamp(54px,9.5vw,150px)/.92 var(--display);letter-spacing:-.025em;margin:0}
.p-title .line{display:block;overflow:hidden;padding-bottom:.06em}
.p-title .line>*{display:inline-block;transform:translateY(105%);animation:pUp 1.2s var(--ease) .5s forwards}
.p-title .line:nth-child(2)>*{animation-delay:.62s}
.p-title em{font-size:.86em}
@keyframes pUp{to{transform:none}}

/* facts + intro */
.p-intro{display:grid;grid-template-columns:280px 1fr;gap:clamp(40px,7vw,120px);padding-top:clamp(80px,10vw,140px);padding-bottom:clamp(60px,8vw,110px)}
.p-facts{margin:0;display:grid;gap:0;align-content:start}
.p-facts div{display:flex;justify-content:space-between;gap:16px;padding:14px 0;border-top:1px solid var(--line);font-size:14px}
.p-facts div:last-child{border-bottom:1px solid var(--line)}
.p-facts dt{color:var(--muted)}
.p-facts dd{margin:0}
.p-lead__big{font:500 clamp(26px,3.2vw,44px)/1.18 var(--display);letter-spacing:-.01em;margin:0 0 28px;max-width:24ch}
.p-lead__big em{color:var(--muted)}

/* gallery */
.p-gallery{display:grid;gap:clamp(12px,1.6vw,24px)}
.g{position:relative;margin:0;overflow:hidden;border-radius:4px;background:var(--bg-2);cursor:zoom-in}
.g img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.g:hover img{transform:scale(1.03)}
.g figcaption{position:absolute;left:18px;bottom:14px;font-size:12px;letter-spacing:.08em;color:rgba(243,239,233,.85);opacity:0;transform:translateY(6px);transition:opacity .4s,transform .4s var(--ease);text-shadow:0 1px 8px rgba(0,0,0,.5)}
.g:hover figcaption{opacity:1;transform:none}
.g .vf{width:18px;height:18px;z-index:2;opacity:0;transition:opacity .4s,top .5s var(--ease),left .5s var(--ease),right .5s var(--ease),bottom .5s var(--ease)}
.g .vf--tl{top:24px;left:24px}.g .vf--tr{top:24px;right:24px}.g .vf--bl{bottom:24px;left:24px}.g .vf--br{bottom:24px;right:24px}
.g:hover .vf{opacity:1}
.g:hover .vf--tl{top:12px;left:12px}.g:hover .vf--tr{top:12px;right:12px}.g:hover .vf--bl{bottom:12px;left:12px}.g:hover .vf--br{bottom:12px;right:12px}
.g--full{aspect-ratio:16/9}
.g--sea{aspect-ratio:16/10}
.g-row{display:grid;gap:clamp(12px,1.6vw,24px)}
.g-row--2{grid-template-columns:1fr 1fr}
.g-row--2 .g{aspect-ratio:3/2}
.g-row--2 .g--tall,.g-row--tall .g{aspect-ratio:4/5}
.g-row--3{grid-template-columns:repeat(3,1fr)}
.g-row--3 .g{aspect-ratio:4/5}
.g--natural{background:#fff;cursor:zoom-in}
.g--natural img{height:auto;object-fit:contain}
.g-row--offset .g:last-child{margin-top:clamp(40px,8vw,120px)}
.p-quote{margin:clamp(60px,9vw,130px) auto;max-width:18ch;text-align:center;font:400 clamp(30px,4vw,56px)/1.15 var(--serif);font-style:italic;color:var(--ink)}
.p-gallery .reveal:nth-child(even){transition-delay:.08s}

/* contact sheet */
.p-sheet{padding:clamp(90px,12vw,160px) 0 clamp(60px,8vw,100px)}
.sheet{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;background:#050506;padding:28px 18px;border-radius:4px;position:relative}
.sheet::before,.sheet::after{content:"";position:absolute;left:18px;right:18px;height:8px;background:repeating-linear-gradient(90deg,rgba(243,239,233,.18) 0 10px,transparent 10px 22px)}
.sheet::before{top:9px}.sheet::after{bottom:9px}
.sheet button{position:relative;aspect-ratio:3/2;overflow:hidden;padding:0;background:#111}
.sheet img{width:100%;height:100%;object-fit:cover;filter:grayscale(.5) brightness(.75);transition:filter .4s}
.sheet button:hover img{filter:none}
.sheet button span{position:absolute;left:8px;top:6px;font:500 10px/1 var(--body);letter-spacing:.12em;color:#e0b26a;opacity:.9}

/* section heads */
.p-sec-head{margin-bottom:clamp(36px,5vw,64px)}
.p-sec-head--row{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.p-all{display:inline-flex;gap:10px;font-size:14px;color:var(--muted);transition:color .3s,gap .3s}
.p-all:hover{color:var(--ink);gap:14px}

/* film */
.p-film{padding-bottom:clamp(40px,6vw,80px)}
.p-film__box{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:4px;background:#000;cursor:pointer}
.p-film__box>img{width:100%;height:100%;object-fit:cover;filter:brightness(.7);transition:transform 1.4s var(--ease),filter .6s}
.p-film__box:hover>img{transform:scale(1.03);filter:brightness(.8)}
.p-film__frame{position:absolute;inset:clamp(12px,2vw,24px);pointer-events:none;--ink:#f3efe9}
.p-film__frame .vf{width:28px;height:28px;opacity:.8}
.p-film__play{position:absolute;left:50%;top:50%;width:104px;height:104px;margin:-52px 0 0 -52px;border-radius:50%;border:1px solid rgba(243,239,233,.7);color:#f3efe9;display:grid;place-items:center;backdrop-filter:blur(8px);background:rgba(0,0,0,.2);transition:transform .5s var(--ease),background .3s}
.p-film__play .play{border-left-width:16px;border-top-width:10px;border-bottom-width:10px;margin-left:6px}
.p-film__box:hover .p-film__play{transform:scale(1.08);background:rgba(243,239,233,.15)}
.p-film__label{position:absolute;left:clamp(26px,3vw,44px);bottom:clamp(24px,3vw,40px);font:500 12px/1 var(--body);letter-spacing:.18em;text-transform:uppercase;color:#f3efe9}
.p-film__box iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.p-film__box.is-playing{cursor:auto}

/* results */
.p-results{padding-top:clamp(100px,13vw,180px)}
.p-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));border-top:1px solid var(--line)}
.stat{padding:30px 24px 34px 0;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:10px}
.stat b{font:500 clamp(54px,6.4vw,92px)/.9 var(--display);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.stat span{color:var(--muted);font-size:15px;max-width:22ch}
.stat--tbc b{color:var(--line-strong)}
.stat--tbc small{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.p-stats .reveal:nth-child(2){transition-delay:.08s}
.p-stats .reveal:nth-child(3){transition-delay:.16s}
.p-stats .reveal:nth-child(4){transition-delay:.24s}

/* credits — a simple list */
.p-credits{padding-top:clamp(70px,9vw,120px)}
.credits{border-top:1px solid var(--line)}
.credit{display:flex;justify-content:space-between;align-items:baseline;gap:24px;padding:16px 0;border-bottom:1px solid var(--line)}
.credit span{color:var(--muted);font-size:14px}
.credit strong{font:500 17px/1.3 var(--display);text-align:right}

/* next projects */
.p-nexts{padding-top:clamp(70px,9vw,120px);padding-bottom:clamp(40px,6vw,80px)}
.nx-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,26px)}
.nx{display:block}
.nx__img{position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:4px;margin-bottom:18px;background:var(--bg-2);--ink:#f3efe9}
.nx__img img{width:100%;height:100%;object-fit:cover;filter:brightness(.92);transition:transform 1.3s var(--ease),filter .6s}
.nx:hover .nx__img img{transform:scale(1.06);filter:brightness(1)}
.nx__img .vf{width:18px;height:18px;opacity:0;transition:opacity .4s,top .5s var(--ease),left .5s var(--ease),right .5s var(--ease),bottom .5s var(--ease)}
.nx__img .vf--tl{top:24px;left:24px}.nx__img .vf--tr{top:24px;right:24px}.nx__img .vf--bl{bottom:24px;left:24px}.nx__img .vf--br{bottom:24px;right:24px}
.nx:hover .nx__img .vf{opacity:1}
.nx:hover .nx__img .vf--tl{top:12px;left:12px}.nx:hover .nx__img .vf--tr{top:12px;right:12px}.nx:hover .nx__img .vf--bl{bottom:12px;left:12px}.nx:hover .nx__img .vf--br{bottom:12px;right:12px}
.nx__kind{display:block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.nx__name{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font:500 clamp(20px,2vw,26px)/1.2 var(--display)}
.nx__arrow{transition:transform .5s var(--ease)}
.nx:hover .nx__arrow{transform:translateX(6px)}
.nx-grid .reveal:nth-child(2){transition-delay:.1s}
.nx-grid .reveal:nth-child(3){transition-delay:.2s}

.contact--short{min-height:0}

/* viewer */
.viewer{position:fixed;inset:0;z-index:200;background:rgba(5,5,6,.97);display:grid;place-items:center;opacity:0;visibility:hidden;transition:opacity .4s,visibility .4s}
.viewer.is-open{opacity:1;visibility:visible}
.viewer img{max-width:calc(100vw - 160px);max-height:calc(100vh - 140px);object-fit:contain;transition:opacity .3s}
.viewer img.is-swap{opacity:0}
.viewer__frame{position:absolute;inset:clamp(14px,2.4vw,30px);pointer-events:none}
.viewer__frame .vf{opacity:.5}
.viewer__bar{position:absolute;left:0;right:0;bottom:clamp(28px,4vw,46px);display:flex;justify-content:center;gap:18px;font-size:12px;letter-spacing:.1em;color:rgba(243,239,233,.7);font-variant-numeric:tabular-nums}
.viewer__btn{position:absolute;top:50%;width:52px;height:52px;margin-top:-26px;border-radius:50%;border:1px solid rgba(243,239,233,.3);font-size:18px;transition:background .3s,border-color .3s}
.viewer__btn:hover{background:rgba(243,239,233,.1);border-color:var(--ink)}
.viewer__btn--prev{left:clamp(14px,3vw,46px)}
.viewer__btn--next{right:clamp(14px,3vw,46px)}
.viewer__close{position:absolute;top:clamp(20px,3vw,40px);right:clamp(24px,3.4vw,50px);font-size:34px;line-height:1;width:44px;height:44px;opacity:.8}
.viewer__close:hover{opacity:1}

@media (max-width:860px){
  .nx-grid{grid-template-columns:1fr 1fr}
  .nx-grid .nx:nth-child(3){display:none}
  .p-intro{grid-template-columns:1fr}
  .p-facts{grid-template-columns:1fr 1fr;column-gap:24px}
  .p-facts div:nth-last-child(2){border-bottom:1px solid var(--line)}
}
@media (max-width:640px){
  .nx-grid{grid-template-columns:1fr}
  .nx-grid .nx:nth-child(3){display:block}
  .g-row--3{grid-template-columns:1fr 1fr}
  .g-row--3 .g:first-child{grid-column:span 2;aspect-ratio:3/2}
  .g-row--2{grid-template-columns:1fr}
  .g-row--offset .g:last-child{margin-top:0}
  .g figcaption{opacity:1;transform:none}
  .viewer img{max-width:100vw;max-height:calc(100vh - 160px)}
  .viewer__btn{top:auto;bottom:22px;margin:0;width:44px;height:44px}
  .viewer__bar{bottom:36px}
  .sheet{grid-template-columns:repeat(2,1fr)}
}

/* rhythm (see style.css) */
.p-intro{padding-top:var(--sec);padding-bottom:calc(var(--sec) * .7)}
.p-film{padding-bottom:calc(var(--sec) * .5)}
.p-results,.p-credits{padding-top:var(--sec)}
.p-sheet{padding:var(--sec) 0 0}
.p-nexts{padding-top:var(--sec);padding-bottom:0}
.p-sec-head{margin-bottom:var(--head)}

/* plain pages (privacy, terms …) */
.p-plain{padding-top:calc(var(--sec) + 60px);max-width:820px}
.p-plain__body{margin-top:var(--head);color:var(--muted);font-size:17px;line-height:1.7}
.p-plain__body h2,.p-plain__body h3{color:var(--ink);font-family:var(--display);font-weight:500}