/* ============================================================================
   AVALON BEACH HOUSE — styles.css
   ----------------------------------------------------------------------------
   Exact-copy lift-and-shift of avalondelray.com. Colours, fonts, layout order,
   and imagery are matched directly against the live site (screenshots +
   extracted Wix assets + computed styles) — not reinterpreted.

   Structure of this file:
     1. FONTS
     2. TOKENS
     3. RESET + PAGE SHELL
     4. TYPOGRAPHY
     5. LAYOUT HELPERS + SQUIGGLE DIVIDER
     6. TOP BAR + NAV OVERLAY (MIGRATION.md §2.1, adapted to the live site's
        full-screen overlay pattern instead of the studio's slide-in panel)
     7. BUTTONS
     8. UTILITY BAR (email signup + Instagram)
     9. HOMEPAGE SECTIONS (hero / story / cocktails band / menu / link-list /
        dj set / hours+address)
    10. PROMO POPUP
    11. LINKS PAGE
    12. UTILITIES
   ========================================================================= */


/* ============================================================================
   1. FONTS
   ========================================================================= */

@font-face {
  font-family: 'TAY Dreamboat';
  src: url('fonts/TAYDreamboat.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'TAY Dreamboat';
  src: url('fonts/TAYDreamboat-Thin.woff2') format('woff2');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Lake House';
  src: url('fonts/LakeHouse.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}


/* ============================================================================
   2. TOKENS — sampled directly off avalondelray.com's rendered page
   ========================================================================= */

:root {
  --av-font-display: 'TAY Dreamboat', 'Arial Rounded MT Bold', Arial, sans-serif;
  --av-font-label:   'Lake House', Georgia, 'Times New Roman', serif;
  --av-font-body:    'Lake House', Georgia, 'Times New Roman', serif;

  --av-sand:   #BFB2A0;  /* dominant page background, everywhere */
  --av-ink:    #303236;  /* buttons, utility bar, nav overlay, illustration lines */
  --av-ink-deep: #201f22;
  --av-cream:  #FBF7EE;  /* headings + body copy on sand/photo/ink */
  --av-grey:   #CDC6C2;  /* brush-stroke button shapes, from the source artwork's own fill */

  --step--1: 0.85rem;
  --step-0:  1rem;
  --step-1:  1.15rem;
  --step-2:  clamp(1.35rem, 1.1rem + 1vw, 1.75rem);
  --step-3:  clamp(1.8rem,  1.3rem + 2vw, 2.6rem);
  --step-4:  clamp(2.6rem,  1.6rem + 4vw, 4.4rem);   /* section headings */
  --step-5:  clamp(2.4rem,  1rem + 6vw,   4.8rem);    /* big stacked links */

  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-s:   0.85rem;
  --space-m:   1.35rem;
  --space-l:   2.2rem;
  --space-xl:  3.5rem;
  --space-2xl: 5.5rem;

  --radius-s: 4px;
  --radius-m: 10px;
  --pill: 999px;
  --measure: 62ch;
  --page-max: 1400px;
  --gutter: clamp(1.1rem, 4vw, 3rem);
}


/* ============================================================================
   3. RESET + PAGE SHELL
   ========================================================================= */

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

html { scroll-behavior: smooth; overflow-x: hidden; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--av-sand);
  color: var(--av-cream);
  font-family: var(--av-font-body);
  font-size: var(--step-0);
  line-height: 1.6;
  overflow-x: hidden;
}

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

main { display: block; }
img { max-width: 100%; display: block; }
video { max-width: 100%; display: block; }
video[hidden] { display: none; }

a { color: inherit; text-decoration-thickness: from-font; }

:focus-visible { outline: 2px solid var(--av-cream); outline-offset: 3px; }


/* ============================================================================
   4. TYPOGRAPHY
   ========================================================================= */

h1, h2 {
  font-family: var(--av-font-display);
  font-weight: 400;
  color: var(--av-cream);
  margin: 0;
  line-height: 1.02;
  letter-spacing: 0.005em;
}
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-4); }

