@charset "utf-8";
/* ==========================================================================
   BREWABILITY — stylesheet
   --------------------------------------------------------------------------
   You almost never need to edit this file to update the website.
   To change words, prices, hours or events, edit the .html files instead.
   See EDITING-GUIDE.md.

   Every beer is named after a colour, and the taps are colour-coded to match,
   so anyone can order and pour by colour instead of by a long beer name.
   The palette IS the accessibility story. Please keep it.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. DESIGN TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Brand accents — used for buttons, tags and section furniture */
  --orange:       #C25314;
  --orange-soft:  #F6E3D2;
  --green:        #2F6B34;
  --green-soft:   #DDEBDA;
  --purple:       #5B3D7E;
  --purple-soft:  #E7DFF1;
  --white-beer:   #8A7B52;   /* readable gold, not white */
  --white-soft:   #F3EEDC;

  /* ---- THE TAP COLOURS -------------------------------------------------
     One per beer on the wall. These are swatches, not text colours, so they
     only need to be told apart from each other and from the card behind them.
     TO ADD A BEER: add a --beer-* token here, then a matching row in the
     dark-theme blocks below, then use it as --tap-color in the HTML.
     --------------------------------------------------------------------- */
  --beer-pink:    #D6497F;
  --beer-gold:    #B07A12;
  --beer-black:   #2A221E;
  --beer-yellow:  #E3B90C;
  --beer-red:     #B3271F;
  --beer-blue:    #2A5DA8;
  --beer-green:   #2F6B34;
  --beer-purple:  #5B3D7E;
  --beer-white:   #EFE7D4;

  /* Surfaces & ink */
  --brick:        #9E4226;
  --bg:           #FCF8F1;
  --bg-alt:       #F5EFE3;
  --surface:      #FFFFFF;
  --ink:          #1B1613;   /* 15.8:1 on --bg — AAA */
  --ink-soft:     #4A403A;   /* 8.9:1  on --bg — AAA */
  --ink-faint:    #6B605A;   /* 5.4:1  on --bg — AA  */
  --line:         #E0D6C6;
  --focus:        #0B5FCE;

  /* Type */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-current-display: var(--font-display);
  --font-current-body:    var(--font-body);

  /* Fluid type scale.
     Everything on the site is sized from these seven steps, so raising them
     raises the whole interface at once. The small end is lifted hardest —
     body copy, nav and captions were the parts that read too small. */
  --step--1: clamp(1.00rem, 0.96rem + 0.18vw, 1.10rem);
  --step-0:  clamp(1.19rem, 1.12rem + 0.34vw, 1.40rem);
  --step-1:  clamp(1.42rem, 1.30rem + 0.60vw, 1.80rem);
  --step-2:  clamp(1.68rem, 1.48rem + 1.00vw, 2.32rem);
  --step-3:  clamp(2.00rem, 1.68rem + 1.60vw, 2.95rem);
  --step-4:  clamp(2.36rem, 1.88rem + 2.42vw, 3.75rem);
  --step-5:  clamp(2.75rem, 2.05rem + 3.52vw, 4.75rem);

  /* Space */
  --sp-1: 0.375rem; --sp-2: 0.75rem;  --sp-3: 1.25rem;
  --sp-4: 2rem;     --sp-5: 3rem;     --sp-6: 4.5rem;   --sp-7: 7rem;

  --radius:    14px;
  --radius-lg: 26px;
  --shadow:    0 2px 4px rgb(27 22 19 / 0.05), 0 10px 28px rgb(27 22 19 / 0.07);
  --shadow-lg: 0 4px 8px rgb(27 22 19 / 0.06), 0 22px 60px rgb(27 22 19 / 0.13);

  --measure: 62ch;
  --wrap:    1260px;   /* a little wider, so the larger type still breathes */
  --speed:   0.32s;
}

/* Dark theme — for light sensitivity, migraine, and night use */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --orange: #F0904A; --orange-soft: #3A2415;
    --green:  #7FC07F; --green-soft:  #1B2E1C;
    --purple: #C3A5E4; --purple-soft: #2A1F38;
    --white-beer: #D9C68C; --white-soft: #322C1C;
    --brick: #E08A62;
    --bg: #15110F; --bg-alt: #1E1815; --surface: #241D19;
    --ink: #F6EFE7; --ink-soft: #D5C8BC; --ink-faint: #A99B90;
    --line: #3A302A; --focus: #8FBEFF;
    --shadow:    0 2px 4px rgb(0 0 0 / 0.35), 0 10px 28px rgb(0 0 0 / 0.45);
    --shadow-lg: 0 4px 8px rgb(0 0 0 / 0.4),  0 22px 60px rgb(0 0 0 / 0.55);
    --beer-pink:   #F58BB4; --beer-gold:   #E0AC3C; --beer-black:  #0A0807;
    --beer-yellow: #F2D24E; --beer-red:    #F0736A; --beer-blue:   #7FAEF0;
    --beer-green:  #7FC07F; --beer-purple: #C3A5E4; --beer-white:  #F1E9D8;
  }
}
:root[data-theme="dark"] {
  --orange: #F0904A; --orange-soft: #3A2415;
  --green:  #7FC07F; --green-soft:  #1B2E1C;
  --purple: #C3A5E4; --purple-soft: #2A1F38;
  --white-beer: #D9C68C; --white-soft: #322C1C;
  --brick: #E08A62;
  --bg: #15110F; --bg-alt: #1E1815; --surface: #241D19;
  --ink: #F6EFE7; --ink-soft: #D5C8BC; --ink-faint: #A99B90;
  --line: #3A302A; --focus: #8FBEFF;
  --shadow:    0 2px 4px rgb(0 0 0 / 0.35), 0 10px 28px rgb(0 0 0 / 0.45);
  --shadow-lg: 0 4px 8px rgb(0 0 0 / 0.4),  0 22px 60px rgb(0 0 0 / 0.55);
  --beer-pink:   #F58BB4; --beer-gold:   #E0AC3C; --beer-black:  #0A0807;
  --beer-yellow: #F2D24E; --beer-red:    #F0736A; --beer-blue:   #7FAEF0;
  --beer-green:  #7FC07F; --beer-purple: #C3A5E4; --beer-white:  #F1E9D8;
}

