/* =========================================================
   Truth Hurts Brewery & Tap: Stylesheet
   Designed to feel editorial: deep typography, generous
   negative space, the bracket motif from the logo as a
   recurring device, and the hop-fan illustration borrowed
   from the pump clips as background ornament.
   ========================================================= */

/* -----  Tokens  ---------------------------------------- */
:root {
  /* Brand */
  --c-teal:        #67BEAF;
  --c-teal-deep:   #3F8E81;
  --c-teal-tint:   #C7E5DF;

  /* Neutrals: warm, not flat */
  --c-bone:        #F4EFE6;
  --c-bone-2:      #EAE2D2;
  --c-ink:         #1A1817;
  --c-ink-2:       #2B2725;

  /* Accents: pulled from pump clips */
  --c-peach:       #F1B796;
  --c-mustard:     #E5B83B;
  --c-cherry:      #D94835;
  --c-aubergine:   #2A1E2A;

  /* Type */
  --f-display:     "Big Shoulders Display", "Anton", "Impact", system-ui, sans-serif;
  --f-body:        "Manrope", "Inter", system-ui, sans-serif;
  --f-mono:        "Space Mono", "JetBrains Mono", ui-monospace, monospace;

  /* Spacing scale */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --s-10: 9rem;

  /* Layout */
  --container:     1280px;
  --gutter:        clamp(1.25rem, 4vw, 2.5rem);
  --header-h:      72px;
  --radius:        4px;
  --radius-lg:     12px;

  /* Motion */
  --ease-out:      cubic-bezier(.2, .65, .25, 1);
  --ease-in-out:   cubic-bezier(.65, 0, .35, 1);

  /* Page baseline */
  --bg:            var(--c-bone);
  --fg:            var(--c-ink);
}

/* -----  Reset / Base  ---------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.55;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; background: none; border: 0; color: inherit; }

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

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--c-ink); color: var(--c-bone);
  padding: 0.75rem 1rem; font-weight: 700; z-index: 1000;
}
.skip-link:focus { left: 1rem; top: 1rem; }

/* -----  Layout primitives  ----------------------------- */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* -----  Typography utilities  -------------------------- */
.kicker {
  font-family: var(--f-mono);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-ink-2);
  margin: 0 0 var(--s-5);
  display: inline-flex; align-items: center; gap: 0.5ch;
}
.kicker .bracket {
  color: var(--c-teal);
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 1.15em;
  line-height: 1;
  transform: translateY(-0.04em);
}

.display-title {
  font-family: var(--f-display);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 0.92;
  text-transform: none;
  margin: 0;
  color: var(--c-ink);
  text-wrap: balance;
}
.display-title em {
  font-style: normal;
  color: var(--c-teal-deep);
  position: relative;
}

/* -----  Buttons & links  ------------------------------- */
.btn {
  --btn-bg: var(--c-ink);
  --btn-fg: var(--c-bone);
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.5rem;
  padding: 1rem 1.6rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--f-body);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  border-radius: 999px;
  transition: transform 0.25s var(--ease-out),
              background 0.25s var(--ease-out),
              color 0.25s var(--ease-out);
  border: 1.5px solid var(--btn-bg);
  white-space: nowrap;
  text-align: center;
}
.btn:hover { transform: translateY(-2px); }
.btn:focus-visible { outline: 2px solid var(--c-teal); outline-offset: 3px; }

.btn--primary {
  --btn-bg: var(--c-teal);
  --btn-fg: var(--c-ink);
}
.btn--primary:hover { --btn-bg: var(--c-teal-deep); --btn-fg: var(--c-bone); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--c-ink);
  border-color: var(--c-ink);
}
.btn--ghost:hover { --btn-bg: var(--c-ink); --btn-fg: var(--c-bone); }

.btn--small { padding: 0.65rem 1.1rem; font-size: 0.84rem; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 0.4em;
  font-weight: 700;
  font-size: 0.95rem;
  border-bottom: 2px solid var(--c-ink);
  padding-bottom: 0.15em;
  transition: gap 0.25s var(--ease-out), color 0.25s var(--ease-out);
}
.link-arrow:hover { gap: 0.8em; color: var(--c-teal-deep); border-color: var(--c-teal-deep); }
.link-arrow--lg { font-size: 1.05rem; }

