/* ============================================================
   MILLE BACI · D3 · RADIONICA — od voća do poklopca (pistacija)
   ============================================================ */

body{
  background:
    radial-gradient(46% 30% at 8% 6%,rgba(95,127,62,.16),transparent 70%),
    radial-gradient(40% 26% at 94% 30%,rgba(246,162,43,.12),transparent 70%),
    var(--paper);
}

/* ---------- hero ---------- */
.rhero{width:var(--w);margin:0 auto;padding:8rem 0 2rem;position:relative}
.rhero-h{
  font-family:var(--disp);font-weight:800;text-transform:uppercase;
  font-size:clamp(2.5rem,8.8vw,6.8rem);line-height:.97;letter-spacing:-.01em;
}
.rhero-h span{display:block}
.rhero-h .rh2{color:var(--pist)}
.rhero-lead{margin-top:1.4rem}
.rhero-fig{margin-top:2.4rem;position:relative;transform:rotate(-1deg)}
.rhero-fig img{
  width:100%;max-height:70vh;object-fit:cover;object-position:center 42%;
  border-radius:22px;border:4px solid var(--pink);
  box-shadow:10px 12px 0 rgba(95,127,62,.45);
}
.rhero-stkr{
  position:absolute;right:clamp(.6rem,3vw,2rem);top:-1.6rem;
  background:var(--pist);color:#fff;border:3px solid var(--pink);border-radius:16px;
  padding:.5rem 1rem;transform:rotate(5deg);text-align:center;
}