p {
  margin: 0 0 1em;
  max-width: var(--measure);
  font-weight: 700;
  font-size: var(--step--1);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--av-cream);
}

.text-center { text-align: center; }


/* ============================================================================
   5. LAYOUT HELPERS + SQUIGGLE DIVIDER
   ========================================================================= */

.wrap {
  max-width: var(--page-max);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

main section { padding-block: var(--space-xl); }

/* Desktop/mobile variant toggle — some sections ship genuinely different
   markup per breakpoint rather than one fluid layout (see Story, Menu). */
.desktop-only { display: none; }
.mobile-only { display: block; }
@media (min-width: 760px) {
  .desktop-only { display: block; }
  .mobile-only { display: none; }
}

/* Hand-drawn squiggle underline (recreates the live site's SVG shape
   dividers used above/below the RESERVATIONS / PRIVATE EVENTS / GIFT CARDS
   links and above HOURS). */
.squiggle {
  display: block;
  width: 100%;
  height: 14px;
  margin-block: var(--space-s);
}
.squiggle path { fill: none; stroke: var(--av-cream); stroke-width: 3; stroke-linecap: round; }


/* ============================================================================
   6. TOP BAR + NAV OVERLAY
   ========================================================================= */

.topbar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-m) var(--gutter) var(--space-s);
  gap: var(--space-m);
}
@media (max-width: 640px) {
  .topbar .btn-light { display: none; }
}

.topbar__logo {
  height: clamp(35.84px, 7.04vw, 83.2px);
  width: auto;
  min-width: 0;
  flex-shrink: 1;
  filter: brightness(0) invert(1); /* the source mark is dark ink; the live site shows it cream-on-sand */
}
.topbar .btn-light {
  flex-shrink: 0;
  font-size: var(--step-1);
  padding: 1.2em 2.3em;
  background: var(--av-cream);
  color: var(--av-sand);
  border-radius: 0;
  mask-image: url('images/btn-shape-1.svg');
  -webkit-mask-image: url('images/btn-shape-1.svg');
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: 100% 100%;
}
.topbar .btn-light:hover, .topbar .btn-light:focus-visible { background: #fff; filter: brightness(1.1); }
.topbar .icon { flex-shrink: 0; }

.icon {
  width: 72px;
  height: 72px;
  padding: 0;
  background: none;
  border: none;
  appearance: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--av-cream);
  flex-shrink: 0;
}
.icon svg { width: 58px; height: auto; overflow: visible; }
.icon svg path { transition: transform .3s ease, opacity .2s ease; transform-box: fill-box; transform-origin: center; }
.icon[aria-expanded="true"] svg path:nth-of-type(1) { transform: translateY(12px) rotate(45deg); }
.icon[aria-expanded="true"] svg path:nth-of-type(2) { opacity: 0; }
.icon[aria-expanded="true"] svg path:nth-of-type(3) { transform: translateY(-12px) rotate(-45deg); }

.order-online-tab {
  position: fixed;
  top: 45%;
  right: 0;
  z-index: 25;
  background: var(--av-ink);
  color: var(--av-sand);
  writing-mode: vertical-rl;
  padding: var(--space-l) var(--space-s);
  font-family: var(--av-font-label);
  font-size: var(--step-2);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--radius-s) 0 0 var(--radius-s);
  box-shadow: -2px 3px 10px rgba(0, 0, 0, .2);
  transform-origin: 100% 50%;
}
.order-online-tab:hover, .order-online-tab:focus-visible { background: var(--av-ink-deep); }

/* Pinned to the right edge, slowly flapping in the breeze */
@media (prefers-reduced-motion: no-preference) {
  .order-online-tab {
    animation: order-tab-flap 3.6s cubic-bezier(.37, 0, .63, 1) infinite alternate;
    will-change: transform;
  }
}
@media (max-width: 759px) {
  .order-online-tab { display: none; }
}
@keyframes order-tab-flap {
  from { transform: perspective(600px) rotateY(-12deg); }
  to   { transform: perspective(600px) rotateY(26deg); }
}

