
:root{
  --mist:#E9ECE8; --paper:#F6F7F4; --slate:#232C2A; --lake:#4B5A55; --rose:#B0443D; --rule:#C8CFCB;
  --display:"Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif;
  --body:"Karla", "Helvetica Neue", Arial, sans-serif;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){ --mist:#151B1A; --paper:#1D2523; --slate:#E8ECE8; --lake:#A9BBB4; --rose:#EE8A7F; --rule:#33403D; }
}
:root[data-theme="dark"]{ --mist:#151B1A; --paper:#1D2523; --slate:#E8ECE8; --lake:#A9BBB4; --rose:#EE8A7F; --rule:#33403D; }
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:env(safe-area-inset-top,0px);scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--mist);color:var(--slate);font:400 1.0625rem/1.6 var(--body);-webkit-font-smoothing:antialiased}
a{color:var(--lake)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--rose);outline-offset:3px}
.wrap{max-width:44rem;margin:0 auto;padding:0 1.5rem}

/* Hero: the name set as a spirit label */
.hero{display:grid;justify-items:center;padding:0 1.25rem 3rem}
.hero-img{display:block;width:calc(100% + 2.5rem);max-width:48rem;height:min(72vh,38rem);object-fit:cover;object-position:50% 45%;margin:0 -1.25rem;background:#F6F7F4}
@media (min-width:48rem){.hero{padding-top:2rem}.hero-img{width:100%;margin:0}}
.label{position:relative;margin-top:-5.5rem;background:var(--paper);border:1px solid var(--slate);outline:1px solid var(--slate);outline-offset:6px;padding:2.75rem 1.75rem 2.25rem;max-width:30rem;width:100%;text-align:center}
.label .place{font:italic 400 1rem/1.3 var(--display);color:var(--lake);margin:0}
.label h1{font:400 clamp(2.9rem,11vw,4.6rem)/0.95 var(--display);letter-spacing:-0.01em;margin:.9rem 0 .4rem}
.label h1 .amp{display:block;font-style:italic;font-size:.55em;color:var(--rose);margin:.15em 0}
.label .what{font:600 1rem/1.4 var(--body);margin:1.25rem 0 .25rem}
.label .detail{margin:0;font-size:.95rem;color:var(--lake)}
.label hr{border:0;border-top:1px solid var(--rule);margin:1.5rem 2.5rem}
.btn{display:inline-block;background:var(--slate);color:var(--paper);text-decoration:none;font:600 1rem/1 var(--body);padding:.95rem 1.5rem;border:0;cursor:pointer}
.btn:hover{background:var(--lake)}

section{padding:2.75rem 0;border-top:1px solid var(--rule)}
h2{font:400 2rem/1.15 var(--display);margin:0 0 1rem}
h3{font:600 1.05rem/1.3 var(--body);margin:0 0 .35rem}
p{margin:0 0 1rem}
.lede{font-size:1.15rem}

ol.steps{list-style:none;padding:0;margin:0;counter-reset:s}
ol.steps li{counter-increment:s;display:grid;grid-template-columns:2.5rem 1fr;gap:.25rem 1rem;padding:1rem 0;border-bottom:1px solid var(--rule)}
ol.steps li::before{content:counter(s);font:400 2rem/1 var(--display);color:var(--rose);grid-row:span 2}
ol.steps li p{margin:0;grid-column:2}

.menus{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(12rem,1fr));margin:1.5rem 0}
.menu{background:var(--paper);padding:1.25rem 1.25rem 1rem;border-top:3px solid var(--lake)}
.menu ul{list-style:none;padding:0;margin:.5rem 0 .75rem}
.menu li{font:400 1.2rem/1.5 var(--display)}
.menu .bring{font-size:.9rem;color:var(--lake);margin:0}

.table-scroll{overflow-x:auto}
table{border-collapse:collapse;width:100%;min-width:26rem}
th,td{text-align:left;vertical-align:top;padding:.75rem .5rem .75rem 0;border-bottom:1px solid var(--rule)}
th{font-weight:600}
td.price{white-space:nowrap;font:400 1.15rem/1.3 var(--display)}
.small{font-size:.92rem;color:var(--lake)}
figure{margin:0 0 1.5rem}
figure img{display:block;width:100%;max-width:24rem;height:auto}
figcaption{font-size:.9rem;color:var(--lake);margin-top:.5rem}

form{display:grid;gap:1rem;margin-top:1.25rem}
.row{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(12rem,1fr))}
label{display:grid;gap:.35rem;font-weight:600;font-size:.95rem}
input,select,textarea{font:400 1rem/1.4 var(--body);color:var(--slate);background:var(--paper);border:1px solid var(--rule);padding:.75rem;width:100%;max-width:100%;border-radius:0}
textarea{min-height:7rem;resize:vertical}
.note{font-size:.9rem;color:var(--lake);margin:0}

footer{border-top:1px solid var(--rule);padding:2rem 0 3rem;font-size:.92rem;color:var(--lake)}
footer p{margin:0 0 .4rem}

/* Launch offer */
.offer-bar{display:block;background:#232C2A;color:#F6F7F4;text-decoration:none;text-align:center;padding:.7rem 1rem;font:400 .95rem/1.4 var(--body);border-bottom:3px solid #B0443D}
.offer-bar .tag{display:inline-block;font:600 .72rem/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:#232C2A;background:#EE8A7F;padding:.3rem .5rem;margin-right:.6rem;vertical-align:.1em}
.offer-bar strong{font:italic 400 1.1rem/1 var(--display);color:#F6F7F4}
.offer-bar .go{color:#EE8A7F;white-space:nowrap;margin-left:.4rem;text-decoration:underline;text-underline-offset:3px}
.offer-bar:hover .go{color:#F6F7F4}
.stamp{position:absolute;top:-1.6rem;right:-.9rem;width:6.2rem;height:6.2rem;border-radius:50%;background:#B0443D;color:#F6F7F4;display:grid;place-content:center;text-align:center;transform:rotate(9deg);box-shadow:0 0 0 3px var(--paper),0 0 0 4px #B0443D;text-decoration:none}
.stamp small{display:block;font:600 .6rem/1.2 var(--body);letter-spacing:.12em;text-transform:uppercase}
.stamp b{display:block;font:400 1.9rem/1 var(--display);margin:.1rem 0}
@media (max-width:30rem){.stamp{width:5.2rem;height:5.2rem;right:-.4rem;top:-1.9rem}.stamp b{font-size:1.55rem}}
.offer-note{border-left:3px solid var(--rose);padding:.6rem .9rem;background:var(--paper);margin-top:1rem}