/* ---------- history ---------- */
.hist{position:relative}
.hist::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--pink)}
.hist-in{display:grid;grid-template-columns:38fr 52fr;gap:clamp(2rem,5vw,4rem);align-items:center;color:var(--paper)}
.hist-fig{margin:0;transform:rotate(-1.8deg)}
.hist-fig img{border-radius:20px;border:4px solid var(--mango);box-shadow:8px 10px 0 rgba(246,162,43,.3)}
.hist-copy .sec-h{color:#fff}
.hist-copy .kicker{color:var(--mango)}
.hist-copy p:not(.kicker){max-width:48ch;margin-bottom:.9rem;color:#EFF4EC}
.hist-copy .hl{color:#fff}
.hist-copy{position:relative}
/* wax seal: stamped over the secret recipes */
.seal{
  position:absolute;right:0;top:-1.2rem;z-index:2;
  width:92px;height:92px;border-radius:46% 54% 52% 48% / 52% 46% 54% 48%;
  background:radial-gradient(60% 60% at 34% 30%,#D04A56,#B3232E 62%,#8E1B24);
  border:3px solid rgba(0,0,0,.25);box-shadow:0 4px 0 rgba(0,0,0,.35),inset 0 0 0 7px rgba(255,255,255,.12);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.05rem;
  transform:rotate(-9deg);will-change:transform;
}
.seal b{font-family:var(--disp);font-weight:800;font-size:1.3rem;color:#FFE3E0;letter-spacing:.04em}
.seal small{font-family:var(--hand);font-weight:600;font-size:.95rem;color:#FFC9C4}
.seal::after{
  content:"";position:absolute;inset:9px;border-radius:inherit;border:2px dashed rgba(255,227,224,.4);
}
@media (max-width:640px){.seal{width:72px;height:72px;top:-2rem}.seal b{font-size:1rem}}

/* ---------- process steps + gelato ribbon ---------- */
.steps-wrap{position:relative}
.steps-ribbon{
  position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:-1;overflow:visible;
}
#ribbonpath{
  fill:none;stroke:#FFD98E;stroke-width:14;stroke-linecap:round;stroke-linejoin:round;opacity:.9;
}
@media (max-width:900px){.steps-ribbon{display:none}}
.steps{list-style:none;margin-top:2.6rem;display:grid;gap:clamp(2.6rem,7vh,4.5rem)}
.step{
  display:grid;grid-template-columns:auto 38fr 48fr;gap:clamp(1.2rem,3vw,2.6rem);
  align-items:center;
}
.step:nth-child(even){grid-template-columns:auto 48fr 38fr}
.step:nth-child(even) .step-fig{order:3}
.step:nth-child(even) .step-copy{order:2}
.step-n{
  font-family:var(--disp);font-weight:800;font-size:clamp(2.6rem,6vw,4.6rem);line-height:1;
  color:transparent;-webkit-text-stroke:2.5px var(--ink);text-stroke:2.5px var(--ink);
  transition:color .5s var(--ease);align-self:start;padding-top:.4rem;
}
.step.lit .step-n{color:var(--pist)}
.step-fig{margin:0;transform:rotate(1.4deg)}
.step:nth-child(even) .step-fig{transform:rotate(-1.4deg)}
.step-fig img,.step-fig video{
  width:100%;border-radius:20px;border:4px solid var(--pink);
  aspect-ratio:4/5;object-fit:cover;box-shadow:8px 10px 0 rgba(228,72,124,.14);
}
.step-copy h3{
  font-family:var(--disp);font-weight:800;text-transform:uppercase;letter-spacing:-.01em;
  font-size:clamp(1.35rem,2.8vw,2.1rem);margin-bottom:.8rem;
}
.step-copy p{max-width:46ch;font-size:1.06rem}

/* ---------- terroir ---------- */
.terr{position:relative}
.terr::before{content:"";position:absolute;inset:0;z-index:-1;background:#E9EEDD}
.terr-in{display:grid;grid-template-columns:46fr 46fr;gap:clamp(2rem,5vw,4rem);align-items:center;color:#33421F}
.terr-h{
  font-family:var(--disp);font-weight:800;text-transform:uppercase;
  font-size:clamp(1.9rem,5.2vw,3.9rem);line-height:1.05;letter-spacing:-.01em;margin-bottom:1.2rem;
}
.terr-h span,.terr-h em{display:block;font-style:normal}
.terr-h em{color:var(--amber)}
.terr-copy .kicker{color:var(--pist)}
.terr-copy p:not(.kicker):not(.terr-tags){max-width:46ch;margin-bottom:1.2rem}
.terr-tags{display:flex;flex-wrap:wrap;gap:.2rem}
.terr-tags .chip{border-color:#33421F;color:#33421F}
.terr-figs{display:grid;grid-template-columns:1fr 1fr;gap:clamp(.9rem,2vw,1.4rem)}
.terr-figs figure{margin:0;border-radius:18px;overflow:hidden;border:3px solid #33421F;transform:rotate(-1.2deg)}
.terr-figs figure:nth-child(2){transform:rotate(1.4deg) translateY(1.4rem)}
.terr-figs img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/5}

/* ---------- pledge ---------- */
.pledge{position:relative;text-align:center}
.pledge::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--pist)}
.pledge-in{color:#F2F7E8}
.pledge-h{
  font-family:var(--disp);font-weight:800;text-transform:uppercase;
  font-size:clamp(1.9rem,5.6vw,4.2rem);line-height:1.08;letter-spacing:-.01em;margin-bottom:1.4rem;
}
.pledge-h span,.pledge-h em{display:block;font-style:normal}
.pledge-h em{color:#FFE9B8}
.pledge-in p{max-width:56ch;margin:0 auto;font-size:1.1rem}

/* ---------- details ---------- */
.dets-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(.9rem,2vw,1.4rem);margin-top:2.4rem}
.dets-grid figure{margin:0;border-radius:16px;overflow:hidden;border:3px solid var(--pink)}
.dets-grid figure:nth-child(odd){transform:rotate(-.7deg)}
.dets-grid figure:nth-child(even){transform:rotate(.7deg)}
.dets-grid img{width:100%;height:100%;object-fit:cover;aspect-ratio:3/4;transition:transform .5s var(--spring)}
.dets-grid figure:hover img{transform:scale(1.06)}
.dets-cta{text-align:center;margin-top:2.2rem}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .hist-in{grid-template-columns:1fr}
  .hist-fig{max-width:420px}
  .step,.step:nth-child(even){grid-template-columns:auto 1fr}
  .step-fig{grid-column:2;order:0 !important;max-width:430px}
  .step-copy{grid-column:2;order:0 !important}
  .terr-in{grid-template-columns:1fr}
  .dets-grid{grid-template-columns:1fr 1fr}
}