.no-scroll { overflow: hidden; }

.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(30, 32, 35, .93);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  padding: var(--space-2xl) var(--gutter);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}
.nav-overlay.show { opacity: 1; pointer-events: auto; }

.nav-overlay__close {
  position: absolute;
  top: var(--space-l);
  right: var(--space-l);
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  border: none;
  color: var(--av-cream);
  font-size: 1.5rem;
  cursor: pointer;
}

.nav-overlay__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1em;
}
.nav-overlay__links a {
  font-family: var(--av-font-display);
  font-size: clamp(2.2rem, 4vw + 1rem, 4.5rem);
  color: var(--av-cream);
  text-decoration: none;
  line-height: 1.15;
  text-transform: uppercase;
}
.nav-overlay__links a:hover, .nav-overlay__links a:focus-visible { color: var(--av-sand); }

.nav-overlay__subscribe-slot {
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  bottom: var(--space-l);
}
@media (max-width: 759px) {
  .nav-overlay__subscribe-slot {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-s);
  }
}
.nav-overlay__subscribe-slot .newsletter-btn { align-self: center; }
.nav-overlay__subscribe-slot .nav-overlay__reserve {
  justify-content: center;
  background: var(--av-cream);
  color: var(--av-ink);
  border-radius: 0;
  padding: 1.04em 1.84em;
  font-size: calc(var(--step-1) * 1.25);
  min-height: 62px;
  mask-image: url('images/btn-shape-2.svg');
  -webkit-mask-image: url('images/btn-shape-2.svg');
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: 100% 100%;
}


/* ============================================================================
   7. BUTTONS — hand-torn rectangle pills (charcoal fill, cream label)
   ========================================================================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.85em 1.6em;
  font-family: var(--av-font-label);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  border: none;
  border-radius: 3px 8px 4px 9px / 9px 4px 8px 3px;
}

.btn-dark {
  background: var(--av-ink);
  color: var(--av-cream);
}
.btn-dark:hover, .btn-dark:focus-visible { background: var(--av-ink-deep); }
.btn-dark:nth-of-type(2) { transform: rotate(-0.4deg); }
.btn-dark:nth-of-type(3) { transform: rotate(0.5deg); }

/* Menu buttons — real hand-drawn brush-stroke shapes (masked so each can take
   its own colour) instead of the generic torn-rectangle border-radius. */
.menu-section .btn-row .btn {
  border-radius: 0;
  background-image: none;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: 100% 100%;
}
.menu-section .btn-row .btn:nth-child(1) {
  mask-image: url('images/btn-shape-1.svg');
  -webkit-mask-image: url('images/btn-shape-1.svg');
  background-color: var(--av-ink);
  color: var(--av-cream);
}
.menu-section .btn-row .btn:nth-child(2) {
  mask-image: url('images/btn-shape-2.svg');
  -webkit-mask-image: url('images/btn-shape-2.svg');
  background-color: var(--av-ink);
  color: var(--av-cream);
}
.menu-section .btn-row .btn:nth-child(3) {
  mask-image: url('images/btn-shape-3.svg');
  -webkit-mask-image: url('images/btn-shape-3.svg');
  background-color: var(--av-ink);
  color: var(--av-cream);
}
.menu-section .btn-row .btn:hover,
.menu-section .btn-row .btn:focus-visible {
  filter: brightness(1.12);
}

.btn-light {
  background: var(--av-cream);
  color: var(--av-ink);
  border-radius: var(--radius-s);
}
.btn-light:hover, .btn-light:focus-visible { background: #fff; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-m);
}


/* ============================================================================
   8. UTILITY BAR — email signup (left) + Instagram (right), dark strip
   ========================================================================= */

.utility-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  background: var(--av-ink);
  color: var(--av-cream);
}
.utility-bar__wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
  padding-block: var(--space-s);
}

.newsletter-btn {
  background: none;
  border: none;
  color: var(--av-cream);
  font-family: var(--av-font-label);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: underline;
  cursor: pointer;
  min-height: 44px;
  padding: 0;
}

