/* ============================================================
   THE CAKE SHOP · Wesley Chapel — styles
   Palette from the logo + storefront: pink ground, chocolate
   type, cherry-red calls to action, cream pages.
   Type: --display / --body are swapped by html[data-font] so the
   four bake-off systems can be browsed live (?font=a|b|c|d).
   ============================================================ */
:root {
  --pink: #F7C9E3; --pink-2: #FBE3F1; --pink-3: #FDF1F7; --pink-deep: #EE8FC4; --pink-hot: #E85D9F;
  --choc: #5A3620; --choc-2: #3E2314; --ink: #2B1A12; --ink-soft: #6B4A3A;
  --cherry: #E5232B; --cherry-2: #C8131B; --cream: #FFF7FB; --white: #fff;
  --thistle: #D8BFD8; --plum: #753950; --gold: #C9A35B;
  --line: rgba(90, 54, 32, .14); --line-d: rgba(255, 247, 251, .16);
  --display: 'Alfa Slab One'; --body: 'Rubik'; --display-weight: 400;
  --gutter: clamp(20px, 5vw, 72px); --nav-h: 76px; --radius: 22px; --radius-s: 14px;
  --shadow: 0 30px 60px -34px rgba(62, 35, 20, .55);
  --wrap: 1240px;
}
html[data-font="b"] { --display: 'Chewy'; --body: 'Figtree'; }
html[data-font="c"] { --display: 'Cherry Bomb One'; --body: 'Sen'; }
html[data-font="d"] { --display: 'Fredoka'; --body: 'Karla'; --display-weight: 700; }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: auto; -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body { margin: 0; background: var(--cream); color: var(--ink); font-family: var(--body), system-ui, sans-serif; font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, svg, video, canvas { max-width: 100%; display: block; }
img[width][height] { height: auto; }
a { color: inherit; }
h1, h2, h3, h4 { margin: 0; font-family: var(--display), cursive; font-weight: var(--display-weight); line-height: 1.02; color: var(--choc); text-wrap: balance; }
h2 { font-size: clamp(34px, 4.4vw, 58px); letter-spacing: -.005em; }
h3 { font-size: clamp(22px, 2.3vw, 30px); }
p { margin: 0; }
strong { font-weight: 700; }
.wrap { width: min(var(--wrap), 100% - 2 * var(--gutter)); margin-inline: auto; }
.eyebrow { display: inline-block; font: 700 12px/1 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--plum); margin-bottom: 18px; }
.eyebrow::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--cherry); margin-right: 10px; vertical-align: 1px; }
.lead { font-size: clamp(17px, 1.35vw, 20px); line-height: 1.55; color: var(--ink-soft); max-width: 54ch; }
.num, .price, .hours td, .phone { font-family: var(--body), system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: 12px; top: -70px; background: var(--cherry); color: #fff; padding: 10px 14px; border-radius: 8px; z-index: 100; font-weight: 600; }
.skip-link:focus { top: 12px; }
:focus-visible { outline: 3px solid var(--pink-hot); outline-offset: 3px; }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 15px 26px; border-radius: 999px; background: var(--cherry); color: #fff; font: 700 16px/1 var(--body); text-decoration: none; border: 0; cursor: pointer; transition: background .2s, transform .2s, box-shadow .2s; box-shadow: 0 16px 30px -18px rgba(229, 35, 43, .9); white-space: nowrap; }
.btn:hover { background: var(--cherry-2); transform: translateY(-1px); }
.btn:active { transform: none; }
.btn-choc { background: var(--choc); box-shadow: 0 16px 30px -18px rgba(62, 35, 20, .9); }
.btn-choc:hover { background: var(--choc-2); }
.btn-light { background: #fff; color: var(--choc); box-shadow: 0 16px 30px -22px rgba(62, 35, 20, .6); }
.btn-light:hover { background: var(--pink-2); }
.btn-ghost { background: transparent; color: #fff; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .8); }
.btn-ghost:hover { background: rgba(255, 255, 255, .14); }
.btn-ghost.dark { color: var(--choc); box-shadow: inset 0 0 0 2px var(--choc); }
.btn-ghost.dark:hover { background: rgba(90, 54, 32, .08); }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Loader ---------- */
.loader { position: fixed; inset: 0; z-index: 90; background: var(--pink); display: grid; place-items: center; transition: opacity .6s ease, visibility .6s; }
.loader.done { opacity: 0; visibility: hidden; }
.loader-inner { text-align: center; width: min(300px, 78vw); }
.loader-logo { width: 150px; margin: 0 auto 22px; }
.loader-bar { height: 4px; background: rgba(90, 54, 32, .16); border-radius: 4px; overflow: hidden; }
.loader-bar span { display: block; height: 100%; width: calc(var(--p, 0) * 100%); background: var(--cherry); transition: width .25s ease; }
.loader-note { margin-top: 14px; font: 700 12px/1 var(--body); letter-spacing: .2em; text-transform: uppercase; color: var(--choc); }

/* ---------- Header ---------- */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 60; display: flex; align-items: center; gap: 22px; padding: 12px var(--gutter); height: var(--nav-h); color: #fff; transition: background .35s, box-shadow .35s, color .35s; }
.nav.scrolled, body.light-top .nav { background: rgba(255, 247, 251, .9); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--line); color: var(--choc); }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; margin-right: auto; }
.brand img { width: 52px; height: 52px; border-radius: 50%; box-shadow: 0 6px 18px -8px rgba(0, 0, 0, .5); }
.brand b { font-family: var(--display); font-weight: var(--display-weight); font-size: 21px; letter-spacing: .01em; line-height: 1; }
.brand small { display: block; font: 600 10.5px/1 var(--body); letter-spacing: .18em; text-transform: uppercase; opacity: .85; margin-top: 4px; }
.nav-links { display: flex; gap: 22px; }
.nav-links a { text-decoration: none; font: 600 14px/1 var(--body); letter-spacing: .02em; padding: 8px 0; border-bottom: 2px solid transparent; transition: border-color .2s; opacity: .95; }
.nav-links a:hover, .nav-links a[aria-current="page"] { border-color: var(--cherry); }
.nav .btn { min-height: 46px; padding: 12px 20px; font-size: 15px; }
.nav-toggle { display: none; width: 46px; height: 46px; border: 0; background: rgba(255, 255, 255, .22); border-radius: 12px; cursor: pointer; position: relative; }
.nav.scrolled .nav-toggle, body.light-top .nav-toggle { background: rgba(90, 54, 32, .1); }
.nav-toggle span { position: absolute; left: 12px; right: 12px; height: 2px; background: currentColor; transition: transform .3s, top .3s; top: 17px; }
.nav-toggle span + span { top: 27px; }
.nav-toggle[aria-expanded="true"] span { top: 22px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span + span { transform: rotate(-45deg); }
.mobile-menu { position: fixed; inset: 0; z-index: 55; background: var(--pink); padding: calc(var(--nav-h) + 16px) var(--gutter) 40px; display: flex; flex-direction: column; gap: 4px; transform: translateY(-100%); transition: transform .45s cubic-bezier(.2, .8, .2, 1); overflow: auto; }
.mobile-menu.open { transform: none; }
.mobile-menu > a:not(.btn) { font-family: var(--display); font-weight: var(--display-weight); font-size: 34px; color: var(--choc); text-decoration: none; padding: 10px 0; border-bottom: 1px solid var(--line); }
.mobile-menu .mm-ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.mm-foot { margin-top: 26px; font-size: 14px; color: var(--choc); }
.mm-foot a { margin-right: 14px; }

/* ---------- Awning stripe (brand signature) ---------- */
.awning { height: 34px; background: repeating-linear-gradient(90deg, var(--pink-deep) 0 56px, #fff 56px 112px); position: relative; z-index: 3; }
.awning::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 14px; background: radial-gradient(circle at 28px -2px, transparent 26px, var(--pink-deep) 27px) 0 0 / 112px 14px repeat-x, radial-gradient(circle at 28px -2px, transparent 26px, #fff 27px) 56px 0 / 112px 14px repeat-x; -webkit-mask: radial-gradient(circle at 28px 0, #000 27px, transparent 28px) 0 0 / 56px 14px repeat-x; mask: radial-gradient(circle at 28px 0, #000 27px, transparent 28px) 0 0 / 56px 14px repeat-x; }
.awning.thin { height: 18px; }

/* ---------- Scroll-scrub scenes ---------- */
.scrub { position: relative; height: 560vh; background: var(--pink); }
.scrub.hero { height: 900vh; }
.scrub.tall { height: 1000vh; }
.stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: var(--pink); }
.stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.stage .poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 1; transition: opacity .4s ease; }
.scrub.has-frame .poster { opacity: 0; }
.stage-shade { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(43, 26, 18, .62) 0%, rgba(43, 26, 18, .3) 24%, rgba(43, 26, 18, 0) 46%),
              linear-gradient(0deg, rgba(43, 26, 18, .62) 0%, rgba(43, 26, 18, 0) 32%),
              linear-gradient(180deg, rgba(43, 26, 18, .5) 0%, rgba(43, 26, 18, 0) 24%); }
.scrub.light .stage-shade { background: linear-gradient(90deg, rgba(255, 247, 251, .82) 0%, rgba(255, 247, 251, .45) 26%, rgba(255, 247, 251, 0) 50%), linear-gradient(0deg, rgba(43, 26, 18, .35) 0%, rgba(43, 26, 18, 0) 26%); }
.reveal-line { position: absolute; opacity: 0; will-change: opacity, transform; max-width: min(560px, 40vw); z-index: 2; isolation: isolate; color: #fff; }
.reveal-line::before { content: ""; position: absolute; inset: -56px -80px; z-index: -1; pointer-events: none; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(43, 26, 18, .72) 0%, rgba(43, 26, 18, .45) 40%, rgba(43, 26, 18, 0) 72%); filter: blur(16px); }
.scrub.light .reveal-line { color: var(--choc); }
.scrub.light .reveal-line::before { background: radial-gradient(ellipse at center, rgba(255, 247, 251, .9) 0%, rgba(255, 247, 251, .7) 40%, rgba(255, 247, 251, 0) 72%); }
.reveal-line h1, .reveal-line h2 { color: inherit; text-shadow: 0 6px 30px rgba(0, 0, 0, .3); }
.scrub.light .reveal-line h1, .scrub.light .reveal-line h2 { text-shadow: none; }
.reveal-line .lead { color: inherit; opacity: .92; margin-top: 16px; }
.reveal-line .eyebrow { color: var(--pink); }
.scrub.light .reveal-line .eyebrow { color: var(--plum); }
.reveal-line .btn-row { margin-top: 22px; }
.reveal-line.ml { left: var(--gutter); top: 50%; transform: translateY(-50%); }
.reveal-line.mr { right: var(--gutter); top: 50%; transform: translateY(-50%); text-align: right; }
.reveal-line.mr .lead { margin-left: auto; }
.reveal-line.mr .btn-row { justify-content: flex-end; }
.reveal-line.center { left: 50%; top: 50%; text-align: center; max-width: min(860px, 88vw); }
.reveal-line.center .lead { margin-inline: auto; }
.reveal-line.center .btn-row { justify-content: center; }
.reveal-line.center.top { top: clamp(110px, 16vh, 170px); transform: translateX(-50%) !important; max-width: min(760px, 80vw); }
.reveal-line.center.low { top: auto; bottom: 9vh; transform: translateX(-50%) !important; }
.hero-title { left: var(--gutter); top: clamp(96px, 15vh, 160px); max-width: min(680px, 46vw); }
.hero-title h1 { font-size: clamp(40px, 5.6vw, 92px); line-height: .98; }
.hero-ctas { left: var(--gutter); bottom: 7vh; max-width: 600px; }
.hero-ctas .lead { margin-top: 0; }
.hero-mid { max-width: min(520px, 40vw); }
.scroll-hint { position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); font: 700 11px/1 var(--body); letter-spacing: .24em; text-transform: uppercase; color: #fff; display: flex; flex-direction: column; align-items: center; gap: 10px; transition: opacity .4s; z-index: 2; text-shadow: 0 2px 10px rgba(0, 0, 0, .4); }
.scroll-hint span { width: 2px; height: 44px; background: linear-gradient(var(--cherry), transparent); animation: hint 1.8s ease-in-out infinite; }
@keyframes hint { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }
.progress { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(255, 255, 255, .25); z-index: 2; }
.progress-fill { height: 100%; width: 0; background: var(--cherry); }
.hours-pill { display: inline-flex; align-items: center; gap: 10px; background: rgba(255, 255, 255, .92); color: var(--choc); border-radius: 999px; padding: 10px 16px; font: 600 14px/1 var(--body); margin-top: 16px; }
.hours-pill i { width: 9px; height: 9px; border-radius: 50%; background: #2fb35b; box-shadow: 0 0 0 4px rgba(47, 179, 91, .22); }
.hours-pill.closed i { background: var(--cherry); box-shadow: 0 0 0 4px rgba(229, 35, 43, .18); }
.static-preview .scrub, .static-preview .scrub.hero, .static-preview .scrub.tall { height: 100vh; }
.static-preview .stage { position: relative; height: 100vh; }
.static-preview .scroll-hint { display: none; }

@media (min-width: 901px) { #slice .reveal-line.ml, #slice .reveal-line.mr { max-width: min(430px, 30vw); } }

/* ---------- Ticker ---------- */
.ticker { background: var(--choc-2); color: var(--pink); overflow: hidden; position: relative; z-index: 3; }
.ticker-track { display: flex; align-items: center; gap: 34px; padding: 15px 0; width: max-content; animation: belt 70s linear infinite; font: 700 15px/1 var(--body); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
.ticker-track svg { width: 16px; height: 16px; flex: none; }
@keyframes belt { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker-track { animation: none; } }

/* ---------- Generic sections ---------- */
section.plain { position: relative; z-index: 3; padding: clamp(80px, 10vw, 140px) 0; }
.sec-head { max-width: 760px; margin-bottom: clamp(34px, 5vw, 60px); }
.sec-head .lead { margin-top: 18px; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 6vw, 96px); align-items: start; }
.sticky-col { position: sticky; top: calc(var(--nav-h) + 24px); }
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .8s cubic-bezier(.2, .8, .2, 1), transform .8s cubic-bezier(.2, .8, .2, 1); }
.reveal.in { opacity: 1; transform: none; }
.reveal:nth-child(2) { transition-delay: .08s; } .reveal:nth-child(3) { transition-delay: .16s; } .reveal:nth-child(4) { transition-delay: .24s; }
.zig { position: relative; display: inline-block; padding-bottom: 12px; }
.zig::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 8px; background: linear-gradient(135deg, transparent 0 25%, var(--pink-deep) 25% 50%, transparent 50% 75%, var(--pink-deep) 75%) 0 0 / 16px 8px; opacity: .9; }

/* Passion (plain, cream) */
.passion { background: var(--cream); }
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 10px; }
.pillar { padding: 28px 0 0; border-top: 2px solid var(--choc); }
.pillar h3 { margin-bottom: 12px; }
.pillar p { color: var(--ink-soft); }
.fact-line { margin-top: clamp(30px, 4vw, 48px); font-family: var(--display); font-weight: var(--display-weight); font-size: clamp(20px, 2.2vw, 30px); color: var(--plum); max-width: 30ch; line-height: 1.2; }

/* Menu highlights (plain, pink) */
.highlights { background: var(--pink-2); }
.menu-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 4vw, 56px); }
.menu-group h3 { font-size: clamp(22px, 2vw, 28px); margin-bottom: 14px; padding-bottom: 12px; border-bottom: 2px solid var(--choc); }
.mrow { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 12px 0; border-bottom: 1px dashed rgba(90, 54, 32, .28); }
.mrow .n { font-weight: 600; font-size: 17px; }
.mrow .d { display: block; font-size: 13.5px; color: var(--ink-soft); font-weight: 400; margin-top: 2px; }
.mrow .price { font-weight: 700; font-size: 17px; color: var(--plum); white-space: nowrap; }
.menu-note { margin-top: 18px; font-size: 14px; color: var(--ink-soft); }

