/* Portreti i parovi: one person per spread, couples as facing pages. */
.vw-o{display:block;width:100%;height:100%;cursor:zoom-in}
.vw-o:focus-visible{outline-offset:-4px}

/* ============ hero: one word across the page, one landscape across both halves ============ */
.ph{align-items:end;padding-top:104px}
.ph-h{grid-column:m 1/m-end;grid-row:1;--span:12;--fmax:330px;letter-spacing:-.018em;line-height:.92}
.ph-h .ln{margin-right:0;padding-right:0}
.ph-w{grid-column:full-start/full-end;grid-row:2;margin-top:clamp(14px,1.6vw,26px);aspect-ratio:12/5;max-height:calc(100lvh - 120px);overflow:hidden;background:var(--band)}
@media (max-width:899px){
  .ph{padding-top:96px}
  .ph-h{--fmaxm:140px}
  .ph-w{aspect-ratio:4/3}
}

/* ============ profiles: one person per frame, never the same size twice ============ */
.pp{padding:clamp(80px,8vw,140px) 0 clamp(110px,11vw,180px);align-items:start;row-gap:0}
.pp-line{grid-column:m 1/m 9;grid-row:1;font-weight:700;font-size:clamp(30px,3.4vw,58px);letter-spacing:-.008em;line-height:1.05;text-wrap:balance;margin-bottom:clamp(60px,6vw,110px)}
.pp-a,.pp-b,.pp-c,.pp-d,.pp-e{overflow:hidden;background:var(--band)}
.pp-a{grid-column:m 1/m 7;grid-row:2/4;aspect-ratio:3/4}
.pp-b{grid-column:m 8/m-end;grid-row:2;aspect-ratio:4/5;margin-top:clamp(80px,10vw,180px)}
.pp-c{grid-column:m 8/m 11;grid-row:3;aspect-ratio:3/4;margin-top:var(--gut)}
.pp-d{grid-column:m 3/m 7;grid-row:4;aspect-ratio:1/1;margin-top:var(--gut)}
.pp-e{grid-column:m 8/m-end;grid-row:4;aspect-ratio:3/4;margin-top:clamp(60px,7vw,120px)}
.pp-b{transition-delay:.1s}.pp-c{transition-delay:.18s}
@media (max-width:899px){
  .pp-line{grid-column:m 1/m-end;font-size:clamp(26px,7.4vw,36px);margin-bottom:44px}
  .pp-a{grid-column:full-start/full-end;grid-row:2}
  .pp-b{grid-column:m 4/m-end;grid-row:3;margin-top:var(--gut)}
  .pp-c{grid-column:m 1/m 7;grid-row:4;margin-top:var(--gut)}
  .pp-d{grid-column:m 7/m-end;grid-row:4;align-self:end}
  .pp-e{grid-column:m 1/m 10;grid-row:5;margin-top:var(--gut)}
}

/* ============ i parovi: pairs that rhyme, side by side ============ */
.pc{padding:0 0 clamp(110px,11vw,180px)}
.pc-h{grid-column:1/-1;--span:12;--fmax:220px;line-height:.98;margin-bottom:clamp(40px,4.6vw,80px)}
.pc-wall{display:grid;gap:var(--gut)}
.pc-row{display:grid;grid-template-columns:7fr 5fr;column-gap:var(--gut);height:clamp(480px,82lvh,900px)}
.pc-r1{grid-template-columns:5fr 7fr}
.pc-f{overflow:hidden;background:var(--band);margin:0}
@media (max-width:899px){
  .pc-h{--fmaxm:100px}
  .pc-row,.pc-r1{grid-template-columns:1fr 1fr;height:auto;column-gap:8px}
  .pc-wall{gap:8px}
  .pc-f{aspect-ratio:3/4}
  .pc-r0 .pc-f:first-child,.pc-r1 .pc-f:last-child{grid-column:1/-1;aspect-ratio:4/5}
  .pc-r1 .pc-f:last-child{grid-row:1}
}

/* ============ what is certain ============ */
.pf{padding:0 0 clamp(110px,11vw,180px)}
.pf-g{align-items:end}
.pf-n{grid-column:1/9;display:flex;flex-wrap:wrap;align-items:center;gap:.2em .5em;font-weight:800;font-size:clamp(40px,5vw,86px);letter-spacing:-.012em;line-height:1}
.pf-n .chip-xl{font-size:max(17px,.3em);padding:.36em .9em .42em .74em;letter-spacing:-.01em;white-space:normal}
.pf-x{grid-column:1/7;margin-top:28px;font-size:var(--body);font-weight:500;line-height:1.5;max-width:30em}
.pf-b{grid-column:10/13;grid-row:1/3;justify-self:end;align-self:end}
@media (max-width:899px){
  .pf-n,.pf-x{grid-column:1/-1}
  .pf-n{font-size:clamp(36px,10vw,52px)}
  .pf-b{grid-column:1/-1;grid-row:3;justify-self:start;margin-top:26px}
}

/* ============ the viewer: full screen, light, native swipe on phones ============ */
.vw{position:fixed;inset:0;z-index:80;background:var(--paper)}
.vw-tr{display:flex;height:100%;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior:contain;scrollbar-width:none;outline:none}
.vw-tr::-webkit-scrollbar{display:none}
/* each slide is a full-screen box; the photo is CONTAINED in a box inset from the edges, so the close button (top right)
   and the arrows (left and right) always sit around it, never on it, at any window size or orientation */
.vw-s{position:relative;flex:0 0 100%;height:100%;scroll-snap-align:center}
.vw-s picture{position:absolute;inset:84px 84px 40px;width:auto;height:auto}
.vw-s img{width:100%;height:100%;object-fit:contain}
.vw-x,.vw-p,.vw-n{position:absolute;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--band);color:var(--ink);transition:background-color .3s}
.vw-x:hover,.vw-p:hover,.vw-n:hover{background:var(--band2)}
.vw-x svg,.vw-p svg,.vw-n svg{width:20px;height:20px}
.vw-x{top:16px;right:16px}
.vw-p{left:16px;top:50%;margin-top:-26px}
.vw-n{right:16px;top:50%;margin-top:-26px}
html.vw-open,html.vw-open body{overflow:hidden}
.vw.is-in{animation:vwIn .6s var(--e1) both}
@keyframes vwIn{from{clip-path:inset(50% 0 50% 0)}to{clip-path:inset(0 0 0 0)}}
@media (max-width:760px){
  .vw-p,.vw-n{top:auto;bottom:16px;margin-top:0}
  .vw-p{left:16px}.vw-n{right:16px}
  .vw-s picture{inset:80px 0 84px}
}