/* ============================================================
   The Shot Cellar, theshotcellar.com
   One stylesheet. No framework, no build step.
   ============================================================ */

:root {
  --ink:        #111010;
  --ink-soft:   #1A1818;
  --panel:      rgba(247, 242, 234, 0.065);
  --panel-2:    rgba(247, 242, 234, 0.11);
  --rule:       rgba(247, 242, 234, 0.16);
  --paper:      #F7F2EA;
  --paper-2:    rgba(247, 242, 234, 0.68);
  --paper-3:    rgba(247, 242, 234, 0.44);
  --red:        #A63A38;
  --red-lift:   #C4514D;
  --gold:       #FFD84D;

  --disp: 'Ultra', Rockwell, Georgia, serif;
  --body: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --pad: clamp(18px, 4vw, 56px);
  --max: 1280px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

body {
  margin: 0;
  -webkit-tap-highlight-color: rgba(255, 216, 77, .25);
  -webkit-text-size-adjust: 100%;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }

/* Cards, grids and chips all set their own display, and any author rule beats
   the browser's built-in [hidden] { display: none }. Without this the menu
   filters and the search box hide nothing at all. */
[hidden] { display: none !important; }

a { color: var(--gold); text-decoration: none; }
a:hover { color: var(--paper); }
a:focus-visible, button:focus-visible, input:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 99;
  background: var(--gold); color: var(--ink); padding: 12px 20px;
  font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
.skip:focus { left: 0; }

.wrap {
  max-width: var(--max); margin: 0 auto;
  padding-left: max(var(--pad), env(safe-area-inset-left));
  padding-right: max(var(--pad), env(safe-area-inset-right));
}

/* ---------- marquee ---------------------------------------- */

.marquee {
  background: var(--red); color: #FFF3E4; overflow: hidden;
  border-bottom: 1px solid rgba(0,0,0,.25);
}
.marquee__track {
  display: flex; gap: 26px; align-items: center; width: max-content;
  padding: 10px 0; white-space: nowrap;
  font-size: 12px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
  animation: slide 46s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__track span { display: inline-block; }
.marquee__track .dot { color: var(--gold); }
@keyframes slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; width: 100%; justify-content: center; flex-wrap: wrap; white-space: normal; }
  .marquee__track > *:nth-child(n+9) { display: none; }
}

/* ---------- nav -------------------------------------------- */

.nav {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding-top: 18px; padding-bottom: 18px;
}
.nav__mark img { width: 210px; height: auto; }
@media (max-width: 900px) {
  .nav { flex-direction: column; align-items: stretch; gap: 10px; padding-top: 16px; padding-bottom: 12px; }
  .nav__mark { align-self: center; }
  .nav__mark img { width: 168px; height: auto; }
  .nav__links {
    justify-content: space-between; gap: 2px;
    border-top: 1px solid var(--rule); padding-top: 6px;
  }
  .nav__links a { padding: 10px 8px; font-size: 12px; letter-spacing: .1em; flex: 1 1 auto; justify-content: center; }
  .nav__cta { padding: 10px 12px !important; }
}
@media (max-width: 380px) {
  .nav__mark img { width: 150px; }
  .nav__links a { font-size: 11px; letter-spacing: .06em; padding: 10px 5px; }
}
.nav__links { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.nav__links a {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--paper); padding: 10px 14px;
}
.nav__links a:hover { color: var(--gold); }
.nav__links a[aria-current="page"] { color: var(--gold); box-shadow: inset 0 -2px 0 var(--gold); }
.nav__cta { background: var(--gold); color: var(--ink) !important; padding: 11px 20px !important; }
.nav__cta:hover { background: var(--paper); }

/* ---------- hero ------------------------------------------- */

