/* Meander Brewing Co — v4 (Light Mode)
   Cream/paper backgrounds, forest green + amber accents */

:root {
  --green-deep: #2d5a3d;
  --green-primary: #3d7a52;
  --green-accent: #2d5a3d;
  --green-light: #e8f5e9;
  --amber: #b8864a;
  --amber-bright: #a06b2d;
  --amber-light: #fdf0e0;
  --ink: #1a1a1a;
  --ink-soft: #333;
  --cream: #faf8f3;
  --paper: #fff;
  --text-body: #3a3a3a;
  --text-muted: #777;
  --line: #e0dbd2;
  --line-light: #eee9e0;
  --card-bg: #fff;
  --card-shadow: rgba(0,0,0,.06);
  --section-alt: #f3f0ea;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; }

body {
  font-family: 'Trebuchet MS', 'Segoe UI', system-ui, sans-serif;
  background: var(--cream);
  color: var(--text-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: 'Oswald', 'Trebuchet MS', sans-serif;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.1;
  margin: 0 0 .6em;
  color: var(--ink);
}

h1 { font-size: clamp(2.4rem, 5vw, 4.4rem); }
h2 { font-size: clamp(1.8rem, 3.2vw, 2.6rem); color: var(--green-deep); }
h3 { font-size: 1.3rem; color: var(--green-primary); }

a { color: var(--amber-bright); text-decoration: none; }
a:hover { color: var(--green-deep); }
/* Phone numbers never break at the hyphen, e.g. "(678) 765-" / "8133" (client, 2026-10-15). */
a[href^="tel:"] { white-space: nowrap; }

img { max-width: 100%; height: auto; display: block; }

/* ============ NAV ============ */
.top {
  position: fixed; top: 0; left: 0; right: 0; z-index: 20;
  background: rgba(250,248,243,0.9);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  transition: background .3s, box-shadow .3s;
}
.top.scrolled {
  background: rgba(255,255,255,0.97);
  box-shadow: 0 2px 20px rgba(0,0,0,.08);
}
.top-inner {
  max-width: 1200px; margin: 0 auto; padding: .9rem 1.5rem;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem;
}
.brand {
  font-family: 'Oswald', sans-serif;
  font-size: 1.4rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--green-deep);
}
.brand .sub {
  display: block; font-size: .65rem; letter-spacing: .35em;
  color: var(--amber-bright); margin-top: 2px;
}
/* Header logo (2026-09-28, client): the logo replaces the text wordmark in the header, and because the header
   stays on top of the open menu, it is also the only logo in the menu. Height keeps the header ~84px tall so
   --nav-top below still matches. */
.brand.brand-has-logo { display: block; line-height: 0; }
.brand-logo { display: block; height: 58px; width: auto; }   /* logo-header.png is logo3.png cropped tight */
@media (max-width: 600px) { .brand-logo { height: 48px; } }

/* ============ HAMBURGER / OVERLAY NAV ============ */
#nav-toggle { display: none; }
.hamburger {
  display: inline-flex; flex-direction: column; justify-content: center;
  gap: 6px; width: 34px; height: 34px; cursor: pointer;
  background: transparent; border: 0; padding: 0;
  z-index: 60;
}
.hamburger span {
  display: block; height: 2px; width: 100%;
  background: var(--green-deep);
  transition: transform .25s ease, opacity .2s ease;
}
.nav-overlay {
  position: fixed; inset: 0;
  background: rgba(250,248,243,0.98);
  backdrop-filter: blur(12px);
  display: flex; flex-direction: column; align-items: center;
  /* SAFE center (2026-08-03): a plain `justify-content: center` CLIPS THE TOP of
     overflowing flex content — the logo got cut in half on an iPhone. `safe`
     falls back to flex-start the moment the content is taller than the screen,
     so the logo and the first link stay reachable and the overlay scrolls. */
  justify-content: safe center;
  /* 2rem -> 1.5rem -> .5rem (2026-09-28): the client asked for the menu items closer together. */
  gap: .5rem;
  /* The overlay is inset:0, so it starts UNDER the fixed header. Once the URL
     bar appears and safe-center falls back to top-alignment, the first child
     (the logo) slid up behind the header band. Reserve the header's height at
     the top, plus the notch/home-indicator safe areas. --nav-top is the header:
     .top-inner padding .9rem*2 = 28.8px + the 1.4rem brand line ~= 84px. */
  --nav-top: 5.4rem;
  padding:
    calc(var(--nav-top) + env(safe-area-inset-top, 0px))
    1rem
    calc(1.5rem + env(safe-area-inset-bottom, 0px));
  opacity: 0; pointer-events: none;
  transition: opacity .3s ease;
  z-index: 50;
  overflow-y: auto;            /* never trap the last item off-screen */
  -webkit-overflow-scrolling: touch;
}
/* Brand mark at the top of the open menu. The overlay covers the whole phone
   screen, which hid the logo in the header behind it — the customer noticed. */
.nav-overlay .nav-logo {
  display: block;
  width: auto;
  height: clamp(92px, 16vh, 150px);
  margin-bottom: .35rem;
  flex: 0 0 auto;
}
/* The decorative inset hairline that used to sit here was removed 2026-08-03:
   on a phone it read as a stray box around the menu rather than as a frame. */
#nav-toggle:checked ~ .nav-overlay {
  opacity: 1; pointer-events: auto;
}
/* CLOSE BUTTON FIX (2026-08-03): .hamburger had z-index:60, but it lives inside
   .top which is z-index:20 and therefore creates its own stacking context — so
   that 60 only ranked it against its siblings INSIDE the header, and the whole
   header sat under the overlay's z-index:50. The X was drawn behind the overlay
   and could not be tapped, leaving no way out of the menu. Lift the header
   itself above the overlay while the menu is open. */