/* Gallery band (cream) */
.cakes { background: var(--cream); }
.cake-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 240px; gap: 14px; }
.cake-grid a { display: block; position: relative; border-radius: var(--radius-s); overflow: hidden; background: var(--pink-2); }
.cake-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2, .8, .2, 1); }
.cake-grid a:hover img { transform: scale(1.05); }
.cake-grid a span { position: absolute; left: 12px; bottom: 12px; background: rgba(255, 247, 251, .92); color: var(--choc); font: 600 12.5px/1 var(--body); padding: 8px 11px; border-radius: 999px; }
.cake-grid .tall { grid-row: span 2; }
.cake-grid .wide { grid-column: span 2; }
.cakes .btn-row { margin-top: 30px; }

/* Weddings (plain, chocolate) */
.weddings { background: var(--choc-2); color: var(--pink-3); }
.weddings h2, .weddings h3 { color: var(--pink); }
.weddings .eyebrow { color: var(--pink-deep); }
.weddings .lead { color: rgba(255, 247, 251, .82); }
.stages { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.stages li { display: grid; grid-template-columns: 200px 1fr; gap: 24px; padding: 22px 0; border-top: 1px solid var(--line-d); }
.stages li:last-child { border-bottom: 1px solid var(--line-d); }
.stage-when { font: 700 12.5px/1.4 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--pink-deep); padding-top: 4px; }
.stages h3 { font-size: 22px; margin-bottom: 6px; }
.stages p { color: rgba(255, 247, 251, .8); font-size: 16px; }
.weddings .btn-row { margin-top: 34px; }

