/* ===================================================================
   BAD BANANA BAKEHOUSE
   Palette + type matched to the sticker/illustration brand art.
   =================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Alfa+Slab+One&family=Work+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&family=Caveat:wght@500;600;700&display=swap');

:root{
  /* paper */
  --cream:#F7EFDB; --cream-pale:#FDF8EC; --cream-deep:#F0E3C6; --cream-edge:#E5D4AF;
  /* ink */
  --espresso:#3E2A16; --espresso-soft:#6B4C2E; --espresso-mute:#8A6B4A;
  /* olive — the brand green, deeper + more olive than a leaf green */
  --green:#4A6327; --green-deep:#35491B; --green-pale:#7A9048;
  /* gold */
  --gold:#E5B93C; --gold-deep:#C7982A; --gold-pale:#F2D986;
  /* accent */
  --coral:#C4553D; --heart:#C4553D;
  /* ripeness ramp — drives the scroll bar, the scale, and the Bananometer */
  --r1:#7FA03C; --r2:#C9C845; --r3:#E8C547; --r4:#D19A3A; --r5:#A06B30; --r6:#6E4522; --r7:#3E2A16;

  --display:'Alfa Slab One',Georgia,serif;
  --body:'Work Sans',system-ui,sans-serif;
  --script:'Caveat',cursive;

  --maxw:1280px;
  --rule:2.5px solid var(--espresso);
  --shadow:5px 5px 0 var(--espresso);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--cream); color:var(--espresso); font-family:var(--body);
  font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased;
  /* paper tooth — replaced by images/texture-paper.png when it lands */
  background-image:
    radial-gradient(circle at 12% 22%, rgba(107,76,46,.05) 0 2.5px, transparent 3px),
    radial-gradient(circle at 68% 8%,  rgba(107,76,46,.04) 0 1.8px, transparent 2.4px),
    radial-gradient(circle at 84% 61%, rgba(107,76,46,.045) 0 3px, transparent 3.6px),
    radial-gradient(circle at 33% 78%, rgba(107,76,46,.035) 0 2px, transparent 2.6px);
  background-size:340px 340px,220px 220px,420px 420px,290px 290px;
}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--coral);outline-offset:3px;border-radius:2px}

/* ---- ART PLACEHOLDERS -------------------------------------------------
   <figure class="art" style="--ar:4/3"><img src="images/x.png" alt="..."></figure>
   Renders a dashed box with the alt text until the file exists.
   Drop the real file into /images/ and it just works. No markup change.
----------------------------------------------------------------------- */
.art{position:relative;aspect-ratio:var(--ar,4/3);border:0;
  border-radius:8px;background:var(--cream-deep);overflow:hidden;display:grid;place-items:center}
.art img{width:100%;height:100%;object-fit:contain;
  font-family:var(--body);font-size:.76rem;font-weight:600;line-height:1.5;
  letter-spacing:.04em;color:var(--espresso-mute);text-align:center;padding:1.2rem}
.art.cover img{object-fit:cover}
.art.bare{border:0;background:none}
.art.missing{border:2.5px dashed rgba(62,42,22,.32);background:var(--cream-deep)}
.art.missing::before{content:"🖼 ART GOES HERE";position:absolute;top:.8rem;left:50%;
  transform:translateX(-50%);font-size:.62rem;font-weight:800;letter-spacing:.22em;
  color:var(--espresso-mute);white-space:nowrap}

/* ---- RIPENESS SCROLL BAR ---- */
#ripeness{position:fixed;top:0;left:0;right:0;height:7px;z-index:200;background:rgba(62,42,22,.14)}
#ripeness i{display:block;height:100%;width:0;
  background:linear-gradient(90deg,var(--r1),var(--r2) 18%,var(--r3) 36%,var(--r4) 56%,var(--r5) 74%,var(--r6) 90%,var(--r7));
  transition:width .08s linear}

/* ---- TOP BAR (ticker + nav stick together — no magic heights) ---- */
.topbar{position:sticky;top:7px;z-index:150}

/* Pre-opening notice — removed automatically when OPENING_SOON is false in site.js */
.preopen{background:var(--coral);color:#FFF7EC;text-align:center;
  font-size:.82rem;line-height:1.45;padding:.6rem 1.2rem;
  border-bottom:2px solid var(--espresso)}
