/* =========================================================
   Mckenna's Baked Goods - "Loud Little Bakery" (Bold & Alive)
   Saturated color-blocking · Anton + Kaushan Script + Hanken Grotesk
   ========================================================= */
:root {
  --berry:      oklch(55% 0.16 18);
  --berry-deep: oklch(42% 0.15 18);
  --cream:      oklch(96% 0.025 92);
  --cream-2:    oklch(93% 0.03 88);
  --butter:     oklch(88% 0.14 92);
  --sage:       oklch(83% 0.06 155);
  --blush:      oklch(91% 0.045 18);
  --ink:        oklch(24% 0.03 38);
  --line:       oklch(86% 0.02 40);

  --loud: "Anton", "Arial Narrow", sans-serif;
  --script: "Kaushan Script", "Brush Script MT", cursive;
  --body: "Hanken Grotesk", system-ui, sans-serif;

  --wide: 1240px;
  --ease: cubic-bezier(.34,1.56,.64,1);     /* springy */
  --ease-s: cubic-bezier(.22,1,.36,1);
  --r: 18px; --r-lg: 28px;

  /* pop-art star scatter — tiled (rhythmic, intentional), white + gold on red */
  --spark-red: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cg fill='%23ffffff'%3E%3Cpath opacity='.12' transform='translate(30,34) scale(1.25)' d='M10,0L12,8L20,10L12,12L10,20L8,12L0,10L8,8Z'/%3E%3Cpath opacity='.11' transform='translate(150,120) scale(.85)' d='M10,0L12,8L20,10L12,12L10,20L8,12L0,10L8,8Z'/%3E%3Cpath opacity='.11' transform='translate(96,166) scale(.6)' d='M10,0L12,8L20,10L12,12L10,20L8,12L0,10L8,8Z'/%3E%3Ccircle opacity='.12' cx='182' cy='72' r='2.5'/%3E%3Ccircle opacity='.1' cx='70' cy='98' r='2.5'/%3E%3C/g%3E%3Cg fill='%23f4d35e'%3E%3Cpath opacity='.34' transform='translate(132,40) scale(1.05)' d='M10,0L12,8L20,10L12,12L10,20L8,12L0,10L8,8Z'/%3E%3Cpath opacity='.26' transform='translate(54,140) scale(.7)' d='M10,0L12,8L20,10L12,12L10,20L8,12L0,10L8,8Z'/%3E%3C/g%3E%3C/svg%3E");
  --spark-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cg fill='%23a23b46'%3E%3Cpath opacity='.14' transform='translate(30,34) scale(1.25)' d='M10,0L12,8L20,10L12,12L10,20L8,12L0,10L8,8Z'/%3E%3Cpath opacity='.12' transform='translate(150,120) scale(.85)' d='M10,0L12,8L20,10L12,12L10,20L8,12L0,10L8,8Z'/%3E%3Cpath opacity='.12' transform='translate(96,166) scale(.6)' d='M10,0L12,8L20,10L12,12L10,20L8,12L0,10L8,8Z'/%3E%3Cpath opacity='.13' transform='translate(132,40) scale(.95)' d='M10,0L12,8L20,10L12,12L10,20L8,12L0,10L8,8Z'/%3E%3Ccircle opacity='.12' cx='70' cy='98' r='2.5'/%3E%3Ccircle opacity='.1' cx='182' cy='72' r='2.5'/%3E%3C/g%3E%3C/svg%3E");
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--body); color: var(--ink); background: var(--cream); line-height: 1.6; font-size: clamp(1rem, .96rem + .25vw, 1.1rem); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { max-width: 100%; display: block; }
::selection { background: var(--ink); color: var(--butter); }
a { color: var(--berry-deep); }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 6px; }
.skip-link { position: absolute; left: 50%; translate: -50% -150%; background: var(--ink); color: var(--cream); padding: .7rem 1.2rem; border-radius: 999px; z-index: 999; font-weight: 800; transition: translate .3s; }
.skip-link:focus { translate: -50% 12px; }
.ic { width: 1.15em; height: 1.15em; flex: none; }
h1, h2, h3 { margin: 0; }

.loud, .sec-loud, .foot-h, .hero-h .loud, .step-no, .marquee span { font-family: var(--loud); font-weight: 400; letter-spacing: .005em; line-height: .95; text-transform: uppercase; }
.script, .sec-script, .foot-script, .story-sign, .box-title { font-family: var(--script); font-weight: 400; line-height: 1; }

/* doodles */
.doodle { position: absolute; pointer-events: none; z-index: 2; }
@keyframes floaty { 0%,100% { transform: translateY(0) rotate(var(--rot,0deg)); } 50% { transform: translateY(-12px) rotate(var(--rot,0deg)); } }
@keyframes twinkle { 0%,100% { opacity: 1; transform: scale(1) rotate(var(--rot,0deg)); } 50% { opacity: .55; transform: scale(.82) rotate(var(--rot,0deg)); } }

