/* =========================================================
   Que Dulce | The Dessert Shop
   North Port, FL
   ========================================================= */

/* ---------- Tokens ---------- */
:root{
  --cream:      #FFFAF5;
  --cream-2:    #FCE7EC;
  --white:      #FFFFFF;

  --pink:       #AE3F65;
  --pink-deep:  #89314F;
  --pink-soft:  #EFB9CB;
  --pink-tint:  #FFF0F5;

  --cocoa:      #4D2938;
  --cocoa-soft: #755563;
  --cocoa-faint:#866471;

  --mango:      #F6A02B;
  --guava:      #F2685C;
  --mint:       #1F7A5C;
  --mauve:      #E6C9CD;
  --gold:       #E8B86D;
  --gold-deep:  #B8801F;

  --line:       #EFDCD9;
  --line-strong:#E0C6C6;

  --shadow-sm:  0 1px 2px rgba(52,33,30,.06), 0 2px 8px rgba(52,33,30,.05);
  --shadow-md:  0 4px 12px rgba(52,33,30,.07), 0 12px 32px rgba(52,33,30,.08);
  --shadow-lg:  0 8px 24px rgba(52,33,30,.09), 0 24px 64px rgba(52,33,30,.11);

  --radius:     18px;
  --radius-lg:  28px;
  --radius-pill:999px;

  --wrap:       1180px;
  --gutter:     clamp(20px, 5vw, 48px);

  --sans: "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: "Fraunces", ui-serif, Georgia, "Times New Roman", serif;
  --script: "Parisienne", "Fraunces", cursive;

  --header-h: 72px;
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 16px); }
body{
  margin:0;
  font-family:var(--sans);
  font-size:clamp(16px,.5vw + 15px,17px);
  line-height:1.65;
  color:var(--cocoa);
  background:var(--cream);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg,iframe{ max-width:100%; display:block; }
h1,h2,h3,h4{ font-family:var(--display); font-weight:600; line-height:1.1; margin:0 0 .5em; letter-spacing:-.015em; }
h1{ font-size:clamp(2.6rem,7vw,4.6rem); font-weight:700; }
h2{ font-size:clamp(1.9rem,3.6vw,2.9rem); }
h3{ font-size:clamp(1.15rem,1.6vw,1.4rem); }
p{ margin:0 0 1.1em; }
a{ color:var(--pink); text-decoration-thickness:1.5px; text-underline-offset:3px; }
a:hover{ color:var(--pink-deep); }
ul{ margin:0; padding:0; list-style:none; }
button,input,select,textarea{ font:inherit; color:inherit; }

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

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

/* ---------- Layout ---------- */
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter); }
.section{ padding:clamp(64px,9vw,120px) 0; position:relative; }
.section-tint{ background:linear-gradient(180deg,var(--cream) 0%, var(--pink-tint) 22%, var(--pink-tint) 78%, var(--cream) 100%); }
.section-head{ max-width:620px; margin-bottom:clamp(36px,5vw,56px); }
.section-head.center{ margin-inline:auto; text-align:center; }
.section-lede{ color:var(--cocoa-soft); font-size:1.075rem; margin-bottom:0; }

.eyebrow{
  font-size:.78rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--pink); margin:0 0 .8em;
}

/* ---------- Buttons ---------- */
.btn{
  --btn-bg:var(--pink); --btn-fg:#fff; --btn-bd:var(--pink);
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  padding:.85em 1.6em; border:1.5px solid var(--btn-bd); border-radius:var(--radius-pill);
  background:var(--btn-bg); color:var(--btn-fg);
  font-weight:700; font-size:.98rem; text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:transform .18s cubic-bezier(.2,.8,.3,1), box-shadow .18s, background .18s, color .18s;
  box-shadow:var(--shadow-sm);
}
.btn:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); color:var(--btn-fg); }
.btn:active{ transform:translateY(0); }
.btn-primary{ --btn-bg:var(--pink); --btn-fg:#fff; --btn-bd:var(--pink); }
.btn-primary:hover{ --btn-bg:var(--pink-deep); --btn-bd:var(--pink-deep); }
.btn-ghost{ --btn-bg:transparent; --btn-fg:var(--cocoa); --btn-bd:var(--line-strong); box-shadow:none; }
.btn-ghost:hover{ --btn-bd:var(--pink); --btn-fg:var(--pink); }
.btn-sm{ padding:.62em 1.35em; font-size:.88rem; }
.btn-block{ width:100%; }

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(255,247,242,.82);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .25s, box-shadow .25s;
}
.site-header.is-stuck{ border-bottom-color:var(--line); box-shadow:0 2px 20px rgba(52,33,30,.05); }
.header-inner{ display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:var(--header-h); }

.brand{ display:flex; align-items:center; gap:11px; text-decoration:none; color:var(--cocoa); }
.brand-mark{ width:42px; height:42px; flex:none; }
.brand-mark img{ width:100%; height:100%; object-fit:contain; }
.brand-text{ display:flex; flex-direction:column; line-height:1; }
.brand-name{ font-family:var(--display); font-weight:700; font-size:1.3rem; letter-spacing:-.02em; }
.brand-sub{ font-size:.66rem; letter-spacing:.17em; text-transform:uppercase; color:var(--cocoa-faint); margin-top:3px; }

