/* ============================================================
   Lenny Boy Brewing Co. — site.css
   One stylesheet for the whole site. Edit tokens below to
   restyle everything at once.
   ============================================================ */

/* --- 1. Tokens ------------------------------------------------ */
:root {
  /* Palette: fermentation dark, mineral paper, kombucha amber,
     sour rose, live-culture green. */
  --ink:      #101F1A;
  --spruce:   #1E3B31;
  --moss:     #2F5A48;
  --mineral:  #E9ECE2;
  --chalk:    #FBFAF6;
  --amber:    #333F48;   /* brand accent: PANTONE 432 C (slate) */
  --amber-lt: #A9B8C4;   /* light tint of the accent for text/lines on dark backgrounds */
  --rose:     #C2537A;
  --culture:  #8FB93E;
  --rule:     rgba(16, 31, 26, 0.14);
  --rule-dk:  rgba(233, 236, 226, 0.18);

  --display: "Fraunces", Georgia, serif;
  --body:    "Karla", system-ui, -apple-system, sans-serif;
  --util:    "Space Mono", ui-monospace, monospace;

  --gutter: clamp(1.25rem, 5vw, 4.5rem);
  --maxw: 1240px;
  --radius: 2px;

  /* Motion scale — one easing family, three durations. */
  --ease:      cubic-bezier(.16, .84, .44, 1);   /* decelerate, slight overshoot-free settle */
  --dur-fast:  160ms;   /* buttons, hovers — must feel instant */
  --dur-mid:   260ms;   /* nav, panels */
  --dur-slow:  720ms;   /* scroll reveals — long enough to read as cinematic */
}

/* --- 2. Reset ------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--chalk);
  color: var(--ink);
  font-family: var(--body);
  font-size: clamp(1rem, 0.97rem + 0.15vw, 1.075rem);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }

/* --- 3. Type -------------------------------------------------- */
h1, h2, h3 {
  font-family: var(--display);
  font-weight: 600;
  font-variation-settings: "SOFT" 40, "WONK" 1, "opsz" 40;
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin: 0 0 0.5em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.9rem, 8vw, 6.4rem); }
h2 { font-size: clamp(2rem, 4.4vw, 3.4rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.6rem); letter-spacing: -0.01em; }
p  { margin: 0 0 1.1em; max-width: 62ch; }

/* Eyebrow: a small mono label with a bubble. Used to mark every
   section so the page reads like a taproom board. */
.eyebrow {
  font-family: var(--util);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--moss);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 1.4rem;
}
.eyebrow::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  border: 1.5px solid var(--amber);
}
.on-dark .eyebrow, .on-spruce .eyebrow { color: var(--mineral); }

/* --- 4. Layout ------------------------------------------------ */
.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(3.5rem, 8vw, 7rem); }
.section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }
.on-dark { background: var(--ink); color: var(--mineral); }
.on-spruce { background: var(--spruce); color: var(--mineral); }
.grid { display: grid; gap: clamp(1.5rem, 3vw, 2.75rem); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.split { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center;
         grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

/* --- 5. Buttons ----------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-family: var(--util); font-size: 0.76rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  text-decoration: none;
  padding: 0.85rem 1.5rem;
  border: 1.5px solid currentColor;
  border-radius: 100px;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn--fill { background: var(--amber); border-color: var(--amber); color: #fff; }
.btn--fill:hover { background: #1F282E; border-color: #1F282E; }
.btn--ghost:hover { background: currentColor; }
.btn--ghost:hover span { color: var(--ink); }
.on-dark .btn--ghost:hover span, .hero .btn--ghost:hover span { color: var(--ink); }

/* --- 6. Header ------------------------------------------------ */
.site-head {
  position: sticky; top: 0; z-index: 60;
  background: rgba(16, 31, 26, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule-dk);
  color: var(--mineral);
}
.site-head__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; min-height: 74px;
}
.site-head__logo img { height: 58px; width: auto; }
.nav { display: flex; align-items: center; gap: clamp(0.5rem, 1.6vw, 1.6rem); }
.nav a {
  font-family: var(--util); font-size: 0.72rem;
  letter-spacing: 0.13em; text-transform: uppercase;
  text-decoration: none; padding: 0.5rem 0;
  border-bottom: 1.5px solid transparent;
}
.nav a:hover, .nav a[aria-current="page"] { border-bottom-color: var(--amber); }
.nav .btn { padding: 0.6rem 1.1rem; }
.nav-toggle {
  display: none; background: none; border: 1px solid var(--rule-dk);
  color: inherit; border-radius: var(--radius); padding: 0.5rem 0.8rem;
  font-family: var(--util); font-size: 0.72rem; letter-spacing: 0.12em;
  text-transform: uppercase; cursor: pointer;
}
@media (max-width: 900px) {
  .nav-toggle { display: block; }
  .nav {
    position: fixed; inset: 74px 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--ink); border-bottom: 1px solid var(--rule-dk);
    padding: 0.5rem var(--gutter) 1.75rem;
    transform: translateY(-120%); transition: transform var(--dur-mid) var(--ease);
    max-height: calc(100dvh - 74px); overflow-y: auto;
  }
  .nav[data-open="true"] { transform: translateY(0); }
  .nav a { padding: 0.95rem 0; border-bottom: 1px solid var(--rule-dk); }
  .nav .btn { margin-top: 1rem; justify-content: center; }
}

