/* ============================================================
   MILLE BACI · D3 · ŠTAPIĆI — ljeto na štapiću (mango sunce)
   ============================================================ */

body{
  background:
    radial-gradient(52% 36% at 82% 4%,rgba(246,162,43,.4),transparent 70%),
    radial-gradient(40% 26% at 6% 18%,rgba(228,72,124,.16),transparent 70%),
    var(--paper);
}

/* ---------- hero ---------- */
.phero{width:var(--w);margin:0 auto;padding:8rem 0 1.6rem;position:relative}
.sun{
  position:absolute;top:4.4rem;right:clamp(0rem,3vw,2rem);z-index:-1;
  width:clamp(150px,22vw,300px);height:clamp(150px,22vw,300px);
  opacity:.95;will-change:transform;
}
.phero-h{
  font-family:var(--disp);font-weight:800;text-transform:uppercase;
  font-size:clamp(2.6rem,9.4vw,7.4rem);line-height:.97;letter-spacing:-.01em;
}
.phero-h span{display:block}
.phero-h .ph2{color:var(--mango);-webkit-text-stroke:2px var(--ink);text-stroke:2px var(--ink)}
.phero-lead{margin-top:1.4rem}
.phero-fig{margin-top:2.4rem;position:relative;transform:rotate(-1deg)}
.phero-fig img{
  width:100%;max-height:74vh;object-fit:cover;object-position:center 30%;
  border-radius:22px;border:4px solid var(--pink);
  box-shadow:10px 12px 0 rgba(246,162,43,.55);
}
.phero-stkr{
  position:absolute;right:clamp(.6rem,3vw,2rem);top:-1.6rem;
  background:var(--pink);color:#fff;border:3px solid var(--pink);border-radius:16px;
  padding:.5rem 1rem;transform:rotate(5deg);text-align:center;
}
/* the hero MELTS: drips hang off the bottom edge and fall on repeat */
.drips{position:absolute;left:0;right:0;bottom:2px;height:0;pointer-events:none}
.drip{
  position:absolute;left:var(--dx);top:0;width:12px;height:34px;
  background:var(--dc);border:2.5px solid var(--pink);border-top:0;
  border-radius:0 0 12px 12px;transform-origin:top center;will-change:transform,opacity;
  opacity:0;
}
@media (prefers-reduced-motion:reduce){.drip{display:none}}
/* heat shimmer on the manifest words */
@keyframes heat{0%,100%{transform:skewX(0)}50%{transform:skewX(1.8deg) translateY(-2px)}}
.mani-w{animation:heat 3.4s ease-in-out infinite}
.mani-w.mw2{animation-delay:1.1s}
.mani-w.mw3{animation-delay:2.2s}
@media (prefers-reduced-motion:reduce){.mani-w{animation:none}}

/* ---------- marquee ---------- */
.marq{margin:2.6rem 0;transform:rotate(1.2deg) scale(1.03);overflow:hidden;background:var(--mango);padding:.7rem 0}
.marq-in{display:flex;white-space:nowrap;width:max-content}
.marq-in span{
  font-family:var(--disp);font-weight:600;font-size:.95rem;letter-spacing:.12em;
  text-transform:uppercase;padding-right:1rem;animation:marq 24s linear infinite;color:var(--ink);
}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-100%)}}
@media (prefers-reduced-motion:reduce){.marq-in span{animation:none}}

/* ---------- manifest ---------- */
.mani-h{display:flex;gap:clamp(1rem,4vw,3rem);flex-wrap:wrap;margin-bottom:2rem}
.mani-w{
  font-family:var(--disp);font-weight:800;text-transform:uppercase;
  font-size:clamp(2.4rem,7.6vw,6rem);line-height:1;letter-spacing:-.01em;display:inline-block;
}
.mani-w.mw2{color:var(--teal)}
.mani-w.mw3{color:var(--pink)}
.mani-cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.6rem,4vw,3rem)}
.mani-cols p{font-size:1.08rem;max-width:52ch}