/* SevenRooms subscription widget — mounted but visually collapsed; its own
   modal renders position:fixed so it still shows full-viewport when opened.
   Never display:none this (that would suppress the modal too). */
.sr-widget-mount {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* Stand-in close (×) button, drawn on top of the widget's own close icon —
   its icon font doesn't always load, leaving it invisible but clickable. */
.sr-close-btn {
  position: fixed;
  z-index: 2147483647;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.06);
  color: var(--av-ink);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}
.sr-close-btn:hover, .sr-close-btn:focus-visible { background: rgba(0, 0, 0, 0.12); }
.sr-close-btn[hidden] { display: none; }

.utility-bar__social {
  display: flex;
  align-items: center;
  gap: var(--space-s);
  font-family: var(--av-font-label);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: underline;
  color: var(--av-cream);
  min-height: 44px;
}
.utility-bar__social svg { width: 22px; height: 22px; }

/* Mobile: newsletter signup lives in the nav menu and Instagram is its own
   last section in normal flow — the fixed bottom bar is desktop-only. */
@media (max-width: 759px) {
  .utility-bar { display: none; }
}

.instagram-outer { padding-block: 0; }
.instagram-section {
  display: flex;
  justify-content: center;
  background: var(--av-ink);
  color: var(--av-cream);
  padding: 0;
}
.instagram-section .utility-bar__social { color: var(--av-cream); }


/* ============================================================================
   9. HOMEPAGE SECTIONS
   ========================================================================= */

/* --- Hero: sand background + hand-drawn building illustration ---------- */

.hero { position: relative; padding-block: 0; }
.hero__illustration { width: 70%; height: auto; display: block; margin-inline: auto; }
@media (max-width: 759px) {
  .hero { padding-top: var(--space-m); }
  .hero__illustration { width: 92%; }
}

/* --- Story ---------------------------------------------------------------- */

.story__photo-wrap {
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  z-index: 0;
}
.story__photo { width: 100%; height: 100%; object-fit: cover; display: block; }

@keyframes story-vinyl-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .story__vinyl, .story__vinyl-desktop { animation: none; }
}

/* Desktop — original side-by-side grid */
.story__grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: var(--space-xl);
  align-items: end;
}
.story__grid .story__photo-wrap {
  width: 100%;
  max-width: 700px;
  margin-inline: auto;
}
.story__text { position: relative; text-align: right; }
.story__lede-desktop {
  max-width: 60ch;
  margin: 0 0 var(--space-l);
  text-align: left;
  font-size: clamp(0.8rem, 0.7rem + 0.5vw, 1.3rem);
}
.story__heading-row {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: clamp(1rem, 4vw, 4rem);
  transform: translateX(-20%);   /* shift left so the text's left edge overlaps the photo */
}
.story__heading-row h2 { font-size: clamp(1.6rem, 1rem + 4.6vw, 5.1rem); text-align: right; }
.story__vinyl-desktop {
  width: clamp(126px, 18vw, 225px);
  height: clamp(126px, 18vw, 225px);
  object-fit: contain;
  flex-shrink: 0;
  border-radius: 50%;
  animation: story-vinyl-spin 6s linear infinite;
}

/* Mobile — image+heading up top, paragraph below, record under that */
.story__top {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: var(--space-m);
  margin-bottom: var(--space-l);
}
.story__top .story__photo-wrap {
  width: 300px;
  flex-shrink: 0;
  margin-left: 10vw;
}
.story__top h2 {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  transform: translateX(-45%);   /* shift left so the text overlaps the photo */
  font-size: clamp(2.4rem, 1.4rem + 6vw, 7rem);
  text-align: right;
}
.story__lede {
  max-width: 60ch;
  margin: 0 auto 0;
  text-align: left;
  font-size: clamp(1.2rem, 1rem + 1vw, 2rem);
}
.story__vinyl { display: none; } /* duplicate of the record in the slides section below — stays out of flow */

/* --- Full-bleed photo band (cocktails) ----------------------------------- */