/* -----  Header  ---------------------------------------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 100;
  height: var(--header-h);
  display: flex; align-items: center;
  background: var(--c-ink);
  color: var(--c-bone);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  transition: border-color 0.3s var(--ease-out);
}
.site-header.is-scrolled {
  border-bottom-color: rgba(255,255,255,0.14);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%;
  gap: 2rem;
}
.site-header__logo {
  display: flex; align-items: center;
  height: 44px;
  color: var(--c-bone);
  transition: transform 0.3s var(--ease-out);
}
.site-header__logo:hover { transform: rotate(-1.2deg) scale(1.02); }
.site-header__logo .logo-svg {
  height: 44px; width: auto;
  pointer-events: none;
  /* Monochrome white: bracket frame inherits currentColor with the rest. */
}

.primary-nav ul {
  list-style: none; padding: 0; margin: 0;
  display: flex; align-items: center; gap: 1.6rem;
}
.primary-nav a {
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--c-bone);
  position: relative;
  padding: 0.4em 0;
  transition: color 0.25s var(--ease-out);
}
.primary-nav a:hover { color: var(--c-teal); }
.primary-nav a::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -2px;
  height: 2px; background: var(--c-teal);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.3s var(--ease-out);
}
.primary-nav a:hover::after,
.primary-nav a:focus-visible::after { transform: scaleX(1); }

.site-header__actions {
  display: flex; align-items: center; gap: 0.75rem;
}

.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  flex-direction: column; justify-content: center; align-items: center;
  gap: 5px;
}
.nav-toggle span {
  width: 22px; height: 2px; background: var(--c-bone);
  transition: transform 0.3s var(--ease-out), opacity 0.2s var(--ease-out);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.primary-nav-mobile {
  /* Hidden by default. The mobile breakpoint flips this to `block`.
     Belt-and-braces against ever painting at desktop sizes. */
  display: none;
  position: fixed; top: var(--header-h); left: 0; right: 0;
  background: var(--c-ink);
  color: var(--c-bone);
  padding: 2rem var(--gutter) 3rem;
  /* Translate by element height + header offset (+ a few px) so the
     drawer's bottom edge clears the viewport even with subpixel rounding.
     A plain `translateY(-110%)` left a sliver of the drawer poking into
     the header and obscuring the top of the logo. */
  transform: translateY(calc(-100% - var(--header-h) - 8px));
  visibility: hidden;
  transition: transform 0.4s var(--ease-out), visibility 0s linear 0.4s;
  z-index: 99;
}
.primary-nav-mobile.is-open {
  transform: translateY(0);
  visibility: visible;
  transition: transform 0.4s var(--ease-out), visibility 0s linear 0s;
}
.primary-nav-mobile ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.4rem; }
.primary-nav-mobile a {
  font-family: var(--f-display);
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.005em;
}
.primary-nav-mobile a.btn {
  font-family: var(--f-body);
  font-size: 0.95rem;
  margin-top: 0.5rem;
  width: max-content;
}

/* -----  HERO  ------------------------------------------ */
.hero {
  position: relative;
  min-height: 100svh;
  padding-top: calc(var(--header-h) + clamp(2rem, 6vw, 5rem));
  padding-bottom: clamp(4rem, 10vw, 8rem);
  display: flex; align-items: center;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(103,190,175,0.18), transparent 60%),
    var(--c-bone);
}

.hero__fan {
  position: absolute;
  top: 50%; right: -12vw;
  width: min(70vw, 850px);
  aspect-ratio: 1;
  transform: translateY(-50%);
  color: var(--c-teal);
  z-index: -1;
  opacity: 0.85;
}
.hero__fan svg { width: 100%; height: 100%; }
.hero__fan .fan {
  animation: fan-spin 120s linear infinite;
  transform-origin: 300px 300px;
  transform-box: view-box;
}
@keyframes fan-spin { to { transform: rotate(360deg); } }

.hero__inner { position: relative; max-width: 1100px; }

.hero__title {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: clamp(4rem, 14vw, 14rem);
  line-height: 0.86;
  letter-spacing: -0.02em;
  text-transform: none;
  margin: 0 0 var(--s-7);
  color: var(--c-ink);
}
.hero__title-line {
  display: block;
  position: relative;
}
.hero__title-line:nth-child(2) { padding-left: 0.5em; }
.hero__title-line:nth-child(3) { padding-left: 1.4em; color: var(--c-teal-deep); }
.hero__title-line:nth-child(4) { padding-left: 2.2em; color: var(--c-teal-deep); }
.hero__title-line--accent { color: var(--c-teal-deep); }

