/* ============================================================
   DBC — Dubrovačka pivovara
   Monochrome system. Black is the surface, white is everything
   else: type, rules, frames, the compass.
   ============================================================ */

/* ── 1. Tokens ─────────────────────────────────────────────── */
:root {
  /* Surface */
  --ink:         #000000;
  --ink-raise:   #0a0a0a;
  --ink-panel:   #101010;

  /* Marks */
  --chalk:       #ffffff;
  --mist:        rgba(255, 255, 255, 0.80);
  --dust:        rgba(255, 255, 255, 0.56);
  --ghost:       rgba(255, 255, 255, 0.20);
  --rule:        rgba(255, 255, 255, 0.16);
  --rule-strong: rgba(255, 255, 255, 0.42);
  --wash:        rgba(255, 255, 255, 0.06);
  --gold:        #F0B429;   /* oznake u drugom redu specifikacija */

  /* Type */
  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --body:    "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --mono:    "Space Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --fs-mega:  clamp(3.1rem, 10.5vw, 10.5rem);
  --fs-xxl:   clamp(2.6rem, 7vw, 6.5rem);
  --fs-xl:    clamp(2.1rem, 4.6vw, 4rem);
  --fs-lg:    clamp(1.5rem, 2.6vw, 2.3rem);
  --fs-md:    clamp(1.05rem, 1.35vw, 1.25rem);
  --fs-base:  1rem;
  --fs-sm:    0.875rem;
  --fs-xs:    0.72rem;

  /* Space */
  --gutter:   clamp(18px, 3vw, 72px);
  --section:  clamp(46px, 5.5vw, 92px);
  --stack:    clamp(28px, 4vw, 56px);
  --maxw:     min(100%, 2560px);

  /* Motion */
  --ease:      cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in:   cubic-bezier(0.62, 0.05, 0.36, 1);
  --t-fast:    0.24s;
  --t-mid:     0.55s;
  --t-slow:    0.9s;

  --nav-h: 78px;
}

/* ── 2. Reset ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 24px);
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--chalk);
  font-family: var(--body);
  font-size: var(--fs-base);
  line-height: 1.62;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

img, svg, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease);
}

h1, h2, h3, h4 { margin: 0; font-weight: 800; line-height: 0.94; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

::selection { background: var(--chalk); color: var(--ink); }

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

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--ink); }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.22); }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.4); }

/* ── 3. Type primitives ────────────────────────────────────── */
.display {
  font-family: var(--display);
  font-stretch: 118%;
  text-transform: uppercase;
  letter-spacing: -0.022em;
}

.display--wide { font-stretch: 128%; }
.display--tight { font-stretch: 86%; }

.eyebrow {
  font-family: var(--mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--dust);
  margin: 0;
}

.lead {
  font-size: var(--fs-md);
  color: var(--mist);
  max-width: 62ch;
}

.data {
  font-family: var(--mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.rule { height: 1px; background: var(--rule); border: 0; margin: 0; }

/* ── 4. Layout ─────────────────────────────────────────────── */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section); position: relative; }
.section--tight { padding-block: clamp(34px, 4vw, 60px); }
.section--edge { border-top: 1px solid var(--rule); }

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(20px, 3vw, 48px);
  margin-bottom: var(--stack);
}

.section-head__title { font-size: var(--fs-xxl); }
.section-head__aside { max-width: 46ch; }

/* Grain + vignette. Cheap atmosphere, no images. */
.grain {
  position: fixed;
  inset: 0;
  z-index: 9000;
  pointer-events: none;
  opacity: 0.045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── 5. Buttons & links ────────────────────────────────────── */
.btn {
  --btn-fg: var(--chalk);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.75em;
  padding: 1.05em 1.9em;
  border: 1px solid var(--rule-strong);
  color: var(--btn-fg);
  font-family: var(--mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  overflow: hidden;
  isolation: isolate;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}

.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--chalk);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--t-mid) var(--ease);
}

.btn:hover, .btn:focus-visible { color: var(--ink); border-color: var(--chalk); }
.btn:hover::before, .btn:focus-visible::before { transform: scaleX(1); }
.btn:active { transform: translateY(1px); }

.btn__arrow { transition: transform var(--t-mid) var(--ease); }
.btn:hover .btn__arrow { transform: translateX(5px); }

.btn--solid { background: var(--chalk); color: var(--ink); border-color: var(--chalk); }
.btn--solid::before { background: var(--ink); }
.btn--solid:hover { color: var(--chalk); }

.btn--sm { padding: 0.85em 1.4em; }

/* Text link with a sweeping rule */
.link {
  position: relative;
  display: inline-block;
  font-family: var(--mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding-bottom: 6px;
}

.link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform var(--t-mid) var(--ease);
}

.link:hover::after, .link:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left center;
}

/* ── 6. Navigation ─────────────────────────────────────────── */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10000;
  padding: 14px 20px;
  background: var(--chalk);
  color: var(--ink);
}
.skip:focus { left: 12px; top: 12px; }

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 800;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  border-bottom: 1px solid transparent;
  transition: height var(--t-mid) var(--ease),
              background-color var(--t-mid) var(--ease),
              border-color var(--t-mid) var(--ease),
              backdrop-filter var(--t-mid) var(--ease);
}

.nav.is-stuck {
  height: 62px;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(14px) saturate(120%);
  border-bottom-color: var(--rule);
}

.nav.is-hidden { transform: translateY(-100%); }
.nav { transition-property: height, background-color, border-color, transform; }

.nav__inner {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

/* Wordmark */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.brand__rose {
  width: 30px;
  height: 30px;
  transition: transform 1.2s var(--ease);
}
.brand:hover .brand__rose { transform: rotate(180deg); }

.brand__text { display: flex; flex-direction: column; line-height: 1; }

.brand__mark {
  font-family: var(--display);
  font-stretch: 128%;
  font-weight: 900;
  font-size: 1.18rem;
  letter-spacing: 0.06em;
}

.brand__sub {
  font-family: var(--mono);
  font-size: 0.55rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--dust);
  margin-top: 3px;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.2vw, 38px);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav__link {
  position: relative;
  font-family: var(--mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mist);
  padding: 6px 0;
}

.nav__link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--chalk);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform var(--t-mid) var(--ease);
}

.nav__link:hover, .nav__link:focus-visible, .nav__link.is-active { color: var(--chalk); }
.nav__link:hover::after, .nav__link:focus-visible::after, .nav__link.is-active::after {
  transform: scaleX(1);
  transform-origin: left center;
}

.nav__side { display: flex; align-items: center; gap: 16px; }

.lang-switch {
  font-family: var(--mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.16em;
  color: var(--dust);
  border: 1px solid var(--rule);
  padding: 7px 11px;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.lang-switch:hover { color: var(--ink); background: var(--chalk); border-color: var(--chalk); }

/* Burger */
.burger {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--rule);
}
.burger__bars { display: block; width: 20px; height: 12px; position: relative; }
.burger__bars::before, .burger__bars::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%; height: 1px;
  background: var(--chalk);
  transition: transform var(--t-mid) var(--ease), opacity var(--t-fast) var(--ease);
}
.burger__bars::before { top: 0; }
.burger__bars::after { bottom: 0; }
body.menu-open .burger__bars::before { transform: translateY(5.5px) rotate(45deg); }
body.menu-open .burger__bars::after { transform: translateY(-5.5px) rotate(-45deg); }

/* Mobile drawer */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 780;
  background: var(--ink);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: calc(var(--nav-h) + 24px) var(--gutter) 40px;
  clip-path: inset(0 0 100% 0);
  transition: clip-path var(--t-slow) var(--ease);
  visibility: hidden;
}

body.menu-open .drawer { clip-path: inset(0 0 0 0); visibility: visible; }

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

.drawer__item {
  border-bottom: 1px solid var(--rule);
  overflow: hidden;
}

.drawer__link {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding: clamp(14px, 2.6vh, 26px) 0;
  font-family: var(--display);
  font-stretch: 118%;
  font-weight: 800;
  font-size: clamp(2rem, 9vw, 3.4rem);
  text-transform: uppercase;
  transform: translateY(110%);
  transition: transform 0.75s var(--ease), opacity var(--t-mid) var(--ease);
  opacity: 0;
}

body.menu-open .drawer__link {
  transform: translateY(0);
  opacity: 1;
  transition-delay: calc(0.06s * var(--i) + 0.12s);
}

.drawer__index {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  color: var(--dust);
}

.drawer__foot {
  margin-top: clamp(24px, 5vh, 56px);
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  align-items: center;
}

/* ── 7. Page curtain (route transitions) ───────────────────── */
.curtain {
  position: fixed;
  inset: 0;
  z-index: 9500;
  background: var(--ink);
  transform: translateY(100%);
  pointer-events: none;
}

.curtain.is-in  { animation: curtain-in 0.62s var(--ease-in) forwards; }
.curtain.is-out { animation: curtain-out 0.72s var(--ease) forwards; }

@keyframes curtain-in  { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes curtain-out { from { transform: translateY(0); }    to { transform: translateY(-100%); } }

/* ── 8. Hero slider ────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  border-bottom: 1px solid var(--rule);
}

.hero__stage {
  position: absolute;
  inset: 0;
}

/* Backdrop: a slowly drifting rose, unique offset per slide */
.hero__backdrop {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.1s var(--ease), transform 1.6s var(--ease);
  transform: scale(1.08);
  display: grid;
  place-items: center;
}

.hero__backdrop svg {
  width: min(96vh, 92vw);
  height: auto;
  opacity: 0.10;
}

.hero__slide.is-active .hero__backdrop { opacity: 1; transform: scale(1); }

.hero__slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  pointer-events: none;
  visibility: hidden;
}

.hero__slide.is-active { pointer-events: auto; visibility: visible; }

.hero__content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding: 0 var(--gutter) clamp(96px, 14vh, 168px);
}

.hero__inner { max-width: 22ch; }

/* Each line lifts in with its own delay */
.hero__line { overflow: hidden; display: block; }

.hero__anim {
  display: block;
  transform: translateY(115%);
  opacity: 0;
  transition: transform 0.95s var(--ease), opacity 0.7s var(--ease);
}

.hero__slide.is-active .hero__anim {
  transform: translateY(0);
  opacity: 1;
  transition-delay: calc(0.085s * var(--d, 0) + 0.16s);
}

.hero__meta {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: clamp(16px, 2.4vw, 28px);
}

.hero__cat {
  font-family: var(--mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  padding: 6px 12px;
  border: 1px solid var(--rule-strong);
}

.hero__date { font-family: var(--mono); font-size: var(--fs-xs); color: var(--dust); letter-spacing: 0.12em; }

.hero__title {
  font-family: var(--display);
  font-stretch: 116%;
  font-weight: 800;
  font-size: var(--fs-xxl);
  line-height: 0.92;
  text-transform: uppercase;
  letter-spacing: -0.028em;
  margin-bottom: clamp(16px, 2vw, 26px);
  max-width: 18ch;
}

.hero__excerpt {
  font-size: var(--fs-md);
  color: var(--mist);
  max-width: 46ch;
  margin-bottom: clamp(24px, 3vw, 38px);
}

/* Story-style progress ticks */
.hero__ticks {
  position: absolute;
  top: calc(var(--nav-h) + 18px);
  left: var(--gutter);
  right: var(--gutter);
  z-index: 5;
  display: flex;
  gap: 6px;
  max-width: var(--maxw);
  margin-inline: auto;
}

.hero__tick {
  flex: 1;
  height: 2px;
  background: var(--ghost);
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: height var(--t-fast) var(--ease);
}
.hero__tick:hover { height: 4px; }

.hero__tick span {
  position: absolute;
  inset: 0;
  background: var(--chalk);
  transform-origin: left center;
  transform: scaleX(0);
}

.hero__tick.is-done span { transform: scaleX(1); }
.hero__tick.is-active span { animation: tick var(--dur, 7s) linear forwards; }
body.is-paused .hero__tick.is-active span { animation-play-state: paused; }

@keyframes tick { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Controls */
.hero__controls {
  position: absolute;
  right: var(--gutter);
  bottom: clamp(96px, 14vh, 168px);
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 10px;
}

.hero__arrow {
  width: 62px;
  height: 62px;
  border: 1px solid var(--rule-strong);
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.hero__arrow::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--chalk);
  transform: translateY(100%);
  transition: transform var(--t-mid) var(--ease);
}

.hero__arrow:hover { color: var(--ink); border-color: var(--chalk); }
.hero__arrow:hover::before { transform: translateY(0); }
.hero__arrow svg { width: 20px; height: 20px; }

.hero__count {
  font-family: var(--mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.16em;
  color: var(--dust);
  min-width: 74px;
  text-align: right;
}

/* Bottom rail: scroll cue + tap room status */
.hero__rail {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 6;
  border-top: 1px solid var(--rule);
  background: rgba(0,0,0,0.35);
  backdrop-filter: blur(6px);
}

.hero__rail-inner {
  max-width: var(--maxw);
  margin-inline: auto;
  padding: 14px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  font-family: var(--mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dust);
}

.status { display: inline-flex; align-items: center; gap: 9px; color: var(--mist); }

.status__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--chalk);
  position: relative;
}
.status__dot::after {
  content: "";
  position: absolute;
  inset: -4px;
  border: 1px solid var(--chalk);
  border-radius: 50%;
  animation: ping 2.6s var(--ease) infinite;
}
.status--closed .status__dot { background: var(--ghost); }
.status--closed .status__dot::after { display: none; }

