/* steveO's cOOkies — site styles v0.2 (post-crit). Tokens: brand/TOKENS.md (Canva kit kAHCEJ5Tjww)
   Fonts load via <link> in each page head (no @import — render-blocking waterfall). */

:root {
  --navy: #2b3767;
  --powder: #a8eefe;
  --mid-blue: #55a0c6;
  --light-blue: #6cb0d1;
  --cream: #fde0c1;
  --off-white: #fefdfd;
  --slate: #626788;
  --periwinkle: #b5bbd7;
  --display: 'Londrina Solid', cursive;
  --body: 'Montserrat', sans-serif;
  --radius: 14px;
  --pill: 999px;
  --nav-h: 58px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* overflow-x: clip (not hidden) kills sideways scroll from tilted/absolute decor without breaking position:sticky */
html, body { overflow-x: clip; }
body { margin: 0; font-family: var(--body); color: var(--navy); background: var(--off-white); font-size: 16px; }
img { max-width: 100%; display: block; }

/* a11y */
.skip-link { position: absolute; left: -9999px; top: 0; background: var(--navy); color: var(--off-white); padding: 10px 18px; z-index: 200; border-radius: 0 0 10px 0; }
.skip-link:focus { left: 0; }
a:focus-visible, button:focus-visible, .btn:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--navy); outline-offset: 3px; border-radius: 4px;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  /* MOTION VARIANT: belt-and-suspenders for additions below — the universal
     rule above already kills all animation/transition, but ticker markup
     duplicates content for the loop, so collapse that duplicate to a plain
     static wrapped list instead of a long unreadable double row. */
  .ticker-track { flex-wrap: wrap; width: auto; justify-content: center; }
  .ticker-group.dup { display: none; }
  .js-reveal { opacity: 1 !important; translate: 0 !important; rotate: 0deg !important; scale: 1 !important; }
}
summary:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; border-radius: 4px; }

/* nav */
.nav { position: sticky; top: 0; z-index: 50; background: var(--off-white); border-bottom: 2px solid var(--powder); display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 20px; min-height: var(--nav-h); flex-wrap: wrap; }
.nav .wordmark { font-family: var(--display); font-size: 22px; color: var(--navy); text-decoration: none; white-space: nowrap; }
.nav .links { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.nav .links a { font-size: 14px; font-weight: 600; color: var(--navy); text-decoration: none; padding: 4px 2px; }
.nav .links a:hover { text-decoration: underline; text-underline-offset: 4px; }
.nav .links a.cta { background: var(--navy); color: var(--off-white); font-family: var(--display); font-weight: 400; font-size: 16px; padding: 8px 20px; border-radius: var(--pill); }
.nav .links a.cta:hover { transform: rotate(-2deg) scale(1.04); text-decoration: none; }
@media (max-width: 480px) {
  .nav { padding: 8px 12px; }
  .nav .links { gap: 10px; }
  .nav .links a { font-size: 13px; }
}

/* this-week banner */
.week-banner { background: var(--navy); color: var(--off-white); text-align: center; font-size: 14px; padding: 9px 16px; line-height: 1.5; }
.week-banner b { font-family: var(--display); font-weight: 400; letter-spacing: .04em; }
.week-banner a { color: var(--powder); }

/* hero */
.hero { position: relative; padding: 56px 20px 48px; overflow: hidden; background: repeating-conic-gradient(from 0deg at 50% 130%, var(--powder) 0deg 11deg, var(--light-blue) 11deg 22deg); }
.hero-grid { max-width: 1020px; margin: 0 auto; display: grid; grid-template-columns: 1.15fr 1fr; gap: 36px; align-items: center; }
.hero-copy { text-align: left; }
.hero .block { display: inline-block; background: var(--navy); color: var(--off-white); font-family: var(--display); font-size: clamp(28px, 4.6vw, 46px); line-height: 1.05; padding: 12px 24px; margin: 5px 0; transform: rotate(-2deg); text-transform: uppercase; }
.hero .block.b2 { transform: rotate(1.6deg); }
/* solid panel behind the intro: the ray bands made bare 400-weight text swim */
.hero .sub { max-width: 44ch; margin: 20px 0 24px; font-size: 16px; font-weight: 500; line-height: 1.6; background: var(--off-white); padding: 14px 18px; border-radius: var(--radius); box-shadow: 0 4px 12px rgba(43,55,103,.16); transform: rotate(-.6deg); display: inline-block; }
.hero .handle { margin-top: 22px; font-size: 13px; letter-spacing: .16em; font-weight: 700; text-transform: uppercase; }
/* carousel: cookie variety front and center (per 7/7 meeting) */
.carousel { position: relative; aspect-ratio: 4/3; border-radius: var(--radius); overflow: hidden; transform: rotate(2deg); box-shadow: 0 10px 26px rgba(43,55,103,.28); border: 6px solid var(--off-white); }
.carousel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; animation: heroFade 20s infinite; }
.carousel img:nth-child(1) { animation-delay: 0s; }
.carousel img:nth-child(2) { animation-delay: 4s; }
.carousel img:nth-child(3) { animation-delay: 8s; }
.carousel img:nth-child(4) { animation-delay: 12s; }
.carousel img:nth-child(5) { animation-delay: 16s; }
@keyframes heroFade { 0% {opacity:0} 4% {opacity:1} 20% {opacity:1} 26% {opacity:0} 100% {opacity:0} }
.carousel .caption { position: absolute; left: 12px; bottom: 12px; z-index: 2; background: var(--navy); color: var(--off-white); font-family: var(--display); font-size: 15px; padding: 5px 14px; border-radius: 4px; transform: rotate(-2deg); }
@media (prefers-reduced-motion: reduce) { .carousel img { animation: none; } .carousel img:first-child { opacity: 1; } }
@media (max-width: 760px) { .hero-grid { grid-template-columns: 1fr; gap: 26px; } .hero-copy { text-align: center; } .hero .sub { margin: 20px auto 24px; } }
/* mascot: mini meme-like presence (full scroll animation = phase 2, pending Steve's asset email) */
.mascot { position: absolute; right: 26px; bottom: -6px; z-index: 3; display: flex; align-items: flex-end; gap: 10px; pointer-events: none; }
.mascot img { height: 205px; width: auto; filter: drop-shadow(0 10px 14px rgba(43,55,103,.35)); transform: rotate(1deg); }
.mascot .bubble { position: relative; background: var(--off-white); color: var(--navy); font-family: var(--display); font-size: 15px; line-height: 1.35; border-radius: 14px; padding: 10px 14px; max-width: 170px; margin-bottom: 130px; box-shadow: 0 4px 12px rgba(43,55,103,.25); transform: rotate(-2deg); }
.mascot .bubble::after { content: ""; position: absolute; right: 22px; bottom: -8px; width: 0; height: 0; border-left: 9px solid transparent; border-right: 4px solid transparent; border-top: 9px solid var(--off-white); }
@media (max-width: 1080px) { .mascot { display: none; } }

