/* ============================================================
   Ice Cream on Elm — single page site
   Palette: soft pink, cream, mint, deep berry
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}

:root{
  --pink:#F4A9C4;
  --pink-soft:#FBD9E5;
  --pink-tint:#FFEFF4;
  --cream:#FFFBF7;
  --cream-deep:#FFF3E9;
  --mint:#9FD8C7;
  --mint-soft:#DCF1EA;
  --butter:#FFE7B0;
  --berry:#5B2740;
  --berry-soft:#8A5570;
  --sky:#A1C8DF;        /* top bar: the pastel blue from the logo's ring */
  --sky-deep:#2C5A82;
  --ink:#3E2130;

  --stripe:56px;
  --scallop:28px;

  --radius:22px;
  --shadow-sm:0 3px 0 rgba(91,39,64,.13);
  --shadow-md:0 6px 0 rgba(91,39,64,.17);

  --maxw:1120px;
  --font-display:"Fraunces",Georgia,"Times New Roman",serif;
  --font-body:"Karla","Helvetica Neue",Helvetica,Arial,sans-serif;
}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
@media (prefers-reduced-motion:reduce){.canopy-fabric{animation:none}}

body{
  margin:0;
  background-color:var(--cream);
  background-image:
    radial-gradient(circle at 1px 1px, rgba(244,169,196,.34) 1px, transparent 0);
  background-size:22px 22px;
  color:var(--ink);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%;display:block}

#sentinel{display:block;height:0;overflow:hidden}

h1,h2,h3{
  font-family:var(--font-display);
  font-variation-settings:"SOFT" 30,"WONK" 1;
  color:var(--berry);
  margin:0;
  line-height:1.1;
  letter-spacing:-.01em;
}

a{color:var(--berry)}

.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:24px}

.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--berry);color:var(--cream);padding:12px 18px;border-radius:0 0 12px 0;
  text-decoration:none;font-weight:700;
}
.skip:focus{left:0}

:focus-visible{outline:3px solid var(--berry);outline-offset:3px;border-radius:6px}

/* ---------- Awning ---------------------------------------- */

/* Roller blind: a short pull up to release it, then one long accelerating
   fall and three bounces at the stop.

   The bounces follow a coefficient of restitution of 0.6, so each rebound
   reaches e^2 (36%) of the previous height and takes e (60%) of its time.
   Amplitude and interval decaying at the same rate is what makes it read as
   physical; decaying them independently is what looked wrong before.
   Every rebound travels upward — a positive offset would open a gap above
   the awning. */
@keyframes awning-drop{
  0%    {transform:translateY(-100%);  animation-timing-function:cubic-bezier(.12,.72,.38,1)}
  9%    {transform:translateY(-76%);   animation-timing-function:cubic-bezier(.45,.05,.55,1)}
  17%   {transform:translateY(-88%);   animation-timing-function:cubic-bezier(.52,0,.86,.42)}
  60%   {transform:translateY(0);      animation-timing-function:cubic-bezier(.15,.76,.4,1)}
  70.2% {transform:translateY(-3.4%);  animation-timing-function:cubic-bezier(.6,0,.9,.45)}
  80.4% {transform:translateY(0);      animation-timing-function:cubic-bezier(.15,.76,.4,1)}
  86.5% {transform:translateY(-1.22%); animation-timing-function:cubic-bezier(.6,0,.9,.45)}
  92.7% {transform:translateY(0);      animation-timing-function:cubic-bezier(.15,.76,.4,1)}
  96.3% {transform:translateY(-.44%);  animation-timing-function:cubic-bezier(.6,0,.9,.45)}
  100%  {transform:translateY(0)}
}
.awning{position:relative;z-index:5}

.canopy{
  position:relative;
  padding:clamp(30px,6vw,58px) 24px calc(var(--scallop) + clamp(34px,6vw,58px));
}

/* The striped cloth is its own layer so it can drop into place without
   taking the shop name with it. The animation sits on the outer element
   and the drop-shadow filter on the inner one: a filter on the element
   being transformed rasterises hard-edged mid-animation. */
.canopy-fabric{
  position:absolute;left:0;right:0;top:0;bottom:-48px;
  z-index:0;pointer-events:none;
  animation:awning-drop 1.22s both;
}
/* `i` carries only the shadow. The cloth and its scallop mask live on the
   pseudo-element inside it, because CSS resolves filter BEFORE mask: put
   both on one element and the mask clips the shadow away to nothing. */
