/* Pineapple Robot — retro-tropical, mid-century cartoon, playful but polished */
:root {
  /* Brand palette */
  --teal: #3BA9A0;
  --teal-mid: #2F8C84;
  --teal-deep: #1F6B65;
  --teal-pale: #BFE2DE;
  --coral: #D94B3F;
  --coral-deep: #A8352B;
  --coral-pale: #F2A097;
  --cream: #F4E9D8;
  --cream-deep: #E5D5B8;
  --espresso: #2D1B14;
  --espresso-soft: #4A2E22;
  --yellow: #E8B547;
  --yellow-deep: #C8941F;
  --yellow-pale: #F5D580;
  --jungle: #2E6B3C;
  --jungle-deep: #1A4422;

  /* legacy aliases — keep old token names mapping into new palette */
  --maroon: var(--espresso-soft);
  --maroon-deep: var(--espresso);
  --maroon-darker: #1A0F08;
  --gold: var(--yellow);
  --gold-deep: var(--yellow-deep);
  --gold-pale: var(--yellow-pale);
  --magenta: var(--coral-deep);

  --bg: var(--teal);          /* primary teal background */
  --bg-2: var(--cream);        /* warm cream panels */
  --bg-3: var(--espresso);     /* espresso for moody sections */
  --fg: var(--cream);          /* cream on teal */
  --fg-soft: rgba(244, 233, 216, 0.78);
  --accent: var(--coral);      /* CTAs, highlights */
  --accent-2: var(--yellow);   /* secondary accent — pineapple yellow */
  --accent-3: var(--cream-deep);
  --ink: var(--espresso);      /* body text + outlines */

  --display: "Bagel Fat One", "Bowlby One", Impact, system-ui, sans-serif;
  --serif: var(--display);
  --mono: "DM Mono", "JetBrains Mono", "Courier New", monospace;
  --sans: "Poppins", "DM Sans", system-ui, -apple-system, sans-serif;

  --radius-sm: 12px;
  --radius-md: 22px;
  --radius-lg: 36px;
  --outline: 2.5px solid var(--ink);
}

[data-theme="light"] {
  --bg: var(--cream);
  --bg-2: var(--cream-deep);
  --bg-3: var(--teal-pale);
  --fg: var(--espresso);
  --fg-soft: rgba(45, 27, 20, 0.72);
  --accent: var(--coral);
  --accent-2: var(--yellow-deep);
  --accent-3: var(--teal-mid);
  --ink: var(--espresso);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
html { scroll-behavior: smooth; }
body { overflow-x: hidden; }
section[id] { scroll-margin-top: 96px; }
@media (max-width: 860px) { section[id] { scroll-margin-top: 76px; } }
img { max-width: 100%; display: block; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
a { color: inherit; text-decoration: none; }

/* ——— typography helpers ——— */
.tag {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--accent);
}
.display {
  font-family: var(--display);
  font-weight: 400;
  line-height: 0.92;
  letter-spacing: -0.01em;
}
.serif {
  font-family: var(--serif);
  font-weight: 400;
}

/* ——— buttons ——— */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 18px 30px;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--accent);
  color: var(--cream);
  border: 2.5px solid var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
  transition: transform .12s ease, box-shadow .12s ease;
}
.btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
.btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.btn--ghost {
  background: var(--cream);
  color: var(--ink);
}
.btn--yellow {
  background: var(--accent-2);
  color: var(--ink);
}

/* ——— layout ——— */
.wrap { width: min(1320px, 92%); margin: 0 auto; }
.section { padding: 120px 0; position: relative; }
@media (max-width: 860px) { .section { padding: 70px 0; } }

/* ——— marquee ——— */
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.marquee {
  display: flex;
  width: max-content;
  animation: marquee 50s linear infinite;
}
.marquee--fast { animation-duration: 22s; }

@keyframes bob {
  0%,100% { transform: translateY(0) rotate(-1deg); }
  50%     { transform: translateY(-8px) rotate(1deg); }
}
.bob { animation: bob 4s ease-in-out infinite; }

@keyframes glow-pulse {
  0%, 100% { opacity: 1; filter: drop-shadow(0 0 12px var(--accent)); }
  50%      { opacity: 0.85; filter: drop-shadow(0 0 4px var(--accent)); }
}
.glow { animation: glow-pulse 2.6s ease-in-out infinite; }