#nav-toggle:checked ~ .top {
  z-index: 60;
  background: transparent;
  backdrop-filter: none;
  border-bottom-color: transparent;
}
#nav-toggle:checked ~ .top .hamburger span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}
#nav-toggle:checked ~ .top .hamburger span:nth-child(2) { opacity: 0; }
#nav-toggle:checked ~ .top .hamburger span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}
.nav-overlay a.nav-link {
  font-family: 'Oswald', sans-serif;
  /* Lower floor than the old 1.8rem so seven items + logo fit a short phone. */
  font-size: clamp(2.15rem, 6vw, 3rem);
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--green-deep);
  padding: .3rem 1rem;
  flex: 0 0 auto;
  position: relative;
  transition: color .2s, letter-spacing .2s;
}
.nav-overlay a.nav-link:hover,
.nav-overlay a.nav-link.active {
  color: var(--amber-bright);
  letter-spacing: .3em;
}
.nav-overlay a.nav-link.active::before {
  content: '\2014'; position: absolute; left: -1.8rem; color: var(--amber-bright);
}
.nav-overlay .nav-sub {
  font-family: 'Oswald', sans-serif;
  font-size: .75rem; letter-spacing: .32em; text-transform: uppercase;
  color: var(--green-primary);
  margin-top: .9rem;   /* was 2rem, on top of the flex gap */
  flex: 0 0 auto;
}
.nav-overlay .nav-sub a { color: var(--green-primary); }
.nav-overlay .nav-sub a:hover { color: var(--amber-bright); }
.nav-overlay .nav-address {
  font-size: .8rem; letter-spacing: .05em; color: var(--text-muted);
  text-align: center; max-width: 36ch;
  margin-top: .15rem;
  flex: 0 0 auto;
}
/* Short phones (iPhone SE / mini in landscape-ish heights): shed a little more. */
@media (max-height: 700px) {
  .nav-overlay { gap: .35rem; --nav-top: 4.9rem; }
  .nav-overlay .nav-logo { height: clamp(60px, 12vh, 92px); }
  .nav-overlay a.nav-link { font-size: clamp(1.55rem, 4.2vw, 2.1rem); letter-spacing: .18em; }
}
body:has(#nav-toggle:checked) { overflow: hidden; }

/* ============ HERO ============ */
.hero {
  min-height: 100vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  padding: 4rem 1.5rem;
  position: relative;
  overflow: hidden;
}
.hero-bg {
  position: absolute; inset: 0; z-index: 0;
}
.hero-bg video,
.hero-bg img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.hero-overlay {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(to bottom, rgba(250,248,243,0.3) 0%, rgba(250,248,243,0.65) 50%, rgba(250,248,243,0.95) 100%);
}
.hero-content {
  position: relative; z-index: 2;
}
.hero .logo-main {
  width: clamp(180px, 30vw, 320px);
  margin: 0 auto 2rem;
  filter: drop-shadow(0 4px 20px rgba(0,0,0,.15));
  animation: fadeDown .8s ease-out;
}
.hero .eyebrow {
  font-family: 'Oswald', sans-serif;
  letter-spacing: .5em; text-transform: uppercase;
  color: var(--green-primary); font-size: .8rem;
  margin-bottom: 1.5rem;
  animation: fadeUp .8s ease-out .2s both;
}
.hero h1 {
  color: var(--ink); max-width: 14ch;
  margin-left: auto; margin-right: auto;
  animation: fadeUp .8s ease-out .4s both;
}
.hero .tagline {
  font-size: 1.15rem; color: var(--text-muted);
  max-width: 42ch; margin: 1rem auto 2.2rem;
  font-style: italic;
  animation: fadeUp .8s ease-out .6s both;
}
.hero .cta-row {
  display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center;
  animation: fadeUp .8s ease-out .8s both;
}
.hero .scroll-hint {
  position: absolute; bottom: 2rem; left: 50%;
  transform: translateX(-50%); z-index: 2;
  animation: bounce 2s infinite 1.5s;
  color: var(--green-primary); font-size: 1.5rem;
  opacity: .5;
}

/* ============ BUTTONS ============ */
.btn {
  display: inline-block;
  font-family: 'Oswald', sans-serif;
  letter-spacing: .25em; text-transform: uppercase;
  font-size: .85rem;
  padding: .9rem 1.8rem;
  border: 2px solid var(--green-deep);
  color: var(--green-deep);
  background: transparent;
  cursor: pointer;
  transition: all .18s;
}
.btn:hover {
  background: var(--green-deep); color: var(--paper);
}
.btn.filled {
  background: var(--green-deep); color: var(--paper);
}
.btn.filled:hover {
  background: var(--amber-bright); border-color: var(--amber-bright); color: var(--paper);
}

/* ============ SECTIONS ============ */
section { padding: 5rem 1.5rem; }
.wrap { max-width: 1100px; margin: 0 auto; }

.section-head {
  text-align: center; margin-bottom: 3rem;
}
.section-head .eyebrow {
  font-family: 'Oswald', sans-serif;
  letter-spacing: .5em; text-transform: uppercase;
  color: var(--amber-bright); font-size: .75rem;
  margin-bottom: .9rem;
}
.divider {
  width: 60px; height: 2px; background: var(--amber-bright);
  margin: 1rem auto 2rem;
}

.section-alt { background: var(--section-alt); }

/* ============ SCROLL ANIMATIONS ============ */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity .7s ease-out, transform .7s ease-out;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-left {
  opacity: 0;
  transform: translateX(-60px);
  transition: opacity .7s ease-out, transform .7s ease-out;
}
.reveal-left.visible {
  opacity: 1;
  transform: translateX(0);
}
.reveal-right {
  opacity: 0;
  transform: translateX(60px);
  transition: opacity .7s ease-out, transform .7s ease-out;
}
.reveal-right.visible {
  opacity: 1;
  transform: translateX(0);
}
.reveal-scale {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity .7s ease-out, transform .7s ease-out;
}
.reveal-scale.visible {
  opacity: 1;
  transform: scale(1);
}
.stagger-1 { transition-delay: .1s; }
.stagger-2 { transition-delay: .2s; }
.stagger-3 { transition-delay: .3s; }
.stagger-4 { transition-delay: .4s; }

/* Auto-stagger: grid items cascade in as their group reveals (ScrollReveal-style interval) */
.beer-list .beer:nth-child(2)  { transition-delay: .06s; }
.beer-list .beer:nth-child(3)  { transition-delay: .12s; }
.beer-list .beer:nth-child(4)  { transition-delay: .18s; }
.beer-list .beer:nth-child(5)  { transition-delay: .24s; }
.beer-list .beer:nth-child(6)  { transition-delay: .30s; }
.beer-list .beer:nth-child(n+7){ transition-delay: .36s; }

/* ============ AWARDS STRIP ============ */
.awards-strip {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(2rem, 5vw, 5rem);
  padding: 3rem 1.5rem;
  background: var(--paper);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.awards-strip img {
  height: clamp(80px, 12vw, 130px);
  width: auto;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.08));
  transition: transform .3s ease;
}
.awards-strip img:hover {
  transform: scale(1.08);
}