.canopy-fabric > i{
  position:absolute;left:0;right:0;top:0;bottom:48px;display:block;
  filter:drop-shadow(0 11px 0 rgba(91,39,64,.30));
}
.canopy-fabric > i::before{
  content:"";position:absolute;inset:0;display:block;
  background-color:var(--pink);
  /* shading first (drawn on top), stripes underneath */
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.42), rgba(255,255,255,0) 30%),
    linear-gradient(0deg, rgba(91,39,64,.14), rgba(91,39,64,0) 22%),
    repeating-linear-gradient(
      90deg,
      var(--pink) 0 var(--stripe),
      #FFFFFF var(--stripe) calc(var(--stripe) * 2)
    );
  -webkit-mask:
    linear-gradient(#000 0 0) top left / 100% calc(100% - var(--scallop)) no-repeat,
    radial-gradient(circle var(--scallop) at 50% 0, #000 97%, transparent 100%)
      bottom left / var(--stripe) var(--scallop) repeat-x;
          mask:
    linear-gradient(#000 0 0) top left / 100% calc(100% - var(--scallop)) no-repeat,
    radial-gradient(circle var(--scallop) at 50% 0, #000 97%, transparent 100%)
      bottom left / var(--stripe) var(--scallop) repeat-x;
}

.canopy-inner{
  position:relative;z-index:1;
  max-width:var(--maxw);
  margin-inline:auto;
  display:flex;align-items:center;
  gap:clamp(20px,3.6vw,48px);
  text-align:left;
}
.awning-logo{
  flex:none;height:clamp(132px,17vw,228px);width:auto;display:block;
  filter:drop-shadow(0 4px 0 rgba(91,39,64,.22));
}
.canopy-text{min-width:0}
/* Phones: the logo already says "Ice Cream on Elm", so drop the text block
   and show the logo at full size instead. */
@media (max-width:720px){
  .canopy-inner{flex-direction:column;text-align:center;gap:0}
  .awning-logo{height:auto;width:min(70vw,266px)}
  .canopy-text{display:none}
}

.eyebrow{
  margin:0 0 14px;
  font-size:clamp(11px,1.4vw,13px);
  font-weight:700;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--berry);
}

.shopname{
  font-size:clamp(2.5rem,9.2vw,6rem);
  font-weight:900;
  font-variation-settings:"SOFT" 60,"WONK" 1,"opsz" 120;
  color:var(--berry);
  text-shadow:0 2px 0 rgba(255,255,255,.55);
}

.tagline{
  margin:16px 0 0;
  max-width:34ch;
  font-size:clamp(15px,2vw,19px);
  font-style:italic;
  font-family:var(--font-display);
  color:var(--berry);
  opacity:.85;
}

.badge{
  display:inline-flex;align-items:center;gap:10px;
  margin:26px 0 14px;padding:9px 18px 9px 14px;
  background:var(--cream);
  border-radius:999px;
  box-shadow:0 3px 0 rgba(91,39,64,.14);
  font-size:14px;font-weight:700;color:var(--berry);
}
.badge .stars{flex:none}
/* No transform on hover: this badge sits inside .awning, which carries a
   drop-shadow filter. A transformed child inside a filtered parent gets
   re-rasterised, and the parent's drop-shadow of it renders as a hard dark
   edge. Colour-only hover keeps the element in the same layer. */
a.badge{text-decoration:none;transition:background .18s ease, border-color .18s ease;border:1.5px solid transparent}
a.badge:hover{background:#fff;border-color:var(--pink)}

/* ---------- Quick facts bar ------------------------------- */

.quickfacts{
  background:var(--sky);color:var(--berry);
  border-bottom:3px solid rgba(0,0,0,.14);position:relative;z-index:6;
}
.quickfacts p{
  margin:0;padding:9px 0;font-size:13.5px;line-height:1.5;
  display:flex;flex-wrap:wrap;justify-content:center;gap:5px 13px;
}
.quickfacts b{color:var(--ink);font-weight:700}
.quickfacts a{color:var(--berry);text-decoration:none;border-bottom:1px solid rgba(91,39,64,.35)}
.quickfacts a:hover{color:var(--sky-deep);border-bottom-color:var(--sky-deep)}
.quickfacts .sep{opacity:.35}
@media (max-width:560px){.quickfacts p{font-size:12.5px;gap:4px 9px}}

/* ---------- Loading state --------------------------------- */

.skel{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));list-style:none;margin:0;padding:0}
.skel li{
  background:var(--cream);border:1px solid var(--pink-soft);border-radius:16px;
  padding:20px 18px;box-shadow:var(--shadow-sm);
}
.skel .ln{height:13px;border-radius:3px;background:var(--pink-soft);margin-bottom:10px}
.skel .ln.t{height:17px;width:62%;background:var(--pink)}
.skel .ln.s{width:88%} .skel .ln.q{width:54%;margin-bottom:0}
.skel li{animation:pulse 1.15s ease-in-out infinite}
.skel li:nth-child(2){animation-delay:.12s}
.skel li:nth-child(3){animation-delay:.24s}
.skel li:nth-child(4){animation-delay:.36s}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.55}}

.loading-row{
  display:flex;align-items:center;justify-content:center;gap:11px;
  padding:20px 0;font-size:14px;color:var(--berry-soft);
}
.spinner{
  width:17px;height:17px;flex:none;border-radius:50%;
  border:2.5px solid var(--pink-soft);border-top-color:var(--berry);
  animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){
  .skel li,.spinner{animation:none}
  .spinner{border-top-color:var(--pink-soft)}
}

/* ---------- Sticky nav ------------------------------------ */