.photo-band {
  position: relative;
  overflow: visible;
  padding-bottom: 0;
}
.photo-band__img { width: 100%; height: clamp(500px, 60vh, 900px); object-fit: cover; display: block; }

.photo-band__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--av-cream);
  background: none;
  border: none;
  z-index: 2;
}
.photo-band__arrow svg { width: 100%; height: 100%; }
.photo-band__arrow--prev { left: var(--gutter); }
.photo-band__arrow--next { right: var(--gutter); }

.photo-band__decor {
  position: absolute;
  top: 88%;
  right: 8%;
  width: clamp(378px, 42vw, 588px);
  height: clamp(378px, 42vw, 588px);
  z-index: 1;
}

.photo-band__vinyl {
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(50%, -50%);   /* straddles the Story/slide boundary and the right edge */
  width: clamp(126px, 18vw, 225px);
  height: clamp(126px, 18vw, 225px);
  object-fit: contain;
  border-radius: 50%;
  z-index: 2;
  animation: story-vinyl-spin 6s linear infinite;
}
.photo-band__cloud {
  position: absolute;
  top: 100%;
  right: 26%;
  transform: translateY(-80%);   /* straddles the section boundary, shifted up 30% */
  width: clamp(168px, 21vw, 294px);
  height: auto;
  object-fit: contain;
  z-index: 2;
}
.photo-band__circle {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  position: relative;
  z-index: 1;
}

/* --- Menu ------------------------------------------------------------------ */

.menu-section { padding-top: var(--space-xl); }
@media (min-width: 760px) { .menu-section { padding-top: var(--space-2xl); } }

/* Desktop — original 2-column grid (copy | heading), buttons in a row below */
.menu-section__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
  align-items: end;
  text-align: left;
}
.menu-section__grid h2 {
  text-align: left;
  transform: translate(20%, 90%);   /* sits lower, below the image, shifted right */
}
.menu-section__grid .menu-section__text p { font-size: clamp(1.05rem, 0.9rem + 0.6vw, 1.35rem); }

.menu-section__btn-row-desktop { margin-top: clamp(4rem, 20vw, 11rem); justify-content: center; flex-wrap: nowrap; }
.menu-section__btn-row-desktop .btn {
  flex: 1;
  font-size: clamp(0.65rem, 0.4rem + 1vw, 1.15rem);
  padding: clamp(0.6em, 0.3em + 1vw, 1.15em) clamp(0.5em, 0.2em + 1vw, 2em);
}

.menu-section__stack {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: left;
  gap: var(--space-l);
}

.menu-section__stack h2 { text-align: left; }

.menu-section__buttons {
  flex-direction: column;
  flex-wrap: nowrap;
  width: 100%;
}
.menu-section__buttons .btn {
  /* The hand-drawn mask shapes have real padding baked into the artwork
     itself (visually inset even at mask-size:100%), so they can't reach a
     true full-width edge — use the plain rounded shape here instead.
     !important: the shared .menu-section .btn-row .btn:nth-child(n) rules
     (for the desktop masked buttons) are more specific and target these
     same elements too, since nth-child matches by position, not class. */
  mask-image: none !important;
  -webkit-mask-image: none !important;
  background-color: var(--av-ink) !important;
  border-radius: 3px 8px 4px 9px / 9px 4px 8px 3px !important;
  display: flex;
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  font-size: clamp(0.9rem, 0.7rem + 0.6vw, 1.15rem);
  padding: clamp(0.75em, 0.5em + 0.5vw, 1.15em) clamp(1em, 0.6em + 1vw, 2em);
}

.menu-section__text { max-width: none; }
.menu-section__text p { max-width: none; font-size: clamp(1.2rem, 1rem + 1vw, 2rem); }

.menu-section__heading { position: relative; z-index: 3; } /* stays in front of the decor image/cloud */
.menu-section__stack .menu-section__heading {
  margin-top: -4rem;   /* pulls the heading up to overlap the diving-circle photo (mobile only) */
}

