/* =========================================================
   Tokens
   ========================================================= */
:root {
  --bg: #15100e;
  --bg-rgb: 21, 16, 14;
  --panel: #1e1714;
  --ink: #ece4d5;
  --ink-dim: #a89a86;
  --accent: #c62a2c;       /* the bar's own brand red */
  --accent-dim: #7d1c1e;
  --amber: #d9a441;        /* secondary neon-sign highlight */
  --line: rgba(236, 228, 213, 0.14);

  /* Fixed colors for the hero banner only — it stays dark/photographic
     regardless of light/dark theme, since the neon-glow logo and scrim
     are designed for a dark backdrop. */
  --hero-bg: #15100e;
  --hero-ink: #ece4d5;
  --hero-ink-dim: #a89a86;
  --hero-amber: #d9a441;

  --font-display: "Rye", serif;
  --font-heading: "Oswald", sans-serif;
  --font-mono: "Space Mono", monospace;
}

:root[data-theme="light"] {
  --bg: #f7f2e9;
  --bg-rgb: 247, 242, 233;
  --panel: #ffffff;
  --ink: #221d18;
  --ink-dim: #5c5347;
  --accent: #a8231f;
  --accent-dim: #7d1a17;
  --amber: #9a6a12;
  --line: rgba(34, 29, 24, 0.14);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-mono);
  font-weight: 400;
  line-height: 1.65;
}

h1, h2, h3 {
  font-family: var(--font-heading);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin: 0;
}

a { color: inherit; text-decoration: none; }

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
}

/* =========================================================
   Masthead / nav
   ========================================================= */
.masthead {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.1rem 2rem;
  background: rgba(var(--bg-rgb), 0.88);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
}

.home-link {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.home-icon {
  width: 38px;
  height: auto;
  display: block;
  transition: transform 0.2s ease;
}

.home-link:hover .home-icon { transform: scale(1.06); }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 34px;
  height: 34px;
  background: none;
  border: 1px solid var(--line);
  border-radius: 4px;
  cursor: pointer;
  flex-shrink: 0;
}

.nav-toggle span {
  display: block;
  width: 16px;
  height: 2px;
  background: var(--ink);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.masthead-right {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.masthead nav {
  display: flex;
  gap: 1.6rem;
}

.masthead nav a {
  font-family: var(--font-heading);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-dim);
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.masthead nav a:hover {
  color: var(--ink);
  border-color: var(--accent);
}

.social-icons {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  margin: 0;
  padding: 0 0 0 1.75rem;
  list-style: none;
  border-left: 1px solid var(--line);
}

.social-icons a {
  display: flex;
  color: var(--ink-dim);
  transition: color 0.2s ease, transform 0.2s ease;
}

.social-icons a:hover { color: var(--accent); transform: translateY(-1px); }
.social-icons svg { width: 17px; height: 17px; }

.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin-left: 0.5rem;
  padding: 0;
  background: none;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--ink-dim);
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.theme-toggle:hover {
  color: var(--amber);
  border-color: var(--amber);
}

.theme-icon { width: 16px; height: 16px; }
.theme-icon--moon { display: block; }
.theme-icon--sun { display: none; }

[data-theme="light"] .theme-icon--moon { display: none; }
[data-theme="light"] .theme-icon--sun { display: block; }

/* =========================================================
   Hero
   ========================================================= */
.hero {
  position: relative;
  min-height: 86vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

.hero-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(30%) brightness(0.45) contrast(1.05);
}

.hero-text {
  position: relative;
  z-index: 1;
  padding: 3rem 2rem;
  background: linear-gradient(0deg, rgba(21, 16, 14, 0.94) 15%, rgba(21, 16, 14, 0) 100%);
  width: 100%;

  /* ONE shared width drives both the logo lettering and the tagline, so
     they always match edge to edge. To make the pair bigger or smaller,
     change --hero-w (it's the width of the lettering and the tagline).
     The default is the full content width, capped at 1600px on very
     wide screens.
     Fallback first (viewport units) for browsers without container
     query units; the real, scrollbar-proof version is at the very end
     of this file. */
  --hero-w: min(calc(100vw - 4rem), 1600px);
  container-type: inline-size;
}

/* The logo image has transparent glow padding around the lettering: the
   lettering is only 62.8% of the image width, starts 15.5% in from the
   left, and sits 19.2% (top) / 15.6% (bottom) of the image width in from
   the top and bottom edges. The numbers below use those to size the image
   so the *visible letters* — not the image box — span --hero-w, and to
   pull the empty padding out of the layout. */
.hero-brand {
  --logo-w: calc(var(--hero-w) / 0.628);

  position: relative;
  display: block;
  width: var(--logo-w);
  margin-left: calc(var(--logo-w) * -0.155);
  margin-top: calc(var(--logo-w) * -0.14);
  margin-bottom: calc(var(--logo-w) * -0.135);

  /* the transparent padding overlaps the tagline/buttons, so the logo
     must never swallow clicks meant for them */
  pointer-events: none;
}

.est-badge {
  position: absolute;
  left: 15.5%;
  top: 24%;
  z-index: 2;
  display: inline-block;
  font-family: var(--font-mono);
  font-size: max(0.62rem, calc(var(--logo-w) * 0.0125));
  letter-spacing: 0.15em;
  color: var(--hero-bg);
  background: var(--hero-amber);
  padding: 0.3em 0.8em;
  transform: rotate(-11deg);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
  white-space: nowrap;
  pointer-events: auto; /* editable year in admin mode */
}

.hero-logo {
  display: block;
  width: 100%;
  height: auto;
}

/* Sized from --hero-w so its width equals the lettering's width:
   Oswald 700 uppercase at 0.16em spacing is 10.61em wide (visible
   glyphs, excluding the trailing letter-space). */
.hero .tagline {
  position: relative;
  z-index: 2;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: calc(var(--hero-w) / 10.61);
  line-height: 1;
  white-space: nowrap;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--hero-amber);
  margin: 0.9rem 0 0.6rem;
  text-shadow:
    0 1px 3px rgba(0, 0, 0, 0.9),
    0 2px 12px rgba(0, 0, 0, 0.7),
    0 0 14px rgba(217, 164, 65, 0.65),
    0 0 34px rgba(217, 164, 65, 0.45),
    0 0 60px rgba(217, 164, 65, 0.25);
}

