/* gelato.css — the soft one.

   Every other page in the portfolio is dark, stark or loud. This one is warm
   cream, pastel and round. The signature move is that photographs sit inside
   ARCHES, echoing the arched doorway and windows of the shop itself, and the
   whole page breathes rather than shouts.

   Palette taken off the real photographs: the pink macaron, the mint and gold
   cone, the coral tables on the terrace, the green shutters. */

:root{
  --cream   :#FBF4EA;
  --cream-2 :#F4E7D8;
  --ink     :#3B2B26;
  --ink-dim :rgba(59,43,38,.66);
  --ink-fnt :rgba(59,43,38,.40);
  --pink    :#F2B8C6;
  --mint    :#9FD4C2;
  --coral   :#E4614C;
  --gold    :#C9A227;
  --line    :rgba(59,43,38,.16);
  --pad     :clamp(22px,5vw,84px);
  --serif   :"Recoleta","Georgia",serif;
  --sans    :-apple-system,BlinkMacSystemFont,"Inter","Helvetica Neue",Arial,sans-serif;
  --ease    :cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--cream);color:var(--ink);font-family:var(--sans);
  font-size:clamp(.98rem,1.1vw,1.08rem);line-height:1.68;
  -webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}

.tag{font-size:.62rem;letter-spacing:.28em;text-transform:uppercase;color:var(--ink-fnt);
  font-weight:600}
.display{font-family:var(--serif);font-weight:400;line-height:1.02;letter-spacing:-.02em;
  font-size:clamp(2.6rem,8vw,6.4rem)}
.h2{font-family:var(--serif);font-weight:400;line-height:1.08;letter-spacing:-.015em;
  font-size:clamp(1.9rem,4.2vw,3.4rem)}

/* ---------- nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:40;display:flex;align-items:center;
  justify-content:space-between;gap:14px;padding:16px var(--pad);
  background:linear-gradient(180deg,rgba(251,244,234,.92),rgba(251,244,234,0))}
.nav__brand{font-family:var(--serif);font-size:1.06rem}
.nav__brand span{color:var(--coral)}
.nav__cta{font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;font-weight:600;
  background:var(--coral);color:var(--cream);border-radius:100px;padding:0 22px;
  min-height:44px;display:inline-flex;align-items:center;
  transition:transform .3s var(--ease)}
.nav__cta:hover{transform:translateY(-2px)}

/* ---------- hero: an arch, not a rectangle ---------- */
.hero{padding:clamp(112px,17vh,190px) var(--pad) clamp(50px,8vh,90px);
  max-width:1240px;margin:0 auto;display:grid;gap:clamp(28px,5vw,64px);
  grid-template-columns:1.05fr .95fr;align-items:center}
@media (max-width:860px){ .hero{grid-template-columns:1fr} }
.hero h1{margin:16px 0 20px}
.hero h1 em{font-style:normal;color:var(--coral)}
.hero__sub{color:var(--ink-dim);max-width:40ch}
.arch{position:relative;overflow:hidden;
  border-radius:50% 50% 14px 14px / 34% 34% 3% 3%;
  background:var(--cream-2);aspect-ratio:4/5}
/* the cones sit high in the frame, so pull the crop up to them */
.arch img{width:100%;height:100%;object-fit:cover;object-position:50% 34%;transform:scale(1.12)}

/* the little row of scoops, colours lifted from the photographs */
.scoops{display:flex;gap:11px;margin-top:26px;align-items:center}
.scoops i{width:26px;height:26px;border-radius:50%;display:block}
.scoops span{font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-fnt);margin-left:6px}

/* ---------- alternating bands ---------- */
.band{padding:clamp(56px,9vh,110px) var(--pad);max-width:1240px;margin:0 auto;
  display:grid;gap:clamp(26px,5vw,64px);grid-template-columns:1fr 1fr;align-items:center}
.band--flip .band__media{order:2}
@media (max-width:860px){
  .band{grid-template-columns:1fr}
  .band--flip .band__media{order:0}
}
.band__media{overflow:hidden;border-radius:26px;background:var(--cream-2)}
.band__media img{width:100%;height:100%;object-fit:cover;aspect-ratio:16/10;
  transform:scale(calc(1 + var(--k,0) * .05));transition:transform .1s linear}