.navbar{
  position:fixed;top:0;left:0;right:0;z-index:60;
  background:rgba(255,251,247,.92);
  -webkit-backdrop-filter:saturate(150%) blur(10px);
  backdrop-filter:saturate(150%) blur(10px);
  border-bottom:1px solid var(--pink-soft);
  transform:translateY(-102%);
  transition:transform .3s ease;
}
.navbar.is-visible{transform:translateY(0)}
.navbar-inner{
  max-width:var(--maxw);margin-inline:auto;padding:11px 24px;
  display:flex;align-items:center;gap:20px;justify-content:space-between;
}
.navbar-mark{
  font-family:var(--font-display);font-weight:900;font-size:17px;color:var(--berry);
  white-space:nowrap;display:flex;align-items:center;gap:9px;text-decoration:none;
}
.navbar-logo{height:29px;width:auto;flex:none;display:block}
.navlinks{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.navlinks a{
  color:var(--berry);text-decoration:none;font-size:14px;font-weight:600;
  padding:7px 13px;border-radius:999px;transition:background .18s ease;
}
.navlinks a:hover{background:var(--pink-tint)}
.navlinks a.nav-cta{background:var(--berry);color:var(--cream)}
.navlinks a.nav-cta:hover{background:var(--berry-soft)}
@media (max-width:640px){
  .navbar-mark > span{display:none}
  .navbar-logo{height:26px}
  .navbar-inner{justify-content:space-between;padding:9px 14px;gap:10px}
  .navlinks a{padding:6px 10px;font-size:13px}
}

/* ---------- Sections -------------------------------------- */

section{padding:clamp(64px,9vw,110px) 0;position:relative}

.section-head{max-width:640px;margin-bottom:clamp(34px,5vw,52px)}
.section-head.center{margin-inline:auto;text-align:center}

.kicker{
  display:inline-block;margin:0 0 12px;
  font-size:12px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--berry-soft);
}
h2{font-size:clamp(1.85rem,4.4vw,2.9rem);font-weight:900;font-variation-settings:"SOFT" 50,"WONK" 1}
.lede{margin:16px 0 0;font-size:clamp(16px,1.8vw,18.5px);color:var(--berry-soft);line-height:1.7}

/* scoop divider */
.scoops{display:flex;gap:7px;justify-content:inherit;margin-top:18px}
.scoops span{width:11px;height:11px;border-radius:50%;display:block}
.scoops span:nth-child(1){background:var(--pink)}
.scoops span:nth-child(2){background:var(--mint)}
.scoops span:nth-child(3){background:var(--butter)}

/* ---------- Location -------------------------------------- */

#location{padding-top:clamp(56px,7vw,84px)}

.loc-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,48px);align-items:center;
}
@media (max-width:860px){.loc-grid{grid-template-columns:1fr}}

.card{
  background:var(--cream);
  border:1px solid var(--pink-soft);
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
}

.addr{
  font-family:var(--font-display);
  font-size:clamp(1.35rem,3vw,1.9rem);
  font-weight:600;
  line-height:1.35;
  color:var(--berry);
  margin:0 0 8px;
}
.addr-sub{margin:0;color:var(--berry-soft);font-size:16.5px}

.loc-facts{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:14px}
.loc-facts li{display:flex;gap:13px;align-items:flex-start;font-size:16px;color:var(--ink)}
.loc-facts .ic{
  flex:none;width:34px;height:34px;border-radius:11px;
  display:grid;place-items:center;background:var(--pink-tint);color:var(--berry);
}
.loc-facts .ic svg{width:18px;height:18px}
.loc-facts strong{display:block;font-weight:700;color:var(--berry)}
.loc-facts span.muted{color:var(--berry-soft);font-size:15px}

.btnrow{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}

.btn{
  display:inline-flex;align-items:center;gap:9px;
  padding:14px 24px;border-radius:999px;
  font-family:var(--font-body);font-size:15.5px;font-weight:700;
  text-decoration:none;border:1.5px solid transparent;cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.btn svg{width:17px;height:17px;flex:none}
.btn-primary{background:var(--berry);color:var(--cream);box-shadow:0 4px 0 rgba(91,39,64,.28)}
.btn-primary:hover{background:#6d3050;transform:translateY(-2px);box-shadow:0 6px 0 rgba(91,39,64,.28)}
.btn-primary:active{transform:translateY(1px);box-shadow:0 2px 0 rgba(91,39,64,.28)}
.btn-ghost{background:var(--cream);color:var(--berry);border-color:var(--pink)}
.btn-ghost:hover{background:var(--pink-tint);transform:translateY(-2px)}
@media (prefers-reduced-motion:reduce){.btn:hover{transform:none}}

/* map illustration */
.mapcard{
  padding:14px;border-radius:var(--radius);
  background:var(--cream);border:1px solid var(--pink-soft);box-shadow:var(--shadow-md);
}
.mapcard > svg{width:100%;height:auto;border-radius:14px;display:block}
.mapcard > iframe{width:100%;height:clamp(320px,42vw,430px);border:0;border-radius:14px;display:block}
.mapcaption{
  margin:12px 4px 2px;font-size:13px;color:var(--berry-soft);
  display:flex;align-items:center;gap:7px;
}
.mapcaption svg{width:14px;height:14px;flex:none}

/* weekly hours, folded behind a text link under the clock fact */
.hours-more{margin-top:11px}
.hours-more summary{
  display:inline-flex;align-items:center;gap:6px;cursor:pointer;list-style:none;
  font-family:var(--font-body);font-size:14px;font-weight:600;color:var(--berry);
  text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--pink);text-decoration-thickness:1.5px;
}
.hours-more summary::-webkit-details-marker{display:none}
.hours-more summary::after{
  content:"";width:6px;height:6px;flex:none;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg) translate(-1px,-2px);transition:transform .18s ease;
}
.hours-more[open] summary::after{transform:rotate(-135deg) translate(-2px,-1px)}
.hours-more summary:hover{text-decoration-color:var(--berry)}
@media (prefers-reduced-motion:reduce){.hours-more summary::after{transition:none}}