@media (max-width: 720px) {
  .hero__title-line:nth-child(2) { padding-left: 0.3em; }
  .hero__title-line:nth-child(3) { padding-left: 0.6em; }
  .hero__title-line:nth-child(4) { padding-left: 1em; }
}

.hero__sub {
  max-width: 38rem;
  font-size: clamp(1rem, 1.4vw, 1.25rem);
  line-height: 1.5;
  color: var(--c-ink-2);
  margin: 0 0 var(--s-7);
}

.hero__ctas {
  display: flex; gap: 0.75rem; flex-wrap: wrap;
}

.hero__scroll {
  position: absolute;
  bottom: 2rem; right: var(--gutter);
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--f-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-ink);
}
.hero__scroll svg {
  width: 18px; height: 18px;
  animation: scroll-bounce 1.8s var(--ease-in-out) infinite;
}
@keyframes scroll-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}

/* -----  Marquee strip  --------------------------------- */
.marquee {
  background: var(--c-ink);
  color: var(--c-bone);
  padding: 1rem 0;
  overflow: hidden;
  border-block: 1px solid color-mix(in srgb, var(--c-bone) 12%, transparent);
}
.marquee__track {
  display: inline-flex; gap: 2rem;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(1.1rem, 2vw, 1.6rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  animation: marquee-scroll 40s linear infinite;
  padding-right: 2rem;
}
.marquee__dot { color: var(--c-teal); }
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* -----  Manifesto  ------------------------------------- */
.manifesto {
  padding: clamp(5rem, 10vw, 9rem) 0;
  background: var(--c-bone);
  position: relative;
}
.manifesto::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(40% 60% at 90% 30%, rgba(241,183,150,0.35), transparent 70%),
    radial-gradient(35% 60% at 10% 80%, rgba(103,190,175,0.25), transparent 70%);
  z-index: 0;
}
.manifesto__inner { position: relative; max-width: 1100px; }
.manifesto__title {
  font-size: clamp(2.4rem, 7vw, 6rem);
  margin-bottom: var(--s-7);
}
.manifesto__copy {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 2.5rem;
  max-width: 1000px;
  margin-left: auto;
  font-size: 1.1rem;
  line-height: 1.6;
}
.manifesto__copy p { margin: 0; }
.manifesto__copy p ~ p { grid-column: 2; margin-top: 0; }
.manifesto__sign {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: 0.01em;
  color: var(--c-teal-deep);
  grid-column: 2;
}
/* Exterior photo sits in the left column under the opening paragraph,
   spanning the rows the remaining copy occupies on the right. */
.manifesto__photo {
  grid-column: 1;
  grid-row: 2 / span 3;
  align-self: start;
  margin: 0;
}
.manifesto__photo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
}
.manifesto__photo figcaption {
  margin-top: 0.75rem;
  font-family: var(--f-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-teal-deep);
}
@media (max-width: 720px) {
  .manifesto__copy { grid-template-columns: 1fr; gap: 1.25rem; }
  .manifesto__copy p ~ p,
  .manifesto__sign { grid-column: 1; }
  .manifesto__photo { grid-column: 1; grid-row: auto; }
}

/* -----  Section heads  --------------------------------- */
.section-head { margin-bottom: clamp(2.5rem, 6vw, 5rem); max-width: 900px; }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head__title {
  font-size: clamp(2.4rem, 7vw, 5.5rem);
  margin-bottom: var(--s-5);
}
.section-head__title-accent { color: var(--c-teal-deep); }
.section-head__intro {
  max-width: 38rem;
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--c-ink-2);
  margin: 0 auto;
}

/* -----  Spaces  ---------------------------------------- */
.spaces {
  padding: clamp(5rem, 10vw, 9rem) 0;
  background:
    linear-gradient(var(--c-bone), var(--c-bone-2));
}

.space-card {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  align-items: center;
  gap: clamp(2rem, 6vw, 5rem);
  padding-block: clamp(2rem, 5vw, 4rem);
  border-bottom: 1px solid rgba(26,24,23,0.1);
}
.space-card:last-of-type { border-bottom: 0; }
.space-card--reverse { grid-template-columns: 1fr 1.05fr; }
.space-card--reverse .space-card__media { order: 2; }