@keyframes spin-slow { to { transform: rotate(360deg); } }
.spin-slow { animation: spin-slow 40s linear infinite; }

/* Hero fallback loop fading in over the video when autoplay is blocked
   (iOS Low Power Mode and friends) — see HeroPhoto in hero.jsx. */
@keyframes prLoopIn { from { opacity: 0; } to { opacity: 1; } }

/* ——— grain ——— */
.grain::before {
  content: "";
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity: 0.08;
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* ——— vignette ——— */
.vignette::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.35) 100%);
  pointer-events: none;
}

/* ——— form ——— */
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-family: var(--mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; opacity: 0.7; }
.field input, .field textarea, .field select {
  font: inherit; font-family: var(--sans); font-size: 15px;
  background: var(--cream);
  color: var(--ink);
  border: var(--outline);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  outline: none;
  transition: box-shadow .15s ease;
}
.field input:focus, .field textarea:focus, .field select:focus {
  box-shadow: 4px 4px 0 var(--ink);
}
.field select { background: var(--cream); }

/* ——— horizontal rule ornament ——— */
.rule {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--sans); font-weight: 700; font-size: 12px; letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent-2);
}
.rule::before, .rule::after {
  content: ""; flex: 1; height: 2px; background: currentColor; opacity: 0.7; border-radius: 2px;
}

/* ——— card ——— */
.card {
  background: var(--cream);
  color: var(--ink);
  border: var(--outline);
  border-radius: var(--radius-md);
  padding: 32px;
  box-shadow: 6px 6px 0 var(--ink);
  transition: transform .18s ease, box-shadow .18s ease;
}
.card:hover { transform: translate(-3px, -3px); box-shadow: 9px 9px 0 var(--ink); }

/* ——— tropical leaf decoration ——— */
.leaf-decor { position: absolute; opacity: 0.18; pointer-events: none; }

/* hide scrollbars on horizontal rows */
.snap-row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 78%;
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 12px 6%;
  scrollbar-width: none;
}
.snap-row::-webkit-scrollbar { display: none; }
.snap-row > * { scroll-snap-align: center; }
@media (min-width: 720px) { .snap-row { grid-auto-columns: 38%; } }
@media (min-width: 1100px) { .snap-row { grid-auto-columns: 28%; } }

/* ──────────────────────────────────────────────────────────────────── */
/* NAV (desktop styles + hamburger + drawer)                            */
/* ──────────────────────────────────────────────────────────────────── */
.pr-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  background: transparent;
  border-bottom: 2.5px solid transparent;
  transition: background .3s ease, border-color .3s ease, backdrop-filter .3s ease;
}
.pr-nav--scrolled {
  background: rgba(59, 169, 160, 0.95);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom-color: var(--ink);
}
[data-theme="light"] .pr-nav--scrolled {
  background: rgba(244, 233, 216, 0.92);
}
.pr-nav__row {
  position: relative;
  z-index: 2;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 0;
  gap: 24px;
}
.pr-nav__logo { display: flex; align-items: center; gap: 10px; }
.pr-nav__logo img { height: 56px; width: auto; display: block; }
.pr-nav__links { display: flex; gap: 4px; flex-wrap: wrap; }
.pr-nav__links a {
  padding: 10px 16px;
  font-family: var(--sans); font-size: 13px; letter-spacing: .05em;
  font-weight: 700; text-transform: uppercase;
  color: var(--cream);
  transition: color .15s ease;
}
.pr-nav__links a:hover { color: var(--accent-2); }
[data-theme="light"] .pr-nav__links a { color: var(--ink); }
.pr-nav__actions { display: flex; gap: 10px; align-items: center; }
.pr-nav__theme {
  width: 44px; height: 44px;
  border-radius: 999px;
  border: 2.5px solid var(--ink);
  background: var(--cream);
  color: var(--ink);
  display: grid; place-items: center;
  box-shadow: 3px 3px 0 var(--ink);
  font-size: 18px;
  cursor: pointer;
}
.pr-nav__order { padding: 12px 20px; }
.pr-nav__burger {
  display: none;
  width: 48px; height: 48px;
  border-radius: 999px;
  border: 2.5px solid var(--ink);
  background: var(--cream);
  align-items: center; justify-content: center; flex-direction: column;
  gap: 4px;
  box-shadow: 3px 3px 0 var(--ink);
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}
.pr-nav__burger span {
  display: block;
  width: 18px; height: 2.5px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform .25s ease, opacity .2s ease;
  transform-origin: center;
}
.pr-nav__burger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}
.pr-nav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.pr-nav__burger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}
.pr-nav__drawer { display: none; }

