/* portfolio page */
.pf-hero{position:relative;padding:clamp(120px,15vw,190px) 0 clamp(30px,4vw,56px);overflow:hidden}
.pf-hero-in{position:relative;display:flex;align-items:center;min-height:min(72vh,640px)}
.pf-copy{position:relative;z-index:2;display:flex;flex-direction:column;gap:22px;max-width:640px}
.pf-hero h1{font-size:clamp(52px,7.2vw,116px)}
.pf-hero h1 em{font-style:italic;color:var(--accent)}
.w{display:inline-block;overflow:hidden;vertical-align:bottom;padding:0 .05em .14em;margin:0 -.05em -.14em}
.w>span{display:inline-block;transform:translateY(115%);animation:pfRise 1.25s cubic-bezier(.2,.8,.2,1) var(--d,0s) forwards}
@keyframes pfRise{to{transform:none}}
.pf-fade{opacity:0;translate:0 16px;animation:pfFade 1s ease var(--d,0s) forwards}
@keyframes pfFade{to{opacity:1;translate:0 0}}
.pf-lead{margin:0;max-width:480px;color:var(--mute);font-size:clamp(15px,1.5vw,18px);line-height:1.6}
.pf-scroll{display:inline-flex;align-items:center;gap:14px;width:max-content;font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--ink);padding:6px 0}
.pf-ar{position:relative;width:1px;height:40px;background:var(--line);overflow:hidden}
.pf-ar::after{content:"";position:absolute;left:0;top:0;width:1px;height:16px;background:var(--accent);animation:pfDrop 1.8s cubic-bezier(.6,0,.4,1) infinite}
@keyframes pfDrop{from{transform:translateY(-16px)}to{transform:translateY(42px)}}
.pf-float{position:absolute;right:0;top:50%;transform:translateY(-50%);width:min(50%,620px);height:min(78vh,600px);z-index:1}
.pc{position:absolute;left:var(--l);top:var(--t);width:var(--w);rotate:var(--r);opacity:0;animation:pcIn 1.2s cubic-bezier(.2,.8,.2,1) var(--ad,.5s) forwards;will-change:translate}
@keyframes pcIn{from{opacity:0;scale:.8;filter:blur(8px)}to{opacity:1;scale:1;filter:blur(0)}}
.pc-in{padding:6px;background:#f3f0ea;border-radius:3px;box-shadow:0 34px 60px -22px rgba(0,0,0,.75);animation:pcBob var(--bd,7s) ease-in-out infinite alternate}
.pc-in img{display:block;width:100%;height:auto;border-radius:1px}
@keyframes pcBob{from{transform:translateY(-9px)}to{transform:translateY(9px)}}
@media (max-width:900px){
  .pf-hero-in{flex-direction:column;align-items:flex-start;min-height:0;gap:10px}
  .pf-float{position:relative;right:auto;top:auto;transform:none;width:100%;height:min(86vw,380px);margin-top:18px}
}

/* ticker */
.pf-marq{overflow:hidden;border-block:1px solid var(--line);padding:16px 0}
.pf-marq-t{display:flex;align-items:center;width:max-content;will-change:transform}
.pf-marq-t b{font-family:var(--f-disp);font-weight:300;font-size:clamp(40px,6.4vw,92px);line-height:1;white-space:nowrap;padding:0 .3em;color:transparent;-webkit-text-stroke:1px rgba(243,240,234,.4)}
.pf-marq-t i{font-style:normal;color:var(--accent);font-size:clamp(18px,2.4vw,32px)}

.pf-sec{padding:clamp(26px,4vw,48px) 0 clamp(70px,9vw,130px)}
.pf-filter{position:relative;display:flex;flex-wrap:wrap;gap:10px;padding:18px 0 6px}
.chip{position:relative;z-index:1;min-height:44px;padding:0 22px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--ink);font-family:var(--f-body);font-size:12px;letter-spacing:.2em;text-transform:uppercase;cursor:pointer;transition:color .35s ease,border-color .3s ease}
.chip sup{font-size:9px;opacity:.6;margin-left:3px;letter-spacing:0}
.chip:hover,.chip:focus-visible{border-color:var(--accent)}
.chip.on{background:transparent;border-color:transparent;color:var(--accent-ink)}
.pf-pill{position:absolute;left:0;top:0;z-index:0;width:0;height:0;border-radius:999px;background:var(--accent);pointer-events:none;transition:transform .6s cubic-bezier(.2,.9,.2,1),width .6s cubic-bezier(.2,.9,.2,1),height .3s ease}
.pf-count{margin:18px 0 22px}