@keyframes ping {
  0%   { transform: scale(0.6); opacity: 0.9; }
  70%  { transform: scale(1.5); opacity: 0; }
  100% { transform: scale(1.5); opacity: 0; }
}

.scroll-cue { display: inline-flex; align-items: center; gap: 10px; }
.scroll-cue__line {
  width: 46px; height: 1px;
  background: var(--rule-strong);
  position: relative;
  overflow: hidden;
}
.scroll-cue__line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--chalk);
  transform: translateX(-100%);
  animation: cue 2.4s var(--ease) infinite;
}
@keyframes cue {
  0%   { transform: translateX(-100%); }
  60%  { transform: translateX(100%); }
  100% { transform: translateX(100%); }
}

/* ── 9. Ticker ─────────────────────────────────────────────── */
.ticker {
  border-block: 1px solid var(--rule);
  overflow: hidden;
  padding-block: 18px;
}

.ticker__track {
  display: flex;
  width: max-content;
  animation: marquee 42s linear infinite;
}
.ticker:hover .ticker__track { animation-play-state: paused; }

.ticker__item {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  padding-inline: 26px;
  font-family: var(--display);
  font-stretch: 128%;
  font-weight: 700;
  font-size: clamp(1.1rem, 1.7vw, 1.6rem);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--mist);
  white-space: nowrap;
}

.ticker__item b { font-family: var(--mono); font-size: 0.62em; font-weight: 400; color: var(--dust); letter-spacing: 0.16em; }
.ticker__sep { opacity: 0.35; }

@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ── 10. Beers: the compass selector ───────────────────────── */
.range {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(30px, 5vw, 88px);
  align-items: center;
}

/* Left: rose + bottle */
.rose-stage {
  position: relative;
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  border: 1px solid var(--rule);
}

.rose-stage::before,
.rose-stage::after {
  content: "";
  position: absolute;
  background: var(--rule);
}
.rose-stage::before { left: 0; right: 0; top: 50%; height: 1px; }
.rose-stage::after  { top: 0; bottom: 0; left: 50%; width: 1px; }

.rose {
  position: absolute;
  width: 86%;
  height: 86%;
  opacity: 0.5;
}

.rose__ring { transition: transform 1.4s var(--ease); transform-origin: 50% 50%; }

.rose__needle {
  transform-origin: 50% 50%;
  transform: rotate(var(--bearing, 0deg));
  transition: transform 1.25s var(--ease);
}

.rose-stage__label {
  position: absolute;
  bottom: 18px;
  left: 18px;
  font-family: var(--mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.2em;
  color: var(--dust);
}

.rose-stage__deg {
  position: absolute;
  top: 18px;
  right: 18px;
  font-family: var(--mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.2em;
  color: var(--dust);
}

/* Bottle sits on top of the rose and swaps with the selection */
.bottle {
  position: relative;
  z-index: 2;
  height: 74%;
  width: auto;
  transition: opacity var(--t-mid) var(--ease), transform var(--t-mid) var(--ease);
}
.bottle.is-swapping { opacity: 0; transform: translateY(14px) scale(0.97); }

/* Right: the list */
.range__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }

.range__row { border-bottom: 1px solid var(--rule); }

.range__btn {
  width: 100%;
  display: grid;
  /* Index, then name and style. The bearing column was removed — it is
     still shown in the corner of the compass. */
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: clamp(14px, 2vw, 28px);
  padding: clamp(16px, 2.2vw, 26px) 0;
  text-align: left;
  position: relative;
  color: var(--mist);
  transition: color var(--t-mid) var(--ease), padding-left var(--t-mid) var(--ease);
}

.range__btn::before {
  content: "";
  position: absolute;
  left: -100vw; right: -100vw; top: 0; bottom: 0;
  background: var(--wash);
  opacity: 0;
  transition: opacity var(--t-mid) var(--ease);
  z-index: -1;
}

.range__btn:hover { color: var(--chalk); padding-left: 14px; }
.range__btn:hover::before { opacity: 1; }

.range__row.is-active .range__btn { color: var(--chalk); padding-left: 14px; }
.range__row.is-active .range__btn::before { opacity: 1; }

.range__idx {
  font-family: var(--mono);
  font-size: var(--fs-xs);
  color: var(--dust);
  letter-spacing: 0.12em;
}

.range__name {
  font-family: var(--display);
  font-stretch: 122%;
  font-weight: 800;
  font-size: clamp(1.7rem, 3.4vw, 3rem);
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: -0.02em;
}

.range__style {
  display: block;
  font-family: var(--mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dust);
  margin-top: 8px;
}

/* Detail panel under the list */
.range__detail {
  margin-top: clamp(22px, 3vw, 34px);
  min-height: 190px;
}

.range__detail-body {
  transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.range__detail-body.is-swapping { opacity: 0; transform: translateY(10px); }

.range__wind {
  font-family: var(--display);
  font-stretch: 108%;
  font-size: var(--fs-lg);
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: -0.01em;
  margin-bottom: 14px;
}

.range__copy { color: var(--mist); max-width: 54ch; margin-bottom: 22px; }

.specs {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border-top: 1px solid var(--rule);
  margin-bottom: 26px;
}

.spec {
  flex: 1 1 90px;
  padding: 14px 16px 14px 0;
  border-right: 1px solid var(--rule);
}
.spec:last-child { border-right: 0; }
.spec:not(:first-child) { padding-left: 16px; }

.spec__k {
  display: block;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--dust);
  margin-bottom: 7px;
}

.spec__v {
  font-family: var(--display);
  font-stretch: 116%;
  font-weight: 700;
  font-size: 1.34rem;
  letter-spacing: -0.01em;
}

/* ── 11. Beers index grid ──────────────────────────────────── */
.beer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
}

.beer-card {
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: clamp(22px, 2.6vw, 38px);
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: relative;
  isolation: isolate;
  min-height: 460px;
  overflow: hidden;
}

.beer-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--wash);
  transform: translateY(101%);
  transition: transform var(--t-mid) var(--ease);
}
.beer-card:hover::before { transform: translateY(0); }

.beer-card__art {
  flex: 1;
  display: grid;
  place-items: center;
  min-height: 190px;
}
.beer-card__art svg {
  height: clamp(150px, 22vh, 230px);
  width: auto;
  transition: transform var(--t-slow) var(--ease);
}
.beer-card:hover .beer-card__art svg { transform: translateY(-8px) rotate(-2deg); }

.beer-card__name {
  font-family: var(--display);
  font-stretch: 122%;
  font-weight: 800;
  font-size: clamp(1.7rem, 2.4vw, 2.3rem);
  text-transform: uppercase;
  line-height: 1;
}

.beer-card__meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dust);
  border-top: 1px solid var(--rule);
  padding-top: 14px;
}

/* ── 12. Beer detail page ──────────────────────────────────── */
.beer-hero {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(30px, 5vw, 80px);
  align-items: center;
  padding-top: clamp(40px, 6vw, 80px);
}

.beer-hero__art {
  position: relative;
  border: 1px solid var(--rule);
  aspect-ratio: 3 / 4;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.beer-hero__art .rose {
  width: 120%;
  height: 120%;
  opacity: 0.16;
}

.beer-hero__art svg.bottle { height: 72%; }

.beer-hero__name {
  font-family: var(--display);
  font-stretch: 124%;
  font-weight: 900;
  font-size: var(--fs-mega);
  line-height: 0.84;
  text-transform: uppercase;
  letter-spacing: -0.038em;
  margin-block: 10px 18px;
}

.beer-notes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
}

.beer-note {
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: clamp(20px, 2.4vw, 32px);
}

.beer-note__k {
  display: block;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--dust);
  margin-bottom: 12px;
}

.beer-note__v { font-size: var(--fs-md); }

/* ── 13. Story & stats ─────────────────────────────────────── */
.story {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 90px);
  align-items: start;
}

.story__title {
  font-size: var(--fs-xl);
  line-height: 1;
  margin-bottom: 22px;
}

.story__quote {
  font-family: var(--display);
  font-stretch: 106%;
  font-weight: 700;
  font-size: var(--fs-lg);
  line-height: 1.2;
  letter-spacing: -0.015em;
  padding-left: clamp(18px, 2vw, 28px);
  border-left: 1px solid var(--rule-strong);
  margin-block: clamp(26px, 3vw, 40px);
}

.story__quote cite {
  display: block;
  margin-top: 14px;
  font-family: var(--mono);
  font-size: var(--fs-xs);
  font-style: normal;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dust);
}

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
  margin-top: var(--stack);
}

.stat {
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: clamp(22px, 3vw, 38px) clamp(18px, 2vw, 28px);
}

.stat__v {
  font-family: var(--display);
  font-stretch: 122%;
  font-weight: 800;
  font-size: clamp(2.1rem, 4vw, 3.4rem);
  line-height: 1;
  letter-spacing: -0.03em;
  display: block;
  margin-bottom: 12px;
}

.stat__k {
  font-family: var(--mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dust);
}

/* ── 14. Tap room ──────────────────────────────────────────── */
.tap {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(30px, 5vw, 80px);
  align-items: start;
}

.taplist { border-top: 1px solid var(--rule); }

.taplist__row {
  display: grid;
  grid-template-columns: 54px 1fr auto;
  gap: 16px;
  align-items: baseline;
  padding: 15px 0;
  border-bottom: 1px solid var(--rule);
  transition: padding-left var(--t-mid) var(--ease), background-color var(--t-mid) var(--ease);
}
.taplist__row:hover { padding-left: 12px; background: var(--wash); }

.taplist__line { font-family: var(--mono); font-size: var(--fs-xs); color: var(--dust); letter-spacing: 0.12em; }

.taplist__name {
  font-family: var(--display);
  font-stretch: 116%;
  font-weight: 700;
  font-size: 1.24rem;
  text-transform: uppercase;
  letter-spacing: -0.005em;
}

.taplist__style { font-family: var(--mono); font-size: var(--fs-xs); color: var(--dust); letter-spacing: 0.14em; text-transform: uppercase; }
.taplist__abv { font-family: var(--mono); font-size: var(--fs-xs); letter-spacing: 0.1em; color: var(--mist); }

.info-block { border-top: 1px solid var(--rule); padding-top: 20px; margin-bottom: 30px; }
.info-block__k {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--dust);
  margin-bottom: 12px;
  display: block;
}
.info-block__v { font-size: var(--fs-md); line-height: 1.5; }

.hours-list { list-style: none; margin: 0; padding: 0; }
.hours-list li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 0;
  border-bottom: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: var(--fs-sm);
  color: var(--mist);
}
.hours-list li.is-today { color: var(--chalk); }
.hours-list li.is-today::before {
  content: "▸";
  position: absolute;
  margin-left: -18px;
  font-size: 0.7em;
}

/* ── 15. News ──────────────────────────────────────────────── */
.news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
}

.news-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: clamp(24px, 3vw, 42px);
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  isolation: isolate;
  overflow: hidden;
  min-height: 320px;
}

.news-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--wash);
  transform: translateY(101%);
  transition: transform var(--t-mid) var(--ease);
}
.news-card:hover::before { transform: translateY(0); }

.news-card__meta {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dust);
}

.news-card__title {
  font-family: var(--display);
  font-stretch: 112%;
  font-weight: 800;
  font-size: clamp(1.35rem, 2vw, 1.85rem);
  line-height: 1.02;
  text-transform: uppercase;
  letter-spacing: -0.02em;
}

.news-card__excerpt { color: var(--mist); font-size: var(--fs-sm); }

.news-card__go {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--dust);
  transition: color var(--t-fast) var(--ease), gap var(--t-mid) var(--ease);
}
.news-card:hover .news-card__go { color: var(--chalk); gap: 20px; }

/* Article */
.article { max-width: 74ch; margin-inline: auto; padding-top: clamp(30px, 5vw, 60px); }

.article__title {
  font-family: var(--display);
  font-stretch: 118%;
  font-weight: 800;
  font-size: var(--fs-xl);
  line-height: 0.98;
  text-transform: uppercase;
  letter-spacing: -0.028em;
  margin-block: 18px 24px;
}

.article__body { font-size: var(--fs-md); color: var(--mist); }
.article__body p { margin-bottom: 1.25em; }
.article__body p:first-of-type { color: var(--chalk); font-size: 1.1em; }

.article__foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 18px;
  border-top: 1px solid var(--rule);
  margin-top: clamp(36px, 5vw, 60px);
  padding-top: 24px;
}

/* ── 16. Forms ─────────────────────────────────────────────── */
.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: clamp(16px, 2vw, 26px);
}

.field { display: flex; flex-direction: column; gap: 9px; }
.field--full { grid-column: 1 / -1; }

.field__label {
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--dust);
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.field__input {
  appearance: none;
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rule);
  padding: 12px 0;
  font-size: var(--fs-base);
  transition: border-color var(--t-mid) var(--ease), background-color var(--t-mid) var(--ease);
}

.field__input::placeholder { color: var(--ghost); }
.field__input:hover { border-bottom-color: var(--rule-strong); }
.field__input:focus { outline: none; border-bottom-color: var(--chalk); }
.field__input:focus-visible { outline: none; }

textarea.field__input { resize: vertical; min-height: 118px; }

select.field__input {
  background-image: linear-gradient(45deg, transparent 50%, var(--mist) 50%),
                    linear-gradient(135deg, var(--mist) 50%, transparent 50%);
  background-position: right 10px center, right 5px center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 26px;
}
select.field__input option { background: var(--ink-panel); color: var(--chalk); }