/* --- 7. Hero -------------------------------------------------- */
.hero {
  position: relative; isolation: isolate;
  min-height: clamp(560px, 84vh, 860px);
  display: flex; align-items: flex-end;
  color: var(--mineral); overflow: hidden;
}
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img, .hero__media video {
  width: 100%; height: 100%; object-fit: cover;
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg,
    rgba(16,31,26,0.55) 0%, rgba(16,31,26,0.30) 38%, rgba(16,31,26,0.94) 100%);
}
.hero__inner { padding-block: clamp(2.5rem, 6vw, 5rem); width: 100%; }
.hero h1 { margin-bottom: 0.35em; }
.hero h1 em {
  font-style: normal; color: var(--amber);
  font-variation-settings: "SOFT" 90, "WONK" 1, "opsz" 90;
}
.hero__lede { font-size: clamp(1.05rem, 1.6vw, 1.3rem); max-width: 46ch; opacity: 0.92; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; }

/* Signature: a slow field of rising ferment bubbles behind the hero.
   Reduced-motion users get a static, still field. */
.ferment { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.ferment i {
  position: absolute; bottom: -12%;
  border-radius: 50%;
  border: 1px solid rgba(51, 63, 72, 0.6);
  background: rgba(51, 63, 72, 0.10);
  animation: rise linear infinite;
}
@keyframes rise {
  from { transform: translateY(0) scale(0.85); opacity: 0; }
  12%  { opacity: 0.85; }
  85%  { opacity: 0.6; }
  to   { transform: translateY(-118vh) scale(1.15); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .ferment i { animation: none; opacity: 0.28; bottom: auto; top: 55%; }
  html { scroll-behavior: auto; }
}

/* --- 8. Hours strip ------------------------------------------- */
.hours-strip {
  display: flex; flex-wrap: wrap; gap: 0 clamp(1rem, 3vw, 2.5rem);
  font-family: var(--util); font-size: 0.78rem;
  border-top: 1px solid var(--rule-dk); border-bottom: 1px solid var(--rule-dk);
  padding-block: 1rem;
}
.hours-strip div { display: flex; gap: 0.5rem; padding-block: 0.2rem; }
.hours-strip dt, .hours-strip b { color: var(--amber); text-transform: uppercase; letter-spacing: 0.1em; }
.hours-strip .closed { opacity: 0.5; }

/* --- 9. Cards ------------------------------------------------- */
.card {
  display: flex; flex-direction: column;
  background: var(--chalk);
  border: 1px solid var(--rule);
  border-top: 4px solid var(--accent, var(--moss));
  text-decoration: none;
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.card:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(16,31,26,0.13); }
.card__media { aspect-ratio: 4 / 3; background: var(--spruce); overflow: hidden; }
.card__media img { width: 100%; height: 100%; object-fit: cover; }
.card__body { padding: 1.5rem 1.5rem 1.75rem; }
.card__body h3 { margin-bottom: 0.4rem; color: var(--accent, var(--ink)); }
.card__body p { font-size: 0.95rem; margin-bottom: 0; color: var(--ink); }
.card__more {
  font-family: var(--util); font-size: 0.72rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--moss); margin-top: 1rem; display: block;
}

/* Placeholder tile — shown where a real photo hasn't been dropped in yet.
   Swap the element for an <img> and this disappears. */
.photo-slot {
  aspect-ratio: 4 / 3;
  background:
    repeating-linear-gradient(135deg, var(--spruce) 0 14px, var(--moss) 14px 28px);
  display: grid; place-items: center;
  color: var(--mineral); font-family: var(--util);
  font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase;
  text-align: center; padding: 1rem;
}

/* --- 10. Draft board ------------------------------------------ */
/* The taproom board: mono type, one row per pour, colour-coded by
   category so you can scan beer vs booch vs sour at a glance. */
.board { border-top: 1px solid var(--rule-dk); }
.board__row {
  display: grid;
  grid-template-columns: 1.1rem minmax(0, 2.4fr) minmax(0, 1.6fr) 5.5rem;
  gap: 1rem; align-items: baseline;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--rule-dk);
}
.board__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--moss); align-self: center; }
.board__dot[data-cat="kombucha"] { background: var(--amber); }
.board__dot[data-cat="beer"]     { background: var(--culture); }
.board__dot[data-cat="sour"]     { background: var(--rose); }
.board__dot[data-cat="cocktail"] { background: var(--mineral); }
.board__name { font-family: var(--display); font-size: 1.25rem; font-weight: 600; }
.board__desc { font-size: 0.9rem; opacity: 0.72; }
.board__abv  { font-family: var(--util); font-size: 0.85rem; text-align: right; color: var(--amber); }
@media (max-width: 720px) {
  .board__row { grid-template-columns: 1.1rem 1fr 4.5rem; }
  .board__desc { grid-column: 2 / -1; }
}
.legend { display: flex; flex-wrap: wrap; gap: 1.25rem; font-family: var(--util);
          font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; margin-top: 1.75rem; }