/* Plain text link in Visit info rows */
.pr-info__link {
  text-decoration: underline;
  text-decoration-color: rgba(232, 181, 71, 0.5);
  text-underline-offset: 4px;
  transition: text-decoration-color .15s ease, color .15s ease;
}
.pr-info__link:hover { text-decoration-color: var(--accent-2); }

/* ──────────────────────────────────────────────────────────────────── */
/* MOBILE BOTTOM BAR                                                    */
/* ──────────────────────────────────────────────────────────────────── */
.pr-bottombar { display: none; }

/* ──────────────────────────────────────────────────────────────────── */
/* MOBILE / TABLET — ≤ 720px                                           */
/* ──────────────────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  /* Defensive: hard-clip any horizontal overflow at the root */
  html, body { overflow-x: clip; max-width: 100vw; }
  .wrap { width: 92%; }

  /* Reserve room at bottom for the sticky bar */
  body { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }

  /* — Nav: swap to hamburger — */
  .pr-nav__links, .pr-nav__actions { display: none; }
  .pr-nav__burger { display: flex; }
  .pr-nav__row { padding: 12px 0; gap: 12px; }
  .pr-nav__logo img { height: 44px; }

  /* Nav drawer — sibling of nav, positioned against the viewport */
  .pr-nav__drawer {
    display: block;
    position: fixed;
    top: 70px; left: 0; right: 0; bottom: 0;
    background: var(--bg);
    border-top: 2.5px solid var(--ink);
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s ease;
    z-index: 49; /* above page + bottombar, below nav (50) */
  }
  .pr-nav__drawer.is-open { opacity: 1; pointer-events: auto; }
  .pr-nav__drawer-inner {
    height: 100%;
    padding: 28px 24px calc(28px + env(safe-area-inset-bottom));
    display: flex; flex-direction: column;
    overflow-y: auto;
  }
  .pr-nav__drawer-links { display: flex; flex-direction: column; gap: 2px; }
  .pr-nav__drawer-links a {
    font-family: var(--display);
    font-size: clamp(34px, 9vw, 44px);
    line-height: 1;
    color: var(--cream);
    padding: 14px 0;
    border-bottom: 2px solid rgba(244, 233, 216, 0.18);
    transition: color .15s ease, padding-left .15s ease;
  }
  .pr-nav__drawer-links a:active { color: var(--accent-2); padding-left: 6px; }
  [data-theme="light"] .pr-nav__drawer-links a { color: var(--ink); border-bottom-color: rgba(45, 27, 20, 0.15); }
  .pr-nav__drawer-foot {
    margin-top: auto;
    padding-top: 28px;
    display: grid;
    gap: 12px;
  }
  .pr-nav__drawer-theme {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 10px;
    padding: 14px 22px;
    border-radius: 999px;
    border: 2.5px solid var(--cream);
    background: transparent;
    color: var(--cream);
    font-family: var(--sans); font-weight: 700; font-size: 13px;
    letter-spacing: .06em; text-transform: uppercase;
    cursor: pointer;
  }
  [data-theme="light"] .pr-nav__drawer-theme {
    border-color: var(--ink); color: var(--ink);
  }
  .pr-nav__drawer-order { width: 100%; justify-content: center; }

  /* — Hide decorative leaves to stop them peeking on small screens — */
  .pr-hero__leaves { display: none; }

  /* — Hero — */
  .pr-hero__grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
    padding-top: 100px !important;
    padding-bottom: 56px !important;
    align-items: start !important;
    min-height: auto !important;
  }
  .pr-hero__copy {
    justify-items: start !important;
    text-align: left !important;
    gap: 22px !important;
  }
  .pr-hero__eyebrow { width: 100% !important; max-width: 360px; font-size: 11px !important; }
  .pr-hero__h1 {
    font-size: clamp(56px, 16vw, 96px) !important;
    line-height: 0.95 !important;
  }
  .pr-hero__copy p { font-size: 16px !important; }
  /* Make the hero image scale full-width on mobile */
  .pr-hero__grid > :nth-child(2) > div {
    max-width: 100% !important;
  }

  /* Hero marquee text smaller */
  .marquee { font-size: 22px !important; }

  /* — Section padding — */
  .section { padding: 56px 0; }

  /* — Display headings everywhere scale down — */
  section .display { letter-spacing: 0; }
  /* Story h2 / Cocktails h2 / Pizza h2 / Events h2 / Visit h2 */
  section h2.display {
    font-size: clamp(40px, 11vw, 72px) !important;
  }
  /* Stats */
  section .display[style*="font-size: 56px"],
  section .display[style*="font-size:56px"] {
    font-size: 40px !important;
  }

  /* — Story stack — */
  .pr-story__grid { grid-template-columns: 1fr !important; gap: 40px !important; }
  .pr-story__tiles { grid-template-columns: 1fr 1fr; gap: 12px !important; }

  /* — Story stats: keep all three on one row — */
  .pr-story__stats {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 10px !important;
  }
  .pr-story__stats .display.pr-stat__n {
    font-size: clamp(20px, 6.4vw, 32px) !important;
    letter-spacing: -0.02em;
  }
  .pr-story__stats .pr-stat__label { font-size: 9px; letter-spacing: .03em; }

  /* — Cocktails stack — */
  .pr-cocktails__grid { grid-template-columns: 1fr !important; gap: 32px !important; }
  /* Featured cocktail card: drop strict aspect ratio, tighten paddings */
  .pr-cocktails__grid > div:last-child {
    padding: 24px !important;
    aspect-ratio: auto !important;
    min-height: 460px;
    box-shadow: 6px 6px 0 var(--ink) !important;
  }
  .pr-cocktails__grid > div:last-child h3.display {
    font-size: 38px !important;
  }
  .pr-cocktails__grid > div:last-child .display[style*="font-size: 44px"] {
    font-size: 28px !important;
  }
  /* Cocktail list rows: tighten name */
  .pr-cocktails__grid > :first-child .display { font-size: 24px !important; }

  /* — Pizza grid — already auto-fit, but tighten card paddings */
  .card { padding: 22px; box-shadow: 5px 5px 0 var(--ink); }

  /* — Private events: stack the intro over the list on mobile — */
  .pr-private__grid { grid-template-columns: 1fr !important; gap: 36px !important; }
  .pr-private__cell { padding: 18px 20px !important; }
  .pr-private__cell .display[style*="font-size: 26px"] { font-size: 20px !important; }

  /* — Visit stack — */
  /* Form card */
  .pr-visit__form { margin-bottom: 48px !important; padding: 22px !important; box-shadow: 6px 6px 0 var(--accent) !important; }
  /* Big phone number — smaller on mobile */
  .pr-visit .display[style*="font-size: 56px"],
  #visit .display[style*="font-size: 56px"] {
    font-size: clamp(26px, 7vw, 34px) !important;
    word-break: break-word;
  }
  /* Visit CTAs — full width buttons; hide the in-section order button on mobile */
  .pr-visit__cta { display: grid !important; grid-template-columns: 1fr; gap: 12px !important; }
  .pr-visit__cta .btn { justify-content: center; }
  .pr-visit__order { display: none !important; }

  /* — Buttons feel chunkier and stay full-width when alone in a row — */
  .btn { padding: 16px 24px; font-size: 13px; }

  /* — Form: prevent iOS zoom by keeping inputs ≥16px — */
  .field input, .field textarea, .field select { font-size: 16px; padding: 14px 14px; }

  /* — Press grid stacks naturally; just tighten cards — */

  /* — Footer wraps; tighten — */
  footer .wrap { gap: 12px !important; }
  footer img { height: 44px !important; }

  /* — Mobile bottom bar visible — */
  .pr-bottombar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 48; /* below drawer (49); drawer covers it when open */
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    background: rgba(45, 27, 20, 0.92);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-top: 2.5px solid var(--ink);
  }
  .pr-bottombar__btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 8px;
    padding: 16px 18px;
    border-radius: 999px;
    font-family: var(--sans);
    font-weight: 700; font-size: 13px; letter-spacing: .05em;
    text-transform: uppercase;
    border: 2.5px solid var(--ink);
    box-shadow: 3px 3px 0 var(--ink);
    text-align: center;
  }
  .pr-bottombar__btn--call { background: var(--cream); color: var(--ink); }
  .pr-bottombar__btn--order { background: var(--accent); color: var(--cream); }
  .pr-bottombar__btn:active { transform: translate(1.5px, 1.5px); box-shadow: 1.5px 1.5px 0 var(--ink); }
}