.field.has-error .field__input { border-bottom-color: var(--chalk); }
.field__error {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  color: var(--chalk);
  min-height: 0;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.field.has-error .field__error { opacity: 1; transform: translateY(0); }

.form-note {
  margin-top: 18px;
  font-family: var(--mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.12em;
  color: var(--dust);
}

.form-status {
  margin-top: 22px;
  border: 1px solid var(--rule-strong);
  padding: 16px 20px;
  font-family: var(--mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  display: none;
}
.form-status.is-shown { display: block; animation: fade-up 0.5s var(--ease) both; }
.form-status.is-ok { background: var(--chalk); color: var(--ink); border-color: var(--chalk); }

@keyframes fade-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* Newsletter strip */
.nl {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(26px, 4vw, 70px);
  align-items: end;
}

.nl__form { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; }
.nl__form .field { flex: 1 1 240px; }

/* ── 17. Footer ────────────────────────────────────────────── */
.footer { border-top: 1px solid var(--rule); padding-top: clamp(50px, 7vw, 90px); }

.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(auto-fit, minmax(150px, 1fr));
  gap: clamp(30px, 4vw, 60px);
  padding-bottom: clamp(40px, 6vw, 70px);
}

.footer__mark {
  font-family: var(--display);
  font-stretch: 128%;
  font-weight: 900;
  font-size: clamp(2.4rem, 6vw, 4.6rem);
  line-height: 0.86;
  text-transform: uppercase;
  letter-spacing: -0.035em;
  margin-bottom: 18px;
}

.footer__col h4 {
  font-family: var(--mono);
  font-size: 0.64rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--dust);
  margin-bottom: 18px;
}

.footer__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.footer__list a { color: var(--mist); font-size: var(--fs-sm); }
.footer__list a:hover { color: var(--chalk); }

.footer__bar {
  border-top: 1px solid var(--rule);
  padding-block: 22px 30px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 14px 26px;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dust);
}

/* Oversized wordmark strip above the footer columns */
.footer__banner {
  overflow: hidden;
  border-bottom: 1px solid var(--rule);
  padding-bottom: clamp(20px, 3vw, 34px);
  margin-bottom: clamp(40px, 5vw, 64px);
}

.footer__banner span {
  display: block;
  font-family: var(--display);
  font-stretch: 128%;
  font-weight: 900;
  font-size: clamp(1.6rem, 8.4vw, 8.4rem);
  line-height: 0.86;
  text-transform: uppercase;
  letter-spacing: -0.05em;
  white-space: nowrap;
}

/* ── 18. Page header (interior pages) ──────────────────────── */
.page-head {
  padding-top: calc(var(--nav-h) + clamp(50px, 9vw, 130px));
  padding-bottom: clamp(34px, 5vw, 64px);
  border-bottom: 1px solid var(--rule);
}

.page-head__title {
  font-family: var(--display);
  font-stretch: 124%;
  font-weight: 900;
  font-size: var(--fs-mega);
  line-height: 0.82;
  text-transform: uppercase;
  letter-spacing: -0.04em;
  margin-block: 16px 0;
}

.crumbs {
  display: flex;
  gap: 10px;
  align-items: center;
  font-family: var(--mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dust);
}
.crumbs a:hover { color: var(--chalk); }

/* ── 19. Scroll reveal ─────────────────────────────────────── */
[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.8s var(--ease), transform 0.9s var(--ease);
  transition-delay: calc(var(--rd, 0) * 0.08s);
}
[data-reveal].is-visible { opacity: 1; transform: none; }

[data-reveal="mask"] {
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.05s var(--ease);
}
[data-reveal="mask"].is-visible { clip-path: inset(0 0 0 0); }

[data-reveal="line"] {
  opacity: 1;
  transform: none;
  transform-origin: left center;
  scale: 0 1;
  transition: scale 1.1s var(--ease);
}
[data-reveal="line"].is-visible { scale: 1 1; }

/* ── 20. Responsive ────────────────────────────────────────── */
@media (max-width: 1080px) {
  .range { grid-template-columns: 1fr; }
  .rose-stage { max-width: 460px; margin-inline: auto; width: 100%; }
  .story, .tap, .nl, .beer-hero { grid-template-columns: 1fr; }
  .beer-hero__art { max-width: 380px; }
}

@media (max-width: 860px) {
  :root { --nav-h: 66px; }

  .nav__links { display: none; }
  .burger { display: inline-flex; }

  .hero { min-height: 100svh; }
  .hero__content { padding-bottom: clamp(120px, 20vh, 190px); }
  .hero__controls { left: var(--gutter); right: auto; bottom: clamp(74px, 12vh, 120px); }
  .hero__arrow { width: 54px; height: 54px; }
  .hero__count { display: none; }
  .hero__title { font-size: clamp(2.3rem, 10vw, 3.4rem); }
  .hero__rail-inner { justify-content: center; }
  .scroll-cue { display: none; }

  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__col--wide { grid-column: 1 / -1; }

  .beer-card { min-height: 380px; }
  .specs { flex-wrap: wrap; }
  .spec { flex: 1 1 44%; border-bottom: 1px solid var(--rule); }
}

@media (max-width: 560px) {
  .section-head { flex-direction: column; align-items: flex-start; }
  .footer__grid { grid-template-columns: 1fr; }
  .taplist__row { grid-template-columns: 40px 1fr; }
  .taplist__abv { grid-column: 2; }
  .range__btn { grid-template-columns: auto 1fr; }
    .hero__ticks { top: calc(var(--nav-h) + 12px); }
}

/* ── 21. Reduced motion & print ────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  [data-reveal] { opacity: 1 !important; transform: none !important; clip-path: none !important; scale: 1 1 !important; }
  .hero__anim { opacity: 1; transform: none; }
  .ticker__track { animation: none; }
  .curtain { display: none; }
}

@media print {
  .nav, .hero__controls, .hero__ticks, .grain, .curtain, .footer__banner { display: none !important; }
  body { background: #fff; color: #000; }
}

/* ── 22. Additions: stacked bottles, swap panels, tours, map ── */

/* Bottle stack inside the rose stage — all four exist, one shows. */
.bottle-stack {
  position: relative;
  z-index: 2;
  height: 74%;
  width: 100%;
  display: grid;
  place-items: center;
}

.bottle-stack .bottle {
  grid-area: 1 / 1;
  height: 100%;
  opacity: 0;
  transform: translateY(18px) scale(0.96);
  transition: opacity var(--t-mid) var(--ease), transform 0.7s var(--ease);
  pointer-events: none;
}

.bottle-stack .bottle.is-active {
  opacity: 1;
  transform: none;
}

/* Detail panels stack in one grid cell and cross-fade. */
.range__panels { display: grid; }

.range__panel {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity var(--t-mid) var(--ease), transform var(--t-mid) var(--ease), visibility 0s linear var(--t-mid);
}

.range__panel.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity var(--t-mid) var(--ease) 0.06s, transform 0.7s var(--ease) 0.06s, visibility 0s;
}

/* Tours */
.tours {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
}

.tour {
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: clamp(24px, 3vw, 40px);
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.tour::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--wash);
  transform: translateY(101%);
  transition: transform var(--t-mid) var(--ease);
}
.tour:hover::before { transform: translateY(0); }

.tour__title {
  font-family: var(--display);
  font-stretch: 118%;
  font-weight: 800;
  font-size: clamp(1.4rem, 2vw, 1.9rem);
  text-transform: uppercase;
  line-height: 1;
}

.tour__meta {
  display: flex;
  gap: 16px;
  font-family: var(--mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dust);
}

.tour__desc { color: var(--mist); font-size: var(--fs-sm); }

/* Map frame */
.map-frame {
  border: 1px solid var(--rule);
  aspect-ratio: 16 / 10;
  width: 100%;
  overflow: hidden;
  position: relative;
  background: var(--ink-raise);
}

.map-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
  filter: grayscale(1) invert(0.92) contrast(1.08) brightness(0.92);
  transition: filter var(--t-slow) var(--ease), transform var(--t-slow) var(--ease);
}
.map-frame:hover iframe { filter: grayscale(1) invert(0.92) contrast(1.2) brightness(1); }

/* Reservation card */
.panel {
  border: 1px solid var(--rule);
  padding: clamp(24px, 3.4vw, 48px);
  background: var(--ink-raise);
}

.panel__title {
  font-family: var(--display);
  font-stretch: 116%;
  font-weight: 800;
  font-size: var(--fs-lg);
  text-transform: uppercase;
  line-height: 1;
  margin-bottom: 12px;
}

/* Two-column split used by the visit page */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(30px, 5vw, 80px);
  align-items: start;
}

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

/* Empty state */
.empty {
  border: 1px solid var(--rule);
  padding: clamp(40px, 6vw, 80px);
  text-align: center;
  color: var(--mist);
}

/* ── 23. Fixes & fine tuning ────────────────────────────────── */

/* Bottle art fills its slot in the stack */
.bottle-stack .bottle svg { height: 100%; width: auto; }

/* The drawer must not swallow clicks once it has slid away */
.drawer { transition: clip-path var(--t-slow) var(--ease), visibility 0s linear var(--t-slow); }
body.menu-open .drawer { transition: clip-path var(--t-slow) var(--ease), visibility 0s; }

/* Icon sizing inside buttons and inline links */
.btn__arrow { display: inline-flex; }
.news-card__go svg { flex: 0 0 auto; }

/* Buttons rendered as .link keep the button reset tidy */
button.link { font-family: var(--mono); letter-spacing: 0.2em; }

/* Selection inside the map frame should not invert */
.map-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
}

/* Very long headlines must never push the page sideways */
.page-head__title,
.hero__title,
.beer-hero__name,
.section-head__title { overflow-wrap: break-word; }

/* ============================================================
   24. Brewhouse revision
   Static hero, real bottle photography, the Instagram feed,
   external-link affordances and the careers list.
   ============================================================ */

/* ── Screen-reader only ────────────────────────────────────── */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ── External-link marker ──────────────────────────────────── */
.out {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  color: var(--dust);
  transition: transform var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.nav__link--out { display: inline-flex; align-items: center; }
.nav__link--out:hover .out,
.footer__list a:hover .out { transform: translate(2px, -2px); color: var(--chalk); }
.drawer__link .out svg { width: 18px; height: 18px; }

/* ── Static hero ───────────────────────────────────────────── */
.hero--static { align-items: center; }

.hero--static .hero__stage { pointer-events: none; }

.hero--static .hero__backdrop {
  opacity: 1;
  transform: none;
  animation: heroRose 2.2s var(--ease) both;
}

@keyframes heroRose {
  from { opacity: 0; transform: scale(1.06); }
  to   { opacity: 1; transform: none; }
}

.hero--static .hero__content {
  padding-block: clamp(120px, 18vh, 200px) clamp(120px, 16vh, 180px);
}

.hero--static .hero__inner { max-width: min(100%, 900px); }

/* The slider used a class swap to animate lines in. With one static
   slide there is nothing to swap, so drive it with a keyframe. */
.hero--static .hero__anim {
  animation: heroLine 0.95s var(--ease) both;
  animation-delay: calc(var(--d, 0) * 0.11s + 0.1s);
}

@keyframes heroLine {
  from { transform: translateY(115%); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

.hero--static .hero__title {
  margin-block: clamp(18px, 2.4vw, 30px) clamp(20px, 2.6vw, 34px);
  /* ch is measured against the headline's own size here, so this is a real
     character count: about 15 characters a line. Turn it to move the break. */
  max-width: 15ch;
}

.hero--static .hero__excerpt { max-width: 46ch; }

.hero__actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: clamp(26px, 3vw, 40px);
}

.hero__where {
  font-size: var(--fs-xs);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--dust);
}

/* Larger status pill, for the hero only */
.status--lg {
  font-size: var(--fs-xs);
  letter-spacing: 0.2em;
  padding: 9px 16px;
}

@media (max-width: 860px) {
  .hero--static .hero__inner { max-width: 100%; }
  .hero--static .hero__content { padding-block: clamp(110px, 16vh, 150px) 120px; }
}

/* ── Bottle photography ────────────────────────────────────── */
/* A transparent PNG drops straight into the same slots the drawings
   used. Kept monochrome so a colour label cannot break the palette. */
.bottle-photo {
  display: block;
  height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  filter: grayscale(1) contrast(1.06) brightness(1.02);
  transition: filter var(--t-mid) var(--ease), transform var(--t-mid) var(--ease);
}

.bottle-stack .bottle img.bottle-photo { height: 100%; width: auto; }

.rose-stage:hover .bottle.is-active .bottle-photo,
.beer-hero__art:hover .bottle-photo { filter: grayscale(1) contrast(1.14) brightness(1.06); }

.beer-hero__art img.bottle { height: 72%; width: auto; }

.beer-card__art img.bottle-art {
  height: 100%;
  width: auto;
  transition: transform var(--t-mid) var(--ease);
}
.beer-card:hover .beer-card__art img.bottle-art { transform: translateY(-8px) rotate(-2deg); }

/* Photos carry their own edges, so soften the drawn hairline grid
   behind them a touch when one is present. */
.rose-stage:has(.bottle-photo) .rose { opacity: 0.42; }

/* ── Instagram feed ────────────────────────────────────────── */
.ig-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
}

.ig-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: clamp(20px, 2.2vw, 30px);
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  isolation: isolate;
  overflow: hidden;
}

.ig-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--wash);
  transform: translateY(101%);
  transition: transform var(--t-mid) var(--ease);
}
.ig-card:hover::before { transform: translateY(0); }