.hours-week{
  list-style:none;margin:13px 0 2px;padding:0;display:grid;gap:6px;
  font-size:14px;max-width:250px;
}
.hours-week li{display:flex;align-items:baseline;gap:8px;color:var(--berry-soft)}
.hours-week .d{flex:none;width:2.8em}
.hours-week .dot{flex:1;min-width:14px;border-bottom:1.5px dotted var(--pink-soft);transform:translateY(-3px)}
.hours-week .r{flex:none;white-space:nowrap;font-variant-numeric:tabular-nums}
.hours-week li.is-today{color:var(--berry);font-weight:700}
.hours-week li.is-today .dot{border-bottom-color:var(--pink)}
.hours-week li.is-shut .r{opacity:.75}

/* ---------- Details strip --------------------------------- */

.strip{
  background:var(--mint-soft);
  border-top:1px solid rgba(159,216,199,.75);
}
.facts{
  list-style:none;padding:0;margin:0;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px clamp(14px,2vw,28px);align-items:center;
}
.facts li{
  display:flex;align-items:center;justify-content:center;gap:11px;
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(14px,1.55vw,16px);
  color:var(--berry);line-height:1.25;text-align:left;
}
.facts svg{width:24px;height:24px;flex:none;color:var(--berry-soft)}

.facts-link{margin:clamp(14px,2vw,20px) 0 0;text-align:center}
.facts-link a{
  font-family:var(--font-body);font-size:14px;font-weight:700;color:var(--berry);
  text-decoration:underline;text-underline-offset:4px;
  text-decoration-color:var(--mint);text-decoration-thickness:2px;
}
.facts-link a:hover{text-decoration-color:var(--berry)}
.facts-link span{display:inline-block;transition:transform .18s ease}
.facts-link a:hover span{transform:translateX(3px)}
@media (prefers-reduced-motion:reduce){.facts-link a:hover span{transform:none}}

@media (max-width:900px){.facts{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 28px;max-width:34em;margin-inline:auto}}
@media (max-width:520px){.facts{grid-template-columns:1fr;max-width:17em;gap:13px}
  .facts li{justify-content:flex-start}}

/* ---------- Menu ------------------------------------------ */

.pricecard{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,4vw,52px);
  background:var(--cream);border:1px solid var(--pink-soft);border-radius:var(--radius);
  padding:clamp(26px,4vw,40px);box-shadow:var(--shadow-md);
}
@media (max-width:640px){.pricecard{grid-template-columns:1fr;gap:28px}}
.pricecard.one-group{grid-template-columns:1fr}
.pricecard.one-group .pricegroup ul{columns:2;column-gap:clamp(30px,5vw,60px);display:block}
.pricecard.one-group .pricegroup li{break-inside:avoid;margin-bottom:14px}
@media (max-width:560px){.pricecard.one-group .pricegroup ul{columns:1}}
.pricegroup h3{
  font-size:12px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  font-family:var(--font-body);color:var(--berry-soft);margin:0 0 16px;
}
.pricegroup ul{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.pricegroup li{display:flex;align-items:baseline;gap:10px}
.pricegroup .it{
  font-family:var(--font-display);font-size:18.5px;font-weight:600;color:var(--berry);
  line-height:1.25;flex:none;max-width:70%;
}
.pricegroup .it .sub{
  display:block;font-family:var(--font-body);font-size:13px;font-weight:400;
  color:var(--berry-soft);margin-top:2px;
}
.pricegroup .dot{flex:1;border-bottom:2px dotted var(--pink-soft);transform:translateY(-4px)}
.pricegroup .pr{
  font-family:var(--font-display);font-size:18.5px;font-weight:900;color:var(--berry);flex:none;
}
.flav-head{
  font-size:12px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  font-family:var(--font-body);color:var(--berry-soft);margin:clamp(38px,5vw,54px) 0 18px;
  text-align:center;
}

/* ---------- Flavours -------------------------------------- */

.flavours{
  list-style:none;margin:0;padding:0;display:grid;gap:16px;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
}
.flav{
  background:var(--cream);border:1px solid var(--pink-soft);border-radius:16px;
  padding:20px 20px 18px;box-shadow:var(--shadow-sm);
  transition:transform .22s ease, box-shadow .22s ease;
}
.flav:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
@media (prefers-reduced-motion:reduce){.flav:hover{transform:none}}
.flav h3{
  font-family:var(--font-display);font-size:19px;font-weight:900;
  font-variation-settings:"SOFT" 40,"WONK" 1;margin:0 0 6px;line-height:1.2;
}
.flav p{margin:0;font-size:14.5px;color:var(--berry-soft);line-height:1.6}
.flav .tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:13px}
.flav .tag{
  font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  padding:4px 10px;border-radius:999px;background:var(--pink-tint);color:var(--berry);
}
.flav .tag.is-lf{background:var(--mint-soft);color:#2F6553}   /* lactose / dairy free */
.flav .tag.is-gf{background:#F0E0CE;color:#7A5537}            /* gluten free, waffle brown */
.flav .tag.is-new{background:var(--butter)}
.flav-note{margin:28px 0 0;text-align:center;font-size:14px;color:var(--berry-soft)}

/* ---------- About ----------------------------------------- */

#about{
  background-color:var(--cream-deep);
  background-image:var(--waffle);
}
.about-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,60px);align-items:start}
@media (max-width:860px){.about-grid{grid-template-columns:1fr}}