/* grid */
.pf-grid{display:flex;gap:16px;align-items:flex-start}
.pf-col{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:16px}
.pf-hold{display:none}
.pf{position:relative;margin:0;overflow:hidden;border-radius:4px;background:var(--bg2);opacity:0;translate:0 44px;will-change:transform;
  transition:opacity .9s ease var(--sd,0s),translate 1s cubic-bezier(.2,.8,.2,1) var(--sd,0s),transform .35s ease-out}
.pf.in{opacity:1;translate:0 0}
.pf.out{display:none}
.pf-b{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in;line-height:0;filter:blur(16px) saturate(.3) brightness(.7);transition:filter 1.8s ease var(--sd,0s)}
.pf.in .pf-b{filter:none}
.has-cur .pf-b{cursor:none}
.pf img{display:block;width:100%;height:auto;scale:1.24;transition:scale 1.5s cubic-bezier(.2,.8,.2,1) var(--sd,0s),filter .6s ease;will-change:translate}
.pf.in img{scale:1.1}
.pf.in:hover img,.pf.in:focus-within img{scale:1.17;transition-delay:0s;transition-duration:.9s}
.pf::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .4s ease;background:radial-gradient(380px circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.2),transparent 62%)}
.pf:hover::after{opacity:1}
.pf figcaption{position:absolute;left:0;right:0;bottom:0;z-index:1;display:flex;flex-direction:column;gap:4px;padding:56px 18px 16px;background:linear-gradient(to top,rgba(8,8,10,.82),transparent);pointer-events:none;opacity:0;transform:translateY(12px);transition:opacity .45s ease,transform .5s cubic-bezier(.2,.8,.2,1)}
.pf figcaption span{font-family:var(--f-disp);font-size:20px;line-height:1.1}
.pf figcaption small{font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--accent)}
.pf:hover figcaption,.pf:focus-within figcaption{opacity:1;transform:none}
.pf-b:focus-visible{outline:2px solid var(--accent);outline-offset:-4px}
@media (hover:none){.pf figcaption{opacity:1;transform:none;padding-top:40px}.pf figcaption span{font-size:16px}}
@media (max-width:1000px){}
@media (max-width:520px){.pf-grid,.pf-col{gap:10px}.chip{padding:0 16px;font-size:11px}}

/* "View" cursor */
.pf-cur{position:fixed;left:0;top:0;z-index:60;width:0;height:0;pointer-events:none}
.pf-cur span{position:absolute;left:34px;top:34px;display:flex;align-items:center;height:26px;padding:0 12px;border-radius:999px;background:var(--accent);color:var(--accent-ink);font-size:10px;letter-spacing:.26em;text-transform:uppercase;white-space:nowrap;scale:0;transform-origin:0 0;transition:scale .35s cubic-bezier(.2,.9,.2,1)}
.pf-cur.on span{scale:1}
@media (hover:none){.pf-cur{display:none}}