.btn { display: inline-block; font-family: var(--display); font-size: 19px; letter-spacing: .02em; background: var(--navy); color: var(--off-white); text-decoration: none; border: none; border-radius: var(--pill); padding: 13px 30px; cursor: pointer; transition: transform .15s ease, scale .15s ease; text-transform: uppercase; }
.btn.secondary { background: var(--off-white); color: var(--navy); border: 2px solid var(--navy); }
.btn.warm { background: var(--cream); color: var(--navy); }
.btn:hover { transform: rotate(-1.5deg) translateY(-2px); }

/* sections */
main { display: block; }
.section { padding: 56px 20px; max-width: 980px; margin: 0 auto; }
.section h1, .section h2 { font-family: var(--display); margin: 0 0 8px; text-transform: uppercase; }
.section h1 { font-size: clamp(30px, 5.5vw, 42px); }
.section h2 { font-size: clamp(26px, 4.5vw, 34px); }
.section h3 { font-family: var(--display); font-size: clamp(19px, 3vw, 23px); margin: 0 0 6px; text-transform: uppercase; }
/* kicker = tilted navy chip: carries the block language through the whole site (mixed case, capital-O visible) */
.kicker { display: inline-block; background: var(--navy); color: var(--off-white); font-family: var(--display); font-size: 15px; letter-spacing: .06em; padding: 5px 14px; border-radius: 4px; transform: rotate(-2deg); margin-bottom: 10px; }
.section.tint { background: var(--powder); max-width: none; }
.section.tint > .inner { max-width: 980px; margin: 0 auto; }
.section.tint.rays { background: repeating-conic-gradient(from 0deg at 110% -20%, var(--powder) 0deg 14deg, #b9f0ff 14deg 28deg); }

/* trust strip: same tilted-pill language as .venue, kept to one line per chip so it never needs to shrink */
.trust-strip { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; max-width: 980px; margin: 34px auto 0; padding: 0 20px; }
.trust-strip .stat { background: var(--off-white); border: 2px solid var(--navy); border-radius: var(--pill); font-family: var(--display); font-size: 16px; padding: 8px 20px; transform: rotate(-1deg); text-align: center; }
.trust-strip .stat:nth-child(2n) { transform: rotate(1.2deg); background: var(--cream); }
@media (max-width: 760px) { .trust-strip { gap: 10px; margin-top: 26px; } .trust-strip .stat { font-size: 15px; padding: 7px 16px; } }
@media (max-width: 480px) { .trust-strip { gap: 8px; } .trust-strip .stat { font-size: 14px; padding: 6px 14px; } }

/* story */
.story { display: grid; grid-template-columns: 300px 1fr; gap: 32px; align-items: center; }
.story .portrait { border-radius: var(--radius); overflow: hidden; transform: rotate(-2deg); box-shadow: 0 6px 18px rgba(43,55,103,.2); }
.story .portrait img { aspect-ratio: 4/5; object-fit: cover; width: 100%; }
.story p { line-height: 1.7; font-size: 16px; }
/* "the rest of the stOry" — collapsed by default on every viewport, so the always-visible copy
   above it stays a 2-sentence teaser and mobile never sees a wall of text. Native <details>,
   no JS: same behavior at every breakpoint on purpose (simplest thing that can't drift). */
.story details.more { margin-top: 14px; }
.story details.more summary { cursor: pointer; font-family: var(--display); font-size: 15px; color: var(--navy); list-style: none; display: inline-block; background: var(--cream); padding: 6px 16px; border-radius: var(--pill); transform: rotate(-1deg); }
.story details.more summary::-webkit-details-marker { display: none; }
.story details.more summary::marker { content: ""; }
.story details.more[open] summary { margin-bottom: 12px; }
.story details.more p { margin: 0 0 12px; }
.story details.more p:last-child { margin-bottom: 0; }
@media (max-width: 700px) { .story { grid-template-columns: 1fr; } .story .portrait { max-width: 320px; } }
@media (max-width: 480px) { .story p { font-size: 15px; } .story details.more summary { font-size: 14px; padding: 5px 14px; } }

/* wide photo strip */
.photo-strip { max-width: 980px; margin: 0 auto; padding: 0 20px; }
.photo-strip img { border-radius: var(--radius); width: 100%; aspect-ratio: 21/9; object-fit: cover; box-shadow: 0 6px 18px rgba(43,55,103,.18); }

/* flavor grid */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; margin-top: 24px; }
.card { background: var(--off-white); border-radius: var(--radius); overflow: hidden; box-shadow: 0 4px 14px rgba(43,55,103,.14); transition: transform .15s ease; border: none; text-align: left; padding: 0; font-family: var(--body); color: var(--navy); }
.card:hover, .card:focus-visible { transform: translateY(-4px) rotate(-.5deg); }
.card .photo { aspect-ratio: 4/3; background: var(--cream); overflow: hidden; }
.card .photo img { width: 100%; height: 100%; object-fit: cover; }
.card .photo.empty { display: flex; align-items: center; justify-content: center; color: var(--navy); font-size: 13px; }
.card .name { font-family: var(--display); font-size: 22px; padding: 12px 14px 2px; }
.card .desc { font-size: 14px; color: var(--slate); padding: 0 14px 12px; line-height: 1.5; }
.card .price { font-weight: 700; font-size: 14px; padding: 0 14px 14px; }
.card .tag { display: inline-block; margin: 10px 0 0 14px; background: var(--navy); color: var(--off-white); border-radius: var(--pill); font-size: 11px; font-weight: 600; padding: 4px 12px; letter-spacing: .05em; transform: rotate(-2deg); }
.card .tag.season { background: var(--mid-blue); }
button.card { cursor: pointer; width: 100%; }

/* testimonials */
.quotes { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; margin-top: 24px; }
.quote { background: var(--off-white); border-radius: var(--radius); padding: 20px; box-shadow: 0 4px 14px rgba(43,55,103,.10); }
.quote p { font-style: italic; font-size: 15px; line-height: 1.6; margin: 0 0 10px; }
.quote .who { font-size: 12px; font-weight: 700; color: var(--navy); letter-spacing: .06em; text-transform: uppercase; }

/* find us / events */
.venues { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 18px; }
.venue { background: var(--off-white); border: 2px solid var(--navy); border-radius: var(--pill); font-family: var(--display); font-size: 16px; padding: 8px 20px; transform: rotate(-1deg); }
.venue:nth-child(2n) { transform: rotate(1.2deg); background: var(--cream); }

/* how the cOOkie drOps: 3-step process */
.drop-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 26px; }
.step { position: relative; background: var(--off-white); border-radius: var(--radius); padding: 24px 20px; box-shadow: 0 4px 14px rgba(43,55,103,.14); text-align: left; }
.step-num { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; background: var(--navy); color: var(--off-white); font-family: var(--display); font-size: 20px; box-shadow: 0 4px 10px rgba(43,55,103,.25); margin-bottom: 12px; }
.step:nth-child(1) .step-num { transform: rotate(-6deg); }
.step:nth-child(2) .step-num { transform: rotate(4deg); }
.step:nth-child(3) .step-num { transform: rotate(-3deg); }
.step h3 { margin: 0 0 6px; }
.step p { font-size: 14px; line-height: 1.6; color: var(--slate); margin: 0; }
/* mascot guides step 2 — sized/positioned so it never overlaps the copy at any width */
.step.has-mascot { padding-right: 84px; }
.step-mascot { position: absolute; top: 14px; right: 12px; height: 64px; width: auto; filter: drop-shadow(0 6px 10px rgba(43,55,103,.3)); transform: rotate(4deg); }
@media (max-width: 760px) {
  /* steps stack; numbered chips keep their full size and tilt so they still read as a sequence */
  .drop-steps { grid-template-columns: 1fr; gap: 16px; }
  .step { padding: 20px 18px; }
  .step.has-mascot { padding-right: 76px; }
}
@media (max-width: 480px) {
  .step-num { width: 40px; height: 40px; font-size: 18px; }
  .step h3 { font-size: 19px; }
  .step p { font-size: 14px; }
  .step-mascot { height: 52px; top: 12px; right: 10px; }
  .step.has-mascot { padding-right: 64px; }
}