.nav{ display:flex; align-items:center; gap:clamp(14px,2vw,30px); }
.nav a{
  color:var(--cocoa); text-decoration:none; font-size:.94rem; font-weight:500;
  position:relative; padding:4px 0;
}
.nav a:not(.btn)::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:var(--pink); transform:scaleX(0); transform-origin:left;
  transition:transform .22s cubic-bezier(.2,.8,.3,1);
}
.nav a:not(.btn):hover{ color:var(--pink); }
.nav a:not(.btn):hover::after{ transform:scaleX(1); }
.nav .btn{ color:#fff; }

.nav-toggle{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:44px; height:44px; padding:0 10px; background:none; border:0; cursor:pointer;
}
.nav-toggle span{ height:2px; background:var(--cocoa); border-radius:2px; transition:transform .25s, opacity .2s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero{ position:relative; padding-top:clamp(40px,6vw,72px); overflow:hidden; }
.hero-deco{ position:absolute; inset:0; pointer-events:none; z-index:0; }
.blob{ position:absolute; border-radius:50%; filter:blur(60px); opacity:.55; }
.blob-1{ width:420px; height:420px; background:var(--pink-soft); top:-120px; right:-80px; }
.blob-2{ width:320px; height:320px; background:#FFE2B8; bottom:40px; left:-110px; opacity:.6; }
.blob-3{ width:260px; height:260px; background:#FFCFC7; top:40%; right:32%; opacity:.4; }

.hero-inner{
  position:relative; z-index:1;
  display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(32px,5vw,64px);
  align-items:center; padding-bottom:clamp(48px,7vw,88px);
}
.hero h1{ margin-bottom:.3em; }
.hero h1 em{ font-style:italic; color:var(--pink); font-weight:600; }
.lede{ font-size:clamp(1.05rem,1.3vw,1.2rem); color:var(--cocoa-soft); max-width:46ch; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:12px; margin:2em 0 1.6em; }
.hero-actions.center{ justify-content:center; }

.hero-status{
  display:flex; align-items:center; flex-wrap:wrap; gap:10px;
  font-size:.92rem; color:var(--cocoa-soft);
}
.status-dot{
  width:9px; height:9px; border-radius:50%; background:var(--cocoa-faint); flex:none;
  box-shadow:0 0 0 4px rgba(156,131,126,.16);
}
.status-dot.is-open{ background:var(--mint); box-shadow:0 0 0 4px rgba(31,122,92,.16); }
.status-dot.is-closed{ background:var(--guava); box-shadow:0 0 0 4px rgba(242,104,92,.16); }
.hero-phone{ font-weight:700; text-decoration:none; margin-left:auto; }

/* ---------- Butterflies ----------
   Scattered by JS so every visit is slightly different. Purely decorative:
   pointer-events:none so they never intercept a tap, aria-hidden on the layer. */
.bfly-layer{
  position:absolute; inset:0; overflow:hidden;
  pointer-events:none; z-index:0;
}
.section, .hero, .closer{ position:relative; }
.section > .wrap, .closer > .wrap{ position:relative; z-index:1; }

.bfly{
  position:absolute; pointer-events:none;
  width:var(--size); height:var(--size);
  opacity:0;
  animation: bfly-in .9s ease forwards var(--delay),
             bfly-drift var(--dur) ease-in-out infinite var(--delay);
}
.bfly svg{
  width:100%; height:100%; display:block;
  transform-origin:50% 55%;
  animation: bfly-flutter var(--flutter) ease-in-out infinite var(--delay);
  filter:drop-shadow(0 3px 6px rgba(140,97,24,.22));
}
/* On the dark section they can glow a little harder */
.section-dark .bfly svg{ filter:drop-shadow(0 0 10px rgba(232,184,109,.45)); }

@keyframes bfly-in{ to{ opacity:var(--opacity); } }
@keyframes bfly-drift{
  0%,100%{ transform:translate3d(0,0,0) rotate(-5deg); }
  25%    { transform:translate3d(14px,-20px,0) rotate(6deg); }
  50%    { transform:translate3d(28px,-6px,0) rotate(-3deg); }
  75%    { transform:translate3d(10px,-24px,0) rotate(8deg); }
}
/* rotateY folds the wings toward the viewer — reads as a flap */
@keyframes bfly-flutter{
  0%,100%{ transform:perspective(220px) rotateY(0deg); }
  50%    { transform:perspective(220px) rotateY(62deg); }
}

/* The burst released by tapping the logo */
.bfly-burst{
  position:fixed; z-index:150; pointer-events:none;
  width:30px; height:30px; opacity:0;
  animation: bfly-burst var(--dur) cubic-bezier(.25,.7,.4,1) forwards;
}
.bfly-burst svg{
  width:100%; height:100%;
  animation: bfly-flutter .28s ease-in-out infinite;
}
@keyframes bfly-burst{
  0%  { opacity:0;  transform:translate(0,0) rotate(0deg) scale(.4); }
  12% { opacity:.95; }
  100%{ opacity:0;  transform:translate(var(--dx),var(--dy)) rotate(var(--rot)) scale(1); }
}

/* ---------- Photo slots (replace with real images) ---------- */
.photo{
  position:relative; margin:0; border-radius:var(--radius-lg); overflow:hidden;
  display:grid; place-items:center; box-shadow:var(--shadow-md);
  background:var(--mauve);
}
/* Slots still waiting on a real photo keep the dashed placeholder look. */
.photo[data-slot]{
  background:linear-gradient(135deg, var(--pink-soft) 0%, #FFE7D2 55%, #FFD9C4 100%);
  border:2px dashed rgba(194,48,74,.28);
}
.photo[data-slot]::before{
  content:attr(data-slot);
  font-family:var(--sans); font-size:.76rem; font-weight:700; letter-spacing:.06em;
  color:var(--pink-deep); background:rgba(255,255,255,.72);
  padding:6px 12px; border-radius:var(--radius-pill);
}
.photo[data-slot] figcaption{
  position:absolute; left:14px; bottom:12px;
  font-size:.74rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--pink-deep); opacity:.65;
}
.photo img{ width:100%; height:100%; object-fit:cover; display:block; }

.hero-art{ position:relative; }
.photo-hero{ aspect-ratio:4/5; }
.photo-float{
  aspect-ratio:1; width:44%; position:absolute; right:-6%; bottom:-8%;
  border-radius:var(--radius); box-shadow:var(--shadow-lg);
  background:linear-gradient(135deg,#FFE2B8 0%, var(--pink-soft) 100%);
}
.photo-tall{ aspect-ratio:3/4; }

/* ---------- Ticker ---------- */
.ticker{
  background:var(--pink); color:#fff; overflow:hidden; padding:14px 0;
  border-block:1px solid var(--pink-deep);
}
.ticker-track{
  display:flex; gap:22px; width:max-content; white-space:nowrap;
  animation:scroll 34s linear infinite;
  font-family:var(--display); font-size:1.05rem; font-style:italic; letter-spacing:.01em;
}
@keyframes scroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* ---------- Value strip ---------- */
.strip{ background:var(--cream-2); padding:clamp(40px,5vw,60px) 0; }
.strip-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(24px,3vw,44px); }
.strip-item h2{ margin-bottom:.4em; font-size:1.12rem; font-weight:600; line-height:1.1; letter-spacing:-.015em; }
.strip-item p{ margin:0; color:var(--cocoa-soft); font-size:.96rem; }

/* ---------- Menu ---------- */
.menu-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:clamp(18px,2.4vw,28px); }
.menu-card{
  overflow:hidden;
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:clamp(24px,2.6vw,32px); box-shadow:var(--shadow-sm);
  transition:transform .22s cubic-bezier(.2,.8,.3,1), box-shadow .22s, border-color .22s;
}
.menu-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--pink-soft); }
.menu-photo{
  margin:calc(-1 * clamp(24px,2.6vw,32px)) calc(-1 * clamp(24px,2.6vw,32px)) 0;
  border-radius:var(--radius-lg) var(--radius-lg) 0 0; overflow:hidden; background:var(--mauve);
}
.menu-photo img{ width:100%; height:auto; aspect-ratio:3/2; object-fit:cover; display:block;
  transition:transform .4s cubic-bezier(.2,.8,.3,1); }
.menu-card:hover .menu-photo img{ transform:scale(1.04); }

.menu-card-head{ display:flex; align-items:center; gap:12px; padding-top:20px; padding-bottom:16px; margin-bottom:8px; border-bottom:1px solid var(--line); }
.menu-card-head h3{ margin:0; font-size:1.13rem; }
.menu-icon{ font-size:1.5rem; line-height:1; }
.menu-list li{ padding:13px 0; border-bottom:1px dashed var(--line); }
.menu-list li:last-child{ border-bottom:0; padding-bottom:0; }
.menu-list .item{ display:block; font-weight:700; font-size:1rem; }
.menu-list .desc{ display:block; color:var(--cocoa-soft); font-size:.9rem; margin-top:2px; }

.menu-note{
  margin:clamp(28px,3vw,40px) 0 0; padding:18px 22px;
  background:var(--pink-tint); border:1px solid var(--pink-soft); border-radius:var(--radius);
  font-size:.95rem; color:var(--cocoa-soft);
}
.menu-note strong{ color:var(--cocoa); }

/* ---------- Story ---------- */
.story-grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(32px,5vw,72px); align-items:center; }
.story-copy p{ color:var(--cocoa-soft); }
.story-copy strong{ color:var(--cocoa); }
.story-copy blockquote{
  margin:1.8em 0; padding:4px 0 4px 26px; border-left:3px solid var(--pink);
}
.story-copy blockquote p{
  font-family:var(--display); font-style:italic; font-size:clamp(1.2rem,1.8vw,1.5rem);
  line-height:1.4; color:var(--cocoa); margin-bottom:.5em;
}
.story-copy cite{
  font-style:normal; font-size:.82rem; font-weight:700; letter-spacing:.11em;
  text-transform:uppercase; color:var(--pink);
}
.story-tail{ margin-bottom:0; }