/* Mobile decor: the desktop version overlaps from .photo-band above (see
   .photo-band__decor, desktop-only); this flow version — inside the
   .mobile-only wrapper already — sits below the paragraph instead, with the
   cloud tucked against the photo. */
.menu-section__decor {
  position: relative;
  width: clamp(220px, 60vw, 320px);
  height: clamp(220px, 60vw, 320px);
  margin-inline: auto;
}
.menu-section__circle {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}
.menu-section__cloud {
  position: absolute;
  top: -10%;
  left: 40%;
  width: 55%;
  height: auto;
  object-fit: contain;
  z-index: 1;
}

/* --- Big stacked link list (RESERVATIONS / PRIVATE EVENTS / GIFT CARDS) - */

.link-list {
  text-align: center;
}
@media (min-width: 760px) {
  .link-list { padding-bottom: var(--space-2xl); }
}
.link-list__item { margin: 0; }
.link-list a {
  font-family: var(--av-font-display);
  font-size: clamp(1.2rem, 2.2vw + 0.7rem, 4.8rem);
  color: var(--av-cream);
  text-decoration: none;
  line-height: 1.05;
  display: inline-block;
  max-width: 100%;
  white-space: nowrap;
}
.link-list a:hover, .link-list a:focus-visible { color: var(--av-ink); }

/* --- DJ Set full-bleed band ------------------------------------------------ */

