/* Metric-matched fallbacks for the display=swap period: local Arial/Helvetica (or Roboto on Android)
   scaled to Syne's and Outfit's advance widths and vertical metrics, so text wraps the same before and
   after the web fonts arrive and the swap does not shift the layout. Values come from the fonts' own
   metrics (hhea ascent/descent, advance widths over this page's copy); regenerate if the copy changes a lot.
   Exception: the 800 faces. Syne 800 is so extended that a width match (about 165%) makes the fallback's
   glyphs taller than the 1.05 line pitch, so its lines overlap. They are capped at 128% (ink about 0.92em)
   and the hero heading's line breaks are fixed in the markup instead, so it cannot re-wrap on the swap. */
@font-face { font-family: 'Syne Fallback'; src: local('Arial Bold'), local('Arial-BoldMT'), local('Helvetica Bold'), local('Helvetica-Bold'), local('Liberation Sans Bold'), local('LiberationSans-Bold'), local('Arimo Bold'); font-weight: 700; size-adjust: 114.43%; ascent-override: 80.84%; descent-override: 24.03%; line-gap-override: 0%; }
@font-face { font-family: 'Syne Fallback'; src: local('Arial Bold'), local('Arial-BoldMT'), local('Helvetica Bold'), local('Helvetica-Bold'), local('Liberation Sans Bold'), local('LiberationSans-Bold'), local('Arimo Bold'); font-weight: 800; size-adjust: 128%; ascent-override: 72.27%; descent-override: 21.48%; line-gap-override: 0%; }
@font-face { font-family: 'Syne Fallback Roboto'; src: local('Roboto Bold'), local('Roboto-Bold'); font-weight: 700; size-adjust: 121.80%; ascent-override: 75.94%; descent-override: 22.58%; line-gap-override: 0%; }
@font-face { font-family: 'Syne Fallback Roboto'; src: local('Roboto Bold'), local('Roboto-Bold'); font-weight: 800; size-adjust: 128%; ascent-override: 72.27%; descent-override: 21.48%; line-gap-override: 0%; }
@font-face { font-family: 'Outfit Fallback'; src: local('Arial'), local('ArialMT'), local('Helvetica'), local('Liberation Sans'), local('LiberationSans-Regular'), local('Arimo'); font-weight: 400; size-adjust: 98.87%; ascent-override: 101.14%; descent-override: 26.30%; line-gap-override: 0%; }
@font-face { font-family: 'Outfit Fallback'; src: local('Arial'), local('ArialMT'), local('Helvetica'), local('Liberation Sans'), local('LiberationSans-Regular'), local('Arimo'); font-weight: 500; size-adjust: 98.82%; ascent-override: 101.19%; descent-override: 26.31%; line-gap-override: 0%; }
@font-face { font-family: 'Outfit Fallback'; src: local('Arial Bold'), local('Arial-BoldMT'), local('Helvetica Bold'), local('Helvetica-Bold'), local('Liberation Sans Bold'), local('LiberationSans-Bold'), local('Arimo Bold'); font-weight: 600; size-adjust: 94.10%; ascent-override: 106.27%; descent-override: 27.63%; line-gap-override: 0%; }
@font-face { font-family: 'Outfit Fallback Roboto'; src: local('Roboto'), local('Roboto-Regular'); font-weight: 400; size-adjust: 100.19%; ascent-override: 99.81%; descent-override: 25.95%; line-gap-override: 0%; }
@font-face { font-family: 'Outfit Fallback Roboto'; src: local('Roboto'), local('Roboto-Regular'); font-weight: 500; size-adjust: 100.14%; ascent-override: 99.86%; descent-override: 25.96%; line-gap-override: 0%; }
@font-face { font-family: 'Outfit Fallback Roboto'; src: local('Roboto Bold'), local('Roboto-Bold'); font-weight: 600; size-adjust: 100.18%; ascent-override: 99.82%; descent-override: 25.95%; line-gap-override: 0%; }