.ig-card__frame {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: 1px solid var(--rule);
  background: var(--ink);
}

.ig-card__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.08);
  transform: scale(1.02);
  transition: transform 1.1s var(--ease), filter var(--t-mid) var(--ease);
}

.ig-card:hover .ig-card__frame img {
  transform: scale(1.07);
  filter: grayscale(1) contrast(1.18);
}

/* No image yet: draw a compass tile so the grid never has a hole. */
.ig-card__blank {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}
.ig-card__blank .rose-tile {
  width: 62%;
  height: 62%;
  opacity: 0.28;
  transition: transform 1.4s var(--ease), opacity var(--t-mid) var(--ease);
}
.ig-card:hover .ig-card__blank .rose-tile { transform: rotate(12deg); opacity: 0.42; }

.ig-card__badge {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  font-size: 10px;
  color: var(--chalk);
  border: 1px solid var(--rule-strong);
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(2px);
}

.ig-card__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dust);
}

.ig-card__title {
  font-family: var(--display);
  font-stretch: 108%;
  font-weight: 700;
  font-size: clamp(1.05rem, 1.5vw, 1.28rem);
  line-height: 1.14;
  letter-spacing: -0.012em;
  color: var(--chalk);
  overflow-wrap: break-word;
}

.ig-card .news-card__go { margin-top: auto; }
.ig-card:hover .news-card__go { color: var(--chalk); gap: 16px; }

/* ── Careers ───────────────────────────────────────────────── */
.jobs {
  border-top: 1px solid var(--rule);
}

.job {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  gap: clamp(16px, 3vw, 40px);
  align-items: start;
  padding: clamp(26px, 3vw, 40px) 0;
  border-bottom: 1px solid var(--rule);
  position: relative;
  isolation: isolate;
}

.job::before {
  content: "";
  position: absolute;
  inset: 0 calc(var(--gutter) * -0.5);
  z-index: -1;
  background: var(--wash);
  opacity: 0;
  transition: opacity var(--t-mid) var(--ease);
}
.job:hover::before { opacity: 1; }

.job__idx {
  font-family: var(--mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.2em;
  color: var(--dust);
  padding-top: 6px;
}

.job__title {
  font-family: var(--display);
  font-stretch: 112%;
  font-weight: 800;
  font-size: clamp(1.4rem, 2.6vw, 2.1rem);
  line-height: 1.02;
  text-transform: uppercase;
  letter-spacing: -0.022em;
}

.job__type {
  font-family: var(--mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dust);
  margin-top: 10px;
}

.job__desc {
  color: var(--mist);
  font-size: var(--fs-sm);
  max-width: 60ch;
  margin-top: 14px;
}

.job__apply { white-space: nowrap; padding-top: 6px; }

@media (max-width: 700px) {
  .job {
    grid-template-columns: 40px minmax(0, 1fr);
  }
  .job__apply { grid-column: 2; }
}

/* ── Motion opt-out ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .hero--static .hero__anim,
  .hero--static .hero__backdrop { animation: none; opacity: 1; transform: none; }
  .ig-card__frame img,
  .ig-card__blank .rose-tile,
  .bottle-photo { transition: none; }
}

/* ── Bottle photography: <picture> wrapper ─────────────────── */
.bottle-picture { display: block; height: 100%; line-height: 0; }
.bottle-stack .bottle .bottle-picture,
.beer-hero__art .bottle-picture,
.beer-card__art .bottle-picture { height: 100%; }

.beer-hero__art .bottle-picture img.bottle { height: 100%; }
.beer-hero__art .bottle-picture { height: 72%; }
.beer-card__art .bottle-picture img { height: 100%; width: auto; }

/* The photos are shot on a dark label, so they sit on the black page
   without a plate behind them. Grayscale keeps the four labels — cyan,
   orange, silver, magenta — inside the monochrome palette.
   To let the real label colours through, delete the filter below. */
.bottle-photo { filter: grayscale(1) contrast(1.08) brightness(1.04); }

/* The active bottle in the compass gets a faint lift so it reads as
   selected even before the needle finishes turning. */
.bottle-stack .bottle.is-active .bottle-photo {
  filter: grayscale(1) contrast(1.14) brightness(1.1);
}

/* A real bottle is far narrower than the drawn one, so give the stack
   more of the compass to stand in. */
.bottle-stack:has(.bottle-photo) { height: 88%; }
.beer-card__art:has(.bottle-photo) { align-items: flex-end; }

/* ============================================================
   25. Bottle sizing
   The percentage-height chain (stage -> stack -> picture -> img)
   does not resolve through a <picture> element, so the browser
   fell back to the photo's natural 471x1800 and the bottle grew
   far past the compass. Sizing the image directly fixes it and
   leaves one number to tune.
   ============================================================ */

.bottle-stack,
.bottle-stack:has(.bottle-photo) { height: auto; }

.bottle-stack .bottle,
.bottle-stack .bottle .bottle-picture { height: auto; }

/* ── The knob: how tall the bottle stands in the compass ───── */
.bottle-stack .bottle img.bottle-photo {
  height: clamp(190px, 25vw, 360px);
  width: auto;
  max-width: 100%;
}

/* Same fix for the beer detail page and the index grid. */
.beer-hero__art .bottle-picture { height: auto; }
.beer-hero__art .bottle-picture img.bottle {
  height: clamp(240px, 34vw, 460px);
  width: auto;
}

.beer-card__art .bottle-picture { height: auto; }
.beer-card__art .bottle-picture img {
  height: clamp(150px, 20vw, 230px);
  width: auto;
}

@media (max-width: 860px) {
  .bottle-stack .bottle img.bottle-photo { height: clamp(190px, 46vw, 320px); }
}

/* ============================================================
   26. Hero: photograph as the background
   The shot fills the whole section and the text sits on top of
   it. Two scrims make that readable without dulling the photo:
   one from the left behind the copy, one from the bottom so the
   buttons and the rail never float on a bright patch.
   ============================================================ */

.hero--cover .hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero--cover .hero__picture { display: block; height: 100%; }

.hero--cover .hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The bottles sit right of centre, so bias the crop that way and they
     survive any viewport shape. */
  object-position: 64% 50%;
  filter: contrast(1.05) saturate(0.94);
  animation: heroPhoto 2.4s var(--ease) both;
}

@keyframes heroPhoto {
  from { opacity: 0; transform: scale(1.05); }
  to   { opacity: 1; transform: scale(1); }
}

.hero--cover .hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(96deg, rgba(0,0,0,0.93) 0%, rgba(0,0,0,0.82) 26%, rgba(0,0,0,0.34) 52%, rgba(0,0,0,0.08) 74%),
    linear-gradient(0deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.12) 34%, rgba(0,0,0,0) 60%),
    linear-gradient(180deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 22%);
}

/* With a photo in place the drawn rose is not rendered at all — the
   markup only falls back to it when the photo files are missing. */

.hero--cover .hero__content {
  z-index: 3;
  padding-block: clamp(130px, 18vh, 200px) clamp(96px, 13vh, 160px);
}

.hero--cover .hero__inner { max-width: min(100%, 620px); }

.hero--cover .hero__title {
  font-size: clamp(2.2rem, 5.2vw, 5.2rem);
  max-width: 13ch;
  margin-bottom: clamp(18px, 2vw, 28px);
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.6);
}

.hero--cover .hero__excerpt {
  max-width: 44ch;
  text-shadow: 0 1px 18px rgba(0, 0, 0, 0.7);
}

.hero__caption {
  font-size: var(--fs-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--dust);
}

/* ── Ultra-wide: stop the copy drifting away from the photo ── */
@media (min-width: 1800px) {
  .hero--cover .hero__inner { max-width: min(100%, 700px); }
  .hero--cover .hero__img { object-position: 60% 50%; }
}

/* ── Tablet and phone ── */
@media (max-width: 900px) {
  .hero--cover .hero__inner { max-width: 100%; }
  .hero--cover .hero__title { font-size: clamp(2.2rem, 9vw, 3.8rem); max-width: 14ch; }
  .hero--cover .hero__img { object-position: 62% 42%; }
  .hero--cover .hero__content { padding-block: 124px 96px; }

  /* Portrait needs the scrim to work top-to-bottom, not left-to-right. */
  .hero--cover .hero__scrim {
    background:
      linear-gradient(0deg, rgba(0,0,0,0.94) 0%, rgba(0,0,0,0.78) 30%, rgba(0,0,0,0.3) 62%, rgba(0,0,0,0.1) 100%),
      linear-gradient(180deg, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0) 26%);
  }
}

@media (max-width: 560px) {
  .hero--cover .hero__title { font-size: clamp(2rem, 10vw, 3rem); max-width: 100%; }
  .hero--cover .hero__excerpt { font-size: 0.98rem; }
  .hero__actions { gap: 10px; }
  .hero__actions .btn { flex: 1 1 auto; justify-content: center; }
  .hero__caption { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero--cover .hero__img { animation: none; }
}

/* ============================================================
   27. Navigation sizing
   The mono nav type was set at the smallest step in the scale and
   read as fine print. One step up, with a little more air.
   ============================================================ */

.nav__link {
  font-size: 0.8rem;
  letter-spacing: 0.15em;
}

.nav__links { gap: clamp(16px, 2vw, 34px); }

.brand__mark { font-size: 1.32rem; }
.brand__sub  { font-size: 0.6rem; letter-spacing: 0.22em; }

.lang-switch { font-size: 0.76rem; padding: 8px 12px; }
.btn--sm     { font-size: 0.76rem; }

@media (max-width: 1180px) {
  .nav__link { font-size: 0.74rem; letter-spacing: 0.12em; }
  .nav__links { gap: 18px; }
}

/* ============================================================
   28. Compass sizing
   ============================================================ */

.range { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
.rose  { width: 96%; height: 96%; }

.bottle-stack .bottle img.bottle-photo { height: clamp(190px, 30vw, 440px); }

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

/* ============================================================
   29. Beer catalogue
   Three cards per row on desktop, auto-fitting down to two and
   then one. Cards past the first batch are hidden with the HTML
   `hidden` attribute and revealed by the load-more button.
   ============================================================ */

.catalog {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
}

.can-card {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: clamp(20px, 2.2vw, 32px);
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.can-card[hidden] { display: none; }

.can-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--wash);
  transform: translateY(101%);
  transition: transform var(--t-mid) var(--ease);
}
.can-card:hover::before { transform: translateY(0); }

/* Fixed-height frame so a tall can and a short bottle still line up. */
.can-card__frame {
  display: grid;
  place-items: center;
}

.can-card__img,
.can-card__draw {
  /* Sizing lives in section 41 — one place, not two. */
  transition: transform var(--t-mid) var(--ease), filter var(--t-mid) var(--ease);
}

.can-card:hover .can-card__img,
.can-card:hover .can-card__draw {
  transform: translateY(-6px);
  filter: grayscale(1) contrast(1.16);
}

.can-card__draw { opacity: 0.4; }

.can-card__body { margin-top: auto; }

.can-card__brewery {
  font-family: var(--mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--dust);
}

/* The house beers get the mark picked out. */
.can-card__brewery--own { color: var(--chalk); }

.can-card__name {
  font-family: var(--display);
  font-stretch: 112%;
  font-weight: 800;
  font-size: clamp(1.15rem, 1.7vw, 1.5rem);
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: -0.018em;
  margin-top: 8px;
  overflow-wrap: break-word;
}

.can-card__meta {
  font-family: var(--mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mist);
  margin-top: 8px;
}

.can-card__dot { color: var(--ghost); margin: 0 4px; }

.catalog__more {
  display: flex;
  justify-content: center;
  margin-top: clamp(28px, 4vw, 48px);
}

.catalog__more .btn.is-done {
  opacity: 0.45;
  cursor: default;
  pointer-events: none;
}
.catalog__more .btn.is-done .btn__arrow { display: none; }

/* ── Responsive: three, two, one ── */
@media (max-width: 900px) {
  .catalog { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .can-card__frame { --art-h: clamp(140px, 26vw, 190px); }
}

@media (max-width: 520px) {
  .catalog { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .can-card { padding: 16px 14px; gap: 12px; }
  .can-card__frame { --art-h: 120px; }
  .can-card__name { font-size: 1.02rem; }
}

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

/* A stand-in photo should not pretend to be the real thing. */
.can-card__img--placeholder { opacity: 0.34; }
.can-card:hover .can-card__img--placeholder { opacity: 0.5; }

/* ============================================================
   30. Merch band
   Full-bleed to the screen edges, locked to the photo's own 3:2
   ratio so nothing is cropped, capped in height so it does not
   swallow an ultra-wide screen. The source is 1100px wide, so it
   is upscaled and will soften — replace with a larger shot and
   it sharpens with no CSS change.
   ============================================================ */

.merch {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  display: flex;
  align-items: flex-end;
  /* Height comes from --band-h, shared with the menu band (section 40). */
}

.merch__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.merch__bg picture,
.merch__bg img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.merch__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(0deg, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.55) 26%, rgba(0,0,0,0.05) 58%),
    linear-gradient(96deg, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.28) 38%, rgba(0,0,0,0) 66%);
}

.merch__inner {
  position: relative;
  width: 100%;
  padding-block: clamp(30px, 5vw, 68px);
}

.merch__title {
  font-size: clamp(1.8rem, 4.2vw, 3.8rem);
  line-height: 0.98;
  text-transform: uppercase;
  letter-spacing: -0.026em;
  max-width: 16ch;
  margin-top: 14px;
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.85);
}