.space-card__media {
  position: relative;
  aspect-ratio: 5 / 4;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--c-ink);
  isolation: isolate;
}
.space-card__photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
}
/* Subtle gradient so the number badge (top-left) and sticker stay legible
   against whatever happens to be behind them in the photo. */
.space-card__media::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0) 32%, rgba(0,0,0,0) 68%, rgba(0,0,0,0.25) 100%);
  pointer-events: none;
  z-index: 1;
}

/* Photo crossfade: a card with more than one .space-card__photo cycles
   through them. js/main.js adds .is-active to the photo on show and .is-prev
   to the one it replaces, so the new photo fades in over the old one with no
   dip to the dark background. Without JS, or with reduced motion, the first
   photo simply stays put. */
.space-card__media--fade .space-card__photo {
  opacity: 0;
  transition: opacity 1s ease;
}
.space-card__media--fade .space-card__photo.is-prev { opacity: 1; }
.space-card__media--fade .space-card__photo.is-active { opacity: 1; z-index: 1; }
.space-card__media--fade:not(.is-ready) .space-card__photo:first-of-type { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .space-card__media--fade .space-card__photo { transition: none; }
}
.space-card__media-frame {
  position: absolute; inset: 0;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  z-index: 2;
}
.space-card__number {
  position: absolute;
  top: 1.5rem; left: 1.5rem;
  font-family: var(--f-mono);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--c-bone);
  opacity: 0.7;
  z-index: 2;
}
.space-card__visual {
  width: 100%; height: 100%;
  position: relative;
  display: grid; place-items: center;
  isolation: isolate;
  border-radius: var(--radius);
}