:root {
  --bg: #0f1923;
  --surface: #1a2634;
  --text: #f5f0eb;
  --muted: #94a3b8;
  --accent: #3ecf8e;
  --tint-inner: #0e2720;
  --tint-mid: #0b1714;
  --tint-outer: #070c0e;
  --font-heading: 'Syne', 'Syne Fallback', 'Syne Fallback Roboto', system-ui, sans-serif;
  --font-body: 'Outfit', 'Outfit Fallback', 'Outfit Fallback Roboto', system-ui, sans-serif;
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
  --radius: 999px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
/* Author display rules (flex, grid) would otherwise beat the UA's [hidden] { display: none }. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }
html.reduced-motion { scroll-behavior: auto; }

body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text);
  background: radial-gradient(circle at 50% 40%, var(--tint-inner) 0%, var(--tint-mid) 55%, var(--tint-outer) 100%) fixed, var(--bg);
  overflow-x: hidden;
}

h1, h2, h3 { font-family: var(--font-heading); line-height: 1.05; }

a { color: var(--accent); }

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

.skip-link {
  position: absolute; left: var(--space-2); top: -3rem; z-index: 200;
  background: var(--text); color: var(--bg); padding: var(--space-1) var(--space-2); border-radius: 8px;
}
.skip-link:focus { top: var(--space-2); }

.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
  padding: var(--space-2) 4%;
  background: linear-gradient(to bottom, rgba(8, 12, 20, 0.85), rgba(8, 12, 20, 0));
}
.brand { display: flex; align-items: center; gap: var(--space-1); color: var(--text); text-decoration: none; font-family: var(--font-heading); font-weight: 800; }
.brand-mark { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--accent); color: var(--bg); font-size: 0.8rem; }
/* The "BL" mark is drawn by CSS, not text, so the link's visible text ("Brew Lab") is what its spoken name
   starts with: voice-control users can say what they see. */
.brand-mark::before { content: "BL"; }
.site-nav { display: flex; gap: var(--space-1); }
.site-nav a, .build-link {
  color: var(--text); text-decoration: none; font-weight: 500; font-size: 0.95rem;
  padding: 0.6rem 1rem; border-radius: var(--radius); min-height: 44px; display: inline-flex; align-items: center;
}
.site-nav a:hover { background: rgba(255, 255, 255, 0.08); }
.build-link { background: var(--accent); color: var(--bg); font-weight: 600; }
/* One line each, at every width: wrapped nav links or a two-line button double the header's height. */
.brand-name, .site-nav a, .build-link { white-space: nowrap; }
@media (max-width: 1023px) {
  .site-nav { gap: 0.25rem; }
  .site-nav a { padding: 0.6rem 0.55rem; font-size: 0.9rem; }
}
@media (max-width: 400px) {
  .build-link { padding: 0.5rem 0.8rem; font-size: 0.85rem; }
}
/* The smallest phones show just the round mark; the link's aria-label still names the brewery. */
@media (max-width: 359px) {
  .brand-name { display: none; }
}

main > section { position: relative; padding: var(--space-5) 4%; }

.section-lede, .demo-note { color: var(--muted); max-width: 40rem; }

.site-footer { padding: var(--space-4) 4%; color: var(--muted); font-size: 0.9rem; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.site-footer p + p { margin-top: var(--space-1); }

/* display: block before the library defines the element (its own :host rule): an undefined element is
   inline, so the tap bar's height would not apply and the page would grow about 600px on upgrade,
   moving every section below it (and a deep link's target) after the page has scrolled there. */
model-viewer { display: block; --poster-color: transparent; --progress-bar-color: transparent; background: transparent; }
/* The hero poster paints before model-viewer.min.js arrives (it is the largest paint); once the element
   is defined, model-viewer shows the same poster, same framing, until the model is ready. */
.hero-can:not(:defined) { background: url('../assets/posters/can.webp') center / contain no-repeat; }
/* No WebGL (or the library failed to load): model-viewer is never defined, so main.js paints each
   poster as the element's background and adds this class. */
model-viewer.poster-fallback { display: block; background-position: center; background-size: contain; background-repeat: no-repeat; }

@media (max-width: 767px) {
  .site-nav { display: none; }
}

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

/* Hero */
.hero { min-height: 100svh; display: grid; grid-template-columns: minmax(18rem, 1.25fr) minmax(0, 1.1fr) minmax(16rem, 0.8fr); overflow-x: clip; align-items: center; gap: var(--space-3); padding-top: 6rem; }
.hero-copy .eyebrow { color: var(--accent); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.85rem; }
.hero-copy h1 { font-size: clamp(2.2rem, 4.2vw, 5rem); font-weight: 800; margin: var(--space-1) 0; }
/* One line per span, whatever the font: the web font swap can never re-wrap the heading. */
.hero-copy h1 span { display: block; }
.hero-sub { font-size: clamp(1.2rem, 2vw, 1.6rem); font-weight: 700; color: var(--text); }
.lede { color: var(--muted); margin-top: var(--space-2); max-width: 26rem; }
.open-now { min-height: 1.6em; margin-top: var(--space-2); color: var(--muted); font-weight: 600; } /* reserved: no shift when filled */
.open-now.is-open { color: var(--accent); }
.cta-secondary { display: inline-flex; align-items: center; min-height: 44px; margin-top: var(--space-1); padding: 0.6rem 1.2rem; border-radius: var(--radius); border: 1px solid rgba(255, 255, 255, 0.3); color: var(--text); font-weight: 600; text-decoration: none; }
.cta-secondary:hover { background: rgba(255, 255, 255, 0.08); }
/* Capped by viewport width too, so in the narrow three-column range the can keeps side room for ingredients. */
.hero-stage { position: relative; height: min(78svh, 760px, 46vw); container-type: size; }
.hero-can { position: absolute; inset: 0; width: 100%; height: 100%; }
.ingredients { position: absolute; inset: -10%; pointer-events: none; }
.ingredients-back { z-index: 0; }
.ingredients-front { z-index: 2; }
.hero-can { z-index: 1; }
.ingredient { position: absolute; filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.35)); }
/* Shown once the 3D can is live (it cannot turn as a poster); fades after the reader first turns it. */
.turn-hint {
  position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); z-index: 3; margin: 0;
  display: flex; align-items: center; gap: 0.4rem; white-space: nowrap; pointer-events: none;
  font-size: 0.8rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted);
  transition: opacity 0.5s var(--ease);
}
.turn-hint.is-used { opacity: 0; }
.lineup { align-self: end; padding-bottom: var(--space-4); }
.lineup-label { font-family: var(--font-heading); font-weight: 700; margin-bottom: var(--space-1); }
.lineup-buttons {
  display: grid; gap: var(--space-1); align-content: start; /* spare reserved height stays empty, buttons keep their size */
  /* One button: 0.7rem padding top and bottom, a 1.6-line name, a 1.6-line 0.9rem style, 1px borders. */
  --lineup-btn: calc(4.44rem + 2px);
  /* The buttons render after beers.json loads; reserve their space so the hero does not shift. */
  min-height: calc(4 * var(--lineup-btn) + 3 * var(--space-1));
}
.lineup-buttons button {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: var(--space-1);
  text-align: left; font: inherit; color: var(--text); cursor: pointer;
  background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 14px;
  padding: 0.7rem 0.9rem; min-height: 44px; transition: background 0.3s var(--ease), border-color 0.3s var(--ease);
}
.lineup-buttons button:hover { background: rgba(255, 255, 255, 0.1); }
/* Selection is shown by a 2px ring and a check mark, not by color alone. */
.lineup-buttons button[aria-pressed="true"] { border-color: var(--swatch); box-shadow: inset 0 0 0 1px var(--swatch); background: rgba(255, 255, 255, 0.1); }
/* The check mark is decorative: aria-pressed already carries the state. */
.lineup-buttons button[aria-pressed="true"] .lineup-name::after { content: " \2713"; content: " \2713" / ""; color: var(--swatch); }
.swatch { grid-row: span 2; width: 0.9rem; height: 0.9rem; margin-top: 0.35rem; border-radius: 50%; background: var(--swatch); }
.lineup-name { font-weight: 600; }
.lineup-style { color: var(--muted); font-size: 0.9rem; }
.beer-meta { margin-top: var(--space-2); color: var(--muted); font-size: 0.95rem; max-width: 22rem; min-height: 3.2em; /* two lines, filled after load */ }

