:root{
--pitch:#14100E;
--pitch-2:#1E1815;
--oxblood:#4E181D;
--oxblood-2:#632127;
--brass:#C6A15B;
--brass-lift:#DCC086;
--bone:#F0EAE0;
--bone-2:#E0D6C6;
--ash:#6B6057;
--smoke:#A89B8D;
--maxw:1140px;
--gut:clamp(20px,5vw,52px);
--hair:rgba(240,234,224,.16);
--hair-dark:rgba(20,16,14,.16);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto} *{animation:none!important;transition:none!important}}
body{
margin:0;
background:var(--bone);
color:var(--pitch);
font-family:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
font-variation-settings:'wdth' 100;
font-size:17px;
line-height:1.6;
-webkit-font-smoothing:antialiased;
}
h1,h2{
font-family:'Fraunces','Georgia',serif;
font-variation-settings:'SOFT' 20,'WONK' 0;
font-weight:600;
line-height:1.02;
letter-spacing:-0.015em;
margin:0;
text-wrap:balance;
}
h1{font-size:clamp(44px,9.5vw,92px);line-height:0.98}
h2{font-size:clamp(31px,5.2vw,52px)}
h3{
font-family:'Archivo',sans-serif;font-weight:700;
font-variation-settings:'wdth' 106;
font-size:clamp(18px,2.2vw,21px);line-height:1.25;
letter-spacing:-0.005em;margin:0;
}
p{margin:0 0 1em;max-width:62ch}
a{color:inherit}
img{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gut)}
section{padding-block:clamp(72px,11vw,138px);scroll-margin-top:80px}
.dark{background:var(--pitch);color:var(--bone)}
.dark h2{color:var(--bone)}
.claret{background:var(--oxblood);color:var(--bone)}
.claret h2{color:var(--bone)}
header.bar{
position:sticky;top:0;z-index:60;
background:rgba(20,16,14,.92);
-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
color:var(--bone);
border-bottom:1px solid var(--hair);
}
.bar .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:16px}
.mark{
background:none;border:none;padding:0;cursor:pointer;color:inherit;text-align:left;
display:flex;flex-direction:column;gap:1px;text-decoration:none;line-height:1;
}
.mark b{
font-weight:600;font-family:'Fraunces',Georgia,serif;
font-variation-settings:'SOFT' 20,'WONK' 0;
font-size:21px;letter-spacing:.005em;
}
.mark small{
font-size:9.5px;font-weight:600;color:var(--brass);
letter-spacing:.22em;text-indent:.22em;
}
nav.links{display:flex;gap:30px}
nav.links button{background:none;border:none;border-radius:0;cursor:pointer;font-family:inherit;text-align:left}
nav.links a,nav.links button{
text-decoration:none;font-size:14px;font-weight:500;color:var(--bone);
opacity:.72;padding-block:5px;border-bottom:1px solid transparent;
transition:opacity .18s ease,border-color .18s ease;
}
nav.links button:hover,nav.links button:focus-visible,nav.links a:hover,nav.links a:focus-visible{opacity:1;border-bottom-color:var(--brass)}
.burger{
display:none;background:none;border:1px solid var(--hair);color:var(--bone);
border-radius:2px;padding:9px 13px;font:inherit;font-size:13px;cursor:pointer;
letter-spacing:.06em;
}
@media (max-width:860px){
nav.links{
position:fixed;inset:64px 0 auto 0;background:var(--pitch-2);
flex-direction:column;gap:0;padding:6px var(--gut) 24px;
border-bottom:1px solid var(--hair);
transform:translateY(-120%);transition:transform .3s cubic-bezier(.4,0,.2,1);
}
nav.links[data-open="true"]{transform:none}
nav.links a,nav.links button{padding:15px 0;width:100%;border-bottom:1px solid rgba(240,234,224,.09);font-size:17px;opacity:.9}
.burger{display:block}
}
.hero{
color:var(--bone);
padding-block:clamp(72px,12vw,132px) clamp(64px,10vw,116px);
position:relative;overflow:hidden;
background:
linear-gradient(104deg, rgba(20,16,14,.90) 0%, rgba(20,16,14,.74) 40%, rgba(20,16,14,.38) 100%),
var(--pitch) url('images/hero-shop.avif') center 40%/cover no-repeat;
}
.hero:after{
content:"";position:absolute;inset:auto 0 0 0;height:1px;
background:linear-gradient(90deg,transparent,var(--brass) 22%,var(--brass) 78%,transparent);
opacity:.55;
}
@media (max-width:900px){
.hero{
background:
linear-gradient(180deg, rgba(20,16,14,.80) 0%, rgba(20,16,14,.86) 55%, rgba(20,16,14,.70) 100%),
var(--pitch) url('images/hero-shop.avif') 62% 40%/cover no-repeat;
}
}
.hero h1{color:var(--bone)}
.hero h1 em{
display:block;font-style:italic;
font-variation-settings:'SOFT' 40,'WONK' 1;
color:var(--brass-lift);
}
.kicker{
font-size:11.5px;font-weight:600;color:var(--brass);
letter-spacing:.2em;margin:0 0 22px;
}
.hero-lede{
font-size:clamp(17px,2vw,19.5px);color:rgba(240,234,224,.78);
margin-top:28px;max-width:46ch;line-height:1.65;
}
.hero-grid{display:grid;grid-template-columns:1.4fr .9fr;gap:clamp(32px,5vw,64px);align-items:end}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr;align-items:start}}
.status{
background:rgba(30,24,21,.72);
-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
border:1px solid var(--hair);border-radius:3px;
padding:26px 26px 24px;
}
.dot{width:7px;height:7px;border-radius:50%;display:inline-block;margin-right:10px;vertical-align:2px}
.dot.on{background:#7FBF7F;box-shadow:0 0 0 0 rgba(127,191,127,.55);animation:pulse 2.6s infinite}
.dot.off{background:var(--oxblood-2);box-shadow:0 0 0 1px rgba(240,234,224,.25)}
@keyframes pulse{70%{box-shadow:0 0 0 10px rgba(127,191,127,0)}100%{box-shadow:0 0 0 0 rgba(127,191,127,0)}}
.status .state{
font-family:'Fraunces',Georgia,serif;font-weight:600;
font-variation-settings:'SOFT' 20,'WONK' 0;
font-size:23px;margin-bottom:5px;letter-spacing:-.01em;
}
.status .sub{font-size:14.5px;color:var(--smoke);margin-bottom:24px}
.btn{
display:inline-flex;align-items:center;justify-content:center;gap:9px;
background:var(--brass);color:var(--pitch);text-decoration:none;
font-weight:700;font-size:14px;letter-spacing:.09em;
padding:16px 26px;border-radius:2px;width:100%;
border:1px solid var(--brass);cursor:pointer;font-family:inherit;
transition:background .2s ease,border-color .2s ease,color .2s ease;
}
.btn:hover{background:var(--brass-lift);border-color:var(--brass-lift)}
.btn:active{transform:translateY(1px)}
.btn.ghost{background:transparent;border-color:rgba(240,234,224,.32);color:var(--bone);margin-top:10px}
.btn.ghost:hover{background:transparent;border-color:var(--brass);color:var(--brass-lift)}
.btn.solid-dark{background:var(--pitch);border-color:var(--pitch);color:var(--bone);width:auto}
.btn.solid-dark:hover{background:var(--oxblood);border-color:var(--oxblood)}
:focus-visible{outline:2px solid var(--brass);outline-offset:3px;border-radius:2px}
.btn.book{min-height:52px;font-size:15px}
.btn.book-top{width:auto;min-height:44px;padding:11px 18px;font-size:13px;white-space:nowrap}
.bar-right{display:flex;align-items:center;gap:12px}
@media (min-width:861px){.bar-right{gap:30px}.bar-right .book-top{order:2}}
@media (max-width:400px){
.bar .wrap{gap:10px}
.mark b{font-size:18px}
.btn.book-top{padding:11px 13px;letter-spacing:.06em}
.burger{padding:9px 10px}
}
.book-alt{
display:block;width:fit-content;margin:6px auto 0;padding:11px 6px;
font-size:14.5px;font-weight:600;color:var(--brass-lift);
text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;
}
.book-alt:hover{color:var(--bone)}
.fallback{margin-top:18px;text-align:left}
.fallback textarea{
width:100%;font:inherit;font-size:15px;line-height:1.5;padding:12px 14px;border-radius:2px;
border:1px solid rgba(20,16,14,.26);background:#fff;color:var(--pitch);resize:vertical;margin-bottom:10px;
}
.fallback .btn{min-height:50px;margin-top:8px}
.btn.ghost-dark{background:transparent;border-color:rgba(20,16,14,.32);color:var(--pitch)}
.btn.ghost-dark:hover{background:transparent;border-color:var(--pitch)}
button.book-alt{background:none;border:none;font-family:inherit;cursor:pointer}
.book-notes{font:inherit}
.book-hint{font-size:13.5px;line-height:1.5;color:var(--smoke);text-align:center;margin:2px auto 0;max-width:40ch}
.card .book-alt{color:var(--oxblood)}
.card .book-alt:hover{color:var(--pitch)}
.card .book-hint{color:var(--ash)}
.book-direct{margin:22px 0 0;padding-top:18px;border-top:1px solid var(--hair-dark);font-size:15px;color:var(--ash);text-align:center;max-width:none}
.book-direct a{color:var(--pitch);font-weight:600;overflow-wrap:anywhere}
.foot-book{flex-basis:100%;display:flex;flex-direction:column;align-items:center;padding-bottom:26px;margin-bottom:12px;border-bottom:1px solid var(--hair)}
.foot-book .btn{width:min(100%,340px)}
footer .book-alt{color:var(--brass-lift);border-bottom:none}
footer .book-alt:hover{color:var(--bone);border-bottom:none}
.head{margin-bottom:clamp(34px,4.5vw,54px);max-width:34ch}
.head p{margin-top:16px;color:var(--ash);font-size:17px}
.dark .head p,.claret .head p{color:var(--smoke)}
.menu{border-top:1px solid var(--pitch)}
.row{
display:flex;align-items:baseline;gap:14px;
padding:20px 2px;border-bottom:1px solid var(--hair-dark);
}
.row .name{
font-weight:600;font-size:18.5px;letter-spacing:-.005em;white-space:nowrap;
}
.row .dots{
flex:1;height:1px;min-width:18px;
border-bottom:1px dotted rgba(20,16,14,.34);
transform:translateY(-5px);
}
.row .price{
font-family:'Fraunces',Georgia,serif;font-weight:600;
font-variation-settings:'SOFT' 20,'WONK' 0;
font-size:21px;white-space:nowrap;letter-spacing:-.01em;
}
.row .price em{font-style:normal;font-size:13px;color:var(--ash);margin-right:5px;font-family:'Archivo',sans-serif;font-weight:500}
.note{margin-top:28px;font-size:15px;color:var(--ash);line-height:1.6}
.dark .note,.claret .note{color:var(--smoke)}
.perks{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3.5vw,44px);margin-top:8px}
@media (max-width:760px){.perks{grid-template-columns:1fr}}
.perk{border-top:1px solid var(--brass);padding-top:20px}
.perk h3{color:var(--bone);margin-bottom:10px}
.perk p{color:var(--smoke);font-size:15.5px;margin:0;line-height:1.65}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px}
.tile{
position:relative;aspect-ratio:4/3;border:none;padding:0;cursor:pointer;
border-radius:2px;overflow:hidden;background:var(--bone-2);
display:block;font:inherit;
}
.tile img{
width:100%;height:100%;object-fit:cover;object-position:top center;display:block;
transition:transform .5s cubic-bezier(.3,0,.2,1);
}
.tile:hover img{transform:scale(1.03)}
.tile:hover{outline:1px solid var(--pitch);outline-offset:3px}
dialog.lb{border:none;padding:0;background:transparent;max-width:min(92vw,580px);width:100%}
dialog.lb::backdrop{background:rgba(20,16,14,.92)}
.lb-inner{background:var(--bone);border-radius:3px;padding:16px}
.lb-inner img{width:100%;max-height:75vh;object-fit:contain;border-radius:2px;display:block}
.lb-inner button{margin-top:14px;width:100%}
.quotes{
display:grid;grid-template-columns:repeat(3,1fr);
gap:clamp(28px,4vw,52px);
}
@media (max-width:820px){.quotes{grid-template-columns:1fr;gap:34px}}
blockquote{margin:0;padding:0;background:none;border:none}
blockquote p{
font-family:'Fraunces',Georgia,serif;font-weight:400;
font-variation-settings:'SOFT' 40,'WONK' 1;
font-size:19.5px;line-height:1.5;color:var(--bone);margin:0 0 16px;
letter-spacing:-.005em;
}
blockquote cite{
font-style:normal;font-size:11.5px;font-weight:600;color:var(--brass);
letter-spacing:.16em;font-family:'Archivo',sans-serif;
}
.stars{color:var(--brass);letter-spacing:3px;font-size:13px;margin-bottom:14px}
.book-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,58px);align-items:start}
@media (max-width:860px){.book-grid{grid-template-columns:1fr}}
.card{background:var(--bone);color:var(--pitch);border-radius:3px;padding:clamp(24px,4vw,36px)}
.field{margin-bottom:20px}
.field label{
display:block;font-weight:600;font-size:11.5px;margin-bottom:9px;
letter-spacing:.14em;color:var(--ash);
}
.field input,.field select{
width:100%;font:inherit;font-size:16.5px;padding:14px 15px;border-radius:2px;
border:1px solid rgba(20,16,14,.26);background:#fff;color:var(--pitch);
transition:border-color .18s ease;
}
.field input:focus,.field select:focus{border-color:var(--pitch);outline:none}
.field input:disabled{opacity:.5}
.two{display:grid;grid-template-columns:1fr 1fr;gap:15px}
@media (max-width:480px){.two{grid-template-columns:1fr}}
.slots{display:flex;flex-wrap:wrap;gap:8px}
.slot{
font:inherit;font-size:14.5px;font-weight:600;cursor:pointer;
padding:11px 15px;border-radius:2px;border:1px solid rgba(20,16,14,.26);
background:#fff;color:var(--pitch);transition:background .15s ease,border-color .15s ease;
}
.slot:hover:not(:disabled){border-color:var(--pitch)}
.slot[aria-pressed="true"]{background:var(--pitch);color:var(--bone);border-color:var(--pitch)}
.slot:disabled{
color:#6B6560;background:#EDEAE5;border-color:rgba(20,16,14,.16);
cursor:not-allowed;text-decoration:line-through;
text-decoration-thickness:1px;text-decoration-color:rgba(107,101,96,.65);
}
.slots-empty{font-size:15.5px;color:var(--ash);margin:6px 0 0}
.confirm{
display:none;background:#fff;border:1px solid var(--brass);
border-radius:3px;padding:30px 24px;text-align:center;
}
.confirm[data-on="true"]{display:block}
.confirm strong{
display:block;font-family:'Fraunces',Georgia,serif;font-weight:600;
font-variation-settings:'SOFT' 20,'WONK' 0;
font-size:25px;margin-bottom:10px;
}
.confirm p{margin:0 auto;font-size:15.5px;color:var(--ash)}
.qr{width:min(240px,100%);margin:20px auto 6px;line-height:0}
.qr svg{width:100%;height:auto;display:block}
.qr-alt{margin-top:14px !important;font-size:14.5px !important}
.qr-alt a{color:var(--oxblood)}
.b-err{color:var(--oxblood);font-size:15px;font-weight:500;margin:12px 0 0}
.b-err a{color:inherit}
#bSend[disabled]{opacity:.7;cursor:wait}
.how{padding-left:0;list-style:none}
.how li{
margin-bottom:18px;color:var(--smoke);font-size:15.5px;line-height:1.6;
padding-left:22px;position:relative;
}
.how li:before{
content:"";position:absolute;left:0;top:10px;
width:9px;height:1px;background:var(--brass);
}
.how strong{color:var(--bone);font-weight:600}
.find{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,64px)}
@media (max-width:820px){.find{grid-template-columns:1fr}}
.hours{width:100%;border-collapse:collapse;font-size:17px;color:#2A2320}
.hours th,.hours td{text-align:left;padding:15px 0;border-bottom:1px solid var(--hair-dark);font-weight:400}
.hours th{font-weight:600;width:46%}
.hours td{font-variant-numeric:tabular-nums;letter-spacing:.01em}
.hours tr[data-today="true"]{color:var(--oxblood)}
.hours tr[data-today="true"] th,.hours tr[data-today="true"] td{font-weight:700}
.addr{font-size:18.5px;font-weight:500;line-height:1.5;margin-bottom:4px;color:var(--ash)}
.tel{
font-family:'Fraunces',Georgia,serif;font-weight:600;
font-variation-settings:'SOFT' 20,'WONK' 0;
font-size:clamp(28px,4.6vw,42px);text-decoration:none;display:inline-block;
margin:10px 0 26px;letter-spacing:-.02em;
border-bottom:1px solid transparent;transition:border-color .2s ease,color .2s ease;
}
.tel:hover{color:var(--oxblood);border-bottom-color:var(--oxblood)}
.shop-photo{margin-top:30px;border-radius:2px;width:100%;aspect-ratio:16/7;object-fit:cover;object-position:center 30%}
footer{background:var(--pitch);color:var(--smoke);padding:40px 0;font-size:13.5px}
footer .wrap{display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:center}
footer a{color:var(--smoke);text-decoration:none;border-bottom:1px solid transparent}
footer a:hover{color:var(--brass);border-bottom-color:var(--brass)}
.mark{min-height:44px;justify-content:center}
footer a[href^="tel:"],#reviews .note a{display:inline-block;padding-block:13px;margin-block:-13px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:10px;z-index:99;background:var(--bone);color:var(--pitch);padding:10px 14px;border-radius:2px}