:root{
  --bg:#101815;
  --fg:#F3E8D4;
  --muted:rgba(243,232,212,.68);
  --bronze:#B08A57;
  --bronze-dark:#907044;
  --line:rgba(176,138,87,.45);
  --hover:#edddc0;
  --heading:"Bodoni Moda",serif;
  --body:Jost,sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-padding-top:16px}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--body);font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased}
.wrap{max-width:46rem;margin:0 auto;padding:40px 22px 64px}
header{text-align:center;display:grid;justify-items:center;gap:14px}
header a.logo{display:block;width:min(340px,80%)}
header img{width:100%;height:auto;display:block}
.eyebrow{font-size:12px;letter-spacing:.25em;text-transform:uppercase;color:var(--bronze);font-weight:500}
h1{font-family:var(--heading);font-weight:400;font-size:clamp(30px,7vw,44px);letter-spacing:.12em;text-transform:uppercase;line-height:1.15;margin:0;text-wrap:balance}
h1 em,h2 em{font-style:italic;text-transform:none;letter-spacing:0}
.sub{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.rule{width:180px;height:1px;background:var(--line);margin-top:6px;position:relative}
.rule::after{content:"";position:absolute;left:50%;top:50%;width:7px;height:7px;background:var(--bg);border:1px solid var(--bronze);transform:translate(-50%,-50%) rotate(45deg)}

.tabs{display:flex;justify-content:center;gap:8px;margin:30px 0 6px;flex-wrap:wrap}
.tab{background:transparent;border:1px solid var(--bronze);color:var(--fg);font:500 12px var(--body);letter-spacing:.18em;text-transform:uppercase;padding:13px 20px;cursor:pointer;border-radius:0;transition:background .15s}
.tab:hover{background:rgba(0,0,0,.25);border-color:var(--bronze-dark)}
.tab[aria-selected="true"]{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.tab[aria-selected="true"]:hover{background:var(--hover)}
.tab:focus-visible{outline:2px solid var(--fg);outline-offset:3px}

section[hidden]{display:none}
.intro{color:var(--muted);margin:22px 0 4px;max-width:34rem}

.drink{padding:34px 0;border-bottom:1px solid var(--line);display:grid;gap:10px}
.kicker{font-size:11px;letter-spacing:.25em;text-transform:uppercase;color:var(--bronze);font-weight:500}
h2{font-family:var(--heading);font-weight:400;font-size:clamp(24px,5vw,30px);letter-spacing:.06em;text-transform:uppercase;margin:0;line-height:1.2;text-wrap:balance}
.drink p{margin:0;max-width:36rem}
.meta{display:flex;flex-wrap:wrap;gap:4px 28px;font-size:14px;color:var(--muted)}
.meta b{font-weight:500;color:var(--bronze);letter-spacing:.18em;text-transform:uppercase;font-size:11px;margin-right:8px}
.zero{margin-top:34px;padding:28px 24px;border:1px solid var(--bronze);display:grid;gap:10px}
.zero p{margin:0;max-width:36rem}

.card{padding:30px 0;border-bottom:1px solid var(--line);display:grid;gap:14px}
.card:last-child{border-bottom:0}
h3{font-family:var(--heading);font-weight:400;font-size:22px;letter-spacing:.08em;text-transform:uppercase;margin:0}
table{width:100%;border-collapse:collapse;font-size:15px}
td{padding:8px 0;border-bottom:1px solid rgba(176,138,87,.2);vertical-align:top}
td.q{text-align:right;white-space:nowrap;padding-left:16px;font-variant-numeric:tabular-nums;font-weight:500}
.note{font-size:14px;color:var(--muted);border-left:2px solid var(--bronze);padding:4px 0 4px 14px}
.note b{color:var(--fg);font-weight:500}
.tag{display:inline-block;font-size:10px;letter-spacing:.16em;text-transform:uppercase;padding:1px 7px;border:1px solid var(--bronze);color:var(--bronze);margin-left:6px;vertical-align:2px;font-weight:500}
.card p{margin:0}
.lbl{display:block;color:var(--bronze);text-transform:uppercase;letter-spacing:.18em;font-size:11px;font-weight:500;margin-bottom:2px}
ol.timeline{margin:0;padding:0;list-style:none;display:grid;gap:14px}
ol.timeline li{display:grid;grid-template-columns:120px 1fr;gap:14px}
ol.timeline li>span{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--bronze);font-weight:500;padding-top:3px}
@media (max-width:480px){ol.timeline li{grid-template-columns:1fr;gap:2px}}

footer{text-align:center;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-top:40px}
footer a{color:inherit;text-underline-offset:4px}
@media print{
  :root{color-scheme:light}
  body{background:#fff;color:#000}
  .tabs{display:none}
  section[hidden]{display:block}
  .eyebrow,.kicker,.lbl,.meta b,.tag,ol.timeline li>span{color:#6b5530}
  .drink,.card,.zero{break-inside:avoid;border-color:#ccc}
  td{border-color:#ddd}.note{color:#333;border-color:#6b5530}.note b{color:#000}
  header img{filter:invert(1) brightness(.35)}
}
.staffbar{display:flex;justify-content:center;margin-top:4px}
.staffbar a{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--bronze);text-underline-offset:4px}