/* ==========================================================================
   components.css — nav, drawer, spy, hero, media frames, cards, reel,
   forms, footer, archive, detail, flavors, faq, visit, legal, modals, cursor
   ========================================================================== */

/* ---- nav ---- */
.nav{position:fixed;top:0;left:0;right:0;z-index:var(--z-nav);display:flex;justify-content:space-between;
  align-items:center;gap:20px;padding:0 var(--pad);height:var(--nav-h);
  background:rgba(251,247,240,.78);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid transparent;
  transition:transform .45s cubic-bezier(.4,0,.2,1),border-color .4s,background .4s;}
.nav--solid{border-color:var(--line);}
.nav--hidden{transform:translateY(-110%);}
.nav-mark{font-family:var(--display);font-weight:500;font-size:clamp(20px,2.2vw,27px);
  letter-spacing:-.02em;text-decoration:none;line-height:1;font-variation-settings:'opsz' 40;}
.nav-links{display:flex;align-items:center;gap:clamp(18px,2.4vw,40px);}
.nav-link{font-family:var(--mono);font-size:12.5px;letter-spacing:.01em;text-decoration:none;
  color:var(--cacao);opacity:var(--o-label);transition:opacity .25s,color .25s;position:relative;padding:6px 0;}
.nav-link:hover{opacity:1;color:var(--rose-ink);}
.nav-link[aria-current="page"]{opacity:1;color:var(--rose-ink);}
.nav-link[aria-current="page"]::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1.5px;background:var(--rose-ink);}
.nav-cta{font-family:var(--body);font-weight:500;font-size:13.5px;background:var(--cacao);color:var(--sugar);
  border:none;border-radius:100px;padding:11px 20px;transition:background .25s,transform .25s;}
.nav-cta:hover{background:var(--rose-ink);transform:translateY(-1px);}
.nav-burger{display:none;width:44px;height:44px;border:none;background:none;flex-direction:column;
  justify-content:center;align-items:flex-end;gap:5px;}
.nav-burger span{display:block;height:1.5px;background:var(--cacao);transition:transform .3s,width .3s,opacity .3s;}
.nav-burger span:nth-child(1){width:24px;}
.nav-burger span:nth-child(2){width:18px;}
.nav-burger span:nth-child(3){width:24px;}
@media (max-width:860px){
  .nav-links,.nav .nav-cta{display:none;}
  .nav-burger{display:flex;}
}

/* ---- mobile drawer ---- */
.drawer-back{position:fixed;inset:0;z-index:var(--z-drawer-back);background:rgba(43,34,48,.4);
  opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s;}
.drawer-back.open{opacity:1;visibility:visible;}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(86vw,400px);z-index:var(--z-drawer);background:var(--sugar);
  transform:translateX(100%);transition:transform .42s cubic-bezier(.4,0,.2,1);
  display:flex;flex-direction:column;padding:clamp(20px,6vw,40px);}
.drawer.open{transform:none;}
.drawer-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:clamp(30px,7vh,60px);}
.drawer-close{width:44px;height:44px;border:1px solid var(--line);background:none;border-radius:50%;
  font-size:20px;line-height:1;color:var(--cacao);transition:background .2s;}
.drawer-close:hover{background:var(--rose);}
.drawer-nav{display:flex;flex-direction:column;gap:4px;}
.drawer-nav a{font-family:var(--display);font-weight:400;font-size:clamp(30px,9vw,46px);
  text-decoration:none;letter-spacing:-.02em;padding:9px 0;display:flex;align-items:baseline;gap:14px;
  border-bottom:1px solid var(--line);font-variation-settings:'opsz' 60;}
.drawer-nav a .ix{font-family:var(--mono);font-size:12px;opacity:.5;font-weight:400;}
.drawer-nav a[aria-current="page"]{color:var(--rose-ink);}
.drawer-foot{margin-top:auto;font-family:var(--mono);font-size:12px;opacity:.7;line-height:1.7;}
.drawer .nav-cta{display:inline-block;margin-top:24px;font-size:15px;padding:14px 26px;}

/* ---- media frame (replaces the CSS placeholder cakes with real photos) ---- */
.cake-stage{position:relative;overflow:hidden;display:block;background:var(--rose);
  /* the inline background colour doubles as a low-cost placeholder while the
     photo decodes, preventing a white flash on the pastel layout */}
.cake-stage img,
.cake-stage picture,
.cake-stage video{position:absolute;inset:0;width:100%;height:100%;}
.cake-stage img,
.cake-stage video{object-fit:cover;object-position:center;}
/* parallax photos drift vertically inside the clipped frame; oversize them so
   the scroll-driven translateY (set in scroll-fx.js) never reveals an edge.
   Under reduced motion no transform is applied — this stays a centred crop. */