.merch__lead {
  max-width: 44ch;
  margin-top: 16px;
  font-size: var(--fs-sm);
  text-shadow: 0 1px 18px rgba(0, 0, 0, 0.9);
}

.merch__cta { margin-top: clamp(20px, 2.4vw, 32px); }

/* No photo on disk: a plain band rather than an empty frame. */
.merch:not(.merch--photo) {
  min-height: 0;
  background: var(--wash);
}

@media (max-width: 720px) {
  .merch__bg img { object-position: 50% 38%; }
  .merch__title, .merch__lead { max-width: 100%; }
  .merch__scrim {
    background: linear-gradient(0deg, rgba(0,0,0,0.94) 0%, rgba(0,0,0,0.7) 34%, rgba(0,0,0,0.1) 72%);
  }
  .merch__cta { width: 100%; justify-content: center; }
}

/* ============================================================
   31. Menu page
   A price list, so the type does the work: name and description
   on the left, a dotted leader, price hard right.
   ============================================================ */

.menu-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin-top: clamp(26px, 3vw, 40px);
}

.menu-jump a {
  font-family: var(--mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dust);
  border: 1px solid var(--rule);
  padding: 8px 14px;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.menu-jump a:hover { color: var(--ink); background: var(--chalk); border-color: var(--chalk); }

.menu-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--rule-strong);
  margin-bottom: 8px;
}

.menu-head__title {
  font-family: var(--display);
  font-stretch: 118%;
  font-weight: 800;
  font-size: clamp(1.5rem, 3vw, 2.4rem);
  text-transform: uppercase;
  letter-spacing: -0.022em;
  line-height: 1;
}

.menu-head__note {
  font-family: var(--mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dust);
}

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

.menu-item {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--rule);
}

.menu-item__main { min-width: 0; }

.menu-item__name {
  display: block;
  font-weight: 600;
  font-size: var(--fs-md);
  line-height: 1.2;
}

.menu-item__desc {
  display: block;
  font-family: var(--mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  color: var(--dust);
  margin-top: 5px;
}

/* The leader is drawn, not typed, so it never wraps or misaligns. */
.menu-item__dots {
  flex: 1 1 auto;
  min-width: 24px;
  align-self: center;
  height: 1px;
  background-image: radial-gradient(circle, var(--rule-strong) 1px, transparent 1px);
  background-size: 6px 1px;
  background-repeat: repeat-x;
  opacity: 0.5;
}

.menu-item__price {
  font-family: var(--mono);
  font-size: var(--fs-sm);
  letter-spacing: 0.06em;
  white-space: nowrap;
  color: var(--chalk);
}

.menu-legal {
  font-family: var(--mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.12em;
  color: var(--dust);
  max-width: 60ch;
  line-height: 1.7;
}

@media (max-width: 560px) {
  .menu-item { flex-wrap: wrap; gap: 4px 12px; }
  .menu-item__main { flex: 1 1 100%; }
  .menu-item__dots { display: none; }
  .menu-item__price { margin-left: auto; }
}

/* ============================================================
   32. Order page
   ============================================================ */

.ways {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
}

.way {
  padding: clamp(24px, 2.8vw, 40px);
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  isolation: isolate;
}

.way::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--wash);
  opacity: 0;
  transition: opacity var(--t-mid) var(--ease);
}
.way:hover::before { opacity: 1; }

.way__idx {
  font-family: var(--mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.2em;
  color: var(--dust);
}

.way__title {
  font-family: var(--display);
  font-stretch: 112%;
  font-weight: 800;
  font-size: clamp(1.2rem, 1.9vw, 1.6rem);
  text-transform: uppercase;
  letter-spacing: -0.018em;
  line-height: 1.05;
}

.way__body {
  color: var(--mist);
  font-size: var(--fs-sm);
  flex: 1 1 auto;
}

.way__phone {
  font-family: var(--mono);
  font-size: clamp(1.05rem, 1.7vw, 1.35rem);
  letter-spacing: 0.04em;
  color: var(--chalk);
  border-bottom: 1px solid var(--rule-strong);
  padding-bottom: 4px;
  align-self: flex-start;
  transition: border-color var(--t-fast) var(--ease);
}
.way__phone:hover { border-color: var(--chalk); }

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

/* ============================================================
   33. Hero height and copy position
   The full-height hero left a lot of empty photo under the
   buttons. Shorter section, and the copy block nudged up toward
   the nav by giving it more padding below than above — it is
   vertically centred, so the extra bottom padding lifts it.
   ============================================================ */

.hero--cover {
  min-height: min(86svh, 880px);
}

.hero--cover .hero__content {
  /* top / bottom — raise the second number to push the copy higher */
  padding-block: clamp(104px, 14vh, 158px) clamp(150px, 19vh, 226px);
}

@media (max-width: 900px) {
  .hero--cover { min-height: min(80svh, 720px); }
  .hero--cover .hero__content { padding-block: 108px 132px; }
}

@media (max-width: 560px) {
  .hero--cover { min-height: min(76svh, 620px); }
  .hero--cover .hero__content { padding-block: 100px 116px; }
}

/* ============================================================
   34. Ticker to first section
   The ticker is already a full-width rule, so it does the work
   of a separator on its own — the section below it needs less
   air above than a section following ordinary content.
   ============================================================ */

.ticker + .section { padding-top: clamp(30px, 3.5vw, 56px); }

/* ============================================================
   35. Menu band
   Food photograph across the full width with one oversized word
   in the bottom-left corner. Clicking it expands the beer list
   underneath — the panel sits outside the photo so it can be any
   height without stretching the image.
   ============================================================ */

.band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  display: flex;
  align-items: flex-end;
}

.band__bg { position: absolute; inset: 0; z-index: -2; }

.band__bg picture,
.band__bg img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 58%;   /* the food sits low in the frame */
  transition: transform 1.6s var(--ease);
}

.band:hover .band__bg img { transform: scale(1.03); }

.band__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(0deg, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.45) 32%, rgba(0,0,0,0) 66%),
    linear-gradient(96deg, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.2) 44%, rgba(0,0,0,0) 72%);
}

.band__inner { position: relative; padding-block: clamp(26px, 4vw, 54px); }

.band__toggle {
  display: inline-flex;
  align-items: baseline;
  gap: clamp(12px, 1.6vw, 22px);
  flex-wrap: wrap;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: var(--chalk);
  text-align: left;
}

.band__label {
  font-family: var(--display);
  font-stretch: 122%;
  font-weight: 900;
  font-size: clamp(2.4rem, 7vw, 6rem);
  line-height: 0.9;
  text-transform: uppercase;
  letter-spacing: -0.04em;
  text-shadow: 0 2px 34px rgba(0, 0, 0, 0.75);
  transition: opacity var(--t-fast) var(--ease);
}

.band__toggle:hover .band__label { opacity: 0.78; }

.band__hint {
  font-family: var(--mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--dust);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.9);
}

.band__chev {
  display: inline-flex;
  align-self: center;
  border: 1px solid var(--rule-strong);
  padding: 9px;
  transition: transform var(--t-mid) var(--ease), background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.band__toggle:hover .band__chev { background: var(--chalk); color: var(--ink); }
.band__toggle.is-open .band__chev { transform: rotate(180deg); }

/* Keyboard focus only, and drawn tight to the label rather than as a
   box around the whole control. */
.band__toggle:focus { outline: none; }
.band__toggle:focus-visible { outline: 1px solid var(--rule-strong); outline-offset: 4px; }

/* ── The panel it opens ── */
.menupanel {
  overflow: hidden;
  max-height: 0;
  /* Colour, border and the fade are set in section 50. */
}

.menupanel[hidden] { display: none; }

.catalog__title {
  font-family: var(--display);
  font-stretch: 116%;
  font-weight: 800;
  font-size: clamp(1.4rem, 2.6vw, 2.1rem);
  text-transform: uppercase;
  letter-spacing: -0.022em;
  line-height: 1.02;
}

.section-head--slim {
  align-items: flex-end;
  margin-bottom: clamp(22px, 3vw, 36px);
}

@media (prefers-reduced-motion: reduce) {
  .menupanel { transition: none; opacity: 1; }
  .band__bg img { transition: none; }
}

@media (max-width: 720px) {
  .band__toggle { gap: 10px; }
  .band__hint { flex: 1 1 100%; }
}

/* ============================================================
   36. Hours & map strip
   What is left of the old tap room block, now its own section
   just above the footer.
   ============================================================ */

.visit-strip {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: start;
}

@media (max-width: 900px) {
  .visit-strip { grid-template-columns: 1fr; }
}

/* ============================================================
   37. Bottles in colour
   The four labels are cyan, orange, silver and magenta. Against
   the photography now carrying the hero and the menu band, the
   colour reads as part of the palette rather than a break from it.
   ============================================================ */

.bottle-photo,
.bottle-stack .bottle.is-active .bottle-photo,
.rose-stage:hover .bottle.is-active .bottle-photo,
.beer-hero__art:hover .bottle-photo {
  filter: contrast(1.06) saturate(1.02);
}

/* Catalogue cards stay muted — forty-nine labels at full strength
   would be noise. The one you hover comes up to full colour. */
.can-card__img { filter: contrast(1.04) saturate(1.02); }
.can-card:hover .can-card__img { filter: contrast(1.1) saturate(1.06); }
.can-card__img--placeholder,
.can-card:hover .can-card__img--placeholder { filter: grayscale(1) contrast(1.06); }

/* ============================================================
   38. Mobile adjustments
   Same HTML everywhere; the phone gets a shorter version of it.
   ============================================================ */

/* The hero rail repeats what the ticker already says, and stacked
   directly above it the two dark bars read as one control split
   across two lines. On a phone the ticker alone does the job. */
@media (max-width: 720px) {
  .hero__rail { display: none; }
}

/* Belt and braces: the marquee must never wrap, whatever its
   contents end up being. */
.ticker__track { flex-wrap: nowrap; }
.ticker { white-space: nowrap; }

/* Instagram: three cards is a lot of scrolling on a phone for
   something that links off-site. Show the newest, and send the
   rest to the feed via the link that is already there. */
@media (max-width: 720px) {
  .ig-grid .ig-card:nth-child(n + 2) { display: none; }
}

/* ============================================================
   39. Mobile navigation
   At 860px the links already collapse into the drawer, but the
   language switch and the visit button stayed in the bar. On a
   390px screen the logo plus both of those plus the burger do
   not fit, so they pushed the burger out of reach and the menu
   became unopenable. Below 860 the bar carries the logo and the
   burger only — everything else lives in the drawer.
   ============================================================ */

@media (max-width: 860px) {
  .nav__cta,
  .nav__side .lang-switch { display: none; }

  /* Stated again rather than relied on: this button is the only
     way into the menu on a phone. */
  .burger {
    display: inline-flex !important;
    flex: 0 0 auto;
  }

  .nav__inner { gap: 12px; }
  .nav__side { gap: 10px; }

  .drawer__cta { width: 100%; justify-content: center; margin-top: 4px; }
  .drawer__foot { gap: 14px 20px; }
}

/* Very narrow: shorten the wordmark so nothing wraps. */
@media (max-width: 380px) {
  .brand__sub { display: none; }
}

/* ============================================================
   40. Mobile refinements
   ============================================================ */

/* The hero kept the bottom padding that used to make room for the
   rail, but the rail is hidden below 720 — so it was reserving
   space for something that is not there. */
@media (max-width: 720px) {
  .hero--cover .hero__content { padding-bottom: clamp(44px, 7vh, 70px); }
}

/* ── Beer selector as a 2x2 grid ──────────────────────────────
   Four full-width rows ate most of a phone screen before the
   compass was even visible. As tiles they take a quarter of the
   height and still carry name, style, strength and bearing. */
@media (max-width: 720px) {
  .range__list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-top: 1px solid var(--rule);
    border-left: 1px solid var(--rule);
  }

  .range__row {
    border-right: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
  }

  .range__btn {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 14px 12px 16px;
    min-height: 104px;
  }

  /* The full-bleed hover wash would spill across both columns. */
  .range__btn::before { left: 0; right: 0; }
  .range__btn:hover,
  .range__row.is-active .range__btn { padding-left: 12px; }

  .range__idx { font-size: 0.62rem; }

  .range__name {
    font-size: clamp(1.25rem, 6.4vw, 1.75rem);
    line-height: 0.98;
    overflow-wrap: break-word;
  }

  .range__style {
    margin-top: 4px;
    font-size: 0.6rem;
    letter-spacing: 0.12em;
  }

    /* The 560px block above put the bearing on its own grid row —
     irrelevant now that the tile is a flex column. */
  .range__btn > span:nth-child(2) { width: 100%; }
}

@media (max-width: 560px) {
  .range__btn { grid-template-columns: none; }
  }

/* ── Merch and menu bands the same height ────────────────────
   Symmetry between the two photo bands matters more than the
   merch shot's native ratio; it will sharpen when a bigger file
   replaces it. Both now read from one value. */
:root { --band-h: clamp(340px, 46vh, 560px); }

.band,
.merch { min-height: var(--band-h); }

@media (max-width: 720px) {
  :root { --band-h: clamp(280px, 40vh, 380px); }
}

/* ============================================================
   41. Catalogue card artwork
   The bottle files are 471x1800. Sizing them with max-height as
   a percentage left the browser free to fall back to the file's
   own size when the percentage did not resolve, and a 1800px
   bottle burst out of a 230px frame. Giving the image the frame
   as its box and letting object-fit do the scaling cannot fail
   the same way — the picture is never larger than its card.
   ============================================================ */

