/* ════════════════════════════════════════════════════════════════════════════
   🧁 SUGAR & CRUMB BAKERY — a DEMONSTRATION site by Bots On Staff (18 Oct 2026).
   The bakery, its people, address, reviews and numbers are invented.
   LOOK: a cream-and-pink sticker shop. Ink-outlined buttons with a hard offset
   shadow, drips between sections, one serif display face, one rounded sans.
   ⛔ NO BLOBS: every scrim here is a LINEAR gradient anchored to an edge. No
      radial, no ellipse, no glow circle anywhere.
   ⛔ NO SALMON: the pink is the true saturated brand pink (#f08ab0) or the berry
      (#c2255f). Text on cream is dark ink. Pink never carries small text.
   ⛔ Never overflow:hidden on an ancestor of a sticky element (the header, the
      bake story, the cake-steps stack). overflow:clip on html/body is fine.
   ⛔ Hand CSS stays ABOVE the selling-band marker; tools/demo-sellband.mjs
      rewrites everything below it.
   MOTION RULES: ONE signature motion (the scroll-driven bake story, a pure
   function of scroll). Everything else is quiet and springy, 150-300 ms.
   Every loop (ticker, marquee, wobble) stops under html[data-paused] and under
   prefers-reduced-motion; a visible Pause button exists (WCAG 2.2.2).
   ════════════════════════════════════════════════════════════════════════════ */