.preopen b{font-weight:800;letter-spacing:.02em}
.preopen a{color:#FFF7EC;font-weight:800;text-underline-offset:3px}
.preopen a:hover{text-decoration-thickness:2px}
@media (max-width:560px){.preopen{font-size:.76rem;padding:.5rem .9rem}}

/* ---- TICKER ---- */
.ticker{background:var(--espresso);color:var(--cream);
  font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;font-weight:700;
  padding:.55rem 0;overflow:hidden;white-space:nowrap;border-bottom:2px solid var(--green-deep)}
.ticker span{display:inline-block;padding-right:2rem;animation:slide 38s linear infinite}
.ticker b{color:var(--gold);font-weight:800}
.ticker .hrt{color:var(--coral);margin:0 1.4rem;font-size:.8rem}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---- NAV ---- */
nav{position:relative;background:var(--cream-pale);border-bottom:var(--rule)}
.nav-in{max-width:var(--maxw);margin:0 auto;padding:.6rem 1.5rem;
  display:flex;align-items:center;justify-content:space-between;gap:1.2rem}
.brand{display:flex;align-items:center;gap:.55rem;text-decoration:none;flex:none}
.brand img{height:44px;width:auto}
/* fallback wordmark, used until images/logo-full.png lands */
.brand .wm{font-family:var(--display);font-size:1.28rem;line-height:1;letter-spacing:-.01em}
.brand .wm em{font-style:normal;color:var(--green)}
.brand .wm small{display:block;font-family:var(--body);font-size:.52rem;font-weight:700;
  letter-spacing:.34em;color:var(--espresso-soft);margin-top:.22rem}
.nav-links{display:flex;gap:1.15rem;list-style:none;align-items:center}
.nav-links a{text-decoration:none;font-weight:700;font-size:.755rem;letter-spacing:.09em;
  text-transform:uppercase;padding:.3rem 0;border-bottom:3px solid transparent;white-space:nowrap}
.nav-links a:hover,.nav-links a[aria-current]{border-color:var(--coral)}
.navbtn{background:var(--green);color:var(--cream-pale)!important;padding:.6rem 1.05rem;
  border-radius:3px;border:2px solid var(--espresso);box-shadow:3px 3px 0 var(--espresso);
  border-bottom-color:var(--espresso)!important}
.navbtn:hover{transform:translate(1px,1px);box-shadow:2px 2px 0 var(--espresso)}
.burger{display:none;background:none;border:2px solid var(--espresso);border-radius:3px;
  padding:.35rem .6rem;font-size:1.1rem;cursor:pointer;color:var(--espresso)}

/* ---- LAYOUT ---- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 1.5rem}
section{padding:4.5rem 0}
.eyebrow{font-size:.72rem;font-weight:800;letter-spacing:.22em;text-transform:uppercase;
  color:var(--green);margin-bottom:.9rem}
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.02;letter-spacing:-.01em}
h1{font-size:clamp(2.9rem,7.4vw,5.6rem);line-height:.96}
h2{font-size:clamp(1.9rem,4.2vw,3.1rem);margin-bottom:1.1rem}
h3{font-size:1.25rem;line-height:1.2}
.script{font-family:var(--script);font-weight:700;font-size:clamp(1.6rem,3.2vw,2.3rem);
  color:var(--green);line-height:1.15}
.lede{font-size:1.1rem;max-width:58ch;color:var(--espresso-soft)}

/* ---- BUTTONS ---- */
.btn{display:inline-block;font-family:var(--body);font-weight:800;font-size:.84rem;
  letter-spacing:.11em;text-transform:uppercase;text-decoration:none;padding:.95rem 1.7rem;
  border:var(--rule);border-radius:3px;background:var(--gold);color:var(--espresso);
  box-shadow:var(--shadow);transition:transform .12s,box-shadow .12s;cursor:pointer;text-align:center}
.btn:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--espresso)}
.btn-2{background:var(--cream-pale)}
.btn-3{background:var(--green);color:var(--cream-pale)}
.btn small{display:block;font-size:.66rem;font-weight:600;letter-spacing:.08em;
  opacity:.72;margin-top:.15rem;text-transform:uppercase}

/* ---- HERO ---- */
.hero{padding:3.5rem 0 2rem;position:relative}
.hero-grid{display:grid;grid-template-columns:1.02fr 1.1fr;gap:3rem;align-items:start}
.hero h1,.welcome h1{margin:.3rem 0 .1rem}
.hero h1 .g,.welcome h1 .g{color:var(--green);display:block}
.hero-tag{margin:.9rem 0 1.1rem}
.hero-cta{display:flex;gap:.85rem;flex-wrap:wrap;margin-top:1.8rem}
.hero-art{position:relative}

/* ---- THE WORLD — the courtyard sits behind the entire site --------- */
.worldbg{position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:url(images/hero-welcome.png) center top/cover no-repeat}
.worldbg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(247,239,219,.80) 0%, rgba(247,239,219,.90) 45%, rgba(247,239,219,.94) 100%)}

/* Page content floats over the world as cream panels, so the courtyard
   shows through in the gutters between them. */
body > section, body > .values, body > .anthem, body > .stats{position:relative}
body > section::before{content:"";position:absolute;inset:0 max(0px,calc(50% - var(--maxw)/2 - 10px));
  background:var(--cream);border:3px solid var(--espresso);border-radius:14px;
  box-shadow:0 10px 0 rgba(62,42,22,.14);z-index:-1}
body > section{margin:1.6rem 0}
body > section > .wrap{position:relative;z-index:1}

/* ---- THE STAGE — full-bleed hero you can walk around in ---- */
.stage{position:relative;min-height:min(94vh,1000px);
  /* side columns keep a usable width so the photo captions never squash */
  display:grid;grid-template-columns:minmax(215px,1fr) auto minmax(215px,1fr);
  gap:1.6rem;align-items:center;
  padding:1.5rem;overflow:hidden;border-bottom:3px solid var(--espresso);
  isolation:isolate;background:var(--cream-deep)}
/* blurred copy of the art fills the page behind everything */
.stage-fill{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
  filter:blur(30px) saturate(1.15) brightness(.72);transform:scale(1.15)}
.stage::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 50%, rgba(62,42,22,.08) 40%, rgba(62,42,22,.42) 100%)}

/* The courtyard keeps the artwork's own square shape, so hotspots are plain
   percentages of this box — no crop maths, nothing to drift out of alignment. */
.stage-art{position:relative;z-index:3;height:100%;aspect-ratio:1/1;
  max-width:100%;min-width:0;
  border:3px solid var(--espresso);border-radius:12px;overflow:hidden;
  box-shadow:0 16px 44px rgba(62,42,22,.55)}
.stage-art > img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s cubic-bezier(.2,.7,.3,1);will-change:transform}
.stage.tilt .stage-art > img{transform:scale(1.04) translate(var(--px,0px),var(--py,0px))}

