/* ============================================================
   MONOGRAM PORTFOLIO v27 (2026-10-16): brand title plate + scroll motion
   Loads after portfolio-v26.css.
   ============================================================ */

/* ---------- the title plate: set like the Monogram lockup (mark + wide caps + bold small caps) ---------- */
.pn-plate{display:flex;flex-direction:column;align-items:center;text-align:center;padding-block:clamp(44px,5.5vw,96px) clamp(30px,3.4vw,56px)}
.pn-lock{display:flex;align-items:center;gap:clamp(14px,1.6vw,24px)}
.pn-lock img{width:clamp(56px,6vw,92px);height:auto;flex:none;cursor:default}
.pn-lock div{display:flex;flex-direction:column;align-items:flex-start;text-align:left}
.pn-lock h1{margin:0;font:500 clamp(34px,5.4vw,84px)/.95 var(--disp);letter-spacing:.13em;text-transform:uppercase;color:#1A2D42;padding-left:.06em}
.pn-lock span{margin-top:clamp(8px,.8vw,12px);font:800 clamp(11px,1vw,15px)/1 var(--disp);letter-spacing:.42em;text-transform:uppercase;color:#1A2D42}
.pn-kick{margin:0 0 clamp(18px,2vw,30px);font:600 11px/1.3 var(--sans);letter-spacing:.3em;text-transform:uppercase;color:#5A6B7C}
.pn-meta{margin:clamp(26px,3vw,44px) 0 0;padding-top:clamp(16px,1.6vw,22px);border-top:1.5px solid #1A2D42;display:flex;justify-content:center;flex-wrap:wrap;gap:10px clamp(22px,3.4vw,56px);font:600 11px/1.3 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:#1A2D42}
.pn-meta i{font-style:normal;color:#5A6B7C;font-weight:500;margin-right:.6em}
.pn-st2{padding-block:clamp(18px,2vw,30px) clamp(56px,7vw,120px)}
.pn-st2 p.big{grid-column:2/12;text-align:center;margin:0 auto;max-width:30em;font:400 clamp(21px,2vw,32px)/1.4 var(--sans);letter-spacing:-.012em;color:#16202B;text-wrap:balance}
@media(max-width:700px){
  .pn-lock{flex-direction:column;gap:14px}
  .pn-lock div{align-items:center;text-align:center}
  .pn-lock h1{font-size:clamp(30px,10vw,44px);letter-spacing:.1em}
  .pn-meta{flex-direction:column;gap:8px}
}

/* ---------- the page color follows you: white, then night navy, then paper ---------- */
.pn{transition:background-color .9s ease}
.pn.bg-dark{background:#0E1620}
.pn.bg-pale{background:#EFEEEA}
.pn .pn-open,.pn .pn-dark,.pn .pn-pale,.pn .pn-last{background:transparent}
.pn-dark .pn-t,.pn-last .pn-out a{transition:color .9s ease}

/* ---------- hero lifts away like a card as you scroll ---------- */
.pn-hero-on .ah-hero{background:#fff!important;overflow:hidden}
.pn-hero-on .ah-hero img{transform-origin:50% 100%;will-change:transform,border-radius;transition:none}

/* ---------- motion pieces (driven by the page script) ---------- */
.pn-mo figure{will-change:transform}
.pn-reveal{clip-path:inset(14% 0 0 0);opacity:0;transition:clip-path 1.3s cubic-bezier(.22,.7,.3,1),opacity 1s ease}
.pn-reveal.in{clip-path:inset(0 0 0 0);opacity:1}
.pn-js .pn figure.pn-reveal{transform:none}
.pn-t.pn-up{opacity:0;transform:translateY(28px);transition:opacity 1s ease .15s,transform 1.1s cubic-bezier(.22,.7,.3,1) .15s}
.pn-t.pn-up.in{opacity:1;transform:none}

/* pager crossfade */
.pn-sl{display:grid}
.pn-sl img{grid-area:1/1;display:block!important;opacity:0;transition:opacity .7s ease}
.pn-sl img.on{opacity:1;position:relative;z-index:1}
.pn-sl .pn-ctl{grid-area:2/1}

/* thin navy progress line under the header */
.pn-prog{position:fixed;left:0;right:0;top:var(--pf-hd,72px);height:2px;background:#C0C8CA;transform-origin:0 50%;transform:scaleX(0);z-index:300;opacity:0;transition:opacity .4s}
.pn-prog.on{opacity:.9}

@media (prefers-reduced-motion:reduce){
  .pn-reveal,.pn-t.pn-up{clip-path:none!important;opacity:1!important;transform:none!important;transition:none!important}
  .pn{transition:none}
}
@media(max-width:700px){
  .pn-sl{display:block}
  .pn-sl img{opacity:1;position:static;margin-bottom:10px}
}

/* figures: unveil once, then drift with the scroll (no crop: the whole photo moves) */
.pn-js .pn figure{opacity:0;clip-path:inset(12% 0 0 0);transform:translate3d(0,var(--dy,0px),0) scale(var(--sc,1))!important;transition:opacity 1s ease,clip-path 1.3s cubic-bezier(.22,.7,.3,1)!important}
.pn-js .pn figure.in{opacity:1!important;clip-path:inset(0 0 0 0)}
.pn-js .pn .pn-t{opacity:0;transform:translate3d(0,calc(var(--dy,0px) + 24px),0)!important;transition:opacity 1s ease .15s!important}
.pn-js .pn .pn-t.in{opacity:1!important;transform:translate3d(0,var(--dy,0px),0)!important}
.pn-js .pn .ah-hero figure,.pn-js .pn-last figure{clip-path:none}
@media (prefers-reduced-motion:reduce){.pn-js .pn figure,.pn-js .pn .pn-t{opacity:1!important;clip-path:none!important;transform:none!important}}