/* 18. rođendani: the night issue. */

/* ============ hero: the number is the cover, locked to a tall photo ============ */
.eh{align-items:end;padding:112px 0 clamp(80px,8vw,140px)}
.eh-ph{grid-column:m 1/m 7;grid-row:1/3;height:clamp(520px,calc(100lvh - 150px),900px);overflow:hidden;background:var(--band)}
.eh-t{grid-column:m 7/m-end;grid-row:1;align-self:start;display:flex;flex-direction:column;min-width:0}
.eh-n{--span:6;--fmax:440px;letter-spacing:-.02em;line-height:.9}
.eh-n .ln{margin-right:0;padding-right:0}
.eh-w{--span:6;--fmax:170px;letter-spacing:-.012em;line-height:.98;margin-top:.04em}
.eh-r{grid-column:m 7/m 12;grid-row:2;display:flex;flex-direction:column;align-items:flex-start;gap:26px;padding-bottom:4px}
.eh-r p{font-size:var(--body);font-weight:500;line-height:1.5;max-width:26em}
@media (max-width:899px){
  .eh{padding-top:96px;align-items:start}
  .eh-t{grid-column:m 1/m-end;grid-row:1}
  .eh-n{--span:12;--fmaxm:230px}
  .eh-w{--span:12;--fmaxm:96px}
  .eh-ph{grid-column:full-start/full-end;grid-row:2;height:auto;aspect-ratio:4/5;margin-top:26px}
  .eh-r{grid-column:m 1/m-end;grid-row:3;margin-top:26px}
}

/* ============ one sentence, alone on the band ============ */
.eq{background:var(--band);padding:clamp(100px,10vw,170px) 0}
.eq-cap{grid-column:1/8;font-size:var(--body);font-weight:500;margin-bottom:clamp(26px,3vw,48px)}
.eq-q{grid-column:1/12}
.eq-q p{font-weight:800;font-size:clamp(46px,8.3vw,150px);letter-spacing:-.012em;line-height:1;text-wrap:balance}
.qm{color:#BDB8AF}
@media (max-width:899px){
  .eq-cap,.eq-q{grid-column:1/-1}
  .eq-q p{font-size:clamp(40px,11.4vw,64px)}
}

/* ============ Dan / Noć: one switch re-lays the mosaic ============ */
.en{padding:clamp(110px,11vw,180px) 0 clamp(110px,11vw,180px);align-items:end}
.en-h{grid-column:m 1/m 7;grid-row:1;--span:6;--fmax:170px;line-height:.98}
.en-sw{grid-column:m 7/m-end;grid-row:1;justify-self:end;display:inline-flex;gap:6px;padding:6px;border-radius:999px;background:var(--band)}
.en-sw button{min-height:56px;min-width:110px;padding:0 26px;border-radius:999px;font-size:clamp(18px,1.5vw,22px);font-weight:700;letter-spacing:-.015em;color:var(--ink2);transition:background-color .35s,color .35s}
.en-sw button:hover{color:var(--ink)}
.en-sw button[aria-pressed="true"]{background:var(--red);color:#fff}
.en-m{grid-column:m 1/m-end;grid-row:2;margin-top:clamp(40px,4.4vw,72px);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);row-gap:var(--gut)}
.en-c{position:relative;overflow:hidden;background:var(--band);margin:0}
.en-c0{grid-column:1/7;grid-row:1/3}
.en-c1{grid-column:7/10;grid-row:1;aspect-ratio:3/4}
.en-c2{grid-column:10/13;grid-row:1;aspect-ratio:3/4}
.en-c3{grid-column:7/10;grid-row:2;aspect-ratio:3/4}
.en-c4{grid-column:10/13;grid-row:2;aspect-ratio:3/4}
.en-d,.en-n{position:absolute;inset:0;transition:clip-path 1.1s var(--e1);transition-delay:calc(var(--i) * .08s)}
.en-n{clip-path:inset(100% 0 0 0)}
.en.is-night .en-d{clip-path:inset(0 0 100% 0)}
.en.is-night .en-n{clip-path:inset(0 0 0 0)}
html.js .en-m.rv:not(.in) .en-d{clip-path:inset(100% 0 0 0)}
@media (max-width:899px){
  .en{align-items:start}
  .en-h{grid-column:m 1/m-end;--span:12;--fmaxm:100px}
  .en-sw{grid-column:m 1/m-end;grid-row:2;justify-self:start;margin-top:24px}
  .en-sw button{min-width:96px;padding:0 20px}
  .en-m{grid-row:3;grid-template-columns:1fr 1fr;row-gap:10px;column-gap:10px;margin-top:30px}
  .en-c0{grid-column:1/-1;grid-row:1;aspect-ratio:4/5}
  .en-c1{grid-column:1;grid-row:2}
  .en-c2{grid-column:2;grid-row:2;aspect-ratio:3/4}
  .en-c3{grid-column:1;grid-row:3;aspect-ratio:3/4}
  .en-c4{grid-column:2;grid-row:3}
}

/* ============ the red band: the price, as big as the page allows ============ */
.ep{background:var(--red);color:#fff;padding:clamp(90px,9vw,150px) 0}
.ep-g{align-items:end}
.ep-n{grid-column:1/8;grid-row:1;font-weight:600;font-size:clamp(22px,2vw,32px);letter-spacing:-.005em}
.ep-p{grid-column:1/8;grid-row:2;font-weight:800;font-size:clamp(110px,17vw,300px);letter-spacing:-.018em;line-height:.84;white-space:nowrap}
.ep-p .ln{margin-right:0}
.ep-r{grid-column:8/13;grid-row:2;padding-bottom:.4em;display:flex;flex-direction:column;align-items:flex-start;gap:28px}
.ep-l{font-size:var(--body);font-weight:500;line-height:1.4}
.ep-l li{display:flex;align-items:center;gap:12px;padding:5px 0}
.ep-l li::before{content:"";width:8px;height:8px;flex:none;background:#fff}
@media (max-width:899px){
  .ep-n,.ep-p,.ep-r{grid-column:1/-1}
  .ep-p{font-size:clamp(96px,30vw,150px);margin-top:10px}
  .ep-r{grid-row:3;margin-top:30px}
}