/* `place-items: center` stops the grid row from stretching, so the row
   ends up sized by its content — and a percentage height on the image
   then has nothing definite to resolve against. The browser falls back
   to the file's own 1800px and the bottle bursts out of the card.
   A length-based max-height cannot go circular, so the art is capped
   in absolute terms and the aspect ratio follows. */
.can-card__frame {
  --art-h: clamp(150px, 17vw, 230px);
  height: var(--art-h);
  overflow: hidden;
}

.can-card__frame picture { display: block; line-height: 0; }

.can-card__img,
.can-card__draw {
  display: block;
  width: auto;
  height: auto;
  max-height: var(--art-h);
  max-width: 100%;
  object-fit: contain;
}

/* ============================================================
   42. Mobile: hero anchored low, compass section contained
   ============================================================ */

/* Nothing sits under the hero copy on a phone, so instead of
   centring it in a tall box and leaving a gap above the ticker,
   drop the block to the bottom and keep a small breathing gap. */
@media (max-width: 720px) {
  .hero--cover { align-items: flex-end; }
  .hero--cover .hero__content {
    padding-top: clamp(96px, 16vh, 140px);
    padding-bottom: clamp(30px, 5vh, 48px);
  }
}

/* ── Stop the page scrolling sideways ────────────────────────
   `clip` rather than `hidden`: hidden turns the body into a
   scroll container, which breaks sticky positioning and anchor
   scrolling. clip just trims the overflow. */
body {
  overflow-x: hidden;
  overflow-x: clip;
}

/* ── Compass section ─────────────────────────────────────────
   Grid tracks default to a minimum size of their content, so a
   long beer name could push a tile — and with it the whole page
   — wider than the screen. minmax(0, 1fr) lets them shrink. */
@media (max-width: 980px) {
  .range { grid-template-columns: minmax(0, 1fr); }
  .rose-stage { max-width: min(100%, 460px); margin-inline: auto; }
}

@media (max-width: 720px) {
  .range__list { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

  .range__btn { min-width: 0; }
  .range__btn > span { min-width: 0; max-width: 100%; }

  .range__name {
    font-size: clamp(1.02rem, 5.4vw, 1.5rem);
    hyphens: auto;
  }

  .range__style,
    /* The bearing readouts sit in the stage's corners; on a narrow
     screen they were the thing poking past the edge. */
  .rose-stage__label,
  .rose-stage__deg { font-size: 0.58rem; }
}

@media (max-width: 400px) {
  .range__name { font-size: clamp(0.95rem, 5vw, 1.2rem); letter-spacing: -0.03em; }
  .range__btn { padding: 12px 10px 14px; min-height: 96px; }
}

/* ============================================================
   43. Wide screens
   The layout used to stop at a fixed width and centre itself, so
   on a large monitor the copy sat in a column with dead space on
   both sides while the photographs ran edge to edge. Now the
   content follows the viewport and only the gutter holds it off
   the edge — the same proportions everywhere.

   Long measures are still controlled where they matter: leads and
   paragraphs carry their own ch limits, so nothing turns into a
   200-character line.
   ============================================================ */

/* Past a point the grids would rather add a column than stretch. */
@media (min-width: 1800px) {
  .catalog { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 2300px) {
  .catalog { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* The hero copy column grows a little rather than staying pinned
   to a phone-era width on a very large screen. */
@media (min-width: 1800px) {
  .hero--cover .hero__inner { max-width: min(100%, 760px); }
  .hero--cover .hero__title { font-size: clamp(3.6rem, 3.4vw, 5.4rem); }
}

/* ============================================================
   44. Fixes
   ============================================================ */

/* ── Beer page: two oversized gaps at the top ────────────────
   The page header reserved room for a title this page does not
   have, and the section under it added its own top padding on
   top of the beer block's. Both trimmed. */
.page-beer .page-head {
  padding-top: calc(var(--nav-h) + clamp(18px, 2.4vw, 34px));
}

.page-beer .beer-hero { padding-top: clamp(14px, 2vw, 26px); }

/* ── Menu band: hint reads clearly and lines up with the button ── */
.band__toggle { align-items: center; }

.band__hint {
  color: var(--chalk);
  opacity: 0.86;
  align-self: center;
}

.band__toggle:hover .band__hint { opacity: 1; }

/* ── Beer selector: contain the focus ring ───────────────────
   The row button is as wide as its column, so the global focus
   outline drew a full-width white rectangle after every click.
   Keyboard users still get a visible ring — drawn inside the row
   and only when focus came from the keyboard, not the mouse. */
.range__btn:focus { outline: none; }

.range__btn:focus-visible {
  outline: 1px solid var(--rule-strong);
  outline-offset: -1px;
}

/* The active row is already marked by its background and colour,
   so the ring is not carrying any extra meaning here. */
.range__row.is-active .range__btn:focus-visible { outline-color: var(--chalk); }

/* ── Copy over photography ───────────────────────────────────
   Secondary text sitting on a photograph competes with whatever
   is behind it, so on the two photo bands it goes a step brighter
   again and leans on the shadow to hold the edge. */
.merch__lead,
.hero__excerpt {
  color: rgba(255, 255, 255, 0.92);
}

/* ============================================================
   45. Compass section: size, containment, colour
   ============================================================ */

/* ── The grey band ───────────────────────────────────────────
   The hover/active wash was drawn 100vw wide in each direction so
   it could bleed past the column edge. On a wide screen that made
   it a stripe across the whole page. Contained to the row, with a
   small overhang so it still reads as a band and not a button. */
.range__btn::before {
  left: calc(var(--gutter) * -0.4);
  right: calc(var(--gutter) * -0.4);
}

/* ── Half the size on desktop ────────────────────────────────
   The compass was taking a full screen height on its own. The
   mobile layout below 980px is untouched. */
@media (min-width: 981px) {
  /* Cap the block, not the compass. Capping the stage alone left dead
     space beside it; capping the column made the list enormous. Limiting
     the pair and centring it keeps both at a sane size and puts the
     compass nearer the middle of the page instead of hard left. */
  .range {
    max-width: 1240px;
    margin-inline: auto;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: clamp(28px, 3.4vw, 64px);
    align-items: center;
  }

  .rose-stage { max-width: 100%; width: 100%; }

  .bottle-stack .bottle img.bottle-photo { height: clamp(150px, 17vw, 250px); }

  .range__name { font-size: clamp(1.2rem, 1.9vw, 1.9rem); }
  .range__btn { padding-block: 14px; }
  .range__style { margin-top: 5px; }

  .range__detail { margin-top: clamp(16px, 2vw, 24px); min-height: 0; }
  .range__wind { font-size: clamp(1.15rem, 1.7vw, 1.6rem); margin-bottom: 10px; }
  .range__copy { margin-bottom: 16px; }
}

/* ── Label colours ───────────────────────────────────────────
   --accent comes from includes/data.php, one hex per beer, and is
   set on the row and on its panel. Change it there, not here. */
.range__name {
  color: var(--accent, var(--chalk));
  opacity: 0.55;
  transition: opacity var(--t-mid) var(--ease);
}

.range__btn:hover .range__name { opacity: 0.8; }

.range__row.is-active .range__name { opacity: 1; }

/* The description heading picks up the same colour once selected,
   so the panel and the list read as one thing. */
.range__panel.is-active .range__wind { color: var(--accent, var(--chalk)); }

/* ============================================================
   46. Hero type, larger
   ============================================================ */

.hero--cover .hero__title {
  font-size: clamp(2.8rem, 6.2vw, 6.4rem);
  max-width: 12ch;
}

.hero--cover .hero__excerpt { font-size: clamp(1rem, 1.25vw, 1.2rem); }

@media (min-width: 1800px) {
  .hero--cover .hero__title { font-size: clamp(4.4rem, 4.2vw, 6.6rem); }
  .hero--cover .hero__inner { max-width: min(100%, 880px); }
}

/* On a phone the headline was smaller than it needed to be — it is
   the only thing on screen, so let it carry the fold. */
@media (max-width: 900px) {
  .hero--cover .hero__title { font-size: clamp(2.6rem, 11vw, 4.4rem); max-width: 13ch; }
  .hero--cover .hero__excerpt { font-size: 1.02rem; }
}

@media (max-width: 560px) {
  .hero--cover .hero__title { font-size: clamp(2.4rem, 12.5vw, 3.6rem); max-width: 100%; }
  .hero--cover .hero__excerpt { font-size: 1rem; }
}

/* ============================================================
   47. Subpage headers
   Every interior page opened with most of a screen of nothing:
   the nav height, plus a large clamp on top of it, plus the
   section padding underneath. Trimmed so the content is visible
   without scrolling, on desktop and on phones.
   ============================================================ */

.page-head {
  padding-top: calc(var(--nav-h) + clamp(20px, 2.6vw, 42px));
  padding-bottom: clamp(22px, 3vw, 40px);
}

.page-head__title {
  font-size: clamp(2.6rem, 7.5vw, 7rem);
  margin-block: 12px 0;
}

/* The first section after a page header does not need its full
   rhythm — the header's own bottom padding and rule already
   separate them. */
.page-head + .section { padding-top: clamp(26px, 3vw, 48px); }

@media (max-width: 720px) {
  .page-head {
    padding-top: calc(var(--nav-h) + 18px);
    padding-bottom: 22px;
  }
  .page-head + .section { padding-top: 24px; }
}

/* ============================================================
   48. Social cards
   Three networks, one card each, always three across on desktop.
   Deliberately its own grid class rather than reusing .ig-grid —
   that one hides everything past the first card on a phone, which
   made sense for a feed but would drop two whole networks here.
   ============================================================ */

.social-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
}

.social-card .ig-card__meta {
  color: var(--chalk);
  letter-spacing: 0.22em;
}

.social-card .ig-card__frame img { transition: transform 1.1s var(--ease), filter var(--t-mid) var(--ease); }

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

/* Social posts keep their own colour — they are screenshots of real
   posts, and desaturating them made three different photographs look
   like one grey block. */
.social-card .ig-card__frame img {
  filter: contrast(1.03);
}

.social-card:hover .ig-card__frame img {
  filter: contrast(1.08) saturate(1.04);
}

/* ============================================================
   49. Hero headline, desktop only
   It was sized to fill the fold, which on a large monitor made it
   larger than it needed to be. Mobile sizes below 900px are left
   exactly as they were.
   ============================================================ */

@media (min-width: 901px) {
  .hero--cover .hero__title { font-size: clamp(2.6rem, 4.6vw, 4.8rem); }
}

@media (min-width: 1800px) {
  .hero--cover .hero__title { font-size: clamp(3.6rem, 3.2vw, 5rem); }
}

/* The lead is longer now, so give it room to breathe rather than
   running to a very narrow column. */
.hero--cover .hero__excerpt { max-width: 52ch; }

/* ============================================================
   50. Menu + merch as a split pair
   Two tiles side by side under the hero, inset from the page edge
   with a gap between them. The beer list opens in a full-width row
   underneath the pair and pushes the page down.

   Grid, and the tiles hold their cells whether the list is open or
   closed. Nothing changes place, so there is nothing that can be
   caught mid-move — the only thing that animates is the height of
   the list itself.
   ============================================================ */

.bands {
  --band-gap: clamp(10px, 1.1vw, 20px);
  --band-radius: 16px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--band-gap);
  padding: var(--band-gap) var(--gutter);
}

.bands > .band  { grid-column: 1; grid-row: 1; }
.bands > .merch { grid-column: 2; grid-row: 1; }
.bands > .menupanel { grid-column: 1 / -1; grid-row: 2; }

/* ── Open: the food tile takes the full width, the list sits under
   it, and the merch tile stretches across the bottom. ── */
.bands.is-open > .band  { grid-column: 1 / -1; grid-row: 1; min-height: clamp(200px, 24vh, 320px); }
.bands.is-open > .menupanel { grid-column: 1 / -1; grid-row: 2; }
.bands.is-open > .merch { grid-column: 1 / -1; grid-row: 3; min-height: clamp(200px, 26vh, 340px); }

/* The tile is hidden for the instant its cell and size change, then
   fades back in where it belongs. visibility rather than opacity
   alone, so nothing can be caught half-drawn mid-swap. */
/* The merch tile is hidden for the instant its cell and size change,
   then fades back in where it belongs. visibility rather than opacity
   alone, so it cannot be caught half-drawn mid-swap. */
.bands > .merch { transition: opacity 0.34s var(--ease); }

.bands > .merch.is-hidden {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s var(--ease), visibility 0s linear 0.18s;
}

/* The food tile stays visible throughout. Its width snaps — a grid
   column span cannot be animated — but its height can, and gliding
   that takes most of the hardness out of the change. */
.bands > .band { transition: min-height 0.5s var(--ease); }

/* On top of that, the photograph inside it dips out and back while the
   tile changes shape. The dark panel and the label stay put, so the
   area is never empty, but the reframing of the picture is hidden —
   which is the part that read as a snap. */
.bands > .band .band__bg { transition: opacity 0.3s var(--ease); }
.bands > .band.is-dimming .band__bg { opacity: 0; }

/* The scrim goes with it, or it sits as a flat grey rectangle for a
   moment with no photograph underneath. */
.bands > .band .band__scrim { transition: opacity 0.3s var(--ease); }
.bands > .band.is-dimming .band__scrim { opacity: 0.35; }

.bands > .band,
.bands > .merch {
  min-height: min(46vw, 560px);
  border: 0;
  border-radius: var(--band-radius);
  overflow: hidden;
}

.bands > .menupanel {
  border: 0;
  border-radius: var(--band-radius);
}

/* The panel's own section carries the page gutter; inside the inset
   pair that would double up. */
.bands > .menupanel .wrap { padding-inline: 0; }

/* Rounded corners have to be clipped on the layers inside too, or the
   photograph pokes past the corner. */
.bands > .band .band__bg,
.bands > .band .band__scrim,
.bands > .merch .merch__bg,
.bands > .merch .merch__scrim { border-radius: inherit; }

/* The list unrolls and fades together. */
.menupanel {
  opacity: 0;
  transition: max-height 0.6s var(--ease), opacity 0.4s var(--ease);
}

.menupanel.is-open { opacity: 1; }

/* Type in a half-width tile has half the room. */
.bands > .band .band__label { font-size: clamp(2rem, 4.4vw, 4.4rem); }
.bands > .merch .merch__title { font-size: clamp(1.5rem, 2.6vw, 2.6rem); max-width: 14ch; }
.bands > .merch .merch__lead { max-width: 34ch; font-size: var(--fs-xs); }

.bands > .band .band__inner,
.bands > .merch .merch__inner {
  padding-inline: clamp(18px, 2.2vw, 40px);
  max-width: none;
}

@media (max-width: 900px) {
  /* One column, so the tile never changes place — no travel to animate. */
  .bands,
  .bands.is-open { grid-template-columns: 1fr; }

  .bands > .band,
  .bands.is-open > .band { grid-column: 1; grid-row: 1; min-height: clamp(260px, 38vh, 360px); }

  .bands > .menupanel,
  .bands.is-open > .menupanel { grid-column: 1; grid-row: 2; }

  .bands > .merch,
  .bands.is-open > .merch { grid-column: 1; grid-row: 3; }

  .bands > .band,
  .bands > .merch { min-height: clamp(260px, 38vh, 360px); }

  .bands > .band .band__label { font-size: clamp(2.4rem, 9vw, 3.6rem); }
  .bands > .merch .merch__title { font-size: clamp(1.6rem, 7vw, 2.4rem); max-width: 100%; }
  .bands > .merch .merch__lead { font-size: var(--fs-sm); max-width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .menupanel { transition: none; opacity: 1; }
}

/* ============================================================
   51. Section labels
   The small mono labels above each heading were set at the
   smallest step in the scale and at 56% opacity, which read as
   fine print rather than a label. Half again as large, full
   strength, and with wider tracking so they still feel like a
   caption and not a heading.

   Every small mono label on the site is covered here, not just the
   section eyebrows: the footer column headings, the info blocks,
   the spec table keys and the menu group notes.
   ============================================================ */

.eyebrow {
  font-size: 0.86rem;
  letter-spacing: 0.3em;
  color: var(--chalk);
  opacity: 0.9;
}


@media (max-width: 720px) {
  .eyebrow { font-size: 0.78rem; letter-spacing: 0.24em; }
}

/* All the other small labels, matched to .eyebrow */
.info-block__k,
.footer__col h4,
.spec__k,
.menu-head__note,
.way__idx,
.job__type {
  font-size: 0.8rem;
  letter-spacing: 0.24em;
  color: var(--chalk);
  opacity: 0.9;
}

.info-block__k { margin-bottom: 14px; }
.footer__col h4 { margin-bottom: 16px; }

@media (max-width: 720px) {
  .info-block__k,
  .footer__col h4,
  .spec__k,
  .menu-head__note,
  .way__idx,
  .job__type { font-size: 0.72rem; letter-spacing: 0.2em; }
}


/* ============================================================
   52. Round of adjustments
   ============================================================ */

/* ── Language switch on mobile ───────────────────────────────
   It was hidden below 860 to make room for the burger. It fits
   as a compact pill beside it, and without it there was no way
   to reach the English site on a phone. */
@media (max-width: 860px) {
  .nav__side .lang-switch {
    display: inline-flex;
    font-size: 0.68rem;
    letter-spacing: 0.14em;
    padding: 7px 10px;
  }
}

@media (max-width: 380px) {
  .nav__side .lang-switch { padding: 6px 8px; font-size: 0.64rem; }
}

/* ── Drawer: smaller rows ────────────────────────────────────
   Five items at nine viewport widths filled the screen and left
   nothing for the status line and the visit button underneath. */
.drawer__link {
  font-size: clamp(1.6rem, 6.4vw, 2.5rem);
  padding-block: clamp(11px, 1.9vh, 18px);
}

.drawer__index { font-size: 0.62rem; }

/* ── Beer page: the name was set at display-poster size ──────
   Fine on a phone, where it fills the width; on a desktop it ran
   to nearly 200px tall on its own. Mobile sizes are untouched. */
@media (min-width: 901px) {
  .beer-hero__name { font-size: clamp(3rem, 5.4vw, 5.4rem); }
}

/* ── Menu page: category chips follow you down ───────────────
   The list is long, so jumping to a group used to mean scrolling
   back to the top to pick another one. */
.menu-jump-bar {
  position: sticky;
  top: var(--nav-h);
  z-index: 5;
  background: var(--ink);
  border-bottom: 1px solid var(--rule);
  padding-block: 12px;
}

.menu-jump-bar .menu-jump { margin-top: 0; }

@media (max-width: 720px) {
  .menu-jump-bar { padding-block: 9px; }
  .menu-jump {
    gap: 8px;
    overflow-x: auto;
    flex-wrap: nowrap;
    scrollbar-width: none;
  }
  .menu-jump::-webkit-scrollbar { display: none; }
  .menu-jump a { white-space: nowrap; }
}

/* Group headings need to clear the sticky bar when jumped to. */
.page-menu [id] { scroll-margin-top: calc(var(--nav-h) + 74px); }

/* ── Newsletter: the form was the faintest thing on the page ── */
.nl .field__label {
  font-size: 0.8rem;
  letter-spacing: 0.22em;
  color: var(--chalk);
  opacity: 0.92;
}

.nl .field__input {
  border-bottom-color: var(--rule-strong);
  border-bottom-width: 2px;
  padding: 16px 0;
  font-size: var(--fs-md);
  color: var(--chalk);
}

.nl .field__input::placeholder { color: rgba(255, 255, 255, 0.45); }
.nl .field__input:hover { border-bottom-color: var(--chalk); }

/* ============================================================
   53. Hero slideshow, scroll cue, coloured ticker
   ============================================================ */

/* ── Slides cross-fade in place ─────────────────────────────── */
.hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.1s var(--ease);
}

.hero__slide.is-active { opacity: 1; }

/* The original story slider left `display: flex; align-items: flex-end`
   on .hero__slide. A flex child is not stretched by that, so the picture
   sized itself from its own aspect ratio at full height — on a viewport
   wider than the photograph's ratio it stopped short of the right edge.
   Blocks, and a picture told to fill, cannot do that. */
.hero__slide {
  display: block;
  align-items: initial;
}

.hero__slide,
.hero__slide .hero__picture,
.hero__slide .hero__img {
  width: 100%;
  height: 100%;
}

/* The arrow that advances by hand. */
.hero__next {
  position: absolute;
  right: var(--gutter);
  top: 50%;
  transform: translateY(-50%);
  z-index: 6;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border: 1px solid var(--rule-strong);
  background: rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(4px);
  color: var(--chalk);
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}

.hero__next:hover {
  background: var(--chalk);
  color: var(--ink);
  border-color: var(--chalk);
  transform: translateY(-50%) translateX(3px);
}

.hero__next:focus { outline: none; }
.hero__next:focus-visible { outline: 1px solid var(--chalk); outline-offset: 3px; }

@media (max-width: 720px) {
  .hero__next { width: 42px; height: 42px; right: 14px; }
}

/* ── Scroll cue, pinned to the right edge ───────────────────── */
.scroll-cue {
  position: fixed;
  right: clamp(14px, 2vw, 30px);
  top: 50%;
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  pointer-events: none;
  transform: translateY(-50%);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}

.scroll-cue__text {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--chalk);
  /* Reads top to bottom down the right-hand edge. */
  writing-mode: vertical-rl;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.9);
}

