:root{--char:#211f26;--char2:#2d2a33;--pink:#ff3fa4;--aqua:#5fe3e0;--purple:#5b2a86;--cream:#fff7ec;--ink:#2a2530}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;font-family:Nunito,system-ui,sans-serif;color:var(--ink);background:var(--cream);line-height:1.6}
img{max-width:100%;display:block}a{color:var(--pink)}
.wrap{max-width:1140px;margin:0 auto;padding:0 20px}
.topbar{background:var(--pink);color:#fff;text-align:center;font-weight:900;padding:8px 12px;font-size:.95rem;letter-spacing:.02em}
.nav{position:sticky;top:0;z-index:10;background:var(--char);display:flex;justify-content:space-between;align-items:center;padding:10px 20px;box-shadow:0 2px 10px rgba(0,0,0,.3)}
.nav nav a{color:#fff;text-decoration:none;margin-left:18px;font-weight:700}
.nav nav a:hover{color:var(--aqua)}
.logo{font-family:Lobster,cursive;text-decoration:none;line-height:1.1}
.pink{color:var(--pink);text-shadow:0 0 12px rgba(255,63,164,.45)}
.aqua{color:var(--aqua);text-shadow:0 0 12px rgba(95,227,224,.5)}
.logo.sm{font-size:1.35rem}
.logo.big{display:flex;flex-direction:column;align-items:center;font-size:clamp(3rem,9vw,6.5rem);margin:0;font-weight:400}
.logo.big .aqua{font-size:1.2em;margin:-.15em 0}
.hero{background-size:cover;background-position:center;color:#fff;text-align:center;padding:70px 20px 80px;min-height:88vh;display:flex;align-items:center;justify-content:center}
.tag{font-size:1.25rem;font-weight:700;margin:14px 0 24px}
.winter-badge{display:inline-flex;flex-direction:column;gap:2px;background:rgba(33,31,38,.85);border:3px solid var(--aqua);border-radius:18px;padding:18px 28px;box-shadow:0 0 25px rgba(95,227,224,.4)}
.winter-badge strong{font-family:Bungee,sans-serif;color:var(--aqua);font-size:clamp(1.3rem,3.5vw,2rem);font-weight:400}
.winter-badge span{font-size:1.15rem;font-weight:700}
.btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:24px}
.btn{display:inline-block;padding:12px 26px;border-radius:999px;font-weight:900;text-decoration:none;font-size:1.05rem}
.pinkbtn{background:var(--pink);color:#fff}.aquabtn{background:var(--aqua);color:var(--char)}
section{padding:70px 0}
.sign{font-family:Lobster,cursive;font-weight:400;font-style:italic;font-size:clamp(2rem,5vw,3rem);color:var(--purple);margin:0 0 18px;line-height:1.2}
.sign.light{color:var(--aqua);text-align:center}
.winter{background:repeating-linear-gradient(45deg,#e8fbfb 0 20px,#dff6f6 20px 40px);text-align:center}
.lead{font-size:1.2rem;max-width:760px;margin:0 auto 28px}
.hours-card{background:var(--char);color:#fff;border-radius:18px;padding:22px 26px;display:grid;gap:14px;max-width:760px;margin:0 auto 34px;grid-template-columns:repeat(3,1fr);border:3px solid var(--pink);text-align:left}
.hours-card .k{display:block;color:var(--aqua);font-family:Bungee;font-size:.85rem}
.hours-card .v{font-weight:700;font-size:1.1rem}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
figure{margin:0;background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 6px 18px rgba(0,0,0,.12)}
figure img{aspect-ratio:4/3;object-fit:cover;width:100%}
figcaption{padding:10px;font-weight:900;color:var(--purple)}
.mocha{margin-top:28px;font-size:1.1rem}
.menu{background:var(--char)}
.combo{display:flex;justify-content:center;align-items:center;gap:18px;flex-wrap:wrap;background:var(--pink);color:#fff;font-family:Bungee;border-radius:16px;padding:14px 24px;max-width:600px;margin:0 auto 30px;font-size:1.3rem;text-align:center}
.combo b{font-size:2rem;font-weight:400;background:#fff;color:var(--pink);padding:2px 14px;border-radius:10px}
.boards{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.board{border-radius:18px;padding:24px;color:#fff;border:4px solid #fff3}
.board.purple{background:linear-gradient(160deg,#6b2fa0,#4a1f73)}
.board.aquaboard{background:linear-gradient(160deg,#1fa9a6,#137a78)}
.board h3{font-family:Lobster;font-weight:400;font-size:2rem;margin:0 0 10px;text-align:center}
table{width:100%;border-collapse:collapse;font-size:1.1rem}
th{font-family:Bungee;font-weight:400;font-size:.85rem;text-align:right;opacity:.85}
td{padding:7px 0;border-bottom:1px dashed #fff5;text-align:right;font-weight:700}
td:first-child{text-align:left}
.note{margin:14px 0 0}.small{font-size:.9rem;opacity:.85}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:30px}
.grid4 img{aspect-ratio:1;object-fit:cover;border-radius:14px;width:100%}
.split{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.split>img{border-radius:18px;box-shadow:0 10px 30px rgba(0,0,0,.2);width:100%;aspect-ratio:4/3;object-fit:cover}
.robot{background:#ffe9f4}
.story{background:var(--cream)}
blockquote{margin:18px 0;padding:18px 22px;background:var(--char);color:#fff;border-left:6px solid var(--pink);border-radius:12px;font-style:italic}
blockquote.alt{border-left-color:var(--aqua)}
cite{display:block;margin-top:8px;font-style:normal;font-weight:900;color:var(--aqua)}
.gallery{background:var(--char2)}
.masonry{columns:4 220px;column-gap:12px}
.masonry img{width:100%;margin-bottom:12px;border-radius:12px;break-inside:avoid}
.fair{background:linear-gradient(135deg,#e8fbfb,#ffe9f4)}
.fair .split>img{aspect-ratio:auto;max-height:520px;object-fit:cover;justify-self:center;width:auto}
.visit{background:var(--cream)}.visit .sign{text-align:center}
.visit-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:stretch}
.visit .hours-card{grid-template-columns:1fr;margin:0;max-width:none}
.visit .btns{justify-content:flex-start;margin-top:4px}
iframe{width:100%;min-height:340px;border:0;border-radius:18px}
footer{background:var(--char);color:#ddd;text-align:center;padding:36px 20px}
footer a{color:var(--aqua)}
@media (max-width:800px){
 .nav{flex-direction:column;gap:6px}.nav nav a{margin:0 8px;font-size:.95rem}
 .hero{min-height:auto;padding:50px 16px 60px}
 .hours-card,.grid3,.boards,.split,.visit-grid{grid-template-columns:1fr}
 .grid4{grid-template-columns:1fr 1fr}
 .split.rev>img{order:-1}
 section{padding:50px 0}
 .masonry{columns:2}
}

.navlogo img{height:44px;width:auto}
.herologo{margin:0}.herologo img{width:min(560px,88vw);height:auto;margin:0 auto;filter:drop-shadow(0 6px 20px rgba(0,0,0,.6))}
.mocha{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap}
.mocha img{width:80px;border-radius:8px}
@media (max-width:800px){.navlogo img{height:38px}}

.footlogo{width:200px;margin:0 auto 10px}
.mapcard{position:relative;display:block;border-radius:18px;overflow:hidden;min-height:300px}
.mapcard img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.mapcard span{position:absolute;left:16px;bottom:16px;background:var(--pink);color:#fff;font-weight:900;padding:10px 18px;border-radius:999px}
.boardimg{margin-top:18px;border-radius:12px;width:100%;aspect-ratio:16/10;object-fit:cover}

:root{--brown:#4a2e1f;--brown2:#6b4430;--crema:#f3e3c7;--green:#1f7a4a}
.navmocha{background:var(--crema);color:var(--brown)!important;padding:6px 14px;border-radius:999px}
.navrda{background:var(--pink);padding:6px 14px;border-radius:999px}
.mpromo{background:linear-gradient(135deg,var(--crema),#fff7ec);border-top:8px solid var(--green);border-bottom:8px solid var(--green)}
.mpromo .sign,.mochapage .sign{color:var(--brown)}
.mp-imgs{position:relative}.mp-imgs>img:first-child{border-radius:18px;width:100%;aspect-ratio:4/3;object-fit:cover;box-shadow:0 10px 30px rgba(0,0,0,.2)}
.mp-logo{position:absolute;right:-10px;bottom:-20px;width:120px;border-radius:12px;box-shadow:0 6px 18px rgba(0,0,0,.3)}
.kicker{font-family:Bungee;color:var(--green);margin:0 0 4px}
.btns.left{justify-content:flex-start}
.mochabtn{background:var(--brown);color:#fff}.creambtn{background:var(--crema);color:var(--brown)}
.ddbtn{background:#eb1700;color:#fff}.btn.big{font-size:1.25rem;padding:16px 34px}
.mochapage{background:#fbf5ea}.mochapage .nav{background:var(--brown)}
.mochabar{background:var(--green)}
.mhero-logo{width:min(240px,60vw);margin:0 auto;border-radius:16px;box-shadow:0 8px 30px rgba(0,0,0,.5)}
.mochabadge{border-color:var(--crema)}.mochabadge strong{color:var(--crema)}
.mintro{background:#fbf5ea}.mdd{background:var(--brown);color:#fff;text-align:center}.mdd .sign.light{color:var(--crema)}
.center{text-align:center}
.mmenu{background:var(--crema)}.mmenu .sign{text-align:center}
.menuimg{border-radius:18px;margin:0 auto;box-shadow:0 10px 30px rgba(0,0,0,.25);width:100%;max-width:1024px}
.mgrid figure img{aspect-ratio:1}.mgrid figcaption,.mgallery figcaption{color:var(--brown)}
.mgallery{background:#fbf5ea}.mgallery .grid3{row-gap:22px}
.mochapage .hours-card{border-color:var(--green)}.mochapage .hours-card .k{color:var(--crema)}
.mfoot{width:110px;border-radius:10px}
.footcols{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:1000px;margin:10px auto;text-align:left}
.footcols h4{font-family:Lobster;font-weight:400;color:var(--pink);font-size:1.3rem;margin:0 0 6px}
.footcols p{margin:0 0 8px}
@media (max-width:800px){.footcols{grid-template-columns:1fr;text-align:center}.mp-logo{width:90px;right:6px}.mgrid{grid-template-columns:1fr 1fr}}

.nav nav{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 0}.nav nav a{white-space:nowrap}
@media (max-width:800px){.nav nav a{margin:0 6px}.mhero-logo{width:170px}}

.styles{text-align:center;font-weight:900;margin:-6px 0 10px;color:#ffd6f0}
.coffee{margin-top:28px;background:#fff7ec;color:var(--ink);border-radius:18px;padding:26px;border:4px solid var(--aqua)}
.coffee h3{font-family:Lobster;font-weight:400;font-size:2.2rem;color:var(--purple);margin:0;text-align:center}
.cf-lead{text-align:center;font-size:1.2rem;margin:4px 0 18px}
.cf-cols{display:grid;grid-template-columns:1fr 1fr 1.3fr;gap:22px}
.cf-cols h4{font-family:Bungee;font-weight:400;color:var(--pink);margin:0 0 8px}
.cf-cols ul{margin:0;padding-left:20px;font-weight:700}
.cf-cols ul.now li{font-size:1.25rem;color:var(--purple)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:0}.chips span{background:var(--char);color:var(--aqua);padding:5px 12px;border-radius:999px;font-weight:700;font-size:.9rem}
@media (max-width:800px){.cf-cols{grid-template-columns:1fr}.coffee{padding:20px}}
th{vertical-align:bottom;line-height:1.2;padding-left:8px}

.items{list-style:none;padding:0;margin:0;font-size:1.2rem;font-weight:700}
.items li{padding:9px 0;border-bottom:1px dashed #fff5;text-align:center}
.sizes{text-align:center;font-weight:900;margin:14px 0 0;color:#ffd6f0}