.cake-stage img[data-parallax]{top:-11%;bottom:auto;height:122%;will-change:transform;}
a.cake-stage,button.cake-stage{appearance:none;-webkit-appearance:none;border:none;padding:0;
  width:100%;font:inherit;color:inherit;text-align:left;text-decoration:none;}

/* ---- hero ---- */
.hero{height:200vh;position:relative;}
.hero-sticky{position:sticky;top:0;height:100svh;overflow:hidden;display:grid;place-items:center;}
.hero-cake{will-change:transform;}
/* the hero photo frame — full-bleed left/right on desktop. The scroll-zoom is
   applied HERE (the image), not on .hero-cake, so on the split mobile hero the
   zoom is clipped to the lower-half box instead of creeping into the text. */
.hero-stage{width:min(116vh,95vw);aspect-ratio:1/1;border-radius:6px;
  transform:scale(1.1);transform-origin:50% 54%;will-change:transform;}
/* black dim over the hero video (both layouts) — keeps the light type and the
   footage legible without washing the page out */
.hero-stage::after{content:'';position:absolute;inset:0;background:rgba(0,0,0,.2);pointer-events:none;}
/* desktop: fill the viewport so the 16:9 video bleeds full-height via
   object-fit:cover — no square crop, no distortion */
@media (min-width:861px){.hero-stage{width:100vw;height:100svh;aspect-ratio:auto;border-radius:0;}}
/* darken top + bottom only, so the cake stays clear but the light type reads */
.hero-scrim{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(43,34,48,.34) 0%,rgba(43,34,48,0) 26%,rgba(43,34,48,0) 56%,rgba(43,34,48,.46) 100%);}
.hero-copy{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;
  padding:calc(var(--nav-h) + clamp(30px,7vh,90px)) var(--pad) clamp(34px,7vh,80px);pointer-events:none;}
.hero-word{font-family:var(--display);font-weight:300;font-size:clamp(58px,16vw,250px);
  line-height:.86;letter-spacing:-.03em;margin:0;text-align:center;font-variation-settings:'opsz' 144;
  color:var(--sugar);text-shadow:0 2px 40px rgba(43,34,48,.5),0 1px 6px rgba(43,34,48,.35);}
.hero-word .ch{display:inline-block;opacity:0;transform:translateY(40px);
  transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1);}
.hero.ready .hero-word .ch{opacity:1;transform:none;}
.hero-tag{max-width:46ch;margin:0 auto;text-align:center;font-size:clamp(15px,1.5vw,19px);
  line-height:1.55;color:var(--sugar);text-shadow:0 1px 18px rgba(43,34,48,.6),0 1px 3px rgba(43,34,48,.4);
  margin-bottom:clamp(52px,11vh,120px);opacity:0;transform:translateY(18px);
  transition:opacity 1s ease .55s,transform 1s ease .55s;}
.hero.ready .hero-tag{opacity:.95;transform:none;}
.hero-cue{position:absolute;bottom:clamp(16px,4vh,36px);left:50%;transform:translateX(-50%);
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--sugar);
  text-shadow:0 1px 10px rgba(43,34,48,.6);opacity:0;animation:cueIn 1s ease 1.3s forwards;}
.hero-cue::after{content:'';display:block;width:1px;height:28px;background:var(--sugar);margin:10px auto 0;
  transform-origin:top;animation:cueLine 1.8s ease-in-out 1.6s infinite;}
/* Mobile: full-bleed sticky hero, split into halves — dark title + subtitle on
   the upper half (no overlay/shadow/glow), the photo on the lower half, with
   the same sticky scroll-zoom as desktop. */
@media (max-width:860px){
  .hero-sticky{display:flex;flex-direction:column;place-items:stretch;}
  /* upper half — text */
  .hero-copy{position:static;order:0;flex:0 0 50%;display:flex;flex-direction:column;justify-content:center;
    padding:var(--nav-h) var(--pad) clamp(12px,2.5vh,22px);}
  .hero-word{color:var(--cacao);text-shadow:none;text-align:left;}
  .hero-tag{color:var(--cacao);text-shadow:none;text-align:left;max-width:44ch;margin:clamp(12px,2.6vh,22px) 0 0;}
  .hero.ready .hero-tag{opacity:.92;}
  .hero-scrim,.hero-cue{display:none;}
  /* lower half — image, full-bleed, zoomed by scroll-fx like desktop */
  .hero-cake{order:1;flex:1 1 50%;width:100vw;overflow:hidden;align-self:stretch;}
  .hero-stage{width:100%;height:100%;aspect-ratio:auto;border-radius:0;}
}