/* Vertical, and the pulse travels upward. */
.scroll-cue__line {
  width: 1px;
  height: 64px;
  background: var(--rule-strong);
  position: relative;
  overflow: hidden;
}

.scroll-cue__line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--chalk);
  transform: translateY(100%);
  animation: cueUp 2.4s var(--ease) infinite;
}

@keyframes cueUp {
  0%   { transform: translateY(100%); }
  60%  { transform: translateY(-100%); }
  100% { transform: translateY(-100%); }
}

/* Out of the way while the page is moving, back when it settles. */
.scroll-cue.is-moving { opacity: 0.15; }

/* And gone once the footer is in view. */
.scroll-cue.is-gone {
  opacity: 0;
  transform: translateY(-50%) translateX(14px);
}

@media (max-width: 720px) {
  .scroll-cue { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__slide { transition: none; }
  .scroll-cue__line::after { animation: none; }
}

/* ── Ticker: each beer in its own colour ────────────────────── */
.ticker__name {
  font-family: var(--display);
  font-stretch: 128%;
  font-weight: 700;
  font-size: 1em;
  letter-spacing: 0.02em;
  color: var(--accent, var(--chalk));
}

/* The generic `.ticker__item b` rule outranked the name class, which is
   why the beer name came out small and grey while the style ran large.
   Name first and in its own colour; the strength stays as the small
   mono note beside it. */
.ticker__item .ticker__name {
  font-family: var(--display);
  font-stretch: 128%;
  font-weight: 700;
  font-size: 1em;
  letter-spacing: 0.02em;
  color: var(--accent, var(--chalk));
}

/* ============================================================
   54. Beer page: second row of specs
   The malt and bearing panels are gone; hops, aromas and food
   moved up beside the figures. Their values are phrases rather
   than numbers, so they set in the body face at a readable size
   instead of the display face used for 5,4%.
   ============================================================ */

.specs--notes {
  margin-top: -10px;
  border-top: 0;
}

.spec__v--text {
  font-family: var(--body);
  font-stretch: normal;
  font-weight: 500;
  font-size: var(--fs-sm);
  line-height: 1.45;
  letter-spacing: 0;
  text-transform: none;
  color: var(--mist);
}

/* Phrases need more width than "5,4%" does. */
.specs--notes .spec { flex: 1 1 180px; }

@media (max-width: 640px) {
  .specs--notes .spec { flex: 1 1 100%; }
}

/* ── Second spec row: gold labels, plain values ─────────────── */
.specs--notes .spec__k {
  color: var(--gold);
  opacity: 1;
}

.specs--notes .spec__v--text {
  font-size: var(--fs-base);
  font-weight: 400;
  color: var(--chalk);
  opacity: 0.94;
}

/* The back link sat in a section with full padding above and below,
   which read as an empty band before the footer. */
.page-beer .section--tight:last-of-type {
  padding-block: clamp(18px, 2vw, 28px);
}

/* The beer's name on its own page carries the label colour, the same
   one used in the compass and the ticker. */
.page-beer .beer-hero__name { color: var(--accent, var(--chalk)); }

/* ── Breadcrumb on a beer page ───────────────────────────────
   Three steps, three weights: the site, the section, the beer. */
.crumbs__home {
  color: var(--chalk);
  font-weight: 700;
}

.crumbs__section { color: var(--gold); }
.crumbs__section:hover { color: var(--gold); opacity: 0.8; }

.crumbs__current { color: var(--accent, var(--chalk)); }

/* ── The real logo in place of the drawn mark ───────────────
   It is a photograph-weight bitmap rather than line art, so it
   needs a touch more room and should not spin on hover the way
   the drawn rose did — the wordmark inside it would turn upside
   down. A gentle fade is enough. */
.brand__logo {
  width: 34px;
  height: 34px;
  object-fit: contain;
  transition: opacity var(--t-mid) var(--ease);
}

.brand:hover .brand__logo { opacity: 0.75; transform: none; }
.brand picture { display: block; line-height: 0; flex-shrink: 0; }

@media (max-width: 380px) {
  .brand__logo { width: 30px; height: 30px; }
}

/* ============================================================
   55. Gallery
   Six photographs in an uneven grid rather than a even row of
   thumbnails: the wide shots take two columns and sit low, the
   tall ones take one and stand up. Ratios are baked into the
   files, so the grid never has to guess.
   ============================================================ */

.gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(10px, 1.1vw, 18px);
  grid-auto-flow: dense;
}

.gallery__item {
  margin: 0;
  overflow: hidden;
  border-radius: 14px;
  background: var(--ink-raise);
}

.gallery__item picture,
.gallery__item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gallery__item img {
  transition: transform 1.2s var(--ease), filter var(--t-mid) var(--ease);
  filter: contrast(1.03);
}

.gallery__item:hover img { transform: scale(1.04); }

.gallery__item--wide { grid-column: span 2; aspect-ratio: 3 / 2; }
.gallery__item--tall { grid-column: span 1; aspect-ratio: 4 / 5; }

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

@media (max-width: 520px) {
  .gallery__item--wide,
  .gallery__item--tall { grid-column: span 2; }
  .gallery__item--tall { aspect-ratio: 3 / 2; }
}

/* ============================================================
   56. Where to find our beer
   ============================================================ */

.find {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: clamp(20px, 2.4vw, 44px);
  align-items: start;
}

.find__map {
  min-height: clamp(320px, 42vh, 520px);
  border: 1px solid var(--rule);
  border-radius: 14px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: var(--ink-raise);
}