/* buttons - chunky, hard-shadow, springy */
.btn { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--body); font-weight: 800; font-size: 1.02rem; border: 2.5px solid var(--ink); cursor: pointer; text-decoration: none; padding: .85rem 1.5rem; border-radius: 999px; box-shadow: 4px 4px 0 var(--ink); transition: transform .18s var(--ease), box-shadow .18s var(--ease), background .2s; }
.btn:hover { transform: translate(-2px,-2px); box-shadow: 6px 6px 0 var(--ink); }
.btn:active { transform: translate(2px,2px); box-shadow: 1px 1px 0 var(--ink); }
.btn .ic { transition: transform .2s var(--ease); } .btn:hover .ic { transform: translateX(3px); }
.btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: 2px 2px 0 var(--ink); transform: none; }
.btn-ink { background: var(--ink); color: var(--cream); }
.btn-berry { background: var(--berry-deep); color: #fff; }
.btn-butter { background: var(--butter); color: var(--ink); }
.btn-ghost { background: transparent; color: #fff; border-color: #fff; box-shadow: 4px 4px 0 rgba(0,0,0,.25); }
.btn-ghost:hover { box-shadow: 6px 6px 0 rgba(0,0,0,.25); }
.btn-sm { padding: .65rem 1.1rem; font-size: .92rem; box-shadow: 3px 3px 0 var(--ink); }

/* nav */
.nav { position: sticky; top: 0; z-index: 60; background: var(--cream); border-bottom: 0; box-shadow: 0 1px 0 oklch(86% .02 62 / .65), 0 8px 20px oklch(25% .04 38 / .08); }
.nav-inner { width: min(92%, var(--wide)); margin-inline: auto; display: flex; align-items: center; gap: 1rem; min-height: 70px; }
.brand { display: flex; flex-direction: row; align-items: center; gap: .55rem; line-height: 1; text-decoration: none; color: var(--ink); margin-right: auto; }
.brand-word { font-family: var(--script); font-size: 2rem; color: var(--berry-deep); }
.brand-tag { font-weight: 800; font-size: .58rem; letter-spacing: .26em; text-transform: uppercase; color: var(--ink); margin-top: -2px; }
.nav-links { display: flex; gap: 1.6rem; }
.nav-links a { color: var(--ink); text-decoration: none; font-weight: 700; font-size: .96rem; position: relative; padding: .2rem 0; }
.nav-links a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -2px; height: 3px; background: var(--berry); border-radius: 3px; transition: right .3s var(--ease-s); }
.nav-links a:hover::after, .nav-links a.active::after { right: 0; }
.box-btn { display: inline-flex; align-items: center; gap: .5rem; background: var(--berry-deep); color: #fff; text-decoration: none; font-weight: 800; font-size: .95rem; padding: .55rem .6rem .55rem 1.1rem; border-radius: 999px; border: 2.5px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); transition: transform .18s var(--ease), box-shadow .18s var(--ease); }
.box-btn:hover { transform: translate(-1px,-1px); box-shadow: 5px 5px 0 var(--ink); }
.box-count { min-width: 1.6rem; height: 1.6rem; padding: 0 .35rem; display: inline-grid; place-items: center; background: var(--butter); color: var(--ink); border-radius: 999px; border: 2px solid var(--ink); font-variant-numeric: tabular-nums; font-weight: 900; font-size: .82rem; }
.box-count.bump { animation: bump .45s var(--ease); }
@keyframes bump { 0%,100% { transform: scale(1); } 45% { transform: scale(1.5) rotate(-8deg); } }

/* HERO */
.hero {
  position: relative; color: #fff; overflow: hidden;
  padding-block: clamp(3.1rem, 2.1rem + 4.8vw, 5.9rem) clamp(3.2rem, 2.2rem + 4.8vw, 6.2rem);
  background-color: var(--berry);
  background-image:
    radial-gradient(58% 48% at 50% 20%, oklch(61% .16 18) 0%, transparent 72%),       /* spotlight behind headline */
    radial-gradient(42% 44% at 104% 6%, oklch(88% .14 92 / .15) 0%, transparent 60%),  /* butter glow, top-right */
    radial-gradient(46% 48% at -6% 102%, oklch(96% .025 92 / .12) 0%, transparent 60%);/* cream glow, bottom-left */
}
.hero::before, .footer::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background-image: var(--spark-red), radial-gradient(circle, rgba(255,255,255,.085) 4.5px, transparent 5px); background-size: 200px 200px, 43px 43px; background-position: 0 0, 8px 8px; background-repeat: repeat, repeat; }
.hero-inner { position: relative; z-index: 3; width: min(92%, var(--wide)); margin-inline: auto; text-align: center; }
.hero-kicker { display: inline-flex; align-items: center; gap: .5rem; font-weight: 800; font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); background: var(--butter); border: 2.5px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); padding: .5rem 1.1rem; border-radius: 999px; margin: 0 0 1.8rem; transform: rotate(-2.5deg); }
.hero-h { display: grid; gap: .1rem; margin: 0; }
.hero-h .loud { font-size: clamp(3rem, 1.2rem + 12vw, 9rem); color: #fff; text-shadow: 4px 4px 0 var(--berry-deep); }
.hero-h .script { position: relative; font-size: clamp(2.2rem, 1rem + 8vw, 6rem); color: var(--butter); transform: rotate(-4deg); margin-top: -.26em; margin-left: .12em; }
.hero-lead { font-size: clamp(1.05rem, 1rem + .45vw, 1.22rem); font-weight: 500; max-width: 42ch; margin: clamp(1.8rem, 1.35rem + 1.3vw, 2.6rem) auto 0; color: oklch(97% .02 60); text-wrap: pretty; }
.hero-cta { display: flex; justify-content: center; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; }

/* hero stickers */
.hero-stickers { list-style: none; display: flex; align-items: flex-start; justify-content: center; flex-wrap: wrap; gap: clamp(1rem, .5rem + 2vw, 2.2rem); padding: 0; margin: clamp(2rem, 1.25rem + 2.4vw, 3.25rem) 0 0; }
.sticker { position: relative; flex: none; width: clamp(150px, 7rem + 7vw, 215px); height: clamp(150px, 7rem + 7vw, 215px); }
.sticker img { width: 100%; height: 100%; object-fit: cover; object-position: center; border-radius: 50%; border: 6px solid var(--cream); box-shadow: 6px 6px 0 var(--ink); }
.st-1 { transform: rotate(-5deg); } .st-2 { transform: rotate(3deg) translateY(-10px); } .st-3 { transform: rotate(-2deg); }
.st-tag { position: absolute; bottom: 6%; left: 50%; translate: -50% 40%; white-space: nowrap; font-family: var(--script); font-size: 1.15rem; color: var(--ink); background: var(--butter); padding: .15rem .9rem; border-radius: 999px; border: 2.5px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); }
.st-2 .st-tag { background: var(--cream); } .st-3 .st-tag { background: var(--sage); }
.sticker { transition: transform .3s var(--ease); }
.sticker:hover { transform: rotate(0deg) scale(1.04); z-index: 5; }

/* hero doodles */
.dood-a { color: var(--butter); width: 30px; height: 30px; top: 13%; left: max(1.25rem, calc((100vw - var(--wide)) / 2 + 2rem)); --rot: -18deg; animation: twinkle 3.5s ease-in-out infinite; }
.dood-b { color: var(--cream); width: 74px; height: 60px; top: clamp(5.2rem, 11vw, 8.8rem); right: max(1.25rem, calc((100vw - var(--wide)) / 2 + 1.8rem)); --rot: 12deg; transform: rotate(12deg); opacity: .85; }
.dood-c { color: var(--butter); width: 26px; height: 26px; top: 32%; left: 5%; --rot: 6deg; animation: floaty 5s ease-in-out infinite; }
.dood-d { color: var(--cream); width: 54px; height: 54px; bottom: 15%; right: 22%; --rot: -8deg; animation: twinkle 4s ease-in-out infinite; }
.dood-e { color: var(--butter); position: absolute; width: 30px; height: 30px; top: -.35em; right: -.7em; transform: rotate(14deg); }