/* Reader-friendly font option (mirrors the Dyslexie menus offered in-house) */
:root[data-font="readable"] {
  --font-current-display: Verdana, Tahoma, Geneva, sans-serif;
  --font-current-body:    Verdana, Tahoma, Geneva, sans-serif;
  letter-spacing: 0.012em;
  word-spacing: 0.09em;
}
:root[data-font="readable"] p,
:root[data-font="readable"] li { line-height: 1.85; }

/* --------------------------------------------------------------------------
   2. RESET & BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--font-current-body);
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
p, h1, h2, h3, h4, li { overflow-wrap: break-word; }

h1, h2, h3, h4 {
  font-family: var(--font-current-display);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); }
h4 { font-size: var(--step-0); }

p, li { text-wrap: pretty; }
p { max-width: var(--measure); }

a { color: inherit; text-underline-offset: 0.22em; text-decoration-thickness: 0.08em; }
a:hover { text-decoration-thickness: 0.16em; }

/* Focus — must always be clearly visible */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 4px;
}
:focus:not(:focus-visible) { outline: none; }

::selection { background: var(--orange); color: #fff; }

/* --------------------------------------------------------------------------
   3. HELPERS
   -------------------------------------------------------------------------- */
.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.wrap-narrow { width: min(100% - 2.5rem, 760px); margin-inline: auto; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.skip-link {
  position: absolute; top: 0; left: 50%; transform: translate(-50%, -120%);
  z-index: 999; background: var(--ink); color: var(--bg);
  padding: var(--sp-2) var(--sp-4); border-radius: 0 0 var(--radius) var(--radius);
  font-weight: 600; text-decoration: none;
}
.skip-link:focus { transform: translate(-50%, 0); }

.section { padding-block: var(--sp-7); }
.section--tight { padding-block: var(--sp-6); }
.section--alt { background: var(--bg-alt); }

.eyebrow {
  font-family: var(--font-current-body);
  font-size: var(--step--1); font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-faint); margin-bottom: var(--sp-2);
}
.lede { font-size: var(--step-1); line-height: 1.5; color: var(--ink-soft); }

/* --------------------------------------------------------------------------
   4. BUTTONS — minimum target 44px, generous on primary actions
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.6em; min-height: 56px; padding: 0.7em 1.7em;
  border: 2px solid transparent; border-radius: 100px;
  font-weight: 700; font-size: var(--step-0);
  text-decoration: none; cursor: pointer;
  transition: transform var(--speed), background-color var(--speed),
              color var(--speed), border-color var(--speed), box-shadow var(--speed);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary { background: var(--orange); color: #fff; box-shadow: var(--shadow); }
:root[data-theme="dark"] .btn--primary,
.btn--primary { color: #fff; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .btn--primary { color: #221208; }
}
:root[data-theme="dark"] .btn--primary { color: #221208; }
.btn--primary:hover { background: var(--brick); box-shadow: var(--shadow-lg); }

.btn--secondary { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--secondary:hover { background: var(--ink); color: var(--bg); }

.btn--ghost { background: var(--surface); color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--ink); }

.btn--lg { min-height: 64px; font-size: var(--step-1); padding: 0.75em 2em; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

/* --------------------------------------------------------------------------
   5. HEADER & NAVIGATION
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3); padding-block: 0.7rem;
}

/* Official Brewability logo. Never restyle, recolour or squash it —
   only the height below should ever change. */
.logo { display: inline-flex; align-items: center; text-decoration: none; }
.logo img {
  height: 46px; width: auto;      /* aspect ratio is preserved by width:auto */
  display: block;
}
@media (max-width: 560px) { .logo img { height: 38px; } }
/* The wordmark is mid-grey, which is too dark on a dark background.
   Lifting brightness keeps the artwork intact while restoring contrast. */
:root[data-theme="dark"] .logo img { filter: brightness(1.75) saturate(1.05); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .logo img { filter: brightness(1.75) saturate(1.05); }
}
.site-footer .logo img { height: 54px; }
:root[data-theme="dark"] .site-footer .logo img,
.site-footer .logo img { filter: brightness(1.9) saturate(1.05); }

.nav { display: flex; align-items: center; gap: var(--sp-1); }
.nav a {
  padding: 0.55em 0.85em; border-radius: 100px;
  text-decoration: none; font-weight: 600; font-size: var(--step--1);
  white-space: nowrap; transition: background-color var(--speed);
}
.nav a:hover { background: var(--bg-alt); text-decoration: underline; }
.nav a[aria-current="page"] { background: var(--ink); color: var(--bg); }

/* ---- Grouped nav item -------------------------------------------------
   "Our Story", "Brew Crew" and "Events" are all the same errand — they
   all answer "who are these people and what happens here" — so they live
   together behind one heading instead of eating three slots in the bar.
   Works without JavaScript: hovering or tabbing into the group opens it.
   ---------------------------------------------------------------------- */
.nav-group { position: relative; display: flex; }
.nav-group-toggle {
  display: inline-flex; align-items: center; gap: 0.45em;
  padding: 0.55em 0.85em; border: 0; border-radius: 100px;
  background: transparent; color: inherit; cursor: pointer;
  font-family: inherit; font-weight: 600; font-size: var(--step--1);
  white-space: nowrap; transition: background-color var(--speed);
}
.nav-group-toggle:hover { background: var(--bg-alt); }
/* The chevron is drawn from two borders, so it inherits the text colour. */
.nav-group-toggle::after {
  content: ""; width: 0.4em; height: 0.4em; flex: none;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-0.15em) rotate(45deg);
  transition: transform var(--speed);
}
.nav-group-toggle[aria-expanded="true"]::after { transform: translateY(0.08em) rotate(-135deg); }
/* Lit up when the page you are on lives inside this group. */
.nav-group-toggle[data-current="true"] { background: var(--ink); color: var(--bg); }

.nav-sub {
  position: absolute; top: calc(100% + 0.45rem); left: 0; z-index: 130;
  display: grid; gap: 2px; min-width: 15rem; padding: var(--sp-2);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
}
.nav-sub[hidden] { display: none; }
.nav-group:hover > .nav-sub[hidden],
.nav-group:focus-within > .nav-sub[hidden] { display: grid; }
.nav-sub a { border-radius: 10px; padding: 0.6em 0.8em; }