/* photos pinned up either side of the courtyard */
.stage-side{position:relative;z-index:3;display:grid;gap:1.6rem;justify-items:center}
.polaroid{background:var(--cream-pale);border:3px solid var(--espresso);border-radius:6px;
  padding:.7rem .7rem 0;box-shadow:7px 7px 0 rgba(62,42,22,.5);max-width:290px;
  transform:rotate(var(--rot,-2deg));transition:transform .2s}
.polaroid:hover{transform:rotate(0deg) scale(1.03)}
.polaroid img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;
  border:1.5px solid rgba(62,42,22,.35)}
.polaroid figcaption{font-family:var(--script);font-weight:700;font-size:1.28rem;
  color:var(--espresso);text-align:center;padding:.4rem 0 .55rem;line-height:1.15}
.polaroid figcaption small{display:block;font-family:var(--body);font-size:.62rem;
  font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:var(--green)}
/* Nothing overlaps the courtyard — the welcome panel sits just below it,
   overlapping the stage edge slightly so the two feel joined. */
.welcome{margin-top:-2.2rem!important;padding-top:3.2rem}

/* scroll cue at the foot of the stage */
.stage-down{position:absolute;left:50%;bottom:1rem;transform:translateX(-50%);z-index:5;
  width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
  background:var(--gold);border:2.5px solid var(--espresso);color:var(--espresso);
  box-shadow:3px 3px 0 var(--espresso);text-decoration:none;font-size:1.1rem;
  animation:bobbing 2s ease-in-out infinite}

/* string-light twinkle */
.lights{position:absolute;inset:0;pointer-events:none;z-index:3}
.lights i{position:absolute;width:13px;height:13px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,236,170,.95) 0%,rgba(255,206,90,.5) 38%,transparent 72%);
  animation:twink 3.4s ease-in-out infinite;opacity:.55}
@keyframes twink{0%,100%{opacity:.28;transform:scale(.82)}50%{opacity:.95;transform:scale(1.18)}}

/* clickable places — plain percentages of the square courtyard box */
.hotlayer{position:absolute;inset:0;z-index:3}
.hot{position:absolute;z-index:4;left:var(--l);top:var(--t);width:var(--w);height:var(--h);
  border-radius:8px;text-decoration:none;display:block;
  box-shadow:0 0 0 0 rgba(229,185,60,0);
  transition:background .18s, box-shadow .22s, transform .18s}
.hot:hover,.hot:focus-visible{background:rgba(255,225,140,.26);transform:scale(1.035);
  box-shadow:0 0 0 3px var(--gold), 0 0 26px 6px rgba(229,185,60,.6);outline:none}
.hot::after{content:attr(data-label);position:absolute;left:50%;bottom:calc(100% + 10px);
  transform:translate(-50%,6px);white-space:nowrap;pointer-events:none;
  background:var(--espresso);color:var(--cream-pale);font-size:.7rem;font-weight:800;
  letter-spacing:.09em;text-transform:uppercase;padding:.45rem .75rem;border-radius:4px;
  border:2px solid var(--gold);opacity:0;transition:opacity .18s, transform .18s;z-index:5}
.hot:hover::after,.hot:focus-visible::after{opacity:1;transform:translate(-50%,0)}
/* flip the tooltip below for hotspots near the top edge */
.hot.low::after{bottom:auto;top:calc(100% + 10px)}

.scene-hint{position:absolute;left:0;right:0;bottom:4.6rem;z-index:5;text-align:center;
  font-size:.7rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--cream-pale);text-shadow:0 2px 6px rgba(62,42,22,.9);pointer-events:none}
.scene-hint span{display:inline-block;animation:bobbing 2.2s ease-in-out infinite;
  background:rgba(62,42,22,.6);padding:.45rem .95rem;border-radius:100px;
  border:1.5px solid rgba(229,185,60,.6)}
@keyframes bobbing{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}

/* ---- SPEECH BUBBLE over a photo (the mugshot) ---- */
.speaks{position:relative;overflow:visible}
.speaks > img{border-radius:9px}
/* Overhangs the top-right corner so it reads loud without burying her face */
.bubble{position:absolute;z-index:4;top:-9%;right:-6%;max-width:min(70%,460px);
  background:var(--cream-pale);border:4px solid var(--espresso);border-radius:26px;
  padding:1.15rem 1.5rem;box-shadow:7px 7px 0 var(--espresso);
  font-family:var(--script);font-weight:700;font-size:clamp(1.5rem,3.1vw,2.6rem);
  line-height:1.1;color:var(--espresso);text-align:center;rotate:-2deg;
  animation:bubblein .5s cubic-bezier(.3,1.5,.5,1) both}
.bubble::after,.bubble::before{content:"";position:absolute;left:16%;
  width:0;height:0;border:20px solid transparent}
.bubble::before{bottom:-40px;border-top-color:var(--espresso)}
.bubble::after{bottom:-31px;border-top-color:var(--cream-pale)}
@media (max-width:980px){
  .bubble{position:static;max-width:none;rotate:0deg;margin-bottom:1rem;
    font-size:clamp(1.35rem,5vw,1.9rem)}
  .bubble::before,.bubble::after{display:none}
}
@keyframes bubblein{from{opacity:0;transform:scale(.82) translateY(10px)}to{opacity:1;transform:none}}

/* ---- WARNING PANEL ---- */
.warning{background:var(--cream-pale);border:3px dashed var(--coral);border-radius:6px;
  padding:1.5rem 1.7rem;box-shadow:6px 6px 0 rgba(196,85,61,.28);margin-top:2.6rem}
.warning h4{font-family:var(--display);font-size:1.15rem;color:var(--coral);
  letter-spacing:.02em;margin-bottom:.7rem}
.warning ul{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));
  gap:.5rem 1.5rem;font-size:.93rem;color:var(--espresso-soft)}