/* Visit (plain, pink) */
.visit { background: var(--pink-2); }
.visit .split { align-items: center; }

/* Reviews (cream) + Instagram (pink) */
.reviews { background: var(--cream); }
.instagram { background: var(--pink-2); }
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.quote { background: #fff; border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 16px; }
.quote p { font-size: 17px; line-height: 1.5; color: var(--ink); }
.quote p::before { content: "“"; font-family: var(--display); color: var(--pink-deep); font-size: 40px; line-height: 0; vertical-align: -14px; margin-right: 4px; }
.quote cite { font-style: normal; font: 600 13px/1.3 var(--body); color: var(--plum); }
.quote cite small { display: block; color: var(--ink-soft); font-weight: 400; margin-top: 3px; }
.ig { margin-top: clamp(50px, 7vw, 90px); }
.ig-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 22px; max-width: 940px; margin-inline: auto; }
/* Six photos read as 3x2 (2x3 on phones) at every width, all tiles 3:4 like the sources so nothing is cropped.
   Width is capped because these are public IG thumbs, only ~360-512px wide: full-bleed 3-up would put them at
   404px, i.e. 2.2x upscale on a retina screen. ~300px keeps them honest. */
.ig-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; max-width: 940px; margin-inline: auto; }
.ig-strip a { display: block; aspect-ratio: 3 / 4; border-radius: 12px; overflow: hidden; background: var(--pink-2); }
/* img[width][height]{height:auto} (the CLS fix) outranks a plain .ig-strip img rule, so any thumb whose
   ratio differs from the tile under-filled it and left a band. Match that specificity here. */