.header-actions { display: flex; align-items: center; gap: var(--sp-2); }

.icon-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.45em;
  min-width: 52px; min-height: 52px; padding: 0 1em;
  background: transparent; border: 2px solid var(--line);
  border-radius: 100px; cursor: pointer; font-weight: 600; font-size: var(--step--1);
  color: var(--ink);
}
.icon-btn:hover { border-color: var(--ink); }

/* "Display" control — labelled in words, not just an Aa glyph, so people
   can tell what it does without clicking it. */
.display-toggle .glyph {
  font-family: var(--font-current-display); font-weight: 700;
  font-size: 1.05em; line-height: 1;
}
.display-toggle .label { white-space: nowrap; }
.header-cta { display: none; }
.header-utility {
  min-height: 44px;
  padding: 0.5em 1.05em;
  font-size: var(--step--1);
  white-space: nowrap;
}
@media (min-width: 1120px) { .header-cta { display: inline-flex; } }
@media (max-width: 720px) { .display-toggle .label { display: none; } }

.nav-toggle { display: none; }

/* Four nav slots instead of six, so the full bar survives to a smaller width. */
@media (max-width: 940px) {
  .nav-toggle { display: inline-flex; }
  .nav {
    position: fixed; inset: 0 0 0 auto; width: min(88vw, 400px);
    flex-direction: column; align-items: stretch; justify-content: flex-start;
    gap: var(--sp-1); padding: 6rem var(--sp-3) var(--sp-4);
    background: var(--surface); border-left: 1px solid var(--line);
    box-shadow: var(--shadow-lg); overflow-y: auto;
    transform: translateX(100%); transition: transform var(--speed) ease;
  }
  .nav[data-open="true"] { transform: translateX(0); }
  .nav a { font-size: var(--step-0); padding: 0.85em 1em; }

  /* In the drawer there is no shortage of room, so the group flattens back
     out into plain links. No toggle to press, nothing hidden behind a tap. */
  .nav-group { display: block; }
  .nav-group-toggle { display: none; }
  .nav-sub, .nav-sub[hidden] {
    position: static; display: grid; gap: var(--sp-1);
    min-width: 0; padding: 0;
    background: none; border: 0; box-shadow: none;
  }
}

/* Display-options panel */
.display-panel {
  position: absolute; right: 0; top: calc(100% + 0.6rem); z-index: 120;
  width: min(90vw, 320px); padding: var(--sp-3);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
}
.display-panel[hidden] { display: none; }
.display-panel fieldset { border: 0; padding: 0; margin-bottom: var(--sp-3); }
.display-panel legend { font-weight: 700; font-size: var(--step--1); margin-bottom: var(--sp-1); }
.opt-row { display: flex; gap: var(--sp-1); flex-wrap: wrap; }
.opt-row button {
  flex: 1 1 auto; min-height: 44px; padding: 0.4em 0.8em;
  border: 2px solid var(--line); border-radius: 100px;
  background: transparent; cursor: pointer; font-size: var(--step--1); font-weight: 600;
}
.opt-row button[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.header-actions { position: relative; }

/* --------------------------------------------------------------------------
   6. ALERT BAR — for urgent, time-sensitive asks
   -------------------------------------------------------------------------- */
.alert-bar {
  background: var(--purple); color: #fff;
  padding: var(--sp-2) 0; font-size: var(--step--1); font-weight: 600;
}
:root[data-theme="dark"] .alert-bar { color: #1B1024; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .alert-bar { color: #1B1024; }
}
.alert-bar .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--sp-2); text-align: center; }
.alert-bar a { color: inherit; font-weight: 800; }

/* --------------------------------------------------------------------------
   7. HERO
   -------------------------------------------------------------------------- */
/* The headline sits a good way down the page rather than jammed under the
   header, so the whole hero reads as one block with air around it. */
.hero { position: relative; padding-block: var(--sp-7) var(--sp-7); overflow: hidden; }
@media (max-width: 760px) { .hero { padding-block: var(--sp-6) var(--sp-6); } }
.hero::before {
  content: ""; position: absolute; inset: -30% -10% auto -10%; height: 130%;
  background:
    radial-gradient(58% 48% at 18% 8%,  color-mix(in srgb, var(--orange) 26%, transparent), transparent 70%),
    radial-gradient(50% 44% at 88% 22%, color-mix(in srgb, var(--purple) 22%, transparent), transparent 70%),
    radial-gradient(46% 40% at 60% 92%, color-mix(in srgb, var(--green)  18%, transparent), transparent 70%);
  filter: blur(8px); z-index: -1;
  animation: heroDrift 32s ease-in-out infinite alternate;
}
@keyframes heroDrift {
  from { transform: translate3d(-2%, 0, 0) scale(1); }
  to   { transform: translate3d(3%, -2%, 0) scale(1.07); }
}

.hero-grid {
  display: grid; gap: var(--sp-4); align-items: center;
  grid-template-columns: 1fr;
}
/* Side by side as soon as there is room for it — the old site stacked
   everything into one centred column, which wasted the whole right half. */
@media (min-width: 760px) {
  .hero-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
}
@media (min-width: 1100px) {
  .hero-grid { grid-template-columns: 1.02fr 1.18fr; gap: var(--sp-6); }
}

.hero h1 { margin-bottom: var(--sp-3); }
.hero h1 .accent { color: var(--orange); }
.hero .lede { margin-bottom: var(--sp-4); max-width: 38ch; }

/* ---- Floating Brewability sign --------------------------------------- */
.hero-right {
  display: grid;
  gap: clamp(2.5rem, 4vw, 3.25rem);
  align-content: center;
  padding-top: var(--sp-2);
}