/* order strip */
.order-strip { text-align: center; }
.order-strip .ways { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 22px; }
.order-note { max-width: 58ch; margin: 14px auto 0; font-size: 12.5px; line-height: 1.55; font-weight: 400; opacity: .82; }
.section.tint .order-note, .section.tint .sub { color: var(--navy); }

/* forms */
.form { max-width: 560px; margin: 24px auto 0; display: grid; gap: 14px; text-align: left; }
.form label { font-size: 13px; font-weight: 600; display: grid; gap: 6px; }
.form input, .form select, .form textarea { font-family: var(--body); font-size: 16px; padding: 11px 12px; border: 2px solid var(--navy); border-radius: 10px; background: var(--off-white); color: var(--navy); }
.form input:focus, .form select:focus, .form textarea:focus { outline: 3px solid var(--mid-blue); outline-offset: 1px; }
.form .fallback { font-size: 13px; line-height: 1.6; margin-top: 2px; }
.notice { background: var(--cream); border-radius: var(--radius); padding: 14px 18px; font-size: 14px; line-height: 1.6; max-width: 560px; margin: 20px auto 0; text-align: left; }
.confirm { display: none; background: var(--navy); color: var(--off-white); border-radius: var(--radius); padding: 16px 20px; font-size: 15px; line-height: 1.6; max-width: 560px; margin: 18px auto 0; }
.confirm.show { display: block; }
.confirm a { color: var(--powder); }

