:root{
  --pink: #ffd6e2;
  --pink-deep: #ffb8d2;
  --hotpink: #ff2d78;
  --green: #143d2b;
  --orange: #e8611c;
  --yellow: #ffc93c;
  --cream: #fff8ef;
  --ink: #1c1c1c;
  --radius: 22px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth; background:var(--ink);}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:'Nunito', sans-serif;
  font-weight:600;
  overflow-x:hidden;
}
h1,h2,h3{
  font-family:'Fredoka', sans-serif;
  margin:0;
  color:var(--green);
}
.script{font-family:'Kalam', cursive;}
a{text-decoration:none;color:inherit;}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px;}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important;}
  .marquee-track{animation:none !important; padding-left:0 !important; transform:none !important;}
}

/* ---------- checker strip ---------- */
.checker{
  height:14px;
  background-image:
    linear-gradient(45deg, var(--hotpink) 25%, transparent 25%, transparent 75%, var(--hotpink) 75%),
    linear-gradient(45deg, var(--hotpink) 25%, transparent 25%, transparent 75%, var(--hotpink) 75%);
  background-color:var(--pink);
  background-size:14px 14px;
  background-position:0 0, 7px 7px;
}

/* ---------- nav ---------- */
header{
  position:sticky; top:0; z-index:50;
  background:var(--cream);
  border-bottom:3px solid var(--green);
}
.navrow{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 24px;
  max-width:1120px; margin:0 auto;
}
.brandmark{display:flex; align-items:center; gap:10px;}
.brandmark h1{font-size:1.3rem; letter-spacing:0.5px;}
.badge{
  width:46px;height:46px;border-radius:50%;
  background:var(--pink); border:3px solid var(--green);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.badge img{width:100%;height:100%;object-fit:cover;}
.navlinks{display:flex; gap:22px; align-items:center; font-size:0.95rem;}
.navlinks a{padding:6px 2px; border-bottom:3px solid transparent; transition:border-color .15s;}
.navlinks a:hover, .navlinks a:focus-visible, .navlinks a.active{border-color:var(--hotpink);}
.navtoggle{
  display:none;
  background:var(--cream); border:3px solid var(--green); border-radius:10px;
  width:44px; height:40px; align-items:center; justify-content:center;
  cursor:pointer; flex-direction:column; gap:5px;
}
.navtoggle span{display:block; width:22px; height:3px; background:var(--green); border-radius:2px;}
.btn{
  display:inline-block;
  background:var(--hotpink);
  color:#fff;
  font-family:'Fredoka', sans-serif;
  font-weight:600;
  padding:12px 24px;
  border-radius:100px;
  border:3px solid var(--ink);
  box-shadow:4px 4px 0 var(--ink);
  transition:transform .12s ease;
  white-space:nowrap;
}
.btn:hover, .btn:focus-visible{transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--ink);}
.btn:active{transform:translate(1px,1px); box-shadow:2px 2px 0 var(--ink);}
.btn.ghost{background:var(--hotpink); color:#fff;}
.btn.small{padding:9px 18px; font-size:0.85rem; box-shadow:3px 3px 0 var(--ink);}

/* ---------- hero ---------- */
.hero{background:var(--pink); padding:64px 24px 40px; position:relative; overflow:hidden;}
.hero-inner{max-width:1120px; margin:0 auto; display:grid; grid-template-columns:1.1fr 0.9fr; gap:40px; align-items:center;}
.eyebrow{
  font-family:'Kalam', cursive; font-size:1.15rem; color:var(--orange);
  margin-bottom:6px; display:inline-block; transform:rotate(-2deg);
}
.hero h2{font-size:clamp(2.4rem, 5.5vw, 4.2rem); line-height:0.98; color:var(--green); -webkit-text-stroke:1.5px var(--green);}
.hero h2 span{color:var(--hotpink); -webkit-text-stroke:1.5px var(--green);}
.hero p.sub{font-size:1.1rem; margin:16px 0 24px; max-width:460px; color:var(--ink);}
.hero-ctas{display:flex; gap:14px; flex-wrap:wrap;}
.hero-photo{border-radius:var(--radius); border:4px solid var(--green); box-shadow:8px 8px 0 var(--pink-deep); overflow:hidden;}
.hero-photo img{width:100%; display:block;}

/* ---------- marquee ---------- */
.marquee-band{
  background:var(--green);
  color:var(--cream);
  overflow:hidden;
  white-space:nowrap;
  padding:14px 0;
  border-top:3px solid var(--ink);
  border-bottom:3px solid var(--ink);
}
.marquee-track{
  display:inline-block;
  padding-left:100%;
  animation:scroll 22s linear infinite;
  font-family:'Fredoka', sans-serif;
  font-size:1.05rem;
  letter-spacing:1px;
}
.marquee-track span{margin:0 22px; color:var(--yellow);}
@keyframes scroll{
  0%{transform:translateX(0);}
  100%{transform:translateX(-100%);}
}

/* ---------- section shell ---------- */
section{padding:72px 0;}
.section-head{text-align:center; max-width:640px; margin:0 auto 40px;}
.section-head .eyebrow{display:block; margin-bottom:8px;}
.section-head h3{font-size:2.2rem;}

/* ---------- story ---------- */
.story p{font-size:1.08rem; line-height:1.65; color:var(--ink); margin-bottom:16px; max-width:760px;}
.story strong{color:var(--hotpink);}
.stripe-note{
  display:inline-block; margin-top:6px; background:var(--yellow); border:2px solid var(--green);
  padding:8px 16px; border-radius:100px; font-family:'Fredoka',sans-serif; font-size:0.9rem; transform:rotate(-1deg);
}

/* ---------- rotary carousel ---------- */
.rotary{
  position:relative; overflow:hidden;
  border-radius:var(--radius); border:4px solid var(--green);
  box-shadow:8px 8px 0 var(--pink-deep);
  aspect-ratio:16/10; background:#111; max-width:820px; margin:0 auto;
}
.rotary.portrait{aspect-ratio:3/4; max-width:480px;}
.rotary-track{display:flex; height:100%; transition:transform .5s ease;}
.rotary-track img{width:100%; flex:0 0 100%; height:100%; object-fit:contain; display:block; background:#111;}
.rotary-track video{width:100%; flex:0 0 100%; height:100%; object-fit:contain; display:block; background:#111;}
.rotary-btn{
  position:absolute; top:50%; transform:translateY(-50%);
  background:var(--cream); border:3px solid var(--green); border-radius:50%;
  width:42px;height:42px; display:flex;align-items:center;justify-content:center;
  cursor:pointer; font-family:'Fredoka',sans-serif; font-size:1.2rem; z-index:2;
}
.rotary-btn.prev{left:14px;}
.rotary-btn.next{right:14px;}
.rotary-dots{
  position:absolute; bottom:14px; left:50%; transform:translateX(-50%);
  display:flex; gap:6px; z-index:2;
}
.dot{width:9px;height:9px;border-radius:50%; background:rgba(255,255,255,.55); border:2px solid var(--green); cursor:pointer;}
.dot.active{background:var(--hotpink);}
.rotary-caption{text-align:center; margin-top:14px; font-family:'Kalam',cursive; color:var(--orange); font-size:1.05rem;}

/* ---------- youtube embed ---------- */
.video-wrap{
  position:relative; width:100%; max-width:820px; margin:0 auto;
  aspect-ratio:16/9; border-radius:var(--radius); overflow:hidden;
  border:4px solid var(--green); box-shadow:8px 8px 0 var(--pink-deep);
}
.video-wrap iframe{position:absolute; top:0; left:0; width:100%; height:100%; border:0;}

.map-wrap{
  position:relative; width:100%;
  aspect-ratio:4/3; border-radius:var(--radius); overflow:hidden;
  border:4px solid var(--cream); box-shadow:8px 8px 0 rgba(0,0,0,0.25);
}
.map-wrap iframe{position:absolute; top:0; left:0; width:100%; height:100%; border:0;}

.visit-grid{display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; text-align:left;}
.visit-grid .visit-text{text-align:center;}
@media (max-width: 880px){
  .visit-grid{grid-template-columns:1fr;}
}

/* ---------- half/half callout ---------- */
.split-callout{background:var(--hotpink); color:#fff;}
.split-grid{display:grid; grid-template-columns:1fr 1fr; gap:36px; align-items:center;}
.split-photo{
  border-radius:18px; overflow:hidden; border:4px solid var(--green);
  box-shadow:8px 8px 0 rgba(20,61,43,0.35); max-width:340px; margin:0 auto;
}
.split-photo img{width:100%; display:block;}
.split-callout h3{color:#fff; font-size:2rem; margin-bottom:12px;}
.split-callout p{font-size:1.05rem; line-height:1.6;}

/* ---------- menu ---------- */
.menu{background:var(--pink);}
.menu-toolbar{display:flex; justify-content:center; gap:14px; flex-wrap:wrap; margin-bottom:36px;}
.pill{background:var(--cream); border:2px solid var(--green); border-radius:100px; padding:8px 18px; font-family:'Fredoka',sans-serif; font-size:0.85rem;}
.menu-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:20px;}
.card{
  background:var(--cream); border:3px solid var(--green); border-radius:18px; padding:18px;
  box-shadow:5px 5px 0 var(--green); display:flex; flex-direction:column; gap:8px;
}
.card-img{width:100%; height:140px; object-fit:cover; border-radius:12px; border:2px solid var(--green); margin-bottom:2px;}
.card-top{display:flex; justify-content:space-between; align-items:baseline; gap:10px;}
.card-top h4{font-family:'Fredoka',sans-serif; font-size:1.1rem; color:var(--green); margin:0;}
.price{font-family:'Fredoka',sans-serif; color:var(--hotpink); font-size:1.1rem; white-space:nowrap;}
.card p{margin:0; font-size:0.92rem; color:#333; font-weight:400; line-height:1.4;}
.menu-error{text-align:center; font-family:'Fredoka',sans-serif; color:var(--green); font-size:1.1rem;}
.menu-extras{margin-top:38px; display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.note-box{background:var(--cream); border:2px dashed var(--green); border-radius:16px; padding:18px;}
.note-box h5{font-family:'Fredoka',sans-serif; margin:0 0 8px; color:var(--green); font-size:1rem;}
.note-box p{margin:0 0 6px; font-size:0.9rem; font-weight:400;}

/* ---------- comic strip ---------- */
.comic{background:var(--cream); text-align:center;}
.comic-strip{display:flex; gap:14px; justify-content:center; flex-wrap:wrap; max-width:900px; margin:0 auto;}
.panel{background:var(--pink); border:3px solid var(--green); border-radius:16px; padding:18px; width:200px; box-shadow:4px 4px 0 var(--green); font-family:'Kalam',cursive; font-size:1rem;}
.panel.img-panel{padding:12px; display:flex; align-items:center; justify-content:center;}
.panel.img-panel img{width:100%; height:160px; object-fit:contain;}
.panel.logo-panel{flex-direction:column; gap:10px;}
.panel.logo-panel img{height:110px; border-radius:14px;}
.panel.logo-panel span{font-family:'Fredoka', sans-serif; font-size:1rem; color:var(--green);}

/* ---------- order / visit ---------- */
.order{background:var(--green); color:var(--cream); text-align:center;}
.order h3{color:var(--cream); font-size:2.4rem;}
.order p{max-width:520px; margin:14px auto 26px; font-size:1.1rem; opacity:0.9;}
.phone-cta{font-family:'Fredoka',sans-serif; font-size:2rem; color:var(--yellow); display:inline-block; margin-bottom:24px; border-bottom:3px dotted var(--yellow);}
.order-ctas{display:flex; gap:16px; justify-content:center; flex-wrap:wrap;}
.order .btn{box-shadow:4px 4px 0 var(--yellow);}
.order .btn:hover{box-shadow:6px 6px 0 var(--yellow);}

footer{background:var(--ink); color:#bbb; padding:30px 24px; font-size:0.85rem; text-align:center;}
footer a{color:var(--yellow);}

/* ---------- responsive ---------- */
@media (max-width: 880px){
  .hero-inner{grid-template-columns:1fr; text-align:center;}
  .hero p.sub{margin-left:auto; margin-right:auto;}
  .hero-ctas{justify-content:center;}
  .split-grid{grid-template-columns:1fr;}
  .menu-grid{grid-template-columns:repeat(2,1fr);}
  .menu-extras{grid-template-columns:1fr;}
  .navlinks{
    display:none; position:absolute; top:100%; left:0; right:0;
    flex-direction:column; gap:0; background:var(--cream);
    border-bottom:3px solid var(--green); padding:8px 24px 16px; z-index:60;
  }
  .navlinks.open{display:flex;}
  .navlinks a{padding:12px 0; border-bottom:1px solid rgba(20,61,43,0.15);}
  .navtoggle{display:flex;}
}
@media (max-width: 560px){
  .menu-grid{grid-template-columns:1fr;}
  .phone-cta{font-size:1.5rem;}
}