.hero { position: relative; isolation: isolate; min-height: clamp(420px, 66vh, 760px); display: flex; align-items: center; }
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 46%; }
@media (max-width: 760px) { .hero__media img { object-position: 58% 42%; } }
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgba(17,16,16,.95) 0%, rgba(17,16,16,.82) 42%, rgba(17,16,16,.28) 72%, rgba(17,16,16,.55) 100%),
    linear-gradient(0deg, rgba(17,16,16,.92) 0%, rgba(17,16,16,0) 46%);
}
.hero__inner { padding-top: clamp(56px, 9vw, 120px); padding-bottom: clamp(48px, 8vw, 96px); width: 100%; }
.hero__kicker {
  font-size: 12px; font-weight: 700; letter-spacing: .26em; text-transform: uppercase;
  color: var(--gold); margin: 0 0 20px;
}
.hero h1 {
  font-family: var(--disp); font-weight: 400;
  font-size: clamp(44px, 12vw, 128px); line-height: .88; letter-spacing: -.02em;
  margin: 0 0 24px; max-width: 13ch; overflow-wrap: break-word;
}
.hero h1 .red { color: var(--red-lift); }
.hero h1 .gold { color: var(--gold); }
.hero__lede { margin: 0 0 32px; max-width: 44ch; font-size: clamp(17px, 2vw, 21px); color: var(--paper-2); text-wrap: pretty; }
.hero__cta { display: flex; gap: 12px; flex-wrap: wrap; }
@media (max-width: 480px) { .hero__cta { flex-direction: column; align-items: stretch; } }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 15px 32px;
  font-size: 13px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  border: 2px solid transparent; cursor: pointer;
}
.btn--gold  { background: var(--gold); color: var(--ink); }
.btn--gold:hover  { background: var(--paper); color: var(--ink); }
.btn--ghost { border-color: var(--paper); color: var(--paper); background: none; }
.btn--ghost:hover { background: var(--paper); color: var(--ink); }
.btn--red { background: var(--red); color: #FFF3E4; }
.btn--red:hover { background: var(--red-lift); color: #FFF3E4; }

/* ---------- info bar --------------------------------------- */

.infobar { border-top: 3px solid var(--red); border-bottom: 3px solid var(--red); }
.infobar__grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); }
.infobar__cell { padding: 24px 28px; display: flex; flex-direction: column; gap: 6px; }
.infobar__cell + .infobar__cell { border-left: 1px solid var(--rule); }
.infobar dt { font-size: 11px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--gold); margin: 0; }
.infobar dd { margin: 0; font-size: 16px; font-weight: 500; }
.infobar dd a { color: var(--paper); }
.infobar dd a:hover { color: var(--gold); }
@media (max-width: 760px) {
  .infobar__grid { grid-template-columns: 1fr; }
  .infobar__cell { padding: 18px var(--pad); }
  .infobar__cell + .infobar__cell { border-left: 0; border-top: 1px solid var(--rule); }
}

/* ---------- sections --------------------------------------- */

.section { padding-top: clamp(56px, 8vw, 96px); padding-bottom: clamp(56px, 8vw, 96px); }
.section--tight { padding-top: clamp(40px, 5vw, 64px); padding-bottom: clamp(40px, 5vw, 64px); }
.section--paper { background: var(--paper); color: var(--ink); }
.section--paper a { color: var(--red); }
.section--paper a:hover { color: var(--ink); }

.eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .26em; text-transform: uppercase; color: var(--red-lift); margin: 0 0 16px; }
.section--paper .eyebrow { color: var(--red); }

/* The interior pages lead with a headline instead of a photo. They still have
   to sound like the hero pages: same face, same tight leading, gold kicker.
   Without an h1.display rule these fell back to the body font in browser bold,
   which is why the menu and What's on looked like a different website. */
h1.display {
  font-family: var(--disp); font-weight: 400; overflow-wrap: break-word;
  font-size: clamp(42px, 10vw, 96px); line-height: .92; letter-spacing: -.02em;
  margin: 0 0 20px; text-wrap: balance;
}
.pagehead { padding-top: clamp(28px, 4vw, 44px); padding-bottom: clamp(30px, 4vw, 48px); }
.pagehead .eyebrow { color: var(--gold); }
.pagehead .lede { font-size: clamp(17px, 2vw, 21px); margin-bottom: 0; }

h2.display {
  font-family: var(--disp); font-weight: 400; overflow-wrap: break-word;
  font-size: clamp(30px, 6.4vw, 64px); line-height: .96; letter-spacing: -.02em;
  margin: 0 0 22px; text-wrap: balance;
}
h3.display { font-family: var(--disp); font-weight: 400; font-size: clamp(24px, 3vw, 32px); line-height: 1.05; margin: 0; }

.lede { font-size: clamp(17px, 1.7vw, 20px); color: var(--paper-2); max-width: 58ch; margin: 0 0 28px; text-wrap: pretty; }
.section--paper .lede { color: rgba(17,16,16,.72); }