.signcard {
  position: relative;
  width: min(96%, 520px);
  aspect-ratio: 16 / 9;
  perspective: 1200px;
  margin: 0 auto;
}
.signcard::before {
  content: "";
  position: absolute;
  inset: -22%;
  z-index: -1;
  background:
    radial-gradient(46% 46% at 28% 26%, color-mix(in srgb, var(--orange) 46%, transparent), transparent 72%),
    radial-gradient(46% 46% at 74% 72%, color-mix(in srgb, var(--purple) 40%, transparent), transparent 72%),
    radial-gradient(40% 40% at 60% 30%, color-mix(in srgb, var(--green) 28%, transparent), transparent 72%);
  filter: blur(34px);
  animation: signGlow 12s ease-in-out infinite alternate;
}
.signcard::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  bottom: -13%;
  width: 66%;
  height: 9%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgb(27 22 19 / 0.34), transparent 72%);
  filter: blur(7px);
  animation: signShadow 9s ease-in-out infinite;
}
.signcard__inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  animation: signFloat 9s ease-in-out infinite;
  transition: transform 0.5s cubic-bezier(.2,.8,.3,1);
  will-change: transform;
}
.signcard__plate {
  position: absolute;
  inset: -4px;
  border-radius: calc(var(--radius-lg) + 4px);
  transform: translateZ(calc((var(--i) - 6) * 3px));
  background: var(--edge, var(--orange));
}
.signcard__plate:nth-child(4n+1) { --edge: var(--orange); }
.signcard__plate:nth-child(4n+2) { --edge: var(--green); }
.signcard__plate:nth-child(4n+3) { --edge: var(--white-beer); }
.signcard__plate:nth-child(4n+4) { --edge: var(--purple); }
.signcard__face {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 9% 12%;
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}
.signcard__face img { width: 100%; max-width: 350px; height: auto; }
.signcard__face--front { transform: translateZ(21px); }
.signcard__face--back { transform: translateZ(-21px) rotateY(180deg); }
.signcard__face::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
  background: linear-gradient(118deg,
    rgb(255 255 255 / 0.5) 0%, rgb(255 255 255 / 0) 38%,
    rgb(255 255 255 / 0) 64%, rgb(27 22 19 / 0.14) 100%);
  pointer-events: none;
}

@keyframes signFloat {
  0%, 100% { transform: translateY(0) rotateX(9deg) rotateY(-16deg); }
  50% { transform: translateY(-14px) rotateX(-6deg) rotateY(16deg); }
}
@keyframes signGlow {
  from { opacity: 0.75; transform: scale(1); }
  to { opacity: 1; transform: scale(1.09); }
}
@keyframes signShadow {
  0%, 100% { opacity: 0.9; width: 66%; }
  50% { opacity: 0.5; width: 50%; }
}

@media (max-width: 759px) {
  .hero-right { padding-top: var(--sp-3); }
  .signcard { width: min(94%, 430px); }
}
@media (prefers-reduced-motion: reduce) {
  .signcard__inner { animation: none; transform: rotateX(4deg) rotateY(-8deg); }
  .signcard::before, .signcard::after { animation: none; }
}
:root[data-motion="off"] .signcard__inner {
  animation: none !important;
  transform: rotateX(4deg) rotateY(-8deg) !important;
}
:root[data-motion="off"] .signcard::before,
:root[data-motion="off"] .signcard::after { animation: none !important; }

.hero-figure { position: relative; }
.hero-figure img {
  width: 100%; aspect-ratio: 4/5; object-fit: cover;
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
}
@media (min-width: 760px) { .hero-figure img { aspect-ratio: 1; } }
.hero-figure figcaption {
  position: absolute; left: var(--sp-3); right: var(--sp-3); bottom: var(--sp-3);
  padding: var(--sp-2) var(--sp-3); border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  backdrop-filter: blur(8px); box-shadow: var(--shadow);
  font-size: var(--step--1); line-height: 1.45;
}

/* ---- Crew mosaic: the whole team, from real photographs -------------- */
.mosaic {
  display: grid; gap: 10px;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr;
}
/* Two columns while the hero column is narrow, so faces stay big enough
   to actually recognise. Three across once there's room. */
@media (min-width: 760px) and (max-width: 1099px) {
  .mosaic { grid-template-columns: repeat(2, 1fr); }
}
/* Seven people stay balanced in two rows on a wide hero: four above,
   then three of the same size centred beneath them. */
@media (min-width: 1100px) {
  .mosaic { grid-template-columns: repeat(8, 1fr); }
  .mosaic figure { grid-column: span 2; }
  .mosaic figure:nth-last-child(3) { grid-column: 2 / span 2; }
}
.mosaic figure { margin: 0; position: relative; }
.mosaic img {
  width: 100%; height: 100%; aspect-ratio: 1; object-fit: cover;
  border-radius: 14px; box-shadow: var(--shadow);
  transition: transform var(--speed) cubic-bezier(.2,.8,.3,1);
}
.mosaic figure:hover img { transform: scale(1.03); }
.mosaic .wide { grid-column: span 2; }
.mosaic .wide img { aspect-ratio: 2/1; }
.mosaic figcaption {
  position: absolute; left: 8px; bottom: 8px;
  padding: 0.25em 0.75em; border-radius: 100px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(6px);
  font-size: 0.9rem; font-weight: 700; letter-spacing: 0.01em;
}
:root[data-motion="off"] .mosaic figure:hover img { transform: none; }