.about-body p{margin:0 0 20px;font-size:17.5px;line-height:1.78;color:var(--ink)}
.about-body p:last-child{margin-bottom:0}
.about-more{margin-top:4px;display:flex;flex-direction:column;align-items:flex-start}
.about-more > summary{order:2}
.about-more[open] > summary{margin:6px 0 0}
.about-more summary{
  display:inline-flex;align-items:center;gap:9px;cursor:pointer;list-style:none;
  font-family:var(--font-body);font-size:15px;font-weight:700;color:var(--berry);
  padding:11px 20px;border-radius:999px;
  background:var(--cream);border:1.5px solid var(--pink);
  transition:background .18s ease, transform .18s ease;
}
.about-more summary::-webkit-details-marker{display:none}
.about-more summary::after{
  content:"";width:9px;height:9px;flex:none;
  border-right:2.2px solid currentColor;border-bottom:2.2px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .2s ease;
}
.about-more[open] summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
.about-more summary:hover{background:var(--pink-tint)}
@media (prefers-reduced-motion:reduce){.about-more summary::after{transition:none}}
/* closed: the first paragraph fades at its foot so the fold reads as
   "there is more", not as the end of the article */
.about-body.is-clipped .first{
  -webkit-mask-image:linear-gradient(180deg,#000 62%,rgba(0,0,0,.35) 86%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 62%,rgba(0,0,0,.35) 86%,transparent 100%);
}
.about-body .credit{
  margin-top:30px;padding-top:18px;
  border-top:1px dashed var(--pink-soft);
  font-size:14px;line-height:1.6;color:var(--berry-soft);
}
.about-body .credit cite{font-style:italic}
.about-body p.first::first-letter{
  font-family:var(--font-display);font-weight:900;font-size:3.6em;line-height:.82;
  float:left;margin:6px 12px 0 0;color:var(--pink);
}

.quote-panel{
  padding:clamp(26px,3.5vw,38px);
  border-radius:var(--radius);
  background:var(--cream);
  border:1px solid var(--pink-soft);
  box-shadow:var(--shadow-md);
  position:sticky;top:80px;
}
.quote-panel .mark{
  font-family:var(--font-display);font-size:64px;line-height:.6;color:var(--pink);
  display:block;margin-bottom:8px;
}
.quote-panel blockquote{
  margin:0;font-family:var(--font-display);font-style:italic;
  font-size:clamp(19px,2.4vw,23px);line-height:1.5;color:var(--berry);
}
.quote-panel cite{
  display:block;margin-top:18px;font-style:normal;font-size:14px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--berry-soft);
}
@media (max-width:860px){.quote-panel{position:static}}

/* ---------- Reviews --------------------------------------- */

.review-lead{display:flex;justify-content:center;margin-bottom:clamp(34px,5vw,52px)}

/* testimonial masonry */
.cards{columns:3;column-gap:22px}
@media (max-width:960px){.cards{columns:2}}
@media (max-width:620px){.cards{columns:1}}

.tcard{
  /* inline-block (not block) so the browser paints the rounded shadow
     properly inside the multi-column layout; block boxes get their
     shadow corners clipped square at the column edge in Safari & Chrome */
  display:inline-block;width:100%;vertical-align:top;
  break-inside:avoid;
  background:var(--cream);
  border:1px solid var(--pink-soft);
  border-radius:18px;
  padding:24px 22px;
  margin:0 0 22px;
  box-shadow:var(--shadow-sm);
  transition:transform .22s ease, box-shadow .22s ease;
}
.tcard:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
@media (prefers-reduced-motion:reduce){.tcard:hover{transform:none}}