.legend span { display: flex; align-items: center; gap: 0.5rem; }
.legend i { width: 9px; height: 9px; border-radius: 50%; display: block; }

/* --- 11. Timeline (Our Story) --------------------------------- */
.timeline { border-left: 2px solid var(--rule); padding-left: clamp(1.25rem, 3vw, 2.5rem); margin: 0; }
.timeline > div { position: relative; padding-bottom: 2.5rem; }
.timeline > div::before {
  content: ""; position: absolute; left: calc(-1 * clamp(1.25rem, 3vw, 2.5rem) - 7px);
  top: 0.55rem; width: 12px; height: 12px; border-radius: 50%;
  background: var(--chalk); border: 2px solid var(--amber);
}
.timeline dt { font-family: var(--util); font-size: 0.78rem; letter-spacing: 0.16em;
               color: var(--amber); margin-bottom: 0.4rem; }
.timeline dd { margin: 0; }

/* --- 12. Chips (retail stockists) ----------------------------- */
.chips { display: flex; flex-wrap: wrap; gap: 0.6rem; padding: 0; list-style: none; margin: 0; }
.chips li {
  font-family: var(--util); font-size: 0.76rem; letter-spacing: 0.06em;
  border: 1px solid var(--rule); border-radius: 100px; padding: 0.5rem 1rem;
}
.on-dark .chips li, .on-spruce .chips li { border-color: var(--rule-dk); }

/* --- 13. Forms ------------------------------------------------ */
.field { display: grid; gap: 0.4rem; margin-bottom: 1.1rem; }
.field label { font-family: var(--util); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; }
.field input, .field textarea, .field select {
  font: inherit; font-size: 0.95rem;
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--rule); border-radius: var(--radius);
  background: var(--chalk); color: inherit;
}
.on-dark .field input, .on-dark .field textarea {
  background: transparent; border-color: var(--rule-dk); color: var(--mineral);
}
.field input:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--amber); outline-offset: 1px; }

/* --- 14. Footer ----------------------------------------------- */
.site-foot { background: var(--ink); color: var(--mineral); padding-block: clamp(3rem, 6vw, 4.5rem) 2rem; }
.site-foot h4 {
  font-family: var(--util); font-size: 0.72rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--amber); margin: 0 0 1rem;
}
.site-foot a { text-decoration: none; opacity: 0.85; }
.site-foot a:hover { opacity: 1; text-decoration: underline; }
.site-foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; font-size: 0.92rem; }
.site-foot__legal {
  margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--rule-dk);
  font-family: var(--util); font-size: 0.68rem; letter-spacing: 0.1em;
  text-transform: uppercase; opacity: 0.6;
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between;
}