/* ---- atelier teaser ---- */
.teaser{background:var(--pistache);overflow:hidden;}
.teaser-grid{display:grid;grid-template-columns:1fr;gap:clamp(40px,7vw,90px);align-items:end;position:relative;z-index:1;}
.field{position:absolute;border-radius:50%;opacity:.85;z-index:0;will-change:transform;}
.meta-row{display:flex;gap:clamp(24px,4vw,56px);flex-wrap:wrap;margin-top:32px;}
.meta-item .k{font-family:var(--mono);font-size:11px;letter-spacing:.03em;color:var(--cacao);opacity:.78;display:block;margin-bottom:6px;}
.meta-item .v{font-size:16px;}
@media (min-width:1025px){.teaser-grid{grid-template-columns:1.05fr .95fr;}}

/* ---- selected work (home) ---- */
/* sticky-stack: cards pin at staggered offsets (top set inline per card), with
   a 5rem gap between them so the next card doesn't appear immediately. */
.stack{display:flex;flex-direction:column;gap:clamp(22px,4vh,38px);margin-top:clamp(36px,6vh,72px);}
.stack-card{position:sticky;background:var(--sugar);border:1px solid var(--line);border-radius:var(--r-md);
  overflow:hidden;display:grid;grid-template-columns:1fr;
  box-shadow:0 24px 50px -32px rgba(43,34,48,.45);}
.stack-card .cake-stage{aspect-ratio:4/3;}
.stack-info{padding:clamp(22px,3vw,40px);display:flex;flex-direction:column;gap:11px;justify-content:center;}
.card-meta{font-family:var(--mono);font-size:12px;letter-spacing:.02em;color:var(--cacao);opacity:var(--o-label);}
.card-desc{font-size:15px;line-height:1.6;max-width:42ch;opacity:.9;}
.textlink{font-family:var(--mono);font-size:12.5px;color:var(--rose-ink);text-decoration:none;
  display:inline-flex;align-items:center;gap:7px;margin-top:6px;width:fit-content;}
.textlink .arr{transition:transform .3s;}
.textlink:hover .arr{transform:translateX(5px);}
@media (min-width:768px){
  .stack{gap:10rem;}   /* gap between a pinned card and the one below it */
  .stack-card{grid-template-columns:1.25fr 1fr;}
}
@media (max-width:767px){.stack-card{position:static!important;top:auto!important;}}

/* ---- pinned reel ----------------------------------------------------------
   Desktop: the heading rides INSIDE the horizontal track (.reel-head--inline)
   and slides with it as you scroll. Mobile: the heading is a static block
   ABOVE the carousel (.reel-head--top) so it stays visible while the images
   scroll sideways. Exactly one of the two is shown at a time.               */
.reel{height:240vh;position:relative;}
.reel-sticky{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;flex-direction:column;justify-content:center;}
.reel-head--top{display:none;padding:0 var(--pad);margin-bottom:clamp(18px,3vh,26px);}
.reel-head--inline{flex:0 0 auto;width:min(80vw,420px);padding-right:clamp(20px,4vw,56px);}
.reel-track{display:flex;gap:clamp(20px,3vw,48px);padding:0 var(--pad);will-change:transform;align-items:center;}
.reel-item{flex:0 0 auto;width:min(76vw,500px);margin:0;}
.reel-item .cake-stage{aspect-ratio:3/4;border-radius:var(--r);}
.reel-cap{margin-top:14px;display:flex;justify-content:space-between;align-items:baseline;gap:14px;}
.reel-progress{position:absolute;left:var(--pad);right:var(--pad);bottom:clamp(26px,5vh,54px);height:2px;
  background:rgba(43,34,48,.16);border-radius:2px;overflow:hidden;}
.reel-progress span{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--rose-ink);border-radius:2px;}
@media (max-width:1024px){
  .reel{height:auto;}
  .reel-sticky{position:static;height:auto;display:block;padding:clamp(36px,6vh,64px) 0;}
  .reel-head--top{display:block;}
  .reel-head--inline{display:none;}
  .reel-track{overflow-x:auto;scroll-snap-type:x mandatory;transform:none!important;padding-bottom:14px;
    align-items:flex-start;-webkit-overflow-scrolling:touch;}
  .reel-item{scroll-snap-align:center;width:min(80vw,420px);}
  .reel-progress{display:none;}
}

/* ---- instagram strip ---- */
.ig-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;
  margin-bottom:clamp(22px,4vh,38px);}