.find__map.is-live { display: block; }

.find__fallback {
  font-family: var(--mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dust);
  text-align: center;
  padding: 20px;
}

/* The map keeps its own colours — a fully grey map beside grey type was
   hard to read. Only Leaflet's chrome is brought into line with the page. */
.find__map .leaflet-container { background: #10130f; font-family: var(--body); }
.find__map .leaflet-control-attribution {
  background: rgba(0, 0, 0, 0.6);
  color: var(--dust);
  font-size: 10px;
}
.find__map .leaflet-control-attribution a { color: var(--mist); }
.find__map .leaflet-bar a {
  background: #111;
  color: var(--chalk);
  border-color: var(--rule);
}
.find__map .leaflet-bar a:hover { background: #1c1c1c; }
.find__map .leaflet-popup-content-wrapper,
.find__map .leaflet-popup-tip {
  background: #111;
  color: var(--chalk);
  border-radius: 8px;
}
.find__map .leaflet-popup-content { font-size: 0.86rem; line-height: 1.5; }

/* The pins themselves — red, as asked, with the tap room picked out. */
.map-pin span {
  display: block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #E4322B;
  border: 2px solid rgba(0, 0, 0, 0.85);
  box-shadow: 0 0 0 3px rgba(228, 50, 43, 0.28);
}

.map-pin--own span {
  background: var(--chalk);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.22);
}

.find__list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--rule);
}

.find__item {
  display: grid;
  gap: 4px;
  padding: 16px 0;
  border-bottom: 1px solid var(--rule);
}

.find__kind {
  font-family: var(--mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--dust);
}

.find__item.is-own .find__kind { color: var(--gold); }

.find__name {
  font-family: var(--display);
  font-stretch: 112%;
  font-weight: 700;
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  text-transform: uppercase;
  letter-spacing: -0.015em;
}

.find__addr { color: var(--mist); font-size: var(--fs-sm); }
.find__go { margin-top: 6px; justify-self: start; }

@media (max-width: 900px) {
  .find { grid-template-columns: 1fr; }
  .find__map { min-height: 300px; }
}

/* ── Gallery: the batch that has not been revealed yet ─────── */
.gallery__item[hidden] { display: none; }

.gallery__item.is-folded {
  opacity: 0;
  transform: translateY(24px) scale(0.98);
}

.gallery__item {
  opacity: 1;
  transform: none;
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}

.gallery__more {
  display: flex;
  justify-content: center;
  margin-top: clamp(20px, 2.6vw, 36px);
}

.gallery__more .btn.is-done {
  opacity: 0.45;
  cursor: default;
  pointer-events: none;
}
.gallery__more .btn.is-done .btn__arrow { display: none; }

@media (prefers-reduced-motion: reduce) {
  .gallery__item { transition: none; }
  .gallery__item.is-folded { opacity: 1; transform: none; }
}

/* ── Map, with 32 pins ──────────────────────────────────────
   The list beside it is now long enough to scroll on its own
   rather than stretching the section to the height of thirty
   entries. */
.find__list {
  max-height: clamp(320px, 42vh, 520px);
  overflow-y: auto;
  padding-right: 6px;
}

.find__list::-webkit-scrollbar { width: 6px; }
.find__list::-webkit-scrollbar-thumb { background: var(--rule-strong); border-radius: 3px; }
.find__list::-webkit-scrollbar-track { background: transparent; }

/* The house pin should still be findable in a list this long. */
.find__item.is-own {
  position: sticky;
  top: 0;
  background: var(--ink);
  z-index: 1;
}

@media (max-width: 900px) {
  .find__list { max-height: 380px; }
}

/* ============================================================
   57. Opening hours block
   The one light band on the site: a white ground, a photograph of
   the terrace, and a black card carrying the hours that overlaps
   it. The contrast is the point — it is the only place the page
   inverts, which is what makes it read as practical information
   rather than more atmosphere.
   ============================================================ */

.hoursblock {
  background: #ffffff;
  padding-block: clamp(40px, 5vw, 80px);
  color: var(--ink);
}

.hoursblock__inner {
  display: grid;
  /* Neither part is a share of the row. The photo has a width of its
     own and the card is sized by its content; the pair is centred in
     whatever is left. Giving the photo a fraction of the page was what
     blew it up once the card stopped taking half. */
  grid-template-columns: clamp(280px, 38vw, 560px) auto;
  justify-content: center;
  align-items: center;
  gap: 0;
}

.hoursblock__photo {
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  /* Sits under the card, which overlaps its right edge. */
  grid-column: 1;
  grid-row: 1;
  width: 100%;
  aspect-ratio: 4 / 3;
}

.hoursblock__photo picture,
.hoursblock__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hourscard {
  grid-column: 2;
  grid-row: 1;
  background: var(--ink);
  color: var(--chalk);
  border-radius: 14px;
  padding: clamp(30px, 3.4vw, 50px) clamp(26px, 3vw, 46px);
  text-align: center;
  /* Squarer: wide enough for the longest line, the address, and no more. */
  width: max-content;
  max-width: min(46ch, 42vw);
  /* Just enough overlap to read as a deliberate stack. */
  margin-left: clamp(-36px, -2.1vw, -11px);
  position: relative;
  z-index: 1;
}

.hourscard__title {
  font-family: var(--display);
  font-stretch: 118%;
  font-weight: 800;
  font-size: clamp(1.5rem, 2.8vw, 2.4rem);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1;
}

.hourscard__rule {
  display: block;
  width: 56px;
  height: 2px;
  background: var(--gold);
  margin: 18px auto clamp(20px, 2.4vw, 30px);
}

.hourscard__row--single {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.hourscard__when {
  font-family: var(--mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--dust);
}

.hourscard__time {
  font-family: var(--display);
  font-stretch: 112%;
  font-weight: 700;
  font-size: clamp(1.5rem, 2.6vw, 2.2rem);
  letter-spacing: 0.01em;
}

.hourscard__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
  font-size: var(--fs-sm);
}

.hourscard__list li {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  color: var(--mist);
}

.hourscard__list li.is-today { color: var(--chalk); font-weight: 600; }

.hourscard__addr {
  margin-top: clamp(18px, 2.2vw, 26px);
  font-family: var(--mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.12em;
  color: var(--dust);
  line-height: 1.7;
}

.hourscard__cta { margin-top: clamp(18px, 2vw, 26px); }

@media (max-width: 900px) {
  .hoursblock__inner {
    grid-template-columns: 1fr;
    justify-content: stretch;
    gap: 0;
  }
  .hoursblock__photo { grid-column: 1; grid-row: 1; aspect-ratio: 16 / 10; max-height: none; }
  .hourscard {
    grid-column: 1;
    grid-row: 2;
    margin-left: 0;
    margin-top: clamp(-52px, -7.5vw, -26px);
    width: min(100%, 440px);
    max-width: 100%;
    justify-self: center;
  }
}

/* ── Beer index: the four bottles above the intro ──────────── */
.range-lineup {
  margin: 0 0 clamp(22px, 2.6vw, 36px);
  border-radius: 14px;
  overflow: hidden;
  max-width: 900px;
}

.range-lineup picture,
.range-lineup img {
  display: block;
  width: 100%;
  height: auto;
}

/* ── Map popup: the directions link inside the bubble ──────── */
.map-popup__go {
  display: inline-block;
  margin-top: 10px;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--chalk);
  border-bottom: 1px solid var(--rule-strong);
  padding-bottom: 2px;
}

.map-popup__go:hover { border-bottom-color: var(--chalk); }

/* On a phone the map carries everything: the list underneath was a
   second copy of the same thirty-odd places, and the popup now has
   its own directions link. */
@media (max-width: 900px) {
  .find__list { display: none; }
  .find__map { min-height: 420px; }
}

/* ============================================================
   58. Location tile and page
   The menu band moved to its own page; in its place on the home
   page is a tile that links there. Same size and photograph
   treatment as before, but it is a link rather than a control,
   so the chevron points right and nothing expands.
   ============================================================ */

.band--link {
  text-decoration: none;
  color: inherit;
  display: flex;
  align-items: flex-end;
}

.band--link .band__bg { display: block; }

.band__toggle--static {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  pointer-events: none;
}

.band--link:hover .band__chev { transform: translateX(4px); }
.band--link .band__chev { transition: transform var(--t-mid) var(--ease); }
.band--link:focus { outline: none; }
.band--link:focus-visible { outline: 1px solid var(--chalk); outline-offset: -4px; }

/* On its own page the band has no neighbour, so it runs full width
   and the list opens straight underneath it. */
.bands--solo { grid-template-columns: 1fr; }
.bands--solo > .band { grid-column: 1; grid-row: 1; min-height: clamp(220px, 30vh, 380px); }
.bands--solo > .menupanel { grid-column: 1; grid-row: 2; }

@media (max-width: 900px) {
  .bands--solo > .band { min-height: clamp(220px, 32vh, 340px); }
}

/* ── Tile captions, more present ─────────────────────────────
   The hint sat right beside the heading and in the same faint
   grey as a footnote. Pushed to the far edge of the tile and set
   in plain white, it reads as the thing you are meant to click. */
.band--link .band__inner {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: clamp(20px, 3vw, 60px);
  width: 100%;
  flex-wrap: wrap;
}

.band--link .band__toggle--static { margin-left: auto; }

.band--link .band__hint,
.merch__lead {
  color: var(--chalk);
  opacity: 0.96;
}

.band--link .band__hint {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.22em;
}

.merch__lead {
  font-size: var(--fs-base);
  font-weight: 500;
}

@media (max-width: 720px) {
  .band--link .band__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
  .band--link .band__toggle--static { margin-left: 0; }
  .band--link .band__hint { font-size: 0.74rem; letter-spacing: 0.18em; }
}

/* ============================================================
   59. Round of fixes
   ============================================================ */

/* ── Directions inside the map popup ─────────────────────────
   It was a bare underlined link in the middle of a dark bubble.
   Same small outlined button the rest of the site uses. */
.map-popup__go {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 8px 14px;
  border: 1px solid var(--rule-strong);
  border-radius: 4px;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--chalk);
  text-decoration: none;
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease);
}

.map-popup__go::after { content: "↗"; font-size: 0.85em; }

.map-popup__go:hover {
  background: var(--chalk);
  border-color: var(--chalk);
  color: var(--ink);
}

/* ── Breadcrumb to content ───────────────────────────────────
   Four separate paddings stacked here: the nav height, a large
   clamp on top of it, the header's own bottom padding, and then
   the full section rhythm underneath. Together they pushed the
   first heading most of a screen down the page. Cut to the bone:
   the nav height is unavoidable because the bar is fixed, the
   rest is a handful of pixels. !important because several older
   rules for the same element are still in the file and some
   pages set padding inline. */
.page-head {
  padding-top: calc(var(--nav-h) + 8px) !important;
  padding-bottom: 10px !important;
}

.page-head .crumbs { margin-bottom: 10px; }

.page-head__title { margin-block: 6px 0 !important; }

.page-head .lead { margin-top: 14px !important; }

.page-head + .section,
.page-head + .bands,
.page-head + section,
.page-head + * > .section:first-child { padding-top: 14px !important; }

@media (max-width: 720px) {
  .page-head {
    padding-top: calc(var(--nav-h) + 6px) !important;
    padding-bottom: 8px !important;
  }
  .page-head + .section,
  .page-head + section { padding-top: 12px !important; }
}

/* ── Footer on a phone ───────────────────────────────────────
   The page list repeats the drawer, which is a tap away at the
   top of every screen. On a narrow column it turned the footer
   into a long stack of near-identical links. */
@media (max-width: 720px) {
  .footer__col--links { display: none; }
}

/* Pages whose header carries only the breadcrumb: no rule, no gap. */
.page-head--bare {
  border-bottom: 0;
  padding-bottom: 0 !important;
}

/* ============================================================
   60. Subpages: pull the content up under the breadcrumb
   Measured on the live page, the paddings between the crumb, the
   title and the next block were already 10–14px. What still read
   as a gap was the next block itself: tall photo bands whose text
   sits at the bottom, and section heads with a full rhythm of
   space under them. So this section shortens those instead of
   shaving paddings that were already at the bone.
   ============================================================ */

/* Breathing room, not a canyon: enough to separate the breadcrumb
   from the heading and the heading from what follows, but nothing
   like the screenful that was here before. */
.page-head { padding-bottom: 26px !important; }

.page-head .crumbs { margin-bottom: 24px; }

.page-head + .section,
.page-head + section,
.page-head + .bands,
.page-head + * > .section:first-child { padding-top: 26px !important; }

/* The price-list band on the location page: shorter, and its label
   sits in the middle rather than at the foot of a tall photo. */
.bands--solo > .band {
  min-height: clamp(150px, 20vh, 240px) !important;
  align-items: center;
}

.bands--solo > .band .band__inner { padding-block: clamp(14px, 2vw, 26px); }

/* Section heads directly under a page header do not need the full
   rhythm below them either. */
.page-head + .section .section-head,
.page-head + section .section-head { margin-bottom: clamp(14px, 1.8vw, 26px); }

/* The lead sits under the title, close but not touching. */
.page-head .lead { margin-top: 16px !important; }

@media (max-width: 720px) {
  .page-head { padding-bottom: 20px !important; }
  .page-head .crumbs { margin-bottom: 18px; }

  .page-head + .section,
  .page-head + section,
  .page-head + .bands { padding-top: 20px !important; }

  .bands--solo > .band { min-height: clamp(140px, 22vh, 200px) !important; }
}