.warning li{padding-left:1.4rem;position:relative}
.warning li::before{content:"🍪";position:absolute;left:0;font-size:.8rem;top:.22rem}

/* ---- SCROLL-REVEAL SPLIT (the rescue image wipes gloom → sunshine) ---- */
.split{position:relative;border:3px solid var(--espresso);border-radius:10px;overflow:hidden;
  box-shadow:10px 10px 0 var(--gold)}
/* video embed — aspect ratio set per-video via --ar (default vertical) */
.video-embed{position:relative;width:100%;max-width:400px;aspect-ratio:var(--ar,9/16);
  overflow:hidden;border:3px solid var(--espresso);border-radius:10px;
  box-shadow:8px 8px 0 var(--green);background:var(--espresso);margin:0 auto}
.video-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
/* the nanas heckle the video — granny stays put, her speech bubble shakes on hover */
.hecklers{position:relative;max-width:1040px;margin:0 auto}
.hecklers .video-embed{position:relative;z-index:2}
.heckler{position:absolute;z-index:3}
.heckler.h1{width:21%;top:-1%;left:-1%}
.heckler.h2{width:20%;bottom:0;left:0}
.heckler.h3{width:18%;top:30%;right:-1%}
.hk-g,.hk-b{position:absolute;height:auto;filter:drop-shadow(3px 5px 4px rgba(62,42,22,.26))}
.hk-b{transform-origin:16% 82%;z-index:2}
.heckler:hover .hk-b{animation:bubble-shake .5s ease-in-out infinite}
@keyframes bubble-shake{0%,100%{transform:rotate(0)}20%{transform:rotate(-4deg)}
  40%{transform:rotate(3deg)}60%{transform:rotate(-2.5deg)}80%{transform:rotate(2deg)}}
@media(max-width:860px){
  /* Stack the nanas under the video. Keep position:relative — the granny and
     bubble inside are absolutely positioned, so a static parent would let them
     escape onto the video and leave an empty box behind. */
  .hecklers{display:flex;flex-direction:column;align-items:center;gap:.4rem}
  .heckler{position:relative;width:70%!important;
    top:auto;right:auto;bottom:auto;left:auto;margin:0}
  .heckler.h1{order:1}
  .hecklers .video-embed{order:2;margin:.6rem auto}
  .heckler.h2{order:3}
  .heckler.h3{order:4;width:62%!important}
  /* bubbles shake on tap, since there is no hover on a phone */
  .heckler:active .hk-b{animation:bubble-shake .5s ease-in-out infinite}
}
@media(prefers-reduced-motion:reduce){.heckler:hover .hk-b{animation:none}}
.split img{width:100%;display:block}
.split .peel{position:absolute;inset:0;background:var(--cream-deep);
  clip-path:inset(0 0 0 46%);transition:clip-path 1.5s cubic-bezier(.2,.75,.25,1);
  display:grid;place-items:center;text-align:center;padding:2rem}
.split.done .peel{clip-path:inset(0 0 0 100%)}
.split .peel b{font-family:var(--display);font-size:clamp(1.2rem,2.6vw,2rem);
  color:var(--espresso-mute);line-height:1.15;opacity:.55}
.split-cap{display:flex;justify-content:space-between;gap:1rem;margin-top:.8rem;
  font-size:.68rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase}
.split-cap .a{color:var(--espresso-mute)}
.split-cap .b{color:var(--green)}

/* ---- THE BANANOMETER (signature) ---------------------------------- */
.bnm{border:var(--rule);border-radius:6px;background:var(--cream-pale);
  box-shadow:var(--shadow);padding:1.1rem 1.2rem 1rem;margin-top:2.2rem;position:relative}
.bnm-kicker{display:block;font-size:.66rem;font-weight:800;letter-spacing:.26em;
  text-transform:uppercase;color:var(--espresso-soft)}
.bnm-title{font-size:1.15rem;letter-spacing:.02em;margin:.1rem 0 .9rem}
.bnm-title .hrt{color:var(--coral);font-family:var(--body);font-size:.85rem;vertical-align:.15em}
.bnm-track{list-style:none;display:grid;grid-template-columns:repeat(7,1fr);gap:.3rem}
.bnm-day{text-align:center;position:relative}
.bnm-day .chip{display:block;border:2px solid var(--espresso);border-radius:3px;
  background:var(--c);height:26px;margin-bottom:.4rem;position:relative;
  transition:transform .18s,box-shadow .18s}
.bnm-day b{display:block;font-family:var(--display);font-size:.82rem;letter-spacing:.03em}
.bnm-day span{display:block;font-size:.58rem;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--espresso-mute);line-height:1.35;margin-top:.15rem}
.bnm-day.is-past{opacity:.42}
.bnm-day.is-now .chip{transform:translateY(-4px);box-shadow:0 4px 0 var(--espresso);height:32px;margin-top:-6px}
.bnm-day.is-now b{color:var(--coral)}
.bnm-day.is-now span{color:var(--espresso);font-weight:800}
.bnm-day.is-now::after{content:"▲";position:absolute;left:0;right:0;bottom:-1.15rem;
  font-size:.6rem;color:var(--coral)}
.bnm-foot{margin-top:1.6rem;font-size:.7rem;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:var(--green);text-align:center}

/* ---- DROP CARD ---- */
.drop{background:var(--cream-pale);border:3px solid var(--espresso);border-radius:5px;
  box-shadow:8px 8px 0 var(--green);padding:1.6rem;position:relative}
.drop::before{content:"";position:absolute;inset:-3px -3px auto -3px;height:9px;border-radius:5px 5px 0 0;
  background:linear-gradient(90deg,var(--r1),var(--r2) 18%,var(--r3) 36%,var(--r4) 56%,var(--r5) 74%,var(--r6) 90%,var(--r7))}