.ig-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(8px,1.2vw,16px);}
.ig-tile{position:relative;display:block;overflow:hidden;border-radius:var(--r);aspect-ratio:1/1;background:var(--rose);}
.ig-tile picture,.ig-tile img{position:absolute;inset:0;width:100%;height:100%;}
.ig-tile img{object-fit:cover;transition:transform .5s cubic-bezier(.2,.7,.2,1);}
.ig-tile:hover img,.ig-tile:focus-visible img{transform:scale(1.06);}
.ig-tile::after{content:'';position:absolute;inset:0;background:rgba(43,34,48,0);transition:background .3s;}
.ig-tile:hover::after{background:rgba(43,34,48,.12);}
@media (min-width:620px){.ig-grid{grid-template-columns:repeat(3,1fr);}}
@media (min-width:980px){.ig-grid{grid-template-columns:repeat(6,1fr);}}

/* ---- testimonial ---- */
.quote{background:var(--rose);text-align:center;}
.quote blockquote{font-family:var(--display);font-style:italic;font-weight:400;
  font-size:clamp(26px,4.4vw,58px);line-height:1.18;letter-spacing:-.02em;margin:0 auto;max-width:20ch;
  text-wrap:balance;font-variation-settings:'opsz' 80;}
.quote cite{display:block;margin-top:30px;font-family:var(--mono);font-size:12px;font-style:normal;opacity:.8;}

/* ---- press strip ---- */
.press{border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.press-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:clamp(20px,4vw,50px);}
.press-row .pl{font-family:var(--display);font-weight:400;font-size:clamp(18px,2.4vw,30px);opacity:.66;
  letter-spacing:-.01em;}

/* ---- seasonal ribbon ---- */
.ribbon{background:var(--rose);overflow:hidden;border-top:1px solid var(--line);}
.ribbon-inner{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:24px;}
.dot-live{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:12px;}
.dot-live::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--rose-ink);
  box-shadow:0 0 0 0 var(--rose-ink);animation:pulse 2.4s ease-out infinite;}

/* ---- forms ---- */
.inquiry{display:grid;gap:18px;max-width:560px;}
.field-row{display:grid;gap:7px;}
.field-row label{font-family:var(--mono);font-size:11px;letter-spacing:.03em;color:var(--cacao);opacity:.82;}
.inquiry input,.inquiry textarea,.inquiry select{font-family:var(--body);font-size:16px;color:var(--cacao);
  background:transparent;border:none;border-bottom:1.5px solid rgba(43,34,48,.4);padding:10px 2px;border-radius:0;
  transition:border-color .3s;}
.inquiry input:focus,.inquiry textarea:focus,.inquiry select:focus{outline:none;border-color:var(--rose-ink);}
.inquiry textarea{resize:vertical;min-height:74px;}
.field-row.invalid input,.field-row.invalid textarea{border-color:var(--rose-ink);}
.field-err{font-family:var(--mono);font-size:11px;color:var(--rose-ink);min-height:0;opacity:0;
  transition:opacity .2s;}