/* ---- Generic two-column split for content sections ------------------- */
.split { display: grid; gap: var(--sp-4); align-items: center; grid-template-columns: 1fr; }
@media (min-width: 820px) {
  .split { grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
  .split--wide-left  { grid-template-columns: 1.25fr 0.75fr; }
  .split--wide-right { grid-template-columns: 0.75fr 1.25fr; }
  .split--flip > :first-child { order: 2; }
}
.split img { width: 100%; border-radius: var(--radius-lg); box-shadow: var(--shadow); }

.video-caption { margin-top: var(--sp-2); font-size: var(--step--1); color: var(--ink-faint); text-align: center; }
.video-caption a { display: block; width: fit-content; margin: 0.35rem auto 0; font-weight: 700; }

/* ---- Venue: what the place actually looks like ----------------------- */
.venue { display: grid; gap: var(--sp-3); grid-template-columns: 1fr; }
@media (min-width: 780px) { .venue { grid-template-columns: 1fr 1fr; } }
.venue figure { margin: 0; }
.venue img {
  width: 100%; aspect-ratio: 16/10; object-fit: cover;
  border-radius: var(--radius-lg); box-shadow: var(--shadow);
}
.venue figcaption { margin-top: var(--sp-2); font-size: var(--step--1); color: var(--ink-soft); }

/* --------------------------------------------------------------------------
   8. (reserved)
   -------------------------------------------------------------------------- */
/* The dark statistics band that used to sit here was removed: leading with
   "700+ people are still waiting" put the hardest fact in a visitor's face
   before they had met anybody, and the black slab cut the page in half. */

/* --------------------------------------------------------------------------
   9. THE TAP WALL — the signature moment
   --------------------------------------------------------------------------
   One card per beer on the wall. Each one sets its own --tap-color from a
   --beer-* token, and the handle is drawn entirely from that one colour, so
   adding a beer is: pick a token, copy a card, set --tap-color.
   -------------------------------------------------------------------------- */
.beerwall {
  display: grid; gap: var(--sp-3);
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  margin-top: var(--sp-5); padding: 0; list-style: none;
}
.beer {
  position: relative; display: flex; flex-direction: column; align-items: center;
  padding: var(--sp-4) var(--sp-2) var(--sp-3);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow);
  text-align: center; cursor: default;
  transition: transform var(--speed) cubic-bezier(.2,.8,.3,1), box-shadow var(--speed);
  transform-style: preserve-3d;
}
.beer:hover, .beer:focus-within {
  transform: translateY(-8px) rotateX(6deg);
  box-shadow: var(--shadow-lg);
}
/* The physical tap handle. The hairline ring is what keeps White and Black
   from disappearing into the card behind them. */