.trio {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(30px, 3.4vw, 52px); align-items: start;
}
@media (max-width: 1000px) { .trio { grid-template-columns: 1fr; gap: 46px; } }

.split { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.split--flip > *:first-child { order: 2; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } .split--flip > *:first-child { order: 0; } }

.figure { margin: 0; }
.figure img { width: 100%; }
.figure figcaption { margin-top: 10px; font-size: 13px; color: var(--paper-3); }

/* ---------- drink cards ------------------------------------ */

.cards { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; list-style: none; margin: 0; padding: 0; }
@media (max-width: 1080px) { .cards { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 820px)  { .cards { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 520px)  { .cards { grid-template-columns: 1fr; } }

.card { display: flex; }
.card__link {
  display: flex; flex-direction: column; gap: 11px; width: 100%;
  padding: 20px; background: var(--panel); color: var(--paper);
  min-height: 190px; border: 1px solid transparent;
}
.card__link:hover { background: var(--panel-2); border-color: var(--rule); color: var(--paper); }
.card__link:hover .card__name { color: var(--gold); }
.card__link:active { background: var(--panel-2); }
.card--feature .card__link { background: var(--red); }
.card--feature .card__link:hover { background: var(--red-lift); border-color: transparent; }
.card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.card__name { font-family: var(--disp); font-weight: 400; font-size: 23px; line-height: 1.04;
  overflow-wrap: break-word; hyphens: auto; }
.card__price { font-family: var(--disp); font-weight: 400; font-size: 21px; color: var(--gold); white-space: nowrap; }
.card--feature .card__price { color: var(--gold); }
.card__ing { font-size: 14px; line-height: 1.45; color: var(--paper-3); flex-grow: 1; }
.card--feature .card__ing { color: rgba(255,243,228,.86); }
.card__tags { display: flex; gap: 6px; flex-wrap: wrap; }

.tag {
  font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  padding: 5px 10px; background: var(--panel-2); color: var(--paper-2);
}
.card--feature .tag { background: rgba(17,16,16,.55); color: var(--gold); }

/* ---------- menu tools ------------------------------------- */

.tools {
  position: sticky; top: 0; z-index: 20; background: var(--ink);
  border-bottom: 1px solid var(--rule); padding-top: 16px; padding-bottom: 14px;
  transition: transform .22s ease;
}
@media (max-width: 760px) { .tools { padding-top: 10px; padding-bottom: 8px; } }

/* Three rows of chips parked at the top of a phone screen eat the menu they
   are meant to filter. Slide the bar away while the guest is scrolling down
   through results, and bring it straight back the moment they scroll up. */
@media (max-width: 900px) {
  .tools--away { transform: translateY(-104%); }
}
.tools__row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.search {
  display: flex; align-items: center; gap: 11px; flex: 1 1 320px;
  padding: 13px 18px; background: var(--panel); border: 1px solid var(--rule);
}
@media (max-width: 760px) { .search { padding: 10px 15px; } }
.search input {
  flex: 1; background: none; border: 0; color: var(--paper);
  font-family: var(--body); font-size: 16px; min-width: 0;
  min-height: 26px;
}
.search input::placeholder { color: var(--paper-3); }
.search input:focus { outline: none; }
.search:focus-within { border-color: var(--gold); }
.search svg { flex: none; }

.chips { display: flex; gap: 7px; flex-wrap: wrap; padding-top: 12px; }
@media (max-width: 760px) { .chips { padding-top: 8px; } }

/* On a phone the two chip rows would eat half the screen inside a sticky bar.
   Turn each row into a single swipeable line instead. */
@media (max-width: 760px) {
  .chips {
    flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
    padding-bottom: 2px; margin-left: calc(var(--pad) * -1); margin-right: calc(var(--pad) * -1);
    padding-left: var(--pad); padding-right: var(--pad);
    scrollbar-width: none;
  }
  .chips::-webkit-scrollbar { display: none; }
  .chip { scroll-snap-align: start; flex: none; }
}
.chip {
  display: inline-flex; align-items: center; min-height: 44px; white-space: nowrap;
  font-family: var(--body); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: 9px 16px; background: var(--panel); color: var(--paper-2);
  border: 1px solid transparent; cursor: pointer;
}
.chip:hover { background: var(--panel-2); color: var(--paper); }
.chip[aria-pressed="true"] { background: var(--gold); color: var(--ink); }

/* the house boards get the brand red so they read as ours, not as flavours */
.chip--board { background: rgba(166, 58, 56, .3); color: var(--paper); }
.chip--board:hover { background: rgba(166, 58, 56, .5); color: var(--paper); }
.chip--board[aria-pressed="true"] { background: var(--red); color: #FFF3E4; }
.chip--board[aria-pressed="true"] .chip__n { opacity: .75; }
.chip__n { opacity: .55; margin-left: 5px; font-variant-numeric: tabular-nums; }
.chip[aria-pressed="true"] .chip__n { opacity: .6; }

.resultline {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding-top: 18px; font-size: 14px; color: var(--paper-3); font-variant-numeric: tabular-nums;
}
.resultline p { margin: 0; }
.chip--clear { min-height: 36px; padding: 7px 13px; font-size: 11px; }
.noresults { padding: 56px 0; text-align: center; color: var(--paper-2); }
.noresults p { margin: 0 0 18px; }

/* ---------- drink detail ----------------------------------- */

.detail { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(28px, 5vw, 64px); align-items: start; }
@media (max-width: 900px) { .detail { grid-template-columns: 1fr; } }
.detail h1 { font-family: var(--disp); font-weight: 400; font-size: clamp(36px, 9vw, 84px);
  line-height: .94; margin: 0 0 18px; letter-spacing: -.02em; overflow-wrap: break-word; hyphens: auto; }
.detail__price { font-family: var(--disp); font-size: clamp(28px, 4vw, 40px); color: var(--gold); margin: 0 0 24px; }
.detail__blurb { font-size: 19px; color: var(--paper-2); max-width: 46ch; margin: 0 0 28px; text-wrap: pretty; }
.ing { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.ing li { padding: 14px 0; border-bottom: 1px solid var(--rule); display: flex; gap: 14px; align-items: baseline; font-size: 17px; }
.ing .n { font-family: var(--disp); font-size: 13px; color: var(--red-lift); width: 26px; flex: none; }
.aside { background: var(--panel); padding: 26px 28px; }
.aside h2 { font-size: 12px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); margin: 0 0 14px; }
.aside p { margin: 0 0 18px; color: var(--paper-2); font-size: 15.5px; }
.aside p:last-child { margin-bottom: 0; }

.crumbs { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--paper-3); padding-top: 22px; }
.crumbs a { color: var(--paper-3); }
.crumbs a:hover { color: var(--gold); }

/* ---------- schedule --------------------------------------- */

.sched { width: 100%; border-collapse: collapse; }
.sched caption { text-align: left; padding-bottom: 18px; color: var(--paper-3); font-size: 14px; }
.sched th, .sched td { text-align: left; padding: 18px 16px; border-bottom: 1px solid var(--rule); }
.sched th { font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); border-bottom-color: var(--red); }
.sched td:first-child { font-family: var(--disp); font-size: 20px; white-space: nowrap; }
.sched .what { font-weight: 700; letter-spacing: .04em; }
.sched .when { font-variant-numeric: tabular-nums; color: var(--paper-2); }
.sched .note { color: var(--paper-3); font-size: 14.5px; }
@media (max-width: 680px) {
  .sched, .sched tbody, .sched tr, .sched td { display: block; width: 100%; }
  .sched thead { display: none; }
  .sched tr { border-bottom: 1px solid var(--rule); padding: 14px 0; }
  .sched td { border: 0; padding: 3px 0; }
  .sched td:first-child { font-size: 24px; }
  /* the table is display:block down here, which leaves the caption with no
     table box to size against, so it shrink-wraps to one word a line */
  .sched caption { display: block; width: 100%; }
  .sched td:empty { display: none; }
}

/* ---------- hours list ------------------------------------- */

.hours { list-style: none; margin: 0; padding: 0; }
.hours li { display: flex; justify-content: space-between; gap: 20px; padding: 12px 0; border-bottom: 1px solid var(--rule); font-variant-numeric: tabular-nums; }
.hours li[data-today="true"] { color: var(--gold); font-weight: 700; }

/* ---------- footer ----------------------------------------- */

.footer { border-top: 1px solid var(--rule); padding-top: 56px; padding-bottom: 44px; }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; }
@media (max-width: 820px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer__grid { grid-template-columns: 1fr; } }
.footer h2 { font-size: 11px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); margin: 0 0 14px; }
.footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.footer a { color: var(--paper-2); }
.footer a:hover { color: var(--gold); }
.footer__mark img { width: 200px; height: auto; margin-bottom: 18px; }
.footer__legal {
  margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--rule);
  display: flex; gap: 18px; justify-content: space-between; flex-wrap: wrap;
  font-size: 13px; color: var(--paper-3);
}