/* Generative visuals: the brand mandala in three colorways */
.space-card__visual::before,
.space-card__visual::after {
  content: ""; position: absolute; inset: 0;
}
/* Tap Room: Teal mandala on ink */
.space-card__visual--taproom {
  background:
    radial-gradient(circle at 50% 50%, var(--c-teal-deep) 0%, var(--c-ink) 75%);
}
.space-card__visual--taproom::before {
  background-image:
    repeating-conic-gradient(from 0deg at 50% 50%,
      rgba(103,190,175,0.85) 0deg 9deg,
      transparent 9deg 22.5deg);
  mask-image: radial-gradient(circle, #000 10%, #000 60%, transparent 80%);
  -webkit-mask-image: radial-gradient(circle, #000 10%, #000 60%, transparent 80%);
}
.space-card__visual--taproom::after {
  background:
    radial-gradient(circle at 50% 50%, transparent 38%, var(--c-ink) 38.5%, var(--c-ink) 42%, transparent 42.5%);
}

/* Side Room: Peach mandala on aubergine */
.space-card__visual--sideroom {
  background:
    radial-gradient(circle at 50% 50%, var(--c-peach) 0%, var(--c-aubergine) 80%);
}
.space-card__visual--sideroom::before {
  background-image:
    repeating-conic-gradient(from 0deg at 50% 50%,
      var(--c-aubergine) 0deg 7deg,
      transparent 7deg 22.5deg);
  mask-image: radial-gradient(circle, #000 12%, #000 65%, transparent 82%);
  -webkit-mask-image: radial-gradient(circle, #000 12%, #000 65%, transparent 82%);
  opacity: 0.85;
}
.space-card__visual--sideroom::after {
  background:
    radial-gradient(circle at 50% 50%, transparent 36%, var(--c-aubergine) 36.5%, var(--c-aubergine) 40%, transparent 40.5%);
}

/* Snug: Mustard mandala on aubergine */
.space-card__visual--snug {
  background:
    radial-gradient(circle at 50% 50%, var(--c-mustard) 0%, var(--c-aubergine) 75%);
}
.space-card__visual--snug::before {
  background-image:
    repeating-conic-gradient(from 0deg at 50% 50%,
      var(--c-cherry) 0deg 6deg,
      transparent 6deg 22.5deg);
  mask-image: radial-gradient(circle, #000 12%, #000 60%, transparent 78%);
  -webkit-mask-image: radial-gradient(circle, #000 12%, #000 60%, transparent 78%);
  opacity: 0.7;
}
.space-card__visual--snug::after {
  background:
    radial-gradient(circle at 50% 50%, transparent 35%, var(--c-aubergine) 35.5%, var(--c-aubergine) 39%, transparent 39.5%);
}

.space-card__sticker {
  position: relative; z-index: 3;
  padding: 0.55rem 1rem;
  background: var(--c-bone);
  color: var(--c-ink);
  font-family: var(--f-mono);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transform: rotate(-2deg);
  box-shadow: 0 6px 18px rgba(0,0,0,0.18);
  border-radius: 2px;
}

.space-card__body { padding: 1rem 0; }
.space-card__title {
  font-size: clamp(2.2rem, 5vw, 4rem);
  margin: 0.4em 0 0.6em;
}
.space-card__lede {
  font-size: 1.1rem;
  line-height: 1.55;
  color: var(--c-ink-2);
  margin: 0 0 1.5rem;
  max-width: 36em;
}
.space-card__features {
  list-style: none; padding: 0;
  margin: 0 0 1.75rem;
  display: grid;
  gap: 0.9rem;
  border-top: 1px solid rgba(26,24,23,0.12);
  padding-top: 1.25rem;
}
.space-card__features li {
  display: grid;
  grid-template-columns: 8.5rem 1fr;
  gap: 1rem;
  align-items: baseline;
  font-size: 1rem;
}
.space-card__features li span {
  font-family: var(--f-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-teal-deep);
}

@media (max-width: 880px) {
  .space-card,
  .space-card--reverse { grid-template-columns: 1fr; gap: 1.5rem; }
  .space-card--reverse .space-card__media { order: -1; }
  .space-card__features li { grid-template-columns: 1fr; gap: 0.1rem; }
}

/* -----  Beer / Pump-clip marquee  ---------------------- */
.beer {
  padding: clamp(5rem, 10vw, 9rem) 0;
  background: var(--c-ink);
  color: var(--c-bone);
}
.beer .kicker { color: var(--c-teal); }
.beer .kicker .bracket { color: var(--c-teal); }
.beer .section-head__title { color: var(--c-bone); }
.beer .section-head__intro { color: rgba(244,239,230,0.78); }

.clip-marquee {
  margin: clamp(2rem, 5vw, 4rem) 0;
  /* Clip horizontally only: vertical needs to bleed so hover-scaled
     clips don't get cropped at top / bottom of the marquee box. */
  overflow-x: clip;
  overflow-y: visible;
  padding-block: 2.25rem;
  width: 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.clip-marquee__track {
  display: flex;
  flex-shrink: 0;
  width: max-content;
  gap: 2rem;
  padding-right: 2rem; /* keeps the trailing gap so -50% lands cleanly */
  animation: clip-scroll 100s linear infinite;
  will-change: transform;
}
.clip-marquee:hover .clip-marquee__track,
.clip-marquee:focus-within .clip-marquee__track { animation-play-state: paused; }
@keyframes clip-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

.clip {
  position: relative;
  flex: 0 0 auto;
  width: clamp(180px, 22vw, 280px);
  margin: 0;
  text-align: center;
  transition: transform 0.4s var(--ease-out);
}
.clip:hover {
  z-index: 5;
  transform: translateY(-12px) scale(1.06);
}
.clip img {
  width: 100%; aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
  box-shadow:
    0 14px 40px rgba(0,0,0,0.4),
    0 0 0 1px rgba(244,239,230,0.05);
  background: var(--c-bone);
}
.clip figcaption {
  margin-top: 0.85rem;
  font-family: var(--f-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-bone);
}
.clip figcaption span { display: block; font-weight: 700; }
.clip figcaption em {
  display: block;
  font-style: normal; font-weight: 400;
  color: rgba(244,239,230,0.6);
  margin-top: 0.2rem;
}

.beer__pillars {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  margin-top: clamp(2.5rem, 6vw, 4rem);
  padding-top: clamp(2.5rem, 6vw, 4rem);
  border-top: 1px solid rgba(244,239,230,0.12);
}
.pillar { text-align: left; }
.pillar__num {
  font-family: var(--f-display);
  font-size: clamp(3rem, 6vw, 5rem);
  font-weight: 800;
  line-height: 1;
  color: var(--c-teal);
  margin: 0 0 0.5rem;
}
.pillar__label {
  font-family: var(--f-mono);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-bone);
  margin: 0 0 0.65rem;
}
.pillar__copy {
  font-size: 0.95rem;
  line-height: 1.5;
  color: rgba(244,239,230,0.7);
  margin: 0;
}
@media (max-width: 880px) {
  .beer__pillars { grid-template-columns: repeat(2, 1fr); gap: 1.75rem; }
}
@media (max-width: 480px) {
  .beer__pillars { grid-template-columns: 1fr; }
}

.beer__trade {
  margin-top: clamp(3rem, 7vw, 5rem);
  padding-top: clamp(2.5rem, 5vw, 3.5rem);
  border-top: 1px solid rgba(244,239,230,0.12);
  text-align: center;
  max-width: 760px;
  margin-inline: auto;
}
.beer__trade .kicker { color: var(--c-teal); }
.beer__trade .kicker .bracket { color: var(--c-teal); }
.beer__trade-title {
  font-size: clamp(1.8rem, 4vw, 3rem);
  color: var(--c-bone);
  margin: 0 0 1rem;
}
.beer__trade-title em { color: var(--c-teal); font-style: normal; }
.beer__trade-copy {
  font-size: 1.05rem;
  line-height: 1.55;
  color: rgba(244,239,230,0.78);
  margin: 0 auto 1.75rem;
  max-width: 38rem;
}

/* -----  People  ---------------------------------------- */
.people {
  padding: clamp(5rem, 10vw, 9rem) 0;
  background: var(--c-bone);
}
.people__grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}
.people__title {
  font-size: clamp(2.4rem, 6.5vw, 5.25rem);
  margin: 0 0 var(--s-6);
}
.people__title em {
  color: var(--c-teal-deep);
}
.people__lede {
  font-size: 1.15rem;
  line-height: 1.55;
  color: var(--c-ink);
  margin: 0 0 1.25rem;
  font-weight: 500;
}
.people__lede a { border-bottom: 2px solid var(--c-teal); padding-bottom: 0.05em; transition: color 0.25s; }
.people__lede a:hover { color: var(--c-teal-deep); }

.people__body {
  font-size: 1rem;
  line-height: 1.62;
  color: var(--c-ink-2);
  margin: 0 0 1.25rem;
  max-width: 38em;
}

.people__quote {
  position: relative;
  background: var(--c-ink);
  color: var(--c-bone);
  padding: clamp(2rem, 5vw, 3.5rem);
  border-radius: var(--radius-lg);
  isolation: isolate;
  overflow: hidden;
}
.people__quote::after {
  content: ""; position: absolute; inset: -40% -20% auto auto;
  width: 90%; aspect-ratio: 1;
  background:
    repeating-conic-gradient(from 0deg at 50% 50%,
      rgba(103,190,175,0.6) 0deg 8deg,
      transparent 8deg 22.5deg);
  mask-image: radial-gradient(circle, #000 30%, transparent 65%);
  -webkit-mask-image: radial-gradient(circle, #000 30%, transparent 65%);
  opacity: 0.5;
  z-index: -1;
}
.quote-mark {
  font-family: var(--f-display);
  font-size: 6rem;
  line-height: 0.5;
  color: var(--c-teal);
  display: block;
  margin-bottom: -1rem;
}
.people__quote blockquote { margin: 0; padding: 0; }
.people__quote blockquote p {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  line-height: 1.15;
  margin: 0 0 1.5rem;
  color: var(--c-bone);
}
.people__quote cite {
  font-family: var(--f-mono);
  font-style: normal;
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-teal);
}

.people__links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 2rem;
  margin-top: 0.5rem;
}

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

/* -----  What's On  ------------------------------------- */
.whats-on {
  padding: clamp(5rem, 10vw, 9rem) 0;
  background: var(--c-bone-2);
}

.events {
  list-style: none; padding: 0; margin: 0 0 clamp(3rem, 6vw, 4.5rem);
  display: grid;
  gap: 0;
  max-width: 960px;
  margin-inline: auto;
}
.event {
  display: grid;
  grid-template-columns: 10rem 1fr;
  gap: clamp(1rem, 4vw, 3rem);
  padding: clamp(1.5rem, 3vw, 2.25rem) 0;
  border-top: 1px solid rgba(26,24,23,0.12);
  align-items: baseline;
}
.event:last-child { border-bottom: 1px solid rgba(26,24,23,0.12); }
.event__when {
  font-family: var(--f-mono);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-teal-deep);
  margin: 0;
}
.event__body { margin: 0; }
.event__title {
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  margin: 0 0 0.5em;
  color: var(--c-ink);
}
.event__title em {
  font-style: normal;
  color: var(--c-teal-deep);
  font-weight: 700;
}
.event__copy {
  font-size: 1rem;
  line-height: 1.55;
  color: var(--c-ink-2);
  margin: 0;
  max-width: 44em;
}

.whats-on__socials {
  background: var(--c-ink);
  color: var(--c-bone);
  padding: clamp(2rem, 4vw, 3rem);
  border-radius: var(--radius-lg);
  text-align: center;
  max-width: 760px;
  margin-inline: auto;
}
.whats-on__socials .kicker { color: var(--c-teal); margin-bottom: 0.75rem; }
.whats-on__socials .kicker .bracket { color: var(--c-teal); }
.whats-on__socials-copy {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(1.25rem, 2.2vw, 1.75rem);
  line-height: 1.2;
  color: var(--c-bone);
  margin: 0 0 1.5rem;
}
.whats-on__socials-buttons {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
}
.whats-on__socials .btn--ghost {
  --btn-fg: var(--c-bone);
  border-color: var(--c-bone);
}
.whats-on__socials .btn--ghost:hover {
  --btn-bg: var(--c-bone);
  --btn-fg: var(--c-ink);
}

@media (max-width: 600px) {
  .event {
    grid-template-columns: 1fr;
    gap: 0.4rem;
    padding-block: 1.4rem;
  }
}

/* -----  Visit  ----------------------------------------- */
.visit {
  padding: clamp(5rem, 10vw, 9rem) 0;
  background: var(--c-bone-2);
  position: relative;
}
.visit__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.25rem;
}
.visit__panel {
  background: var(--c-bone);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(26,24,23,0.08);
}
.visit__panel--address { grid-column: span 5; }
.visit__panel--hours   { grid-column: span 4; }
.visit__panel--travel  { grid-column: span 3; }
.visit__panel--welcome { grid-column: span 12; }
.visit__panel--contact { grid-column: span 12; background: var(--c-ink); color: var(--c-bone); border-color: transparent; }
.visit__panel--contact .kicker { color: var(--c-teal); }
.visit__panel--contact .kicker .bracket { color: var(--c-teal); }
.visit__panel--contact a { color: var(--c-bone); }
.visit__panel--contact a:hover { color: var(--c-teal); }

.welcome__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.25rem, 4vw, 2.5rem);
  margin-top: 0.25rem;
}
.welcome__item { display: grid; gap: 0.4rem; }
.welcome__label {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  letter-spacing: -0.005em;
  color: var(--c-teal-deep);
  margin: 0;
}
.welcome__copy {
  font-size: 1.02rem;
  line-height: 1.5;
  color: var(--c-ink-2);
  margin: 0;
  max-width: 32em;
}
.welcome__copy em { font-style: normal; font-weight: 700; color: var(--c-ink); }
@media (max-width: 640px) {
  .welcome__grid { grid-template-columns: 1fr; }
}

.visit__big {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 2.8vw, 2.4rem);
  line-height: 1.1;
  margin: 0 0 1.25rem;
}
.visit__big em { color: var(--c-teal-deep); font-style: normal; }
.visit__big--small { font-size: clamp(1.25rem, 2vw, 1.75rem); }
.visit__panel--contact .visit__big em { color: var(--c-teal); }