.field-row.invalid .field-err{opacity:1;}
.two{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.btn{font-family:var(--body);font-weight:500;font-size:16px;background:var(--cacao);color:var(--sugar);
  border:none;border-radius:100px;padding:16px 30px;justify-self:start;margin-top:6px;
  transition:transform .3s,background .3s;text-decoration:none;display:inline-block;}
.btn:hover{background:var(--rose-ink);transform:translateY(-2px);}
.btn--ghost{background:transparent;color:var(--cacao);border:1.5px solid var(--cacao);}
.btn--ghost:hover{background:var(--cacao);color:var(--sugar);border-color:var(--cacao);}
.helper{font-family:var(--mono);font-size:11.5px;letter-spacing:.01em;opacity:.7;margin:2px 0 0;}
.form-ok{display:none;}
.inquiry.sent .field-row,.inquiry.sent .two,.inquiry.sent .btn,.inquiry.sent .helper{display:none;}
.inquiry.sent .form-ok{display:block;font-family:var(--display);font-size:clamp(22px,3vw,34px);line-height:1.25;}

/* ---- footer ---- */
/* No overflow:hidden here — it would clip the marquee strip where it lifts up
   to overlay the section above. The strip clips its own ticker via .marquee's
   own overflow:hidden; the page's horizontal overflow is handled by html.
   position+z-index makes the footer (and the strip in it) paint in front of
   the page's last section, which is itself positioned. */
.footer{background:var(--cacao);color:var(--sugar);position:relative;z-index:1;}
/* the ticker is tilted 1° counter-clockwise and driven by scroll (scroll-fx.js):
   scrolling down runs it right→left, scrolling up runs it left→right. */
.marquee{display:flex;overflow:hidden;padding:24px 0;background:var(--cacao);
  border-top:1px solid rgba(251,247,240,.15);border-bottom:1px solid rgba(251,247,240,.15);
  /* Straddle the seam so the strip overlays both the page's last section and
     the footer, sitting in front of both. The lift is done with a negative
     margin, NOT translateY — a translate in the transform stops the strip's
     z-index from winning over the positioned section above it. The rotate
     stays (it doesn't break stacking). */
  transform:rotate(-1deg);transform-origin:center;width:108vw;margin-left:-4vw;margin-top:-3rem;
  position:relative;z-index:50;}
.marquee-track{display:flex;flex-shrink:0;will-change:transform;}
.marquee-track span{font-family:var(--display);font-weight:300;font-size:clamp(20px,3vw,38px);
  white-space:nowrap;padding:0 .35em;font-variation-settings:'opsz' 90;}
.footer-body{padding:clamp(50px,8vh,90px) var(--pad);display:grid;gap:clamp(40px,6vw,70px);}
.footer-grid{display:grid;grid-template-columns:1fr;gap:clamp(36px,5vw,60px);}
.footer-mark{font-family:var(--display);font-weight:300;font-size:clamp(56px,12vw,140px);line-height:.85;
  letter-spacing:-.03em;font-variation-settings:'opsz' 144;}
.footer-col h4{font-family:var(--mono);font-size:11px;letter-spacing:.04em;opacity:.66;margin:0 0 14px;font-weight:400;}
.footer-col a,.footer-col p{display:block;text-decoration:none;font-size:15px;line-height:1.9;opacity:.9;margin:0;}
.footer-col a:hover{color:var(--rose);}
.social-row{display:flex;flex-direction:column;gap:6px;margin-top:2px;}
.footer-col a.social-link{display:inline-flex;align-items:center;gap:11px;width:fit-content;}
.social-ico{flex:0 0 auto;color:currentColor;opacity:.9;transition:transform .2s;}
.social-link:hover .social-ico{transform:translateY(-1px);}
.waitlist{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px;}
.waitlist input{flex:1;min-width:160px;background:transparent;border:none;border-bottom:1.5px solid rgba(251,247,240,.4);
  color:var(--sugar);font-family:var(--body);font-size:15px;padding:9px 2px;}
.waitlist input:focus{outline:none;border-color:var(--rose);}
.waitlist button{background:var(--sugar);color:var(--cacao);border:none;border-radius:100px;padding:11px 20px;
  font-weight:500;font-size:14px;transition:background .25s;}
.waitlist button:hover{background:var(--rose);}
.footer-foot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;font-family:var(--mono);
  font-size:11px;opacity:.7;border-top:1px solid rgba(251,247,240,.15);padding-top:22px;}
.footer-foot a{text-decoration:none;}
.footer-foot a:hover{color:var(--rose);}
@media (min-width:760px){.footer-grid{grid-template-columns:1.4fr 1fr 1fr 1.2fr;}}

/* ---- work archive ---- */
.filters{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:clamp(30px,5vh,52px);}
.filter{font-family:var(--mono);font-size:12px;letter-spacing:.02em;background:transparent;
  border:1px solid var(--line);border-radius:100px;padding:9px 16px;color:var(--cacao);transition:all .25s;}
.filter:hover{border-color:var(--cacao);}
.filter[aria-pressed="true"]{background:var(--cacao);color:var(--sugar);border-color:var(--cacao);}
.grid{display:grid;grid-template-columns:1fr;gap:clamp(20px,3vw,42px);}
.proj-card{display:block;text-align:left;border:none;background:none;padding:0;text-decoration:none;
  transition:transform .35s;}
.proj-card:hover{transform:translateY(-4px);}
.proj-card .cake-stage{aspect-ratio:4/5;border-radius:var(--r);}
.proj-card .pc-cap{margin-top:14px;display:flex;justify-content:space-between;align-items:baseline;gap:12px;}
.proj-card .pc-label{margin-top:4px;opacity:var(--o-label);}
.proj-card.hide{display:none;}
@media (min-width:620px){.grid{grid-template-columns:1fr 1fr;}}
@media (min-width:1025px){.grid{grid-template-columns:1fr 1fr 1fr;}}

/* ---- project detail ---- */
.detail-hero{display:grid;grid-template-columns:1fr;gap:clamp(28px,4vw,60px);align-items:end;}
.detail-hero .cake-stage{aspect-ratio:4/3;border-radius:var(--r-md);}
.detail-spec{display:grid;grid-template-columns:1fr 1fr;gap:24px clamp(24px,4vw,50px);
  border-top:1px solid var(--line);padding-top:30px;margin-top:8px;}
