/* ============================================================
   MONOGRAM PORTFOLIO v26 (2026-10-16), "the gallery at night"
   Built on Olson Kundig's Montana Beach House page: a white opening (photo, statement,
   credits, plan), then the whole page turns to a deep Monogram navy-black and the home
   is laid out as a collage on a 12 column grid, short paragraphs sitting in the open
   space beside the photos, a few photos that page through 1/3. A pale paper band near
   the end, one last big dusk photo, then the sales sections.
   Rules kept: photos are never cropped, nothing sits on top of a photo, phones get one
   simple column, sales only at the bottom.
   ============================================================ */
.pn{--ink:#0E1620;--paper:#EFEEEA;--g:max(16px,min(2vw,28px));--gap:clamp(8px,.75vw,12px);background:#fff}
.pn figure{margin:0;position:relative}
.pn figure img{display:block;width:100%;height:auto;aspect-ratio:var(--r);background:rgba(127,140,152,.18);cursor:zoom-in}
.pn .gx{padding-left:max(var(--g),env(safe-area-inset-left,0px));padding-right:max(var(--g),env(safe-area-inset-right,0px))}

/* the 12 column collage grid */
.pn-g{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);row-gap:var(--gap);align-items:start}
.pn-g>*{min-width:0}
.pn-g .end{align-self:end}
.pn-g .mid{align-self:center}
.pn-s{padding-block:clamp(36px,5vw,96px) 0}
.pn-s.tight{padding-top:var(--gap)}

/* ---------- white opening ---------- */
.pn-open{background:#fff;color:#16202B}
.pn-name{display:flex;justify-content:space-between;align-items:baseline;gap:10px 24px;flex-wrap:wrap;padding-block:clamp(22px,2.4vw,34px) 0}
.pn-name h1{margin:0;font:500 clamp(30px,3.4vw,52px)/1 var(--disp);letter-spacing:-.035em;color:#0E1620}
.pn-name p{margin:0;font:500 12px/1.4 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:#5A6B7C}
.pn-st{padding-block:clamp(22px,2.6vw,40px) clamp(48px,6vw,110px)}
.pn-st p.big{grid-column:1/9;margin:0;font:400 clamp(22px,2.15vw,34px)/1.3 var(--sans);letter-spacing:-.015em;color:#16202B;text-wrap:pretty}
.pn-cr{grid-column:10/13;margin:0;text-align:right;display:flex;flex-direction:column;gap:16px}
.pn-cr dt{font:600 10.5px/1.3 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:#5A6B7C}
.pn-cr dd{margin:3px 0 0;font:500 14.5px/1.4 var(--sans);color:#0E1620}
.pn-open .pn-plan img{background:#fff}

/* ---------- the dark gallery ---------- */
.pn-dark{background:var(--ink);color:#fff;padding-bottom:clamp(64px,8vw,140px)}
.pn-dark .pn-s:first-child{padding-top:var(--gap)}
.pn-t{font:400 clamp(14px,1vw,15.5px)/1.62 var(--sans);color:rgba(255,255,255,.84);max-width:34ch;margin:0}
.pn-t.r{justify-self:end}
.pn-open .pn-t{color:#333a40}

/* little 1/3 photo pagers (desktop and tablet only) */
.pn-sl{position:relative}
.pn-sl img{display:none}
.pn-sl img.on{display:block}
.pn-ctl{display:flex;justify-content:flex-end;align-items:center;gap:14px;margin-top:10px;font:500 12px/1 var(--sans);color:rgba(255,255,255,.7);letter-spacing:.06em}
.pn-ctl button{appearance:none;border:0;background:none;color:inherit;font:400 22px/1 var(--sans);padding:2px 6px;cursor:pointer}
.pn-ctl button:hover{color:#fff}

/* ---------- pale band near the end ---------- */
.pn-pale{background:var(--paper);color:#16202B;padding-block:clamp(48px,6vw,110px)}
.pn-q{margin:0;font:italic 400 clamp(18px,1.5vw,23px)/1.5 var(--sans);color:#16202B;max-width:30ch}
.pn-q+span{display:block;margin-top:14px;font:600 10.5px/1.3 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:#5A6B7C}

/* ---------- last photo, edge to edge, then the way out ---------- */
.pn-last{background:var(--ink);padding:0 0 clamp(36px,4vw,64px)}
.pn-last figure img{cursor:default}
.pn-out{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:12px 22px;padding-top:clamp(28px,3vw,44px);font:600 12px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase}
.pn-out a{color:#fff;text-decoration:none;padding-bottom:6px;border-bottom:1px solid rgba(255,255,255,.6)}
.pn-out a:hover{border-color:transparent}
.pn-out i{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.6)}
.pn~.lo,.pn .lo{margin-top:0}

/* ---------- soft arrival ---------- */
.pn-js .pn figure,.pn-js .pn .pn-t{opacity:0;transform:translateY(26px);transition:opacity 1.1s ease,transform 1.2s cubic-bezier(.22,.7,.3,1)}
.pn-js .pn .in{opacity:1!important;transform:none!important}
@media (prefers-reduced-motion:reduce){.pn-js .pn figure,.pn-js .pn .pn-t{opacity:1;transform:none;transition:none}}

/* ---------- tablet: keep the collage, loosen it ---------- */
@media(max-width:1000px){
  .pn-st p.big{grid-column:1/13}
  .pn-cr{grid-column:1/13;text-align:left;display:grid;grid-template-columns:repeat(2,1fr)}
}
/* ---------- phone: one simple column, words above photos, pagers become plain stacks ---------- */
@media(max-width:700px){
  .pn-g{display:flex;flex-direction:column;gap:10px}
  .pn-g>*{width:100%!important;margin:0!important}
  .pn-g>.pn-t{order:-1;margin:18px 0 6px!important;max-width:none}
  .pn-g>figure.port{width:82%!important;align-self:flex-start}
  .pn-g>figure.port.rt{align-self:flex-end}
  .pn-sl img{display:block;margin-bottom:10px}
  .pn-ctl{display:none}
  .pn-s{padding-top:44px}
}