/* --- 15. Utilities & a11y ------------------------------------- */
.lede { font-size: clamp(1.1rem, 1.7vw, 1.35rem); max-width: 56ch; }
.muted { opacity: 0.72; }
.stack > * + * { margin-top: 1rem; }
.center { text-align: center; margin-inline: auto; }
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 99;
  background: var(--amber); color: #fff; padding: 0.8rem 1.2rem;
  font-family: var(--util); font-size: 0.8rem;
}
.skip:focus { left: 0; }
:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px rgba(16, 31, 26, 0.55);
  border-radius: 2px;
}
.page-head { padding-block: clamp(4rem, 9vw, 7rem) clamp(2rem, 4vw, 3rem); }
.page-head p { max-width: 58ch; }

/* ============================================================
   16. Announcement bar (White Duck opening)
   ============================================================ */
.announce { background: var(--amber); color: #fff; }
.announce__inner {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 1rem;
  padding-block: 0.45rem;
}
.announce__tag {
  font-family: var(--util); font-size: 0.66rem; letter-spacing: 0.18em;
  text-transform: uppercase; border: 1.5px solid #fff;
  border-radius: 100px; padding: 0.15rem 0.6rem; white-space: nowrap; font-size: 0.6rem;
}
.announce p { margin: 0; font-weight: 500; max-width: none; font-size: 0.88rem; line-height: 1.35; flex: 1 1 24rem; }
.announce a {
  font-family: var(--util); font-size: 0.72rem; letter-spacing: 0.12em;
  text-transform: uppercase; margin-left: auto; white-space: nowrap;
}

/* ============================================================
   17. Can shelf — the kombucha and beer product grids
   Each can is a card with a colour band pulled from the flavour
   itself, then a mono data strip carrying the real numbers.
   ============================================================ */
.shelf {
  display: grid; gap: clamp(1.25rem, 2.5vw, 2rem);
  grid-template-columns: repeat(auto-fill, minmax(265px, 1fr));
}
.can {
  display: flex; flex-direction: column;
  background: var(--chalk); color: var(--ink);
  border: 1px solid var(--rule);
  border-top: 5px solid var(--can, var(--moss));
}
.can__art {
  aspect-ratio: 3 / 4;
  display: grid; place-items: center;
  background:
    radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--can) 32%, transparent) 0%, transparent 70%),
    var(--mineral);
  overflow: hidden;
}
.can__art img { max-width: 74%; max-height: 88%; width: auto; height: auto; object-fit: contain; }
.can__art span {
  font-family: var(--util); font-size: 0.62rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--moss); text-align: center;
  padding: 0 1rem; opacity: 0.75;
}
.can__body { padding: 1.25rem 1.25rem 1.5rem; display: flex; flex-direction: column; flex: 1; }
.can__name {
  font-family: var(--display); font-weight: 600;
  font-size: 1.3rem; line-height: 1.08; letter-spacing: -0.015em;
  margin: 0 0 0.15rem;
}
.can__style {
  font-family: var(--util); font-size: 0.68rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--moss); margin: 0 0 0.9rem;
}
/* The data strip: the numbers people actually scan for. */
.can__data {
  display: flex; flex-wrap: wrap; gap: 0.35rem 0.9rem;
  font-family: var(--util); font-size: 0.72rem;
  border-block: 1px solid var(--rule);
  padding-block: 0.6rem; margin-bottom: 0.9rem;
}
.can__data b { color: var(--moss); font-weight: 700; }
.can__desc { font-size: 0.92rem; margin: 0 0 0.9rem; max-width: none; }
.can__ingredients {
  font-size: 0.78rem; font-style: italic; opacity: 0.66;
  margin: auto 0 0; max-width: none;
}
.on-dark .can, .on-spruce .can { background: var(--chalk); }

/* Limited-release cans get a corner flag rather than a different card. */
.can--limited { position: relative; }
.can--limited::after {
  content: "Limited";
  position: absolute; top: 0; right: 0;
  background: var(--ink); color: var(--mineral);
  font-family: var(--util); font-size: 0.58rem;
  letter-spacing: 0.16em; text-transform: uppercase;
  padding: 0.35rem 0.7rem;
}

/* ============================================================
   18. Partner panel (White Duck Taco in the taproom)
   ============================================================ */
