@font-face {
  font-family: 'bandito-script';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/bandito-script.latin.woff2') format('woff2');
  unicode-range: U+0, U+D, U+20-7E, U+A1-AB, U+AE, U+B0-DD, U+DF-EF, U+F1-FD, U+FF, U+131;
}
@font-face {
  font-family: 'bandito-script';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/bandito-script.latin-ext.woff2') format('woff2');
  unicode-range: U+141-142, U+160-161, U+178, U+17D-17E, U+192, U+2020;
}
@font-face {
  font-family: 'bandito-script';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/bandito-script.other.woff2') format('woff2');
  unicode-range: U+2C7, U+2D8-2D9, U+2DB, U+2DD, U+2021, U+2030, U+FB01-FB02;
}

:root {
  --maroon: #5e0000;
  --black: #000000;
  --cream: #fffbeb;
  /* Same cream, warmed slightly for text on solid black panels — on black the base
     cream reads cold/stark-white, so this keeps it looking like the logo. */
  --cream-warm: #faedca;
  --maxw: 1280px;
  --script: 'bandito-script', 'Alex Brush', cursive;
  --sans: Helvetica, Arial, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  background: var(--maroon);
  color: var(--cream);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

/* ---------- Header / Nav ---------- */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem 2.5rem;
  background: var(--maroon);
}

.brand-script {
  font-family: var(--script);
  font-size: 2.2rem;
  font-weight: 400;
  color: var(--cream);
  line-height: 1;
  white-space: nowrap;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 2.6rem;
  list-style: none;
}
.nav-links a {
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--cream);
  letter-spacing: 0.01em;
  transition: opacity 0.25s ease;
}
.nav-links a:hover { opacity: 0.7; }

.nav-links a.nav-cta {
  display: inline-block;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.8rem;
  color: var(--maroon);
  background: var(--cream);
  border: 1px solid var(--cream);
  border-radius: 3px;
  padding: 0.55rem 1.2rem;
}
.nav-links a.nav-cta:hover { opacity: 0.85; }

.ig-link { display: inline-flex; color: var(--cream); }
.ig-link svg { width: 22px; height: 22px; }

.nav-toggle {
  display: none;
  position: relative;
  z-index: 210;
  background: none;
  border: none;
  color: var(--cream);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--cream);
  background: var(--maroon);
  border: none;
  padding: 0.7rem 1.6rem;
  border-radius: 3px;
  cursor: pointer;
  transition: opacity 0.25s ease;
}
.btn:hover { opacity: 0.85; }

/* Home hero read-more button is light on the dark photo */
.btn-light {
  background: rgba(20,20,20,0.85);
  color: var(--cream);
  border: 1px solid #fff;
}

.btn-light:hover { opacity: 1; background: #808080; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 8rem 1.5rem 4rem;
  background: var(--black);
  background-image: url('images/hero-bar.jpg');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
.hero-wordmark {
  width: min(620px, 82vw);
  margin: 0 auto 1.8rem;
  filter: drop-shadow(0 6px 24px rgba(0,0,0,0.6));
}

/* ---------- Sections ---------- */
.section { padding: 5rem 2rem; }
.section-inner { max-width: var(--maxw); margin: 0 auto; }

/* About */
.about { background: var(--black); }
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}
.script-heading {
  font-family: var(--script);
  font-weight: 400;
  color: var(--cream);
  font-size: clamp(3rem, 6vw, 4.5rem);
  line-height: 1;
  margin-bottom: 1.8rem;
  text-align: center;
}
.about-copy .script-heading {
  font-size: 76px;
  line-height: 1.3;
  letter-spacing: 1.2px;
  margin-bottom: 1.2rem;
}
.about-copy p {
  font-family: 'Aboreto', var(--sans);
  text-align: center;
  letter-spacing: 0.8px;
  font-size: 14px;
  line-height: 1.9;
  color: var(--cream);
}
/* Wix "Reveal": the photo layer stays visually fixed in the viewport while the
   frame scrolls over it (same effect as the events page). A fixed background
   pinned to the viewport reproduces it — the frame is the moving window, the
   image underneath does not move. */
.about-photo {
  min-height: 660px;
  background-color: var(--black);
  background-image: url('images/about.jpg');
  background-repeat: no-repeat;
  background-size: auto 900px;
  /* Keep the glass centered in the right column at every viewport width.
     A fixed background is positioned relative to the viewport, so we compute
     the right-column centre: 50vw + quarter of the (capped) content width +
     quarter of the gap, minus half the 675px-wide image. */
  background-position-x: calc(50vw + 0.25 * min(100vw - 64px, 1280px) - 326px);
  background-position-y: center;
  background-attachment: fixed;
}