/* ============ SPLIT SECTIONS ============ */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}
.split.reverse { direction: rtl; }
.split.reverse > * { direction: ltr; }
@media (max-width: 800px) {
  .split, .split.reverse { grid-template-columns: 1fr; direction: ltr; }
}
.split-img {
  overflow: hidden;
  border-radius: 4px;
  box-shadow: 0 8px 30px rgba(0,0,0,.1);
}
.split-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .6s ease;
}
.split-img:hover img {
  transform: scale(1.04);
}
.split-text .lead {
  font-size: 1.2rem; color: var(--ink);
  font-style: italic;
  border-left: 3px solid var(--amber-bright);
  padding-left: 1.4rem; margin-bottom: 1.5rem;
}
.split-text p { color: var(--text-body); font-size: 1.05rem; line-height: 1.7; margin-bottom: 1rem; }

/* ============ TAP CATEGORY CARDS ============ */
.cat-grid {
  display: grid; gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.cat {
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 2.2rem 1.8rem;
  text-align: center;
  border-radius: 4px;
  box-shadow: 0 2px 12px var(--card-shadow);
  transition: transform .3s ease, box-shadow .3s ease;
}
.cat:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 30px rgba(0,0,0,.1);
}
.cat h3 { font-size: 1.5rem; color: var(--green-deep); margin-bottom: .8rem; }
.cat p { color: var(--text-muted); font-size: .95rem; }
/* The cards are links to the filtered menu (menu.html?cat=...). Without these, the lift-on-hover made them look
   tappable on phones while doing nothing (2026-10-08). */