.partner {
  border: 1px solid var(--rule);
  border-left: 5px solid var(--amber);
  padding: clamp(1.5rem, 4vw, 2.75rem);
  background: var(--chalk);
}
.on-dark .partner, .on-spruce .partner { border-color: var(--rule-dk); border-left-color: var(--amber); background: transparent; }
.partner__meta {
  display: grid; gap: 0.4rem;
  font-family: var(--util); font-size: 0.8rem;
  margin: 1.5rem 0;
}
.partner__meta b { color: var(--amber); letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.68rem; }

/* ============================================================
   19. Cinematic scroll engine support (assets/motion.js)
   ============================================================ */

/* Reveal-on-scroll base state. JS adds .reveal then .is-revealed;
   this doubles as the safe fallback if JS fails to load (default
   browser state is simply "not yet transitioned in" -- acceptable,
   never invisible-forever, since JS adds these classes itself
   rather than this file hiding anything by default). */
.reveal {
  opacity: 0;
  transform: translateY(26px) scale(0.975);
  transition: opacity var(--dur-slow) var(--ease),
              transform var(--dur-slow) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
}
.reveal.is-revealed { opacity: 1; transform: none; }
/* .card's own hover-lift must still win once a card has revealed --
   equal specificity to .reveal.is-revealed would otherwise leave
   source order to decide, so this is bumped a notch on purpose. */
.card.is-revealed:hover { transform: translateY(-3px); }

/* Hero: perspective container for the scroll-linked 3D exit tilt.
   motion.js drives the actual transform on the media element every
   frame based on real scroll position -- these rules just open up
   the 3D space it animates within. */
.hero { perspective: 1100px; }
.hero__media { transform-style: preserve-3d; }
.hero__media img, .hero__media video { will-change: transform, filter; }
.ferment i { will-change: transform; }

/* Hero intro: pure-CSS staggered fade-up on load. The hero is
   already in view when the page loads, so there's nothing to
   scroll into -- this is a separate, JS-independent entrance. */
@keyframes hero-in {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero__inner > * { animation: hero-in 900ms var(--ease) both; }
.hero__inner > *:nth-child(1) { animation-delay: 0.05s; }
.hero__inner > *:nth-child(2) { animation-delay: 0.15s; }
.hero__inner > *:nth-child(3) { animation-delay: 0.25s; }
.hero__inner > *:nth-child(4) { animation-delay: 0.35s; }
.hero__inner > *:nth-child(5) { animation-delay: 0.45s; }

/* Reduced motion: kill every non-essential animation/transition
   this engine adds and jump straight to the resting state. Combined
   with motion.js checking the same media query before it does any
   wheel interception, parallax, or 3D transform in the first place. */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .hero__inner > * { animation: none !important; opacity: 1 !important; transform: none !important; }
  .hero__media img, .hero__media video, .ferment i { will-change: auto !important; }
}

/* ============================================================
   20. Audit fixes
   ============================================================ */

/* Stat numbers (Griffith Hall). Previously marked up as <h2>, which put
   "6,000+" into the page's heading outline and made screen readers
   announce three numbers as section headings. They're now <p> styled to
   look identical -- same visual, honest semantics. */
.stat__num {
  font-family: var(--display);
  font-weight: 600;
  font-variation-settings: "SOFT" 40, "WONK" 1, "opsz" 40;
  font-size: clamp(2rem, 4.4vw, 3.4rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin: 0 0 0.15em;
  max-width: none;
}

/* Images now carry intrinsic width/height so the browser reserves the
   right space before they load (no layout shift / CLS). These two rules
   let that coexist with the responsive layout. */
img[width][height] { height: auto; }
.hero__media img, .card__media img { height: 100%; }
.can__art { position: relative; }
/* Absolutely centered so the WHOLE can always fits: percentage max-height
   doesn't resolve inside an aspect-ratio grid, which was cropping the can. */
.can__art img { position: absolute; inset: 6% 0; margin: auto; height: 88%; width: auto; max-width: 74%; object-fit: contain; }

/* --- Designed empty states -------------------------------------
   The old .photo-slot rendered developer instructions ("Add can art
   assets/img/beer-citraphilia.png") directly on the page. There are
   still 19 unfilled slots across the site, so on launch day those would
   read as broken. These now render as a quiet, intentional-looking
   panel that carries the product's own accent colour instead. */
.can__art span {
  font-family: var(--util);
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--moss);
  opacity: 0.45;
  text-align: center;
  padding: 0 1rem;
}
.photo-slot {
  background:
    linear-gradient(160deg,
      color-mix(in srgb, var(--accent, var(--moss)) 22%, var(--mineral)) 0%,
      var(--mineral) 100%);
  color: var(--moss);
  font-family: var(--util);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  opacity: 0.9;
}

