/* A warm Christmas gift table. Every foreground product is an independent layer. */
.bake-hero{--bake-brand:0;--bake-intro:1;--bake-cta:0;--bake-camera:0;--bake-camera-scale:1;--bake-camera-x:0%;--bake-camera-y:0%;--bake-camera-roll:0deg;--bake-focus:0;--bake-warmth:0;position:relative;height:720svh;background:#f5f1e9;isolation:isolate;color:#bc2026}
.bake-stage{position:sticky;top:0;height:100svh;min-height:0;overflow:hidden;isolation:isolate;background:#f5f1e9}
.bake-kitchen{position:absolute;inset:-2%;z-index:0;transform:translate3d(var(--bake-camera-x),var(--bake-camera-y),0) rotate(var(--bake-camera-roll)) scale(var(--bake-camera-scale));transform-origin:50% 68%;will-change:transform}
.bake-kitchen img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;filter:blur(calc(var(--bake-focus)*.6px))}
.bake-room-light{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,#fffaf208,transparent 60%,#eee3d30a);pointer-events:none}
.bake-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:3;display:block;pointer-events:none}
.bake-opening{position:absolute;left:50%;top:17%;width:84%;max-width:820px;transform:translateX(-50%);z-index:4;text-align:center;opacity:var(--bake-intro);pointer-events:none}
.bake-opening .eyebrow{font:500 10px/1.5 var(--sans);letter-spacing:.22em;margin-bottom:20px;color:#bc2026}
.bake-opening h2{font:500 clamp(38px,4vw,62px)/1.04 var(--serif);letter-spacing:-.035em;color:#bc2026;text-wrap:balance;margin:0}
.bake-opening em{color:inherit}
.bake-brand{position:absolute;z-index:4;left:50%;top:17%;transform:translateX(-50%);width:min(38vw,470px);max-width:calc(100vw - 48px);margin:0;text-align:center;font:500 12px/1.4 var(--sans);letter-spacing:0;color:#bc2026;pointer-events:none;opacity:clamp(0,calc(var(--bake-brand)*5),1)}
.bake-brand img{display:block;width:100%;height:auto;object-fit:contain;clip-path:inset(0 calc((1 - var(--bake-brand))*100%) 0 0)}
.bake-brand>span{display:block;margin-top:clamp(14px,2vh,21px);font:500 clamp(9px,.85vw,12px)/1.5 var(--sans);letter-spacing:.18em;text-transform:uppercase;opacity:clamp(0,calc((var(--bake-brand) - .65)*3),1)}
.bake-cta{position:absolute;z-index:7;left:50%;bottom:3.6%;display:flex;align-items:center;gap:24px;transform:translate(-50%,calc((1 - var(--bake-cta))*12px));opacity:var(--bake-cta);visibility:hidden;white-space:nowrap;max-width:calc(100vw - 36px)}
.bake-hero.is-finished .bake-cta,.bake-hero.is-static .bake-cta{visibility:visible}
.bake-cta .button{background:#bc2026;border-color:#bc2026;color:#fffaf3;min-height:44px;padding:11px 22px;font-size:10px;gap:25px;box-shadow:0 5px 20px #62151b16}
.bake-cta>.text-link{color:#991c22;font-size:10px;text-shadow:none}
.bake-chapter{position:absolute;z-index:6;left:var(--gutter);bottom:4.1%;display:flex;align-items:center;gap:12px;max-width:250px;color:#991c22;pointer-events:none}
.bake-step{font:500 22px/1 var(--serif);font-variant-numeric:tabular-nums;white-space:nowrap;flex-shrink:0}
.bake-chapter-name{max-width:150px;font:500 8px/1.7 var(--sans);letter-spacing:.11em;text-transform:uppercase}
.bake-scroll{position:absolute;z-index:6;right:var(--gutter);bottom:4.2%;display:flex;align-items:center;gap:12px;color:#991c22;font:500 8px/1.6 var(--sans);letter-spacing:.11em}
.bake-scroll-line{width:65px;height:1px;background:#bc202633;overflow:hidden}.bake-scroll-line i{display:block;width:100%;height:100%;background:#bc2026;transform:scaleX(0);transform-origin:left center}
.bake-skip{position:absolute;right:var(--gutter);top:112px;z-index:7;font:500 9px/1.5 var(--sans);letter-spacing:.03em;color:#991c22;border-bottom:1px solid #bc202633;padding:4px 0}
/* The static layout mirrors arrangeGiftTable() in the canvas controller. */
.bake-static-products {
  --product-gap: clamp(12px, 2.4vw, 34px);
  --product-reserve: 16%;
  position: absolute;
  inset: 0 0 var(--product-reserve);
  z-index: 3;
  display: none;
  align-items: flex-end;
  justify-content: center;
  gap: var(--product-gap);
  pointer-events: none;
}
.bake-static-tins { display: flex; align-items: flex-end; gap: var(--product-gap); }
.bake-static-products img { display: block; height: auto; filter: drop-shadow(0 7px 7px #4a352326); }
.bake-static-products .bake-fallback { width: min(39vw, 56svh); }
.bake-static-pack--red { width: min(10.5vw, 21svh); }
.bake-static-pack--green { width: min(13vw, 25svh); }
.bake-static-pack--gold { width: min(15.7vw, 29svh); }
@media (max-aspect-ratio: 1/1) {
  .bake-static-products {
    flex-direction: column-reverse;
    align-items: center;
    justify-content: flex-start;
    gap: clamp(10px, 2.6svh, 24px);
  }
  .bake-static-products .bake-fallback { width: min(72vw, 34svh); }
  .bake-static-pack--red { width: 19vw; }
  .bake-static-pack--green { width: 23vw; }
  .bake-static-pack--gold { width: 27vw; }
}
@media (max-width: 600px) {
  .bake-static-products { --product-reserve: max(16%, min(196px, 30svh)); }
  .bake-hero .bake-brand { top: clamp(68px, 16svh, 126px); width: min(72%, 350px); }
}
@media (max-width: 600px) and (max-height: 580px) {
  .bake-static-products { --product-reserve: max(16%, 80px); }
  .bake-hero .bake-cta {
    bottom: max(20px, env(safe-area-inset-bottom));
    display: flex;
    justify-content: center;
    gap: 10px;
  }
  .bake-hero .bake-cta .button, .bake-hero .bake-cta > .text-link {
    width: auto;
    min-height: 44px;
    padding: 8px 12px;
    font-size: 11px;
    gap: 10px;
  }
}
@media (min-width: 601px) and (max-height: 600px) and (min-aspect-ratio: 1/1) {
  .bake-hero .bake-brand { width: min(43vw, 75svh, 390px); }
}
.bake-hero.is-static,html[data-motion=off] .bake-hero{height:100svh;--bake-brand:1!important;--bake-intro:0!important;--bake-cta:1!important;--bake-camera-scale:1!important;--bake-camera-x:0%!important;--bake-camera-y:0%!important;--bake-camera-roll:0deg!important;--bake-focus:0!important}
.bake-hero.is-static .bake-static-products,html[data-motion=off] .bake-static-products{display:flex}
.bake-hero.is-static .bake-canvas,.bake-hero.is-static .bake-opening,.bake-hero.is-static .bake-chapter,.bake-hero.is-static .bake-scroll,.bake-hero.is-static .bake-skip,html[data-motion=off] .bake-canvas,html[data-motion=off] .bake-opening,html[data-motion=off] .bake-chapter,html[data-motion=off] .bake-scroll,html[data-motion=off] .bake-skip{display:none}
html[data-motion=off] .bake-cta{visibility:visible}
/* Keep the original wordmark-to-header transfer, after cake, tins and wordmark. */
html.hero-header-pending .home-page .site-header{opacity:0;visibility:hidden;pointer-events:none}
@media(max-width:1100px) and (min-aspect-ratio:1/1){.bake-brand{width:min(43vw,440px)}.bake-chapter{max-width:185px}.bake-chapter-name{font-size:7px}.bake-scroll{font-size:7px}.bake-scroll-line{width:38px}.bake-cta{gap:17px}.bake-cta .button,.bake-cta>.text-link{font-size:9px}}
@media(max-aspect-ratio:1/1){.bake-hero{height:700svh}.bake-kitchen img{object-position:center}.bake-brand{width:72%;max-width:350px;top:17%}.bake-brand>span{font-size:clamp(9px,2.1vw,12px);letter-spacing:.11em;margin-top:17px}.bake-opening{top:17%;width:84%}.bake-opening h2{font-size:clamp(38px,8.7vw,66px)}.bake-opening .eyebrow{font-size:8px;letter-spacing:.17em;margin-bottom:18px}.bake-cta{bottom:5.5%;gap:17px}.bake-cta .button{font-size:9px;padding:11px 18px;gap:18px}.bake-cta>.text-link{font-size:9px}.bake-chapter{bottom:1.8%;left:6%;max-width:180px;gap:9px}.bake-step{font-size:17px}.bake-chapter-name{font-size:6px;letter-spacing:.06em;max-width:104px}.bake-scroll{bottom:1.8%;right:6%;font-size:6px;gap:8px}.bake-scroll-line{width:27px}.bake-skip{top:96px;right:6%;font-size:8px}}
@media(max-width:370px){.bake-brand{width:74%}.bake-brand>span{font-size:8px}.bake-cta{gap:12px}.bake-cta .button{padding:11px 15px;font-size:8px}.bake-cta>.text-link{font-size:8px}.bake-chapter{max-width:150px}.bake-chapter-name{max-width:85px}}
@media(max-height:600px) and (min-aspect-ratio:1/1){.bake-brand{top:22%;width:min(35vw,390px)}.bake-brand>span{font-size:8px;margin-top:10px}.bake-opening{top:23%}.bake-opening h2{font-size:38px}.bake-opening .eyebrow{font-size:8px;margin-bottom:12px}.bake-skip{top:88px}.bake-cta{bottom:3%}.bake-cta .button{min-height:40px;padding:9px 17px;font-size:8px}.bake-cta>.text-link{font-size:8px}.bake-chapter-name,.bake-scroll{font-size:6px}.bake-step{font-size:17px}}
@media(prefers-reduced-motion:reduce){html:not([data-motion=on]) .bake-hero{height:100svh;--bake-brand:1!important;--bake-intro:0!important;--bake-cta:1!important;--bake-camera-scale:1!important;--bake-camera-x:0%!important;--bake-camera-y:0%!important;--bake-camera-roll:0deg!important;--bake-focus:0!important}html:not([data-motion=on]) .bake-static-products{display:flex}html:not([data-motion=on]) .bake-canvas,html:not([data-motion=on]) .bake-opening,html:not([data-motion=on]) .bake-chapter,html:not([data-motion=on]) .bake-scroll,html:not([data-motion=on]) .bake-skip{display:none}html:not([data-motion=on]) .bake-cta{visibility:visible}}