@media (max-width: 1023px) {
  .hero { grid-template-columns: 1fr; text-align: center; }
  .hero-copy h1 { font-size: clamp(2.2rem, 9vw, 4rem); }
  .hero-copy .lede { margin-inline: auto; }
  .hero-stage { height: 56svh; }
  .lineup { padding-bottom: 0; }
  .lineup-buttons { grid-template-columns: repeat(2, minmax(0, 1fr)); min-height: calc(2 * var(--lineup-btn) + var(--space-1)); }
  .beer-meta { margin-inline: auto; }
}
/* Two columns this narrow wrap the first row's name and style onto a second line each (+1.6rem, +1.44rem). */
@media (max-width: 404px) {
  .lineup-buttons { min-height: calc(2 * var(--lineup-btn) + 3.04rem + var(--space-1)); }
}

/* On tap now: a chalkboard built in CSS (slate, chalk-white text, a wood frame); no image files.
   Scoped under .tap-item: the tap bar's pour buttons (tapbar.js) also contain a .tap-name span. */
.tap-board {
  margin-top: var(--space-3); max-width: 64rem; padding: var(--space-3); border-radius: 18px; color: #f2efe8;
  background: radial-gradient(120% 90% at 25% 15%, rgba(255, 255, 255, 0.06), transparent 60%), #1b2320;
  border: 10px solid #3b2a1c; box-shadow: inset 0 0 48px rgba(0, 0, 0, 0.55), 0 20px 40px rgba(0, 0, 0, 0.35);
}
.tap-board-heading { font-size: 1rem; letter-spacing: 0.1em; text-transform: uppercase; color: #cfd8d3; margin: var(--space-3) 0 var(--space-2); }
.tap-board-heading:first-child { margin-top: 0; }
.tap-list { list-style: none; display: grid; gap: var(--space-2) var(--space-4); }
.tap-item { display: grid; grid-template-columns: auto 1fr; column-gap: var(--space-1); align-content: start; }
.tap-item .tap-swatch { grid-row: span 3; width: 0.8rem; height: 0.8rem; margin-top: 0.45rem; border-radius: 50%; background: var(--swatch); }
.tap-item .tap-name { font-family: var(--font-heading); font-weight: 700; font-size: 1.25rem; }
.tap-item .tap-style { color: #cfd8d3; font-weight: 500; }
.tap-item .tap-notes { color: #b7c0bb; }
.tap-item .tap-tag { display: inline-block; margin-left: 0.4rem; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: #e9c46a; border: 1px solid currentColor; border-radius: var(--radius); padding: 0 0.5rem; vertical-align: 0.1em; }
.tap-pours { margin-top: var(--space-3); padding-top: var(--space-2); border-top: 1px dashed rgba(255, 255, 255, 0.22); color: #cfd8d3; }
@media (min-width: 900px) { .tap-list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 404px) { .tap-board { padding: var(--space-2); border-width: 6px; } }

/* Crack one open */
.crack { padding: 0; }
.crack-pin { position: relative; height: 100svh; display: grid; grid-template-columns: 1fr 1.2fr; align-items: center; padding: 6rem 4% 2rem; gap: var(--space-3); }
.crack-pin h2 { font-size: clamp(2.2rem, 5vw, 4.5rem); font-weight: 800; align-self: start; }
.crack-can { width: 100%; height: 80svh; grid-column: 2; grid-row: 1 / span 2; }
/* The close camera crops the can's body at the canvas edge; fade it out instead of a hard cut. */
.crack-can { mask-image: linear-gradient(to bottom, #000 85%, transparent); }
.beats { display: grid; gap: var(--space-2); }
.beat { font-family: var(--font-heading); font-weight: 700; font-size: clamp(1.4rem, 3vw, 2.4rem); color: var(--muted); transform: translateY(0.6rem); transition: color 0.4s var(--ease), transform 0.4s var(--ease); }
/* Idle beats stay readable (muted is at least 6:1 on every tint stop); a revealed beat brightens and lifts. */
.beat.is-visible { transform: none; color: var(--text); }
/* Stacked on portrait screens only: a landscape phone keeps the side-by-side layout, since stacked
   the heading, can, and beats are taller than its screen and spill into the tap bar. */
@media (max-width: 1023px) and (orientation: portrait) {
  .crack-pin { grid-template-columns: 1fr; text-align: center; }
  .crack-can { grid-column: 1; grid-row: auto; height: 50svh; }
}
/* Landscape phones: tighten the pinned frame so the heading and all three beats fit the short screen. */
@media (max-height: 500px) and (orientation: landscape) {
  .crack-pin { padding: 4.5rem 4% 1rem; }
  .crack-pin h2 { font-size: clamp(1.8rem, 4vw, 2.4rem); }
  .beats { gap: var(--space-1); }
  .beat { font-size: clamp(1.1rem, 2.6vw, 1.4rem); }
}

/* Tap bar */
.on-tap h2, .taps h2, .pour h2, .this-week h2, .story h2, .visit h2 { font-size: clamp(2rem, 4.5vw, 3.8rem); font-weight: 800; margin-bottom: var(--space-1); }
.taps-stage { position: relative; margin-top: var(--space-3); }
/* The pour buttons sit a fixed ~50px above the handles, and in a landscape viewer the model scales with
   the viewer's height, so below about 600px tall the buttons are pushed out of the top and clipped.
   The taproom fills the whole canvas; its edges fade into the page (whose tint follows the selected beer, so no
   baked edge colour could match it). The fade is --tap-bar-edge, applied by tapbar.js to the rendered view and poster
   inside model-viewer's shadow root: a mask on the element itself would also fade the slotted pour buttons. */
.tap-bar { width: 100%; height: clamp(37.5rem, 70svh, 40rem); --tap-bar-edge: radial-gradient(ellipse 72% 78% at 50% 50%, #000 62%, transparent 100%); }
/* No model-viewer (library failed to load): the poster is the element's background and there are no buttons. */
.tap-bar.poster-fallback { mask-image: var(--tap-bar-edge); }
.tap-btn {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.15;
  font: 600 0.9rem var(--font-body); color: var(--bg); background: var(--swatch); border: 0; border-radius: var(--radius);
  padding: 0.4rem 0.9rem; min-height: 44px; cursor: pointer; white-space: nowrap; transform: translateY(-110%);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}
/* The verb sits small above the name, so each button is only as wide as the beer name. */
.tap-btn .verb { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.tap-btn:disabled { background: rgba(255, 255, 255, 0.14); color: var(--text); cursor: default; }
.tap-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); margin-top: var(--space-2); }
.beer-card-name { font-family: var(--font-heading); font-weight: 700; font-size: 1.3rem; }
/* --card-accent is the poured beer's (tapbar.js), which can differ from the hero's selection. */
.beer-card-style { color: var(--card-accent, var(--accent)); font-weight: 600; }
.beer-card-notes { color: var(--muted); }
.clear-bar { font: 600 1rem var(--font-body); color: var(--text); background: transparent; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: var(--radius); padding: 0.7rem 1.3rem; min-height: 44px; cursor: pointer; }
.clear-bar:hover { background: rgba(255, 255, 255, 0.08); }
.tap-fallback { color: var(--muted); margin-top: var(--space-2); }
@media (max-width: 767px) {
  /* Card above the button, so Clear the bar does not jump as the card text changes length. */
  .tap-controls { flex-direction: column; align-items: flex-start; }
  .beer-card { min-height: 7rem; } /* tallest card (two-line notes), so the button holds still */
  /* Portrait framing fits the bar's width, so extra height is headroom above the handles: the
     hotspot buttons stay inside the viewer (outside it they are clipped and cannot be tapped).
     The taproom runs past the canvas edges; fade it out instead of a hard cut. */
  /* Capped so a landscape phone does not get a 790 to 870px viewer; the cap stays at least 600px
     (37.5rem), the shortest landscape viewer that keeps the buttons inside it. Portrait phones are
     unaffected (118vw stays under 90svh). */
  .tap-bar { height: clamp(52svh, 118vw, max(90svh, 37.5rem)); --tap-bar-edge: radial-gradient(ellipse 80% 70% at 50% 55%, #000 62%, transparent 100%); }
  .tap-btn { font-size: 0.8rem; padding: 0.4rem 0.35rem; white-space: normal; max-width: 4.6rem; text-align: center; }
  /* Taps sit 75 to 90px apart here: show the name only, but keep "Pour" in the accessible name. */
  .tap-btn .verb { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (max-width: 359px) {
  .tap-btn { font-size: 0.72rem; max-width: 4.1rem; }
}
.pour-frame { position: relative; max-width: 720px; margin-top: var(--space-3); }
.pour-video { width: 100%; aspect-ratio: 1; border-radius: 20px; background: #05080c; display: block; }
.pour-play { position: absolute; right: var(--space-2); bottom: var(--space-2); font: 600 0.95rem var(--font-body); color: var(--bg); background: var(--text); border: 0; border-radius: var(--radius); padding: 0.6rem 1.1rem; min-height: 44px; cursor: pointer; }
.visit-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--space-3) var(--space-4); margin: var(--space-3) 0; }
.visit h3 { font-size: 1.2rem; margin: var(--space-2) 0 0.3rem; }
.visit h3:first-child { margin-top: 0; }
.hours { border-collapse: collapse; width: 100%; max-width: 26rem; align-self: start; }
.hours caption { text-align: left; font-family: var(--font-heading); font-weight: 700; font-size: 1.2rem; margin-bottom: 0.3rem; }
.hours th, .hours td { text-align: left; padding: 0.4rem 0.6rem 0.4rem 0; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.hours th { font-weight: 600; }
.hours tr.is-today th, .hours tr.is-today td { color: var(--accent); }
.today-badge { margin-left: 0.4rem; padding: 0 0.5rem; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; border: 1px solid currentColor; border-radius: var(--radius); }
.visit address { font-style: normal; }
.visit-notes { list-style: none; display: grid; gap: 0.3rem; color: var(--muted); }
.visit-media { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); margin: var(--space-3) 0 var(--space-4); }
.visit-map svg { display: block; width: 100%; height: auto; border-radius: 14px; }
@media (max-width: 767px) { .visit-media { grid-template-columns: 1fr; } }
/* This week */
.week-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: var(--space-4); margin-top: var(--space-3); }
.week-grid h3 { font-size: 1.3rem; margin-bottom: var(--space-2); }
.week-list { list-style: none; display: grid; gap: var(--space-2); }
.week-item { display: grid; grid-template-columns: 9rem 1fr; gap: 0 var(--space-2); padding-bottom: var(--space-2); border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.week-when { grid-row: span 2; font-weight: 600; }
.week-date { display: block; min-height: 1.4em; color: var(--muted); font-weight: 500; font-size: 0.9rem; } /* reserved before it is filled */
.week-what { font-family: var(--font-heading); font-weight: 700; }
.week-detail { color: var(--muted); }
.week-item.is-closed .week-what { color: var(--muted); }
@media (max-width: 404px) { .week-item { grid-template-columns: 1fr; } .week-when { grid-row: auto; } }
.cta-copy { font-family: var(--font-heading); font-weight: 700; font-size: 1.4rem; }
.cta { display: inline-flex; align-items: center; min-height: 44px; margin-top: var(--space-2); padding: 0.8rem 1.5rem; border-radius: var(--radius); background: var(--accent); color: var(--bg); font-weight: 700; text-decoration: none; }

.not-found { min-height: 100svh; display: grid; place-content: center; text-align: center; gap: var(--space-2); padding: 4%; }
.not-found h1 { font-size: clamp(3rem, 10vw, 7rem); }
.not-found p { color: var(--muted); }

/* Photos (Brew Lab renders): fixed 3:2 boxes, so lazy loading never shifts the page. */
.taproom-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); margin-top: var(--space-4); }
.taproom-photos img, .story-photo img, .visit-photo img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 14px; background: #0b1117; }
figcaption { margin-top: 0.4rem; color: var(--muted); font-size: 0.9rem; }
.house-notes { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-1); margin-top: var(--space-3); }
.house-notes li { padding: 0.4rem 0.9rem; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: var(--radius); }
@media (max-width: 767px) { .taproom-photos { grid-template-columns: 1fr; } }

/* Our story */
.story { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--space-4); align-items: center; }
.story-copy p { max-width: 36rem; margin-top: var(--space-2); color: var(--muted); }
.story-facts { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-3); }
/* A big number over a small label, so a fact reads as a measurement, not a second name. */
.story-facts li { color: var(--muted); font-size: 0.95rem; }
.story-facts strong { display: block; font-family: var(--font-heading); font-size: 2.2rem; line-height: 1.1; color: var(--accent); }
@media (max-width: 900px) { .story { grid-template-columns: 1fr; } }