/* Početna: the cover, then one spread per celebration. */

/* ============ 1 · the cover: a masthead on seven columns, the cover photo fills the right half to the edge ============ */
.cv{position:relative;height:clamp(720px,100lvh,1000px);align-items:stretch}
.cv-ph{grid-column:m 8/full-end;grid-row:1;position:relative;overflow:hidden;background:var(--band)}
.cv-slide{position:absolute;inset:0;clip-path:inset(100% 0 0 0)}
.cv-slide.is-on{clip-path:inset(0 0 0 0);z-index:2}
.cv-slide.is-prev{clip-path:inset(0 0 0 0);z-index:1}
.cv-slide.is-anim{transition:clip-path 1.2s var(--e1)}
html.js .cv-ph{clip-path:inset(0 100% 0 0)}
html.js .cv.go-ph .cv-ph{clip-path:inset(0 0 0 0);transition:clip-path 1.5s var(--e1)}
.cv-txt{grid-column:m 1/m 8;grid-row:1;display:flex;flex-direction:column;justify-content:space-between;min-width:0;padding:116px 0 clamp(26px,3.4vh,44px)}
.cv-h{--span:7;--fmax:calc((max(720px, 100lvh) - 430px) / 3.95);letter-spacing:-.01em;line-height:.98}
.cv-low{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));grid-template-rows:1fr auto auto;column-gap:var(--gut);align-items:end;padding-top:24px}
.cv-meta{grid-column:4/8;grid-row:1;align-self:end;display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.cv-body{display:contents}
.cv-sm{grid-column:1/4;grid-row:1/4;align-self:end;aspect-ratio:4/3;overflow:hidden;background:var(--band)}
.cv-what{grid-column:4/8;grid-row:2;font-size:var(--body);font-weight:500;line-height:1.48;max-width:31em;margin-bottom:24px;text-wrap:pretty}
.cv-cta{grid-column:4/8;grid-row:3;display:flex;flex-wrap:wrap;gap:10px}
.cv-cta .btn{padding:0 18px 0 22px;gap:8px;font-size:15.5px}
html.js .cv-sm{clip-path:inset(0 0 100% 0)}
html.js .cv.go-ph .cv-sm{clip-path:inset(0 0 0 0);transition:clip-path 1.2s var(--e1) .5s}
html.js .cv-meta,html.js .cv-what,html.js .cv-cta{opacity:0;transform:translate3d(0,22px,0)}
html.js .cv.go .cv-meta,html.js .cv.go .cv-what,html.js .cv.go .cv-cta{opacity:1;transform:none;transition:opacity .9s .55s,transform 1.1s var(--e2) .55s}
html.js .cv.go .cv-what{transition-delay:.66s}
html.js .cv.go .cv-cta{transition-delay:.76s}
.cv-on{display:flex;align-items:center;gap:.38em;font-size:15px;font-weight:600;letter-spacing:-.005em;line-height:1.35;white-space:nowrap;min-width:0}
.cv-on-t{color:var(--mute)}
.cv-cat{display:inline-grid;overflow:hidden;height:1.35em;line-height:1.35}
.cv-cat>span{grid-area:1/1;transform:translate3d(0,108%,0);transition:transform .8s var(--e1)}
.cv-cat>span.is-on{transform:none}
.cv-cat>span.is-out{transform:translate3d(0,-108%,0)}
.cv-dots{display:flex;flex:none;margin-right:-8px}
.cv-dot{position:relative;width:26px;height:44px}
.cv-dot::before,.cv-dot i{content:"";position:absolute;left:8px;top:17px;width:10px;height:10px;background:var(--grey)}
.cv-dot i{background:var(--red);transform:scaleY(0);transform-origin:50% 100%}
.cv-dot.is-on i{transform:scaleY(1);transition:transform var(--cvt,4s) linear}
.cv-dot.is-done i{transform:scaleY(1)}
@media (min-width:900px) and (max-width:1279px){
  .cv-sm{display:none}
  .cv-meta,.cv-what,.cv-cta{grid-column:1/8}
}
@media (max-width:899px){
  .cv{height:auto;align-items:start}
  .cv-txt,.cv-low{display:contents}
  .cv-h{grid-column:m 1/m-end;grid-row:1;--span:12;--fmax:150px;padding-top:96px}
  .cv-meta{grid-column:m 1/m-end;grid-row:2;margin:14px 0 8px}
  .cv-ph{grid-column:full-start/full-end;grid-row:3;aspect-ratio:4/5}
  .cv-body{display:block;grid-column:m 1/m-end;grid-row:4;padding:22px 0 8px}
  .cv-sm{float:right;width:41%;margin:6px 0 12px 16px}
  .cv-what{font-size:17px;margin-bottom:22px}
  .cv-on{font-size:16px}
  .cv-cta{clear:both}
  .cv-cta .btn{flex:1 1 auto;padding:0 18px;font-size:15px}
  html.js .cv-ph{clip-path:inset(0 0 100% 0)}
}
@media (min-width:600px) and (max-width:899px){
  .cv-ph{aspect-ratio:4/3}
  .cv-cta .btn{flex:0 0 auto;padding:0 22px}
}
@media (max-width:350px){.cv-on-t{display:none}}

/* ============ 2 · uvodnik: the photo half stays while three beats of his words pass ============ */
.uv{align-items:start;background:var(--paper)}
.uv-ph{grid-column:full-start/m 7;grid-row:1;position:sticky;top:0;height:100lvh;min-height:620px;overflow:hidden;background:var(--band)}
.uv-s{position:absolute;inset:0;clip-path:inset(100% 0 0 0)}
.uv-s.is-on{clip-path:inset(0 0 0 0);z-index:2;transition:clip-path 1.25s var(--e1)}
.uv-s.is-prev{clip-path:inset(0 0 0 0);z-index:1}
.uv-txt{grid-column:m 8/m-end;grid-row:1;min-width:0}
.uv-b{min-height:78lvh;display:flex;flex-direction:column;justify-content:center;padding:60px 0}
.uv-b0{min-height:88lvh;padding-top:120px}
.uv-b2{min-height:84lvh}
.uv-h{--span:5;--fmax:150px;letter-spacing:-.012em;line-height:.98}
.uv-h .ln:nth-child(2){padding-left:.9em}
.uv-p{font-weight:600;font-size:clamp(26px,2.45vw,42px);letter-spacing:-.006em;line-height:1.12;text-wrap:balance;max-width:13em}
.uv-wow{--span:5;--fmax:200px;letter-spacing:-.015em;line-height:.98}
.uv-by{margin-top:clamp(28px,3vw,48px)}
.uv-name{font-weight:700;font-size:19px;letter-spacing:-.01em;line-height:1.3}
.uv-since{font-size:17px;line-height:1.45;color:var(--ink2);margin-top:4px;max-width:18em}
@media (max-width:899px){
  .uv{padding:110px 0 100px}
  .uv-ph,.uv-txt{display:contents}
  .uv-b{min-height:0;padding:0;display:block}
  .uv-b0{grid-column:m 1/m-end;grid-row:1;padding:0}
  .uv-s{position:relative;inset:auto;clip-path:none;z-index:auto}
  .uv-s[data-k="0"]{grid-column:full-start/full-end;grid-row:2;aspect-ratio:4/5;margin-top:36px}
  .uv-b1{grid-column:m 1/m-end;grid-row:3;margin-top:40px}
  .uv-s[data-k="1"]{grid-column:m 1/m 7;grid-row:4;aspect-ratio:3/4;margin-top:36px}
  .uv-s[data-k="2"]{grid-column:m 7/m-end;grid-row:4;aspect-ratio:3/4;margin-top:96px}
  .uv-b2{grid-column:m 1/m-end;grid-row:5;margin-top:44px}
  .uv-h{--span:12;--fmax:130px}
  .uv-h .ln:nth-child(2){padding-left:0;text-align:right;margin-right:0}
  .uv-p{font-size:clamp(24px,6.6vw,34px)}
  .uv-wow{--span:12;--fmax:170px}
  html.js .uv-s.rvp{clip-path:inset(100% 0 0 0);transition:clip-path 1.3s var(--e1)}
  html.js .uv-s.rvp.in{clip-path:inset(0 0 0 0)}
}

/* ============ 3 · izaberite slavlje: the spread re-lays itself ============ */
.ty{position:relative;background:var(--band);padding:clamp(100px,10vw,170px) 0 clamp(90px,9vw,150px);align-items:end}
.ty-h{grid-column:m 1/m 9;grid-row:1;--span:8;--fmax:160px;letter-spacing:-.01em;line-height:.98}
.ty-lead{grid-column:m 9/m-end;grid-row:1;font-size:var(--body);font-weight:500;line-height:1.48;padding-bottom:.4em;text-wrap:pretty}
.ty-tabs{grid-column:m 1/m-end;grid-row:2;display:flex;flex-wrap:wrap;gap:4px clamp(22px,3vw,52px);margin:clamp(44px,5vw,80px) 0 clamp(26px,2.6vw,40px)}
.ty-tab{display:inline-flex;align-items:center;gap:.42em;min-height:52px;font-size:clamp(22px,2.3vw,36px);font-weight:700;
  letter-spacing:-.006em;color:var(--mute);transition:color .35s}
.ty-tab::before{content:"";width:.36em;height:.36em;background:var(--red);transform:scale(0);transition:transform .5s var(--e2)}
.ty-tab:hover{color:var(--ink)}
.ty-tab[aria-selected="true"]{color:var(--ink)}
.ty-tab[aria-selected="true"]::before{transform:scale(1)}
.ty-stage{grid-column:full-start/full-end;grid-row:3;display:grid;grid-template-columns:subgrid}
.ty-sp{grid-column:1/-1;grid-row:1;display:grid;grid-template-columns:subgrid;grid-template-rows:auto 1fr;align-items:start;visibility:hidden}
.ty-sp.is-on,.ty-sp.is-pre,.ty-sp.is-leave{visibility:visible}
.ty-sp figure{position:relative;overflow:hidden}
.ty-sp figure picture{background:var(--band2)}
.sp-big{grid-column:full-start/m 7;grid-row:1/3;aspect-ratio:4/5}
.sp-s1{grid-column:m 7/m 10;grid-row:1;aspect-ratio:3/4}
.sp-s2{grid-column:m 10/m-end;grid-row:1;aspect-ratio:3/4}
.sp-sw{display:block;width:100%;height:100%;cursor:pointer}
.sp-sw:focus-visible{outline:2px solid var(--ink);outline-offset:-4px}
.sp-sw-i{position:absolute;right:10px;bottom:10px;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#fff;color:var(--ink);
  box-shadow:0 6px 16px -6px rgba(15,15,15,.35);transition:transform .5s var(--e2),opacity .4s}
.sp-sw-i svg{width:17px;height:17px}
.sp-sw:hover .sp-sw-i{transform:scale(1.1)}
.ty-sp figure.sw-out picture{clip-path:inset(0 0 100% 0);transition:clip-path .42s var(--e1)}
.ty-sp figure.sw-in picture{clip-path:inset(100% 0 0 0);transition:none}
.ty-sp figure.sw-out .sp-sw-i,.ty-sp figure.sw-in .sp-sw-i{opacity:0}
.sp-facts{grid-column:m 7/m-end;grid-row:2;align-self:end;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));column-gap:var(--gut);align-items:end;padding-top:28px}
.sp-name{grid-column:1/-1;font-weight:600;font-size:clamp(19px,1.6vw,26px);letter-spacing:-.005em;line-height:1.2}
.sp-price{grid-column:1/-1;font-weight:800;font-size:clamp(76px,8.6vw,146px);letter-spacing:-.012em;line-height:.9;margin:.06em 0 .14em;white-space:nowrap}
.sp-tbc{font-size:clamp(22px,2.4vw,40px);letter-spacing:-.005em;margin:.45em 0 .55em}
.sp-mid{grid-column:1/-1;font-weight:600;font-size:clamp(22px,2.2vw,38px);letter-spacing:-.006em;line-height:1.1;text-wrap:balance;margin:0 0 .85em;max-width:16em}
.chip-xl{font-size:1em;padding:.36em .9em .42em .74em;background:#fff;white-space:normal;max-width:100%}
.sp-list{grid-column:1/4;font-size:var(--body);font-weight:500;line-height:1.4}
.sp-list li+li{margin-top:.42em}
.sp-plus{grid-column:4/7;font-size:17px;line-height:1.45}
.sp-plus .chip{background:#fff;margin-top:6px}
.sp-tbc~.sp-list{grid-column:1/-1}
.sp-act{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:12px 26px;margin-top:28px}
.sp-more{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:16px;font-weight:600}
.sp-more svg{width:18px;height:18px;transition:transform .45s var(--e2)}
.sp-more:hover svg{transform:translate3d(4px,0,0)}
/* the spread changes: photos open with masks, the facts rise */
.ty-sp figure picture{clip-path:inset(0 0 0 0);transition:clip-path 1.05s var(--e1)}
.ty-sp.is-pre figure picture{clip-path:inset(100% 0 0 0);transition:none}
.ty-sp .sp-s1 picture{transition-delay:.08s}.ty-sp .sp-s2 picture{transition-delay:.16s}
.sp-facts>*{transition:opacity .6s,transform .9s var(--e2)}
.ty-sp.is-pre .sp-facts>*{opacity:0;transform:translate3d(0,26px,0);transition:none}
.ty-sp.is-leave .sp-facts>*{opacity:0;transform:translate3d(0,-12px,0);transition-duration:.28s;transition-delay:0s}
.ty-sp.is-leave{z-index:1}.ty-sp.is-on{z-index:2}
.sp-facts>:nth-child(2){transition-delay:.06s}.sp-facts>:nth-child(3){transition-delay:.12s}
.sp-facts>:nth-child(4){transition-delay:.18s}.sp-facts>:nth-child(5){transition-delay:.24s}
html.js .ty-stage.rv:not(.in) .ty-sp.is-on figure picture{clip-path:inset(100% 0 0 0)}
html.js .ty-stage.rv:not(.in) .ty-sp.is-on .sp-facts>*{opacity:0;transform:translate3d(0,26px,0)}
@media (max-width:1199px){
  .sp-list{grid-column:1/-1}
  .sp-plus{grid-column:1/-1;margin-top:14px}
}
@media (max-width:899px){
  .ty{align-items:start}
  .ty-h{grid-column:m 1/m-end;--span:12;--fmax:120px}
  .ty-lead{grid-column:m 1/m-end;grid-row:2;margin-top:22px;padding:0}
  .ty-tabs{grid-row:3;display:grid;grid-template-columns:1fr 1fr;gap:2px 14px;margin:30px 0 20px}
  .ty-tab{font-size:18px;min-height:50px;letter-spacing:-.015em;align-items:center;text-align:left;line-height:1.15}
  .ty-tab:last-child:nth-child(odd){grid-column:1/-1}
  .ty-stage{grid-row:4}
  .ty-sp{grid-template-rows:auto auto 1fr}
  .sp-big{grid-column:full-start/full-end;grid-row:1}
  .sp-s1{grid-column:m 1/m 7;grid-row:2;margin-top:var(--gut)}
  .sp-s2{grid-column:m 7/m-end;grid-row:2;margin-top:var(--gut)}
  .sp-facts{grid-column:m 1/m-end;grid-row:3;align-content:start;align-self:start;padding-top:30px}
  .sp-price{font-size:clamp(80px,25vw,120px)}
  .sp-tbc{font-size:21px}
  .sp-plus{font-size:16px}
  .sp-act .btn{flex:1 1 auto}
}

/* ============ 4 · nikad više: the four sentences as a pull-quote feature ============ */
.nv{padding:clamp(100px,10vw,170px) 0 clamp(90px,9vw,150px)}
.nv-g{align-items:start}
.nv-cap{grid-column:1/6;grid-row:1;font-size:var(--body);font-weight:500;margin-bottom:clamp(30px,3.4vw,56px);max-width:22em}
.nv-l{grid-column:1/7;grid-row:2;display:flex;flex-direction:column;gap:clamp(56px,6vw,104px)}
.nv-r{grid-column:8/13;grid-row:2;display:flex;flex-direction:column;gap:clamp(56px,6vw,104px);padding-top:clamp(70px,9vw,160px)}
.nv-q p{font-weight:600;font-size:clamp(28px,3.6vw,60px);letter-spacing:-.006em;line-height:1.06;text-wrap:balance}
.qm{color:#BDB8AF}
.nv-q-xl p{font-weight:800;font-size:clamp(48px,6.7vw,114px);letter-spacing:-.01em;line-height:1}
.nv-r .nv-q:last-child{transition-delay:.12s}
.nv-v{grid-column:1/-1;grid-row:3;margin-top:clamp(90px,10vw,170px);--span:12;--fmax:210px;letter-spacing:-.012em;line-height:.98}
.nv-v .ln:nth-child(2){padding-left:calc((100% - 11 * var(--gut)) / 12 * 2 + 2 * var(--gut))}
@media (max-width:760px){
  .nv-cap{grid-column:1/-1}
  .nv-l,.nv-r{grid-column:1/-1;gap:46px}
  .nv-r{grid-row:3;padding-top:46px;padding-left:12%}
  .nv-q p{font-size:clamp(26px,7.4vw,34px);text-indent:0}
  .nv-q-xl p{font-size:clamp(46px,13.6vw,60px);text-indent:0}
  .nv-v{grid-row:4;margin-top:84px;--fmaxm:90px}
  .nv-v .ln:nth-child(2){padding-left:0;text-align:right;margin-right:0}
}

/* ============ 5 · napolju: one photo across both halves, then an asymmetric pair ============ */
.np{padding:0 0 clamp(100px,10vw,170px);align-items:start}
.np-wide{grid-column:full-start/full-end;grid-row:1;aspect-ratio:21/9;max-height:calc(100lvh - 40px);overflow:hidden;background:var(--band)}
.np-cap{font-size:15px;font-weight:500;color:var(--ink2);line-height:1.4;margin-top:14px}
.np-c1{grid-column:m 1/m 7;grid-row:2}
.np-h{grid-column:m 7/m-end;grid-row:3;margin-top:clamp(70px,8vw,140px);--span:6;--fmax:110px;line-height:.98}
.np-lead{grid-column:m 7/m 12;grid-row:4;margin-top:.9em;font-weight:600;font-size:clamp(20px,1.8vw,30px);letter-spacing:-.004em;line-height:1.2;text-wrap:balance}
.np-a{grid-column:m 1/m 6;grid-row:3/6;align-self:start;margin-top:clamp(70px,8vw,140px)}
.np-b{grid-column:m 8/m 12;grid-row:5;align-self:start;margin-top:clamp(40px,4.6vw,78px)}
.np-a picture,.np-b picture{aspect-ratio:3/4;height:auto;overflow:hidden;background:var(--band)}
.np-b{transition-delay:.12s}
@media (max-width:899px){
  .np-wide{aspect-ratio:4/3}
  .np-c1{grid-column:m 1/m-end}
  .np-h{grid-column:m 1/m-end;--span:12;--fmaxm:72px;margin-top:64px}
  .np-lead{grid-column:m 1/m-end;font-size:21px}
  .np-a{grid-column:m 1/m-end;grid-row:5;margin-top:40px}
  .np-b{grid-column:m 4/m-end;grid-row:6;margin-top:44px}
}

/* ============ 6 · devet od deset: the biggest type, a photo that keeps changing ============ */
.dv{padding:clamp(40px,4vw,70px) 0 clamp(110px,11vw,190px);align-items:end}
.dv-txt{grid-column:m 1/m 9;grid-row:1}
.dv-h{--span:8;--fmax:230px;letter-spacing:-.015em;line-height:.94}
.dv-rest{max-width:16em;margin-top:.55em;font-weight:600;font-size:clamp(24px,2.7vw,46px);letter-spacing:-.006em;line-height:1.08;text-wrap:balance}
.dv-ph{grid-column:m 9/full-end;grid-row:1;aspect-ratio:3/4;overflow:hidden;background:var(--band);position:relative}
@media (max-width:899px){
  .dv-txt{grid-column:m 1/m-end}
  .dv-h{--span:12;--fmaxm:120px}
  .dv-rest{font-size:26px}
  .dv-ph{grid-column:m 3/full-end;grid-row:2;margin-top:44px}
}

/* ============ 7 · utisci (chip) + Instagram ============ */
.ut{padding:0 0 clamp(100px,10vw,170px);align-items:stretch}
.ut-ph{grid-column:full-start/m 6;grid-row:1;aspect-ratio:4/5;overflow:hidden;background:var(--band)}
.ut-r{grid-column:m 7/m-end;grid-row:1;display:flex;flex-direction:column;justify-content:space-between;gap:60px;padding-top:clamp(20px,3vw,60px)}
.ut-qm{font-weight:800;font-size:clamp(150px,17vw,300px);line-height:.62;height:.5em;color:#E4DFD6;letter-spacing:-.015em}
.ut-h{display:flex;flex-wrap:wrap;align-items:center;gap:.25em .5em;margin-top:.5em;font-weight:700;font-size:clamp(34px,3.9vw,66px);letter-spacing:-.008em;line-height:1.02}
.ut-h .chip{font-size:.36em}
.ut-k{font-weight:600;font-size:clamp(18px,1.5vw,24px);color:var(--ink2)}
.ut-ig{display:inline-flex;align-items:flex-end;gap:.08em;margin-top:.12em;font-weight:800;font-size:clamp(54px,7.4vw,128px);letter-spacing:-.015em;line-height:.9}
.ut-ig .ln{margin-right:0}
.ut-ig svg{width:.38em;height:.38em;flex:none;margin-bottom:.12em;stroke-width:2.4;transition:transform .55s var(--e2)}
.ut-ig:hover svg{transform:translate3d(.05em,-.05em,0)}
.ut-tt{display:inline-flex;align-items:center;min-height:44px;margin-top:14px;font-weight:600;font-size:18px}
@media (max-width:899px){
  .ut-ph{grid-column:full-start/full-end}
  .ut-r{grid-column:m 1/m-end;grid-row:2;gap:56px;margin-top:20px}
  .ut-qm{font-size:150px}
  .ut-h{font-size:clamp(32px,9.4vw,44px)}
  .ut-ig{font-size:clamp(40px,12.6vw,68px)}
}

/* ============ 8 · the one red band: ask about your date ============ */
.cl{background:var(--red);color:#fff;padding:clamp(100px,10vw,170px) 0 clamp(90px,9vw,150px)}
.cl-g{align-items:end}
.cl-h{grid-column:1/9;--span:8;--fmax:200px;line-height:.98}
.cl-r{grid-column:9/13;padding-bottom:.6em}
.cl-line{font-size:var(--body);font-weight:500;line-height:1.5;max-width:22em}
.cl-cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;margin-top:28px}
.cl-ig{display:inline-flex;align-items:center;gap:9px;min-height:44px;font-weight:600;font-size:16px}
.cl-ig svg{width:20px;height:20px}
.cl-ig:hover{opacity:.7}
@media (max-width:899px){
  .cl-h{grid-column:1/-1;--span:12;--fmaxm:110px}
  .cl-r{grid-column:1/-1;margin-top:34px;padding:0}
}