.hours { margin: 0; }
.hours__row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: 0.55rem 0;
  border-bottom: 1px dashed rgba(26,24,23,0.15);
  font-size: 1rem;
}
.hours__row:last-child { border-bottom: 0; }
.hours__row dt {
  font-family: var(--f-mono);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
}
.hours__row dd { margin: 0; font-weight: 600; display: flex; align-items: center; gap: 0.5rem; }
.hours__row--closed dd { color: rgba(26,24,23,0.45); font-weight: 400; }
.hours__tag {
  font-family: var(--f-mono);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: var(--c-teal);
  color: var(--c-ink);
  padding: 0.18rem 0.45rem;
  border-radius: 999px;
}

.travel { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.85rem; }
.travel li {
  display: grid;
  grid-template-columns: 4rem 1fr;
  gap: 0.6rem;
  font-size: 0.95rem;
  align-items: baseline;
}
.travel li span {
  font-family: var(--f-mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--c-teal-deep);
}

.contact-list { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: 0.5rem; }
.contact-list li {
  display: grid;
  grid-template-columns: 5rem 1fr;
  gap: 0.5rem; align-items: baseline;
  font-size: 1rem;
}
.contact-list__label {
  font-family: var(--f-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(244,239,230,0.55);
}
.contact-list a { font-weight: 600; overflow-wrap: anywhere; }

/* Two contact groups side by side: the bar (Karl & Lenny) and trade sales (Andy) */
.contact-groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1.5rem 3rem;
  margin: 0 0 1.75rem;
}
.contact-group .contact-list { margin: 0; }
.contact-group__title {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--c-bone);
  margin: 0 0 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(244,239,230,0.15);
}
.contact-group__title span {
  color: var(--c-teal);
  font-weight: 600;
  margin-left: 0.4em;
}