/* ---------- Page hero (subpages) ---------- */
.page-hero {
  padding: 10rem 2rem 4rem;
  text-align: center;
  background: var(--black);
  background-image: linear-gradient(rgba(20,10,8,0.55), rgba(20,10,8,0.75)), url('images/hero-bar.jpg');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
.page-hero h1 {
  font-family: var(--script);
  font-weight: 400;
  font-size: clamp(3rem, 6vw, 4.5rem);
  color: var(--cream);
}

/* ---------- Menu (text) ---------- */
.menu-page {
  background: #170b09;
  background-image: linear-gradient(rgba(20,10,8,0.72), rgba(20,10,8,0.72)), url('images/bartenders.jpg');
  background-position: center top;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  padding: 8rem 1.5rem 4rem;
}
.menu-shell { max-width: 1080px; margin: 0 auto; }
.menu-title {
  font-family: var(--script);
  font-size: clamp(3.2rem, 7vw, 5rem);
  color: var(--cream);
  text-align: center;
  line-height: 1;
  margin-bottom: 0.4rem;
}
.menu-sub {
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 0.8rem;
  color: rgba(255,251,235,0.7);
  margin-bottom: 2.4rem;
}

/* Tabs */
.menu-tabs { display: flex; justify-content: center; gap: 0.6rem; margin-bottom: 2.8rem; }
.menu-tab {
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.95rem;
  color: var(--cream);
  background: transparent;
  border: 1px solid rgba(255,251,235,0.35);
  padding: 0.7rem 2.2rem;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.menu-tab.active { background: var(--cream); color: var(--maroon); border-color: var(--cream); }

.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* Panels */
.menu-panel {
  background: rgba(0,0,0,0.95);
  border: 1px solid rgba(255,251,235,0.14);
  padding: 2.6rem 2.4rem;
  margin-bottom: 0.8rem;
}
.cat-heading {
  font-family: var(--script);
  font-size: clamp(2.2rem, 4vw, 3rem);
  color: var(--cream);
  line-height: 1;
  margin-bottom: 1.6rem;
  text-align: center;
}
.sub-heading {
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.95rem;
  font-weight: 700;
  color: #d98b8b;
  margin: 1.8rem 0 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(255,251,235,0.2);
}

/* Descriptive items (cocktails, food) with optional meters */
.drink { margin-bottom: 1.6rem; }
.drink-head { display: flex; align-items: baseline; gap: 0.6rem; }
.drink-name {
  font-family: var(--sans);
  font-weight: 700;
  letter-spacing: 0.02em;
  font-size: 1.05rem;
  color: var(--cream);
  text-transform: uppercase;
}
.drink-dots { flex: 1; border-bottom: 1px dotted rgba(255,251,235,0.3); transform: translateY(-4px); }
.drink-price { font-family: var(--sans); font-weight: 700; color: var(--cream); font-size: 1.05rem; }
.drink-desc {
  font-family: var(--sans);
  color: rgba(255,251,235,0.78);
  font-size: 0.92rem;
  line-height: 1.5;
  margin-top: 0.25rem;
  max-width: 62ch;
}
.meters { display: flex; gap: 1.6rem; margin-top: 0.5rem; }
.meter { display: flex; align-items: center; gap: 0.5rem; }
.meter-label { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.14em; color: rgba(255,251,235,0.6); }
.pips { display: inline-flex; gap: 3px; }
.pip { width: 9px; height: 9px; border-radius: 50%; border: 1px solid var(--cream-warm); }
.pip.on { background: var(--cream-warm); }

/* Two-column price lists with dotted leaders */
.spirit-cols { columns: 2; column-gap: 3rem; }
.spirit-row { display: flex; align-items: baseline; break-inside: avoid; margin-bottom: 0.55rem; }
.spirit-name { font-family: var(--sans); font-size: 0.95rem; color: var(--cream); text-transform: uppercase; letter-spacing: 0.01em; }
.spirit-lead { flex: 1; border-bottom: 1px dotted rgba(255,251,235,0.28); margin: 0 0.4rem; transform: translateY(-4px); }
.spirit-price { font-family: var(--sans); font-size: 0.95rem; color: var(--cream); }

.na-note { text-align: center; font-style: italic; color: rgba(255,251,235,0.7); margin: 1.4rem 0; font-size: 0.95rem; }

/* ---------- Events ---------- */
.event-wrap {
  position: relative;
  width: 100%;
  margin: 0 auto;
  height: 44vw;
}
/* Wix "Reveal": the photo layer stays visually fixed in the viewport while the
   frame scrolls over it, exposing different vertical bands of the image.
   `background-attachment: fixed` pins the image to the viewport; sizing it to
   the frame width (52vw, matching the panel's left edge at 5vw) keeps the glass
   horizontally centered in the frame at every screen width, while the taller
   image gives the vertical reveal as the frame scrolls past. */
.event-photo {
  position: absolute;
  top: 0;
  left: 5vw;
  width: 52vw;
  height: 44vw;
  overflow: hidden;
  z-index: 1;
  background-color: var(--black);
  background-image: url('images/events.jpg');
  background-repeat: no-repeat;
  background-size: 52vw auto;
  background-position: 5vw center;
  background-attachment: fixed;
}
.event-box {
  position: absolute;
  top: 50%;
  right: 5vw;
  transform: translateY(-50%);
  width: 42vw;
  min-height: 34vw;
  background: var(--black);
  box-sizing: border-box;
  padding: 3rem 3rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.4rem;
  /* Top-align the two columns so "Classes" and "Private Events" (unequal heights —
     one has a button) share the same heading and body baselines. align-content keeps
     the pair vertically centered in the black box. */
  align-items: start;
  align-content: center;
  z-index: 2;
}
.event-block { display: flex; flex-direction: column; }
.event-box .script-heading { text-align: left; font-size: 56px; line-height: 1.05; min-height: 1.5em; margin-bottom: 1.4rem; }
.event-block p { font-family: var(--sans); color: var(--cream); font-size: 16px; line-height: 1.8; margin: 0 0 1rem; }
.event-block a:not(.btn) { text-decoration: underline; }
.event-block .btn { margin-top: 1.2rem; align-self: flex-start; font-size: 14px; }


/* ---------- Live Music table ---------- */
.music-wrap { background: var(--black); max-width: 1180px; margin: 0 auto; padding: 0.5rem 1.5rem; }
.music-table {
  width: 100%;
  border-collapse: collapse;
}
.music-table th {
  font-family: var(--sans);
  color: var(--cream);
  font-weight: 700;
  font-size: 1rem;
  padding: 1.4rem 1rem;
  border-bottom: 1px solid rgba(255,251,235,0.35);
  text-align: center;
}
.music-table td {
  padding: 1.4rem 1rem;
  border-bottom: 1px solid rgba(255,251,235,0.18);
  vertical-align: middle;
  color: var(--cream);
  font-size: 1rem;
  text-align: center;
}
.music-table img {
  width: 90px; height: 90px; object-fit: cover;
  margin: 0 auto;
}
.music-table a.social { text-decoration: none; }
.music-table a.social:hover { opacity: 0.7; }

/* ---------- Footer contact band ---------- */
.contact-band {
  background: var(--maroon);
  border-top: 1px solid rgba(255,251,235,0.25);
}
.contact-grid {
  /* Fill the full-bleed maroon band edge to edge. Capping this at --maxw (while the
     band spans the viewport) left a centering gap that padded the outer two cells,
     making Address/Phone look wider than Hours/Email. Full width keeps all four equal. */
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  /* Equal-height rows so all four boxes are the same size even when their text
     wraps to a different number of lines (e.g. Address/Hours vs Email/Phone). */
  grid-auto-rows: 1fr;
}
.contact-cell {
  text-align: center;
  padding: 3.5rem 1.5rem;
  border-left: 1px solid rgba(255,251,235,0.22);
  /* Center the content within each equal-height cell. */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.contact-cell:first-child { border-left: none; }
.contact-cell .icon {
  display: inline-flex;
  color: var(--cream);
  margin-bottom: 1rem;
}
.contact-cell .icon svg { width: 26px; height: 26px; }
.contact-cell h4 {
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 700;
  color: var(--cream);
  font-size: 1.05rem;
  margin-bottom: 1rem;
}
.contact-cell p, .contact-cell a {
  font-family: var(--sans);
  text-transform: uppercase;
  color: var(--cream);
  font-size: 0.95rem;
  line-height: 1.7;
  letter-spacing: 0.02em;
}
.contact-cell a:hover { opacity: 0.7; }

.copyright-bar {
  background: var(--black);
  text-align: center;
  padding: 1.6rem 1rem;
  color: var(--cream);
  font-family: var(--sans);
  font-size: 0.95rem;
}

/* ---------- Responsive ---------- */
@media (min-width: 1025px) and (max-width: 1200px) {
  .event-box { grid-template-columns: 1fr; gap: 1.4rem; }
  .event-box .script-heading { font-size: 48px; min-height: 0; margin-bottom: 0.8rem; }
}
@media (max-width: 1024px) {
  .site-header { padding: 1rem 1.2rem; }
  .nav-toggle { display: block; }
  .nav-links {
    position: fixed;
    top: 0; right: 0;
    height: 100vh;
    width: min(78vw, 320px);
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 1.8rem;
    padding: 2rem 2.5rem;
    background: var(--maroon);
    border-left: 1px solid rgba(255,251,235,0.25);
    transform: translateX(100%);
    transition: transform 0.35s ease;
    z-index: 200;
  }
  .nav-links.open { transform: translateX(0); }
  .about-grid { grid-template-columns: 1fr; gap: 2rem; }
  .about-copy .script-heading { font-size: 48px; }
  .event-wrap { position: static; height: auto; }
  .about-photo { min-height: 340px; }
  .event-photo { position: static; width: 100%; height: 340px; }

  /* Mobile reveal. `background-attachment: fixed` is ignored on mobile
     browsers, so emulate the desktop effect with a viewport-fixed image
     layer clipped to the frame: clip-path pins the ::before to the frame's
     box while the browser keeps it fixed to the viewport. It's a native,
     GPU-composited reveal that stays smooth during iOS momentum scrolling
     (JS scroll handlers stutter there because iOS suspends scroll events). */
  .hero, .about-photo, .event-photo {
    background-image: none;
    background-color: var(--black);
    overflow: hidden;
    -webkit-clip-path: inset(0);
    clip-path: inset(0);
  }
  .hero::before, .about-photo::before, .event-photo::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    /* Anchor to a STABLE viewport height. `inset:0` / `dvh` track the visual
       viewport, so the collapsing mobile address bar would resize this layer
       and make `cover` re-scale the image (a zoom-on-scroll). `vh`/`lvh` are
       pinned to the large viewport and don't change while scrolling. */
    height: 100vh;
    height: 100lvh;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 0;
  }
  .hero::before { background-image: url('images/hero-bar.jpg'); }
  .about-photo::before { background-image: url('images/about.jpg'); }
  .event-photo::before { background-image: url('images/events.jpg'); }
  /* Keep hero content (wordmark + button) above the fixed image layer. */
  .hero > * { position: relative; z-index: 1; }
  .event-box { position: static; top: auto; transform: none; width: 100%; min-height: 0; height: auto; grid-template-columns: 1fr; gap: 1.8rem; padding: 2.2rem 1.6rem; }
  .event-box .script-heading { min-height: 0; margin-bottom: 0.9rem; }
  .contact-grid { grid-template-columns: 1fr 1fr; }
  .contact-cell:nth-child(3) { border-left: none; }
  .section { padding: 3.5rem 1.2rem; }
}

@media (max-width: 620px) {
  .contact-grid { grid-template-columns: 1fr; }
  .contact-cell { border-left: none; border-top: 1px solid rgba(255,251,235,0.18); }
  .contact-cell:first-child { border-top: none; }
  .music-table thead { display: none; }
  .music-table, .music-table tbody, .music-table tr, .music-table td { display: block; width: 100%; }
  .music-table tr { margin-bottom: 1.2rem; border: 1px solid rgba(255,251,235,0.22); }
  .music-table td { border: none; text-align: center; padding: 0.5rem; }
  .brand-script { font-size: 1.8rem; }
  .spirit-cols { columns: 1; }
  .menu-panel { padding: 1.8rem 1.3rem; }
  .menu-tab { padding: 0.6rem 1.4rem; font-size: 0.85rem; }
}

/* Warm the full-strength cream where it sits on solid black/near-black panels, so
   it reads like the "Scarlett Room" logo instead of stark white. Elements on the
   maroon background (header, contact footer, page heroes) keep the base cream.
   Placed last so it wins over the same-specificity base rules by source order. */
.about .script-heading,
.about-copy p,
.menu-title,
.cat-heading,
.drink-name, .drink-price,
.spirit-name, .spirit-price,
.event-box .script-heading,
.event-block p,
.music-table th, .music-table td {
  color: var(--cream-warm);
}