/* MARQUEE */
.marquee { background: var(--ink); color: var(--cream); overflow: hidden; padding: .7rem 0; border-block: 2.5px solid var(--ink); }
.marquee-track { display: flex; align-items: center; gap: 1.4rem; width: max-content; animation: scroll 32s linear infinite; will-change: transform; }
.marquee span { font-size: clamp(1.4rem, 1rem + 1.6vw, 2.3rem); color: var(--cream); }
.mq-spk { width: 1.1rem; height: 1.1rem; color: var(--butter); flex: none; }
@keyframes scroll { to { transform: translateX(-50%); } }
.marquee:hover .marquee-track, .marquee:focus-within .marquee-track { animation-play-state: paused; }

/* section heads */
.sec-head { margin-bottom: clamp(1.6rem, 1rem + 2vw, 2.6rem); }
.sec-script { font-size: clamp(1.5rem, 1rem + 1.8vw, 2.4rem); color: var(--berry); transform: rotate(-3deg); margin: 0 0 .5rem; line-height: 1.1; display: inline-block; }
.sec-loud { font-size: clamp(2.4rem, 1.4rem + 5.5vw, 5.6rem); color: var(--ink); }
.sec-loud-sm { font-size: clamp(2rem, 1.4rem + 3vw, 3.6rem); }
/* the muffins heading has a comma on line 1 that dips into the O below — give
   ONLY this heading a hair more leading so the descender clears it */
.bakes-main > .sec-head .sec-loud { line-height: 1.06; }
.sec-note { font-weight: 500; font-size: 1.1rem; color: oklch(40% .03 40); margin: 1rem 0 0; max-width: 46ch; }

/* BAKES + ORDER */
.bakes { position: relative; background: var(--cream); padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem); }
.bakes-grid { width: min(92%, var(--wide)); margin-inline: auto; display: grid; grid-template-columns: 1.25fr .75fr; gap: clamp(1.8rem, 1rem + 3vw, 4rem); align-items: start; }