/* faq */
.faq { max-width: 720px; margin: 20px auto 0; text-align: left; }
.faq details { background: var(--off-white); border-radius: var(--radius); box-shadow: 0 3px 10px rgba(43,55,103,.10); margin-bottom: 10px; padding: 4px 18px; }
.faq summary { font-weight: 700; font-size: 15px; padding: 12px 0; cursor: pointer; }
.faq summary:hover { color: var(--mid-blue); }
.faq p { font-size: 14px; line-height: 1.65; margin: 0 0 14px; color: var(--slate); }

/* anchor offset under sticky nav */
#order, #faq, #find-us { scroll-margin-top: calc(var(--nav-h) + 14px); }

/* gallery lightbox (dialog) */
.lightbox { position: fixed; inset: 0; background: rgba(43,55,103,.88); display: none; align-items: center; justify-content: center; z-index: 100; padding: 24px; }
.lightbox.open { display: flex; }
body.no-scroll { overflow: hidden; }
.lightbox .frame { background: var(--off-white); border-radius: var(--radius); max-width: 560px; width: 100%; padding: 20px; text-align: center; }
.lightbox .frame .photo { aspect-ratio: 4/3; background: var(--cream); border-radius: 10px; overflow: hidden; }
.lightbox .frame .photo img { width: 100%; height: 100%; object-fit: cover; }
.lightbox .frame h3 { font-family: var(--display); font-size: 26px; margin: 12px 0 4px; }
.lightbox .frame p { font-size: 14px; color: var(--slate); margin: 0 0 14px; }
.lightbox .close { position: absolute; top: 18px; right: 22px; background: var(--off-white); color: var(--navy); border: none; border-radius: var(--pill); font-size: 15px; font-weight: 700; padding: 8px 14px; cursor: pointer; }