@media (max-width: 880px) {
  .visit__panel--address { grid-column: span 12; }
  .visit__panel--hours   { grid-column: span 12; }
  .visit__panel--travel  { grid-column: span 12; }
}

/* -----  Footer  ---------------------------------------- */
.site-footer {
  background: var(--c-ink);
  color: var(--c-bone);
  padding: clamp(4rem, 8vw, 7rem) 0 2rem;
  position: relative;
  overflow: hidden;
}
.site-footer::before {
  content: ""; position: absolute; inset: -20% -20% auto auto;
  width: 70vw; aspect-ratio: 1;
  background:
    repeating-conic-gradient(from 0deg at 50% 50%,
      rgba(103,190,175,0.45) 0deg 7deg,
      transparent 7deg 22.5deg);
  mask-image: radial-gradient(circle, #000 25%, transparent 65%);
  -webkit-mask-image: radial-gradient(circle, #000 25%, transparent 65%);
  opacity: 0.45;
  pointer-events: none;
}

.site-footer__wordmark {
  font-size: clamp(2.5rem, 8vw, 7.5rem);
  margin: 0 0 clamp(3rem, 7vw, 5rem);
  color: var(--c-bone);
}
.site-footer__wordmark::after {
  content: "";
  display: block;
  width: 80px; height: 4px;
  background: var(--c-teal);
  margin-top: 1.5rem;
}

.site-footer__grid {
  display: grid;
  grid-template-columns: 2fr repeat(3, 1fr);
  gap: 2.5rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid rgba(244,239,230,0.12);
}
.site-footer__col p { color: rgba(244,239,230,0.75); margin: 0 0 0.75rem; line-height: 1.55; }
.site-footer__col .kicker { color: var(--c-teal); margin-bottom: 1rem; }
.site-footer__col .kicker .bracket { color: var(--c-teal); }
.site-footer__col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.5rem; }
.site-footer__col a {
  color: rgba(244,239,230,0.85);
  font-weight: 500;
  transition: color 0.25s var(--ease-out);
}
.site-footer__col a:hover { color: var(--c-teal); }
.site-footer__col address { font-style: normal; color: rgba(244,239,230,0.75); line-height: 1.6; }

.site-footer__logo { width: 160px; margin-bottom: 1rem; }
.site-footer__logo img {
  width: 100%; height: auto;
  filter: invert(1);
}

.site-footer__base {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 2rem;
  font-family: var(--f-mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: rgba(244,239,230,0.55);
  flex-wrap: wrap;
  gap: 1rem;
}
.site-footer__base a { color: var(--c-teal); }

@media (max-width: 880px) {
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 540px) {
  .site-footer__grid { grid-template-columns: 1fr; }
}

/* -----  Mobile nav breakpoint  ------------------------- */
@media (max-width: 980px) {
  .primary-nav { display: none; }
  .nav-toggle { display: inline-flex; }
  .site-header__actions .btn--small { display: none; }
  .primary-nav-mobile { display: block; }
}

/* -----  Reveal-on-scroll baseline (JS-only enhancement)  --- */
/* By default, content is fully visible. Only when JS is ready
   do we set the pre-reveal state, so non-JS / pre-hydration
   visitors never see blank sections. */
.js-ready .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}
.js-ready .reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* -----  Accessibility & motion  ------------------------ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .marquee__track,
  .clip-marquee__track,
  .hero__fan .fan { animation: none !important; }
  .reveal { opacity: 1; transform: none; }
}

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--c-teal-deep);
  outline-offset: 3px;
  border-radius: 2px;
}