:root{--sun:#f4a940;--yolk:#fad230;--sea:#4db3e6;--deep:#1f6fa3;--ink:#1c2230;--cream:#fffaf0;--paper:#fff}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{font-family:'Nunito Sans',sans-serif;color:var(--ink);background:var(--cream);font-size:1.05rem}
h1,h2,h3,.hero-title{font-family:'Alfa Slab One',serif;font-weight:400;letter-spacing:.01em}
a{color:var(--deep)}
.topbar{background:var(--ink);color:#fff;font-size:.9rem;padding:.4rem 0;font-weight:600}
.topbar a{color:var(--yolk);text-decoration:none;font-weight:800}
.navbar{background:var(--paper);border-bottom:4px solid var(--yolk)}
.navbar-brand{display:flex;align-items:center;gap:.65rem;font-family:'Alfa Slab One',serif;font-size:1.25rem;color:var(--ink)}
.navbar-brand img{border-radius:50%;border:2px solid var(--ink)}
.nav-link{font-weight:700;color:var(--ink)!important}
.nav-link:hover{color:var(--deep)!important}
.btn-buppa{background:var(--yolk);color:var(--ink);font-weight:800;border:2px solid var(--ink);border-radius:50rem;box-shadow:3px 3px 0 var(--ink)}
.btn-buppa:hover{background:#ffe252;color:var(--ink);transform:translate(-1px,-1px)}
.btn-ghost{background:#fff;color:var(--ink);font-weight:800;border:2px solid var(--ink);border-radius:50rem}
.btn-ghost:hover{background:var(--ink);color:#fff}
.hero{position:relative;background:var(--sun);padding:4.5rem 0 8rem;overflow:hidden}
.rays{position:absolute;inset:-60% -20% auto -20%;height:220%;background:repeating-conic-gradient(from 0deg at 50% 50%,var(--yolk) 0 6deg,var(--sun) 6deg 20deg,#fff 20deg 21.5deg,var(--sun) 21.5deg 36deg);opacity:.55;mask-image:radial-gradient(circle at 50% 50%,#000 0,transparent 55%);-webkit-mask-image:radial-gradient(circle at 50% 50%,#000 0,transparent 55%)}
.eyebrow-pill{display:inline-block;background:var(--ink);color:var(--yolk);font-weight:800;letter-spacing:.14em;text-transform:uppercase;font-size:.8rem;padding:.4rem 1rem;border-radius:50rem}
.hero-title{font-size:clamp(2.8rem,8vw,5.6rem);line-height:1;color:#fff;margin:.4rem 0 1rem;-webkit-text-stroke:0;text-shadow:3px 3px 0 var(--ink),0 0 24px rgba(0,0,0,.25)}
.hero-title span{display:block;color:var(--yolk)}
.hero-sub{font-size:1.25rem;font-weight:700;color:var(--ink);background:rgba(255,255,255,.88);display:inline-block;padding:.8rem 1.1rem;border-radius:.6rem;max-width:34rem}
.mosaic{position:relative;aspect-ratio:1/1;max-width:460px;margin:0 auto}
.mosaic img{position:absolute;object-fit:cover;border:5px solid #fff;box-shadow:6px 6px 0 var(--ink);border-radius:.5rem}
.m1{inset:0 22% 22% 0;width:78%;height:78%}
.m2{right:0;top:8%;width:38%;height:38%;transform:rotate(5deg)}
.m3{right:4%;bottom:0;width:46%;height:46%;transform:rotate(-4deg)}
.wave{position:absolute;bottom:-1px;left:0;width:100%;height:70px;fill:var(--cream)}
.section{padding:5rem 0}
.eyebrow{font-weight:800;letter-spacing:.16em;text-transform:uppercase;font-size:.82rem;color:var(--deep);margin-bottom:.4rem}
.section h2{font-size:clamp(1.9rem,4vw,2.8rem);margin-bottom:1rem}
.frame{width:100%;height:auto;border:6px solid #fff;box-shadow:10px 10px 0 var(--sea);border-radius:.6rem}
.perk{background:#fff;border:2px solid var(--ink);border-radius:.8rem;padding:1.4rem;height:100%;box-shadow:5px 5px 0 var(--yolk)}
.perk h3{font-size:1.25rem}
.menu-section{background:var(--sea);background-image:linear-gradient(180deg,#d8f0fc,#fff 40%);}
.menu-section .eyebrow{color:var(--deep)}
.menu-tabs{gap:.5rem}
.menu-tabs .nav-link{border:2px solid var(--ink);border-radius:50rem;background:#fff;color:var(--ink)!important;font-weight:800}
.menu-tabs .nav-link.active{background:var(--ink);color:var(--yolk)!important}
.menu-group{font-size:1.5rem;border-bottom:4px solid var(--sun);padding-bottom:.4rem;margin-bottom:1rem;display:inline-block}
.menu-list{list-style:none;padding:0;margin:0}
.menu-list li{margin-bottom:1rem}
.mi-head{display:flex;align-items:baseline;gap:.5rem}
.mi-name{font-weight:800}
.mi-dots{flex:1;border-bottom:2px dotted rgba(28,34,48,.35);min-width:1rem;transform:translateY(-4px)}
.mi-price{font-weight:800;color:var(--deep);text-align:right;max-width:55%}
.menu-list p{margin:.15rem 0 0;font-size:.95rem;color:#4a5160}
.menu-note{background:var(--yolk);display:inline-block;padding:.3rem .7rem;font-weight:700;font-size:.9rem;border-radius:.3rem}
.menu-fine{font-size:.85rem;color:#4a5160;margin-top:3rem;text-align:center}
.gallery{columns:3 260px;column-gap:1rem}
.gallery img{width:100%;height:auto;margin-bottom:1rem;border:4px solid #fff;box-shadow:4px 4px 0 var(--sun);border-radius:.5rem;break-inside:avoid;display:block}
.contact-section{background:#fff;border-top:4px solid var(--yolk)}
.info{list-style:none;padding:0;margin:1.2rem 0 1.8rem}
.info li{display:flex;gap:1rem;padding:.7rem 0;border-bottom:2px dotted rgba(28,34,48,.25)}
.info strong{min-width:5.5rem;font-family:'Alfa Slab One',serif;font-weight:400;color:var(--deep)}
.map{height:100%;min-height:360px;border:4px solid var(--ink);border-radius:.6rem;overflow:hidden;box-shadow:8px 8px 0 var(--sea)}
.map iframe{width:100%;height:100%;min-height:360px;border:0;display:block}
.footer{position:relative;background:var(--ink);color:#fff;padding:5rem 0 2rem;margin-top:0}
.footer a{color:var(--yolk)}
.footer .wave-top{position:absolute;top:-1px;left:0;width:100%;height:50px;fill:#fff;transform:scaleY(-1)}
.footer img{border-radius:50%;border:3px solid var(--yolk)}
@media(max-width:575px){.hero{padding:3rem 0 6rem}.mi-price{max-width:50%;font-size:.9rem}}