.drop h3{margin:.6rem 0 .1rem;font-size:1.9rem}
.drop-meta{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;font-weight:800;color:var(--green)}
.drop-note{font-size:.86rem;color:var(--espresso-soft);margin:.5rem 0 1rem;line-height:1.5}
.drop-row{display:flex;justify-content:space-between;align-items:center;gap:.8rem;
  padding:.55rem 0;border-bottom:1px dashed rgba(62,42,22,.26);font-size:.92rem}
.drop-row:last-of-type{border:0}
.drop-row b{font-weight:600;display:flex;align-items:center;gap:.55rem}
.drop-row .ico{width:26px;height:26px;flex:none;border-radius:3px;object-fit:contain}
.left{color:var(--coral);font-weight:800}
/* order-window countdown */
.closes{display:flex;flex-direction:column;gap:.12rem;text-align:center;
  background:var(--espresso);color:var(--cream-pale);border-radius:5px;
  padding:.75rem .6rem;margin:.3rem 0 1.1rem;border:2px solid var(--green-deep)}
.closes-lab{font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;font-weight:800;opacity:.82}
.closes-time{font-family:var(--display);font-size:1.55rem;color:var(--yellow);line-height:1.05;
  font-variant-numeric:tabular-nums}
.closes-sub{font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;opacity:.72}
.closes.closed{background:var(--cream-deep);color:var(--espresso);border-color:var(--espresso)}
.closes.closed .closes-time{font-size:1.05rem;color:var(--espresso)}
.closes.closed .closes-sub{color:var(--espresso-soft)}
/* baked-to-order availability tag (replaces the "N left" counts) */
.avail{color:var(--green);font-weight:800;font-size:.78rem;white-space:nowrap;
  display:flex;align-items:center;gap:.4rem}
.avail::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--green);
  box-shadow:0 0 0 3px rgba(95,114,56,.22)}
/* coming-soon strip with per-item countdowns */
.soon{margin-top:1.2rem;border-top:2px dashed rgba(74,53,32,.28);padding-top:1rem}
.soon-lab{font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;font-weight:800;
  color:var(--speckle);margin-bottom:.5rem}
.soon-row{display:flex;justify-content:space-between;align-items:baseline;gap:.7rem;padding:.4rem 0}
.soon-row b{font-weight:700;font-size:.9rem}
.soon-row small{display:block;font-weight:400;color:var(--espresso-soft);font-size:.75rem;margin-top:.05rem}
.soon-when{font-family:var(--display);font-size:.98rem;color:var(--coral);white-space:nowrap;
  font-variant-numeric:tabular-nums}
.soon-when.live{color:var(--green)}
.soon-when.soon-tbd{font-family:var(--body);font-weight:800;font-size:.64rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--speckle);opacity:.8}
.gone{color:var(--espresso-mute);text-decoration:line-through;opacity:.65}
.stamp{display:inline-block;font-family:var(--display);font-size:.66rem;letter-spacing:.06em;
  color:var(--coral);border:2.5px solid var(--coral);padding:.2rem .5rem;border-radius:3px;
  transform:rotate(-6deg);margin-left:.4rem;text-transform:uppercase}

/* ---- TAPE (washi corners on cards) ---- */
.taped{position:relative}
.taped::before,.taped::after{content:"";position:absolute;width:74px;height:24px;
  background:rgba(229,185,60,.45);border:1px solid rgba(62,42,22,.18);z-index:3}
.taped::before{top:-11px;left:-14px;transform:rotate(-7deg)}
.taped::after{top:-11px;right:-14px;transform:rotate(6deg)}

/* ---- SEAL (round badge) ---- */
.seal{width:132px;height:132px;border-radius:50%;border:2.5px solid var(--espresso);
  background:var(--cream-pale);display:grid;place-items:center;text-align:center;
  padding:1rem;transform:rotate(-7deg);flex:none;box-shadow:3px 3px 0 rgba(62,42,22,.18)}
.seal em{font-family:var(--script);font-style:normal;font-weight:700;font-size:1.1rem;
  color:var(--green);line-height:1.05;display:block}
.seal span{font-size:.5rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--espresso-soft);display:block;line-height:1.5}

/* ---- VALUE STRIP ---- */
.values{background:var(--cream-deep);border-top:var(--rule);border-bottom:var(--rule);padding:1.4rem 0}
.values .wrap{display:grid;grid-template-columns:repeat(5,1fr);gap:1rem}
.value{display:flex;align-items:center;gap:.7rem;justify-content:center;text-align:left}
.value+.value{border-left:1px dashed rgba(62,42,22,.28);padding-left:1rem}
.value .gl{font-size:1.25rem;flex:none}
.value b{display:block;font-size:.68rem;font-weight:800;letter-spacing:.13em;
  text-transform:uppercase;line-height:1.45}

/* ---- WOODEN SIGN SECTION HEADER ---- */
.sign{max-width:520px;margin:0 auto 2.2rem}
.sign img{width:100%}

/* ---- STATS ---- */
.stats{background:var(--espresso);color:var(--cream);
  border-top:3px solid var(--green-deep);border-bottom:3px solid var(--green-deep)}
.stats .wrap{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;
  padding-top:2.8rem;padding-bottom:2.8rem;text-align:center}
.stat b{display:block;font-family:var(--display);font-size:clamp(2.1rem,4.6vw,3.2rem);
  color:var(--gold);line-height:1}
.stat span{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;font-weight:700;opacity:.88}