/* ---------- utility ---------------------------------------- */

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.scroll-x { overflow-x: auto; }

/* ---------- manager tools ----------------------------------- */
/* None of this is a security boundary. The database re-checks every write,
   so these rules only decide what is worth putting on screen. */

/* a drink that is off the menu, shown only while editing */
#grid > li[data-off="1"] { position: relative; }
#grid > li[data-off="1"] .card__link { opacity: .45; }
#grid > li[data-off="1"]::after {
  content: "Off the menu"; position: absolute; top: 10px; right: 10px; z-index: 2;
  font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  padding: 5px 9px; background: var(--red); color: #FFF3E4;
}
:root[data-editing="on"] #grid > li { cursor: pointer; }
:root[data-editing="on"] #grid > li .card__link { pointer-events: none; }
:root[data-editing="on"] #grid > li:hover .card__link { border-color: var(--gold); }

/* the bar that says who you are */
.staffbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 10px max(14px, env(safe-area-inset-left)) calc(10px + env(safe-area-inset-bottom));
  background: var(--gold); color: var(--ink);
  font-size: 12px; font-weight: 700; letter-spacing: .08em;
}
.staffbar__hint { display: none; }
:root[data-editing="on"] .staffbar__hint { display: inline; }
.staffbar__who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-transform: uppercase; }
.staffbar__actions { display: flex; gap: 8px; flex: none; }
.staffbar .chip { background: var(--ink); color: var(--paper); min-height: 38px; text-decoration: none; }
.staffbar .chip[aria-pressed="true"] { background: var(--red); color: #FFF3E4; }
:root[data-staff] body { padding-bottom: 68px; }

/* the one editor panel, reused for whichever drink you tapped */
.sheet {
  position: fixed; inset: 0; z-index: 70; display: flex; align-items: flex-end;
  background: rgba(6,6,6,.72);
}
@media (min-width: 700px) { .sheet { align-items: center; justify-content: center; } }
.sheet__panel {
  width: 100%; max-height: 86vh; overflow-y: auto;
  padding: 22px 20px calc(26px + env(safe-area-inset-bottom));
  background: var(--ink-soft); border-top: 3px solid var(--gold);
  box-shadow: 0 -18px 50px rgba(0,0,0,.55);
}
@media (min-width: 700px) {
  .sheet__panel { max-width: 560px; border: 1px solid var(--rule); border-top: 3px solid var(--gold);
                  box-shadow: 0 24px 70px rgba(0,0,0,.6); }
}
.sheet__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.sheet__head h2 { margin: 0; font-size: 27px; }
.sheet__hide { width: 100%; justify-content: center; }
.sheet__tags { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 12px; }
.sheet__tags .chip[disabled] { opacity: .5; }

/* what just happened */
.toast {
  position: fixed; left: 50%; bottom: 84px; z-index: 80; transform: translate(-50%, 14px);
  max-width: min(90vw, 460px); padding: 13px 20px;
  background: var(--paper); color: var(--ink);
  font-size: 14px; font-weight: 600; text-align: center;
  opacity: 0; pointer-events: none; transition: opacity .18s ease, transform .18s ease;
}
.toast--bad { background: var(--red); color: #FFF3E4; }
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* a drink page for something currently off the menu */
.offnote {
  margin: 0 0 22px; padding: 14px 18px;
  background: rgba(166,58,56,.22); border-left: 3px solid var(--red);
  font-size: 15px; color: var(--paper);
}

.allergen {
  margin: 22px 0 0; padding-top: 16px; border-top: 1px solid var(--rule);
  font-size: 14px; color: var(--paper-3); max-width: 46ch;
}

/* alcohol by volume, on cards and drink pages */
.card__abv {
  align-self: flex-start; margin-top: -4px;
  font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--gold);
}
.detail__abv {
  margin: -12px 0 18px; font-size: 13px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--gold);
}

/* links through to the grouping pages, on the menu */
.jumpto { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0; font-size: 15px; }
.jumpto a { color: var(--paper-2); text-decoration: underline; text-underline-offset: 3px; }
.jumpto a:hover { color: var(--gold); }