/* ──────────────────────────────────────────────────────────────────── */
/* SMALL PHONES — ≤ 380px                                              */
/* ──────────────────────────────────────────────────────────────────── */
@media (max-width: 380px) {
  .pr-hero__h1 { font-size: clamp(48px, 14vw, 64px) !important; }
  section h2.display { font-size: clamp(36px, 10vw, 56px) !important; }
  .pr-nav__logo img { height: 38px; }
  .pr-bottombar__btn { padding: 14px 14px; font-size: 12px; }
  .marquee { font-size: 18px !important; }
}

/* ──────────────────────────────────────────────────────────────────── */
/* CHAT WIDGET                                                          */
/* ──────────────────────────────────────────────────────────────────── */
.pr-chat-dot {
  width: 7px; height: 7px; border-radius: 999px;
  background: var(--ink); display: inline-block;
  animation: pr-chat-bounce 1s infinite ease-in-out;
}
@keyframes pr-chat-bounce {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.4; }
  40% { transform: translateY(-5px); opacity: 1; }
}
/* Keep the launcher clear of the mobile bottom bar. The panel's mobile
   size/position is computed in chatbot.jsx from the visual viewport so it
   always fits above the keyboard — don't override it here. */
@media (max-width: 860px) {
  .pr-chat-launcher { bottom: 90px !important; right: 16px !important; }
}