/* ---- CARDS ---- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:1.5rem}
.card{background:var(--cream-pale);border:var(--rule);border-radius:5px;padding:1.5rem;
  box-shadow:5px 5px 0 rgba(62,42,22,.16);transition:transform .14s,box-shadow .14s}
.card:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 rgba(62,42,22,.2)}
.card .art{margin:-1.5rem -1.5rem 1.1rem;border:0;border-bottom:var(--rule);border-radius:5px 5px 0 0}
.card .price{font-family:var(--display);font-size:1.35rem;color:var(--green);margin-top:.6rem}
.card p{font-size:.93rem;color:var(--espresso-soft);margin-top:.5rem}

/* ---- RIPENESS SCALE ---- */
.scale{display:flex;gap:0;border:var(--rule);border-radius:4px;overflow:hidden;margin:1.4rem 0 .5rem}
.scale i{flex:1;height:34px;display:block}
.scale-lab{display:flex;justify-content:space-between;font-size:.65rem;letter-spacing:.13em;
  text-transform:uppercase;font-weight:800;color:var(--espresso-mute)}

/* ---- MENU ---- */
.menu-sec{border-top:2.5px dashed rgba(62,42,22,.3);padding-top:2.4rem;margin-top:2.4rem}
.menu-sec:first-of-type{border:0;margin-top:0;padding-top:0}
.item{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  padding:.8rem 0;border-bottom:1px dashed rgba(62,42,22,.22)}
.item h4{font-family:var(--body);font-weight:700;font-size:1.02rem}
.item small{display:block;font-weight:400;color:var(--espresso-soft);font-size:.86rem;margin-top:.15rem}
.item .p{font-family:var(--display);font-size:1.05rem;color:var(--green);white-space:nowrap}
.pill-row{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem}
.pill{font-size:.8rem;font-weight:600;background:var(--cream-deep);
  border:1.5px solid rgba(62,42,22,.35);border-radius:100px;padding:.35rem .85rem}
.pill.n{background:var(--gold)}

/* ---- GLAZE SWATCHES ---- */
.glazes{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1rem;margin-top:1.4rem}
.glaze{border:var(--rule);border-radius:5px;background:var(--cream-pale);overflow:hidden;
  box-shadow:4px 4px 0 rgba(62,42,22,.14);transition:transform .14s,box-shadow .14s}
.glaze:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 rgba(62,42,22,.18)}
/* Real glaze "paint chips" — a texture patch cropped from each glaze photo,
   with the flat --c colour as the fallback while the image loads. */
.glaze .sw{height:64px;border-bottom:var(--rule);background:var(--c);
  background-image:var(--chip);background-size:cover;background-position:center;
  box-shadow:inset 0 -14px 20px -14px rgba(62,42,22,.4)}
.glaze .tx{padding:.75rem .9rem .9rem}
.glaze h4{font-family:var(--body);font-weight:700;font-size:.95rem}
.glaze small{display:block;color:var(--espresso-soft);font-size:.81rem;margin-top:.2rem;line-height:1.45}

/* ---- RESIDENTS (admissions) ---- */
.quote{font-family:var(--script);font-weight:600;font-size:1.3rem;color:var(--green);
  line-height:1.2;margin-top:.35rem}
.charges{margin-top:.9rem;background:var(--cream);border:1.5px solid rgba(62,42,22,.3);
  border-radius:4px;padding:.7rem .95rem}
.charges b{display:block;font-size:.6rem;font-weight:800;letter-spacing:.2em;
  text-transform:uppercase;color:var(--coral);margin-bottom:.35rem}
.charges ul{list-style:none;font-size:.82rem;color:var(--espresso-soft);line-height:1.5}
.charges li{padding:.16rem 0 .16rem 1.15rem;position:relative}
.charges li::before{content:"🍌";position:absolute;left:0;top:.3rem;font-size:.6rem}
.rules-check li::before{content:"☑";color:var(--green);font-size:.85rem;top:.16rem}

/* ---- BUILD-YOUR-OWN ---- */
.builder{display:grid;grid-template-columns:.95fr 1.05fr;gap:2.2rem;align-items:start;
  background:var(--cream-pale);border:3px solid var(--espresso);border-radius:12px;
  padding:1.8rem;box-shadow:8px 8px 0 var(--green);margin-top:1.6rem}
.bld-stage{position:relative;aspect-ratio:1/1;border:2.5px solid var(--espresso);
  border-radius:10px;overflow:hidden;background:var(--cream-deep);display:grid;place-items:center}
/* sits behind the layers, so it only shows while the art is still missing */
.bld-stage::before{content:"🍌 Preview\A drop the layer art into /images/build/";white-space:pre;
  text-align:center;font-size:.72rem;font-weight:700;letter-spacing:.08em;line-height:2;
  color:var(--espresso-mute);z-index:0}
.bld-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.bld-stage .lyr{opacity:0;transition:opacity .28s}
.bld-stage .lyr.on{opacity:1}
/* stand-in until the layer art exists: a glaze-coloured pour + topping speckle */
.bld-fallback{position:absolute;inset:0;pointer-events:none}
.bld-fallback .pour{position:absolute;left:12%;right:12%;top:20%;height:40%;border-radius:50%/42%;
  background:radial-gradient(60% 55% at 50% 38%, var(--gz,transparent) 0%, transparent 74%);
  opacity:0;transition:opacity .3s;mix-blend-mode:multiply;filter:blur(3px)}