.tcard .stars{margin-bottom:14px}
.tcard p{margin:0;font-size:16px;line-height:1.68;color:var(--ink)}
.tcard footer{
  margin-top:18px;padding-top:15px;border-top:1px dashed var(--pink-soft);
  display:flex;align-items:center;gap:11px;
}
.avatar{
  flex:none;width:36px;height:36px;border-radius:50%;
  display:grid;place-items:center;
  font-family:var(--font-display);font-weight:900;font-size:15px;color:var(--berry);
  background:var(--pink-soft);
}
.avatar.m{background:var(--mint-soft)}
.avatar.b{background:var(--butter)}
.who{font-size:14.5px;font-weight:700;color:var(--berry);line-height:1.3}
.who span{display:block;font-weight:500;font-size:13px;color:var(--berry-soft)}

.reply{
  margin-top:16px;padding:14px 16px;border-radius:13px;
  background:var(--pink-tint);font-size:14.5px;color:var(--berry-soft);line-height:1.6;
}
.reply strong{display:block;color:var(--berry);font-size:13px;margin-bottom:4px}

.more-reviews{text-align:center;margin-top:clamp(28px,4vw,42px)}

/* ---------- Events + Contact ------------------------------ */

#contact{
  background:linear-gradient(180deg, var(--pink-tint), var(--cream) 70%);
  border-top:1px solid var(--pink-soft);
}

.party-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:20px;
  margin-bottom:clamp(40px,6vw,64px);
}
@media (max-width:860px){.party-grid{grid-template-columns:1fr}}

.party{
  background:var(--cream);border:1px solid var(--pink-soft);border-radius:18px;
  padding:26px 24px;box-shadow:var(--shadow-sm);
}
.party .ic{
  width:42px;height:42px;border-radius:13px;display:grid;place-items:center;
  background:var(--pink-tint);color:var(--berry);margin-bottom:15px;
}
.party .ic svg{width:22px;height:22px}
.party h3{font-size:17.5px;font-weight:700;margin-bottom:7px}
.party p{margin:0;font-size:15px;color:var(--berry-soft);line-height:1.62}

/* --- party photo mosaic ---------------------------------- */

/* Four framed prints: one wide, one tall, two small. The row height is
   tuned so the wide frame lands on 4:3 and the tall one on 2:3, which is
   what the photos are shot at -- so the crop stays gentle. */
.shots{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  grid-template-rows:repeat(2,clamp(112px,15.4vw,186px));
  grid-template-areas:
    "a a b c"
    "a a b d";
  gap:16px;
  margin-bottom:16px;
}
.shot{
  margin:0;overflow:hidden;
  padding:7px;
  border-radius:19px;border:1px solid var(--pink-soft);
  background:var(--cream);box-shadow:var(--shadow-sm);
  transition:transform .22s ease, box-shadow .22s ease;
}
.shot:nth-child(1){grid-area:a}
.shot:nth-child(2){grid-area:b}
.shot:nth-child(3){grid-area:c}
.shot:nth-child(4){grid-area:d}
.shot img{width:100%;height:100%;object-fit:cover;border-radius:12px}
.shot:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
@media (prefers-reduced-motion:reduce){.shot:hover{transform:none}}

/* the sundae shot is the one frame asked to crop across its short edge */
.shot.crop-mid img{object-position:50% 46%}

.shots-note{
  margin:0 0 clamp(38px,5.5vw,60px);
  font-size:14px;color:var(--berry-soft);text-align:center;
}

/* Narrow screens drop the mosaic for the same masonry the review cards
   use, so every photo keeps its own shape and nothing gets cropped. */
@media (max-width:860px){
  .shots{
    display:block;
    columns:2;column-gap:14px;
    grid-template-areas:none;
  }
  .shot{break-inside:avoid;margin:0 0 14px}
  .shot img{height:auto}
}

/* --- contact rail --- */
.rail{display:grid;gap:12px}
.rail-item{
  display:flex;gap:14px;align-items:flex-start;
  background:var(--cream);border:1px solid var(--pink-soft);border-radius:16px;
  padding:17px 18px;box-shadow:var(--shadow-sm);
  text-decoration:none;color:inherit;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
a.rail-item:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:var(--pink)}
@media (prefers-reduced-motion:reduce){a.rail-item:hover{transform:none}}
.rail-item .ic{
  flex:none;width:38px;height:38px;border-radius:12px;display:grid;place-items:center;
  background:var(--pink-tint);color:var(--berry);
}
.rail-item .ic svg{width:19px;height:19px}
.rail-item .lbl{
  display:block;font-size:11.5px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--berry-soft);margin-bottom:3px;
}
.rail-item .val{
  display:block;font-family:var(--font-display);font-weight:600;font-size:17px;
  color:var(--berry);line-height:1.3;word-break:break-word;
}
.rail-item .note{display:block;font-size:13.5px;color:var(--berry-soft);margin-top:3px}

/* --- contact: rail beside the form --- */
.contact-grid{
  display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(24px,4vw,44px);align-items:start;
}
@media (max-width:860px){.contact-grid{grid-template-columns:1fr}}