a.cat { display: block; color: inherit; text-decoration: none; }
a.cat:active { transform: translateY(-2px); }
.cat-cta {
  display: inline-block; margin-top: 1.1rem;
  font-family: 'Oswald', sans-serif; font-size: .9rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--green-deep); border-bottom: 1px solid currentColor; padding-bottom: 2px;
}

/* ============ FULL-WIDTH IMAGE BREAK ============ */
.img-break {
  position: relative;
  height: 50vh;
  min-height: 300px;
  overflow: hidden;
}
.img-break img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.04);
  animation: kenburns 24s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes kenburns {
  from { transform: scale(1.04) translate3d(0, 0, 0); }
  to   { transform: scale(1.12) translate3d(-1.5%, -1.2%, 0); }
}
/* ── ABOUT PAGE HERO ONLY (2026-08-03) ───────────────────────────────────────
   images/about.jpg is 799x533 (aspect 1.50) but the hero band is full-width and
   40vh, which is roughly aspect 4.2 on a laptop. object-fit:cover therefore
   keeps only the middle ~36% of the photo's HEIGHT, and both owners' faces sit
   in the upper third — so desktop cropped their heads off entirely and mobile
   sliced the tops. Scoped to .img-break.about-hero so the other five pages that
   share .img-break are untouched.
   ─────────────────────────────────────────────────────────────────────────── */
.img-break.about-hero {
  height: 52vh;            /* taller band keeps ~45% of the frame instead of 36% */
  min-height: 340px;
}
.img-break.about-hero img {
  /* Pull the visible window up toward the faces rather than the centre. */
  object-position: center 28%;
  /* The Ken Burns pan moves the crop, which is what made the framing feel
     unstable as well as wrong. Hold this one still. */
  animation: none;
  transform: none;
}
/* The eyebrow was sliding under the fixed header on phones, same overlap class
   as the nav logo. Push the hero text down clear of the header band. */
.img-break.about-hero .img-break-overlay {
  padding-top: calc(4.6rem + env(safe-area-inset-top, 0px));
}
/* Client (2026-10-08): the headline sat on Mike's and Paul's faces. Anchor it to the bottom of the
   banner, over their shirts, with a darker fade there so it stays readable. */
.img-break.about-hero .img-break-overlay {
  align-items: flex-end;
  padding-bottom: 2rem;
  background: linear-gradient(to bottom, rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 55%, rgba(0,0,0,.72) 100%);
}
.img-break.about-hero .img-break-text .eyebrow { margin-bottom: .5rem; }
.img-break.about-hero h1 { line-height: 1.05; }
/* On computers the banner is a short wide strip, so even at the bottom the headline reached their chins.
   There, put it on the left over the taps instead, with the fade running left-to-right (client 2026-10-08). */
@media (min-width: 900px) {
  .img-break.about-hero .img-break-overlay {
    align-items: center;
    justify-content: flex-start;
    padding-left: 6vw;
    padding-bottom: 0;
    background: linear-gradient(to right, rgba(0,0,0,.72) 0%, rgba(0,0,0,.45) 26%, rgba(0,0,0,0) 40%);
  }
  .img-break.about-hero .img-break-text { text-align: left; }
  .img-break.about-hero h1 { font-size: clamp(2rem, 3.4vw, 3.2rem) !important; }
}
@media (max-width: 640px) {
  .img-break.about-hero { height: 46vh; min-height: 300px; }
  .img-break.about-hero img { object-position: center 22%; }
}

