/* Age gate and cookie consent. Shared by every page.
   Tokens are redeclared here rather than inherited, because each page defines
   its own :root block and the locator's palette is scoped differently. */
.ag, .cc {
  --ag-cream: #F6F4ED;
  --ag-cream-warm: #F1E6D2;
  --ag-gold: #D4881B;
  --ag-red: #E12228;
  --ag-ink: #2A211A;
  --ag-ink-soft: #7C6C59;
  --ag-disp: "Carnaby Street", Impact, "Arial Narrow", sans-serif;
  --ag-body: "Gotham", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html.ag-locked, html.ag-locked body { overflow: hidden; }

/* Third-party cart UI must not float above the age gate. Shopify's Buy Button
   pins its cart and toggle at z-index 2147483647 (max int), so a returning
   visitor with items already in the cart could open it and check out over the
   gate. Outbidding max int is not possible, so the carts are hidden for as
   long as the gate is up. */
html.ag-locked .shopify-buy-frame,
html.ag-locked .shopify-buy-cart-wrapper,
html.ag-locked .snipcart-modal { display: none !important; }

/* ---------------------------------------------------------------- age gate */
.ag {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(42, 33, 26, .94);
  backdrop-filter: blur(6px);
}
.ag-box {
  width: 100%; max-width: 460px;
  padding: 44px 34px 38px;
  text-align: center;
  background: var(--ag-cream);
  border: 2px solid var(--ag-gold);
}
.ag-logo { height: 84px; width: auto; margin: 0 auto 26px; display: block; }
.ag-q {
  font-family: var(--ag-disp); font-weight: 500;
  font-size: clamp(21px, 4.4vw, 27px);
  letter-spacing: .05em; text-transform: uppercase;
  color: var(--ag-ink); margin-bottom: 12px;
}
.ag-q b { color: var(--ag-gold); font-weight: 600; }
.ag-sub {
  font-family: var(--ag-body); font-size: 12px; line-height: 1.6;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--ag-ink-soft); margin-bottom: 30px;
}
.ag-denied { margin-bottom: 0; color: var(--ag-red); font-weight: 600; }
.ag-btns { display: flex; gap: 12px; justify-content: center; }
.ag-btns button {
  flex: 1 1 0; max-width: 160px; padding: 14px 10px;
  font-family: var(--ag-disp); font-size: 13px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  border-radius: 0; cursor: pointer; transition: background .15s, color .15s;
}
.ag-btns .ag-no {
  background: transparent; color: var(--ag-ink-soft);
  border: 1.5px solid rgba(124, 108, 89, .5);
}
.ag-btns .ag-no:hover { background: var(--ag-cream-warm); color: var(--ag-ink); }
.ag-btns .ag-yes {
  background: var(--ag-red); color: var(--ag-cream); border: 1.5px solid var(--ag-red);
}
.ag-btns .ag-yes:hover { background: #B81B20; border-color: #B81B20; }
.ag-btns button:focus-visible { outline: 2px solid var(--ag-gold); outline-offset: 3px; }

/* ---------------------------------------------------------- cookie consent */
.cc {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 9990;
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding: 16px 22px;
  background: var(--ag-cream-warm);
  border-top: 2px solid var(--ag-gold);
  transform: translateY(110%); transition: transform .35s ease;
}
.cc.show { transform: translateY(0); }
.cc p {
  flex: 1 1 320px; margin: 0;
  font-family: var(--ag-body); font-size: 12px; line-height: 1.6;
  color: var(--ag-ink);
}
.cc a { color: var(--ag-gold); text-decoration: underline; }
.cc-btns { display: flex; gap: 10px; margin-left: auto; }
.cc-btns button {
  padding: 10px 20px;
  font-family: var(--ag-disp); font-size: 11px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  border-radius: 0; cursor: pointer; transition: background .15s;
}
.cc-deny {
  background: transparent; color: var(--ag-ink-soft);
  border: 1.5px solid rgba(124, 108, 89, .45);
}
.cc-deny:hover { background: var(--ag-cream); color: var(--ag-ink); }
.cc-accept {
  background: var(--ag-ink); color: var(--ag-cream); border: 1.5px solid var(--ag-ink);
}
.cc-accept:hover { background: #000; border-color: #000; }
.cc-btns button:focus-visible { outline: 2px solid var(--ag-gold); outline-offset: 3px; }

@media (max-width: 620px) {
  .cc { flex-direction: column; align-items: stretch; }
  .cc-btns { margin-left: 0; }
  .cc-btns button { flex: 1; }
}

/* ------------------------------------------------------------ email signup */
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.signup-trap { position: absolute; left: -5000px; }
.signup-msg { margin: 8px 0 0; min-height: 1.2em; font-size: 12.5px; line-height: 1.4; }
.signup-msg.is-ok { color: #2E6E57; }
.signup-msg.is-error { color: #B81B20; }
/* The footer is brand red, where red-on-red error text vanishes. */
.footer .signup-msg, .footer .signup-msg.is-ok, .footer .signup-msg.is-error { color: #F6F4ED; }
.footer .signup-msg.is-error { font-weight: 600; }
form[data-signup] button[disabled] { opacity: .6; cursor: wait; }

/* ---------------------------------------------------- scratch card (perk) */
/* assets/js/scratch.js. Used over Snipcart's confirmation on the Speakeasy
   and on /scratch, the link in the order email. */
.sc, .sc-overlay, .sc-preview-badge {
  --sc-cream: #F6F4ED;
  --sc-cream-warm: #F1E6D2;
  --sc-gold: #D4881B;
  --sc-mustard: #D6B038;
  --sc-red: #E12228;
  --sc-ink: #2A211A;
  --sc-ink-soft: #7C6C59;
  --sc-disp: "Carnaby Street", Impact, "Arial Narrow", sans-serif;
  --sc-label: "Labor Union", "Carnaby Street", Impact, sans-serif;
  --sc-body: "Gotham", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.sc { text-align: center; font-family: var(--sc-body); color: var(--sc-ink); }
.sc-kick {
  font-family: var(--sc-label); font-weight: 600; font-size: 11px;
  letter-spacing: .32em; text-transform: uppercase; color: var(--sc-gold);
  margin-bottom: 10px;
}
.sc-title {
  font-family: var(--sc-disp); font-weight: 600; text-transform: uppercase;
  letter-spacing: .04em; font-size: clamp(26px, 5vw, 34px); line-height: 1.05;
  color: var(--sc-ink); margin: 0 0 8px;
}
.sc-sub { font-size: 14px; color: var(--sc-ink-soft); margin: 0 0 22px; }
.sc-status { font-size: 14px; color: var(--sc-ink-soft); margin: 18px 0; }
.sc-status.is-error { color: #B81B20; font-weight: 600; }

.sc-ticket {
  position: relative; width: 100%; max-width: 380px; aspect-ratio: 19 / 10;
  margin: 0 auto; border: 2px solid var(--sc-gold); background: var(--sc-cream);
  user-select: none; -webkit-user-select: none;
}
/* Perforated stub edges, so it reads as a ticket rather than a box. */
.sc-ticket::before, .sc-ticket::after {
  content: ""; position: absolute; top: 50%; width: 18px; height: 18px;
  margin-top: -9px; background: var(--sc-cream-warm); border: 2px solid var(--sc-gold);
  border-radius: 50%; z-index: 2;
}
.sc-ticket::before { left: -11px; clip-path: inset(0 0 0 50%); }
.sc-ticket::after { right: -11px; clip-path: inset(0 50% 0 0); }
.sc-prize {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 6px; padding: 16px;
  user-select: text; -webkit-user-select: text;
}
.sc-label {
  font-family: var(--sc-label); font-size: 11px; font-weight: 600;
  letter-spacing: .28em; text-transform: uppercase; color: var(--sc-gold);
}
.sc-code {
  font-family: var(--sc-disp); font-weight: 700; color: var(--sc-red);
  font-size: 38px; letter-spacing: .08em; line-height: 1.1; white-space: nowrap;
}
.sc-note {
  font-family: var(--sc-label); font-size: 12px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--sc-ink);
}
.sc-foil {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  cursor: grab; touch-action: none; z-index: 1; transition: opacity .5s ease;
}
.sc-foil:active { cursor: grabbing; }
.sc-foil.gone { opacity: 0; pointer-events: none; }

.sc-hint { font-size: 12.5px; color: var(--sc-ink-soft); margin: 16px 0 0; }
.sc-skip {
  background: none; border: 0; padding: 0; font: inherit; color: var(--sc-gold);
  text-decoration: underline; cursor: pointer;
}
.sc-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 20px; }
.sc-actions[hidden] { display: none; }
.sc-btn {
  display: inline-block; padding: 13px 22px; border: 1.5px solid var(--sc-red);
  background: var(--sc-red); color: var(--sc-cream); border-radius: 0; cursor: pointer;
  font-family: var(--sc-disp); font-size: 12px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; text-decoration: none;
  transition: background .15s, color .15s;
}
.sc-btn:hover { background: #B81B20; border-color: #B81B20; }
.sc-btn.ghost { background: transparent; color: var(--sc-ink); border-color: var(--sc-ink); }
.sc-btn.ghost:hover { background: var(--sc-ink); color: var(--sc-cream); }
.sc-fine { font-size: 11.5px; line-height: 1.5; color: var(--sc-ink-soft); margin: 18px auto 0; max-width: 340px; }

.sc-overlay {
  position: fixed; inset: 0; z-index: 9000;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  background: rgba(42, 33, 26, .72); backdrop-filter: blur(3px);
  opacity: 0; transition: opacity .25s ease;
}
.sc-overlay.show { opacity: 1; }
.sc-dialog {
  position: relative; width: 100%; max-width: 460px; max-height: calc(100vh - 40px);
  overflow-y: auto; padding: 38px 30px 30px;
  background: var(--sc-cream-warm); border: 2px solid var(--sc-gold);
  transform: translateY(12px); transition: transform .25s ease;
}
.sc-overlay.show .sc-dialog { transform: none; }
.sc-close {
  position: absolute; top: 8px; right: 10px; width: 36px; height: 36px;
  background: none; border: 0; font-size: 26px; line-height: 1; color: var(--sc-ink-soft); cursor: pointer;
}
.sc-close:hover { color: var(--sc-ink); }
.sc-later { font-size: 12px; color: var(--sc-ink-soft); text-align: center; margin: 14px 0 0; }
.sc button:focus-visible, .sc a:focus-visible, .sc-close:focus-visible { outline: 2px solid var(--sc-gold); outline-offset: 3px; }

.sc-preview-badge {
  position: fixed; left: 12px; bottom: 12px; z-index: 8000; padding: 6px 10px;
  background: var(--sc-mustard); color: var(--sc-ink); border: 1.5px solid var(--sc-ink);
  font-family: var(--sc-disp); font-size: 10.5px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .sc-overlay, .sc-dialog, .sc-foil { transition: none; }
}