.hero-address {
  position: relative;
  z-index: 2;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--hero-ink-dim);
  margin: 0 0 1.5rem;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85), 0 2px 10px rgba(0, 0, 0, 0.6);
}

.hero-address a {
  color: var(--hero-ink);
  border-bottom: 1px solid rgba(236, 228, 213, 0.35);
  transition: border-color 0.2s ease, color 0.2s ease;
}

.hero-address a:hover {
  color: var(--hero-amber);
  border-color: var(--hero-amber);
}

.btn-directions {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  background: var(--accent);
  padding: 0.7rem 1.4rem;
  border: 1px solid var(--accent);
  transition: background-color 0.2s ease, color 0.2s ease;
}

.hero .btn-directions {
  position: relative;
  z-index: 2;
}

.btn-directions:hover {
  background: transparent;
  color: var(--accent);
}

/* =========================================================
   Story / history
   ========================================================= */
.story {
  max-width: 680px;
  margin: 0 auto;
  padding: 4rem 2rem;
  text-align: center;
}

.story h2 {
  font-size: 1.4rem;
  margin-bottom: 1.5rem;
  color: var(--amber);
}

.story p {
  font-size: 1rem;
  color: var(--ink-dim);
  line-height: 1.75;
  text-align: left;
}

/* =========================================================
   Bottlecap divider (reused above/below Hours + Gallery)
   ========================================================= */
.bottlecap-row {
  height: 14px;
  background-image: radial-gradient(circle, var(--accent-dim) 3px, transparent 3.5px);
  background-size: 22px 14px;
  background-repeat: repeat-x;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin: 1.5rem 0;
}

/* =========================================================
   Hours
   ========================================================= */
.hours-section {
  max-width: 560px;
  margin: 0 auto;
  padding: 2rem 2rem 3rem;
}

.hours-section h2,
.specials-section h2,
.events-section h2,
.gallery h2,
.visit h2 {
  font-size: 1.5rem;
  text-align: center;
  margin-bottom: 0.5rem;
  color: var(--amber);
}

.hours-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.hours-list li {
  display: flex;
  justify-content: space-between;
  padding: 0.6rem 0;
  border-top: 1px solid var(--line);
  font-size: 0.95rem;
}

.hours-list li:last-child { border-bottom: 1px solid var(--line); }

.hours-list .day {
  font-family: var(--font-heading);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
}

.hours-list .time { color: var(--ink-dim); }

/* =========================================================
   Specials
   ========================================================= */
.specials-section {
  max-width: 560px;
  margin: 0 auto;
  padding: 2rem 2rem 3rem;
}

.specials-list {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.special-card {
  position: relative;
  padding: 1.1rem 1.4rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 3px solid var(--amber);
}

.special-card h3 {
  font-size: 1rem;
  margin-bottom: 0.3rem;
}

.special-card p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--ink-dim);
}

/* =========================================================
   News page
   ========================================================= */
.news-hero {
  max-width: 680px;
  margin: 0 auto;
  padding: 3.5rem 2rem 1rem;
  text-align: center;
}

.hero-logo--news {
  width: min(85%, 420px);
  margin: -1rem auto -0.5rem;
}

.news-page-label {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0;
}

.news-sub {
  font-family: var(--font-heading);
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--amber);
  margin: 0.75rem 0 0;
}

.news-feed {
  max-width: 640px;
  margin: 0 auto;
  padding: 2rem 2rem 4rem;
}

.news-card h2 {
  font-size: 1.1rem;
  text-transform: none;
  margin-bottom: 0.35rem;
}

.news-card h2 a {
  border-bottom: 1px solid var(--line);
  transition: border-color 0.2s ease, color 0.2s ease;
}

.news-card h2 a:hover {
  color: var(--accent);
  border-color: var(--accent);
}

/* =========================================================
   Events
   ========================================================= */