.img-break-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,.45) 0%, rgba(0,0,0,.25) 40%, rgba(0,0,0,.5) 100%);
  display: flex; align-items: center; justify-content: center;
}
.img-break-text {
  text-align: center;
  color: #fff;
}
.img-break-text h1,
.img-break-text h2 {
  font-size: clamp(2rem, 4vw, 3.5rem);
  color: #fff;
  text-shadow: 0 2px 20px rgba(0,0,0,.4);
}
.img-break-text .eyebrow {
  font-family: 'Oswald', sans-serif;
  letter-spacing: .5em; text-transform: uppercase;
  color: rgba(255,255,255,.85); font-size: .8rem;
  margin-bottom: 1rem;
  display: block;
}

/* ============ VALUE-PROP GRID ============ */
.props {
  display: grid; gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  text-align: center;
}
.prop {
  padding: 2rem 1.5rem;
  border-radius: 4px;
  border: 1px solid transparent;
  transition: border-color .3s, background .3s, box-shadow .3s;
}
.prop:hover {
  border-color: var(--line);
  background: var(--paper);
  box-shadow: 0 4px 16px var(--card-shadow);
}
.prop h4 {
  font-family: 'Oswald', sans-serif;
  color: var(--green-deep); letter-spacing: .15em;
  text-transform: uppercase; font-size: 1rem;
  margin-bottom: .6rem;
}
.prop p { color: var(--text-muted); font-size: .95rem; margin: 0; }

/* ============ BEER LIST ============ */
.beer-list {
  display: grid; gap: 1.2rem;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  margin-top: 2rem;
}
.beer {
  background: var(--paper);
  border-left: 4px solid var(--green-deep);
  padding: 1.4rem 1.5rem;
  border-radius: 2px;
  box-shadow: 0 1px 6px var(--card-shadow);
  transition: transform .2s, box-shadow .2s;
}
.beer:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
}
.beer-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 1rem; flex-wrap: wrap;
}
.beer-name {
  font-family: 'Oswald', sans-serif;
  font-size: 1.25rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink);
}
.beer-style {
  font-size: .8rem; color: var(--green-primary);
  letter-spacing: .1em; text-transform: uppercase;
}
.beer-abv {
  font-family: 'Oswald', sans-serif;
  color: var(--amber-bright); font-size: .95rem;
  letter-spacing: .1em;
}
.beer-desc {
  margin-top: .6rem; color: var(--text-muted); font-size: .92rem;
  line-height: 1.5;
}

/* ---- Beer photos on the main menu (customer punch list #4/#5) ----
   A card only becomes a photo card once its image actually loads. Photos are
   optional per beer (images/beers/<slug>.jpg), so the two-column layout, the
   zoom cursor, and the "expand" CTA are all gated on .has-photo -- otherwise
   every beer would advertise a photo and most would open an empty lightbox. */
.beer-photo-wrap { display: none; }
.beer.has-photo {
  display: grid;
  grid-template-columns: 1fr 96px;
  column-gap: 1.1rem;
  row-gap: .7rem;
  align-items: start;
  cursor: zoom-in;
}
/* Client (2026-09-28): the description starts BELOW the photo and runs the full card width, instead of
   wrapping in the narrow column beside the photo. */
.beer.has-photo .beer-desc { grid-column: 1 / -1; margin-top: 0; }
.beer.has-photo .beer-photo-wrap {
  display: block;
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  line-height: 0;
}
.beer-thumb {
  width: 96px; height: 96px;
  object-fit: cover;
  display: block;
  transition: transform .25s ease;
}
.beer.has-photo:hover .beer-thumb { transform: scale(1.06); }

/* The CTA is a permanent badge, not a hover-only hint -- most of this menu is
   read on a phone, where there is no hover state to discover it with. */
.beer-expand {
  position: absolute;
  inset: auto 0 0 0;
  display: flex; align-items: center; justify-content: center; gap: .25rem;
  padding: .22rem .3rem;
  background: linear-gradient(to top, rgba(12,20,15,.85), rgba(12,20,15,0));
  color: #fff;
  font-family: 'Oswald', sans-serif;
  font-size: .58rem; letter-spacing: .1em; text-transform: uppercase;
  line-height: 1;
  pointer-events: none;
}
.beer-expand svg { width: 9px; height: 9px; flex: none; }