:root{
  --pink:#f08ab0;--pink-d:#e0679a;--berry:#c2255f;--berry-d:#9f1a4c;
  --mint:#a8e6d2;--mint-d:#1d7560;--butter:#ffd36e;--lilac:#d9c7f5;
  --cream:#fff6ec;--cream2:#ffeedd;--paper:#fffdf9;
  --ink:#3a1d2b;--ink2:#5e4150;--ink3:#7d5f6e;--cocoa:#5b3a2e;
  --line:#ecd3c4;
  --r:20px;--r-sm:12px;--out:2.5px solid var(--ink);
  --sh:0 4px 0 var(--ink);
  --spring:cubic-bezier(.3,1.45,.5,1);--ease:cubic-bezier(.2,.8,.2,1);
  --fd:"Iowan Old Style","Palatino Linotype",Palatino,"URW Palladio L","Book Antiqua",Georgia,serif;
  --f:ui-rounded,"SF Pro Rounded","Nunito","Quicksand","Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  --fh:"Bradley Hand","Segoe Print","Chalkboard SE","Comic Sans MS",cursive;
  --hh:72px;
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%;overflow-x:clip;scroll-padding-top:calc(var(--hh) + 24px);scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--ink2);font:400 16px/1.62 var(--f);-webkit-font-smoothing:antialiased;overflow-x:clip}
img{max-width:100%;display:block;height:auto}
svg{flex:none}
a{color:var(--berry);text-underline-offset:3px;text-decoration-thickness:1.5px}
a:hover{color:var(--berry-d)}
a:focus-visible,button:focus-visible,summary:focus-visible,label:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:6px}
h1,h2,h3,h4{font-family:var(--fd);color:var(--ink);font-weight:800;margin:0 0 .45em;line-height:1.08;letter-spacing:-.012em;overflow-wrap:break-word;text-wrap:balance}
h1{font-size:clamp(3rem,5.6vw,5.4rem);line-height:.98;letter-spacing:-.025em}
h2{font-size:clamp(2rem,4.2vw,3.4rem)}
h3{font-size:clamp(1.2rem,1.9vw,1.45rem);line-height:1.2}
p{margin:0 0 1em}
.hl{font-style:italic;color:var(--berry);position:relative;white-space:nowrap}
.hero .hl{color:var(--butter)}
.skip{position:absolute;left:12px;top:-60px;z-index:2000;background:var(--butter);color:var(--ink);padding:10px 16px;border-radius:10px;font-weight:800;text-decoration:none;border:var(--out)}
.skip:focus{top:10px}
.vh{position:absolute !important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.tw{width:100%;max-width:1220px;margin:0 auto;padding:0 clamp(16px,4vw,36px)}
.ts{padding:clamp(56px,7.5vw,104px) 0;position:relative}
.ts--pink{background:var(--pink);color:var(--ink)}
.ts--mint{background:var(--mint);color:var(--ink)}
.ts--paper{background:var(--paper)}
.ts--cream2{background:var(--cream2)}
.ts--ink{background:var(--ink);color:#f6e6dc}
.ts--ink h2,.ts--ink h3{color:#fff}
.ts--pink h2,.ts--mint h2,.ts--pink h3,.ts--mint h3{color:var(--ink)}
.ts--pink .lead,.ts--mint .lead{color:var(--ink)}
.ts--pink a:not(.tb),.ts--mint a:not(.tb){color:var(--ink)}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font:800 .78rem/1.2 var(--f);letter-spacing:.14em;text-transform:uppercase;color:var(--berry);margin:0 0 14px}
.eyebrow::before{content:"";width:22px;height:3px;border-radius:3px;background:currentColor}
.ts--pink .eyebrow,.ts--mint .eyebrow{color:var(--ink)}
.ts--ink .eyebrow{color:var(--butter)}
.hand{font-family:var(--fh);font-weight:700;font-style:normal}
.lead{font-size:clamp(1.05rem,1.5vw,1.25rem);color:var(--ink2);max-width:62ch}
.head{max-width:780px;margin:0 0 clamp(28px,4vw,48px)}
.head--c{margin-inline:auto;text-align:center}.head--c .eyebrow{justify-content:center}.head--c .lead{margin-inline:auto}
.muted{color:var(--ink3)}
.fine{font-size:.86rem;color:var(--ink3)}

/* ── utility bar + demo strip ─────────────────────────────────────────── */
.utilbar{background:var(--ink);color:#f6e6dc;font-size:.82rem}
.utilbar__in{max-width:1220px;margin:0 auto;padding:7px clamp(16px,4vw,36px);display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.ub{display:inline-flex;align-items:center;gap:7px;color:inherit;text-decoration:none;white-space:nowrap}
.ub svg{width:15px;height:15px}
a.ub:hover{color:#fff;text-decoration:underline}
.ub__dot{width:9px;height:9px;border-radius:50%;background:#9aa0a6}
[data-state=open] .ub__dot,[data-state=soon] .ub__dot{background:#5fe0a8}
[data-state=soon] .ub__dot{background:var(--butter)}
.ub__push{flex:1}
.ub__sep{width:1px;height:14px;background:rgba(255,255,255,.22)}
.ub--pause{background:none;border:1px solid rgba(255,255,255,.35);color:#f6e6dc;border-radius:999px;padding:3px 11px;font:700 .76rem/1 var(--f);cursor:pointer;min-height:26px}
.ub--pause:hover{background:rgba(255,255,255,.12)}
.demostrip{display:inline-flex;align-items:center;gap:7px;padding:4px 12px 4px 9px;border-radius:999px;background:var(--butter);color:var(--ink);text-decoration:none;font-weight:700;font-size:.78rem}
.demostrip b{font-weight:900;letter-spacing:.08em}
.demostrip__dot{width:7px;height:7px;border-radius:50%;background:var(--berry)}
.demostrip:hover{background:#fff;color:var(--ink)}
html[data-embedded] .demostrip{display:none !important}
.social{display:inline-flex;gap:8px}.social a{display:inline-flex;color:inherit;opacity:.85}.social svg{width:16px;height:16px}
@media (max-width:760px){.ub--addr,.ub__sep,.social,.ub--tel{display:none}.utilbar__in{gap:10px;flex-wrap:nowrap}.ub__push{flex:1}}
@media (max-width:480px){.ub--pause span,.utilbar .ub__hrs{display:none}.demostrip span:not(.demostrip__dot):not(.vh){font-size:.72rem}}

/* ── header, nav, drawer ──────────────────────────────────────────────── */
.hx-sentinel{height:1px;margin-bottom:-1px}
.hx-navq{position:absolute;opacity:0;pointer-events:none}
.hx-hd{position:sticky;top:0;z-index:600;background:var(--paper);border-bottom:var(--out);transition:box-shadow .2s var(--ease)}
.hx-shrunk .hx-hd{box-shadow:0 8px 24px rgba(58,29,43,.14)}
.hx-hd__in{max-width:1220px;margin:0 auto;height:var(--hh);padding:0 clamp(16px,4vw,36px);display:flex;align-items:center;gap:clamp(10px,2vw,26px)}
.hx-brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.bk-brand__mark{width:44px;height:44px;flex:none}
.hx-brand__t{display:grid;line-height:1.05}
.hx-brand__n{font:800 1.45rem/1 var(--fd);letter-spacing:-.02em;color:var(--ink)}
.hx-brand__n i{color:var(--berry)}
.hx-brand__tag{font:700 .64rem/1.2 var(--f);letter-spacing:.14em;text-transform:uppercase;color:var(--ink3);margin-top:3px}
.hx-nav{margin-left:auto}
.hx-nav__list{display:flex;gap:2px;list-style:none;margin:0;padding:0;align-items:center}
.hx-nav__t{display:inline-flex;align-items:center;gap:5px;padding:10px 12px;border-radius:999px;font-weight:800;font-size:.94rem;color:var(--ink);text-decoration:none;transition:background .18s var(--ease),transform .22s var(--spring)}
.hx-nav__t svg{width:11px;height:11px;transition:transform .2s var(--ease)}
.hx-nav__t:hover{background:var(--pink);color:var(--ink);transform:translateY(-2px)}
.hx-nav__t[aria-current=page]{background:var(--butter)}
.hx-dd{position:relative}
.hx-dd.is-open>.hx-nav__t svg{transform:rotate(180deg)}
.hx-drop,.hx-mega{position:absolute;left:0;top:calc(100% + 10px);min-width:260px;background:var(--paper);border:var(--out);border-radius:var(--r);box-shadow:var(--sh);padding:10px;opacity:0;visibility:hidden;transform:translateY(8px) scale(.98);transform-origin:top left;transition:opacity .16s,transform .22s var(--spring),visibility 0s .22s;z-index:50}
.hx-dd.is-open>.hx-drop,.hx-dd.is-open>.hx-mega{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.hx-drop a,.hx-mega a{display:block;padding:9px 12px;border-radius:12px;text-decoration:none;color:var(--ink)}
.hx-drop a:hover,.hx-mega a:hover{background:var(--cream2)}
.hx-drop b,.hx-mega b{display:block;font-weight:800}
.hx-drop small,.hx-mega small{display:block;color:var(--ink3);font-size:.82rem}
.hx-mega{min-width:min(560px,90vw)}
.hx-mega__grid{display:grid;grid-template-columns:1fr 1fr;gap:2px}
.hx-mega__ico{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--pink);margin-right:8px;float:left;margin-top:2px}
.hx-mega__ico svg{width:17px;height:17px}
.hx-mega a{overflow:hidden}
.hx-mega a b,.hx-mega a small{margin-left:38px}
.hx-telblock{display:none}
.tb{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:48px;padding:.65rem 1.35rem;border-radius:999px;background:var(--pink);color:var(--ink);border:var(--out);box-shadow:var(--sh);font:800 1rem/1.1 var(--f);text-decoration:none;cursor:pointer;transition:transform .22s var(--spring),box-shadow .22s var(--spring),background .15s;position:relative}
.tb svg{width:19px;height:19px}
.tb:hover{transform:translateY(-3px);box-shadow:0 7px 0 var(--ink);background:#f59cbf;color:var(--ink)}
.tb:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink);transition-duration:.08s}
.tb--ghost{background:var(--paper)}
.tb--ghost:hover{background:var(--butter)}
.tb--mint{background:var(--mint)}.tb--mint:hover{background:#c0efe1}
.tb--butter{background:var(--butter)}.tb--butter:hover{background:#ffe08f}
.tb--sm{min-height:40px;padding:.45rem 1rem;font-size:.92rem}
.hx-hd .tb{min-height:46px;padding:.5rem 1.1rem}
.tb__n{display:inline-grid;place-items:center;min-width:24px;height:24px;border-radius:12px;background:var(--ink);color:#fff;font-size:.78rem;padding:0 6px}
.tb__n[hidden]{display:none}
.hx-call{display:none;width:46px;height:46px;border-radius:50%;border:var(--out);background:var(--mint);align-items:center;justify-content:center;color:var(--ink)}
.hx-call svg{width:20px;height:20px}
.hx-burger{display:none;align-items:center;gap:9px;min-height:46px;padding:0 14px;border-radius:999px;border:var(--out);background:var(--butter);font-weight:800;color:var(--ink);cursor:pointer}
.hx-burger__i{display:grid;gap:4px}.hx-burger__i i{display:block;width:18px;height:2.5px;border-radius:2px;background:var(--ink);transition:transform .22s var(--spring),opacity .15s}
.hx-drawer{position:fixed;inset:0 0 0 auto;width:min(420px,100vw);background:var(--paper);z-index:900;transform:translateX(104%);transition:transform .3s var(--ease);display:flex;flex-direction:column;border-left:var(--out);visibility:hidden}
.hx-navq:checked~.hx-drawer{transform:none;visibility:visible}
.hx-backdrop{position:fixed;inset:0;background:rgba(58,29,43,.5);z-index:850;opacity:0;pointer-events:none;transition:opacity .25s}
.hx-navq:checked~.hx-backdrop{opacity:1;pointer-events:auto}
.hx-lock{overflow:hidden}
.hx-drawer__hd{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:var(--out)}
.hx-x{width:44px;height:44px;border-radius:50%;border:var(--out);background:var(--pink);position:relative;cursor:pointer}
.hx-x i{position:absolute;left:11px;top:19px;width:18px;height:2.5px;background:var(--ink);border-radius:2px;transform:rotate(45deg)}.hx-x i+i{transform:rotate(-45deg)}
.hx-drawer__nav{padding:12px 14px;overflow:auto;flex:1;display:grid;align-content:start;gap:4px}
.hx-drawer__nav>a,.hx-acc summary{display:block;padding:13px 14px;border-radius:14px;font:800 1.15rem/1.2 var(--fd);color:var(--ink);text-decoration:none;cursor:pointer;list-style:none}
.hx-acc summary::-webkit-details-marker{display:none}
.hx-drawer__nav>a:hover,.hx-acc summary:hover{background:var(--cream2)}
.hx-drawer__nav>a[aria-current=page]{background:var(--butter)}
.hx-acc div{display:grid;padding:0 0 8px 14px}
.hx-acc div a{padding:9px 12px;color:var(--ink2);text-decoration:none;font-weight:700;border-radius:10px}.hx-acc div a:hover{background:var(--cream2)}
.hx-drawer__ft{padding:16px 18px calc(16px + env(safe-area-inset-bottom,0px));border-top:var(--out);display:grid;gap:10px}
.hx-drawer__meta{display:flex;justify-content:space-between;color:var(--ink3);font-size:.85rem;gap:10px}
@media (max-width:1179px){
  .hx-nav,.hx-hd__in>.tb{display:none}
  .hx-call{display:inline-flex;margin-left:auto}.hx-burger{display:inline-flex}
}
@media (max-width:420px){.hx-brand__tag{display:none}.hx-brand__n{font-size:1.25rem}.bk-brand__mark{width:38px;height:38px}.hx-burger{padding:0 11px}}
@media (min-width:1180px){.hx-drawer,.hx-backdrop{display:none}}

/* ── offer bar ────────────────────────────────────────────────────────── */
.offerbar{background:var(--mint);border-bottom:var(--out);color:var(--ink);font-weight:700;font-size:.92rem}
.offerbar__in{max-width:1220px;margin:0 auto;padding:9px clamp(16px,4vw,36px);display:flex;gap:10px;align-items:center;justify-content:center;text-align:center;flex-wrap:wrap}
.offerbar svg{width:18px;height:18px}
.offerbar a{color:var(--ink);font-weight:800}
.offer--s{display:none}
@media (max-width:620px){.offer--l{display:none}.offer--s{display:inline}.offerbar a{display:none}.offerbar__in{flex-wrap:nowrap;padding-block:8px}}

/* ── HERO: the picture (or the film) fills the WHOLE hero ─────────────── */
.hero{position:relative;isolation:isolate;display:flex;align-items:flex-end;color:#fff;background:var(--ink);min-height:clamp(380px,56svh,560px);overflow:clip}
.hero--home{min-height:max(560px,calc(100svh - 150px));align-items:center}
.hero__media{position:absolute;inset:0;z-index:-2}
.hero__media picture{display:block;width:100%;height:100%}
.hero__img,.hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 50%)}
.hero__video{opacity:0;transition:opacity .5s var(--ease)}
[data-film=on] .hero__video{opacity:1}
.hero__scrim{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,rgba(46,16,34,.86) 0,rgba(46,16,34,.8) clamp(620px,58vw,800px),rgba(46,16,34,.5) clamp(740px,66vw,940px),rgba(46,16,34,.12) clamp(860px,76vw,1120px),rgba(46,16,34,0) clamp(960px,86vw,1260px)),
             linear-gradient(0deg,rgba(46,16,34,.4) 0%,rgba(46,16,34,0) 30%)}
.hero__in{width:100%;max-width:1680px;margin:0 auto;padding:clamp(40px,6vw,84px) clamp(16px,4vw,36px)}
.hero__copy{max-width:min(40rem,100%)}
.hero h1{color:#fff;text-shadow:0 2px 0 rgba(46,16,34,.35),0 0 22px rgba(46,16,34,.45);margin-bottom:.3em}
.hero__sub{text-shadow:0 0 14px rgba(46,16,34,.6)}
.hero__sub{font-size:clamp(1.05rem,1.7vw,1.3rem);color:#fff;max-width:34ch;margin:0 0 1.2em}
.hero .row{display:flex;flex-wrap:wrap;gap:14px 16px;margin-bottom:18px;width:fit-content;max-width:100%}
.hero .tb--ghost{background:var(--paper)}
.hero__status{display:inline-flex;align-items:center;gap:9px;background:rgba(46,16,34,.72);border:2px solid rgba(255,255,255,.55);border-radius:999px;padding:6px 14px;font-weight:800;font-size:.92rem;color:#fff}
.hero__status .ub__dot{width:10px;height:10px}
.hero__chip{position:absolute;right:clamp(12px,2vw,24px);bottom:14px;z-index:3;display:inline-flex;align-items:center;gap:10px;font-size:.74rem;font-weight:700;color:#fff;background:rgba(46,16,34,.74);border-radius:999px;padding:5px 6px 5px 12px}
.hero__pause{display:none;width:30px;height:30px;border-radius:50%;border:2px solid #fff;background:transparent;color:#fff;align-items:center;justify-content:center;cursor:pointer}
.hero__pause svg{width:14px;height:14px}
[data-film=on] .hero__pause{display:inline-flex}
.hero__pause .i-play{display:none}.hero__pause[aria-pressed=true] .i-play{display:block}.hero__pause[aria-pressed=true] .i-pause{display:none}
.hero__pause:hover{background:rgba(255,255,255,.2)}
.hero--sub .hero__in{padding-block:clamp(36px,5vw,64px)}
.hero--sub h1{font-size:clamp(3rem,5.2vw,4.6rem)}
.hero--sub .hero__scrim{background:linear-gradient(90deg,rgba(46,16,34,.86) 0,rgba(46,16,34,.8) clamp(620px,58vw,800px),rgba(46,16,34,.5) clamp(740px,66vw,940px),rgba(46,16,34,.12) clamp(860px,76vw,1120px),rgba(46,16,34,0) clamp(960px,86vw,1260px)),linear-gradient(0deg,rgba(46,16,34,.4) 0%,rgba(46,16,34,0) 36%)}
@media (max-width:1199.98px){
  .hero--home{min-height:max(560px,calc(100svh - 160px));align-items:flex-end}
  .hero__scrim,.hero--sub .hero__scrim{background:linear-gradient(0deg,rgba(46,16,34,.92) 0%,rgba(46,16,34,.84) 40%,rgba(46,16,34,.55) 60%,rgba(46,16,34,.12) 78%,rgba(46,16,34,0) 90%)}
  .hero__in{padding-top:clamp(120px,22svh,44%);padding-bottom:26px}
  .hero--sub .hero__in{padding-top:34%}
  .hero--sub .hero__scrim{background:linear-gradient(0deg,rgba(46,16,34,.92) 0%,rgba(46,16,34,.86) 56%,rgba(46,16,34,.6) 72%,rgba(46,16,34,.15) 88%,rgba(46,16,34,0) 97%)}
  .hero__chip{bottom:auto;top:10px}
  .hero .row{flex-wrap:nowrap;gap:10px;margin-bottom:14px}
  .hero .row .tb{min-height:46px;padding:.5rem .95rem;font-size:.92rem;white-space:nowrap}
  .hero .row .tb svg{width:17px;height:17px}
  .hero__sub{margin-bottom:1em}
}
/* the cartoon film is light and pastel: ink type on a cream fade that is anchored to the LEFT edge (never a blob) */
.hero--light{color:var(--ink)}
.hero--light .hero__scrim{background:linear-gradient(90deg,rgba(255,246,236,.92) 0,rgba(255,246,236,.86) 36vw,rgba(255,246,236,.55) 42vw,rgba(255,246,236,.14) 48vw,rgba(255,246,236,0) 52vw)}
.hero--light h1{font-size:clamp(3rem,5vw,4.8rem)}
.hero--light h1{color:var(--ink);text-shadow:none}
.hero--light h1 .hl,.hero--light .hl{color:var(--berry)}
.hero--light .hero__sub{color:var(--ink);text-shadow:none}
.hero--light .hero__status{background:var(--paper);border:var(--out);color:var(--ink)}
.hero--light .tb--ghost{background:var(--butter)}
@media (max-width:1199.98px){
  .hero--light .hero__scrim{background:linear-gradient(0deg,rgba(255,246,236,.96) 0%,rgba(255,246,236,.9) 34%,rgba(255,246,236,.62) 50%,rgba(255,246,236,.16) 66%,rgba(255,246,236,0) 80%)}
}
/* sprinkles that fall ONCE on load (JS adds them, removes them, none under reduced motion) */
.sprinkles{position:absolute;inset:0;overflow:clip;pointer-events:none;z-index:2}
.sprinkles i{position:absolute;top:-24px;width:5px;height:18px;border-radius:3px;animation:sfall var(--d,2.2s) var(--dl,0s) cubic-bezier(.4,.1,.6,1) both}
@keyframes sfall{0%{transform:translateY(0) rotate(var(--r0,0deg));opacity:0}8%{opacity:1}100%{transform:translateY(var(--h,900px)) rotate(var(--r1,300deg));opacity:1}}

/* ── frosting drip dividers (drawn, in the palette) ───────────────────── */
.drip{position:absolute;left:0;right:0;top:-1px;display:block;width:100%;height:clamp(30px,4.2vw,58px);margin:0;z-index:3;color:var(--pink);pointer-events:none}
.drip svg{display:block;width:100%;height:100%}
.drip--mint{color:var(--mint)}.drip--cream{color:var(--cream)}.drip--paper{color:var(--paper)}.drip--ink{color:var(--ink)}.drip--cream2{color:var(--cream2)}.drip--butter{color:var(--butter)}.drip--pink{color:var(--pink)}

/* ── stickers (wobbly badges). DEMO facts only, always footnoted ──────── */
.sticker{position:relative;display:inline-grid;place-items:center;width:128px;height:128px;text-align:center;font:900 .82rem/1.1 var(--f);color:var(--ink);text-transform:uppercase;letter-spacing:.04em;transform:rotate(var(--rot,-8deg));filter:drop-shadow(0 3px 0 var(--ink))}
.sticker svg{position:absolute;inset:0;width:100%;height:100%}
.sticker span{position:relative;padding:0 14px;display:block}
.sticker b{display:block;font:900 1.6rem/1 var(--fd);text-transform:none;letter-spacing:-.02em}
.sticker--pink svg{color:var(--pink)}.sticker--mint svg{color:var(--mint)}.sticker--butter svg{color:var(--butter)}
@media (prefers-reduced-motion:no-preference){
  html:not([data-paused]) .sticker{animation:wob 4.2s ease-in-out infinite}
  .sticker:nth-of-type(2n){animation-delay:-1.4s}
}
.head--st{position:relative}
.head--st .st--a,.head--st .st--b{display:none}
@media (min-width:900px){
  .head--st{max-width:none;padding-right:300px}
  .head--st>*:not(.sticker){max-width:780px}
  .head--st .st--a{display:inline-grid;position:absolute;right:130px;top:-6px}
  .head--st .st--b{display:inline-grid;position:absolute;right:0;top:30px}
}
@keyframes wob{0%,100%{transform:rotate(calc(var(--rot,-8deg) - 3deg))}50%{transform:rotate(calc(var(--rot,-8deg) + 3deg)) scale(1.03)}}

/* ── ticker + marquee (loops: paused by the Pause button) ─────────────── */
.ticker{background:var(--ink);color:#fff;border-block:var(--out);overflow:clip;position:relative}
.ticker__row{display:flex;gap:0;width:max-content;animation:tick 38s linear infinite;padding:12px 0}
.ticker__row span{display:inline-flex;align-items:center;gap:20px;padding-right:20px;font:800 1.15rem/1 var(--fd);font-style:italic;white-space:nowrap}
.ticker__row i{font-style:normal;color:var(--pink)}
.ticker__pause,.mq__pause{position:absolute;right:10px;top:50%;transform:translateY(-50%);z-index:2;display:inline-flex;align-items:center;gap:6px;border-radius:999px;border:2px solid #fff;background:var(--ink);color:#fff;font:800 .74rem/1 var(--f);padding:6px 10px;cursor:pointer}
.mq__pause{border-color:var(--ink);background:var(--paper);color:var(--ink);top:-4px;transform:none}
@keyframes tick{to{transform:translateX(-50%)}}
html[data-paused] .ticker__row,html[data-paused] .mq__row{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.mq__row .rev[aria-hidden=true]{display:none}.mq__row{padding-inline:clamp(16px,4vw,36px)}.ticker__row,.mq__row{animation:none}.ticker__row{flex-wrap:wrap;width:auto;justify-content:center;gap:6px 0}.ticker__pause,.mq__pause{display:none}.mq{overflow-x:auto}}
.mq{position:relative;overflow:clip;padding:14px 0 18px}
.mq__row{display:flex;gap:18px;width:max-content;animation:tick 70s linear infinite;padding:6px 0 10px}
.mq:hover .mq__row,.mq:focus-within .mq__row{animation-play-state:paused}
.mq .rev{flex:0 0 min(340px,78vw)}

/* ── glance: oven pill + hours + case ─────────────────────────────────── */
.glance{display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:clamp(14px,2vw,24px)}
.gcard{background:var(--paper);border:var(--out);border-radius:var(--r);box-shadow:var(--sh);padding:clamp(18px,2.4vw,28px)}
.gcard__k{font:800 .74rem/1 var(--f);letter-spacing:.14em;text-transform:uppercase;color:var(--berry);margin:0 0 8px}
.gcard__big{font:800 clamp(1.4rem,2.4vw,1.9rem)/1.15 var(--fd);color:var(--ink);margin:0 0 .5em}
.gcard p{font-size:.96rem}
.wk{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-top:10px}
.wk__d{text-align:center;font-size:.72rem;line-height:1.25;border-radius:10px;padding:6px 2px;background:var(--cream)}
.wk__d abbr{display:block;font-weight:900;text-decoration:none;color:var(--ink)}
.wk__d.is-today,.is-today{background:var(--butter)}
@media (max-width:900px){.glance{grid-template-columns:1fr}.wk__d{font-size:.68rem}}
.oven{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;align-items:center;background:var(--butter);border:var(--out);border-radius:var(--r);padding:14px 18px;margin-bottom:clamp(14px,2vw,24px);box-shadow:var(--sh)}
.oven__ring{grid-row:span 2;width:54px;height:54px;position:relative}
.oven__ring svg{width:54px;height:54px;transform:rotate(-90deg)}
.oven__ring circle{fill:none;stroke-width:6}
.oven__ring .bg{stroke:rgba(58,29,43,.18)}.oven__ring .fg{stroke:var(--berry);stroke-linecap:round;transition:stroke-dashoffset .6s var(--ease)}
.oven b{font:800 1.12rem/1.2 var(--fd);color:var(--ink)}
.oven small{font-size:.86rem;color:var(--ink);opacity:.82}
.oven__list{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:6px 0 0;padding:0}
.oven__list li{background:rgba(255,255,255,.6);border-radius:999px;padding:3px 11px;font-size:.78rem;font-weight:800;color:var(--ink)}
.oven__list li.is-next{background:var(--ink);color:#fff}
.oven__list li.is-done{opacity:.55;text-decoration:line-through}

/* ── cards: the favourites. Lift toward the cursor ────────────────────── */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.2vw,28px)}
@media (max-width:900px){.grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.grid{grid-template-columns:1fr}}
.pie{display:block;text-decoration:none;color:inherit;background:var(--paper);border:var(--out);border-radius:var(--r);box-shadow:var(--sh);overflow:hidden;transition:transform .25s var(--spring),box-shadow .25s var(--spring);transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--ty,0px));will-change:auto}
.pie:hover{--ty:-6px;box-shadow:0 10px 0 var(--ink)}
.pie:active{--ty:2px;box-shadow:0 2px 0 var(--ink)}
.pie__ph{position:relative;aspect-ratio:4/3;overflow:hidden;border-bottom:var(--out);background:var(--cream2)}
.pie__ph img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.pie:hover .pie__ph img{transform:scale(1.05)}
.pie__tag{position:absolute;left:12px;top:12px;background:var(--butter);border:2px solid var(--ink);border-radius:999px;padding:3px 11px;font-size:.74rem;font-weight:900;color:var(--ink);transform:rotate(-3deg)}
.pie__b{padding:16px 18px 20px}
.pie__b h3{margin-bottom:.25em}
.pie__b p{font-size:.95rem;color:var(--ink2);margin-bottom:.6em}
.pie__price{display:flex;align-items:baseline;gap:8px;margin:0 !important;font-size:.85rem;color:var(--ink3)}
.pie__price b{font:900 1.4rem/1 var(--fd);color:var(--berry);font-style:italic}
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.6vw,20px)}
@media (max-width:900px){.tiles{grid-template-columns:repeat(2,1fr)}}
.tile{position:relative;display:block;border:var(--out);border-radius:var(--r);overflow:hidden;aspect-ratio:1/1.1;box-shadow:var(--sh);text-decoration:none;transition:transform .25s var(--spring)}
.tile:hover{transform:translateY(-5px) rotate(-1deg)}
.tile img{width:100%;height:100%;object-fit:cover}
.tile__t{position:absolute;left:10px;right:10px;bottom:10px;background:var(--paper);border:2px solid var(--ink);border-radius:14px;padding:8px 12px;color:var(--ink);line-height:1.2}
.tile__t b{display:block;font:800 1.02rem/1.15 var(--fd)}.tile__t small{color:var(--ink3);font-size:.8rem;font-weight:700}

/* ── split sections ───────────────────────────────────────────────────── */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);align-items:center}
.split--r .split__ph{order:2}
@media (max-width:900px){.split{grid-template-columns:1fr}.split--r .split__ph{order:0}}
.split__ph{margin:0;border:var(--out);border-radius:var(--r);overflow:hidden;box-shadow:0 8px 0 var(--ink);transform:rotate(var(--rot,-1.2deg));background:var(--cream2)}
.split__ph img{width:100%;height:auto}
.split__ph figcaption{padding:9px 14px;font-size:.84rem;font-weight:700;color:var(--ink2);background:var(--paper);border-top:var(--out)}
.ticks{list-style:none;margin:0 0 1.4em;padding:0;display:grid;gap:10px}
.ticks li{display:flex;gap:11px;align-items:flex-start}
.ticks li::before{content:"";flex:none;width:22px;height:22px;margin-top:2px;border-radius:50%;background:var(--mint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233a1d2b' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center/14px no-repeat;border:2px solid var(--ink)}
.ts--pink .ticks li::before{background-color:var(--paper)}
.row{display:flex;flex-wrap:wrap;gap:14px 16px;align-items:center}
.tlink{font-weight:800}

/* ── THE SIGNATURE MOTION: the bake story, a pure function of scroll ──── */
.story{background:var(--ink);color:#f6e6dc;position:relative}
.story .head{padding-top:clamp(40px,6vw,80px)}
.story h2{color:#fff}
.story__pin{max-width:1220px;margin:0 auto;padding-inline:clamp(16px,4vw,36px)}
.story .lead{color:#f1dcd0}
.story__steps{display:grid;gap:clamp(20px,3vw,32px);padding-bottom:clamp(48px,6vw,88px)}
.sstep{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,3vw,40px);align-items:center;background:#4a2538;border:2.5px solid #7a4660;border-radius:var(--r);overflow:hidden}
.sstep__ph{margin:0;aspect-ratio:4/3}.sstep__ph img{width:100%;height:100%;object-fit:cover}
.sstep__t{padding:clamp(18px,3vw,36px)}
.sstep__time{font:800 .8rem/1 var(--f);letter-spacing:.14em;text-transform:uppercase;color:var(--butter);margin:0 0 8px}
.sstep h3{color:#fff;font-size:clamp(1.5rem,3vw,2.3rem)}
.sstep p{color:#f1dcd0;margin:0}
@media (max-width:760px){.sstep{grid-template-columns:1fr}}
.story-live .story{height:430vh;padding:0}
.story-live .story__pin{align-content:center;position:sticky;top:var(--hh);height:calc(100svh - var(--hh));display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(20px,4vw,56px);align-items:center;padding:clamp(18px,3vh,36px) clamp(16px,4vw,36px);max-width:1220px;margin:0 auto}
.story-live .story__steps{display:block;position:relative;padding:0;height:min(430px,60svh)}
.story__head{display:none}
.story-live .story__head{display:block;position:absolute;left:0;top:-90px}
.story .eyebrow{color:var(--butter)}
.story-live .sstep__time .sn{display:none}
.story-live .story .head{display:none}
.story-live .sstep{position:absolute;inset:0;display:block;background:none;border:0;border-radius:0;overflow:visible;opacity:var(--a,0);transform:translateY(calc((1 - var(--a,0)) * 26px));pointer-events:none}
.story-live .sstep:first-child{pointer-events:auto}
.story-live .sstep__ph{display:none}
.story-live .sstep__t{padding:0}
.story-live .sstep h3{font-size:clamp(2rem,4.6vw,3.6rem);line-height:1}
.story-live .sstep p{font-size:clamp(1rem,1.4vw,1.2rem);max-width:34ch}
.story__stage{display:none}
.story-live .story__stage{display:block;position:relative;aspect-ratio:4/3;max-height:calc(100svh - var(--hh) - 90px);width:100%;border:2.5px solid #fff;border-radius:var(--r);overflow:hidden;background:#2b1020;box-shadow:0 8px 0 var(--pink)}
.story__stage figure{position:absolute;inset:0;margin:0;clip-path:inset(calc((1 - var(--r,1)) * 100%) 0 0 0)}
.story__stage img{width:100%;height:100%;object-fit:cover;transform:scale(calc(1.12 - var(--r,1) * .12))}
.story__clock{position:absolute;left:12px;bottom:12px;background:var(--butter);color:var(--ink);border:2.5px solid var(--ink);border-radius:999px;padding:6px 14px;font:900 1.1rem/1 var(--f);font-variant-numeric:tabular-nums}
.story__bar{position:absolute;left:0;right:0;bottom:0;height:7px;background:rgba(255,255,255,.2)}
.story__bar i{display:block;height:100%;width:calc(var(--p,0) * 100%);background:var(--pink)}
.story__stepnum{position:absolute;right:12px;top:12px;background:var(--ink);color:#fff;border-radius:999px;padding:5px 12px;font:800 .78rem/1 var(--f);letter-spacing:.08em}
@media (max-width:760px){
  .story-live .story__pin{grid-template-columns:1fr;grid-template-rows:auto auto;align-content:center;gap:14px;padding-top:14px}
  .story-live .story__stage{aspect-ratio:16/10;max-height:44svh}
  .story-live .story__steps{height:min(250px,38svh)}
  .story-live .sstep h3{font-size:clamp(1.7rem,8vw,2.4rem)}
}
.story__note{padding-bottom:clamp(40px,6vw,72px)}

/* ── cupcake builder ──────────────────────────────────────────────────── */
.bld{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(20px,4vw,56px);align-items:center}
@media (max-width:900px){.bld{grid-template-columns:1fr}}
.bld__stage{position:relative;background:var(--paper);border:var(--out);border-radius:28px;box-shadow:0 8px 0 var(--ink);padding:18px 18px 22px;text-align:center}
.bld__stage svg.cup{width:min(100%,330px);height:auto;margin:0 auto;display:block;overflow:visible}
.bld__name{font:800 clamp(1.3rem,2.4vw,1.8rem)/1.1 var(--fd);color:var(--ink);margin:8px 0 2px;min-height:2.2em}
.bld__price{font:900 1.6rem/1 var(--fd);font-style:italic;color:var(--berry)}
.bld__price small{font:700 .85rem var(--f);font-style:normal;color:var(--ink3)}
.bld__sticker{position:absolute;right:-14px;top:-24px;--rot:9deg}
.bld__fs{border:0;padding:0;margin:0 0 18px}
.bld__fs legend{font:800 .8rem/1 var(--f);letter-spacing:.14em;text-transform:uppercase;color:var(--ink);margin-bottom:10px;padding:0}
.opts-row{display:flex;flex-wrap:wrap;gap:10px}
.pick{position:relative}
.pick input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.pick span{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:6px 15px 6px 8px;border:var(--out);border-radius:999px;background:var(--paper);font-weight:800;color:var(--ink);transition:transform .2s var(--spring),background .15s;box-shadow:0 3px 0 var(--ink)}
.pick i{width:26px;height:26px;border-radius:50%;border:2px solid var(--ink);background:var(--c,#fff)}
.pick input:hover+span{transform:translateY(-2px)}
.pick input:checked+span{background:var(--butter);transform:translateY(2px);box-shadow:0 1px 0 var(--ink)}
.pick input:focus-visible+span{outline:3px solid var(--ink);outline-offset:3px}
.bld__go{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:6px}
.tb.is-loading{pointer-events:none}
.tb.is-loading .tb__l{display:inline-block;width:18px;height:18px;border-radius:50%;border:3px solid var(--ink);border-right-color:transparent;animation:spin .6s linear infinite}
.tb .tb__tick{width:19px;height:19px;stroke:var(--ink);stroke-width:3.2;fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:24;stroke-dashoffset:24}
.tb.is-done .tb__tick{animation:draw .35s var(--ease) forwards}
@keyframes spin{to{transform:rotate(360deg)}}@keyframes draw{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){.tb.is-loading .tb__l{animation:none}.tb.is-done .tb__tick{animation:none;stroke-dashoffset:0}}

/* ── quiz ─────────────────────────────────────────────────────────────── */
.quiz{background:var(--paper);border:var(--out);border-radius:28px;box-shadow:0 8px 0 var(--ink);padding:clamp(20px,3.4vw,40px);max-width:760px;margin-inline:auto}
.quiz__bar{display:flex;gap:6px;margin-bottom:18px}.quiz__bar i{flex:1;height:8px;border-radius:4px;background:var(--line);border:1.5px solid var(--ink)}.quiz__bar i.on{background:var(--pink)}
.quiz h3{font-size:clamp(1.4rem,2.6vw,2rem)}
.quiz__a{display:grid;gap:10px;margin-top:14px}
.quiz__a button{text-align:left;font:800 1.02rem/1.3 var(--f);color:var(--ink);background:var(--cream);border:var(--out);border-radius:16px;padding:13px 16px;cursor:pointer;box-shadow:0 3px 0 var(--ink);transition:transform .2s var(--spring),background .15s;min-height:48px}
.quiz__a button:hover{transform:translateY(-2px);background:var(--butter)}
.quiz__res{text-align:center}
.quiz__res .hand{font-size:1.5rem;color:var(--berry);margin:0}
.quiz__res h3{font-size:clamp(2rem,5vw,3rem)}
.quiz__res img{margin:0 auto 14px;border:var(--out);border-radius:18px;width:min(100%,360px)}

/* ── reviews ──────────────────────────────────────────────────────────── */
.revsum{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:6px}
.revsum b{font:900 2.6rem/1 var(--fd);color:var(--ink)}
.stars{display:inline-flex;gap:3px}.stars svg{width:20px;height:20px;fill:var(--butter);stroke:var(--ink);stroke-width:1.4}
.revs{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,24px)}
@media (max-width:900px){.revs{grid-template-columns:1fr}}
.rev{margin:0;background:var(--paper);border:var(--out);border-radius:var(--r);box-shadow:var(--sh);padding:18px 20px 22px;display:grid;gap:10px;align-content:start}
.rev__hd{display:flex;align-items:center;gap:12px}
.rev__av{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--pink);border:2px solid var(--ink);font-weight:900;color:var(--ink)}
.rev__hd small{display:block;color:var(--ink3);font-size:.8rem}
.rev blockquote{margin:0;color:var(--ink);font-size:.98rem}
.rev__demo{font-size:.7rem;font-weight:900;letter-spacing:.1em;color:var(--berry);text-transform:uppercase}

/* ── menu ─────────────────────────────────────────────────────────────── */
.rail{position:sticky;top:var(--hh);z-index:40;background:var(--cream);border-bottom:var(--out);overflow-x:auto;scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.rail__in{display:flex;gap:8px;padding:10px clamp(16px,4vw,36px);max-width:1220px;margin:0 auto;width:max-content;min-width:100%}
.rail a{white-space:nowrap;padding:8px 15px;border:var(--out);border-radius:999px;background:var(--paper);color:var(--ink);font-weight:800;text-decoration:none;font-size:.92rem;transition:transform .2s var(--spring),background .15s}
.rail a:hover{transform:translateY(-2px);background:var(--pink)}.rail a.is-on{background:var(--butter)}
.m-sec{padding:clamp(28px,3.4vw,48px) 0;scroll-margin-top:calc(var(--hh) + 70px)}
.m-sec__hd{display:grid;grid-template-columns:minmax(0,1fr) minmax(200px,340px);gap:clamp(18px,3vw,40px);align-items:center;margin-bottom:clamp(20px,3vw,32px)}
.m-sec__ph{margin:0;border:var(--out);border-radius:var(--r);overflow:hidden;box-shadow:var(--sh);aspect-ratio:16/10;transform:rotate(1.2deg)}.m-sec__ph img{width:100%;height:100%;object-fit:cover}
@media (max-width:700px){.m-sec__hd{grid-template-columns:1fr}.m-sec__ph{order:-1;transform:none;aspect-ratio:16/9}}
.items{display:grid;grid-template-columns:repeat(2,1fr);gap:12px clamp(16px,3vw,36px)}
@media (max-width:820px){.items{grid-template-columns:1fr}}
.item{display:grid;grid-template-columns:1fr auto;grid-template-areas:"h a" "pr pr" "d d";gap:6px 12px;align-items:start;padding:14px 16px;background:var(--paper);border:2.5px solid var(--ink);border-radius:16px;transition:transform .22s var(--spring),box-shadow .22s var(--spring)}
.item:hover{transform:translateY(-3px) rotate(-.4deg);box-shadow:0 5px 0 var(--ink)}
.item h3{grid-area:h;font-size:1.15rem;margin:0;font-family:var(--fd)}
.item__d{grid-area:d;margin:0;font-size:.9rem;color:var(--ink2)}
.item__p{grid-area:pr;display:flex;gap:6px 14px;flex-wrap:wrap;align-items:baseline}
.item__p span{font:900 1.12rem/1 var(--fd);font-style:italic;color:var(--berry);white-space:nowrap}
.item__p small{font:700 .74rem var(--f);font-style:normal;color:var(--ink3);margin-right:3px}
.item__add{grid-area:a;justify-self:end}
.add{width:40px;height:40px;border-radius:50%;border:var(--out);background:var(--pink);color:var(--ink);font:900 1.3rem/1 var(--f);cursor:pointer;box-shadow:0 3px 0 var(--ink);transition:transform .2s var(--spring)}
.add:hover{transform:translateY(-2px) rotate(8deg)}.add:active{transform:translateY(2px);box-shadow:0 0 0 var(--ink)}
.add.is-added{background:var(--mint)}
.item.is-hidden{display:none}
.badge{display:inline-block;font-size:.66rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase;border:1.5px solid var(--ink);border-radius:999px;padding:1px 8px;background:var(--lilac);color:var(--ink);margin-left:6px;vertical-align:middle}
.badge--n{background:var(--butter)}
.filters{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:6px}
.filters label{display:inline-flex;gap:8px;align-items:center;padding:7px 14px;border:var(--out);border-radius:999px;background:var(--paper);font-weight:800;color:var(--ink);cursor:pointer;min-height:40px}
.filters input{accent-color:var(--berry);width:18px;height:18px}
.filters output{font-weight:800;color:var(--ink2)}
.tray{position:fixed;left:50%;bottom:calc(14px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:800}
.tray .tb{box-shadow:0 5px 0 var(--ink),0 14px 30px rgba(58,29,43,.25)}

/* ── forms ────────────────────────────────────────────────────────────── */
.form{background:var(--paper);border:var(--out);border-radius:28px;box-shadow:0 8px 0 var(--ink);padding:clamp(20px,3.4vw,40px);display:grid;gap:18px}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
@media (max-width:640px){.form__row{grid-template-columns:1fr}}
.field{display:grid;gap:6px}
.field>label,.field>legend,.field>span.l{font-weight:800;color:var(--ink);font-size:.95rem}
.field input[type=text],.field input[type=tel],.field input[type=date],.field input[type=number],.field select,.field textarea{width:100%;font:600 1rem/1.3 var(--f);color:var(--ink);background:var(--cream);border:var(--out);border-radius:14px;padding:12px 14px;min-height:48px}
.field textarea{min-height:92px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{background:#fff;outline:3px solid var(--pink);outline-offset:2px}
.field small{color:var(--ink3);font-size:.84rem}
fieldset.field{border:0;padding:0;margin:0}
.reqlist{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.reqlist li{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center;background:var(--cream);border:2px solid var(--ink);border-radius:14px;padding:9px 12px;font-weight:700;color:var(--ink)}
.reqlist .q{display:inline-flex;align-items:center;gap:8px}
.reqlist .q button{width:30px;height:30px;border-radius:50%;border:2px solid var(--ink);background:var(--paper);font:900 1rem/1 var(--f);cursor:pointer;color:var(--ink)}
.reqlist .tot{font-weight:900;color:var(--berry)}
.empty{padding:22px;border:2.5px dashed var(--ink3);border-radius:18px;text-align:center;color:var(--ink2);background:var(--cream)}
.empty .hand{display:block;font-size:1.5rem;color:var(--berry)}
.form__done{background:var(--mint);border:var(--out);border-radius:18px;padding:18px 20px;color:var(--ink);font-weight:700}
.form__done b{font:800 1.4rem/1.2 var(--fd);display:block;margin-bottom:6px}
.cakeprev{background:var(--paper);border:var(--out);border-radius:28px;box-shadow:0 8px 0 var(--ink);padding:16px;text-align:center;position:sticky;top:calc(var(--hh) + 20px)}
.cakeprev svg{width:100%;max-width:380px;height:auto;margin:0 auto;display:block}
.cakeprev figcaption{font-size:.86rem;color:var(--ink2);margin-top:8px}
.formgrid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(20px,3vw,40px);align-items:start}
@media (max-width:960px){.formgrid{grid-template-columns:1fr}.cakeprev{position:static;order:-1}}

/* ── sticky-stacking cards: ONE stack, on /cakes, "how a custom cake happens" ── */
.stack{display:grid;gap:0;padding-bottom:30px}
.stk{background:var(--paper);border:var(--out);border-radius:var(--r);box-shadow:var(--sh);padding:clamp(20px,3vw,34px);display:grid;grid-template-columns:auto 1fr;gap:clamp(14px,3vw,34px);align-items:center;margin-bottom:22px}
.stk__n{display:grid;place-items:center;width:clamp(56px,8vw,88px);height:clamp(56px,8vw,88px);border-radius:50%;background:var(--pink);border:var(--out);font:900 clamp(1.8rem,4vw,3rem)/1 var(--fd);color:var(--ink)}
.stk:nth-child(2) .stk__n{background:var(--mint)}.stk:nth-child(3) .stk__n{background:var(--butter)}.stk:nth-child(4) .stk__n{background:var(--lilac)}
.stk h3{margin-bottom:.2em}.stk p{margin:0}
@media (prefers-reduced-motion:no-preference) and (min-width:760px){
  .stack{padding-bottom:0}
  .stk{position:sticky;min-height:150px;margin-bottom:26px}
  .stk:nth-child(1){top:calc(var(--hh) + 20px);z-index:1}
  .stk:nth-child(2){top:calc(var(--hh) + 36px);z-index:2}
  .stk:nth-child(3){top:calc(var(--hh) + 52px);z-index:3}
  .stk:nth-child(4){top:calc(var(--hh) + 68px);z-index:4}
}

/* ── gallery + misc ───────────────────────────────────────────────────── */
.gal{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media (max-width:900px){.gal{grid-template-columns:repeat(2,1fr)}}
.gal figure{margin:0;border:var(--out);border-radius:var(--r);overflow:hidden;box-shadow:var(--sh);background:var(--paper)}
.gal img{width:100%;aspect-ratio:1/1;object-fit:cover}
.gal figcaption{padding:8px 12px;font-size:.84rem;font-weight:700;color:var(--ink2);border-top:var(--out)}
.price-table{width:100%;border-collapse:collapse;background:var(--paper);border:var(--out);border-radius:var(--r);overflow:hidden}
.price-table th,.price-table td{padding:12px 16px;text-align:left;border-bottom:2px solid var(--line);color:var(--ink)}
.price-table th{background:var(--butter);font-weight:900}
.price-table td:last-child,.price-table th:last-child{text-align:right;font-weight:900;color:var(--berry)}
.price-table th:last-child{color:var(--ink)}
.hours{border-collapse:collapse;width:100%;max-width:420px;background:var(--paper);border:var(--out);border-radius:var(--r);overflow:hidden}
.hours th,.hours td{padding:10px 16px;text-align:left;border-bottom:2px solid var(--line);color:var(--ink)}.hours td{text-align:right;font-weight:800}
.hours tr.is-today{background:var(--butter)}
.map{margin:0;border:var(--out);border-radius:var(--r);overflow:hidden;box-shadow:0 8px 0 var(--ink);background:var(--paper)}.map svg{display:block;width:100%;height:auto}.map figcaption{padding:9px 14px;font-size:.84rem;font-weight:700;border-top:var(--out);color:var(--ink2)}
.faq details{background:var(--paper);border:var(--out);border-radius:16px;margin-bottom:12px;padding:0 18px;box-shadow:0 3px 0 var(--ink)}
.faq summary{cursor:pointer;list-style:none;padding:16px 28px 16px 0;font:800 1.12rem/1.3 var(--fd);color:var(--ink);position:relative;min-height:48px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:2px;top:12px;width:28px;height:28px;border-radius:50%;background:var(--pink);border:2px solid var(--ink);display:grid;place-items:center;font:900 1.1rem/1 var(--f);transition:transform .25s var(--spring)}
.faq details[open] summary::after{transform:rotate(45deg);background:var(--mint)}
.faq details p{padding-bottom:16px;margin:0;color:var(--ink2)}
.faq h2{margin-top:1.6em}.faq h2:first-child{margin-top:0}
.prose{max-width:760px}.prose h2{font-size:clamp(1.5rem,2.6vw,2rem);margin-top:1.6em}.prose li{margin-bottom:.4em}
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media (max-width:820px){.facts{grid-template-columns:repeat(2,1fr)}}
.fact{background:var(--paper);border:var(--out);border-radius:var(--r);box-shadow:var(--sh);padding:18px;text-align:center}
.fact b{display:block;font:900 clamp(2rem,4vw,3.1rem)/1 var(--fd);font-style:italic;color:var(--berry);font-variant-numeric:tabular-nums}
.fact span{font-weight:800;color:var(--ink)}
.cta{position:relative;isolation:isolate;color:#fff;overflow:clip;border-top:var(--out)}
.cta>img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover}
.cta::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(46,16,34,.88) 0%,rgba(46,16,34,.66) 45%,rgba(46,16,34,.1) 100%)}
.cta .tw{padding-block:clamp(56px,8vw,110px)}.cta h2{color:#fff;max-width:18ch}.cta p{max-width:46ch;color:#fff;font-size:1.1rem}
.cta .tb--ghost{background:var(--paper)}
.herosell{background:var(--butter);border-block:var(--out)}
.herosell__in{display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center;justify-content:space-between;padding-block:22px}
.herosell h2{font-size:clamp(1.3rem,2.6vw,1.9rem);margin:0}.herosell p{margin:2px 0 0;color:var(--ink);font-weight:700}
.chatcard{background:var(--paper);border:var(--out);border-radius:24px;box-shadow:0 8px 0 var(--ink);overflow:hidden}
.chatcard__hd{display:flex;gap:12px;align-items:center;padding:14px 18px;background:var(--pink);border-bottom:var(--out);color:var(--ink)}.chatcard__hd small{display:block}
.chatcard__bd{padding:18px;display:grid;gap:10px}
.bub{margin:0;max-width:86%;padding:10px 14px;border-radius:18px 18px 18px 4px;background:var(--cream2);color:var(--ink);font-weight:600;font-size:.95rem}
.bub--me{justify-self:end;background:var(--mint);border-radius:18px 18px 4px 18px}
.chatcard__opts a{font-weight:800}
.chatcard__ft{margin:0;padding:10px 18px;font-size:.8rem;color:var(--ink3);border-top:2px solid var(--line)}
.cc__mark{width:36px;height:36px}

/* ── reveals: CSS only, scroll-driven where supported, visible otherwise ── */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .rv{animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 42%}
    @keyframes rise{from{opacity:0;transform:translateY(34px) scale(.985)}to{opacity:1;transform:none}}
  }
}

/* ── footer ───────────────────────────────────────────────────────────── */
.foot{background:var(--ink);color:#f1dcd0;padding:clamp(44px,6vw,80px) 0 28px}
.ft__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:clamp(20px,3vw,44px)}
@media (max-width:860px){.ft__grid{grid-template-columns:1fr 1fr}}@media (max-width:520px){.ft__grid{grid-template-columns:1fr}}
.foot h4{color:#fff;font:800 .8rem/1 var(--f);letter-spacing:.14em;text-transform:uppercase;margin-bottom:14px}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.foot a{color:#f1dcd0;text-decoration:none}.foot a:hover{color:#fff;text-decoration:underline}
.ft__brand{display:flex;align-items:center;gap:10px;font:800 1.4rem/1 var(--fd);color:#fff}
.ft__addr{line-height:1.7}
.ft__hours li span{display:inline-block;width:42px;font-weight:800;color:#fff}
.ft__hours li.is-today{background:none;color:var(--butter);font-weight:800}
.ft__legal{margin:32px 0 0;padding-top:20px;border-top:1px solid rgba(255,255,255,.2);font-size:.85rem;color:#e7cdbf}
.ft__tog{margin-top:14px;display:flex;gap:10px;flex-wrap:wrap}
.ft__tog button{background:none;border:2px solid #f1dcd0;color:#f1dcd0;border-radius:999px;padding:6px 14px;font:800 .8rem/1 var(--f);cursor:pointer;min-height:34px}
.ft__tog button:hover{background:rgba(255,255,255,.12)}

/* ── chat ─────────────────────────────────────────────────────────────── */
.launch{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:900;display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 20px 0 14px;border-radius:999px;background:var(--pink);color:var(--ink);border:var(--out);box-shadow:0 4px 0 var(--ink),0 14px 28px rgba(58,29,43,.25);font:800 1rem/1 var(--f);cursor:pointer;transition:transform .22s var(--spring),box-shadow .22s var(--spring)}
.launch:hover{transform:translateY(-3px) rotate(-1.5deg);box-shadow:0 7px 0 var(--ink),0 16px 28px rgba(58,29,43,.25)}
.launch[aria-expanded=true]{display:none}
.lchat__dot{width:12px;height:12px;border-radius:50%;background:var(--mint-d);border:2px solid var(--ink)}
.lchat__sm{display:none}@media (max-width:560px){.lchat__lg{display:none}.lchat__sm{display:inline}}
html[data-hero-in-view] .launch{visibility:hidden;opacity:0;pointer-events:none;transform:translateY(12px)}
.chatbox{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:1100;width:min(390px,calc(100vw - 32px));height:min(640px,calc(100vh - 32px));display:flex;flex-direction:column;background:var(--paper);border:var(--out);border-radius:24px;box-shadow:0 8px 0 var(--ink),0 24px 60px rgba(58,29,43,.3);overflow:hidden}
.chatbox[hidden]{display:none}
.chatbox__hd{display:flex;align-items:center;gap:10px;padding:12px 14px;background:var(--pink);border-bottom:var(--out);color:var(--ink);font-weight:800}
.chat__mark{width:34px;height:34px}.chatbox__t{flex:1}
.chatbox__x{width:38px;height:38px;border-radius:50%;border:var(--out);background:var(--paper);font:900 1.3rem/1 var(--f);color:var(--ink);cursor:pointer}
.log{flex:1;overflow:auto;padding:14px;display:grid;gap:10px;align-content:start;background:var(--cream);overscroll-behavior:contain}
.msg{max-width:88%;padding:10px 14px;border-radius:18px 18px 18px 4px;background:var(--paper);border:2px solid var(--ink);color:var(--ink);font-weight:600;font-size:.95rem;white-space:pre-line;animation:pop .28s var(--spring) both}
.msg--me{justify-self:end;background:var(--mint);border-radius:18px 18px 4px 18px}
@keyframes pop{from{opacity:0;transform:translateY(8px) scale(.94)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.msg{animation:none}}
.opts{display:flex;flex-wrap:wrap;gap:8px;padding:10px 12px;border-top:2px solid var(--line);max-height:44%;overflow:auto;background:var(--paper)}
.chip{font:800 .9rem/1.2 var(--f);color:var(--ink);background:var(--cream);border:2px solid var(--ink);border-radius:999px;padding:8px 14px;cursor:pointer;min-height:40px;transition:transform .18s var(--spring),background .15s}
.chip:hover{background:var(--butter);transform:translateY(-2px)}
.ask{display:flex;gap:8px;padding:10px 12px;border-top:2px solid var(--line);background:var(--paper)}
.ask__in{flex:1;cursor:text;font-weight:600}.ask__go{background:var(--pink)}
.chatbox__fine{margin:0;padding:8px 14px;font-size:.74rem;color:var(--ink3);border-top:2px solid var(--line);background:var(--paper)}
@media (max-width:560px){.chatbox{inset:0;width:100%;height:100dvh;border-radius:0;border:0}}

/* ── confetti + sprinkle trail ────────────────────────────────────────── */
.confetti{position:fixed;inset:0;z-index:1500;pointer-events:none;width:100%;height:100%}
.trail{position:fixed;left:0;top:0;width:4px;height:13px;border-radius:3px;pointer-events:none;z-index:1400}
.ft__tog [aria-pressed=true]{background:var(--butter);color:var(--ink);border-color:var(--butter)}

/* ── motion off: the Pause button and prefers-reduced-motion ──────────── */
html[data-paused] .sticker{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  .pie,.tile,.item,.tb,.add{transform:none !important}
  .sprinkles{display:none}
}
@media print{.utilbar,.hx-hd,.launch,.chatbox,.drip{display:none}}

/* ── 🧲 THE SELLING BAND — 24 Sep 2026 ───────────────────────────────────────────
   Written by tools/demo-sellband.mjs. Read that file before changing anything
   here; it records why the ground is ours and fixed while the accent is derived
   from this folder's own brand token and resolved to a literal.
   ⛔ The ground is deliberately NOT var(--anything): borrowing each site's
      surface made this read as the invented company's own sales copy, and the
      point of the band is that a stranger can see it is not.
   ⛔ The accent paints a pip, a rule and a chevron. It never carries prose. */
.sellband{--sb-accent:#e2553c;--sb-ground:#0f1b2a;--sb-card:#182b40;
  background:var(--sb-ground);color:#eef3f8;
  border-top:3px solid var(--sb-accent);
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
  padding:clamp(2.2rem,5vw,3.4rem) 0;
  position:relative;z-index:1;isolation:isolate}
.sellband *{box-sizing:border-box}
.sellband .sellband__h,.sellband .sellband__k,.sellband .sellband__sum{
  font-family:inherit;text-transform:none;font-style:normal}
.sellband .sellband__h{letter-spacing:-.015em}
.sellband .sellband__k,.sellband .sellband__sum{letter-spacing:0}
.sellband .sellband__h::after,.sellband .sellband__k::after,
.sellband .sellband__h::before,.sellband .sellband__k::before{content:none}
.sellband__in{padding-inline:20px}
.sellband__eyebrow{display:flex;align-items:flex-start;gap:.5rem;margin:0 0 .6rem;
  font-size:.72rem;letter-spacing:.11em;text-transform:uppercase;font-weight:700;
  line-height:1.45;color:#c7d4e0}
.sellband__pip{width:8px;height:8px;border-radius:50%;background:var(--sb-accent);
  flex:0 0 auto;margin-top:.38em}
.sellband__h{margin:0 0 1.5rem;font-size:clamp(1.45rem,3.1vw,2.1rem);line-height:1.18;
  font-weight:800;letter-spacing:-.015em;color:#fff;max-width:32ch}
.sellband__grid{display:grid;gap:1rem;grid-template-columns:repeat(3,1fr);align-items:start}
.sellband__card{background:var(--sb-card);border:1px solid #35506e;border-radius:12px;
  padding:1.1rem 1.15rem 1.2rem;min-width:0}
.sellband__k{margin:0 0 .5rem;font-size:.95rem;font-weight:700;color:#fff;line-height:1.3}
.sellband__p{margin:0 0 .6rem;font-size:.9rem;line-height:1.55;color:#dae3ec}
.sellband__fine{margin:.5rem 0 0;font-size:.8rem;line-height:1.5;color:#b2c0ce}
.sellband__price{margin:0 0 .6rem;font-size:1.05rem;line-height:1.4;color:#fff;
  font-weight:400;display:flex;flex-wrap:wrap;align-items:baseline;gap:.15rem .45rem}
.sellband__fig{white-space:nowrap}
.sellband__price b{font-size:1.5rem;font-weight:800;letter-spacing:-.01em}
.sellband__dot{color:var(--sb-accent)}
.sellband__more{margin-top:.7rem;border-top:1px solid #35506e;padding-top:.6rem}
.sellband__sum{display:flex;align-items:center;justify-content:space-between;gap:.5rem;
  cursor:pointer;list-style:none;font-size:.85rem;font-weight:700;color:#fff;
  padding:.2rem 0;min-height:32px}
.sellband__sum::-webkit-details-marker{display:none}
.sellband__chev{width:9px;height:9px;border-right:2px solid var(--sb-accent);
  border-bottom:2px solid var(--sb-accent);transform:rotate(45deg);flex:0 0 auto;
  margin-bottom:3px;transition:transform .18s ease}
.sellband__more[open] .sellband__chev{transform:rotate(-135deg);margin-bottom:-3px}
.sellband__list{margin:.5rem 0 0;padding:0;list-style:none;display:grid;gap:.34rem}
.sellband__list li{position:relative;padding-left:1.05rem;font-size:.84rem;
  line-height:1.5;color:#dae3ec}
.sellband__list li::before{content:"";position:absolute;left:0;top:.52em;
  width:5px;height:5px;border-radius:50%;background:var(--sb-accent)}
.sellband__cta{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem;margin:1.4rem 0 0}
.sellband__go{display:inline-flex;align-items:center;min-height:44px;
  padding:.6rem 1.25rem;border-radius:8px;background:#fff;color:#0f1b2a;
  font-weight:700;font-size:.92rem;text-decoration:none;border:1px solid #fff}
.sellband__go:hover{background:#dce7f2;border-color:#dce7f2}
.sellband__alt{display:inline-flex;align-items:center;min-height:44px;
  color:#dae3ec;font-size:.9rem;text-decoration:none;
  border-bottom:1px solid #46586c;padding-bottom:1px}
.sellband__alt:hover{color:#fff;border-bottom-color:#fff}
@media (prefers-reduced-motion:no-preference){
  .sellband__card{transition:border-color .18s ease}
  .sellband__card:hover{border-color:#4a6a8f}
}
@media (max-width:900px){
  .sellband__grid{grid-template-columns:1fr}
  .sellband__h{max-width:28ch}
}
@media (max-width:560px){
  .sellband__in{padding-inline:16px}
  .sellband__price b{font-size:1.35rem}
}
html[data-embedded] .sellband{display:none !important}

/* 🔅 18 Oct 2026, owner: "looks a tad too bright" — the cartoon hero film sits a notch lower so the cream wash and the glossy highlights stop glaring on a big screen. */
.hero__img, .hero__video { filter: brightness(.93) saturate(1.05); }

/* ♿ 18 Oct 2026 review: every pause control is a 44px target */
.hero__pause,[data-film-pause],.mq-pause,[data-marquee-pause],.ticker__pause,.offerbar__pause,.topbar__pause,[data-anim-pause]{min-width:44px;min-height:44px}
.mq__pause,.ticker__pause,.ub--pause,.hero__pause{min-width:44px;min-height:44px}