/* muffins */
.muffins { list-style: none; margin: 0; padding: 0; border-top: 3px solid var(--ink); }
.muf { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 1rem 1.4rem; padding: 1.05rem .4rem; border-bottom: 2.5px solid var(--ink); transition: background .2s, padding-left .25s var(--ease-s); }
.muf:hover { background: var(--blush); padding-left: 1rem; }
.muf-name { font-weight: 800; font-size: clamp(1.3rem, 1rem + 1.4vw, 2rem); letter-spacing: -.01em; }
.muf-name em { font-style: normal; font-weight: 700; font-size: .55em; letter-spacing: .02em; color: var(--berry-deep); margin-left: .4rem; }
.muf-price { font-weight: 800; font-size: 1.05rem; color: var(--berry-deep); white-space: nowrap; font-variant-numeric: tabular-nums; }
.muf-add { display: inline-flex; gap: .5rem; }
.add { display: inline-flex; align-items: center; justify-content: center; gap: .3rem; font-family: var(--body); font-weight: 800; font-size: .85rem; color: var(--ink); background: var(--cream); border: 2.5px solid var(--ink); border-radius: 999px; padding: .5rem 1rem; min-height: 42px; cursor: pointer; white-space: nowrap; box-shadow: 2px 2px 0 var(--ink); transition: transform .15s var(--ease), box-shadow .15s var(--ease), background .15s; }
.add .ic { width: .9em; height: .9em; } .add .ac { display: none; }
.add:hover { transform: translate(-1px,-1px); box-shadow: 3px 3px 0 var(--ink); background: var(--butter); }
.add:active { transform: translate(1px,1px); box-shadow: 1px 1px 0 var(--ink); }
.add:focus-visible, .chip:focus-visible, .bi-rm:focus-visible { outline: none; box-shadow: 4px 4px 0 var(--berry-deep); }
.add[aria-pressed="true"] { background: var(--berry-deep); color: #fff; }
.add[aria-pressed="true"] .ap { display: none; } .add[aria-pressed="true"] .ac { display: inline-block; }

/* build a cake */
.cake { position: relative; margin-top: clamp(2rem, 1.4rem + 2vw, 3.2rem); background: var(--sage); border: 3px solid var(--ink); border-radius: var(--r-lg); padding: clamp(1.5rem, 1rem + 2vw, 2.4rem); box-shadow: 7px 7px 0 var(--ink); }
.cake .sec-script { color: var(--berry-deep); }
.cake .sec-note { color: oklch(34% .04 60); }
.dood-cake { color: var(--berry-deep); width: 54px; height: 54px; top: -22px; right: 24px; transform: rotate(12deg); }
.cake-rows { display: grid; gap: 1rem; margin-top: 1.4rem; }
.cake-row { display: grid; grid-template-columns: 92px 1fr; gap: .6rem 1rem; align-items: center; }
.cake-label { font-weight: 800; font-size: 1.1rem; }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip { font-family: var(--body); font-weight: 700; font-size: .92rem; color: var(--ink); background: var(--cream); border: 2.5px solid var(--ink); border-radius: 999px; padding: .5rem 1.1rem; min-height: 42px; cursor: pointer; box-shadow: 2px 2px 0 var(--ink); transition: transform .15s var(--ease), box-shadow .15s var(--ease), background .15s; }
.chip:hover { transform: translate(-1px,-1px); box-shadow: 3px 3px 0 var(--ink); }
.chip[aria-pressed="true"] { background: var(--berry-deep); color: #fff; }
.cake-foot { display: flex; align-items: center; gap: 1rem 1.2rem; flex-wrap: wrap; margin-top: 1.6rem; }
.cake-readout { font-family: var(--script); font-size: 1.3rem; color: var(--berry-deep); margin: 0; }
.cake-readout.ready { color: var(--ink); }
.cake-custom { display: flex; align-items: center; gap: .55rem; margin: 1.3rem 0 0; padding-top: 1.2rem; border-top: 2px dashed var(--ink); font-weight: 700; font-size: .95rem; color: var(--berry-deep); }
.cake-custom .ic { width: 1.15em; height: 1.15em; flex: none; }

/* YOUR BOX */
.box { position: sticky; top: 92px; }
.box-card { position: relative; background: var(--butter); border: 3px solid var(--ink); border-radius: var(--r-lg); padding: clamp(1.4rem, 1rem + 1.5vw, 2rem); box-shadow: 8px 8px 0 var(--ink); }
.box-head { position: relative; }
.dood-box { color: var(--berry); width: 46px; height: 46px; top: -6px; right: -4px; transform: rotate(12deg); }
.box-kicker { font-weight: 800; font-size: .8rem; letter-spacing: .22em; text-transform: uppercase; color: var(--berry-deep); margin: 0; }
.box-title { font-size: 2.2rem; color: var(--ink); margin: .2rem 0 1rem; }
.box-items { list-style: none; margin: 0 0 .4rem; padding: 0; display: grid; gap: .55rem; }
.box-items li { display: grid; grid-template-columns: 1fr auto auto auto; align-items: center; gap: .3rem .6rem; background: var(--cream); border: 2.5px solid var(--ink); border-radius: 12px; padding: .55rem .7rem; }
.box-items li.new { animation: pop .4s var(--ease); }
@keyframes pop { from { opacity: 0; transform: scale(.8) translateY(-6px); } }
.bi-name { font-weight: 800; font-size: .95rem; line-height: 1.2; }
.bi-name small { display: block; font-weight: 600; font-size: .76rem; color: var(--berry-deep); }
.bi-qty { font-size: .8rem; font-weight: 700; color: oklch(45% .03 40); white-space: nowrap; }
.bi-price { font-weight: 800; font-variant-numeric: tabular-nums; font-size: .92rem; }
.bi-rm { border: none; background: none; color: var(--berry); cursor: pointer; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; }
.bi-rm:hover { background: var(--berry-deep); color: #fff; }
.bi-rm:active { transform: scale(.85); }
.bi-rm .ic { width: .8em; height: .8em; }
.box-empty { font-weight: 500; color: oklch(38% .04 50); text-align: center; padding: .8rem 0 1.2rem; margin: 0; line-height: 1.6; }
.box-total { display: flex; align-items: baseline; justify-content: space-between; border-top: 2.5px dashed var(--ink); padding-top: .9rem; margin-top: .5rem; font-weight: 800; }
.box-amount { font-family: var(--loud); font-size: 2rem; color: var(--berry-deep); }

/* box form */
.box-form { margin-top: 1.1rem; }
.box-form label { display: block; font-weight: 800; font-size: .78rem; letter-spacing: .02em; margin: .8rem 0 .25rem; }
.box-form input, .box-form textarea { width: 100%; font-family: var(--body); font-size: .95rem; color: var(--ink); border: 2.5px solid var(--ink); background: var(--cream); border-radius: 14px; padding: .6rem .8rem; box-shadow: 2px 2px 0 var(--ink); transition: box-shadow .15s var(--ease), transform .15s var(--ease); }
.box-form input::placeholder, .box-form textarea::placeholder { color: oklch(46% .03 50); }
.box-form input:focus, .box-form textarea:focus { outline: none; box-shadow: 4px 4px 0 var(--berry-deep); transform: translate(-1px,-1px); }
.box-form textarea { resize: vertical; min-height: 46px; }
.box-2 { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
/* iOS renders type=date with native chrome that ignores our input styling and
   clips inside a narrow column — normalize it so it matches the other fields */
.box-form input[type="date"] { -webkit-appearance: none; appearance: none; min-height: 46px; }
.box-form input[type="date"]::-webkit-date-and-time-value { text-align: left; margin: 0; }
.box-form input[type="date"]::-webkit-calendar-picker-indicator { opacity: .55; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.box-send { width: 100%; justify-content: center; margin-top: 1.1rem; }
.spinner { width: 1rem; height: 1rem; border: 2.5px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; display: none; }
.btn[aria-busy="true"] .spinner { display: inline-block; } .btn[aria-busy="true"] { opacity: .85; pointer-events: none; }
@keyframes spin { to { transform: rotate(360deg); } }
.box-fine { font-size: .72rem; font-weight: 600; color: oklch(38% .04 50); text-align: center; line-height: 1.6; margin: .8rem 0 0; }
.box-status { font-weight: 700; font-size: .82rem; text-align: center; margin: .6rem 0 0; } .box-status:empty { display: none; } .box-status.is-err { color: var(--berry-deep); }
.box-done { text-align: center; padding: 1.4rem .5rem; }
.box-done h3 { font-family: var(--loud); text-transform: uppercase; font-size: 1.8rem; color: var(--berry-deep); margin-bottom: .5rem; }
.box-done p { font-weight: 500; margin: 0; }

/* GALLERY */
.gallery { position: relative; background: var(--blush); padding-block: clamp(3rem, 2rem + 4vw, 6rem); overflow: hidden; }
.gal-head { width: min(92%, var(--wide)); margin-inline: auto; }
.dood-gal { color: var(--berry); width: 96px; height: 20px; top: clamp(3rem, 7vw, 5.4rem); right: max(2rem, calc((100vw - var(--wide)) / 2 + 5rem)); opacity: .8; }
.dood-gal2 { display: none; }
.dood-gal3 { color: var(--berry-deep); width: 20px; height: 20px; top: clamp(4.8rem, 10vw, 7rem); right: max(1.5rem, calc((100vw - var(--wide)) / 2 + 4rem)); transform: rotate(-8deg); opacity: .9; }
.collage { width: min(92%, var(--wide)); margin-inline: auto; display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 1fr; gap: clamp(.9rem, .5rem + 1.2vw, 1.6rem); }
.ph { position: relative; margin: 0; overflow: hidden; border: 3px solid var(--ink); border-radius: var(--r); box-shadow: 6px 6px 0 var(--ink); aspect-ratio: 1; background: var(--cream-2); transition: transform .35s var(--ease-s); }
.ph img { width: 100%; height: 100%; object-fit: cover; }
.ph-big { transform: rotate(-2deg); }
.ph:nth-child(2) { transform: rotate(2.5deg); }
.ph:nth-child(3) { transform: rotate(-3deg); box-shadow: -6px 6px 0 var(--ink); }
.ph:nth-child(4) { transform: rotate(1.5deg); }
.ph:nth-child(5) { transform: rotate(-1.5deg); }
.ph:hover { transform: rotate(0deg) scale(1.03); z-index: 4; }
.ph-big { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
.ph-tall { grid-row: span 2; aspect-ratio: auto; }
.ph-round { border-radius: 50%; }
.ph figcaption { position: absolute; left: 10px; bottom: 10px; font-family: var(--script); font-size: 1.15rem; color: var(--ink); background: var(--butter); padding: .1rem .8rem; border-radius: 999px; border: 2.5px solid var(--ink); }
.ph-round figcaption { left: 50%; translate: -50% 0; }

/* scrapbook touches: washi tape across a photo corner (clipped by .ph overflow)
   + pushpins. Both ride along with the photo's tilt and hover. */
.ph-tape-l::after, .ph-tape-r::after {
  content: ""; position: absolute; z-index: 6; top: 6px; width: 124px; height: 27px;
  opacity: .85; box-shadow: 0 1px 4px oklch(25% .04 38 / .18);
  background-image: linear-gradient(rgba(255,255,255,.28), rgba(255,255,255,0) 45%, rgba(0,0,0,.06));
}
.ph-tape-l::after { left: -44px; transform: rotate(-45deg); }
.ph-tape-r::after { right: -44px; transform: rotate(45deg); }
.tape-butter::after { background-color: oklch(88% .14 92 / .8); }
.tape-sage::after   { background-color: oklch(83% .06 155 / .82); }
.tape-blush::after  { background-color: oklch(86% .07 18 / .8); }

.ph-pin::before {
  content: ""; position: absolute; z-index: 6; top: 9px; left: 50%; translate: -50% 0;
  width: 17px; height: 17px; border-radius: 50%; border: 1.5px solid var(--ink);
  box-shadow: 1px 2px 3px oklch(25% .04 38 / .3), inset -1.5px -1.5px 2px rgba(0,0,0,.22), inset 1.5px 1.5px 2px rgba(255,255,255,.55);
}
.pin-berry::before { background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.55), var(--berry-deep) 62%); }
.pin-sage::before  { background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.6), oklch(62% .08 155) 62%); }

/* straddling tape on the story photo (overflow visible there) */
.story-photo::before {
  content: ""; position: absolute; z-index: 3; top: -15px; left: 50%; translate: -50% 0;
  width: 124px; height: 30px; transform: rotate(-4deg);
  background-color: oklch(86% .07 18 / .82); border: 1px solid oklch(70% .06 18 / .35);
  background-image: linear-gradient(rgba(255,255,255,.28), rgba(255,255,255,0) 45%, rgba(0,0,0,.06));
  box-shadow: 0 2px 6px oklch(25% .04 38 / .2); opacity: .9;
}

/* STORY */
.story { position: relative; background: var(--sage); overflow: hidden; display: grid; grid-template-columns: 1fr; align-items: center; gap: clamp(2rem, 1rem + 3vw, 4rem); padding: clamp(2.5rem, 2rem + 3vw, 5rem) max(4%, calc((100% - var(--wide)) / 2)); }
.dood-story { color: var(--berry); width: 42px; height: 42px; top: 12%; left: max(1.25rem, calc((100vw - var(--wide)) / 2 + 1.25rem)); transform: rotate(-12deg); opacity: .75; }
.story-photo { position: relative; margin: 0 auto; width: min(400px, 80vw); height: min(400px, 80vw); }
.story-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 24%; border: 4px solid var(--ink); border-radius: 26px; box-shadow: 9px 9px 0 var(--ink); transform: rotate(-2deg); }
.story-copy .sec-script { color: var(--berry-deep); }
.story-copy p { font-weight: 500; max-width: 50ch; margin: 0 0 1.1rem; }
.story-copy .sec-loud-sm { margin-bottom: 1.2rem; }
.story-sign { font-size: 2.4rem; color: var(--berry-deep); margin: .2rem 0 1.2rem !important; transform: rotate(-3deg); }
.story-copy .btn-sm { margin-top: .55rem; }

/* HOW */
.how { background: var(--cream); padding-block: clamp(3.5rem, 2.5rem + 4vw, 6.5rem); }
.how-head, .steps { width: min(92%, var(--wide)); margin-inline: auto; }
.how-head { text-align: center; }
.how-head .sec-script { color: var(--berry); }
.steps { list-style: none; padding: 0; margin: clamp(1.6rem,1rem+2vw,3rem) auto 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.6rem; }
.step {
  text-align: center;
  background: var(--cream-2);
  border: 2.5px solid var(--ink);
  border-radius: var(--r-lg);
  box-shadow: 6px 6px 0 var(--ink);
  padding: clamp(1.6rem, 1.2rem + 1vw, 2.2rem) 1.3rem clamp(1.6rem, 1.2rem + 1vw, 2.1rem);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.step:hover { transform: translate(-2px,-2px); box-shadow: 8px 8px 0 var(--ink); }
.step-no { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 1rem; background: var(--berry); color: #fff; border: 3px solid var(--ink); border-radius: 50%; font-size: 2rem; box-shadow: 4px 4px 0 var(--ink); }
.step:nth-child(2) .step-no { background: var(--butter); color: var(--ink); }
.step:nth-child(3) .step-no { background: var(--sage); color: var(--ink); }
.step:nth-child(4) .step-no { background: var(--blush); color: var(--ink); }
.step-h { font-weight: 800; font-size: 1.35rem; margin-bottom: .4rem; }
.step p { font-weight: 500; color: oklch(40% .03 40); margin: 0; max-width: 26ch; margin-inline: auto; }

/* FOOTER */
.footer {
  position: relative; color: #fff; overflow: hidden;
  background-color: var(--berry);
  background-image:
    radial-gradient(52% 52% at 50% 14%, oklch(61% .16 18) 0%, transparent 72%),
    radial-gradient(40% 42% at -4% 4%, oklch(88% .14 92 / .14) 0%, transparent 60%),
    radial-gradient(44% 46% at 104% 100%, oklch(96% .025 92 / .12) 0%, transparent 60%);
}
.foot-cta { position: relative; z-index: 3; width: min(92%, var(--wide)); margin-inline: auto; text-align: center; padding-block: clamp(3.5rem, 2.5rem + 4vw, 7rem); }
.foot-logo { display: block; width: 96px; height: 96px; margin: 0 auto 1.4rem; background: #fff; border: 3px solid var(--ink); border-radius: 50%; box-shadow: 5px 5px 0 var(--ink); object-fit: cover; transform: rotate(-4deg); }
.foot-script { font-size: clamp(2rem, 1.4rem + 3vw, 3.4rem); color: var(--butter); transform: rotate(-3deg); margin: 0; }
.foot-h { font-size: clamp(3rem, 1.5rem + 9vw, 7.5rem); color: #fff; text-shadow: 4px 4px 0 var(--berry-deep); margin: .2rem 0 2rem; }
.foot-btn { font-size: 1.1rem; }
.dood-f1 { color: var(--butter); width: 58px; height: 58px; top: 16%; left: max(1.5rem, calc((100vw - var(--wide)) / 2 + 1.5rem)); transform: rotate(-10deg); animation: twinkle 4s ease-in-out infinite; }
.dood-f2 { color: var(--cream); width: 48px; height: 39px; top: 17%; right: max(1.8rem, calc((100vw - var(--wide)) / 2 + 2.2rem)); transform: rotate(-14deg); opacity: .85; }
.dood-f3 { color: var(--butter); width: 20px; height: 20px; top: 25%; right: max(1.2rem, calc((100vw - var(--wide)) / 2 + 1.3rem)); transform: rotate(10deg); opacity: .9; }
.foot-base { position: relative; z-index: 3; width: min(92%, var(--wide)); margin-inline: auto; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 2rem; padding-block: 1.8rem; border-top: 2.5px solid rgba(255,255,255,.4); font-weight: 600; }
.foot-base p { margin: 0; color: oklch(95% .02 60); }
.foot-base a { color: #fff; display: inline-flex; align-items: center; gap: .4rem; }
.foot-brand { font-family: var(--script); font-size: 1.8rem; margin-right: auto !important; }
.foot-fine { flex-basis: 100%; color: oklch(88% .03 50) !important; font-size: .82rem; padding-top: .4rem; }
.foot-credit { flex-basis: 100%; color: oklch(90% .03 60); font-size: .82rem; font-weight: 600; padding-top: .1rem; }
.foot-credit a { color: #fff; font-weight: 800; text-decoration: underline; text-underline-offset: 2px; }

/* reveal */
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s var(--ease-s), transform .6s var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }

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

/* responsive */
@media (max-width: 940px) {
  .bakes-grid { grid-template-columns: 1fr; }
  .box { position: static; max-width: 480px; width: 100%; margin-inline: auto; }
  .story { grid-template-columns: 1fr; }
  .story-photo { order: -1; }
  .collage { grid-template-columns: repeat(2, 1fr); }
  .ph-big { grid-column: span 2; grid-row: span 1; aspect-ratio: 16/11; }
  .ph-tall { grid-row: span 1; aspect-ratio: 1; }
  .steps { grid-template-columns: repeat(2, 1fr); gap: 1.6rem 1.2rem; }
}
@media (min-width: 941px) { .story { grid-template-columns: .8fr 1.2fr; } }
@media (max-width: 620px) {
  .nav-links { display: none; }
  .hero { padding-block: 2.4rem 2.8rem; }
  .hero-kicker { font-size: .72rem; margin-bottom: 1.2rem; padding: .42rem .85rem; }
  .hero-h .loud { font-size: clamp(3.15rem, 17vw, 4.35rem); text-shadow: 3px 3px 0 var(--berry-deep); }
  .hero-h .script { font-size: clamp(2.1rem, 11vw, 3.1rem); margin-top: -.2em; margin-left: .04em; }
  .hero-lead { max-width: 31ch; margin-top: 1.35rem; font-size: .96rem; line-height: 1.45; }
  .hero-cta { gap: .7rem; margin-top: 1.25rem; }
  .hero-cta .btn { padding-inline: 1.05rem; }
  .hero-stickers { gap: .75rem; margin-top: 1.75rem; }
  .sticker { width: clamp(108px, 30vw, 128px); height: clamp(108px, 30vw, 128px); }
  .sticker img { border-width: 4px; box-shadow: 4px 4px 0 var(--ink); }
  .st-tag { font-size: .88rem; padding-inline: .6rem; border-width: 2px; box-shadow: 1.5px 1.5px 0 var(--ink); }
  .muf { grid-template-columns: 1fr auto; row-gap: .6rem; }
  .muf-add { grid-column: 1 / -1; }
  .cake-row { grid-template-columns: 1fr; gap: .4rem; }
  .box-2 { grid-template-columns: 1fr; }
  .collage { grid-template-columns: 1fr; }
  .ph, .ph-big, .ph-tall { grid-column: auto; grid-row: auto; aspect-ratio: 4/3; transform: rotate(0deg); }
  .ph-round { aspect-ratio: 1; }
  .steps { grid-template-columns: 1fr; }
  .foot-base { flex-direction: column; align-items: flex-start; }
  .foot-brand { margin-right: 0 !important; }
}
@media (pointer: coarse) { .add, .chip, .nav-links a { min-height: 44px; } }

/* ===================================================================
   LIFE PASS - texture, scalloped seams, recurring motif, delight
   =================================================================== */

/* DEPTH: big soft color-blocks bleed off opposite corners + a fine halftone dot
   field. Everything lives in the background layer, so it always sits behind
   content — no floating shapes, nothing to collide with text. */
.bakes, .gallery, .story, .how {
  background-repeat: no-repeat, no-repeat, repeat, repeat;
  background-size: auto, auto, 200px 200px, 42px 42px;
  background-position: 0 0, 0 0, 0 0, 11px 11px;
}
.bakes {
  background-color: var(--cream);
  background-image:
    radial-gradient(44% 50% at 100% 0%, oklch(91% .045 18 / .68) 0%, transparent 62%),
    radial-gradient(40% 46% at -2% 100%, oklch(88% .14 92 / .34) 0%, transparent 60%),
    var(--spark-light),
    radial-gradient(circle, oklch(70% .05 45 / .10) 3px, transparent 3.5px);
}
.gallery {
  background-color: var(--blush);
  background-image:
    radial-gradient(46% 52% at 102% 3%, oklch(83% .06 155 / .55) 0%, transparent 62%),
    radial-gradient(42% 48% at -3% 100%, oklch(88% .14 92 / .4) 0%, transparent 60%),
    var(--spark-light),
    radial-gradient(circle, oklch(70% .05 18 / .11) 3px, transparent 3.5px);
}
.story {
  background-color: var(--sage);
  background-image:
    radial-gradient(48% 54% at 103% 0%, oklch(91% .045 18 / .55) 0%, transparent 62%),
    radial-gradient(44% 50% at -3% 100%, oklch(96% .025 92 / .5) 0%, transparent 60%),
    var(--spark-light),
    radial-gradient(circle, oklch(62% .055 145 / .11) 3px, transparent 3.5px);
}
.how {
  background-color: var(--cream);
  background-image:
    radial-gradient(42% 48% at 100% 0%, oklch(83% .06 155 / .48) 0%, transparent 60%),
    radial-gradient(44% 50% at 0% 100%, oklch(91% .045 18 / .58) 0%, transparent 60%),
    var(--spark-light),
    radial-gradient(circle, oklch(70% .05 45 / .10) 3px, transparent 3.5px);
}

.edge-scallop { position: relative; }

/* Floating hand-drawn doodles (loops, squiggles, stars, bursts) read as amateur,
   so they're gone — depth now comes from the layered section backgrounds above.
   Keep ONLY the two doodles anchored to real content: the sparkle punctuating
   "just for you." and the heart on the order box. */
.doodle:not(.dood-e):not(.dood-box) { display: none; }

/* Film grain: a fixed, ultra-low-opacity noise wash that breaks the flatness and
   reads as premium print texture. Compositor-cheap, pointer-events none. */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion: reduce) { body::after { display: none; } }

/* two-row counter-scrolling marquee */
.marquee--two { padding-block: .55rem; }
.marquee-track.rev { animation-direction: reverse; }
.marquee--two .marquee-track.rev span { color: var(--butter); }

/* steps are cards now (see .step) — kept on a single straight baseline */

/* gallery photos: a single smooth, uniform lift on hover (no choppy ambient float) */

/* box delight: empty doodle, filled pulse, total bump, arrival flash, success */
.box-empty-art { display: block; width: 52px; height: 52px; margin: 0 auto .5rem; color: var(--berry-deep); opacity: .5; }
/* heart bump that PRESERVES its base 12deg tilt (the shared `bump` reset to
   scale(1) and snapped the tilt back on finish) */
@keyframes heartbump { 0%, 100% { transform: rotate(12deg) scale(1); } 45% { transform: rotate(5deg) scale(1.45); } }
.box-card.has-items .dood-box { animation: heartbump .5s var(--ease); }
.box-amount.bump { display: inline-block; animation: bump .45s var(--ease); }
@keyframes arrive { 0%, 100% { box-shadow: 8px 8px 0 var(--ink); } 45% { box-shadow: 8px 8px 0 var(--ink), 0 0 0 7px var(--butter); } }
.box-card.arrive { animation: arrive .75s var(--ease-s); }
.box-done .dood-done { display: block; width: 50px; height: 50px; margin: 0 auto .5rem; color: var(--berry); }
.box-done .btn { margin-top: 1rem; }
.box-form label small { font-weight: 600; text-transform: none; letter-spacing: 0; opacity: .65; }

/* fly-to-box chip */
.fly { position: fixed; z-index: 80; pointer-events: none; font-family: var(--loud); font-size: 1.05rem; color: #fff; background: var(--berry-deep); border: 2.5px solid var(--ink); border-radius: 999px; padding: .08rem .7rem; box-shadow: 3px 3px 0 var(--ink); will-change: transform, opacity; transition: transform .55s var(--ease-s), opacity .55s ease; }

/* footer CTA idle wobble */
@keyframes wobble { 0%, 100% { transform: rotate(-1.5deg); } 50% { transform: rotate(1.5deg); } }
.foot-btn { animation: wobble 5s ease-in-out infinite; }
.foot-btn:hover { animation: none; }

/* "Now taking orders!" badge — alive, because it's the headline news */
@keyframes kickerBob { 0%, 100% { transform: rotate(-2.5deg) translateY(0); } 50% { transform: rotate(-1.2deg) translateY(-5px); } }
@keyframes kickerGlow { 0%, 100% { box-shadow: 3px 3px 0 var(--ink); } 50% { box-shadow: 3px 3px 0 var(--ink), 0 0 18px 4px oklch(90% .15 92 / .6); } }
@keyframes kickerSpark { 0%, 100% { transform: scale(1) rotate(0deg); } 50% { transform: scale(1.3) rotate(28deg); } }
.hero-kicker { animation: kickerBob 2.6s ease-in-out infinite, kickerGlow 2.6s ease-in-out infinite; will-change: transform; }
.hero-kicker .ic { animation: kickerSpark 1.3s ease-in-out infinite; transform-origin: center; }

/* "most loved" sticker on a flavor */
.muf-badge { display: inline-block; font-family: var(--script); font-size: .9rem; line-height: 1; color: var(--ink); background: var(--butter); border: 2px solid var(--ink); border-radius: 999px; padding: .05rem .55rem; margin-left: .5rem; transform: rotate(-4deg); box-shadow: 2px 2px 0 var(--ink); vertical-align: middle; }

/* bigger touch target for remove without growing the glyph */
.bi-rm { position: relative; }
.bi-rm::before { content: ""; position: absolute; inset: -9px; }

/* sticky mobile order bar */
.order-bar { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 70; display: none; align-items: center; gap: .6rem; background: var(--berry-deep); color: #fff; text-decoration: none; border: 2.5px solid var(--ink); border-radius: 999px; box-shadow: 4px 4px 0 var(--ink); padding: .5rem .65rem .5rem .55rem; font-weight: 800; }
.order-bar.is-shown { display: flex; animation: pop .3s var(--ease); }
@media (min-width: 941px) { .order-bar.is-shown { display: none; } }
.order-bar-count { min-width: 2rem; height: 2rem; display: grid; place-items: center; background: var(--butter); color: var(--ink); border: 2px solid var(--ink); border-radius: 999px; font-variant-numeric: tabular-nums; font-weight: 900; }
.order-bar-label { font-size: .9rem; }
.order-bar-total { margin-left: auto; font-family: var(--loud); font-size: 1.35rem; }
.order-bar-go { display: inline-flex; align-items: center; gap: .25rem; font-size: .85rem; }
.order-bar-go .ic { width: 1em; height: 1em; }

/* visually-hidden live region */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* perf: trim perpetual motion on phones (most visitors), where it matters most */
@media (max-width: 620px) { .dood-a, .dood-c, .dood-d, .dood-f1, .foot-btn { animation: none !important; } }

/* drop the free-floating corner doodles that read as "tacked on" */
.dood-c, .dood-d { display: none; }

/* ===================================================================
   ORDER OPTIONS — gluten-free toggle + pickup/delivery (theme-agnostic)
   =================================================================== */
/* per-line gluten-free chip — pick which items are GF, not the whole order */
.bi-gf {
  display: flex; width: fit-content; align-items: center; gap: .2rem; margin-top: 5px;
  padding: .08rem .5rem; font-family: var(--body); font-weight: 700; font-size: .72rem; line-height: 1.45;
  color: oklch(52% .03 30); background: transparent; border: 1.5px dashed currentColor;
  border-radius: 999px; cursor: pointer; transition: color .15s, background .15s, border-color .15s;
}
.bi-gf:hover { color: var(--berry-deep); }
.bi-gf:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--berry-deep); }
.bi-gf[aria-pressed="true"] { color: oklch(38% .08 150); background: var(--sage); border-style: solid; border-color: oklch(72% .09 150); }

/* delivery note under the total */
.box-deliv { margin: .4rem 0 0; font-size: .78rem; font-weight: 700; color: var(--berry-deep); text-align: right; }
.box-deliv[hidden] { display: none; }

.seg { border: 0; padding: 0; margin: .9rem 0 0; min-inline-size: 0; }
.seg legend { font-weight: 800; font-size: .78rem; letter-spacing: .02em; padding: 0; margin-bottom: .35rem; }
.seg-row { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.seg-opt { position: relative; }
.seg-opt input { position: absolute; inset: 0; opacity: 0; cursor: pointer; margin: 0; }
.seg-opt span { display: flex; align-items: center; justify-content: center; gap: .35rem;
  padding: .6rem; min-height: 44px; font-weight: 800; font-size: .92rem; color: var(--ink);
  background: var(--cream); border: 2.5px solid var(--ink); border-radius: 14px;
  box-shadow: 2px 2px 0 var(--ink); transition: transform .12s, background .15s, box-shadow .12s; }
.seg-opt input:hover + span { transform: translate(-1px,-1px); box-shadow: 3px 3px 0 var(--ink); }
.seg-opt input:checked + span { background: var(--berry-deep); color: #fff; }
.seg-opt input:focus-visible + span { outline: none; box-shadow: 4px 4px 0 var(--berry-deep); }
.seg-opt input:active + span { transform: translate(1px,1px); box-shadow: 1px 1px 0 var(--ink); }

/* ===================================================================
   LIGHT PINK BOUTIQUE — toned-down variant the client preferred (softer,
   lighter, calmer). Overrides the bold pop-art layer above. Delete this
   whole block to restore the bold strawberry version.
   =================================================================== */
:root {
  /* Vibrant blush-rose: cottagecore softness but more saturated + modern/chic,
     tuned to sit with the high-saturation photography. Two accents: rose + honey,
     anchored by a warm deep plum. */
  --berry:      oklch(61% 0.165 14);   /* vibrant rose */
  --berry-deep: oklch(48% 0.175 16);   /* rich raspberry — buttons + links */
  --cream:      oklch(97% 0.016 28);   /* warm white */
  --cream-2:    oklch(94% 0.028 22);
  --butter:     oklch(87% 0.115 86);   /* rich honey / gold */
  --sage:       oklch(85% 0.038 150);  /* retired — kept so any stray ref still resolves */
  --blush:      oklch(92% 0.058 12);   /* saturated soft pink */
  --ink:        oklch(32% 0.045 24);   /* warm deep plum — text/anchor */
  --line:       oklch(84% 0.04 16);    /* warm rose hairline */
  --pink:       oklch(93% 0.055 10);   /* pink hero top */
  --pink-2:     oklch(87% 0.082 13);   /* rich pink footer / box */
}

/* calmer: kill grain, star scatter, marquee, and ambient motion */
body::after { display: none; }
.hero::before, .footer::before { display: none; }
.marquee { display: none; }
.hero-kicker, .hero-kicker .ic, .foot-btn { animation: none; }

/* hero: soft pink to cream, dark ink text */
.hero { background: linear-gradient(180deg, var(--pink) 0%, var(--cream) 100%); color: var(--ink); }
.hero-h .loud { color: var(--ink); text-shadow: none; }
.hero-h .script { color: var(--berry); }
.hero-lead { color: oklch(44% .035 22); }
.hero-kicker { background: var(--butter); color: var(--ink); }
.btn-ghost { color: var(--ink); border-color: var(--ink); box-shadow: 4px 4px 0 var(--ink); }
.btn-ghost:hover { box-shadow: 6px 6px 0 var(--ink); }

/* clean, simple section fills (no blobs / stars / dots) */
.bakes { background: var(--cream); }
.gallery { background: var(--blush); }
.story { background: var(--cream-2); }
.how { background: var(--blush); }
.cake { background: var(--blush); }
.box-card { background: var(--pink-2); }
.step-no { background: var(--berry-deep); }

/* footer: soft cream to pink, dark ink text */
.footer { background: linear-gradient(180deg, var(--cream) 0%, var(--pink-2) 100%); color: var(--ink); }
.foot-script { color: var(--berry); }
.foot-h { color: var(--ink); text-shadow: none; }
.foot-base { border-top-color: var(--line); }
.foot-base p { color: oklch(46% .03 22); }
.foot-base a, .foot-credit a { color: var(--berry-deep); }

/* cottagecore softening: swap the hard pop-art "sticker" shadows on the big
   surfaces for soft diffuse ones, thin a couple heavy outlines, and keep the
   fine print legible on the muted palette. */
.sticker img, .ph, .ph:nth-child(3), .box-card, .cake, .foot-logo {
  box-shadow: 0 7px 18px oklch(38% .06 24 / .17);
}
.step-no, .st-tag, .muf-badge { box-shadow: 0 3px 8px oklch(38% .06 24 / .16); }
.step { box-shadow: 0 5px 14px oklch(38% .06 24 / .14); }
.step:hover { box-shadow: 0 9px 22px oklch(38% .06 24 / .2); }
.box-card, .cake, .ph { border-width: 2px; }
.foot-fine, .foot-credit { color: oklch(42% .035 24) !important; }
.bi-gf { color: oklch(46% .04 28); }

/* palette cohesion: TWO accents only — dusty rose (primary) + honey (warm
   highlight). Drop the one-off sage and stop the rainbow (step numbers were
   rose/honey/sage/blush; sticker tags + the GF chip were their own colors). */
.step-no,
.step:nth-child(2) .step-no,
.step:nth-child(3) .step-no,
.step:nth-child(4) .step-no { background: var(--berry-deep); color: var(--cream); }
.st-2 .st-tag, .st-3 .st-tag { background: var(--butter); }
.bi-gf[aria-pressed="true"] { color: #fff; background: var(--berry-deep); border-color: var(--berry-deep); }

/* lift photo saturation a touch so the food pops with the more vibrant palette */
.sticker img, .ph img, .story-photo img { filter: saturate(1.1); }

/* confetti burst on a placed order */
.confetti-bit { position: fixed; z-index: 95; width: 9px; height: 14px; border-radius: 2px; pointer-events: none; will-change: transform, opacity; }

/* decorative loop+sparkle flourishes are a desktop nicety - keep phones clean
   so a doodle can never land on a heading where the layout is tight */
@media (max-width: 760px) { .dood-b, .dood-f1, .dood-f2, .dood-f3, .dood-gal, .dood-gal2, .dood-gal3, .dood-story { display: none; } }

/* logo in the top header */
.brand-logo { width: 46px; height: 46px; flex: none; border-radius: 50%; border: 2.5px solid var(--ink); background: #fff; box-shadow: 2px 2px 0 var(--ink); }
.brand-text { display: flex; flex-direction: column; }