@media (max-width: 420px) {
  .beer.has-photo { grid-template-columns: 1fr 76px; column-gap: .9rem; row-gap: .6rem; }
  .beer-thumb { width: 76px; height: 76px; }
}

/* ---- Beer lightbox (menu.html) ---- */
.beer-lightbox {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(12, 20, 15, .86);
  display: flex; align-items: center; justify-content: center;
  padding: 1.25rem;
}
.beer-lightbox[hidden] { display: none; }
.blb-card {
  background: var(--paper);
  border-radius: 4px;
  max-width: 520px; width: 100%;
  max-height: 88vh; overflow-y: auto;
  position: relative;
  box-shadow: 0 10px 40px rgba(0,0,0,.45);
}
.blb-card img { width: 100%; display: block; }
.blb-body { padding: 1.4rem 1.6rem 1.6rem; }
.blb-close {
  position: absolute; top: .5rem; right: .5rem;
  width: 38px; height: 38px;
  border: 0; border-radius: 50%;
  background: rgba(12,20,15,.55); color: #fff;
  font-size: 1.5rem; line-height: 1; cursor: pointer;
}
.blb-close:hover { background: rgba(12,20,15,.8); }
.blb-name {
  font-family: 'Oswald', sans-serif;
  font-size: 1.5rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink);
}
.blb-style {
  font-size: .82rem; color: var(--green-primary);
  letter-spacing: .1em; text-transform: uppercase; margin-top: .15rem;
}
.blb-abv {
  font-family: 'Oswald', sans-serif;
  color: var(--amber-bright); font-size: 1rem;
  letter-spacing: .1em; margin-top: .4rem;
}
.blb-desc { margin-top: .8rem; color: var(--text-muted); line-height: 1.6; }
.blb-soldout {
  display: inline-block; margin-top: .9rem;
  padding: .25rem .6rem;
  background: var(--green-deep); color: #fff;
  font-family: 'Oswald', sans-serif;
  font-size: .75rem; letter-spacing: .14em;
}
/* Required because the rule above sets an explicit display. The hidden attribute
   is only display:none in the UA stylesheet, so ANY author display declaration
   beats it and the badge shows permanently -- which it did, on every pictured
   beer, regardless of the sheet. Same guard as .beer-lightbox[hidden] above. */
.blb-soldout[hidden] { display: none; }

.cat-header {
  font-family: 'Oswald', sans-serif;
  font-size: 1.6rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--green-deep);
  margin: 3rem 0 .5rem; padding-bottom: .5rem;
  border-bottom: 2px solid var(--line);
}
.cat-header:first-of-type { margin-top: 0; }

/* ============ VISIT / HOURS ============ */
.visit-grid {
  display: grid; gap: 3rem;
  grid-template-columns: 1fr 1fr;
  align-items: start;
}
@media (max-width: 760px) { .visit-grid { grid-template-columns: 1fr; } }
.hours-block, .info-block {
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 2rem;
  border-radius: 4px;
  box-shadow: 0 2px 12px var(--card-shadow);
}
.hours-table {
  width: 100%; border-collapse: collapse;
  font-size: 1rem;
}
.hours-table td {
  padding: .55rem 0; border-bottom: 1px solid var(--line-light);
}
.hours-table td:first-child {
  font-family: 'Oswald', sans-serif;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--green-primary);
}
.hours-table td:last-child { text-align: right; color: var(--ink); }
.hours-table tr:last-child td { border-bottom: none; }
.closed { color: #aaa; font-style: italic; }

.info-block .row { margin-bottom: 1.2rem; }
.info-block .label {
  font-family: 'Oswald', sans-serif; letter-spacing: .1em;
  text-transform: uppercase; color: var(--green-primary);
  font-size: .8rem; display: block; margin-bottom: .2rem;
}
.info-block .val { color: var(--ink); font-size: 1.05rem; }

/* ============ EVENTS ============ */
.event-list {
  display: grid; gap: 1.2rem;
  max-width: 780px; margin: 0 auto;
}
.event {
  background: var(--paper);
  border-left: 4px solid var(--green-primary);
  padding: 1.4rem 1.6rem;
  display: grid; grid-template-columns: 110px 1fr; gap: 1.4rem;
  align-items: center;
  border-radius: 2px;
  box-shadow: 0 1px 6px var(--card-shadow);
  transition: transform .2s, border-color .2s;
}
.event:hover {
  transform: translateX(4px);
  border-color: var(--amber-bright);
}
@media (max-width: 560px) { .event { grid-template-columns: 1fr; } }
/* ============ MERCH (2026-09-28) ============
   Listing only (no online sales), styled after the client's reference site: big square photos, name + price
   underneath. Items without a photo get a faint logo tile so the grid stays even. */
.merch-note { color: var(--text-muted); font-style: italic; margin: 0 auto 2.2rem; }
.merch-sample { color: #b44; font-family: 'Oswald', sans-serif; letter-spacing: .12em; text-transform: uppercase;
  font-size: .8rem; margin-bottom: 1.2rem; }
.merch-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.4rem 1.6rem; }
@media (max-width: 760px) { .merch-grid { grid-template-columns: repeat(2, 1fr); gap: 1.6rem 1rem; } }
.merch-item { text-align: center; cursor: zoom-in; outline-offset: 4px; }
.merch-photo { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: var(--paper);
  border-radius: 2px; box-shadow: 0 1px 6px var(--card-shadow); }