/* --- Loading skeleton ------------------------------------------
   The draft board previously showed bare "Loading…" text. A skeleton
   holds the right shape so the section doesn't jump when data lands. */
.board__skeleton { display: grid; gap: 0.9rem; }
.board__skeleton span {
  display: block; height: 1.1rem; border-radius: 3px;
  background: linear-gradient(90deg,
    rgba(233,236,226,0.10) 25%, rgba(233,236,226,0.20) 37%, rgba(233,236,226,0.10) 63%);
  background-size: 400% 100%;
  animation: skeleton-sweep 1.4s ease-in-out infinite;
}
.board__skeleton span:nth-child(2) { width: 82%; }
.board__skeleton span:nth-child(3) { width: 91%; }
.board__skeleton span:nth-child(4) { width: 74%; }
@keyframes skeleton-sweep {
  from { background-position: 100% 50%; }
  to   { background-position: 0 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .board__skeleton span { animation: none; }
}

/* Screen-reader-only: present in the accessibility tree and to search
   engines, visually hidden. Used where a section needs a heading for a
   correct document outline but the design doesn't call for visible text. */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Footer headings are h2 for a correct outline but keep their original
   small-label appearance (they were h4 purely for looks). */
.foot-h {
  font-family: var(--util);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--amber);
  margin: 0 0 1rem;
  line-height: 1.4;
}


/* ============================================================
   Accent = PANTONE 432 C slate (#333F48). On dark surfaces the lighter tint is
   used for small text so it stays readable (WCAG AA).
   ============================================================ */