/* ---------- melt (video) ---------- */
.melt{position:relative}
.melt::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--pink)}
.melt-in{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2rem,5vw,4rem);align-items:center;color:var(--paper)}
.melt-copy .sec-h{color:#fff}
.melt-copy .kicker{color:var(--mango)}
.melt-copy p:not(.kicker){max-width:46ch}
.melt-h em,.melt-h .hl{color:#fff}
.melt-hand{margin-top:1.4rem;color:#FFD98E;transform:rotate(-1.4deg)}
.melt-fig{position:relative;margin:0;max-width:340px;justify-self:center;transform:rotate(2.2deg)}
.melt-fig video{
  width:100%;border-radius:22px;border:4px solid var(--paper);
  box-shadow:10px 12px 0 rgba(246,162,43,.5);
}
.melt-badge{
  position:absolute;left:-1rem;top:1.2rem;font-family:var(--disp);font-weight:600;
  font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  background:var(--pink);color:#fff;border:3px solid var(--paper);border-radius:999px;
  padding:.45em 1em;transform:rotate(-7deg);
}

/* ---------- gallery ---------- */
.pgal-grid{
  display:grid;grid-template-columns:44fr 30fr 30fr;grid-template-rows:auto auto;
  gap:clamp(1rem,2.2vw,1.8rem);margin-top:2.4rem;
}
.pgal-grid figure{position:relative;overflow:hidden;border-radius:20px;border:3px solid var(--pink);margin:0}
.pgal-grid img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--spring)}
.pgal-grid figure:hover img{transform:scale(1.05) rotate(.6deg)}
.pg-a{grid-row:1/3}
.pg-d{grid-column:2/4}
.pg-note{
  position:absolute;left:1rem;bottom:1rem;background:var(--paper);border:3px solid var(--pink);
  border-radius:14px;padding:.4rem .9rem;transform:rotate(-2deg);max-width:86%;
}
.pg-note .hand{font-size:1.15rem}

/* ---------- lines (destinations + boozy) ---------- */
.plines-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.2rem,2.6vw,2rem);margin-top:2.4rem}
.pline{
  border:3px solid var(--pink);border-radius:22px;background:#fff;
  padding:1.7rem 1.5rem;box-shadow:6px 7px 0 rgba(228,72,124,.14);
  transition:transform .35s var(--spring),box-shadow .35s var(--spring);position:relative;
}
.pline:hover{transform:translateY(-6px) rotate(-.5deg);box-shadow:10px 13px 0 var(--plc)}
.pline h3{
  font-family:var(--disp);font-weight:800;text-transform:uppercase;letter-spacing:-.01em;
  font-size:clamp(1.25rem,2.4vw,1.8rem);margin-bottom:.6rem;
  border-bottom:4px solid var(--plc);display:inline-block;padding-bottom:.2rem;
}
.pline>p:not(.pline-tags):not(.pline-hand){max-width:44ch;opacity:.9}
.pline-tags{display:flex;flex-wrap:wrap;gap:.2rem;margin-top:1rem}
.pline-hand{margin-top:1rem;color:var(--plc);transform:rotate(-1.2deg)}

/* ---------- snow crossover ---------- */
.psnow{position:relative}
.psnow::before{content:"";position:absolute;inset:0;z-index:-1;background:#DDEFF4}
.psnow-in{display:grid;grid-template-columns:40fr 50fr;gap:clamp(2rem,5vw,4rem);align-items:center;color:#20404C}
.psnow-fig{transform:rotate(-1.6deg);margin:0}
.psnow-fig img{border-radius:20px;border:4px solid #20404C;box-shadow:8px 10px 0 rgba(32,64,76,.2)}
.psnow-copy .sec-h{color:#20404C}
.psnow-copy .kicker{color:#3A7A8C}
.psnow-copy p:not(.kicker){max-width:46ch;margin-bottom:1.6rem}
.psnow-copy .btn.ghost{color:#20404C;border-color:#20404C}
.psnow-copy .btn.ghost:hover{background:#20404C;color:#fff}
.psnow-copy .hl{color:#20404C}

/* ---------- meme ---------- */
.pfun-grid{display:grid;grid-template-columns:34fr 52fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.pfun-fig{transform:rotate(2deg);margin:0}
.pfun-fig img{border-radius:20px;border:4px solid var(--pink);box-shadow:8px 10px 0 rgba(228,72,124,.4)}
.pfun-copy p:not(.kicker){max-width:44ch;margin-bottom:1.6rem}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .mani-cols{grid-template-columns:1fr}
  .melt-in{grid-template-columns:1fr}
  .melt-fig{max-width:300px}
  .pgal-grid{grid-template-columns:1fr 1fr}
  .pg-a{grid-row:auto;grid-column:1/3}
  .pg-d{grid-column:1/3}
  .plines-grid{grid-template-columns:1fr}
  .psnow-in{grid-template-columns:1fr}
  .psnow-fig{max-width:440px}
  .pfun-grid{grid-template-columns:1fr}
  .pfun-fig{max-width:380px}
}