.merch-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease; }
.merch-item:hover .merch-photo img, .merch-item:focus .merch-photo img { transform: scale(1.06); }
.merch-photo.placeholder img { object-fit: contain; padding: 22%; opacity: .28; }
.merch-badge { position: absolute; top: .7rem; right: .7rem; background: var(--amber-bright); color: #fff;
  font-family: 'Oswald', sans-serif; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase;
  padding: .25rem .55rem; border-radius: 2px; }
.merch-badge.soldout { background: #6b6b6b; }
.merch-item.sold-out .merch-photo img { opacity: .5; }
.merch-name { font-family: 'Oswald', sans-serif; font-size: 1.05rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink); margin-top: 1rem; line-height: 1.25; }
.merch-price { font-family: 'Oswald', sans-serif; color: var(--amber-bright); letter-spacing: .08em; margin-top: .3rem; }
.merch-price s, #mlb-price s { color: var(--text-muted); margin-left: .45rem; font-size: .9em; }
.merch-sizes { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); margin-top: .25rem; }

/* Event photos (2026-09-28): same pattern as beer photos -- hidden until the image actually loads. */
.event-photo { display: none; position: relative; border-radius: 4px; overflow: hidden; line-height: 0; align-self: start; }
.event.has-photo { grid-template-columns: 110px 1fr 96px; cursor: zoom-in; }
.event.has-photo .event-photo { display: block; }
.event-photo img { width: 96px; height: 96px; object-fit: cover; display: block; transition: transform .25s ease; }
/* Client (2026-10-08): the description continues UNDER the photo instead of squeezing into the column beside
   it (same fix as beer cards). It is the card's last child; the date spans both rows on wide screens. */
@media (min-width: 561px) {
  .event { row-gap: 0; }
  .event-date { grid-row: 1 / span 2; }
  .event > .event-desc { grid-column: 2 / -1; }
}
@media (max-width: 560px) {
  .event { row-gap: .6rem; }
  .event > .event-desc { grid-column: 1 / -1; margin-top: 0; }
}
/* Weekly events have no date block: give the title the whole width instead of the 110px date column. */
.event.no-date { grid-template-columns: 1fr; }
.event.no-date.has-photo { grid-template-columns: 1fr 96px; }
.event.no-date > .event-desc { grid-column: 1 / -1; }
@media (max-width: 560px) { .event.no-date.has-photo { grid-template-columns: 1fr 76px; } }
.event.has-photo:hover .event-photo img { transform: scale(1.06); }
@media (max-width: 560px) {
  .event.has-photo { grid-template-columns: 1fr 76px; }
  .event.has-photo .event-date { grid-column: 1 / -1; }
  .event-photo img { width: 76px; height: 76px; }
}
.event-date {
  text-align: center;
  font-family: 'Oswald', sans-serif;
  color: var(--amber-bright);
}
.event-date .d { font-size: 2rem; line-height: 1; display: block; }
.event-date .m { font-size: .85rem; letter-spacing: .2em; text-transform: uppercase; }
/* Free-text "dates" that are not m/d or a weekday: smaller and allowed to wrap, never wider than the column. */
.event-date.txt .d { font-size: 1.1rem; line-height: 1.2; overflow-wrap: anywhere; }
.event-title {
  font-family: 'Oswald', sans-serif;
  font-size: 1.25rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink);
}
.event-time {
  color: var(--green-primary); font-size: .9rem;
  margin-top: .2rem;
}
.event-desc {
  color: var(--text-muted); font-size: .93rem;
  margin-top: .45rem;
}