/* ──────────────────────────────────────────────────────────────────── */
/* PIZZA GRID                                                           */
/* ──────────────────────────────────────────────────────────────────── */
.pr-pizza__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr); /* 10 specialty pizzas → 2 rows */
  gap: 28px;
}
@media (max-width: 1100px) {
  .pr-pizza__grid { gap: 18px; }
}
@media (max-width: 860px) {
  /* Mobile: 2 across, smaller titles */
  .pr-pizza__grid { grid-template-columns: 1fr 1fr; gap: 14px; }
  .pr-pizza__name { font-size: 17px !important; line-height: 1.05; }
  .pr-pizza__body { padding: 14px !important; }
}

/* Story photo-tile captions: shrink on mobile so they cover less of the image */
@media (max-width: 860px) {
  .pr-phototile__caption {
    font-size: 9px !important;
    letter-spacing: .02em !important;
    padding: 4px 8px !important;
    left: 8px !important;
    bottom: 8px !important;
    border-width: 1.5px !important;
    max-width: calc(100% - 16px);
  }
}

/* ──────────────────────────────────────────────────────────────────── */
/* COCKTAILS — mobile swipe carousel                                    */
/* ──────────────────────────────────────────────────────────────────── */
.pr-cocktails__mobile { display: none; }
@media (max-width: 860px) {
  /* swap the list+featured layout for a swipeable row of the same tiles */
  .pr-cocktails__desktop { display: none !important; }
  .pr-cocktails__mobile { display: block; }

  .pr-cocktails__viewport {
    overflow: hidden;
    padding: 4px 2px 18px;
  }
  .pr-cocktails__track {
    display: flex;
    gap: 16px;
    will-change: transform;
    touch-action: pan-y;            /* page still scrolls vertically; we own horizontal */
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
  }
  .pr-cocktails__track:active { cursor: grabbing; }
  .pr-cocktails__track > .pr-cocktail-card {
    flex: 0 0 80%;                  /* matches the old 80% tile width + side peeks */
  }
  .pr-cocktails__track img { -webkit-user-drag: none; user-drag: none; }

  /* tile sizing for the carousel — height auto-fits the square photo below */
  .pr-cocktail-card {
    aspect-ratio: auto !important;
    height: auto !important;
    padding: 22px !important;
    box-shadow: 6px 6px 0 var(--ink) !important;
  }
  /* Square photo slot so the full (1:1) drink shows instead of a cropped strip */
  .pr-cocktail-card__media {
    flex: 0 0 auto !important;
    aspect-ratio: 1 / 1 !important;
    width: 100%;
    margin: 16px 0 !important;
  }
  /* All swiped tiles share the tallest tile's height, so a short blurb (Moscow
     Mule) can't leave a stubby card next to its neighbours. Everything above the
     name is fixed-height (one-line tag row + 1:1 photo), so packing the stack to
     flex-start lands the name at the same y on every tile and drops all the
     slack at the bottom of the short ones. Nothing may use margin-top:auto here
     — that would push the text block down and float the name again. */
  .pr-cocktails__track { align-items: stretch; }
  .pr-cocktail-card { justify-content: flex-start !important; }
  .pr-cocktail-card h3.display { font-size: 26px !important; }
  /* The name is NOT padded out to a fixed two lines: reserving the second line
     left a visible hole under one-line drinks like Piñarita. The blurb sits at
     its normal offset from the name instead, so on a wrapping name (Lazy Tree
     Hugger) it starts one line lower than its neighbours. */
  .pr-cocktail-card .display[style*="font-size: 44px"] { font-size: 26px !important; }
  .pr-cocktail-card p { font-size: 14px !important; }

  .pr-cocktails__hint {
    text-align: center; margin-top: 4px;
    font-family: var(--sans); font-weight: 700; font-size: 12px;
    letter-spacing: .08em; text-transform: uppercase; color: var(--fg-soft);
  }
}

