:root{--ground:#F3EBDD;--ink:#263527;--latte:#E8DCC6;--brew:#3E6A47;--night:#263527;--bytes:#5E6049;--sky:#C9CBAE;--line:#D9CDB6;--muted:#55604F}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ground);color:var(--ink);font:17px/1.6 'IBM Plex Sans','Helvetica Neue',sans-serif}
h1,h2,h3{font-family:Fraunces,Georgia,serif;font-weight:600;line-height:1.05;margin:0}
h1{font-size:clamp(2.6rem,6vw,4.5rem)}
h2{font-size:clamp(1.9rem,3.5vw,2.5rem)}
p{margin:0}
a{color:inherit}
a:focus-visible,button:focus-visible{outline:3px solid var(--bytes);outline-offset:3px}
img{max-width:100%;display:block}
.wrap{max-width:1312px;margin:0 auto;padding:0 clamp(20px,4vw,64px)}
.btn{display:inline-block;padding:14px 26px;border-radius:999px;font-weight:600;text-decoration:none;border:1.5px solid transparent;min-height:44px}
.btn-brew{background:var(--brew);color:#fff}
.btn-bytes{background:var(--bytes);color:#fff}
.btn-ink{background:var(--ink);color:var(--ground)}
.btn-line{border-color:currentColor}
.btn:hover{filter:brightness(1.12)}
.dot{display:inline-block;width:10px;height:10px;border-radius:5px;background:var(--brew);margin-right:8px}
.dot.sq{border-radius:2px;background:var(--bytes)}

/* header */
.site-head{border-bottom:1px solid var(--line)}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:84px;flex-wrap:wrap;padding-top:12px;padding-bottom:12px}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none}
.logo img{height:auto}
.site-head nav{display:flex;align-items:center;gap:28px;flex-wrap:wrap;font-weight:500}
.site-head nav a:not(.btn){text-decoration:none}
.site-head nav a:not(.btn):hover,.site-head nav a[aria-current]{text-decoration:underline;text-underline-offset:6px}

/* split hero */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.half{min-width:0}
.half{padding:clamp(40px,6vw,80px) clamp(20px,4vw,64px);display:flex;flex-direction:column;gap:22px}
.half.cafe{background:var(--latte)}
.half.shop{background:var(--night);color:#E8EEF3}
.half.shop h1{color:#fff}
.floor{font-weight:600;color:var(--brew)}
.shop .floor{color:var(--sky)}
.half p{max-width:34em;font-size:1.1rem}
.photo{width:100%;object-fit:cover;border-radius:16px;aspect-ratio:16/7;display:grid;place-items:center;font-size:.9rem;background:#D8C4AE;color:var(--muted);margin-top:auto}
.shop .photo{width:100%;width:100%;object-fit:cover;background:#22364A;color:#A9C1D6}
.actions{display:flex;gap:12px;flex-wrap:wrap}

/* band */
.band{background:var(--ink);color:var(--ground)}
.band .wrap{display:flex;align-items:center;justify-content:space-between;gap:32px;padding-top:56px;padding-bottom:56px;flex-wrap:wrap}
.band p{color:#D9CCBD;margin-top:8px}
.band .btn{background:var(--ground);color:var(--ink)}

/* sections */
.section{padding:clamp(56px,8vw,96px) 0}
.two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,4vw,56px)}
.head-row{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:24px}
.head-row a{font-weight:600}
.menu{list-style:none;margin:0;padding:0;border-top:1px solid #CBBDAC}
.menu li{display:flex;justify-content:space-between;gap:16px;padding:18px 0;border-bottom:1px solid #CBBDAC}
.menu .price{font-variant-numeric:tabular-nums;font-weight:500}
.menu small{display:block;color:var(--muted)}
.services{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:24px}
.service{background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px}
.service h3{font-family:'IBM Plex Sans',sans-serif;font-size:1.05rem;margin-bottom:6px}
.service p{color:#4A5663;font-size:.95rem}
.note{color:var(--muted);margin-top:20px}
.map{border-radius:16px;background:#E2D7C9;min-height:300px;display:grid;place-items:center;color:var(--muted)}
.hours{display:flex;gap:40px;flex-wrap:wrap;margin-top:20px}
.hours h3{font-family:'IBM Plex Sans',sans-serif;font-size:1rem;margin-bottom:4px}
.hours .c{color:var(--brew)}.hours .r{color:var(--bytes)}
.steps{list-style:none;padding:0;margin:24px 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:24px;counter-reset:s}
.steps li{counter-increment:s}
.steps li::before{content:counter(s);display:grid;place-items:center;width:40px;height:40px;border-radius:20px;background:var(--ink);color:var(--ground);font-weight:600;margin-bottom:12px}

/* page hero (subpages) */
.page-hero{padding:clamp(48px,7vw,88px) 0}
.page-hero.cafe{background:var(--latte)}
.page-hero.shop{background:var(--night);color:#E8EEF3}
.page-hero.shop h1{color:#fff}
.page-hero p{max-width:36em;font-size:1.1rem;margin-top:16px}

.site-foot{border-top:1px solid var(--line);color:var(--muted);font-size:.95rem}
.site-foot .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:28px;padding-bottom:28px}

@media (max-width:820px){
 .split,.two,.services,.steps{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.chequer{height:30px;background:url(assets/chequer.png) repeat-x left center/auto 30px}
.band-cup{flex-shrink:0}
.band .wrap>div{flex:1;min-width:260px}
.site-foot .wrap{align-items:center}
.half.shop .btn-bytes{background:var(--ground);color:var(--ink)}
.dot{background:var(--brew)}.dot.sq{background:var(--bytes)}
@media (max-width:520px){.logo img:last-child{width:160px}}
.lede{font-family:Fraunces,Georgia,serif;font-size:clamp(1.3rem,2.2vw,1.6rem);font-weight:600;line-height:1.3}
.page-hero .lede{margin-top:20px;font-size:clamp(1.3rem,2.2vw,1.6rem)}
.page-hero p+p{margin-top:12px}
.svc{background:#fff;border:1px solid var(--line);border-radius:14px;padding:26px}
.svc h3{font-family:'IBM Plex Sans',sans-serif;font-size:1.15rem;margin-bottom:10px}
.svc p+p{margin-top:12px}
.svc-feature{border-left:6px solid var(--brew);margin-bottom:24px;padding:32px}
.svc-feature h2{margin-bottom:16px;display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.price-tag{font-family:'IBM Plex Sans',sans-serif;font-size:1.1rem;background:var(--ink);color:var(--ground);padding:4px 14px;border-radius:999px}
.svc .small{font-size:.92rem;color:var(--muted)}
.svc-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
.gaming{background:var(--latte)}
.gaming p{max-width:40em}
.gaming .lede{margin:10px 0 18px}
.gaming p+p{margin-top:12px}
@media (max-width:820px){.svc-grid{grid-template-columns:1fr}}