.djset {
  position: relative;
  overflow: visible;
  text-align: center;
}
.djset__bg { width: 100%; height: clamp(320px, 38vh, 576px); object-fit: cover; display: block; filter: saturate(0.85); }
@media (min-width: 760px) {
  .djset__bg { height: clamp(460px, 68vh, 700px); }
}
.djset::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--av-sand);
  opacity: 0.55;
  z-index: 1;
  pointer-events: none;
}
.djset__content {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-m);
}
.djset__hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 0;
}
.djset__hero h2 {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.djset__hero h2 span {
  white-space: nowrap;
  background: rgba(48, 50, 54, 0.6);
  padding: 0.25em 0.6em;
  border-radius: 4px;
}
.djset__discoball {
  width: clamp(220px, 28vw, 380px);
  height: auto;
}
.djset__guitar-circle {
  position: absolute;
  left: 6%;
  top: -14%;
  width: clamp(160px, 22vw, 320px);
  height: clamp(160px, 22vw, 320px);
  object-fit: cover;
  border-radius: 50%;
  z-index: 2;
}

@media (max-width: 759px) {
  .djset__guitar-circle { display: none; }
}

/* --- Hours / Address ------------------------------------------------------- */

.hours-address-section {
  position: relative;
  overflow: visible;
  padding-bottom: calc(var(--space-xl) + 70px); /* clears the fixed utility bar */
}
@media (max-width: 759px) {
  /* mobile: utility bar isn't fixed anymore, so no clearance needed */
  .hours-address-section { padding-bottom: 0; }
}

.hours-address-figure {
  display: block;
  margin: var(--space-l) auto 0;
  height: clamp(270px, 54vw, 459px);
  width: auto;
}

.hours-address {
  display: grid;
  gap: 0;
  text-align: center;
}
.hours-address__text {
  display: grid;
  gap: 0;
}
.hours-address h3 {
  font-family: var(--av-font-display);
  font-size: var(--step-3);
  text-transform: uppercase;
  margin: 0 0 var(--space-xs);
  color: var(--av-cream);
}
.hours-address .squiggle { max-width: 260px; margin-inline: auto; }
.hours-address p { text-transform: none; letter-spacing: 0.02em; font-weight: 400; font-size: var(--step-1); max-width: 44ch; margin-inline: auto; color: var(--av-ink); }
.hours-address a { text-decoration: underline; }

@media (min-width: 760px) {
  .hours-address {
    text-align: left;
  }
  .hours-address__text { gap: var(--space-xl); max-width: 640px; }
  .hours-address .squiggle,
  .hours-address p {
    margin-inline: 0;
  }
  .hours-address-figure {
    position: absolute;
    right: clamp(2rem, 8vw, 7rem);
    bottom: 0;
    margin: 0;
    height: clamp(648px, 111vh, 1107px);
    width: auto;
    z-index: 2;
  }
}


/* ============================================================================
   10. PROMO POPUP — ships inactive (MIGRATION.md §12); styled to match the
   live site's own promo card (dark card, big bold headline, white CTA).
   ========================================================================= */

.promo-popup[hidden] { display: none; }
.promo-popup { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; }
.promo-popup__backdrop { position: absolute; inset: 0; background: rgba(30,32,35,.75); }
.promo-popup__card {
  position: relative;
  z-index: 1;
  width: min(90vw, 520px);
  padding: var(--space-xl) var(--space-l) var(--space-l);
  border-radius: var(--radius-m);
  background: var(--av-ink);
  color: var(--av-cream);
  text-align: center;
}
.promo-popup__title { font-family: var(--av-font-display); font-size: var(--step-4); }
.promo-popup__body { text-transform: none; font-weight: 400; letter-spacing: 0.02em; }
.promo-popup__close {
  position: absolute;
  top: var(--space-s);
  right: var(--space-s);
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  color: var(--av-cream);
}
.promo-popup__cta {
  display: inline-block;
  margin-top: var(--space-m);
  padding: .75em 1.5em;
  border-radius: var(--radius-s);
  background: var(--av-cream);
  color: var(--av-ink);
  text-decoration: none;
  font-family: var(--av-font-label);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
@media (prefers-reduced-motion: no-preference) {
  .promo-popup__card { animation: promo-in .3s ease; }
  @keyframes promo-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
}


/* ============================================================================
   10.1 PRIVATE EVENTS MODAL — same dialog pattern as the promo popup, sized
   for a long-form inquiry form and scrollable on short viewports.
   ========================================================================= */

.modal[hidden] { display: none; }
.modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(30, 32, 35, .93);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2xl) var(--gutter);
  overflow-y: auto;
}
.modal__backdrop { position: fixed; inset: 0; z-index: 0; }
.modal__card {
  position: relative;
  z-index: 1;
  width: min(94vw, 980px);
  margin-block: auto;
  padding-top: calc(54px + var(--space-m));
  color: var(--av-cream);
  text-align: left;
}
.modal__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-m);
  align-items: start;
}
@media (min-width: 760px) {
  .modal__grid { grid-template-columns: 0.9fr 1.1fr; gap: var(--space-xl); }
}
.modal__card h2 { color: var(--av-cream); margin-bottom: var(--space-m); }
.modal__info { display: flex; flex-direction: column; gap: var(--space-m); }
.modal__media { display: flex; align-items: center; justify-content: center; }
.modal__discoball { width: min(100%, 320px); height: auto; }
.modal__intro {
  text-transform: none;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--av-sand);
  max-width: none;
}
.modal__close {
  position: absolute;
  z-index: 2;
  top: 0;
  right: 0;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  color: var(--av-cream);
}
@media (prefers-reduced-motion: no-preference) {
  .modal__card { animation: promo-in .3s ease; }
}

#faqModal, #privateEventsModal {
  padding-top: var(--space-m);
  align-items: flex-start;
}
#faqModal .modal__card,
#privateEventsModal .modal__card {
  margin-top: 0;
}
.modal__card--faq { width: min(94vw, 760px); text-align: center; }
.modal__card--faq h2 { color: var(--av-cream); }

.faq-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-l);
  text-align: left;
  margin-top: var(--space-m);
}
.faq-item h3 {
  color: var(--av-cream);
  font-family: var(--av-font-label);
  font-size: var(--step-0);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 0.4em;
}
.faq-item p {
  text-transform: none;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--av-sand);
  max-width: none;
}

.faq-figure {
  display: block;
  margin: var(--space-l) auto 0;
  height: clamp(160px, 30vw, 260px);
  width: auto;
}
@media (max-width: 759px) {
  #faqModal { padding-bottom: 0; }
  .faq-figure { height: clamp(240px, 62vw, 360px); }
}