.beer-handle {
  width: 46px; height: 72px; margin-bottom: var(--sp-3);
  border-radius: 9px 9px 5px 5px;
  background: linear-gradient(155deg,
    color-mix(in srgb, var(--tap-color) 82%, #fff) 0%,
    var(--tap-color) 42%,
    color-mix(in srgb, var(--tap-color) 74%, #000) 100%);
  box-shadow: inset 0 2px 4px rgb(255 255 255 / 0.35),
              inset 0 -6px 12px rgb(0 0 0 / 0.22),
              0 8px 18px color-mix(in srgb, var(--tap-color) 40%, transparent),
              0 0 0 1px rgb(0 0 0 / 0.16);
  transition: transform var(--speed) cubic-bezier(.2,.8,.3,1);
}
.beer:hover .beer-handle, .beer:focus-within .beer-handle { transform: rotateX(-14deg) translateY(-3px); }
.beer-name  { font-family: var(--font-current-display); font-size: var(--step-1); font-weight: 700; line-height: 1.1; }
.beer-style { color: var(--ink-soft); font-size: var(--step--1); margin-top: 3px; }
.beer-abv   { color: var(--ink-faint); font-size: var(--step--1); font-weight: 700; margin-top: 4px; }
.beer-flag  { margin-top: var(--sp-2); }

.tap-note { font-size: var(--step--1); color: var(--ink-soft); margin-top: var(--sp-2); text-align: left; }

/* --------------------------------------------------------------------------
   10. CARDS & GRIDS
   -------------------------------------------------------------------------- */
.grid { display: grid; gap: var(--sp-3); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

.card {
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform var(--speed), box-shadow var(--speed);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.card img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.card-body { padding: var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-2); flex: 1; }
.card h3 { font-size: var(--step-1); }
.card p { font-size: var(--step--1); color: var(--ink-soft); max-width: none; }

/* Whole-card link without trapping screen readers */
.card--link { position: relative; }
.card--link a::after { content: ""; position: absolute; inset: 0; }

.tag {
  display: inline-block; padding: 0.22em 0.75em; border-radius: 100px;
  font-size: var(--step--1); font-weight: 700; letter-spacing: 0.02em;
  background: var(--bg-alt); color: var(--ink-soft); border: 1px solid var(--line);
}
.tag--orange { background: var(--orange-soft); color: var(--orange); border-color: transparent; }
.tag--green  { background: var(--green-soft);  color: var(--green);  border-color: transparent; }
.tag--purple { background: var(--purple-soft); color: var(--purple); border-color: transparent; }

/* --------------------------------------------------------------------------
   11. MENU
   -------------------------------------------------------------------------- */
.menu-nav { display: flex; flex-wrap: wrap; gap: var(--sp-1); margin-bottom: var(--sp-5); }
.menu-section { scroll-margin-top: 6rem; margin-bottom: var(--sp-6); }
.menu-section > h2 { padding-bottom: var(--sp-2); border-bottom: 3px solid var(--orange); margin-bottom: var(--sp-4); }

.menu-list { list-style: none; padding: 0; display: grid; gap: var(--sp-3); }
.menu-item {
  display: grid; gap: 0.2rem var(--sp-3);
  grid-template-columns: 1fr auto; align-items: start;
  padding-bottom: var(--sp-3); border-bottom: 1px dashed var(--line);
}
.menu-item h3 { font-size: var(--step-1); grid-column: 1; }
.menu-item .price {
  grid-column: 2; grid-row: 1; font-family: var(--font-current-display);
  font-size: var(--step-1); font-weight: 700; color: var(--orange); white-space: nowrap;
}
.menu-item p { grid-column: 1 / -1; font-size: var(--step--1); color: var(--ink-soft); max-width: 68ch; }
.menu-item .diet { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.35rem; }

/* A beer row on the menu: same layout as any other menu item, plus the
   colour swatch that matches the tap you point at. */
.menu-item--beer { grid-template-columns: auto 1fr auto; column-gap: var(--sp-3); }
.menu-item--beer > .beer-chip {
  grid-column: 1; grid-row: 1; align-self: center;
  width: 1.6rem; height: 1.6rem; border-radius: 7px;
  background: var(--tap-color);
  box-shadow: inset 0 -3px 6px rgb(0 0 0 / 0.22), 0 0 0 1px rgb(0 0 0 / 0.16);
}
.menu-item--beer > h3     { grid-column: 2; grid-row: 1; }
.menu-item--beer > .price { grid-column: 3; grid-row: 1; }
.menu-item--beer > p:not(.price),
.menu-item--beer > .diet  { grid-column: 2 / -1; }

.note-box {
  padding: var(--sp-3); border-radius: var(--radius);
  background: var(--green-soft); border-left: 5px solid var(--green);
}
.note-box p { max-width: none; }
.note-box--orange { background: var(--orange-soft); border-left-color: var(--orange); }
.note-box--purple { background: var(--purple-soft); border-left-color: var(--purple); }

/* --------------------------------------------------------------------------
   12. TIMELINE
   -------------------------------------------------------------------------- */
.timeline { list-style: none; padding: 0; position: relative; margin-top: var(--sp-5); }
.timeline::before {
  content: ""; position: absolute; left: 15px; top: 8px; bottom: 8px; width: 3px;
  background: linear-gradient(var(--orange), var(--green), var(--white-beer), var(--purple));
  border-radius: 3px;
}
.timeline li { position: relative; padding: 0 0 var(--sp-5) 3.4rem; }
.timeline li::before {
  content: ""; position: absolute; left: 7px; top: 6px;
  width: 19px; height: 19px; border-radius: 50%;
  background: var(--bg); border: 4px solid var(--orange);
}
.timeline li:nth-child(2)::before { border-color: var(--green); }
.timeline li:nth-child(3)::before { border-color: var(--white-beer); }
.timeline li:nth-child(4)::before { border-color: var(--purple); }
.timeline li:nth-child(5)::before { border-color: var(--brick); }
.timeline .year {
  font-family: var(--font-current-display); font-size: var(--step-1);
  font-weight: 700; color: var(--orange); display: block;
}
.timeline li:nth-child(2) .year { color: var(--green); }
.timeline li:nth-child(3) .year { color: var(--white-beer); }
.timeline li:nth-child(4) .year { color: var(--purple); }
.timeline li:nth-child(5) .year { color: var(--brick); }
.timeline-with-photo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 180px;
  gap: var(--sp-4);
  align-items: center;
}
.timeline-with-photo--wide { grid-template-columns: minmax(0, 1fr) minmax(220px, 280px); }
.timeline-photo { margin: 0; }
.timeline-photo img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.timeline-photo--landscape img { aspect-ratio: 4 / 3; }
.timeline-photo-crop {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.timeline-photo-crop img {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: auto;
  max-width: none;
  height: 110%;
  aspect-ratio: auto;
  border-radius: 0;
  box-shadow: none;
  transform: translateX(-50%);
}
.timeline-photo figcaption {
  margin-top: 0.5rem;
  font-size: var(--step--1);
  color: var(--ink-faint);
}
@media (max-width: 620px) {
  .timeline-with-photo { grid-template-columns: 1fr; }
  .timeline-photo { max-width: 220px; }
  .timeline-photo--landscape { max-width: 320px; }
}

/* --------------------------------------------------------------------------
   13. QUOTES, PEOPLE, PRESS
   -------------------------------------------------------------------------- */
.quote {
  padding: var(--sp-4); background: var(--surface);
  border-radius: var(--radius-lg); border: 1px solid var(--line);
  box-shadow: var(--shadow); position: relative;
}
.quote blockquote {
  font-family: var(--font-current-display); font-size: var(--step-2);
  line-height: 1.3; margin-bottom: var(--sp-3);
}
.quote blockquote p { max-width: none; }
.quote figcaption { font-size: var(--step--1); color: var(--ink-faint); font-weight: 600; }

.person { text-align: center; }
.person img {
  width: 100%; aspect-ratio: 1; object-fit: cover;
  border-radius: var(--radius-lg); box-shadow: var(--shadow); margin-bottom: var(--sp-2);
}

/* ---- Brew Crew profiles ---------------------------------------------- */
.crew { display: grid; gap: var(--sp-5); margin-top: var(--sp-5); }
.crew-member {
  display: grid; gap: var(--sp-4); align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 820px) {
  .crew-member { grid-template-columns: 0.85fr 1.15fr; gap: var(--sp-5); }
  .crew-member:nth-child(even) .crew-photo { order: 2; }
}
.crew-photo { position: relative; }
.crew-photo img {
  width: 100%; aspect-ratio: 4/5; object-fit: cover;
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
}
.crew-body h3 { font-size: var(--step-3); margin-bottom: 0.15em; }
.crew-role {
  font-family: var(--font-current-body); font-weight: 700;
  font-size: var(--step--1); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--orange); margin-bottom: var(--sp-3);
}
.crew-body p { font-size: var(--step-0); }
.crew-body p + p { margin-top: var(--sp-2); }
.crew-loves {
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  margin-top: var(--sp-3); padding: 0; list-style: none;
}
.crew-loves li {
  padding: 0.3em 0.9em; border-radius: 100px;
  background: var(--bg-alt); border: 1px solid var(--line);
  font-size: var(--step--1); font-weight: 600;
}
.crew-quote {
  margin-top: var(--sp-3); padding-left: var(--sp-3);
  border-left: 4px solid var(--orange);
  font-family: var(--font-current-display); font-size: var(--step-1);
  line-height: 1.35;
}
.crew-quote p { max-width: none; }

/* Pull quote used to carry the site's central message */
.pull {
  margin: var(--sp-5) 0; padding: var(--sp-5) var(--sp-4);
  border-radius: var(--radius-lg); background: var(--bg-alt);
  border-left: 6px solid var(--orange); text-align: left;
}
.pull p {
  font-family: var(--font-current-display); font-size: var(--step-2);
  line-height: 1.28; max-width: 30ch; margin-inline: 0;
}

.press-strip {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--sp-2) var(--sp-5); align-items: center;
  font-family: var(--font-current-display); font-size: var(--step-1);
  color: var(--ink-faint); font-weight: 600;
}

.video-embed {
  position: relative; aspect-ratio: 16/9;
  border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-lg); background: var(--ink);
}
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Avery's SeriesFest speech was recorded vertically. Let the video keep its
   full 9:16 frame so faces and the stage are never cropped. */
.video-portrait {
  position: relative; max-width: 380px; margin-inline: auto;
  border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-lg); background: #000;
}
.video-portrait video { display: block; width: 100%; height: auto; aspect-ratio: 9/16; }