.detail-spec .k{font-family:var(--mono);font-size:11px;letter-spacing:.03em;opacity:.74;display:block;margin-bottom:5px;}
.detail-spec .v{font-size:16px;line-height:1.4;}
.gallery{display:grid;grid-template-columns:1fr;gap:clamp(14px,2vw,24px);}
.gallery button{border:none;padding:0;background:none;border-radius:var(--r);overflow:hidden;}
.gallery .cake-stage{aspect-ratio:4/3;border-radius:var(--r);}
.next-link{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;
  border-top:1px solid var(--line);padding-top:clamp(30px,5vh,54px);margin-top:clamp(40px,7vh,80px);text-decoration:none;}
.next-link:hover .h2{color:var(--rose-ink);}
/* description block — the story + the build / flavours / occasion notes */
.detail-about{display:grid;grid-template-columns:1fr;gap:clamp(30px,5vw,64px);align-items:start;}
.detail-story{font-size:17px;}
.detail-notes{display:grid;gap:clamp(18px,3vh,26px);}
.detail-notes .dn-k{font-family:var(--mono);font-size:11px;letter-spacing:.04em;text-transform:uppercase;
  opacity:var(--o-label);display:block;margin-bottom:7px;}
.detail-notes .dn-v{font-size:15.5px;line-height:1.6;margin:0;max-width:52ch;}
/* citations below the gallery images */
.detail-quotes{display:grid;grid-template-columns:1fr;gap:clamp(22px,3vw,40px);margin-top:clamp(34px,5vh,60px);}
.dq{margin:0;border-top:1px solid var(--line);padding-top:clamp(16px,2.4vw,24px);}
.dq blockquote{font-family:var(--display);font-style:italic;font-weight:400;font-size:clamp(19px,2.4vw,27px);
  line-height:1.32;letter-spacing:-.01em;margin:0;text-wrap:balance;font-variation-settings:'opsz' 60;}
.dq figcaption{font-family:var(--mono);font-size:12px;opacity:.8;margin-top:14px;}
@media (min-width:768px){
  .detail-hero{grid-template-columns:1.3fr 1fr;}
  .detail-spec{grid-template-columns:1fr 1fr;}
  .gallery{grid-template-columns:1fr 1fr;}
  .detail-about{grid-template-columns:1.08fr .92fr;}
  .detail-quotes{grid-template-columns:1fr 1fr;}
}

/* ---- flavors ---- */
.flavor-list{border-top:1px solid var(--line);}
.flavor{display:grid;grid-template-columns:1fr;gap:6px;padding:clamp(20px,3vw,34px) 0;border-bottom:1px solid var(--line);}
.flavor-top{display:flex;justify-content:space-between;align-items:baseline;gap:16px;}
.flavor-name{font-family:var(--display);font-size:clamp(22px,3vw,38px);font-weight:400;letter-spacing:-.02em;font-variation-settings:'opsz' 72;}
.flavor-season{font-family:var(--mono);font-size:11px;opacity:.7;white-space:nowrap;}
.flavor-desc{font-size:15px;line-height:1.6;opacity:.9;max-width:60ch;}
.flavor-allergen{font-family:var(--mono);font-size:11px;opacity:var(--o-label);margin-top:2px;}
.allergen-row{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px;}
.allergen{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:11px;letter-spacing:.01em;
  color:var(--cacao);padding:4px 11px 4px 8px;border-radius:100px;
  background:color-mix(in srgb,var(--ac) 15%,var(--sugar));
  border:1px solid color-mix(in srgb,var(--ac) 38%,transparent);}
.allergen svg{color:var(--ac);flex:0 0 auto;}
@supports not (background:color-mix(in srgb,red,blue)){
  .allergen{background:rgba(43,34,48,.05);border-color:var(--line);}
}
.flavors-taste{display:grid;grid-template-columns:1fr;gap:clamp(32px,5vw,60px);align-items:center;}
@media (min-width:900px){.flavors-taste{grid-template-columns:1fr 1fr;}}

/* ---- process (shares .flavor rows) ---- */
.process-step{grid-template-columns:auto 1fr;gap:clamp(16px,4vw,48px);align-items:baseline;}
.process-step .label{opacity:.7;}

/* ---- faq ---- */
.faq{border-top:1px solid var(--line);}
details.qa{border-bottom:1px solid var(--line);}
details.qa summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;
  padding:clamp(18px,2.6vw,28px) 0;font-family:var(--display);font-size:clamp(18px,2.4vw,28px);font-weight:400;
  letter-spacing:-.01em;font-variation-settings:'opsz' 60;}
details.qa summary::-webkit-details-marker{display:none;}
details.qa summary .pm{font-family:var(--mono);font-size:22px;transition:transform .3s;flex:0 0 auto;}
details.qa[open] summary .pm{transform:rotate(45deg);}
details.qa .qa-body{font-size:15px;line-height:1.7;opacity:.9;max-width:62ch;padding:0 0 clamp(20px,2.6vw,28px);}