.bld-fallback .pour.on{opacity:.7}
.bld-fallback .spk{position:absolute;left:16%;right:16%;top:24%;height:20%;opacity:0;
  transition:opacity .3s;border-radius:50%/40%;
  background:radial-gradient(circle at 22% 40%, var(--tp,#8a6b4a) 0 4px, transparent 5px),
             radial-gradient(circle at 58% 26%, var(--tp,#8a6b4a) 0 3px, transparent 4px),
             radial-gradient(circle at 78% 55%, var(--tp,#8a6b4a) 0 4px, transparent 5px),
             radial-gradient(circle at 38% 66%, var(--tp,#8a6b4a) 0 3px, transparent 4px),
             radial-gradient(circle at 68% 78%, var(--tp,#8a6b4a) 0 4px, transparent 5px)}
.bld-fallback .spk.on{opacity:.95}
.bld-name{font-family:var(--display);font-size:clamp(1.3rem,2.6vw,2rem);line-height:1.05;
  color:var(--green);margin-top:1rem}
.bld-price{font-family:var(--display);font-size:1.7rem;color:var(--espresso);margin-top:.2rem}
.bld-note{font-size:.84rem;color:var(--espresso-soft);margin-top:.45rem;min-height:1.2em}
.bld-group{margin-bottom:1.2rem}
.bld-group > b{display:block;font-size:.68rem;font-weight:800;letter-spacing:.2em;
  text-transform:uppercase;color:var(--green);margin-bottom:.55rem}
.opts{display:flex;flex-wrap:wrap;gap:.45rem}
.opt{display:inline-flex;align-items:center;gap:.45rem;cursor:pointer;
  font-size:.83rem;font-weight:600;background:var(--cream);border:2px solid rgba(62,42,22,.4);
  border-radius:100px;padding:.34rem .8rem;transition:transform .12s,box-shadow .12s,background .15s}
.opt input{position:absolute;opacity:0;width:0;height:0}
.opt .dot{width:15px;height:15px;border-radius:50%;border:1.5px solid var(--espresso);
  background:var(--c,var(--cream-deep));flex:none}
.opt:hover{transform:translateY(-1px)}
.opt:has(input:checked){background:var(--gold);border-color:var(--espresso);
  box-shadow:2px 2px 0 var(--espresso);font-weight:800}
.opt:has(input:focus-visible){outline:3px solid var(--coral);outline-offset:2px}
@media (max-width:820px){ .builder{grid-template-columns:1fr} }

/* ---- STEPS ---- */
.steps{counter-reset:s;display:grid;gap:1.3rem}
.step{display:grid;grid-template-columns:auto 1fr;gap:1.2rem;align-items:start}
.step::before{counter-increment:s;content:counter(s);font-family:var(--display);font-size:1.4rem;
  width:52px;height:52px;display:grid;place-items:center;background:var(--gold);
  border:var(--rule);border-radius:50%;box-shadow:3px 3px 0 var(--espresso);flex:none}

/* ---- CALLOUT ---- */
.callout{background:var(--green);color:var(--cream-pale);border:3px solid var(--espresso);
  border-radius:5px;padding:2.1rem;box-shadow:7px 7px 0 var(--espresso)}
.callout h2,.callout h3{color:var(--cream-pale)}
.callout a{color:var(--gold)}
.callout .eyebrow{color:var(--gold)}

/* ---- TABLE ---- */
table{width:100%;border-collapse:collapse;font-size:.93rem;margin:1.2rem 0}
th{background:var(--espresso);color:var(--cream);text-align:left;padding:.7rem .9rem;
  font-size:.7rem;letter-spacing:.14em;text-transform:uppercase}
td{padding:.7rem .9rem;border-bottom:1px solid rgba(62,42,22,.2);vertical-align:top}
tr:nth-child(even) td{background:rgba(107,76,46,.05)}

/* ---- FOOTER ---- */
footer{background:var(--espresso);color:var(--cream);padding:3.2rem 0 2rem;margin-top:0}
footer a{color:var(--gold)}
.f-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:2.2rem}
footer h4{font-family:var(--display);font-size:.95rem;margin-bottom:.8rem;color:var(--gold)}
footer ul{list-style:none;font-size:.9rem;line-height:2}
.f-bot{border-top:1px solid rgba(247,239,219,.22);margin-top:2.4rem;padding-top:1.3rem;
  padding-right:5rem; /* clear of the floating Nana Wisdom banana */
  font-size:.78rem;opacity:.75;display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem}
.legal{background:var(--cream-deep);border:2px solid var(--espresso);border-radius:4px;
  padding:1rem 1.2rem;font-size:.81rem;font-weight:700;letter-spacing:.03em;margin-top:1.5rem}

/* ---- NANA WISDOM (floating banana, every page) ---- */
.wisdom{position:fixed;right:1.2rem;bottom:1.2rem;z-index:180;
  display:flex;align-items:flex-end;gap:.6rem}
.wisdom-btn{width:58px;height:58px;flex:none;border-radius:50%;cursor:pointer;
  background:var(--gold);border:2.5px solid var(--espresso);box-shadow:3px 3px 0 var(--espresso);
  font-size:1.6rem;line-height:1;padding:0;transition:transform .12s,box-shadow .12s}
.wisdom-btn:hover{transform:translate(1px,1px);box-shadow:2px 2px 0 var(--espresso)}
.wisdom-btn.wiggle{animation:wig .5s ease}
@keyframes wig{0%,100%{rotate:0deg}25%{rotate:-13deg}50%{rotate:10deg}75%{rotate:-6deg}}
.wisdom-bubble{order:-1;max-width:250px;background:var(--cream-pale);
  border:2.5px solid var(--espresso);border-radius:12px;padding:.75rem .95rem;
  box-shadow:4px 4px 0 var(--espresso);font-family:var(--script);font-weight:700;
  font-size:1.28rem;line-height:1.2;color:var(--green);position:relative;transform-origin:bottom right}
.wisdom-bubble::after{content:"";position:absolute;right:-9px;bottom:14px;
  width:14px;height:14px;background:var(--cream-pale);
  border-right:2.5px solid var(--espresso);border-bottom:2.5px solid var(--espresso);
  transform:rotate(-45deg)}
.wisdom-bubble.pop{animation:pop .32s cubic-bezier(.3,1.5,.5,1)}
@keyframes pop{from{opacity:0;transform:scale(.7) translateY(8px)}to{opacity:1;transform:none}}

/* ---- ANTHEM BANNER ---- */
.anthem{background:var(--green);color:var(--cream-pale);
  border-top:3px solid var(--espresso);border-bottom:3px solid var(--espresso);
  padding:1.6rem 0;text-align:center}
.anthem b{display:block;font-family:var(--display);font-size:clamp(1.5rem,4vw,2.7rem);
  line-height:1.05;letter-spacing:-.01em}
.anthem span{display:block;font-family:var(--script);font-weight:700;font-size:1.35rem;
  color:var(--gold);margin-top:.35rem}

/* ---- STICKER WALL (celebrity wing) — trading cards ---- */
.stickers{display:grid;grid-template-columns:repeat(auto-fill,minmax(178px,1fr));gap:1.5rem 1.2rem}
.sticker{text-align:center}
.sticker .art{border-radius:10px;background:none;
  filter:drop-shadow(4px 5px 0 rgba(62,42,22,.32));transition:transform .18s}
.sticker .art img{object-fit:contain}
.sticker:hover .art{transform:translateY(-5px) rotate(-1.5deg)}
.sticker h4{font-family:var(--display);font-size:1.02rem;margin-top:.7rem;line-height:1.15}
.sticker small{display:block;font-size:.79rem;color:var(--espresso-soft);margin-top:.25rem;line-height:1.45}
.sticker .as{display:block;font-size:.6rem;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:var(--green);margin-top:.3rem}

/* ---- REVEAL ON SCROLL ---- */
.rv{opacity:0;transform:translateY(18px);transition:opacity .55s ease,transform .55s ease}
.rv.in{opacity:1;transform:none}

/* ---- RESPONSIVE ---- */
@media (max-width:1120px){
  .nav-links{gap:.85rem}
  .nav-links a{font-size:.71rem;letter-spacing:.06em}
  .values .wrap{grid-template-columns:repeat(3,1fr);gap:1.1rem 0}
  .value:nth-child(4){border-left:0;padding-left:0}
}
/* Not enough room either side for the photos — drop them, keep the courtyard */
@media (max-width:1250px){
  .stage{grid-template-columns:1fr;justify-items:center}
  .stage-side{display:none}
  .stage-art{height:auto;width:min(100%,760px)}
}
@media (max-width:980px){
  /* On small screens the courtyard becomes a picture again — hotspots are
     too small to hit reliably, so it shows in full above readable content. */
  .stage{min-height:0;display:block;padding:0;border-bottom:0}
  .stage-art{width:100%;border:0;border-bottom:3px solid var(--espresso);
    border-radius:0;box-shadow:none}
  .stage::after,.stage-fill{display:none}
  .hotlayer,.scene-hint,.stage-down{display:none}
  .worldbg{display:none}
  body > section{margin:0}
  body > section::before{display:none}
  .welcome{margin-top:0!important;padding-top:2.5rem}
  .hero-grid{grid-template-columns:1fr;gap:2.4rem}
  .f-grid{grid-template-columns:1fr 1fr;gap:1.8rem}
  .stats .wrap{grid-template-columns:1fr;gap:1.6rem}
  .burger{display:block}
  .nav-links{display:none;position:absolute;top:100%;left:0;right:0;background:var(--cream-pale);
    flex-direction:column;align-items:stretch;gap:0;border-bottom:var(--rule);padding:.5rem 1.5rem 1rem}
  .nav-links.open{display:flex}
  .nav-links a{padding:.75rem 0;border-bottom:1px dashed rgba(62,42,22,.25);font-size:.8rem}
  .navbtn{margin-top:.6rem;text-align:center}
}
@media (max-width:720px){
  section{padding:3.2rem 0}
  .values .wrap{grid-template-columns:1fr 1fr}
  .value{border-left:0!important;padding-left:0!important}
  .f-grid{grid-template-columns:1fr}
  .bnm-track{grid-template-columns:repeat(7,1fr);gap:.18rem}
  .bnm-day span{display:none}
  .bnm-day.is-now span{display:block;font-size:.55rem}
  .taped::before,.taped::after{width:52px}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none}
}

/* build-your-own: options greyed out once you hit the limit */
.opt.maxed{opacity:.42;cursor:not-allowed}
.opt.maxed:hover{transform:none}

/* casting-call tile that fills the end of the celebrity wing */
.casting{aspect-ratio:200/420;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:.55rem;text-align:center;text-decoration:none;
  padding:1.4rem 1.1rem;border:3px dashed var(--espresso);border-radius:12px;
  background:repeating-linear-gradient(-45deg,var(--cream-pale) 0 14px,var(--cream-deep) 14px 28px);
  color:var(--espresso);transition:transform .18s,box-shadow .18s,background .18s}
.casting:hover{transform:translateY(-5px) rotate(-1.5deg);
  box-shadow:6px 8px 0 rgba(62,42,22,.3);background:var(--gold)}
.casting-star{font-size:2rem;color:var(--gold-deep);line-height:1}
.casting:hover .casting-star{color:var(--espresso)}
.casting b{font-family:var(--display);font-size:1.15rem;line-height:1.05}
.casting-copy{font-size:.82rem;color:var(--espresso-soft);line-height:1.4}
.casting-cta{margin-top:.3rem;font-size:.72rem;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:var(--green)}
.casting:hover .casting-cta{color:var(--espresso)}