/* ---------- Polaroid wall ---------- */
.polaroids{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:clamp(18px,2.6vw,32px); justify-items:center;
}
.polaroid{
  margin:0; width:100%; max-width:220px;
  background:var(--white); padding:12px 12px 44px;
  border-radius:4px; box-shadow:var(--shadow-md);
  transition:transform .25s cubic-bezier(.2,.8,.3,1), box-shadow .25s;
  position:relative;
}
.polaroid[data-slot]::before{
  content:attr(data-slot); display:grid; place-items:center;
  aspect-ratio:1; border-radius:2px;
  background:linear-gradient(135deg,var(--pink-soft),#FFE7D2);
  font-size:.7rem; font-weight:700; color:var(--pink-deep); letter-spacing:.04em;
}
.polaroid img{ width:100%; height:auto; aspect-ratio:1; object-fit:cover; border-radius:2px; display:block; }
.polaroid figcaption{
  position:absolute; left:0; right:0; bottom:14px; text-align:center;
  font-family:var(--display); font-style:italic; font-size:.95rem; color:var(--cocoa-soft);
}
.polaroid:nth-child(odd){ transform:rotate(-2.2deg); }
.polaroid:nth-child(even){ transform:rotate(1.8deg); }
.polaroid:nth-child(3n){ transform:rotate(-.8deg); }
.polaroid:hover{ transform:rotate(0) translateY(-6px) scale(1.03); box-shadow:var(--shadow-lg); z-index:2; }

/* ---------- Custom orders ---------- */
.section-dark{ background:var(--cocoa); color:#F7EDE9; }
.section-dark .eyebrow{ color:var(--pink-soft); }
.section-dark h2,.section-dark h3{ color:#fff; }
.section-dark p{ color:rgba(247,237,233,.78); }
.section-dark a{ color:var(--pink-soft); }
.section-dark a:hover{ color:#fff; }

.custom-grid{ display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(32px,5vw,72px); align-items:start; }
.custom-list{ margin:1.6em 0; }
.custom-list li{
  padding:11px 0 11px 30px; position:relative;
  border-bottom:1px solid rgba(247,237,233,.12);
  color:rgba(247,237,233,.78); font-size:.97rem;
}
.custom-list li:last-child{ border-bottom:0; }
.custom-list li strong{ color:#fff; }
.custom-list li::before{
  content:""; position:absolute; left:4px; top:20px;
  width:8px; height:8px; border-radius:50%; background:var(--pink);
}
.custom-note{
  font-size:.9rem; padding:14px 18px; border-radius:var(--radius);
  background:rgba(194,48,74,.14); border:1px solid rgba(194,48,74,.3);
  margin-bottom:0;
}
.custom-note strong{ color:#fff; }

/* ---------- Form ---------- */
.custom-form{
  background:var(--cream); color:var(--cocoa);
  border-radius:var(--radius-lg); padding:clamp(24px,3vw,38px);
  box-shadow:var(--shadow-lg);
}
.custom-form h3{ margin-bottom:1.1em; color:var(--cocoa); }
.field{ margin-bottom:18px; border:0; padding:0; min-width:0; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.field label,.field legend{
  display:block; font-size:.84rem; font-weight:700; letter-spacing:.03em;
  margin-bottom:7px; color:var(--cocoa); padding:0;
}
.field label span[aria-hidden]{ color:var(--pink); }
.field .opt{ font-weight:400; color:var(--cocoa-faint); }
.field input,.field select,.field textarea{
  width:100%; padding:12px 14px;
  background:var(--white); border:1.5px solid var(--line-strong); border-radius:12px;
  font-size:.96rem; transition:border-color .18s, box-shadow .18s;
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:0; border-color:var(--pink); box-shadow:0 0 0 3px rgba(194,48,74,.14);
}
.field input:user-invalid{ border-color:var(--guava); }
.field textarea{ resize:vertical; min-height:96px; }

.chips{ display:flex; flex-wrap:wrap; gap:9px; }
.chip{ margin:0; cursor:pointer; }
.chip input{ position:absolute; opacity:0; width:0; height:0; }
.chip span{
  display:inline-block; padding:8px 15px; border-radius:var(--radius-pill);
  background:var(--white); border:1.5px solid var(--line-strong);
  font-size:.88rem; font-weight:500; transition:all .18s;
}
.chip:hover span{ border-color:var(--pink); color:var(--pink); }
.chip input:checked + span{ background:var(--pink); border-color:var(--pink); color:#fff; font-weight:700; }
.chip input:focus-visible + span{ outline:3px solid var(--pink); outline-offset:3px; }

/* The form card sits inside .section-dark, so the dark-section text colors
   above would otherwise bleed into it and wash the small print out.
   These re-assert the light-card colors at matching specificity. */
.custom-form p,
.custom-form label,
.custom-form legend{ color:var(--cocoa); }
.custom-form .form-hint,
.custom-form .form-fallback{ color:var(--cocoa-soft); }
.custom-form a{ color:var(--pink); }
.custom-form a:hover{ color:var(--pink-deep); }
.custom-form .chip span{ color:var(--cocoa); }
.custom-form .chip input:checked + span{ color:#fff; }

.hero-alt{
  margin:12px 0 0; font-size:.92rem; color:var(--cocoa-soft);
}
.hero-alt a{ font-weight:700; }

.form-note{
  margin:0 0 16px; padding:11px 14px; border-radius:12px;
  background:var(--pink-tint); border:1px solid var(--pink-soft);
  font-size:.86rem; color:var(--cocoa-soft);
}
.form-note-soft{ background:#FFF9EC; border-color:#F0DCB0; }
.form-note button{
  background:none; border:0; padding:0; margin-left:6px;
  font-size:.86rem; font-weight:700; color:var(--pink); cursor:pointer;
  text-decoration:underline; text-underline-offset:2px;
}
.field-hint{
  margin:7px 0 0; font-size:.82rem; color:var(--cocoa-soft);
}
.field-hint.is-warn{ color:var(--gold-deep); font-weight:500; }

.recap{
  margin:4px 0 18px; padding:15px 18px; border-radius:14px;
  background:var(--pink-tint); border:1px solid var(--pink-soft);
}
.recap h4{
  margin:0 0 8px; font-family:var(--sans); font-size:.76rem; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase; color:var(--pink);
}
.recap ul{ font-size:.9rem; }
.recap li{ padding:3px 0; color:var(--cocoa); }
.recap li span{ color:var(--cocoa-soft); }

.info-actions{ display:flex; flex-wrap:wrap; gap:9px; }

.form-hint{ font-size:.86rem; margin:-4px 0 20px; }
.form-fallback{ text-align:center; font-size:.88rem; color:var(--cocoa-soft); margin:14px 0 0; }
.form-status{ margin-top:14px; font-size:.92rem; font-weight:500; }
.form-status.is-error{ color:var(--guava); }
.form-status.is-ok{
  color:var(--mint); background:rgba(31,122,92,.08);
  border:1px solid rgba(31,122,92,.25); border-radius:12px; padding:14px 16px;
}

/* ---------- Visit ---------- */
.visit-grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(28px,4vw,56px); align-items:start; }
.info-block{ padding-bottom:26px; margin-bottom:26px; border-bottom:1px solid var(--line); }
.info-block:last-child{ border-bottom:0; margin-bottom:0; padding-bottom:0; }
.info-block h3{ font-size:1.05rem; margin-bottom:.5em; }
.info-block p{ margin-bottom:.6em; }
.info-sub{ font-size:.88rem; color:var(--cocoa-soft); }
.link{ color:var(--pink); text-decoration:none; font-weight:500; }
.link:hover{ text-decoration:underline; }

.amenities{ display:flex; flex-wrap:wrap; gap:8px; }
.amenities li{
  font-size:.86rem; padding:5px 12px; border-radius:var(--radius-pill);
  background:var(--pink-tint); border:1px solid var(--pink-soft); color:var(--cocoa-soft);
}
.amenities a{ font-weight:600; }

.hours{ width:100%; border-collapse:collapse; font-size:.95rem; margin-bottom:.8em; }
.hours th,.hours td{ padding:7px 0; text-align:left; font-weight:400; }
.hours td{ text-align:right; color:var(--cocoa-soft); }
.hours tr.is-today th,.hours tr.is-today td{ font-weight:700; color:var(--pink); }

.visit-map{
  border-radius:var(--radius-lg); overflow:hidden;
  border:1px solid var(--line); box-shadow:var(--shadow-md); background:var(--cream-2);
}
.visit-map iframe{ width:100%; height:clamp(320px,42vw,480px); border:0; }

/* ---------- Closer ---------- */
.closer{
  background:linear-gradient(160deg,var(--pink-tint),var(--cream-2));
  padding:clamp(56px,7vw,96px) 0; text-align:center;
  border-top:1px solid var(--line);
}
.closer h2 em{ font-style:italic; color:var(--pink); }
.closer p{ color:var(--cocoa-soft); max-width:46ch; margin-inline:auto; }

/* ---------- Footer ---------- */
.site-footer{ background:var(--cocoa); color:rgba(247,237,233,.68); padding:clamp(40px,5vw,56px) 0; }
.footer-inner{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:22px; }
.footer-brand{ display:flex; flex-direction:column; color:#fff; }
.footer-brand .brand-name{ font-size:1.2rem; }
.footer-brand .brand-sub{ color:rgba(247,237,233,.5); }
.footer-nav{ display:flex; flex-wrap:wrap; gap:20px; }
.footer-nav a{ color:rgba(247,237,233,.78); text-decoration:none; font-size:.92rem; }
.footer-nav a:hover{ color:#fff; text-decoration:underline; }
.footer-legal{ margin:0; font-size:.82rem; width:100%; padding-top:18px; border-top:1px solid rgba(247,237,233,.12); color:rgba(247,237,233,.45); }

/* ---------- Reveal on scroll ---------- */
.reveal{ opacity:0; transform:translateY(20px); transition:opacity .6s ease, transform .6s cubic-bezier(.2,.8,.3,1); }
.reveal.is-in{ opacity:1; transform:none; }

/* ---------- Responsive ---------- */
@media (max-width:980px){
  .hero-inner{ grid-template-columns:1fr; }
  .hero-art{ max-width:440px; margin-inline:auto; width:100%; }
  .story-grid,.custom-grid,.visit-grid{ grid-template-columns:1fr; }
  .story-art{ max-width:340px; }
  .menu-grid{ grid-template-columns:repeat(2,1fr); }
  .polaroids{ grid-template-columns:repeat(2,1fr); }
  .strip-grid{ grid-template-columns:1fr; gap:22px; }
}

@media (max-width:760px){
  :root{ --header-h:64px; }
  .nav{
    position:fixed; inset:var(--header-h) 0 auto 0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--cream); border-bottom:1px solid var(--line);
    padding:8px var(--gutter) 22px; box-shadow:var(--shadow-md);
    transform:translateY(-12px); opacity:0; pointer-events:none;
    transition:opacity .22s, transform .22s;
    max-height:calc(100dvh - var(--header-h)); overflow-y:auto;
  }
  .nav.is-open{ transform:none; opacity:1; pointer-events:auto; }
  .nav a{ padding:14px 0; border-bottom:1px solid var(--line); font-size:1.02rem; }
  .nav a::after{ display:none; }
  .nav .nav-cta{ margin-top:16px; border-bottom:0; justify-content:center; }
  .nav-toggle{ display:flex; }

  .menu-grid{ grid-template-columns:1fr; }
  .polaroids{ grid-template-columns:repeat(2,1fr); gap:16px; }
  .polaroid{ padding:9px 9px 34px; }
  .polaroid img{ width:100%; height:auto; aspect-ratio:1; object-fit:cover; border-radius:2px; display:block; }
.polaroid figcaption{ bottom:11px; font-size:.85rem; }
  .field-row{ grid-template-columns:1fr; gap:0; }
  .hero-phone{ margin-left:0; width:100%; }
  .photo-float{ width:38%; right:-2%; }
  .footer-inner{ flex-direction:column; align-items:flex-start; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .reveal{ opacity:1; transform:none; }
  .bfly{ animation:none; opacity:var(--opacity); }
  .bfly svg{ animation:none; }
  .bfly-burst{ display:none; }
}

@media print{
  .site-header,.ticker,.nav-toggle,.visit-map,.closer,.hero-deco,.bfly-layer{ display:none; }
  body{ background:#fff; }
}

/* ---------- Boutique bakery: shared surfaces and hero ---------- */
body{ background:var(--cream); }
.site-header{ background:rgba(255,250,248,.95); border-bottom:1px solid #efd2de; }
.header-inner{ min-height:80px; }
.brand-mark{ width:52px; height:52px; }
.brand-name{ color:var(--pink-deep); }
.brand-sub{ font-size:.75rem; letter-spacing:.1em; }
.nav{ gap:clamp(12px,1.5vw,22px); }
.nav a{ font-size:.9rem; }
.btn{ min-height:48px; border-radius:14px 14px 14px 5px; }
.btn-primary{ box-shadow:0 4px 0 #8b3151,0 8px 18px #ad426521; }
.btn-primary:hover{ box-shadow:0 5px 0 #782541,0 10px 20px #ad426529; }
.btn-ghost{ --btn-bg:#fff9fc; --btn-bd:#d99ab0; --btn-fg:var(--pink-deep); }
.eyebrow{ font-size:.875rem; font-weight:700; letter-spacing:.13em; }
.section{ padding:clamp(56px,6.5vw,84px) 0; }
.section-head{ margin-bottom:32px; }
h2{ font-weight:500; line-height:1.15; }
.hero{
  padding-top:44px;
  background:radial-gradient(ellipse at 2% 4%,#fffaf5 8%,transparent 58%),
    radial-gradient(ellipse at 88% 28%,#f4c5d6 0%,transparent 54%),#fce8ef;
}
.hero-inner{ grid-template-columns:1.12fr .88fr; gap:50px; padding-bottom:66px; }
.hero-copy{ padding:18px 0; }
.hero .eyebrow{ display:inline-block; border-bottom:1px solid #d996ae; padding-bottom:10px; }
.hero h1{ font-size:clamp(2.8rem,5.4vw,4.3rem); font-weight:500; line-height:1.06; }
.hero h1 em{ display:inline-block; font-family:var(--script); font-size:1.35em; font-weight:400; line-height:1.15; }
.hero .lede{ font-size:1.025rem; max-width:43ch; margin-top:20px; }
.hero-actions{ margin:25px 0 24px; }
.hero-status{ gap:11px; font-size:.9rem; }
.hero-phone{ margin-left:0; }
.hero-art{ margin:22px 12px 22px 0; isolation:isolate; }
.hero-art::before{
  content:""; position:absolute; inset:12px -15px -13px 12px; z-index:-1;
  border-radius:48% 48% 28px 28px;
  background:repeating-linear-gradient(0deg,#ffffff50 0 9px,transparent 9px 18px),
    repeating-linear-gradient(90deg,#ffffff60 0 9px,#e6a8bf70 9px 18px);
  border:1px solid #d998b0; transform:rotate(3deg);
}
.photo-hero{ border:9px solid #fffaf5; border-radius:48% 48% 22px 22px; aspect-ratio:4/4.65; transform:rotate(-2deg); box-shadow:0 12px 30px #9e4c6a20; }
.photo-float{ width:37%; bottom:-20px; right:-25px; border:7px solid #fffaf5; border-radius:50% 50% 14px 14px; transform:rotate(7deg); }
.hero-handwriting{ position:absolute; top:-32px; right:12px; z-index:2; font-family:var(--script); font-size:1.7rem; color:var(--pink-deep); transform:rotate(5deg); }
.hero-stamp{ position:absolute; bottom:25px; left:-30px; z-index:2; display:grid; place-content:center; width:112px; height:112px; border-radius:50%; background:#fff2f7; outline:1px dashed #cc8da6; outline-offset:-8px; border:5px solid #fffaf5; color:var(--pink-deep); text-align:center; font-size:.75rem; line-height:1.25; box-shadow:0 5px 18px #94566d18; transform:rotate(-12deg); }
.hero-stamp em{ font-family:var(--script); font-size:1.32rem; line-height:1.1; }
.blob{ opacity:.2; }
.ticker{ position:relative; z-index:2; background:#f2c5d6; color:var(--pink-deep); border-block:1px dashed #ce8da6; padding:13px 0; }
.ticker-track{ font-size:1rem; animation-duration:70s; }
.strip{ background:#fff7f3; padding:34px 0 42px; position:relative; }
.strip-item h2{ color:var(--pink-deep); }
.strip-item p{ font-size:.94rem; }
.strip-item + .strip-item{ border-left:1px solid #edcad7; padding-left:25px; }
@media(max-width:980px){
  .hero-inner{ gap:36px; grid-template-columns:1.1fr .9fr; }
  .hero h1{ font-size:clamp(2.6rem,5.6vw,3.7rem); }
  .hero-art{ max-width:380px; }
  .hero-stamp{ left:-12px; width:96px; height:96px; }
  .hero .lede{ font-size:1rem; }
  .strip-grid{ grid-template-columns:repeat(3,1fr); gap:18px; }
  .strip-item + .strip-item{ padding-left:18px; }
}
@media(max-width:760px){
  .header-inner{ min-height:72px; }
  :root{ --header-h:72px; }
  .brand-mark{ width:44px; height:44px; }
  .hero{ padding-top:24px; }
  .hero-inner{ grid-template-columns:1fr; gap:20px; padding-bottom:48px; }
  .hero-copy{ padding:0; }
  .hero h1{ font-size:clamp(2.7rem,8.6vw,3.8rem); }
  .hero .eyebrow{ font-size:.75rem; }
  .hero-art{ width:82%; max-width:340px; margin:35px auto 15px; }
  .hero-handwriting{ font-size:1.5rem; }
  .photo-float{ right:-20px; }
  .hero-phone{ width:auto; }
  .strip-grid{ grid-template-columns:1fr; gap:18px; }
  .strip-item + .strip-item{ border-left:0; border-top:1px solid #edcad7; padding:16px 0 0; }
}

/* ---------- A different little detail in each section ---------- */
.strip::after{
  content:""; position:absolute; bottom:-12px; left:0; right:0; height:14px; z-index:2;
  background:radial-gradient(circle at 14px 0,#fff7f3 13px,transparent 14px) 0 0/28px 14px repeat-x;
}
.strip-icon{ float:left; margin:1px 14px 28px 0; opacity:.85; }
.section-script{ display:block; margin:0 0 12px; color:var(--pink); font-family:var(--script); font-size:clamp(1.7rem,2.6vw,2.25rem); line-height:1.1; }
#menu{
  background:radial-gradient(ellipse at 5% 60%,#fbe0ec90,transparent 35%),
    radial-gradient(ellipse at 95% 12%,#fcebdc70,transparent 35%),#fffaf7;
}
#menu .section-head{ margin-inline:auto; max-width:700px; text-align:center; }
#menu .section-head h2{ font-size:clamp(1.85rem,3.1vw,2.55rem); }
#menu .section-lede{ max-width:59ch; margin-inline:auto; font-size:1rem; }
.category-ribbon{
  display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:10px;
  padding:20px 12px; margin:0 0 30px; border-block:1px dashed #e4b3c5;
}
.category-ribbon li{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; position:relative; padding:10px 4px; border-radius:20px; font-size:.875rem; font-weight:500; color:var(--pink-deep); text-align:center; transition:background .3s,transform .3s; }
.category-ribbon img{ width:38px; height:38px; transition:transform .5s ease; }
.category-ribbon li:nth-child(even){ background:#fbe6ee70; }
.category-ribbon li:hover{ background:#f8dce8; transform:translateY(-3px); }
.category-ribbon li:hover img{ transform:rotate(-8deg) scale(1.07); }
.category-ribbon li::after{ content:""; position:absolute; width:17px; height:17px; top:10px; right:20%; background:url('../icons/sparkles.svg') center/contain no-repeat; opacity:0; transition:opacity .3s,transform .3s; transform:scale(.6); }
.category-ribbon li:hover::after{ opacity:.7; transform:scale(1); }
.menu-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; }
.menu-card{ padding:20px; border-radius:80px 80px 20px 20px; border:1px solid #ecc6d6; background:#fff5f8; box-shadow:0 5px 16px #94506d0b; }
.menu-card:nth-child(2n){ background:#fffaf5; }
.menu-card:hover{ transform:translateY(-5px) rotate(-.5deg); box-shadow:0 12px 25px #aa527518; }
.menu-card:nth-child(2n):hover{ transform:translateY(-5px) rotate(.5deg); }
.menu-photo{ margin:-20px -20px 0; border-radius:0; border-bottom:5px solid #f0c4d5; }
.menu-photo img{ aspect-ratio:1.2; }
.menu-card-head{ gap:9px; padding-top:17px; }
.menu-card-head h3{ font-size:1.14rem; }
.menu-icon{ display:grid; place-items:center; flex:0 0 40px; width:40px; height:40px; background:#f9e1ea; border-radius:50%; }
.menu-icon img{ width:27px; height:27px; }
.menu-list li{ padding:11px 0; }
.menu-list .desc{ font-size:.875rem; }
.menu-note{ background:#fce8ef; border:1px dashed #dca0b7; margin-top:25px; }
#story{
  background:radial-gradient(ellipse at 12% 80%,#fff2f780,transparent 48%),#f8dbe7;
  border-bottom:1px solid #edc4d4; padding-block:70px;
}
#story::before,#custom::before{
  content:""; position:absolute; top:-18px; left:0; right:0; height:20px;
  background:radial-gradient(circle at 18px 20px,#f8dbe7 19px,transparent 20px) 0 0/36px 24px repeat-x;
}
.story-grid{ grid-template-columns:.85fr 1.15fr; gap:60px; }
.story-art{ position:relative; padding:0 12px 18px; }
.story-art::before{ content:""; position:absolute; inset:13px 0 0 20px; border:1px solid #d599b3; border-radius:46% 46% 18px 18px; transform:rotate(-4deg); background:repeating-linear-gradient(45deg,#fff6fa40 0 3px,transparent 3px 9px); }
.photo-tall{ border:9px solid #fffaf7; border-radius:46% 46% 12px 12px; transform:rotate(2deg); box-shadow:0 15px 32px #9d57751a; }
.story-flower{ position:absolute; left:-13px; bottom:-7px; width:94px; height:94px; z-index:2; background:#fff6fa; border-radius:50%; padding:13px; transform:rotate(-14deg); }
.story-copy h2{ max-width:20ch; font-size:clamp(1.85rem,3vw,2.6rem); }
.story-copy p{ font-size:1rem; }
.story-copy blockquote{ background:#fff6faaf; border:1px solid #e9bacd; border-left:3px solid #ce789b; border-radius:0 22px 22px 22px; padding:20px 24px; margin:24px 0; }
.story-copy blockquote p{ font-size:1.2rem; }
.story-copy cite{ font-size:.875rem; }
#wall{
  background:radial-gradient(circle,#df9db42b 1px,transparent 1.5px) 0 0/20px 20px,#fffaf5;
  padding-block:60px 82px;
}
#wall .section-head{ background:#fffaf5d9; padding:4px 12px; border-radius:28px; }
.little-flourish{ display:flex; align-items:center; justify-content:center; gap:16px; margin:10px 0 18px; }
.little-flourish span{ height:1px; width:54px; background:#d9a3b8; }
.polaroids{ gap:25px; padding-top:14px; }
.polaroid{ max-width:245px; padding:11px 11px 48px; box-shadow:0 8px 18px #87496317; border:1px solid #f1d7df; }
.polaroid::after{ content:""; position:absolute; top:-12px; left:calc(50% - 30px); width:60px; height:25px; background:repeating-linear-gradient(90deg,#f2baceb3 0 5px,#fad7e3b3 5px 10px); transform:rotate(-6deg); }
.polaroid:nth-child(even)::after{ background:#eec4cdb3; transform:rotate(5deg); }
.polaroid figcaption{ font-family:var(--script); font-style:normal; font-size:1.3rem; color:var(--pink-deep); bottom:10px; }
#custom{ background:radial-gradient(ellipse at 0% 40%,#f3bed25c,transparent 55%),#fce8ef; color:var(--cocoa); padding-block:70px; }
#custom::before{ background-image:radial-gradient(circle at 18px 20px,#fce8ef 19px,transparent 20px); }
#custom .eyebrow{ color:var(--pink); }
#custom h2,#custom h3{ color:var(--cocoa); }
#custom p{ color:var(--cocoa-soft); }
#custom a{ color:var(--pink-deep); }
.custom-grid{ grid-template-columns:.95fr 1.05fr; gap:48px; }
.custom-copy{ position:relative; }
.custom-copy h2{ font-size:clamp(1.9rem,3.2vw,2.65rem); max-width:16ch; }
.custom-ornament{ display:flex; align-items:center; gap:12px; margin-bottom:18px; }
.custom-ornament img:last-child{ align-self:flex-start; margin-top:4px; }
.custom-list{ margin:24px 0; }
.custom-list li{ border-bottom:1px dashed #ddafc1; color:var(--cocoa-soft); }
.custom-list li strong,.custom-note strong{ color:var(--cocoa); }
.custom-list li::before{ width:12px; height:12px; border-radius:0; top:20px; left:0; background:url('../icons/heart.svg') center/contain no-repeat; }
.custom-note{ background:#fff8fb; border:1px dashed #d994ae; }
.custom-form{ background:#fffdfb; border:1px solid #e7b7cb; outline:1px dashed #e9c3d2; outline-offset:-8px; border-radius:28px 28px 10px 28px; box-shadow:0 12px 34px #b8658312; padding:32px; }
.custom-form h3{ font-size:1.5rem; padding-bottom:18px; border-bottom:1px solid #efd6e0; }
.field label,.field legend{ font-size:.875rem; }
.field input,.field select,.field textarea{ background:#fff9fb; border-color:#e4bccd; min-height:46px; font-size:1rem; }
.field input::placeholder,.field textarea::placeholder{ color:#896d79; opacity:1; }
.chip span{ border-color:#e4bccd; background:#fff9fb; padding:10px 13px; }
.form-note-soft{ background:#fff3f7; border-color:#eac5d4; }
#custom .form-note,#custom .field-hint,#custom .form-hint,#custom .form-fallback{ color:var(--cocoa-soft); font-size:.875rem; }
#custom .field-hint.is-warn{ color:#885722; }
#custom .form-status.is-ok{ color:var(--mint); }
#custom .form-status.is-error{ color:#a1314c; }
.recap h4{ font-size:.875rem; }
#visit{ background:linear-gradient(145deg,#fffaf5,#fff2f7); }
#visit .section-head h2{ max-width:23ch; }
.visit-info{ background:#fffcfa; padding:28px; border:1px solid #efd2df; border-radius:24px; }
.info-block{ padding-bottom:20px; margin-bottom:20px; }
.info-block h3{ color:var(--pink-deep); }
.hours tr.is-today{ background:#fce9f0; }
.hours th,.hours td{ padding:8px; }
.visit-map{ border:8px solid #fffaf7; outline:1px solid #e7bdcd; border-radius:44% 44% 18px 18px; box-shadow:0 12px 30px #9b526d12; }
.visit-map iframe{ height:480px; }
.closer{ background:radial-gradient(ellipse at center,#fff6f8 0%,#f5cbdc 100%); border-top:1px dashed #dda3b9; padding-block:50px; }
.closer h2{ font-size:clamp(1.8rem,3vw,2.7rem); }
.closer h2 em{ font-family:var(--script); font-size:1.3em; font-weight:400; }
.site-footer{ background:#efd0dc; color:var(--cocoa-soft); padding-block:32px; border-top:1px solid #e2aec4; }
.footer-brand,.footer-brand .brand-name{ color:var(--pink-deep); }
.footer-brand .brand-sub,.footer-nav a,.footer-legal{ color:var(--cocoa-soft); }
.footer-nav a:hover{ color:var(--pink-deep); }
.footer-legal{ border-color:#dcb0c2; font-size:.875rem; }

/* Decorative images sit in measured empty space, underneath all content. */
.bfly{ animation:bfly-in 1.2s ease forwards var(--delay),bakery-float var(--dur) ease-in-out infinite var(--delay); }
.bfly svg{ animation:bakery-wing 6s ease-in-out infinite; filter:none; }
.bfly.bakery-doodle img{ width:100%; height:100%; object-fit:contain; }
.bfly.bakery-doodle{ --opacity:.18 !important; }
.section-dark .bfly svg{ filter:none; }
.bfly-layer.is-resting .bfly,.bfly-layer.is-resting .bfly svg{ animation-play-state:paused; }
@keyframes bakery-float{ 0%,100%{ transform:translate3d(0,0,0) rotate(-6deg); } 50%{ transform:translate3d(7px,-12px,0) rotate(5deg); } }
@keyframes bakery-wing{ 0%,100%{ transform:perspective(220px) rotateY(0deg); } 50%{ transform:perspective(220px) rotateY(24deg); } }
@media(max-width:1100px){
  .menu-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; }
  .menu-photo img{ aspect-ratio:1.75; }
  .nav-cta{ display:none; }
  .story-grid,.custom-grid{ gap:35px; }
}
@media(max-width:980px){
  .story-grid{ grid-template-columns:.8fr 1.2fr; }
  .story-art{ max-width:360px; }
  .custom-grid{ grid-template-columns:1fr 1.15fr; gap:26px; }
  .custom-form{ padding:25px; }
  .custom-form .field-row{ grid-template-columns:1fr; gap:0; }
  .category-ribbon{ gap:4px; padding-inline:0; }
  .category-ribbon li{ font-size:.875rem; }
  .polaroids{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:15px; }
  .polaroid figcaption{ font-size:1.1rem; }
  .visit-grid{ grid-template-columns:1fr 1fr; gap:25px; }
  .visit-info{ padding:22px; }
}
@media(max-width:760px){
  .nav-cta{ display:inline-flex; }
  .nav{ visibility:hidden; }
  .nav.is-open{ visibility:visible; }
  .section{ padding-block:48px; }
  .section-script{ font-size:1.75rem; }
  .section-head{ margin-bottom:24px; }
  .strip-icon{ width:30px; height:30px; margin-bottom:0; }
  .strip-item p{ padding-left:44px; }
  .category-ribbon{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; padding-block:14px; margin-bottom:24px; }
  .category-ribbon li{ padding:10px 4px; }
  .category-ribbon img{ width:32px; height:32px; }
  .menu-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
  .menu-card{ border-radius:50px 50px 16px 16px; padding:16px; }
  .menu-photo{ margin:-16px -16px 0; }
  .menu-photo img{ aspect-ratio:1.25; }
  .menu-card-head{ flex-wrap:wrap; gap:7px; }
  .menu-card-head h3{ font-size:1.1rem; }
  .menu-icon{ flex-basis:32px; width:32px; height:32px; }
  .menu-icon img{ width:23px; height:23px; }
  .menu-list .item{ font-size:.95rem; }
  .menu-note{ padding:17px; }
  #story,#custom{ padding-block:50px; }
  .story-grid,.custom-grid,.visit-grid{ grid-template-columns:1fr; gap:32px; }
  .story-art{ width:84%; max-width:330px; margin-inline:auto; }
  .story-flower{ width:72px; height:72px; }
  .story-copy h2{ max-width:none; }
  .story-copy blockquote{ padding:18px; }
  #wall{ padding-block:48px 58px; }
  .polaroids{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px 16px; }
  .polaroid{ padding:9px 9px 42px; }
  .polaroid figcaption{ font-size:1.2rem; }
  .custom-ornament{ margin-bottom:14px; }
  .custom-ornament img:first-child{ width:50px; height:50px; }
  .custom-copy h2{ max-width:none; }
  .custom-form{ padding:26px 22px; }
  .visit-map{ border-radius:100px 100px 18px 18px; }
  .visit-map iframe{ height:330px; }
  .bfly.bakery-doodle{ --opacity:.12 !important; }
  .bfly{ animation-duration:1.2s,24s; }
  .bfly svg{ animation:none; }
  .bfly-burst{ display:none; }
  .footer-nav{ gap:12px 18px; }
}
@media(max-width:420px){
  .menu-grid{ grid-template-columns:1fr; }
  .menu-card{ border-radius:60px 60px 18px 18px; }
  .menu-photo img{ aspect-ratio:1.65; }
  .menu-card-head{ flex-wrap:nowrap; }
  .hero-actions .btn{ padding-inline:1.15em; font-size:.95rem; }
  .hero-stamp{ width:94px; height:94px; }
  .hero h1{ font-size:2.75rem; }
}
@media(prefers-reduced-motion:reduce){
  .bfly,.bfly svg,.ticker-track{ animation:none !important; }
  .bfly{ opacity:var(--opacity); }
  .reveal{ opacity:1; transform:none; }
  .menu-card:hover,.category-ribbon li:hover,.category-ribbon li:hover img,.polaroid:hover{ transform:none; }
}
@media print{
  .hero-handwriting,.hero-stamp,.category-ribbon,.story-flower,.custom-ornament,.little-flourish,.bfly-layer{ display:none; }
}

/* ---------- Footer social ---------- */
.footer-social{ display:flex; flex-wrap:wrap; gap:10px; }
.footer-social a{
  display:inline-flex; align-items:center; gap:9px;
  padding:9px 16px; border-radius:var(--radius-pill);
  background:#fff6fa; border:1px solid #e2aec4;
  color:var(--pink-deep); text-decoration:none;
  font-size:.9rem; font-weight:600; white-space:nowrap;
  transition:background .2s, border-color .2s, transform .2s;
}
.footer-social a:hover{ background:#fff; border-color:var(--pink-deep); transform:translateY(-2px); }
.footer-social svg{ width:18px; height:18px; flex:none; }
@media(max-width:760px){
  .footer-social{ width:100%; }
  .footer-social a{ flex:1 1 auto; justify-content:center; }
}

/* ---------- Audit fixes ---------- */

/* The CTA was hidden from 761px to 1100px — exactly iPad portrait — where the
   hamburger has not taken over yet, leaving no call to action in the header. */
@media(max-width:1100px) and (min-width:761px){
  .nav-cta{ display:inline-flex; }
  .nav{ gap:clamp(10px,1.2vw,16px); }
  .nav a:not(.btn){ font-size:.86rem; }
}

/* Ribbon items are real links now, so the hover affordance is honest.
   The <a> carries the padding so the whole tile is the tap target. */
.category-ribbon li{ padding:0; }
.category-ribbon li a{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:10px; padding:12px 6px; width:100%; min-height:88px;
  border-radius:20px; color:inherit; text-decoration:none;
}
.category-ribbon li a:hover{ color:var(--pink-deep); }
.category-ribbon li a:focus-visible{ outline:3px solid var(--pink); outline-offset:2px; }
@media(max-width:760px){
  .category-ribbon li a{ min-height:76px; padding:10px 4px; }
}

/* Audited layout and navigation fixes. */
.menu-list li[id]{ scroll-margin-top:24px; }
.menu-list li:target{ background:var(--pink-tint); border-radius:8px; outline:2px solid var(--pink-soft); outline-offset:5px; }
.map-directions{ padding:clamp(32px,6vw,72px) 28px; min-height:480px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; background:linear-gradient(150deg,var(--pink-tint),var(--cream)); }
.map-directions h3{ font-size:clamp(1.8rem,3vw,2.4rem); }
.map-directions .field-hint{ margin-top:16px; }
.map-directions p{ margin:8px 0 16px; }
.map-directions .btn{ white-space:normal; }
#copyStatus{ margin:10px 0 0; overflow-wrap:anywhere; }
#orderAvailability{ line-height:1.6; }
.closer-inner,.section-head{ min-width:0; }
@media(max-width:420px){
  .closer .hero-actions{ flex-direction:column; align-items:stretch; }
  .closer .hero-actions .btn{ width:100%; white-space:normal; }
}

/* ---------- FAQ (SEO + the questions staff answer all day) ---------- */
.faq-list{
  max-width:840px; margin:0 auto; display:flex; flex-direction:column; gap:14px;
}
.faq-item{
  background:var(--white); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow-sm);
  overflow:hidden; transition:box-shadow .25s ease, border-color .25s ease;
}
.faq-item[open]{ border-color:var(--pink-soft); box-shadow:var(--shadow-md); }
.faq-item summary{
  display:flex; align-items:center; gap:14px;
  padding:20px clamp(18px,3vw,28px); cursor:pointer;
  list-style:none; user-select:none;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary h3{
  margin:0; flex:1; font-size:clamp(1.02rem,1.6vw,1.18rem);
  line-height:1.4; font-weight:600; color:var(--cocoa);
}
.faq-item summary::after{
  content:""; flex:none; width:12px; height:12px; margin-right:2px;
  border-right:2.2px solid var(--pink); border-bottom:2.2px solid var(--pink);
  border-radius:2px; transform:rotate(45deg) translate(-2px,-2px);
  transition:transform .25s ease;
}
.faq-item[open] summary::after{ transform:rotate(-135deg) translate(-3px,-3px); }
.faq-item summary:hover h3{ color:var(--pink-deep); }
.faq-item summary:focus-visible{ outline:3px solid var(--pink); outline-offset:-3px; }
.faq-answer{
  padding:0 clamp(18px,3vw,28px) 22px;
  border-top:1px solid var(--line);
  padding-top:18px; margin-top:-1px;
}
.faq-answer p{ margin:0; color:var(--cocoa-soft); line-height:1.72; }
.faq-answer a{ color:var(--pink-deep); text-decoration:underline; text-underline-offset:3px; }
@media(prefers-reduced-motion:reduce){
  .faq-item, .faq-item summary::after{ transition:none; }
}
@media print{
  .faq-answer{ display:block !important; }
}

/* Owner-supplied gallery: keep complete cakes visible and defer the larger collection. */
.owner-gallery{ align-items:start; row-gap:36px; }
.owner-photo img{ aspect-ratio:3 / 4; object-fit:contain; background:#fff; }
.owner-photo figcaption{ font-family:var(--sans); font-size:.875rem; line-height:1.5; }
.gallery-more{ margin-top:32px; }
.gallery-more summary{ width:fit-content; max-width:100%; margin:0 auto; padding:14px 24px; border:1px solid var(--pink-soft); border-radius:24px; background:var(--white); color:var(--pink-deep); cursor:pointer; text-align:center; }
.gallery-more[open] summary{ margin-bottom:32px; }
.photo-float img{ object-fit:cover; object-position:center; }

/* ---------- Motion pass ----------
   Entrances for the groups that had none, a stagger hook for the rest,
   and a couple of small signals. Everything here is switched off under
   prefers-reduced-motion at the bottom of the block. */

/* Stagger hook. main.js sets --stagger per item within a group. */
.reveal{ transition-delay:var(--stagger,0ms); }

/* The hero plays on load, since a scroll trigger would never fire above
   the fold. main.js adds .hero-lift, so with no JS the copy just shows. */
.hero-lift{
  opacity:0; transform:translateY(20px);
  animation:hero-rise .8s cubic-bezier(.2,.8,.3,1) forwards;
  animation-delay:var(--stagger,0ms);
}
@keyframes hero-rise{ to{ opacity:1; transform:none; } }

/* The photo settles in rather than sliding, so it reads as placed. */
.hero-art.hero-lift{ animation-name:hero-rise-art; }
@keyframes hero-rise-art{
  from{ opacity:0; transform:translateY(26px) scale(.975); }
  to{ opacity:1; transform:none; }
}

/* Open/closed is live information, so the dot gets a slow heartbeat.
   Closed stays still — a blinking "closed" light reads as an error. */
.status-dot.is-open{ animation:dot-pulse 2.6s ease-in-out infinite; }
@keyframes dot-pulse{
  0%,100%{ box-shadow:0 0 0 4px rgba(31,122,92,.16); }
  50%    { box-shadow:0 0 0 8px rgba(31,122,92,.04); }
}

/* Panels slide open instead of snapping. */
.faq-item[open] .faq-answer,
.gallery-more[open] .polaroids{ animation:panel-open .34s cubic-bezier(.2,.8,.3,1) both; }
@keyframes panel-open{ from{ opacity:0; transform:translateY(-8px); } }

/* Ribbon tiles lift like the menu cards already do. */
.category-ribbon li a{ transition:transform .22s cubic-bezier(.2,.8,.3,1), color .22s ease; }
.category-ribbon li a:hover{ transform:translateY(-3px); }

/* Footer links get the same small lift as everything else clickable. */
.footer-nav a,.footer-social a{ transition:color .2s ease, transform .2s ease; }
.footer-nav a:hover,.footer-social a:hover{ transform:translateY(-1px); }

/* The gallery toggle behaves like a button. */
.gallery-more summary{ transition:background .2s ease, border-color .2s ease, transform .2s ease; }
.gallery-more summary:hover{ background:var(--pink-tint); border-color:var(--pink); transform:translateY(-2px); }
.gallery-more summary:focus-visible{ outline:3px solid var(--pink); outline-offset:3px; }

@media(prefers-reduced-motion:reduce){
  .hero-lift{ opacity:1; transform:none; animation:none; }
  .status-dot.is-open{ animation:none; }
  .faq-item[open] .faq-answer,
  .gallery-more[open] .polaroids{ animation:none; }
  .reveal{ transition-delay:0ms !important; }
  .category-ribbon li a:hover,
  .footer-nav a:hover,.footer-social a:hover,
  .gallery-more summary:hover{ transform:none; }
}

/* ---------- Cute scroll details ---------- */

/* A ribbon across the top that fills as you read down. */
.scroll-ribbon{
  position:fixed; top:0; left:0; right:0; height:3px; z-index:60;
  transform:scaleX(var(--progress,0)); transform-origin:0 50%;
  background:linear-gradient(90deg,var(--pink-soft),var(--pink),var(--gold));
  pointer-events:none;
}

/* Photos drift gently against the scroll. The rotation each one already
   had is kept in --rot so the parallax can compose with it instead of
   wiping it out. */
.photo-hero{ --rot:-2deg; }
.photo-float{ --rot:7deg; }
.photo-tall{ --rot:2deg; }
.photo-hero,.photo-float,.photo-tall{
  transform:translate3d(0,var(--py,0px),0) rotate(var(--rot,0deg));
  will-change:transform;
}

/* Polaroids drop in straight and settle into their scrapbook tilt.
   Without this the reveal flattens them, because transform:none beats
   the nth-child rotation. */
.polaroid.reveal{ transform:translateY(22px) rotate(0deg) scale(.97); }
.polaroid.reveal.is-in{ transform:rotate(var(--tilt,0deg)); }
.polaroid.reveal.is-in:hover{ transform:rotate(0) translateY(-6px) scale(1.03); }

/* Butterflies lean with the direction of travel. The sway goes on the
   layer, not the butterfly: each butterfly is already running keyframes,
   and a running animation beats a plain transform declaration. */
.bfly-layer{ transform:translateX(calc(var(--sway,0) * 5px)); transition:transform .5s ease-out; }

/* The little icons give a hop as their card arrives. */
.strip-item.is-in .strip-icon,
.menu-card.is-in .menu-icon img{
  animation:icon-hop .62s cubic-bezier(.3,1.5,.5,1) .18s both;
}
@keyframes icon-hop{
  0%  { transform:translateY(6px) scale(.8); opacity:.4; }
  55% { transform:translateY(-5px) scale(1.09); opacity:1; }
  100%{ transform:none; opacity:1; }
}

/* The cursive line arrives just after its heading, like a signature. */
.section-head.reveal .section-script{
  opacity:0; transform:translateY(8px) rotate(-1.5deg);
  transition:opacity .7s ease .22s, transform .7s cubic-bezier(.2,.8,.3,1) .22s;
}
.section-head.reveal.is-in .section-script{ opacity:1; transform:none; }

@media(prefers-reduced-motion:reduce){
  .scroll-ribbon{ display:none; }
  .photo-hero,.photo-float,.photo-tall{ transform:rotate(var(--rot,0deg)); }
  .polaroid.reveal,.polaroid.reveal.is-in{ transform:rotate(var(--tilt,0deg)); }
  .bfly-layer{ transform:none; transition:none; }
  .strip-item.is-in .strip-icon,.menu-card.is-in .menu-icon img{ animation:none; }
  .section-head.reveal .section-script{ opacity:1; transform:none; transition:none; }
}

/* ---------- Gluten-free menu and allergen notices ----------
   These live in the left column of the Custom Orders grid, beside the
   form, so everything here is sized for a ~490px column rather than the
   full page width. */
.gf-menu,.gf-notice{ margin-top:18px; }

.gf-menu{
  background:#fff8fb; border:1px dashed #d994ae;
  border-radius:var(--radius); padding:18px 20px 16px;
}
.gf-menu h3{ margin:0 0 14px; font-size:1.1rem; }

.gf-columns{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px 22px; }
.gf-group h4{
  margin:0 0 8px; padding-bottom:6px; border-bottom:1px solid #eccbd8;
  font-family:var(--display); font-size:.76rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--pink-deep);
}
.gf-list{ list-style:none; margin:0; padding:0; }
.gf-list li{ display:flex; align-items:baseline; gap:7px; padding:5px 0; font-size:.83rem; }
.gf-list li + li{ border-top:1px dashed #f2dde4; }
/* A leader rule out to the price, like a printed menu. */
.gf-list li::after{
  content:""; order:1; flex:1 1 auto; min-width:10px; height:0;
  border-bottom:1px dotted #ddb3c4; transform:translateY(-3px);
}
.gf-list .item{ order:0; flex:0 1 auto; color:var(--cocoa); font-weight:500; line-height:1.3; }
.gf-list .gf-price{ order:2; flex:none; color:var(--pink-deep); font-weight:700; white-space:nowrap; }

.gf-notice{
  background:rgba(255,255,255,.62); border:1px solid #eccbd8;
  border-left:3px solid var(--pink); border-radius:var(--radius);
  padding:14px 16px;
}
.gf-notice h4{
  margin:0 0 7px; font-size:.76rem; letter-spacing:.07em;
  text-transform:uppercase; color:var(--pink-deep);
}
/* Allergen text is safety information, so it keeps full body contrast
   rather than the muted tone the rest of this section uses. */
#custom .gf-notice p{ margin:0; font-size:.79rem; line-height:1.6; color:var(--cocoa); }

/* Below this the two inner columns get too narrow for the longer item
   names ("Rotating Yoder's ice cream" wrapped onto three lines), so the
   list goes single-column and each name gets the full width. */
@media(max-width:1180px){
  .gf-columns{ grid-template-columns:1fr; gap:4px; }
  .gf-group + .gf-group{ margin-top:14px; }
}
@media(max-width:760px){
  .gf-list li{ font-size:.88rem; padding:6px 0; }
  #custom .gf-notice p{ font-size:.84rem; }
}