/* --------------------------------------------------------------------------
   14. FORMS
   -------------------------------------------------------------------------- */
.form-grid { display: grid; gap: var(--sp-3); max-width: 620px; }
.field { display: flex; flex-direction: column; gap: 0.4rem; }
.field label { font-weight: 700; font-size: var(--step--1); }
.field .hint { font-size: var(--step--1); color: var(--ink-faint); }
.field input, .field select, .field textarea {
  min-height: 52px; padding: 0.65em 0.9em;
  background: var(--surface); color: var(--ink);
  border: 2px solid var(--line); border-radius: var(--radius);
}
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--focus); }
.field--required label::after { content: " (required)"; font-weight: 400; color: var(--ink-faint); }

/* --------------------------------------------------------------------------
   15. DETAILS / ACCORDION (FAQs)
   -------------------------------------------------------------------------- */
.faq { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-3) 0; cursor: pointer; list-style: none;
  font-family: var(--font-current-display); font-size: var(--step-1); font-weight: 600;
}
.faq summary::-webkit-details-marker { display: none; }
/* The question is a real <h2> so screen-reader users can navigate by heading,
   but it should look like the summary line, not like a page heading. */
.faq summary h2 { font: inherit; margin: 0; letter-spacing: inherit; }
.faq summary::after {
  content: "+"; font-size: 1.6em; line-height: 1; color: var(--orange);
  flex-shrink: 0; transition: transform var(--speed);
}
.faq[open] summary::after { transform: rotate(45deg); }
.faq .faq-body { padding-bottom: var(--sp-3); }
.faq .faq-body p + p { margin-top: var(--sp-2); }

/* --------------------------------------------------------------------------
   16. FOOTER
   --------------------------------------------------------------------------
   The footer deliberately keeps its own palette. Using --bg for its text made
   dark mode turn the copy almost black on black because --bg itself becomes a
   dark colour. These fixed, high-contrast values work in every display mode. */
.site-footer { background: #0C0908; color: #FBF6F0; padding-block: var(--sp-6) var(--sp-4); margin-top: var(--sp-6); }
.footer-grid { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.site-footer h2 { font-size: var(--step-1); margin-bottom: var(--sp-2); }
.site-footer a { color: #FBF6F0; text-decoration-color: rgb(251 246 240 / 0.62); }
.site-footer a:hover { text-decoration-color: currentColor; }
.site-footer ul { list-style: none; padding: 0; display: grid; gap: 0.55rem; }
.site-footer .muted { color: #CFC5BC; font-size: var(--step--1); }
.hours-list { display: grid; gap: 0.3rem; }
.hours-list div { display: flex; justify-content: space-between; gap: var(--sp-2); max-width: 320px; font-size: var(--step--1); }
.site-footer .hours-list .closed { color: #B8ADA4; }
.footer-bottom {
  margin-top: var(--sp-5); padding-top: var(--sp-3);
  border-top: 1px solid rgb(251 246 240 / 0.24);
  display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: space-between;
  font-size: var(--step--1); color: #CFC5BC;
}

/* Eventbrite keeps the public calendar current. The white inset is intentional:
   Eventbrite controls the embedded page and currently serves a light interface. */
.eventbrite-shell {
  margin-top: var(--sp-4); overflow: hidden;
  background: #FFFFFF; border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  color-scheme: light;
}
.eventbrite-frame {
  display: block; width: 100%; height: 980px; border: 0;
  background: #FFFFFF;
}
.eventbrite-fallback { margin-top: var(--sp-3); color: var(--ink-soft); }
.eventbrite-fallback a { font-weight: 700; }
@media (max-width: 720px) { .eventbrite-frame { height: 860px; } }

/* --------------------------------------------------------------------------
   17. SCROLL REVEAL — purely decorative, removed when motion is reduced
   -------------------------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(.2,.8,.3,1); }
.reveal.is-visible { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   18. REDUCED MOTION — honoured globally, plus a manual switch
   -------------------------------------------------------------------------- */
@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;
  }
  .reveal { opacity: 1; transform: none; }
}
:root[data-motion="off"] *, :root[data-motion="off"] *::before, :root[data-motion="off"] *::after {
  animation-duration: 0.001ms !important; animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important; scroll-behavior: auto !important;
}
:root[data-motion="off"] .reveal { opacity: 1; transform: none; }
:root[data-motion="off"] .beer:hover,
:root[data-motion="off"] .beer:focus-within { transform: none; }
:root[data-motion="off"] .beer:hover .beer-handle { transform: none; }
:root[data-motion="off"] .card:hover,
:root[data-motion="off"] .btn:hover { transform: none; }

/* --------------------------------------------------------------------------
   19. VISIT — "the essentials" panel
   -------------------------------------------------------------------------- */
.facts {
  margin-top: var(--sp-4);
  border-top: 1px solid var(--line);
}
.facts > div {
  display: grid; gap: 0.15rem var(--sp-3);
  grid-template-columns: 8.5rem 1fr;
  padding-block: var(--sp-2);
  border-bottom: 1px solid var(--line);
}
@media (max-width: 460px) { .facts > div { grid-template-columns: 1fr; } }
.facts dt {
  font-size: var(--step--1); font-weight: 700; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--ink-faint);
}
.facts dd { margin: 0; font-weight: 600; }
.facts dd .sub { display: block; font-weight: 400; font-size: var(--step--1); color: var(--ink-soft); }

.status-pill { display: inline-flex; align-items: center; gap: 0.55em; font-weight: 700; }
.status-pill::before {
  content: ""; width: 0.7em; height: 0.7em; border-radius: 50%;
  background: var(--ink-faint); flex: none;
}
.status-pill[data-open="yes"]::before { background: var(--green); box-shadow: 0 0 0 4px var(--green-soft); }
.status-pill[data-open="no"]::before  { background: var(--brick); box-shadow: 0 0 0 4px var(--orange-soft); }

/* --------------------------------------------------------------------------
   20. MENU PHOTOGRAPHY
   -------------------------------------------------------------------------- */
.order-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
  gap: var(--sp-5);
  align-items: center;
  margin-top: var(--sp-5);
  padding: clamp(var(--sp-3), 4vw, var(--sp-5));
  background: var(--purple-soft);
  border: 1px solid color-mix(in srgb, var(--purple) 35%, var(--line));
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.order-intro__copy { display: grid; gap: var(--sp-3); }
.order-intro__copy h2 { font-size: var(--step-4); }
.order-intro__copy p { max-width: 58ch; }
.order-intro__photo { overflow: hidden; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.order-intro__photo img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 61% 42%;
}
@media (max-width: 800px) {
  .order-intro { grid-template-columns: 1fr; }
}

/* Wide banner at the top of each menu section */
.menu-banner {
  width: 100%; object-fit: cover;
  aspect-ratio: 21 / 7;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  margin-bottom: var(--sp-4);
}
@media (max-width: 700px) { .menu-banner { aspect-ratio: 16 / 9; } }
.menu-banner--tall { aspect-ratio: 21 / 9; }

/* A menu row that carries its own photo */
.menu-item--photo { grid-template-columns: 104px 1fr auto; column-gap: var(--sp-3); }
.menu-item--photo > .thumb {
  grid-column: 1; grid-row: 1 / span 4;
  width: 104px; height: 104px; object-fit: cover;
  border-radius: var(--radius); box-shadow: var(--shadow);
  align-self: start;
}
.menu-item--photo > h3    { grid-column: 2; grid-row: 1; }
.menu-item--photo > .price{ grid-column: 3; grid-row: 1; }
.menu-item--photo > p:not(.price),
.menu-item--photo > .diet { grid-column: 2 / -1; }
@media (max-width: 560px) {
  .menu-item--photo { grid-template-columns: 72px 1fr auto; }
  .menu-item--photo > .thumb { width: 72px; height: 72px; }
}

/* --------------------------------------------------------------------------
   21. VIDEO — click-to-load facade
   Shows a real poster image; the YouTube player is only fetched when
   somebody actually presses play. Without JavaScript it stays a plain
   link to YouTube, so it can never render as an empty box.
   -------------------------------------------------------------------------- */
.lite-yt {
  position: relative; display: block; aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg); overflow: hidden;
  background: var(--ink); box-shadow: var(--shadow-lg);
  text-decoration: none; color: #fff;
}
.lite-yt > img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--speed) ease, filter var(--speed) ease;
}
.lite-yt:hover > img, .lite-yt:focus-visible > img { transform: scale(1.035); filter: brightness(0.82); }
.lite-yt .play {
  position: absolute; inset: 0; margin: auto;
  width: 78px; height: 78px; border-radius: 50%;
  background: var(--orange); display: grid; place-items: center;
  box-shadow: 0 10px 30px rgb(0 0 0 / 0.45);
  transition: transform var(--speed) cubic-bezier(.2,.8,.3,1);
}
.lite-yt:hover .play, .lite-yt:focus-visible .play { transform: scale(1.12); }
.lite-yt .play::after {
  content: ""; border-style: solid;
  border-width: 15px 0 15px 25px;
  border-color: transparent transparent transparent #fff;
  margin-left: 7px;
}
.lite-yt .cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: var(--sp-5) var(--sp-3) var(--sp-2);
  background: linear-gradient(transparent, rgb(0 0 0 / 0.88));
  font-weight: 700; font-size: var(--step-0); line-height: 1.3;
}
.lite-yt .cap .meta { display: block; font-weight: 400; font-size: var(--step--1); opacity: 0.85; margin-top: 2px; }
.lite-yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* --------------------------------------------------------------------------
   22. MEDIA WALL — viral clips, interviews, press
   -------------------------------------------------------------------------- */