/* viewer */
dialog::backdrop{background:rgba(6,6,8,.88);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
dialog[open]::backdrop{animation:pfBd .5s ease}
@keyframes pfBd{from{opacity:0}to{opacity:1}}
dialog[open] #lbCap,dialog[open] .row{animation:pfFade .8s ease .25s both}

/* camera layer: depth of field, autofocus reticle, shutter flash, loupe */
.pf-grid.dof .pf:not(.pf-af) img{filter:blur(2.8px) brightness(.5) saturate(.7)}
.vf{position:absolute;inset:0;z-index:2;pointer-events:none;color:#fff;font-style:normal}
.vf b{position:absolute;width:22px;height:22px;border:0 solid currentColor;opacity:0;transition:opacity .3s ease,inset .55s cubic-bezier(.2,.9,.2,1),border-color .25s ease}
.vf b:nth-child(1){left:38px;top:38px;border-width:2px 0 0 2px}
.vf b:nth-child(2){right:38px;top:38px;border-width:2px 2px 0 0}
.vf b:nth-child(3){left:38px;bottom:38px;border-width:0 0 2px 2px}
.vf b:nth-child(4){right:38px;bottom:38px;border-width:0 2px 2px 0}
.pf.pf-af .vf b{opacity:1}
.pf.pf-af .vf b:nth-child(1){left:14px;top:14px}.pf.pf-af .vf b:nth-child(2){right:14px;top:14px}
.pf.pf-af .vf b:nth-child(3){left:14px;bottom:14px}.pf.pf-af .vf b:nth-child(4){right:14px;bottom:14px}
.vf-pt{position:absolute;left:0;top:0;width:56px;height:56px;border:1.5px solid currentColor;opacity:0;scale:1.9;transition:scale .4s cubic-bezier(.2,.9,.2,1),opacity .2s ease,border-color .2s ease,transform .1s ease-out}
.vf-pt::before,.vf-pt::after{content:"";position:absolute;background:currentColor;left:50%;top:50%}
.vf-pt::before{width:10px;height:1.5px;margin:-.75px 0 0 -5px}.vf-pt::after{width:1.5px;height:10px;margin:-5px 0 0 -.75px}
.pf.pf-af .vf-pt{opacity:.95;scale:1}
.vf em{position:absolute;font-style:normal;font-size:10px;line-height:1;letter-spacing:.24em;text-transform:uppercase;padding:6px 10px;border-radius:999px;background:rgba(8,8,10,.62);opacity:0;transition:opacity .4s ease .15s,color .25s ease}
.vf-tag{left:46px;top:16px}.vf-no{right:46px;top:16px}
.vf-tag::before{content:"AF \00b7  focusing"}
.pf.pf-af .vf em{opacity:1}
.pf.pf-lock .vf b{color:var(--accent);border-color:var(--accent)}
.pf.pf-lock .vf-tag{color:#fff;box-shadow:inset 0 0 0 1px var(--accent)}
.pf.pf-lock .vf-tag::before{content:"AF \00b7  locked"}
.pf.pf-lock .vf-pt{border-color:var(--accent);color:var(--accent);animation:vfLock .5s cubic-bezier(.2,.9,.2,1)}
@keyframes vfLock{0%{scale:1.35}100%{scale:1}}
.pf-flash{position:fixed;inset:0;z-index:70;background:#fff;opacity:0;pointer-events:none}
.lb-stage{position:relative;display:inline-block;max-width:100%;line-height:0}
.lb-stage.loupe-on{cursor:none}
.lb-loupe{position:absolute;width:190px;height:190px;border-radius:50%;border:2px solid rgba(255,255,255,.9);box-shadow:0 18px 50px rgba(0,0,0,.6),inset 0 0 0 1px rgba(0,0,0,.35);background-repeat:no-repeat;pointer-events:none;opacity:0;scale:.6;transition:opacity .25s ease,scale .35s cubic-bezier(.2,.9,.2,1)}
.lb-loupe.on{opacity:1;scale:1}
#lbLoupeBtn[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
@media (prefers-reduced-motion:reduce){
  .pf-b,.pf.in .pf-b{filter:none;transition:none}.pf-grid.dof .pf:not(.pf-af) img{filter:none}
  .vf-pt,.vf b,.vf em,.lb-loupe{transition:none}.pf.pf-lock .vf-pt{animation:none}
  .w>span,.pf-fade,.pc,.pc-in,.pf-ar::after,dialog[open] #lbCap,dialog[open] .row{animation:none}
  .w>span{transform:none}.pf-fade,.pc{opacity:1;translate:none}
  .pf{opacity:1;translate:none;transition:none}.pf img{scale:1.04;transition:none}.pf.in img{scale:1.04}
  .pf-pill,.pf-cur span,.chip{transition:none}
}