.pe-form { display: flex; flex-direction: column; gap: var(--space-m); }
.pe-form__row { display: grid; gap: var(--space-s); grid-template-columns: 1fr 1fr; }
@media (min-width: 560px) { .pe-form__row { gap: var(--space-m); } }

.pe-field { display: flex; flex-direction: column; gap: 0.4em; }
.pe-field label {
  font-family: var(--av-font-label);
  font-size: clamp(0.65rem, 0.55rem + 0.4vw, 0.85rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--av-cream);
}
.pe-required { text-transform: none; font-weight: 400; opacity: 0.7; }

.pe-field input,
.pe-field select,
.pe-field textarea {
  font: inherit;
  font-size: clamp(0.8rem, 0.7rem + 0.4vw, 1rem);
  padding: clamp(0.5em, 0.3em + 0.5vw, 0.75em) clamp(0.5em, 0.3em + 0.5vw, 0.9em);
  min-width: 0;
  border: 1.5px solid var(--av-sand);
  border-radius: var(--radius-s);
  background: var(--av-cream);
  color: var(--av-ink);
}
.pe-field textarea { resize: vertical; min-height: 6rem; }
.pe-field input:focus,
.pe-field select:focus,
.pe-field textarea:focus { outline: 2px solid var(--av-cream); outline-offset: 1px; }

.pe-form__submit { display: flex; align-items: center; gap: var(--space-m); flex-wrap: wrap; }
.pe-form__status { font-size: var(--step--1); text-transform: none; font-weight: 400; margin: 0; color: var(--av-sand); }
.pe-form__success {
  padding: 1em 1.25em;
  border-radius: var(--radius-s);
  background: rgba(255,255,255,.08);
  border: 1px solid var(--av-sand);
  text-transform: none;
  font-weight: 400;
  margin: 0;
  color: var(--av-cream);
}


/* ============================================================================
   11. LINKS PAGE
   ========================================================================= */

body.links-page {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2xl) var(--gutter);
}

.linktree {
  width: 100%;
  max-width: 420px;
  margin-inline: auto;
  text-align: center;
}

.linktree__logo { width: 240px; height: auto; margin: 0 auto var(--space-m); filter: brightness(0) invert(1); }
.linktree__handle {
  font-family: var(--av-font-label);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--av-cream);
  margin: 0;
}

.linktree__socials {
  display: flex;
  justify-content: center;
  gap: var(--space-l);
  margin: var(--space-l) 0 var(--space-xl);
}
.linktree__socials a { display: inline-flex; color: var(--av-cream); }
.linktree__socials a:hover, .linktree__socials a:focus-visible { color: var(--av-ink); }
.linktree__socials svg { width: 26px; height: 26px; }

.linktree__buttons { display: flex; flex-direction: column; gap: var(--space-m); }

.link-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: var(--space-s) var(--space-l);
  background-color: var(--av-ink);
  color: var(--av-cream);
  font-family: var(--av-font-label);
  font-weight: 700;
  font-size: var(--step-0);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 0;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: 100% 100%;
}
.link-btn:nth-of-type(3n+1) { mask-image: url('images/btn-shape-1.svg'); -webkit-mask-image: url('images/btn-shape-1.svg'); }
.link-btn:nth-of-type(3n+2) { mask-image: url('images/btn-shape-2.svg'); -webkit-mask-image: url('images/btn-shape-2.svg'); }
.link-btn:nth-of-type(3n)   { mask-image: url('images/btn-shape-3.svg'); -webkit-mask-image: url('images/btn-shape-3.svg'); }
.link-btn:hover, .link-btn:focus-visible { filter: brightness(1.12); }
.link-btn--primary { background-color: var(--av-cream); color: var(--av-ink); }
.link-btn--primary:hover, .link-btn--primary:focus-visible { filter: brightness(0.95); }

.linktree__footer { margin-top: var(--space-xl); font-size: var(--step--1); text-transform: none; font-weight: 400; }


/* ============================================================================
   12. UTILITIES
   ========================================================================= */

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