/* footer */
.footer { background: var(--navy); color: var(--off-white); padding: 34px 20px; font-size: 13px; line-height: 1.65; margin-top: 56px; }
.footer .row { display: flex; gap: 24px; flex-wrap: wrap; justify-content: space-between; max-width: 980px; margin: 0 auto; }
.footer a { color: var(--powder); }
.footer .cottage { display: block; max-width: 980px; margin: 16px auto 0; font-size: 10.5px; letter-spacing: .01em; color: rgba(254,253,253,.55); }


/* ============================================================
   MOTION VARIANT — scroll reveal, ticker, hover/press upgrades,
   hero signature moment, mobile mascot. See NOTES.md for rationale.
   Everything below uses transform/opacity/translate/rotate/scale
   only — no layout properties — so it's 60fps- and reflow-safe.
   All of it is already covered by the global prefers-reduced-motion
   rule above except the ticker duplicate + reveal-visibility
   belt-and-suspenders, which are handled inside that same block.
   ============================================================ */

/* --- 1. Scroll reveal (class added by js/motion.js via IntersectionObserver) ---
   Uses standalone `translate`/`rotate` properties (not `transform`) so this
   never fights with .card's existing hover `transform` — both apply at once. */
.js-reveal {
  opacity: 0;
  translate: 0 26px;
  rotate: -2.5deg;
  transition: opacity .55s ease, translate .55s cubic-bezier(.22,.9,.32,1), rotate .55s cubic-bezier(.22,.9,.32,1);
  will-change: opacity, translate, rotate;
}
.js-reveal.is-visible { opacity: 1; translate: 0 0; rotate: 0deg; }
/* No-JS fallback: .js-reveal is only ever added by script, so if JS doesn't
   run, elements simply never get the class and render normally at opacity:1. */

/* gentle stagger for grid cards so a batch doesn't reveal as one flat sheet */
.grid .card:nth-child(1) { transition-delay: 0ms; }
.grid .card:nth-child(2) { transition-delay: 60ms; }
.grid .card:nth-child(3) { transition-delay: 120ms; }
.grid .card:nth-child(4) { transition-delay: 180ms; }
.grid .card:nth-child(n+5) { transition-delay: 220ms; }

@media (max-width: 760px) {
  /* smaller travel distance + snappier timing so reveals read as a soft
     settle, not a slow drift, on a phone-height viewport */
  .js-reveal { translate: 0 16px; transition-duration: .42s; }
}
@media (max-width: 480px) {
  .js-reveal { translate: 0 12px; transition-duration: .38s; }
}

/* --- 2. Flavor-name marquee ticker (index.html, between photo-strip and lineup) --- */
.ticker { overflow: hidden; background: var(--navy); padding: 15px 0; }
.ticker-track { display: flex; width: max-content; gap: 30px; animation: tickerScroll 34s linear infinite; }
.ticker:hover .ticker-track, .ticker:focus-within .ticker-track { animation-play-state: paused; }
.ticker-group { display: flex; align-items: center; gap: 30px; flex-shrink: 0; }
.ticker-item { font-family: var(--display); font-size: 21px; color: var(--powder); text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; }
.ticker-sep { color: var(--cream); font-size: 15px; }
@keyframes tickerScroll { from { translate: 0 0; } to { translate: -50% 0; } }

@media (max-width: 760px) {
  .ticker { padding: 11px 0; }
  .ticker-track, .ticker-group { gap: 20px; }
  .ticker-item { font-size: 17px; }
  .ticker-track { animation-duration: 30s; }
}
@media (max-width: 480px) {
  .ticker-track, .ticker-group { gap: 15px; }
  .ticker-item { font-size: 14.5px; letter-spacing: .02em; }
  .ticker-sep { font-size: 12px; }
  .ticker-track { animation-duration: 26s; }
}

/* --- 3. Card hover upgrades (gallery + index lineup) + playful button press --- */
.card .photo img { transition: transform .4s cubic-bezier(.2,.8,.2,1); }
.card:hover .photo img, .card:focus-visible .photo img { transform: scale(1.08); }
.card:hover .tag, .card:focus-visible .tag { animation: tagWiggle .5s ease; }
@keyframes tagWiggle {
  0%, 100% { rotate: -2deg; }
  25% { rotate: 5deg; }
  50% { rotate: -7deg; }
  75% { rotate: 3deg; }
}
/* .tag already sets `transform: rotate(-2deg)`; the wiggle keyframe drives
   the standalone `rotate` property instead so it layers on top rather than
   overwriting the tag's base tilt when the animation ends. */