.band--tall .band__media img{aspect-ratio:4/5}
.band__body h2{margin:12px 0 14px}
.band__body p{color:var(--ink-dim);max-width:44ch}

/* ---------- a wide cream strip that just says one thing ---------- */
.say{background:var(--cream-2);padding:clamp(70px,12vh,150px) var(--pad);text-align:center}
.say p{font-family:var(--serif);font-weight:400;line-height:1.2;
  font-size:clamp(1.6rem,4vw,3rem);max-width:22ch;margin:0 auto}
.say p em{font-style:normal;color:var(--coral)}

/* ---------- the live 360 ---------- */
.pano{position:relative;background:var(--cream-2)}
.pano__track{height:220vh}
.pano__sticky{position:sticky;top:0;height:100svh;overflow:hidden}
.pano__canvas{position:absolute;inset:0;width:100%;height:100%;display:block;
  cursor:grab;touch-action:pan-y;opacity:0;transition:opacity .8s var(--ease)}
.pano.is-loaded .pano__canvas{opacity:1}
.pano.is-dragging .pano__canvas{cursor:grabbing}
.pano__poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pano.is-loaded .pano__poster{opacity:0;transition:opacity .8s var(--ease)}
.pano__scrim{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(20,14,12,.34) 0%,rgba(20,14,12,0) 34%,rgba(20,14,12,.6) 100%)}
.pano__copy{position:absolute;left:var(--pad);right:var(--pad);
  bottom:clamp(52px,10vh,110px);z-index:2;pointer-events:none;color:#fff}
.pano__copy h2{max-width:15ch;margin:12px 0 18px}
.pano__copy .tag{color:rgba(255,255,255,.72)}
.pano__hint{display:inline-flex;align-items:center;gap:11px;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.4);
  border-radius:100px;padding:11px 20px;font-size:.62rem;letter-spacing:.18em;
  text-transform:uppercase;font-weight:600;backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px)}
.pano__hint i{width:17px;height:17px;border:1px solid currentColor;border-radius:50%;
  position:relative;flex:0 0 auto}
.pano__hint i::after{content:"";position:absolute;top:50%;left:50%;width:7px;height:1px;
  background:currentColor;transform:translate(-50%,-50%);animation:nudge 2.2s var(--ease) infinite}
@keyframes nudge{0%,100%{transform:translate(-140%,-50%)}50%{transform:translate(40%,-50%)}}
.pano.is-fallback .pano__canvas,.pano.is-fallback .pano__hint{display:none}
.pano.is-fallback .pano__poster{opacity:1}

/* ---------- reveal, visible by default ---------- */
.js-anim [data-rise]{opacity:0;transform:translateY(20px);
  transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js-anim [data-rise].is-in{opacity:1;transform:none}

.foot{border-top:1px solid var(--line);padding:32px var(--pad);display:flex;
  flex-wrap:wrap;gap:8px 28px;justify-content:space-between;color:var(--ink-fnt);
  font-size:.74rem}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js-anim [data-rise]{opacity:1;transform:none;transition:none}
  .band__media img{transform:none}
  .pano__hint i::after{animation:none}
}

/* ---------- the form, warm ---------- */
.lead{
  --lf-bg     :var(--cream-2);
  --lf-fg     :var(--ink);
  --lf-accent :var(--coral);
  --lf-line   :var(--line);
  --lf-muted  :var(--ink-dim);
}
.lead__title{font-family:var(--serif);font-weight:400}
.lead__btn{color:var(--cream);font-weight:600}
.lead__field select option{background:var(--cream);color:var(--ink)}

/* the link out to the full tour. The copy block ignores pointer events so
   the 360 stays draggable underneath, so the link has to take them back. */
.pano__copy a{pointer-events:auto}
.pano__hint--go{margin-left:10px;transition:background .3s ease,color .3s ease}
.pano__hint--go:hover{background:#fff;color:#111}