:root{--ink:#231f20;--cup:#f5a800;--cup-d:#b87500;--cream:#fff6e3;--paper:#fffdf8;--sea:#16494f;--mute:#5d5148}
img{max-width:100%;height:auto}
html{scroll-behavior:smooth;scroll-padding-top:120px}
body{font-family:'Hanken Grotesk',system-ui,sans-serif;color:var(--ink);background:var(--paper);font-size:1.05rem;line-height:1.65;overflow-x:hidden}
h1,h2,h3{font-family:'Abhaya Libre',Georgia,serif;font-weight:800;line-height:1.05;letter-spacing:-.005em}
h2{font-size:clamp(2.2rem,5vw,3.6rem);margin-bottom:1rem}
a{color:var(--cup-d)}
.eyebrow{font-family:'DM Mono',monospace;font-weight:500;text-transform:uppercase;letter-spacing:.16em;font-size:.78rem;color:var(--cup-d);margin-bottom:.6rem}
.muted{color:var(--mute)}
.section{padding:5rem 0}
.util{background:var(--ink);color:#fff;font-size:.86rem;padding:.4rem 0}
.util a{color:var(--cup);font-weight:700;text-decoration:none}
.nav-c{background:var(--cream);border-bottom:3px solid var(--cup);padding:.4rem 0}
.navbar-brand{display:flex;align-items:center;gap:.6rem;margin:0}
.brand-mermaid{height:auto;width:56px}
.brand-name{font-family:'Abhaya Libre',serif;font-weight:800;font-size:1.9rem;color:var(--ink);line-height:1}
.nav-c .nav-link{font-weight:700;color:var(--ink);text-transform:uppercase;letter-spacing:.1em;font-size:.82rem}
.nav-c .nav-link:hover{color:var(--cup-d)}
.btn{font-weight:700;border-radius:999px}
.btn-cup{background:var(--cup);color:var(--ink);border:2px solid var(--cup);padding:.65rem 1.6rem}
.btn-cup.btn-sm{padding:.35rem 1.1rem}
.btn-cup:hover{background:var(--ink);color:var(--cup);border-color:var(--ink)}
.btn-outline-cup{border:2px solid var(--ink);color:var(--ink)}
.btn-outline-cup:hover{background:var(--ink);color:var(--cup)}
.btn-outline-ink{border:2px solid var(--ink);color:var(--ink);padding:.65rem 1.4rem}
.btn-outline-ink:hover{background:var(--ink);color:#fff}
/* hero */
.hero{background:var(--cream);padding:3rem 0 4rem}
.hero h1{font-size:clamp(3.2rem,8vw,6.2rem);margin-bottom:1rem}
.hero .dot{color:var(--cup)}
.hero .lead{font-size:1.2rem;max-width:34rem;margin-bottom:1.6rem}
.mosaic{display:grid;grid-template-columns:1.4fr 1fr;grid-template-rows:repeat(2,minmax(0,1fr));gap:.8rem;height:clamp(300px,42vw,470px)}
.mosaic img{width:100%;height:100%;object-fit:cover;border-radius:18px}
.mosaic .m1{grid-row:1/3;border:5px solid var(--cup)}
.mosaic .m2{object-position:35% 40%}
.mosaic .m3{object-position:50% 25%}
/* signature: mermaid swimming along a tide line */
.tide{height:64px;position:relative;overflow:hidden;background:var(--cream)}
.tide::before{content:"";position:absolute;left:0;right:0;bottom:0;height:26px;background:var(--cup);
 -webkit-mask:radial-gradient(circle 13px at 13px 0,#0000 98%,#000) 0 0/26px 100%;mask:radial-gradient(circle 13px at 13px 0,#0000 98%,#000) 0 0/26px 100%}
.tide-dark{background:var(--paper)}
.tide-dark::before{background:var(--ink)}
.swimmer{position:absolute;bottom:14px;left:-160px;width:110px;height:auto;animation:swim 22s linear infinite}
@keyframes swim{to{transform:translateX(calc(100vw + 320px))}}
@media (prefers-reduced-motion:reduce){.swimmer{animation:none;left:calc(50% - 55px)}}
/* about */
.stack{position:relative;padding-bottom:3rem}
.stack img{border-radius:18px;width:100%}
.stack-a{aspect-ratio:3/2;object-fit:cover;border:5px solid var(--cup)}
.stack-b{aspect-ratio:3/2;object-fit:cover;width:70%!important;position:absolute;right:-1rem;bottom:0;border:5px solid var(--paper)}
.since{border-left:5px solid var(--cup);padding-left:1rem}
.strip{display:flex;gap:.6rem;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 .6rem 0}
.strip img{height:260px;width:auto;aspect-ratio:3/2;object-fit:cover;scroll-snap-align:start;border-radius:14px;flex:0 0 auto}
/* menu */
.menu-sec{background:var(--cream);margin-top:3rem}
.nav-pills .nav-link{color:var(--ink);font-weight:700;border:2px solid var(--ink);border-radius:999px;padding:.4rem 1.4rem}
.nav-pills .nav-link.active{background:var(--ink);color:var(--cup)}
.mcard{background:var(--paper);border:2px solid var(--ink);border-radius:16px;padding:1.5rem;box-shadow:6px 6px 0 var(--cup);height:100%}
.mcard h3{font-size:1.8rem;border-bottom:2px dotted var(--cup-d);padding-bottom:.3rem;margin-bottom:.8rem}
.mcard ul{padding-left:1.1rem;margin:0}
.mcard li{margin-bottom:.15rem}
.mcard li::marker{color:var(--cup-d)}
.mcard dt{font-weight:700;margin-top:.7rem}
.mcard dd{margin:0;color:var(--mute);font-size:.97rem}
.sizes{font-family:'DM Mono',monospace;font-size:.8rem;color:var(--cup-d);margin-bottom:.5rem}
.mimg{border-radius:12px;aspect-ratio:3/2;object-fit:cover;width:100%}
.photo-pair{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.photo-pair img{border-radius:16px;aspect-ratio:3/2;object-fit:cover;width:100%}
.gallery img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:14px}
.gallery{padding-bottom:4rem!important}
/* locations */
.locs{background:var(--ink);color:#fff}
.locs h2,.locs h3{color:#fff}
.locs .eyebrow{color:var(--cup)}
.loc{background:var(--paper);color:var(--ink);border-radius:18px;overflow:hidden;height:100%}
.loc img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block}
.loc-body{padding:1.6rem}
.loc h3{color:var(--ink);font-size:2.4rem;margin-bottom:0}
.loc .sub{font-family:'DM Mono',monospace;font-size:.8rem;color:var(--cup-d);text-transform:uppercase;letter-spacing:.1em}
.loc address{font-weight:700;margin:.8rem 0}
.hrs{margin-bottom:1.2rem}
.hrs td{padding:.1rem 1.5rem .1rem 0}
.hrs td:first-child{font-weight:700}
/* contact */
.contact .ph span{font-family:'DM Mono',monospace;font-size:.8rem;text-transform:uppercase;letter-spacing:.12em;display:block;color:var(--cup-d)}
.contact .ph a{font-family:'Abhaya Libre',serif;font-weight:800;font-size:1.9rem;text-decoration:none;color:var(--ink)}
.map{width:100%;height:100%;min-height:320px;border:0;border-radius:16px}
.foot{background:var(--cream);border-top:3px solid var(--cup);padding:2.5rem 0}
.foot-logo{width:160px;height:auto;margin-bottom:1rem}
@media (max-width:991px){
 .brand-name{font-size:1.5rem}.brand-mermaid{width:44px}
 .section{padding:3.5rem 0}
 .stack-b{right:0}
 .strip img{height:190px}
}
@media (max-width:575px){
 .hero{padding:2rem 0 3rem}
 .mosaic{height:260px}
 .photo-pair{grid-template-columns:1fr}
}