/* touch devices: no hover to key off, so tap gives the same zoom via :active */
@media (hover: none) {
  .card:active .photo img { transform: scale(1.05); }
  .card:active .tag { animation: tagWiggle .5s ease; }
}

.btn:active { scale: .94; }
/* `scale` is standalone here too, so a press-while-hovered button keeps its
   hover tilt/lift (`transform`) AND gets the extra squash — no fighting. */

/* --- 4. Signature moment: hero blocks settle in on load --- */
.hero .block { --settle-tilt: -2deg; }
.hero .block.b2 { --settle-tilt: 1.6deg; }
.carousel { --settle-tilt: 2deg; }
.mascot img { --settle-tilt: 1deg; }
.mascot .bubble { --settle-tilt: -2deg; }

.hero .block, .carousel, .mascot img, .mascot .bubble {
  animation: heroSettle .65s cubic-bezier(.22,.85,.3,1.2) both;
}
.hero .block { animation-delay: .05s; }
.hero .block.b2 { animation-delay: .18s; }
.carousel { animation-delay: .3s; }
.mascot img { animation-delay: .44s; }
.mascot .bubble { animation-delay: .54s; }

@keyframes heroSettle {
  0% { opacity: 0; transform: translateY(24px) rotate(calc(var(--settle-tilt, 0deg) - 9deg)) scale(.92); }
  100% { opacity: 1; transform: translateY(0) rotate(var(--settle-tilt, 0deg)) scale(1); }
}
/* This targets the same `transform` property the static hero rules already
   set (e.g. `.carousel{transform:rotate(2deg)}`) — the keyframe's 100% value
   matches that static end state exactly via --settle-tilt, so the animation
   is purely additive polish and the resting layout is unchanged. */

/* --- 5. Mobile delight: the desktop mascot hides under 1080px (no room),
   so give phones/tablets their own small, in-flow (non-overlapping) mascot
   + speech bubble under the hero CTA instead of just losing the character. --- */
.mascot-mobile { display: none; }
@media (max-width: 1080px) {
  .mascot-mobile {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    margin: 20px auto 0; opacity: 0; scale: .7;
    animation: mascotPopIn .5s cubic-bezier(.34,1.56,.64,1) .55s forwards;
  }
  .mascot-mobile img { height: 60px; width: auto; transform: rotate(-3deg); filter: drop-shadow(0 6px 10px rgba(43,55,103,.3)); }
  .mascot-mobile .bubble {
    position: relative; background: var(--off-white); color: var(--navy);
    font-family: var(--display); font-size: 13px; line-height: 1.3;
    border-radius: 12px; padding: 8px 13px; max-width: 160px; text-align: left;
    transform: rotate(1.5deg); box-shadow: 0 3px 8px rgba(43,55,103,.22);
  }
}
@keyframes mascotPopIn { to { opacity: 1; scale: 1; } }
@media (max-width: 480px) {
  .mascot-mobile img { height: 50px; }
  .mascot-mobile .bubble { font-size: 12px; max-width: 130px; padding: 7px 11px; }
}
/* `opacity:0; scale:.7` as the pre-animation state (not inside a keyframe
   0%) means a no-animation context (reduced motion, handled by the global
   !important rule above) needs its own visible fallback — added below. */
@media (prefers-reduced-motion: reduce) and (max-width: 1080px) {
  .mascot-mobile { opacity: 1; scale: 1; }
}

/* ===== menu-variant additions ===== */

/* ==========================================================================
   MENU/BROWSING EXPERIMENT — filter chips, seasonal grid label, crave list.
   Mobile is first-class here (chips + tray get touched with thumbs, not clicked).
   ========================================================================== */

/* screen-reader-only utility (used for the filter-result 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; }

/* filter chips */
.filter-chips { display: flex; gap: 10px; margin: 22px 0 4px; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 6px; }
.chip {
  font-family: var(--body); font-weight: 600; font-size: 14px;
  background: var(--off-white); color: var(--navy); border: 2px solid var(--navy);
  border-radius: var(--pill); padding: 12px 20px; min-height: 44px; min-width: 44px;
  flex: 0 0 auto; white-space: nowrap; cursor: pointer;
  transition: transform .15s ease, background .15s ease, color .15s ease;
}
.chip:hover { transform: rotate(-1deg); }
.chip[aria-pressed="true"] { background: var(--navy); color: var(--off-white); }