.wall { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.wall > .feature { grid-column: 1 / -1; }
@media (min-width: 980px) { .wall > .feature { grid-column: span 2; } }
.media-card {
  display: flex; flex-direction: column; gap: var(--sp-2);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow);
  transition: transform var(--speed), box-shadow var(--speed);
}
.media-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.media-card .lite-yt { border-radius: 0; box-shadow: none; }
.media-card .body { padding: 0 var(--sp-3) var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-2); flex: 1; }
.media-card h3 { font-size: var(--step-1); }
.media-card p { font-size: var(--step--1); color: var(--ink-soft); max-width: none; }
.media-card .why {
  font-size: var(--step--1); padding: var(--sp-2); border-radius: var(--radius);
  background: var(--bg-alt); border-left: 4px solid var(--orange);
}
.source-row { display: flex; flex-wrap: wrap; gap: var(--sp-1); align-items: center; margin-top: auto; }
.tt-wall { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.tt {
  position: relative; display: block; aspect-ratio: 9 / 16;
  border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow); background: var(--ink);
  text-decoration: none; color: #fff;
}
.tt > img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--speed) ease; }
.tt:hover > img, .tt:focus-visible > img { transform: scale(1.06); }
.tt .cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: var(--sp-5) var(--sp-2) var(--sp-2);
  background: linear-gradient(transparent, rgb(0 0 0 / 0.92));
  font-size: var(--step--1); font-weight: 600; line-height: 1.35;
}
.tt .cap .stat { display: block; font-weight: 400; opacity: 0.82; margin-top: 3px; }
.press-list { list-style: none; padding: 0; display: grid; gap: 0; }
.press-list li {
  display: grid; gap: 0.1rem var(--sp-3);
  grid-template-columns: 11rem 1fr;
  padding-block: var(--sp-3); border-bottom: 1px solid var(--line);
}
@media (max-width: 620px) { .press-list li { grid-template-columns: 1fr; } }
.press-list .outlet {
  font-size: var(--step--1); font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-faint);
}
.press-list a { font-weight: 600; }

/* --------------------------------------------------------------------------
   23. HIGH CONTRAST & PRINT
   -------------------------------------------------------------------------- */
@media (forced-colors: active) {
  .btn, .card, .beer, .icon-btn { border: 1px solid ButtonBorder; }
  .beer-handle, .beer-chip { forced-color-adjust: none; }
}
@media print {
  .site-header, .alert-bar, .site-footer, .btn, .display-panel { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .section { padding-block: 1rem; }
  a::after { content: " (" attr(href) ")"; font-size: 9pt; color: #444; }
}