.on-dark, .on-spruce, .hero { --accent-text: var(--amber-lt); }
.hero h1 em, .hours-strip b, .board__abv,
.on-dark .partner__meta b, .on-spruce .partner__meta b { color: var(--amber-lt); }
.on-dark a[style*="--amber"], .on-spruce a[style*="--amber"] { color: var(--amber-lt) !important; }
.announce a { color: #fff; text-decoration: underline; }
.btn--fill:hover span { color: inherit; }

/* Contact: radio group + date/number inputs match the other fields */
.radio-group { border: 0; padding: 0; margin: 0 0 1.1rem; min-width: 0; }
.radio-group legend { font-family: var(--util); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; padding: 0; margin-bottom: 0.5rem; }
.radio-row { display: flex; gap: 1.5rem; }
.field label.radio { font-family: var(--body); font-size: 1rem; letter-spacing: 0; text-transform: none; display: inline-flex; align-items: center; gap: 0.5rem; cursor: pointer; }
.field label.radio input { width: auto; accent-color: var(--amber); }
.field input[type="date"], .field input[type="number"] { font: inherit; }
[hidden] { display: none !important; }

/* Slim announcement bar on phones: tag + Details share the first row */
@media (max-width: 640px) {
  .announce__tag { order: 1; }
  .announce a { order: 2; margin-left: auto; }
  .announce p { order: 3; flex-basis: 100%; font-size: 0.84rem; }
}

/* PANTONE 432 is dark, so on dark surfaces the accent switches to its light
   tint (text/lines) and filled buttons get a light edge so they stay visible. */
.site-head .nav a:hover, .site-head .nav a[aria-current="page"] { border-bottom-color: var(--amber-lt); }
.foot-h, .site-foot .eyebrow { color: var(--amber-lt); }
.on-dark .btn--fill, .on-spruce .btn--fill, .hero .btn--fill, .site-foot .btn--fill {
  border-color: var(--amber-lt);
}
.on-dark .btn--fill:hover, .on-spruce .btn--fill:hover, .hero .btn--fill:hover, .site-foot .btn--fill:hover {
  background: var(--amber-lt); border-color: var(--amber-lt); color: var(--ink);
}
.announce { border-block: 1px solid rgba(255,255,255,.12); }
.on-dark :focus-visible, .on-spruce :focus-visible, .site-head :focus-visible, .site-foot :focus-visible { outline-color: var(--amber-lt); }
.on-dark .eyebrow::before, .on-spruce .eyebrow::before, .hero .eyebrow::before { border-color: var(--amber-lt); }
.hero .eyebrow, .on-dark .eyebrow, .on-spruce .eyebrow { color: var(--amber-lt); }

/* Home: tighter gap above Our story, and PANTONE 466 C (#D3BC8D) band to set it apart */
.on-slate { background: var(--amber); }
.on-slate .lede, .on-slate .muted { color: var(--mineral); opacity: .85; }

/* Weekly specials: a week "board" of day tiles */
.specials { background: var(--mineral); }
.specials__week { list-style: none; margin: 2.5rem 0 0; padding: 0; display: grid; gap: 1rem;
  grid-template-columns: repeat(3, 1fr); counter-reset: none; }
.special { position: relative; background: var(--amber); color: var(--mineral); padding: 1.4rem 1.4rem 1.6rem;
  display: flex; flex-direction: column; gap: .5rem; min-height: 11.5rem; overflow: hidden;
  border-radius: 4px; transition: transform .25s ease, box-shadow .25s ease; }
.special::after { content: ""; position: absolute; right: -2.2rem; bottom: -2.2rem; width: 6.5rem; height: 6.5rem;
  border-radius: 50%; border: 1px solid rgba(255,255,255,.14); box-shadow: 0 0 0 1rem rgba(255,255,255,.04); }
.special:hover { transform: translateY(-4px); box-shadow: 0 14px 28px rgba(16,31,26,.22); }
.special__day { display: flex; align-items: center; justify-content: space-between; font-family: var(--util);
  font-size: .78rem; letter-spacing: .2em; text-transform: uppercase; color: var(--amber-lt); }
.special__day abbr { text-decoration: none; }
.special__day em { display: none; font-style: normal; background: #fff; color: var(--amber); padding: .15rem .5rem; border-radius: 99px; letter-spacing: .14em; font-size: .68rem; }
.special__deal { font-family: var(--display, Georgia, serif); font-size: clamp(2.1rem, 3.6vw, 2.9rem); line-height: 1; letter-spacing: -.01em; }
.special__what { font-size: .98rem; line-height: 1.4; opacity: .92; }
.special__what b { color: var(--amber-lt); font-weight: 700; }
.special__what i { font-style: normal; opacity: .7; font-size: .85em; text-transform: uppercase; letter-spacing: .1em; }
.special.is-today { background: var(--ink); outline: 3px solid var(--culture); outline-offset: 2px; }
.special.is-today .special__day em { display: inline-block; }
@media (max-width: 900px) { .specials__week { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .specials__week { grid-template-columns: 1fr; } .special { min-height: 0; } }

/* Beers on Tap: rising-bubble motion */
.ontap { position: relative; overflow: hidden; background: linear-gradient(180deg, var(--ink) 0%, #16261f 100%); }
.ontap__inner { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 2rem 3rem; justify-content: space-between; align-items: center; }
.ontap__inner h2 { margin: 0 0 .75rem; }
.ontap__sub { max-width: 34rem; margin: 0; font-size: 1.1rem; line-height: 1.6; opacity: .88; }
.ontap__cta { display: grid; gap: .9rem; justify-items: start; }
.ontap__live { margin: 0; display: flex; align-items: center; gap: .55rem; font-family: var(--util); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--amber-lt); }
.ontap__dot { width: .55rem; height: .55rem; border-radius: 50%; background: var(--culture); box-shadow: 0 0 0 0 rgba(143,185,62,.6); animation: ontap-pulse 2s ease-out infinite; }
.ontap__bubbles { position: absolute; inset: 0; pointer-events: none; }
.ontap__bubbles i { position: absolute; bottom: -40px; width: var(--s); height: var(--s); border-radius: 50%;
  border: 1px solid rgba(233,236,226,.35); background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.28), rgba(255,255,255,.04) 60%);
  opacity: 0; animation: ontap-rise var(--d) linear var(--dl) infinite; }
@keyframes ontap-rise { 0% { transform: translate(0,0); opacity: 0; } 10% { opacity: .9; } 50% { transform: translate(12px,-120px); } 90% { opacity: .5; } 100% { transform: translate(-8px,-340px); opacity: 0; } }
@keyframes ontap-pulse { 0% { box-shadow: 0 0 0 0 rgba(143,185,62,.6); } 70%,100% { box-shadow: 0 0 0 .7rem rgba(143,185,62,0); } }
@media (prefers-reduced-motion: reduce) { .ontap__bubbles i, .ontap__dot { animation: none; } .ontap__bubbles i { opacity: .35; bottom: 20%; } }

/* Kombucha: retail strip under the hero */
.retail { padding-block: clamp(2.5rem, 5vw, 4rem); }
.retail__head { max-width: 38rem; }
.retail__head h2 { margin: 0 0 .6rem; }
.retail__head p:last-child { margin: 0; opacity: .85; }
.retail__list { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: .75rem; grid-template-columns: repeat(4, 1fr); }
.retail__list li { background: rgba(255,255,255,.06); border: 1px solid rgba(233,236,226,.22); border-radius: 4px;
  padding: 1.1rem 1rem; text-align: center; font-family: var(--display); font-size: 1.15rem; letter-spacing: .01em;
  opacity: 0; transform: translateY(14px); animation: retail-in .6s ease forwards; animation-delay: calc(var(--i) * 70ms + 150ms);
  transition: background .2s ease, transform .2s ease, border-color .2s ease; }
.retail__list li:hover { background: var(--mineral); color: var(--ink); border-color: var(--mineral); transform: translateY(-3px); }
@keyframes retail-in { to { opacity: 1; transform: none; } }
@media (max-width: 900px) { .retail__list { grid-template-columns: repeat(2, 1fr); } }
@media (prefers-reduced-motion: reduce) { .retail__list li { animation: none; opacity: 1; transform: none; } }
.page-head h1 { margin-bottom: .5rem; }
.page-head .benefits { max-width: 46rem; margin: 1.25rem 0 0; padding-left: 1.1rem; border-left: 3px solid var(--culture); font-size: 1.05rem; line-height: 1.6; }

/* Specials v2: separate Food / Drink rows per day */
.special { min-height: 0; gap: .9rem; }
.special__row { display: grid; grid-template-columns: auto 1fr; column-gap: .9rem; row-gap: .15rem; align-items: baseline;
  padding-top: .9rem; border-top: 1px solid rgba(233,236,226,.18); }
.special__row strong { grid-column: 1; grid-row: 2; font-family: var(--display); font-size: clamp(1.9rem, 3vw, 2.4rem); line-height: 1; white-space: nowrap; }
.special__row .special__what { grid-column: 2; grid-row: 2; align-self: center; }
.special__tag { grid-column: 1 / -1; grid-row: 1; display: inline-flex; align-items: center; gap: .45rem; font-family: var(--util);
  font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--amber-lt); }
.special__tag svg { width: 1.05rem; height: 1.05rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.special__row--d .special__tag { color: #E7B8C8; }
.special__row--d strong { color: #fff; }
.special.is-today .special__row--d .special__tag { color: var(--culture); }

/* Text fallback shown only if assets/img/logo.png is missing */
.site-head__logo .wordmark { font-family: var(--display); font-size: 1.6rem; letter-spacing: .04em; text-transform: uppercase; color: #fff; white-space: nowrap; text-decoration: none; }
.site-head__logo img[width][height] { height: 58px; width: auto; max-width: none; }
@media (max-width: 640px) { .site-head__logo img[width][height] { height: 48px; } }

/* Mobile fix: the img[width][height]{height:auto} reset was beating the hero/card image
   height, so on tall phone screens the photo didn't fill the hero and the copy sat below it. */
.hero__media img[width][height], .hero__media video { height: 100%; width: 100%; object-fit: cover; }
.card__media img[width][height] { height: 100%; width: 100%; object-fit: cover; }
@media (max-width: 700px) {
  .hero::after { background: linear-gradient(180deg, rgba(16,31,26,.55) 0%, rgba(16,31,26,.55) 30%, rgba(16,31,26,.92) 100%); }
}

/* Form fields inside dark areas (footer newsletter, dark sections): the field keeps its light
   background, so the typed text must be dark to be readable. */
.site-foot .field input, .site-foot .field textarea, .site-foot .field select,
.on-spruce .field input, .on-spruce .field textarea, .on-spruce .field select {
  background: var(--chalk); color: var(--ink); border-color: transparent;
}
.site-foot .field input::placeholder, .on-spruce .field input::placeholder, .on-spruce .field textarea::placeholder { color: #6b756f; opacity: 1; }