.events-section {
  max-width: 720px;
  margin: 0 auto;
  padding: 2rem 2rem 4rem;
}

.events-list {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.event-card {
  position: relative;
  display: flex;
  gap: 1.5rem;
  padding: 1.25rem 1.5rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
}

.event-when {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  min-width: 6rem;
}

.event-day {
  font-family: var(--font-heading);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--amber);
}

.event-time {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--ink-dim);
}

.event-info h3 {
  font-size: 1.1rem;
  margin-bottom: 0.35rem;
}

.event-info p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--ink-dim);
}

.events-empty {
  text-align: center;
  color: var(--ink-dim);
  font-size: 0.9rem;
  margin-top: 1.5rem;
}

/* =========================================================
   Gallery
   ========================================================= */
.gallery { padding: 2rem 2rem 3rem; }

.gallery .grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

.frame {
  position: relative;
  margin: 0;
  background: var(--panel);
  border: 1px solid var(--line);
  overflow: hidden;
}

.frame img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  filter: grayscale(15%);
  transition: filter 0.3s ease, transform 0.5s ease;
}

.frame:hover img {
  filter: grayscale(0%);
  transform: scale(1.03);
}

.frame figcaption {
  padding: 0.6rem 0.75rem 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--ink-dim);
  border-top: 1px solid var(--line);
}

/* Public view: caption is hidden until hover, overlaid on the photo */
.frame-caption:not(.frame-caption--static) {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: 1.5rem 0.75rem 0.6rem;
  background: linear-gradient(0deg, rgba(21, 16, 14, 0.92) 40%, rgba(21, 16, 14, 0) 100%);
  border-top: none;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
}

.frame:hover .frame-caption:not(.frame-caption--static),
.frame:focus-within .frame-caption:not(.frame-caption--static) {
  opacity: 1;
  transform: translateY(0);
}

/* =========================================================
   Visit
   ========================================================= */
.visit {
  max-width: 480px;
  margin: 0 auto;
  padding: 2rem 2rem 4rem;
  text-align: center;
}

.visit-address,
.visit-phone {
  margin: 0.3rem 0;
  color: var(--ink-dim);
}

.visit-address a,
.visit-phone a {
  color: var(--ink-dim);
  border-bottom: 1px solid var(--line);
  transition: color 0.2s ease, border-color 0.2s ease;
}

.visit-address a:hover,
.visit-phone a:hover {
  color: var(--accent);
  border-color: var(--accent);
}

.address-break { display: none; }

.visit .btn-directions { margin-top: 1.25rem; }

footer {
  text-align: center;
  padding: 2rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: var(--ink-dim);
  border-top: 1px solid var(--line);
}

/* =========================================================
   Buttons (shared with admin.css)
   ========================================================= */
.btn-primary {
  font-family: var(--font-heading);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.65rem 1.2rem;
  border: 1px solid transparent;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.btn-primary:hover { background: var(--accent-dim); }

/* =========================================================
   Responsive
   ========================================================= */
@media (min-width: 861px) {
  .est-badge { top: 32%; }
}

@media (max-width: 900px) {
  .gallery .grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
  .nav-toggle { display: flex; }

  .masthead-right {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    padding: 0 1.25rem;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
  }

  .masthead-right.open {
    padding: 0.5rem 1.25rem 1.25rem;
    max-height: 75vh;
    overflow-y: auto;
  }

  .masthead nav {
    flex-direction: column;
    gap: 0;
    width: 100%;
  }

  .masthead nav a {
    width: 100%;
    padding: 0.9rem 0;
    border-bottom: 1px solid var(--line);
    font-size: 0.85rem;
  }

  .social-icons {
    border-left: none;
    padding: 1.1rem 0 0.25rem;
    margin-top: 0.25rem;
  }
}

@media (max-width: 640px) {
  .masthead { padding: 0.85rem 1.25rem; }
  .home-icon { width: 32px; }
  .gallery .grid { grid-template-columns: 1fr 1fr; gap: 0.75rem; }
  .event-card { flex-direction: column; gap: 0.5rem; }
  .event-when { flex-direction: row; gap: 0.75rem; align-items: baseline; }

  .hero { min-height: 78vh; }
  .hero-text {
    padding: 2rem 1.25rem;
    --hero-w: min(calc(100vw - 2.5rem), 1600px); /* fallback, see end of file */
  }
  .hero-address { font-size: 0.78rem; }
  .btn-directions { width: 100%; text-align: center; }

  .story, .hours-section, .specials-section, .events-section, .gallery, .visit, .news-hero, .news-feed {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  .address-break { display: inline; }
}

@media (max-width: 420px) {
  .gallery .grid { grid-template-columns: 1fr; }
}

/* =========================================================
   Container-query override for the shared hero width
   (kept last so it beats the viewport-unit fallbacks above).
   100cqw is the hero-text's real content width — it already excludes
   padding and the page scrollbar, so the tagline can never wrap or
   overflow because of them.
   ========================================================= */
@supports (width: 1cqw) {
  .hero-text { --hero-w: min(100cqw, 1600px); }
}