/* ---- visit / map ---- */
.map-ph{aspect-ratio:16/10;background:var(--pistache);border-radius:var(--r-md);position:relative;overflow:hidden;
  border:1px solid var(--line);}
.map-frame{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;
  filter:saturate(.85) brightness(1.03);}
.map-cap{display:flex;align-items:center;gap:9px;margin-top:14px;font-family:var(--mono);font-size:12px;
  letter-spacing:.01em;opacity:.85;}
.map-cap .pin{flex:0 0 auto;width:14px;height:14px;border-radius:50% 50% 50% 0;background:var(--rose-ink);
  transform:rotate(-45deg);box-shadow:0 4px 10px -5px rgba(43,34,48,.5);}
.visit-grid{display:grid;grid-template-columns:1fr;gap:clamp(34px,5vw,64px);align-items:start;}
@media (min-width:900px){.visit-grid{grid-template-columns:1.2fr 1fr;}}
.info-list{display:grid;gap:18px;}
.info-list .il-k{font-family:var(--mono);font-size:11px;letter-spacing:.03em;opacity:.74;margin-bottom:4px;}
.info-list .il-v{font-size:16px;line-height:1.5;}

/* ---- atelier page two-column blocks ---- */
.atelier-intro{display:grid;grid-template-columns:1fr;gap:clamp(34px,5vw,64px);align-items:start;}
.atelier-craft-wrap{display:grid;grid-template-columns:1fr;gap:clamp(34px,5vw,64px);align-items:center;}
@media (min-width:920px){
  .atelier-intro{grid-template-columns:1.35fr .65fr;}
  .atelier-intro .atelier-figure{justify-self:end;max-width:400px;width:100%;}
  .atelier-craft-wrap{grid-template-columns:.95fr 1.05fr;}
}

/* ---- atelier "inside the studio" asymmetric photo collage ---- */
.s2-head{max-width:780px;}
.studio-collage{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(14px,2vw,28px);
  align-items:start;margin-top:clamp(34px,5vh,64px);}
.sc{margin:0;position:relative;}
.sc-cap{margin-top:10px;font-family:var(--mono);font-size:11px;letter-spacing:.02em;opacity:var(--o-label);}
.sc-a{grid-column:1 / 8;}
.sc-b{grid-column:8 / 13;margin-top:clamp(26px,6vw,84px);}
.sc-d{grid-column:2 / 12;margin-top:clamp(34px,6vw,96px);}
@media (max-width:760px){
  .studio-collage{grid-template-columns:1fr 1fr;gap:12px;}
  .sc-a{grid-column:1 / 3;}
  .sc-b{grid-column:1 / 3;margin-top:0;}
  .sc-d{grid-column:1 / 3;margin-top:0;}
}

/* ---- studio "film" video placeholder ---- */
.studio-film{aspect-ratio:16/9;border-radius:var(--r-md);position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:center;background:var(--pistache);}
.studio-film .film-label{position:absolute;z-index:2;bottom:clamp(12px,2vw,20px);left:clamp(12px,2vw,20px);
  font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--sugar);
  background:rgba(43,34,48,.5);padding:6px 12px;border-radius:100px;
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);}
.studio-film picture,.studio-film img{position:absolute;inset:0;width:100%;height:100%;}
.studio-film img{object-fit:cover;}
.studio-film .film-play{position:relative;z-index:2;width:74px;height:74px;border-radius:50%;background:var(--sugar);
  display:flex;align-items:center;justify-content:center;box-shadow:0 10px 30px -12px rgba(43,34,48,.6);}
.studio-film .film-play::after{content:'';border-left:16px solid var(--cacao);
  border-top:10px solid transparent;border-bottom:10px solid transparent;margin-left:5px;}
.studio-film::after{content:'';position:absolute;inset:0;z-index:1;background:rgba(43,34,48,.18);}

/* ---- legal ---- */
.legal-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:clamp(30px,5vh,50px);}
.legal-body h3{font-family:var(--display);font-size:clamp(20px,2.6vw,30px);font-weight:400;margin:clamp(28px,4vh,40px) 0 12px;letter-spacing:-.01em;}
.legal-body h3:first-child{margin-top:0;}
.legal-panel{display:none;}
.legal-panel.show{display:block;}

/* ---- modals: shared backdrop ---- */
.ov-back{position:fixed;inset:0;z-index:var(--z-overlay-back);background:rgba(43,34,48,.55);
  opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);}
.ov-back.open{opacity:1;visibility:visible;}

/* lightbox */
.lb{position:fixed;inset:0;z-index:var(--z-lightbox);display:flex;align-items:center;justify-content:center;flex-direction:column;
  opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s;padding:clamp(16px,4vw,50px);
  background:rgba(43,34,48,.86);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);}