/* seasonal cluster label — tilted navy-block chip spanning the grid row */
.grid-label {
  grid-column: 1 / -1; justify-self: start;
  font-family: var(--display); font-size: 20px; text-transform: uppercase;
  background: var(--mid-blue); color: var(--off-white);
  padding: 8px 20px; border-radius: 4px; transform: rotate(-1.5deg);
  margin: 18px 0 -2px;
}
.card.hidden, .grid-label.hidden { display: none; }

@media (max-width: 760px) {
  /* Chips: keep the same horizontal-scroll strip, just tighten spacing for narrower columns. */
  .filter-chips { gap: 8px; margin: 18px 0 4px; }
  .grid-label { font-size: 18px; padding: 7px 16px; }
}
@media (max-width: 480px) {
  /* Chips stay ≥44px tall (thumb target) and scroll horizontally rather than wrap —
     wrapping would push the grid down unpredictably on the smallest phones. */
  .filter-chips { gap: 8px; }
  .chip { font-size: 13.5px; padding: 11px 16px; }
  .grid-label { font-size: 16px; padding: 6px 14px; }
}

/* lightbox action row (Request + crave-list add button) */
.frame-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 4px; }
.frame-actions .btn { min-height: 44px; }
@media (max-width: 480px) {
  /* Tighten the lightbox chrome so both actions clear the fold at 375x812 with zero
     scrolling inside the dialog; overflow-y is a safety net for shorter viewports only. */
  .lightbox { padding: 14px; }
  .lightbox .frame { padding: 16px; max-height: calc(100vh - 28px); overflow-y: auto; }
  .lightbox .frame h3 { margin: 10px 0 4px; font-size: 22px; }
  .lightbox .frame p { margin: 0 0 10px; }
  .frame-actions { flex-direction: column; }
  .frame-actions .btn { width: 100%; }
}

/* crave list tray — a wishlist bar, never a cart: no prices, no quantities, no totals */
.crave-tray {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: var(--navy); color: var(--off-white);
  box-shadow: 0 -6px 18px rgba(43,55,103,.25);
  display: none;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.crave-tray.show { display: block; }
.crave-tray-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 16px; }
.crave-toggle {
  background: none; border: none; color: var(--off-white); cursor: pointer;
  font-family: var(--display); font-size: 16px; letter-spacing: .02em;
  display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 4px;
}
.crave-toggle .count {
  background: var(--off-white); color: var(--navy); border-radius: var(--pill);
  font-family: var(--body); font-weight: 700; font-size: 13px; padding: 3px 10px; min-width: 22px; text-align: center;
}
.crave-tray-bar-actions { display: flex; align-items: center; gap: 8px; }
.crave-tray .btn.small { font-family: var(--display); font-size: 14px; padding: 11px 18px; min-height: 44px; white-space: nowrap; }
.crave-dismiss { background: none; border: none; color: var(--off-white); font-size: 16px; cursor: pointer; min-width: 44px; min-height: 44px; }
.crave-tray-body { padding: 0 16px 12px; }
.crave-tray.collapsed .crave-tray-body { display: none; }
.crave-tray .items { display: flex; gap: 8px; flex-wrap: wrap; max-height: 88px; overflow-y: auto; }
.crave-tray .item {
  background: var(--off-white); color: var(--navy); border-radius: var(--pill);
  font-size: 13px; font-weight: 600; padding: 6px 8px 6px 14px;
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
}
.crave-tray .item button { background: none; border: none; color: var(--navy); font-size: 14px; cursor: pointer; min-width: 26px; min-height: 26px; line-height: 1; padding: 2px; }

@media (max-width: 760px) {
  /* Collapsed-by-default feel on tablets/phones: the bar (with count + request button)
     is always visible; only the item pills hide, so the tray stays short. */
  .crave-tray-bar { padding: 8px 14px; flex-wrap: wrap; }
  .crave-tray-body { padding: 0 14px 10px; }
}
@media (max-width: 480px) {
  /* Tray must never eat the grid's last row or the footer: keep the bar to one compact
     row, let "request these" stay reachable without expanding, and cap the item strip
     so it scrolls internally instead of growing the fixed bar's height indefinitely. */
  .crave-tray-bar { padding: 8px 12px; gap: 8px; }
  .crave-toggle { font-size: 14px; }
  .crave-tray .btn.small { padding: 10px 14px; font-size: 13px; }
  .crave-tray .items { max-height: 72px; }
}