/* ——— visit: branded "open in maps" chip ——— */
/* Parked over the top-left of the embed, on top of Google's own place card /
   "Open in Maps" control — that one deep-links the Maps app and silently does
   nothing on a lot of phones, so ours is the only one that should be
   reachable. Sized to swallow the card underneath it.
   Google's logo (bottom-left) and the Map data / Terms strip (bottom-right)
   are deliberately left clear — the Maps terms require those stay visible. */
/* Kept compact on purpose. Fully blanketing Google's place card would take a
   316x106 block, which is a lot of coral sitting on the map — this sits on the
   card's top-left corner instead and lets the rest of it show. */
.pr-map__chip {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  padding: 11px 16px;
  font-size: 11px;
  line-height: 1;
  gap: 6px;
  box-shadow: 3px 3px 0 var(--ink);
}
.pr-map__chip:hover { box-shadow: 5px 5px 0 var(--ink); }
.pr-map__chip:active { box-shadow: 1px 1px 0 var(--ink); }

/* On a wide map Google draws a full place card at the top left, and the chip
   was sitting on the address. There's room over there, so send it to the
   opposite corner — clear of the card (top left), the logo (bottom left), the
   terms strip (bottom right) and the zoom/fullscreen controls (mid right).
   Phones keep the top-left position: the control Google draws on a narrow map
   is a small chip with no address on it, and ours lands neatly on top. */
@media (min-width: 861px) {
  .pr-map__chip {
    left: auto;
    right: 10px;
  }
}

/* ——— visit: map beside the copy ——— */
/* Mobile keeps the stacked layout it has always had: map under the CTAs.
   Everything that changes the arrangement is scoped to min-width: 861px, so
   the phone rendering is untouched by design, not by luck. */
.pr-visit__map { margin-top: 32px; }

@media (min-width: 861px) {
  .pr-visit__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 56px;
    align-items: start;
  }
  /* The map is its own column now, so it sits level with the eyebrow rather
     than hanging off the bottom of the copy. It stretches down the column so
     it runs beside the address and hours too, instead of leaving a void
     under itself — capped so it never outgrows the viewport by much. */
  .pr-visit__map {
    margin-top: 0;
    align-self: stretch;
    display: flex;
  }
  .pr-visit__map > div { flex: 1; max-height: 820px; }
  .pr-visit__map iframe { height: 100%; }
}

/* ——— hero: teal stops at the marquee ——— */
/* The hero section carries an inline min-height: 100vh. On a phone the hero
   content is normally taller than the screen so that never bites — but on a
   short/wide screen, or if the copy comes up short, the section stretches past
   the marquee and leaves a teal tail above the cream Story section. The
   marquee is the hero's bottom edge; nothing should render below it. */
@media (max-width: 860px) {
  #top { min-height: 0 !important; }
}