/* ============ ABOUT ============ */
.about-body {
  max-width: 780px; margin: 0 auto;
  font-size: 1.08rem; line-height: 1.75;
  color: var(--text-body);
}
.about-body p { margin-bottom: 1.3rem; }
.about-body .lead {
  font-size: 1.25rem; color: var(--ink);
  font-style: italic;
  border-left: 3px solid var(--amber-bright);
  padding-left: 1.4rem; margin-bottom: 1rem;
}
/* Story Headings (2026-10-16): each quote line sits close to its own paragraph
   and opens a new section with room above it. */
.about-body .lead:not(:first-child) { margin-top: 2.6rem; }
.owners-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 2rem;
  margin-top: 3rem;
}
@media (max-width: 640px) { .owners-row { grid-template-columns: 1fr; } }
.owner {
  background: var(--section-alt); border: 1px solid var(--line);
  padding: 1.8rem; text-align: center;
  border-radius: 4px;
}
.owner-name {
  font-family: 'Oswald', sans-serif;
  font-size: 1.2rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--green-deep);
  margin-bottom: .4rem;
}
.owner-role {
  font-size: .85rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--amber-bright);
  margin-bottom: 1rem;
}

/* ============ STATS ============ */
.stat-row {
  display: flex; justify-content: center; gap: clamp(2rem, 5vw, 5rem);
  flex-wrap: wrap;
  padding: 2rem 0;
}
.stat-item { text-align: center; }
.stat-number {
  font-family: 'Oswald', sans-serif;
  font-size: clamp(2.5rem, 5vw, 4rem);
  color: var(--green-deep);
  line-height: 1;
}
.stat-label {
  font-family: 'Oswald', sans-serif;
  letter-spacing: .3em; text-transform: uppercase;
  color: var(--amber-bright); font-size: .7rem;
  margin-top: .5rem;
}

/* ============ FOOTER ============ */
footer {
  background: var(--green-deep);
  color: rgba(255,255,255,.85);
  padding: 3rem 1.5rem 2rem;
}
.foot-inner {
  max-width: 1100px; margin: 0 auto;
  display: grid; gap: 2rem;
  grid-template-columns: 2fr 1fr 1fr;
}
@media (max-width: 720px) { .foot-inner { grid-template-columns: 1fr; } }
footer .brand { color: #fff; }
footer .brand .sub { color: rgba(255,255,255,.6); }
.foot-col h5 {
  font-family: 'Oswald', sans-serif; letter-spacing: .2em;
  text-transform: uppercase; font-size: .85rem;
  color: rgba(255,255,255,.5); margin: 0 0 .9rem;
}
.foot-col ul { list-style: none; padding: 0; margin: 0; }
.foot-col li { margin-bottom: .5rem; }
.foot-col a { color: rgba(255,255,255,.75); font-size: .92rem; }
.foot-col a:hover { color: #fff; }
.foot-legal {
  max-width: 1100px; margin: 2.5rem auto 0;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,.15);
  display: flex; justify-content: space-between;
  flex-wrap: wrap; gap: 1rem;
  font-size: .82rem; color: rgba(255,255,255,.4);
}

/* ============ ANIMATIONS ============ */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeDown {
  from { opacity: 0; transform: translateY(-30px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateX(-50%) translateY(0); }
  40% { transform: translateX(-50%) translateY(-12px); }
  60% { transform: translateX(-50%) translateY(-6px); }
}

/* ============ MISC ============ */
.center { text-align: center; }
.tagline {
  font-size: 1.15rem; color: var(--text-muted);
  font-style: italic;
}

/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-left, .reveal-right, .reveal-scale {
    opacity: 1; transform: none; transition: none;
  }
  .hero .logo-main, .hero .eyebrow, .hero h1, .hero .tagline, .hero .cta-row {
    animation: none;
  }
  .img-break img { animation: none; transform: none; }
  .hero .scroll-hint { animation: none; }
}

/* ============ REDUCED MOTION (accessibility) ============ */
@media (prefers-reduced-motion: reduce) {
  .img-break img { animation: none !important; transform: none !important; }
  .reveal, .reveal-left, .reveal-right, .reveal-scale {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
  .beer, .beer:hover { transition: none !important; transform: none !important; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}