/* --- contact call to action (the form lives on its own page) --- */
.contact-cta{
  background:var(--cream);border:1px solid var(--pink-soft);border-radius:var(--radius);
  padding:clamp(26px,3.6vw,40px);box-shadow:var(--shadow-md);
  align-self:start;
}
.contact-cta h3{
  font-size:clamp(1.2rem,2.5vw,1.55rem);font-weight:900;
  font-variation-settings:"SOFT" 50,"WONK" 1;margin-bottom:10px;
}
.contact-cta > p{margin:0 0 22px;font-size:15.5px;color:var(--berry-soft);line-height:1.65}
.contact-cta .cta-alt{margin:18px 0 0;font-size:14px;color:var(--berry-soft)}

/* --- form --- */
.formcard{
  background:var(--cream);border:1px solid var(--pink-soft);border-radius:var(--radius);
  padding:clamp(24px,3.5vw,38px);box-shadow:var(--shadow-md);
}
.formcard > h3{
  font-size:clamp(1.25rem,2.6vw,1.6rem);font-weight:900;
  font-variation-settings:"SOFT" 50,"WONK" 1;margin-bottom:8px;
}
.formcard > .hint{margin:0 0 26px;font-size:15px;color:var(--berry-soft);line-height:1.6}

.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px 18px}
@media (max-width:560px){.fgrid{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:7px}
.field.wide{grid-column:1/-1}

.field label{
  font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--berry-soft);
}
.field label .req{color:var(--pink);margin-left:2px}