/* ===== v0.4 back-half kick-up ===== */
/* build-a-bOx band */
.bab-band { background: var(--navy); color: var(--off-white); padding: 56px 20px; }
.bab-band .inner { max-width: 980px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 36px; align-items: center; }
.bab-band h2 { font-family: var(--display); font-size: clamp(28px, 4.5vw, 38px); margin: 0 0 10px; text-transform: uppercase; color: var(--powder); }
.bab-band p { font-size: 15px; line-height: 1.7; color: var(--off-white); }
.bab-band .kicker { background: var(--cream); color: var(--navy); }
.bab-band .box-visual { border-radius: var(--radius); overflow: hidden; transform: rotate(1.5deg); box-shadow: 0 10px 24px rgba(0,0,0,.3); border: 6px solid var(--off-white); }
.bab-band .btn { background: var(--cream); color: var(--navy); }
.bab-band .price-line { font-family: var(--display); font-size: 19px; color: var(--cream); margin: 12px 0 18px; }
@media (max-width: 760px) { .bab-band .inner { grid-template-columns: 1fr; } }

/* from-the-Oven photo trio */
.oven-trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 24px; }
.oven-trio a { border-radius: var(--radius); overflow: hidden; display: block; box-shadow: 0 5px 16px rgba(43,55,103,.18); transition: transform .15s ease; }
.oven-trio a:nth-child(1) { transform: rotate(-1.4deg); }
.oven-trio a:nth-child(2) { transform: rotate(1deg) translateY(8px); }
.oven-trio a:nth-child(3) { transform: rotate(-.8deg); }
.oven-trio a:hover { transform: rotate(0deg) scale(1.03); }
.oven-trio img { aspect-ratio: 1; object-fit: cover; width: 100%; }
@media (max-width: 600px) { .oven-trio { grid-template-columns: 1fr 1fr; } .oven-trio a:nth-child(3) { display: none; } }

/* testimonials upgraded: tilted pull-quote cards */
.quote { transform: rotate(-.8deg); border-top: 6px solid var(--cream); }
.quote:nth-child(2n) { transform: rotate(.9deg); border-top-color: var(--periwinkle); }
.quote .stars { color: var(--mid-blue); font-size: 15px; letter-spacing: .2em; margin-bottom: 8px; }
.quote p { font-family: var(--display); font-style: normal; font-size: 17px; line-height: 1.45; color: var(--navy); }

/* closing CTA block */
.closing { background: repeating-conic-gradient(from 0deg at 50% -40%, var(--navy) 0deg 12deg, #232c54 12deg 24deg); color: var(--off-white); text-align: center; padding: 72px 20px 0; overflow: hidden; position: relative; }
.closing h2 { font-family: var(--display); font-size: clamp(34px, 6vw, 56px); margin: 0 0 12px; text-transform: uppercase; }
.closing h2 .pop { color: var(--powder); }
.closing p { max-width: 46ch; margin: 0 auto 24px; font-size: 15px; line-height: 1.7; }
.closing .ways { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-bottom: 30px; }
.closing .btn { background: var(--cream); color: var(--navy); }
.closing .btn.secondary { background: transparent; color: var(--off-white); border: 2px solid var(--off-white); }
.closing .character { height: 190px; width: auto; margin: 0 auto; display: block; filter: drop-shadow(0 8px 12px rgba(0,0,0,.4)); }
@media (max-width: 480px) { .closing .character { height: 150px; } }

/* social tiles */
.social-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 24px; max-width: 720px; }
.social-tile { display: grid; gap: 4px; padding: 22px 24px; border-radius: var(--radius); text-decoration: none; box-shadow: 0 5px 16px rgba(43,55,103,.18); transition: transform .15s ease; }
.social-tile:hover { transform: rotate(-1deg) translateY(-3px); }
.social-tile.ig { background: var(--off-white); color: var(--navy); border: 2px solid var(--navy); }
.social-tile.tt { background: var(--navy); color: var(--off-white); }
.social-tile .platform { font-family: var(--display); font-size: 22px; text-transform: uppercase; }
.social-tile .handle { font-weight: 700; font-size: 14px; }
.social-tile.tt .handle { color: var(--powder); }
.social-tile .tag { font-size: 12.5px; opacity: .8; }
@media (max-width: 600px) { .social-tiles { grid-template-columns: 1fr; } }

/* mobile pass: tighter rhythm + component guards */
@media (max-width: 480px) {
  .section { padding: 40px 16px; }
  .hero { padding: 40px 16px 40px; }
  .hero .sub { font-size: 15px; padding: 12px 14px; }
  .week-banner { font-size: 13px; }
  .bab-band { padding: 44px 16px; }
  .closing { padding-top: 56px; }
  .oven-trio a:nth-child(2) { transform: rotate(1deg); }
  .quotes { grid-template-columns: 1fr; }
}
.ticker { overflow: hidden; max-width: 100%; }