.lb.open{opacity:1;visibility:visible;}
.lb-stage{position:relative;width:min(92vw,860px);max-height:80vh;}
.lb-stage .cake-stage{aspect-ratio:4/3;border-radius:var(--r-md);cursor:zoom-in;}
.lb-stage .cake-stage.zoomed{cursor:zoom-out;}
.lb-stage .cake-stage img{transition:transform .4s ease;transform-origin:center;will-change:transform;}
.lb-stage .cake-stage.zoomed img{transform:scale(1.85);}
.lb-stage .cake-stage.zoomed.panning img{transition:none;}   /* follow the cursor instantly while panning */
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;border-radius:50%;z-index:2;
  border:none;background:var(--sugar);color:var(--cacao);font-size:20px;display:flex;align-items:center;justify-content:center;
  transition:background .2s,transform .2s;}
.lb-nav:hover{background:var(--rose);}
.lb-prev{left:-8px;}
.lb-next{right:-8px;}
/* desktop: nudge the arrows fully outside the photo, into the dark surround */
@media (min-width:1025px){
  .lb-prev{left:-78px;}
  .lb-next{right:-78px;}
}
.lb-bar{display:flex;justify-content:space-between;align-items:center;width:min(92vw,860px);margin-top:16px;
  color:var(--sugar);font-family:var(--mono);font-size:12px;}
.lb-close{position:fixed;top:clamp(14px,3vw,28px);right:clamp(14px,3vw,28px);width:46px;height:46px;border-radius:50%;
  border:1px solid rgba(251,247,240,.4);background:none;color:var(--sugar);font-size:18px;}
.lb-close:hover{background:rgba(251,247,240,.15);}
@media (max-width:640px){.lb-prev{left:0;}.lb-next{right:0;}.lb-nav{width:44px;height:44px;}}

/* slide-over inquiry + waitlist */
.panel{position:fixed;top:0;right:0;bottom:0;width:min(92vw,520px);z-index:var(--z-panel);background:var(--sugar);
  transform:translateX(100%);transition:transform .42s cubic-bezier(.4,0,.2,1);overflow-y:auto;
  padding:clamp(24px,5vw,48px);display:flex;flex-direction:column;}
.panel.open{transform:none;}
.panel-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:clamp(26px,5vh,44px);}
.panel-ref{background:var(--rose);border-radius:var(--r);padding:12px 16px;font-family:var(--mono);font-size:12px;
  margin-bottom:24px;display:none;}
.panel-ref.show{display:block;}

/* cookie + toast */
.cookie{position:fixed;left:clamp(14px,3vw,28px);right:clamp(14px,3vw,28px);bottom:clamp(14px,3vw,28px);
  z-index:var(--z-cookie);background:var(--cacao);color:var(--sugar);border-radius:var(--r-lg);padding:clamp(18px,3vw,26px);
  display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px;justify-content:space-between;
  transform:translateY(150%);transition:transform .5s cubic-bezier(.4,0,.2,1);max-width:680px;margin:0 auto;}
.cookie.show{transform:none;}
.cookie p{margin:0;font-size:13.5px;line-height:1.55;flex:1;min-width:220px;opacity:.94;}
.cookie p a{color:var(--rose);}
.cookie-btns{display:flex;gap:10px;flex-wrap:wrap;}
.cookie-btns button{border-radius:100px;padding:10px 18px;font-size:13.5px;font-weight:500;border:none;}
.ck-decline{background:transparent;color:var(--sugar);border:1px solid rgba(251,247,240,.4);}
.ck-accept{background:var(--sugar);color:var(--cacao);}
.toast{position:fixed;left:50%;bottom:clamp(20px,4vw,36px);transform:translate(-50%,150%);z-index:var(--z-toast);
  background:var(--cacao);color:var(--sugar);padding:14px 22px;border-radius:100px;font-size:14px;
  display:flex;align-items:center;gap:10px;transition:transform .45s cubic-bezier(.4,0,.2,1);box-shadow:0 14px 30px -14px rgba(0,0,0,.5);}
.toast.show{transform:translateX(-50%);}
.toast::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--pistache);}

/* ---- custom cursor (gallery zones only) ---- */
.cursor{position:fixed;top:0;left:0;width:72px;height:72px;border-radius:50%;background:var(--rose);
  z-index:var(--z-cursor);pointer-events:none;margin:-36px 0 0 -36px;opacity:0;
  display:flex;align-items:center;justify-content:center;
  transition:opacity .28s ease,transform .05s linear;}
.cursor::after{content:'view';font-family:var(--mono);font-size:11px;color:var(--cacao);}
.cursor--on{opacity:1;}
@media (pointer:coarse){.cursor{display:none!important;}}