.field input,.field select,.field textarea{
  font-family:var(--font-body);font-size:16px;color:var(--ink);
  background:#fff;border:1.5px solid var(--pink-soft);border-radius:13px;
  padding:12px 14px;width:100%;
  transition:border-color .16s ease, box-shadow .16s ease;
  appearance:none;-webkit-appearance:none;
}
.field textarea{resize:vertical;min-height:118px;line-height:1.6}
.field select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B2740' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;background-size:17px;
  padding-right:40px;cursor:pointer;
}
.field input::placeholder,.field textarea::placeholder{color:#C9A9B8}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--pink);box-shadow:0 0 0 4px rgba(244,169,196,.28);
}
.field input:user-invalid,.field textarea:user-invalid{border-color:#D4738F}
.field .help{font-size:13px;color:var(--berry-soft)}

.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.form-foot{
  margin-top:24px;display:flex;flex-wrap:wrap;gap:16px;align-items:center;
  justify-content:space-between;
}
.form-foot .fineprint{margin:0;font-size:13.5px;color:var(--berry-soft);max-width:30ch}

.form-status{
  margin-top:18px;padding:15px 17px;border-radius:14px;font-size:15px;line-height:1.6;
  display:none;
}
.form-status.show{display:block}
.form-status.ok{background:var(--mint-soft);color:#2F6553;border:1px solid var(--mint)}
.form-status.err{background:#FDE7EC;color:#8E2E48;border:1px solid #F0AFC0}

.socials{display:flex;gap:11px;flex-wrap:wrap;margin-top:4px}
.social{
  display:inline-flex;align-items:center;gap:9px;
  padding:11px 17px;border-radius:999px;text-decoration:none;
  background:var(--cream);border:1.5px solid var(--pink-soft);
  font-size:14.5px;font-weight:700;color:var(--berry);
  transition:transform .18s ease, border-color .18s ease, background .18s ease;
}
.social:hover{transform:translateY(-2px);border-color:var(--pink);background:var(--pink-tint)}
@media (prefers-reduced-motion:reduce){.social:hover{transform:none}}
.social svg{width:17px;height:17px}

/* ---------- Footer ---------------------------------------- */

footer.site{
  background:var(--berry);color:var(--pink-tint);
  padding:clamp(52px,7vw,74px) 0 0;
}
footer.site h2{color:var(--cream);font-size:clamp(1.5rem,3.4vw,2.1rem)}
.foot-grid{
  display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:clamp(24px,4vw,44px);
  padding-bottom:44px;
}
@media (max-width:760px){.foot-grid{grid-template-columns:1fr;gap:30px}}
footer.site p,footer.site li{color:rgba(255,239,244,.78);font-size:15.5px;line-height:1.7}
footer.site a{color:var(--pink-tint);text-decoration-color:rgba(244,169,196,.5);text-underline-offset:3px}
footer.site a:hover{color:#fff}
footer.site h3{
  color:var(--cream);font-size:13px;letter-spacing:.2em;text-transform:uppercase;
  font-family:var(--font-body);font-weight:700;margin-bottom:14px;
}
footer.site ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.foot-social{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.foot-social a{
  width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,239,244,.12);color:var(--pink-tint);
  transition:background .18s ease, transform .18s ease;
}
.foot-social a:hover{background:rgba(255,239,244,.24);transform:translateY(-2px);color:#fff}
.foot-social svg{width:18px;height:18px}
@media (prefers-reduced-motion:reduce){.foot-social a:hover{transform:none}}

.foot-logo{display:flex;justify-content:center;padding:8px 0 30px}
.foot-logo img{
  height:clamp(120px,17vw,168px);width:auto;display:block;
  filter:drop-shadow(0 5px 0 rgba(0,0,0,.32));
}

.foot-bottom{
  border-top:1px solid rgba(255,239,244,.16);
  padding:22px 0 30px;
  display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center;
  font-size:13.5px;color:rgba(255,239,244,.6);
}
.foot-stripe{height:12px;background-image:repeating-linear-gradient(90deg,var(--pink) 0 28px,#fff 28px 56px)}

/* ---------- Melting drips --------------------------------- */

/* One continuous bezier edge, used as a mask over a solid fill, so the
   drips flow out of the section rather than sitting on it as separate
   shapes. Growth is done by shrinking the mask's height (--p), not by
   transforming the element -- that keeps the falling droplets unscaled. */
:root{
  --waffle:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='36'%20height='36'%20viewBox='0%200%2036%2036'%3E%3Cpath%20d='M0%200L36%2036M36%200L0%2036'%20stroke='%23A9805A'%20stroke-opacity='.075'%20stroke-width='1.4'/%3E%3Cpath%20d='M0%204.5L31.5%2036M36%204.5L4.5%2036M4.5%200L36%2031.5M31.5%200L0%2031.5'%20stroke='%23FFFFFF'%20stroke-opacity='.38'%20stroke-width='1.4'/%3E%3C/svg%3E");
  --dripmask:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20240%20100'%20preserveAspectRatio='none'%3E%3Cpath%20d='M0,24%20C5,24%2010,28%2017,24%20C25,30%2024,69%2025,75%20C25,93%2051,93%2051,75%20C52,69%2051,30%2059,24%20C66,24%2070,31%2078,29%20C82,28%2083,24%2086,24%20C94,30%2093,39%2094,43.5%20C94,57.5%20114,57.5%20114,43.5%20C115,39%20114,30%20122,24%20C130,24%20134,30%20141,28%20C145,27%20146,24%20148,24%20C156,30%20155,54.4%20156,59.8%20C156,76.6%20180,76.6%20180,59.8%20C181,54.4%20180,30%20188,24%20C193,24%20197,29%20205,24%20C213,30%20212,28.3%20213,32.35%20C213,44.95%20231,44.95%20231,32.35%20C232,28.3%20231,30%20239,24%20L240,24%20L240,0%20L0,0%20Z'%20fill='black'/%3E%3C/svg%3E");
  --tearmask:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2020%2026'%3E%3Cpath%20d='M10%201C12.4%208%2019%2012.4%2019%2017.4%2019%2022.2%2015%2026%2010%2026%205%2026%201%2022.2%201%2017.4%201%2012.4%207.6%208%2010%201Z'%20fill='black'/%3E%3C/svg%3E");
}

.dripedge{
  --dripc:var(--cream);
  --p:1;
  position:absolute;left:0;right:0;bottom:0;height:0;
  z-index:3;pointer-events:none;
  filter:drop-shadow(0 3px 0 rgba(91,39,64,.17));
}
.dripline{
  position:absolute;top:-2px;left:0;right:0;height:102px;
  background:var(--dripc);
  -webkit-mask:var(--dripmask) top left / 240px calc(var(--p) * 100px) repeat-x;
          mask:var(--dripmask) top left / 240px calc(var(--p) * 100px) repeat-x;
}
.dripfall{position:absolute;top:0;left:0;right:0;height:0}

/* a droplet that has let go of a drip tip */
.dripdrop{
  position:absolute;width:11px;height:14px;margin-left:-5.5px;
  background:var(--dripc);
  -webkit-mask:var(--tearmask) center / 100% 100% no-repeat;
          mask:var(--tearmask) center / 100% 100% no-repeat;
}

@media (max-width:640px){
  .dripline{
    height:68px;
    -webkit-mask-size:160px calc(var(--p) * 66px);
            mask-size:160px calc(var(--p) * 66px);
  }
  .dripdrop{width:9px;height:11px;margin-left:-4.5px}
}

/* a section carrying a drip must paint above the section below it */
.strip,#contact{z-index:2}

@media (prefers-reduced-motion:reduce){
  .dripedge{--p:1}
}

/* ---------- Reveal on scroll ------------------------------ */

.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
}

/* ---------- Menu page ------------------------------------- */

.canopy-slim{padding:clamp(24px,4vw,40px) 24px calc(var(--scallop) + clamp(26px,4vw,44px))}
.page-menu .canopy-inner{justify-content:center;text-align:center}
.page-menu .canopy-text{width:100%}
.shopname-slim{font-size:clamp(2rem,6.5vw,3.6rem)}
.page-menu #menu{padding-top:clamp(48px,7vw,80px)}

.page-contact{background-color:var(--pink-tint)}
.page-contact #contact{background:none;border-top:0;padding-top:clamp(48px,7vw,80px)}
.menu-back{margin-top:clamp(40px,6vw,64px);display:flex;justify-content:center;padding-bottom:clamp(20px,4vw,40px)}
.navlinks a[aria-current="page"]{background:var(--pink-tint);color:var(--berry)}