.ig-strip img, .ig-strip img[width][height] { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.ig-strip a:hover img { transform: scale(1.06); }

/* ---------- Footer ---------- */
footer { background: var(--choc-2); color: var(--pink-3); position: relative; z-index: 3; padding: clamp(60px, 8vw, 100px) 0 40px; }
.foot-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.2fr; gap: clamp(28px, 4vw, 60px); }
.foot-brand img { width: 96px; height: 96px; border-radius: 50%; margin-bottom: 18px; }
.foot-brand p { color: rgba(255, 247, 251, .78); max-width: 34ch; font-size: 15px; }
footer h4 { color: var(--pink); font-size: 20px; margin-bottom: 14px; }
footer a { color: var(--pink-3); text-decoration: none; }
footer a:hover { color: #fff; text-decoration: underline; }
.foot-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; font-size: 15.5px; }
.hours { border-collapse: collapse; font-size: 15px; }
.hours td { padding: 4px 18px 4px 0; color: rgba(255, 247, 251, .88); }
.hours tr.today td { color: #fff; font-weight: 700; }
.social { display: flex; gap: 10px; margin-top: 16px; }
.social a { width: 42px; height: 42px; border-radius: 50%; background: rgba(255, 247, 251, .1); display: grid; place-items: center; }
.social a:hover { background: var(--cherry); }
.social svg { width: 18px; height: 18px; fill: currentColor; }
.newsletter { display: flex; gap: 8px; margin-top: 12px; }
.newsletter input { flex: 1; min-width: 0; min-height: 48px; border-radius: 999px; border: 0; padding: 0 16px; font: 500 15px var(--body); color: var(--ink); }
.newsletter .btn { min-height: 48px; padding: 12px 18px; font-size: 14px; }
.foot-note { font-size: 13px; color: rgba(255, 247, 251, .7); margin-top: 8px; }
.foot-bottom { margin-top: clamp(36px, 5vw, 60px); padding-top: 22px; border-top: 1px solid var(--line-d); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: 13px; color: rgba(255, 247, 251, .65); }

/* ---------- Inner pages ---------- */
.page-hero { background: var(--pink); padding: calc(var(--nav-h) + clamp(28px, 4vw, 48px)) 0 clamp(32px, 4.5vw, 56px); position: relative; }
.page-hero h1 { font-size: clamp(36px, 4.6vw, 64px); }
.page-hero .lead { margin-top: 18px; }
.page-hero .btn-row { margin-top: 26px; }
.page-hero.with-photo .wrap { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(30px, 5vw, 70px); align-items: center; }
.page-hero.with-photo img { border-radius: var(--radius); box-shadow: var(--shadow); aspect-ratio: 4 / 3; object-fit: cover; width: 100%; max-height: 440px; justify-self: end; max-width: 560px; }
.menu-page section.plain { padding: clamp(50px, 7vw, 90px) 0; }
.menu-page section.plain + section.plain { padding-top: 0; }
.menu-section { display: grid; grid-template-columns: 300px 1fr; gap: clamp(30px, 5vw, 80px); align-items: start; padding: clamp(40px, 6vw, 70px) 0; border-top: 1px solid var(--line); }
.menu-section h2 { font-size: clamp(30px, 3.4vw, 44px); }
.menu-section .lead { font-size: 16px; margin-top: 12px; }
.menu-section img { border-radius: var(--radius-s); aspect-ratio: 4 / 3; object-fit: cover; width: 100%; margin-top: 18px; box-shadow: var(--shadow); }
.menu-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px; }
.flavors { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.flavors span { background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 7px 12px; font-size: 13.5px; font-weight: 500; }
.sunday { display: inline-block; background: var(--cherry); color: #fff; font: 700 11.5px/1 var(--body); letter-spacing: .1em; text-transform: uppercase; padding: 7px 10px; border-radius: 999px; margin-left: 8px; vertical-align: 2px; }
.order-bar { background: var(--choc-2); color: var(--pink-3); padding: clamp(40px, 5vw, 64px) 0; }
.order-bar .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px; }
.order-bar h2 { color: var(--pink); font-size: clamp(26px, 3vw, 40px); max-width: 22ch; }
.order-bar p { color: rgba(255, 247, 251, .8); margin-top: 8px; }

.gallery-grid { columns: 3; column-gap: 16px; }
.gallery-grid figure { break-inside: avoid; margin: 0 0 16px; border-radius: var(--radius-s); overflow: hidden; background: var(--pink-2); position: relative; }
.gallery-grid img { width: 100%; height: auto; display: block; transition: transform .6s; }
.gallery-grid figure:hover img { transform: scale(1.03); }
.gallery-grid figcaption { position: absolute; left: 12px; bottom: 12px; background: rgba(255, 247, 251, .92); color: var(--choc); font: 600 12.5px/1 var(--body); padding: 8px 11px; border-radius: 999px; }
.gallery-grid button { all: unset; cursor: zoom-in; display: block; width: 100%; }
.gallery-grid button:focus-visible { outline: 3px solid var(--pink-hot); }
.gallery-cats { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.gallery-cats button { border: 0; background: #fff; border: 1px solid var(--line); color: var(--choc); border-radius: 999px; padding: 11px 16px; font: 600 14px/1 var(--body); cursor: pointer; min-height: 44px; }
.gallery-cats button[aria-pressed="true"] { background: var(--choc); color: #fff; border-color: var(--choc); }
.gallery-grid figure[hidden] { display: none; }
dialog.lightbox { border: 0; padding: 0; background: transparent; max-width: min(96vw, 1100px); max-height: 94vh; }
dialog.lightbox::backdrop { background: rgba(43, 26, 18, .86); }
dialog.lightbox img { max-height: 86vh; width: auto; max-width: 96vw; border-radius: var(--radius-s); margin: 0 auto; }
dialog.lightbox p { color: #fff; text-align: center; margin-top: 12px; font-size: 15px; }
dialog.lightbox .close { position: fixed; top: 16px; right: 16px; width: 46px; height: 46px; border-radius: 50%; border: 0; background: #fff; color: var(--choc); font-size: 22px; cursor: pointer; }

.policy { display: grid; grid-template-columns: 240px 1fr; gap: clamp(24px, 4vw, 60px); padding: 30px 0; border-top: 1px solid var(--line); }
.policy h3 { font-size: 24px; }
.policy p { color: var(--ink-soft); max-width: 62ch; }
.policy p + p { margin-top: 10px; }
.faq details { border-top: 1px solid var(--line); padding: 4px 0; }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 18px 0; font: 600 18px/1.3 var(--body); color: var(--choc); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--display); font-size: 26px; color: var(--cherry); flex: none; transition: transform .25s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 0 20px; color: var(--ink-soft); max-width: 66ch; }

.form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form label { display: grid; gap: 6px; font: 600 13.5px/1 var(--body); color: var(--choc); }
.form label.full { grid-column: 1 / -1; }
.form input, .form select, .form textarea { width: 100%; min-height: 50px; border: 1.5px solid var(--line); border-radius: 12px; background: #fff; padding: 12px 14px; font: 500 16px var(--body); color: var(--ink); }
.form textarea { min-height: 120px; resize: vertical; }
.form input:focus, .form select:focus, .form textarea:focus { outline: 0; border-color: var(--pink-hot); box-shadow: 0 0 0 4px rgba(232, 93, 159, .18); }
.form .actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 6px; }
.form .hint { grid-column: 1 / -1; font-size: 13.5px; color: var(--ink-soft); }
.form-done { grid-column: 1 / -1; background: var(--pink-2); border-radius: 14px; padding: 18px; font-size: 16px; }
.contact-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.ccard { background: #fff; border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow); }
.ccard h3 { font-size: 22px; margin-bottom: 10px; }
.ccard p { color: var(--ink-soft); font-size: 15.5px; }
.ccard .big { display: block; font: 700 clamp(22px, 2.2vw, 28px)/1.2 var(--body); font-variant-numeric: tabular-nums; color: var(--plum); margin: 8px 0 6px; text-decoration: none; }
.ccard .big:hover { text-decoration: underline; }
.map { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); aspect-ratio: 16 / 9; background: var(--pink-2); }
.map iframe { width: 100%; height: 100%; border: 0; display: block; }
.hours-card { background: #fff; border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow); }
.hours-card .hours td { color: var(--ink); padding: 8px 22px 8px 0; border-bottom: 1px dashed rgba(90, 54, 32, .2); }
.hours-card .hours tr.today td { color: var(--plum); font-weight: 700; }
.about-story { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 80px); align-items: center; padding: clamp(28px, 4vw, 56px) 0; }
.about-story:nth-child(even) .story-img { order: 2; }
.story-img img { border-radius: var(--radius); box-shadow: var(--shadow); width: 100%; max-width: 520px; aspect-ratio: 5 / 4; object-fit: cover; margin-inline: auto; }
.about-story .lead { margin-top: 16px; }
.err404 { min-height: 70vh; display: grid; place-items: center; text-align: center; padding: calc(var(--nav-h) + 40px) var(--gutter) 60px; }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .cake-grid { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 200px; }
  .ig-strip { grid-template-columns: repeat(3, 1fr); }
  .menu-cols, .pillars { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  :root { --nav-h: 66px; }
  .nav-links, .nav .btn { display: none; }
  .nav-toggle { display: block; }
  .brand img { width: 44px; height: 44px; }
  .split, .page-hero.with-photo .wrap, .about-story, .menu-section, .policy { grid-template-columns: 1fr; }
  .page-hero.with-photo img { max-height: 260px; max-width: none; aspect-ratio: 16 / 10; }
  .story-img img { aspect-ratio: 16 / 10; max-width: none; }
  .about-story:nth-child(even) .story-img { order: 0; }
  .sticky-col { position: static; }
  .quotes, .contact-cards { grid-template-columns: 1fr; }
  .menu-list { grid-template-columns: 1fr; }
  .gallery-grid { columns: 2; }
  .stages li { grid-template-columns: 1fr; gap: 6px; }
  .reveal-line { max-width: min(560px, 86vw); }
  .reveal-line.ml, .reveal-line.mr { left: var(--gutter); right: var(--gutter); top: auto; bottom: 12vh; transform: none; text-align: left; max-width: none; }
  .reveal-line.mr .lead { margin-left: 0; } .reveal-line.mr .btn-row { justify-content: flex-start; }
  .hero-title { top: calc(var(--nav-h) + 26px); max-width: min(560px, 90vw); }
  .hero-title h1 { font-size: clamp(38px, 10.5vw, 56px); }
  .hero-ctas { bottom: 5vh; right: var(--gutter); max-width: none; }
  .hero-ctas .lead { font-size: 15.5px; max-width: 40ch; }
  .hero-mid { max-width: min(520px, 86vw); }
  .stage-shade { background: linear-gradient(0deg, rgba(43, 26, 18, .78) 0%, rgba(43, 26, 18, .2) 42%, rgba(43, 26, 18, 0) 60%), linear-gradient(180deg, rgba(43, 26, 18, .62) 0%, rgba(43, 26, 18, 0) 34%); }
  .scrub.light .stage-shade { background: linear-gradient(0deg, rgba(43, 26, 18, .7) 0%, rgba(43, 26, 18, .15) 44%, rgba(43, 26, 18, 0) 60%), linear-gradient(180deg, rgba(255, 247, 251, .55) 0%, rgba(255, 247, 251, 0) 30%); }
  .scrub.light .reveal-line { color: #fff; }
  .scrub.light .reveal-line .eyebrow { color: var(--pink); }
  .scrub.light .reveal-line::before { background: radial-gradient(ellipse at center, rgba(43, 26, 18, .7) 0%, rgba(43, 26, 18, .45) 40%, rgba(43, 26, 18, 0) 72%); }
  .scrub.light .reveal-line h1, .scrub.light .reveal-line h2 { text-shadow: 0 6px 30px rgba(0, 0, 0, .3); }
  .btn { min-height: 50px; padding: 13px 20px; font-size: 15px; }
  .scroll-hint { display: none; }

  /* Phones: the scene IS the content. A portrait frame is ~390px wide, so an eyebrow + headline + a 4-line
     paragraph + three buttons covered the middle of every cake — exactly where the drips and roses animate.
     Drop the paragraphs and the secondary CTAs inside scrub scenes, keep one headline and one button, and
     sit the block low so the cake owns the upper two thirds. Desktop keeps the full copy (it sits beside
     the cake there, not on top of it). */
  .scrub .reveal-line .lead { display: none; }
  .scrub .reveal-line .btn-row { margin-top: 14px; }
  .scrub .reveal-line .btn-row .btn ~ .btn { display: none; }
  .scrub .reveal-line::before { inset: -30px -48px; }
  .reveal-line.ml, .reveal-line.mr { bottom: 7vh; }
  .hero-ctas { bottom: 6vh; }
  .scrub .reveal-line .eyebrow { font-size: 11px; letter-spacing: .16em; }
  /* Scene headlines are set smaller than page headlines on phones: at 390px a 3-line h2 at the page scale
     covered the cake it was describing. Two short beats per scene at this size leaves the animation the frame. */
  .scrub .reveal-line h1 { font-size: clamp(28px, 7.6vw, 38px); line-height: 1.05; }
  .scrub .reveal-line h2 { font-size: clamp(24px, 6.4vw, 32px); line-height: 1.06; }
}
@media (max-width: 600px) {
  body { font-size: 16px; }
  .cake-grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 170px; }
  .cake-grid .wide { grid-column: span 2; }
  /* Side by side, the handle pill squeezed the heading into three narrow lines. Stack them on phones. */
  .ig-head { flex-direction: column; align-items: flex-start; gap: 14px; }
  .ig-strip { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .menu-cols, .pillars, .foot-grid { grid-template-columns: 1fr; }
  .gallery-grid { columns: 1; }
  .form { grid-template-columns: 1fr; }
  .newsletter { flex-direction: column; }
  .newsletter .btn { width: 100%; }
  h2 { font-size: clamp(30px, 8.5vw, 40px); }
}