:root {
  --ink: #181514;
  --paper: #fffaf2;
  --cream: #f7eedf;
  --purple: #4d168f;
  --blue: #1587c8;
  --yellow: #f5c83b;
  --orange: #ed7d1f;
  --red: #e63f46;
  --green: #258f54;
  --graphite: #3a3532;
  --line: rgba(24, 21, 20, 0.14);
  --shadow: 0 24px 60px rgba(24, 21, 20, 0.18);
  --nav-height: 90px;
}

* {
  box-sizing: border-box;
}

.visually-hidden {
  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;
}

.skip-link {
  position: fixed;
  z-index: 1000;
  top: 0.75rem;
  left: 0.75rem;
  padding: 0.65rem 0.9rem;
  color: #fff;
  background: var(--purple);
  border: 2px solid #fff;
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: translateY(0);
}

/* overflow-x: hidden (not clip) on both html and body computes overflow-y
   to auto on both per the CSS Overflow spec, turning each into its own
   scroll container — nested scroll containers are a documented
   position: sticky trouble spot (see PLANNING.md §4 / D4) and were
   silently breaking every sticky/floating chapter. `clip` gives the same
   "never show a horizontal scrollbar" guarantee (D2) without creating a
   scroll container, so sticky keeps working. */
html {
  max-width: 100%;
  overflow-x: clip;
  scroll-behavior: smooth;
  scroll-padding-top: var(--nav-height);
}

body {
  max-width: 100%;
  margin: 0;
  overflow-x: clip;
  color: var(--ink);
  background: var(--paper);
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.5;
}

/* -------------------------------------------------- */
/* Page and card configuration                         */
/* -------------------------------------------------- */

.page {
  --card-shadow: var(--band-tint, var(--purple));
  --backdrop-fallback: linear-gradient(150deg, var(--band-tint, var(--purple)), var(--ink));
  --band-foreground: #fff;
}

.page--home {
  --band-tint: var(--purple);
}

.page--emporium {
  --band-tint: var(--purple);
}

.page--bar {
  --band-tint: var(--red);
  --band-foreground: #100e0d;
}

.page--coffee {
  --band-tint: var(--orange);
  --band-foreground: #100e0d;
}

.page--food {
  --band-tint: var(--yellow);
}

.page--art {
  --band-tint: var(--blue);
}

.page--events {
  --band-tint: var(--green);
  --band-foreground: #100e0d;
}

.page--about {
  --band-tint: var(--graphite);
}

#home-location .chapter-window {
  --backdrop-photo: url('/assets/content/home/storefront-exterior.webp');
}

#home-location {
  --window-height: 60vh;
}

#home-mural {
  --window-height: 100vh;
}

#home-mural .chapter-window {
  --backdrop-photo: url('/assets/content/home/jubilee-mural.webp');
  --backdrop-fallback: linear-gradient(135deg, var(--purple), var(--ink));
}

#emporium-showcase .chapter-window {
  --backdrop-photo: url('/assets/content/emporium/gift-shop-shelving.webp');
  --window-height: 50vh;
}

#specialty-drinks {
  --float-height: 100vh;
}

#specialty-drinks .chapter-window {
  --backdrop-photo: url('/assets/content/bar/top-shelf-display.webp');
  --backdrop-color: var(--ink);
  --backdrop-size: max(50%, calc(var(--float-height, 78vh) * 4 / 3)) auto;
  --backdrop-position: center top;
}

#barista-menu {
  --float-height: 100vh;
}

#barista-menu .chapter-window {
  --backdrop-photo: url('/assets/content/coffee/barista-menu-temporary.webp');
  --backdrop-color: var(--ink);
}

#take-home {
  --card-shadow: var(--purple);
  --backdrop-fallback: linear-gradient(150deg, var(--purple), var(--ink));
}

#take-home .chapter-window {
  --backdrop-photo: url('/assets/content/coffee/retail-shelf.webp');
}

#food-specials {
  --card-shadow: var(--red);
  --backdrop-fallback: linear-gradient(150deg, var(--red), var(--ink));
}

#upcoming-events {
  --float-height: 30vh;
}

#upcoming-events .chapter-window {
  --backdrop-photo: url('/assets/content/events/lounge-flamingo-wide.webp');
}

#event-listings {
  background: #e5f0ed;
}

.event-card--grand-opening {
  --event-photo: url('/assets/content/events/lounge-flamingo-wide.webp');
}

.event-card--author-reading {
  --event-photo: url('/assets/content/events/meet_the_author.webp');
  --event-scrim: linear-gradient(
    105deg,
    rgba(24, 21, 20, 0.44) 0%,
    rgba(24, 21, 20, 0.22) 58%,
    rgba(24, 21, 20, 0.32) 100%
  );
}

.event-card--gratitude-journaling {
  --event-photo: url('/assets/content/events/gratitude_journaling.webp');
  --event-scrim: linear-gradient(
    105deg,
    rgba(24, 21, 20, 0.44) 0%,
    rgba(24, 21, 20, 0.22) 58%,
    rgba(24, 21, 20, 0.32) 100%
  );
}

.event-card--trivia {
  --event-photo: url('/assets/content/events/trivia_battle.webp');
  --event-scrim: linear-gradient(
    105deg,
    rgba(24, 21, 20, 0.44) 0%,
    rgba(24, 21, 20, 0.22) 58%,
    rgba(24, 21, 20, 0.32) 100%
  );
}

.event-card--book-club {
  --event-photo: url('/assets/content/events/book_club.webp');
  --event-scrim: linear-gradient(
    105deg,
    rgba(24, 21, 20, 0.44) 0%,
    rgba(24, 21, 20, 0.22) 58%,
    rgba(24, 21, 20, 0.32) 100%
  );
}

#team .chapter-window {
  --backdrop-photo: url('/assets/content/about/storefront-exterior.webp');
  --window-height: 100vh;
  --window-max-height: 100vh;
}

.explore-card--emporium,
.team-owner-card,
#angela-profile,
#teri-profile {
  --card-shadow: var(--purple);
}

.explore-card--emporium {
  --explore-photo: url('/assets/content/home/cards/explore-emporium.webp');
}

.explore-card--bar,
#carol-profile,
#sweet-t {
  --card-shadow: var(--red);
}

.explore-card--bar {
  --explore-photo: url('/assets/content/home/cards/explore-bar.webp');
}

.explore-card--coffee,
#krysten-profile,
#lenelle-profile {
  --card-shadow: var(--orange);
}

.explore-card--coffee {
  --explore-photo: url('/assets/content/home/cards/explore-coffee.webp');
}

#alice-profile,
#nivea-profile {
  --card-shadow: var(--yellow);
}

#kelley-profile,
#tom-profile {
  --card-shadow: var(--blue);
}

.explore-card--events,
#brenna-profile,
#taylor-profile {
  --card-shadow: var(--green);
}

.explore-card--events {
  --explore-photo: url('/assets/content/home/cards/explore-events.webp');
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* Horizontal-scroll reels keep the scroll interaction but never show the
   native scrollbar widget — required for both desktop and mobile. */
.chapter-reel,
.explore-reel {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.chapter-reel::-webkit-scrollbar,
.explore-reel::-webkit-scrollbar {
  display: none;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1,
h2 {
  line-height: 0.98;
  letter-spacing: 0;
}

.eyebrow {
  margin-bottom: 10px;
  color: var(--purple);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.wrap {
  width: min(1180px, calc(100% - 32px));
  margin-inline: auto;
}

/* -------------------------------------------------- */
/* Nav                                                 */
/* -------------------------------------------------- */

/* Sticky top nav — anchored to the viewport regardless of page (D1
   applies to every page). Only the logo + link row sticks: the marquee,
   hero, and page-intro bands are siblings that scroll away normally.
   .site-nav is the full-bleed sticky bar (background + positioning);
   .site-nav-inner does the centered-content layout. This is the single
   place that controls sticky-nav behavior sitewide — no per-page CSS
   needed, only the markup wrapper (see any page's <nav>). */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  padding-block: 12px;
  color: var(--band-foreground);
  background: var(--band-tint, var(--ink));
}

.site-nav-inner {
  display: flex;
  min-height: 50px;
  width: min(1180px, calc(100% - 32px));
  margin-inline: auto;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 900;
}

.brand img {
  width: 42px;
  height: 42px;
  border-radius: 8px;
  object-fit: cover;
  background: #fff;
  border: 1px solid var(--line);
}

.nav-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px 20px;
  font-size: 0.92rem;
  font-weight: 800;
}

.nav-links a {
  transition: opacity 140ms ease;
}

.nav-links a:hover,
.nav-links a:focus-visible,
.nav-links a[aria-current="page"] {
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 5px;
}

/* -------------------------------------------------- */
/* Buttons                                             */
/* -------------------------------------------------- */

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.button {
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  padding: 12px 18px;
  border-radius: 8px;
  font-weight: 900;
}

.button-hot {
  color: #220a3f;
  background: #ffe46b;
  box-shadow: 7px 7px 0 var(--blue);
}

.button-ghost {
  border: 2px solid rgba(255, 255, 255, 0.72);
  color: #fff;
}

/* -------------------------------------------------- */
/* Home hero                                           */
/* -------------------------------------------------- */

.home-hero {
  min-height: 100vh;
  color: #fff;
  background:
    radial-gradient(circle at 8% 28%, rgba(245, 200, 59, 0.75) 0 5rem, transparent 5.2rem),
    radial-gradient(circle at 88% 36%, rgba(21, 135, 200, 0.65) 0 6rem, transparent 6.2rem),
    linear-gradient(130deg, #351078, #871c8c 48%, #e63f46 78%, #f18b21);
}

.marquee {
  display: flex;
  overflow: hidden;
  border-block: 2px solid rgba(255, 255, 255, 0.45);
  background: rgba(0, 0, 0, 0.25);
  white-space: nowrap;
}

.marquee span {
  flex: 1 0 auto;
  padding: 9px 28px;
  color: #fff;
  font-size: clamp(0.9rem, 1.4vw, 1.2rem);
  font-weight: 900;
  text-transform: uppercase;
}

.hero-stage {
  display: grid;
  width: min(1180px, calc(100% - 32px));
  min-height: calc(100vh - 118px);
  margin: 0 auto;
  grid-template-columns: minmax(0, 1.05fr) minmax(300px, 0.95fr);
  gap: 36px;
  align-items: center;
  padding: 44px 0 80px;
}

.hero-copy .eyebrow {
  color: #ffe783;
}

.hero-copy h1 {
  max-width: 820px;
  margin-bottom: 22px;
  font-size: clamp(3rem, 9vw, 7.6rem);
  text-transform: uppercase;
}

.hero-copy p:not(.eyebrow) {
  max-width: 650px;
  margin-bottom: 28px;
  color: rgba(255, 255, 255, 0.9);
  font-size: clamp(1.1rem, 2vw, 1.45rem);
}

.hero-poster {
  position: relative;
  min-height: 420px;
  padding: clamp(18px, 4vw, 38px);
  border: 3px solid #fff;
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.18) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.18) 1px, transparent 1px),
    rgba(255, 255, 255, 0.12);
  background-size: 34px 34px;
  box-shadow: 14px 14px 0 rgba(0, 0, 0, 0.24);
}

.hero-poster img {
  width: min(360px, 100%);
  margin: 30px auto 0;
  border-radius: 8px;
  box-shadow: var(--shadow);
}

/* -------------------------------------------------- */
/* Interior page title band (compact, non-chapter)     */
/* -------------------------------------------------- */

.page-header {
  color: var(--band-foreground);
  background: var(--band-tint, var(--purple));
}

.page-intro {
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
  padding: 40px 0 64px;
}

.page-intro h1 {
  max-width: 720px;
  margin-bottom: 16px;
  font-size: clamp(2.4rem, 6vw, 4.6rem);
  text-transform: uppercase;
}

.page-intro p {
  max-width: 620px;
  margin-bottom: 0;
  color: var(--band-foreground);
  font-size: clamp(1.05rem, 1.8vw, 1.25rem);
}

/* -------------------------------------------------- */
/* Backdrop + Reel chapter system                      */
/* -------------------------------------------------- */

.chapter {
  position: relative;
  isolation: isolate;
}

/* Default: the window is a short, content-free glimpse of the backdrop
   image — roughly a third of the viewport, capped at half. It is not a
   hero panel and does not carry text. The height cap only makes sense
   for a window that scrolls away (a brief glimpse is fine); a chapter
   whose image needs to actually read clearly while still scrolling
   normally can opt out per-chapter via --window-height/
   --window-max-height (e.g. About Us's storefront) rather than the
   sitewide default being raised for everyone. --backdrop-fit defaults
   to cover; set --backdrop-fit: contain (plus --backdrop-color for the
   letterbox fill) for a wide image that would otherwise over-zoom in a
   tall window. For a chapter that needs a guaranteed minimum on-screen
   width regardless of viewport (e.g. a plain --backdrop-fit: contain
   shrinking too far on an ultra-wide monitor), --backdrop-size overrides
   --backdrop-fit entirely with an explicit width expression — pair it
   with --backdrop-position: center top so any resulting vertical
   overflow (once the width floor forces the image taller than the
   window) crops off the bottom, keeping the top edge anchored, rather
   than the default center-anchored crop. */
.chapter-window {
  position: relative;
  height: var(--window-height, 33vh);
  min-height: 200px;
  max-height: var(--window-max-height, 50vh);
  background-color: var(--backdrop-color, transparent);
  background-image: var(--backdrop-photo, var(--backdrop-fallback, linear-gradient(135deg, var(--purple), var(--ink))));
  background-repeat: no-repeat;
  background-size: var(--backdrop-size, var(--backdrop-fit, cover));
  background-position: var(--backdrop-position, center);
}

/* Supplier-mark pilot between Coffee's menu and retail chapters. */
.coffee-interlude {
  overflow: hidden;
  isolation: isolate;
  background-image: linear-gradient(150deg, var(--yellow), var(--ink));
}

.coffee-interlude::before {
  content: "";
  position: absolute;
  top: 50%;
  right: clamp(-110px, -6vw, -36px);
  width: clamp(320px, 48vw, 620px);
  aspect-ratio: 494 / 430;
  background: url('/assets/content/coffee/cumberland-coffee-roasters-logo.webp') center / contain no-repeat;
  filter: grayscale(1) contrast(1.35);
  mix-blend-mode: multiply;
  opacity: 0.14;
  transform: translateY(-50%) rotate(-7deg) scale(1.08);
  transform-origin: center;
  pointer-events: none;
}

@media (max-width: 600px) {
  .coffee-interlude::before {
    right: -28vw;
    width: 92vw;
    opacity: 0.12;
  }
}

.backdrop-tag {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 1;
  padding: 6px 12px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.28);
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Default: the content band is a normal, full-width, content-driven
   section — not overlaid on the window, height set by its own content. */
.chapter-content {
  padding: 56px 0;
  background: var(--paper);
  color: var(--ink);
}

.chapter-heading {
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto 28px;
}

.chapter-heading h2 {
  margin-bottom: 8px;
  color: var(--ink);
  font-size: clamp(2rem, 5vw, 3.6rem);
}

.chapter-heading p {
  max-width: 620px;
  margin-bottom: 0;
  color: #4a423d;
}

/* Opt in per chapter with class="chapter chapter--floating" whenever a
   short scrolling band would waste the image (see PLANNING.md D4,
   redesigned per untracked/BACKDROP_INDEPENDENCE_PLAN_20260806.md,
   round 2 correction). The first redesign attempt (position: fixed
   clipped by an overflow: hidden wrapper) turned out to be a dead end
   — position: fixed is not reliably clipped by a non-transformed
   ancestor's overflow: hidden in real browsers, and adding a transform
   to force that clipping also converts the fixed descendant into an
   ordinary wrapper-relative box, which defeats the point. Verified
   broken via a real screenshot (the backdrop kept painting over the
   footer at the true bottom of the page) before this correction, not
   assumed.

   This version uses the same CSS Grid stacking as .chapter--overlay
   below (window and content share one grid cell, sized to whichever is
   taller), plus background-attachment: fixed on the window so the
   image itself reads as motionless relative to the viewport while its
   own box — an ordinary, normal-flow, non-sticky, non-fixed element —
   scrolls with the page like everything else. No pin/release timing to
   keep in sync, no negative margins, no --nav-height offset: the whole
   bug class this replaced (sticky/fixed engaging or releasing at the
   wrong point because two separate height values could drift apart) is
   structurally impossible here, because there is only one height value
   (the grid row) rather than two that need to match. --float-height
   sets a comfortable minimum reveal distance; content is free to grow
   past it on any viewport without ever being clipped or bleeding into
   an unrelated image, since window and content are the same cell. */
.chapter--floating {
  display: grid;
  /* minmax(0, 1fr), not a bare 1fr: .chapter-reel's horizontal-scroll
     content has a wide min-content size, and a bare 1fr track respects
     that instead of clamping to the available width — the grid item
     (and this window's contain-fit image with it) was rendering wider
     than the viewport, off-center, with the right side clipped by D2's
     overflow-x: clip. minmax(0, 1fr) forces the track to shrink to fit
     regardless of content's intrinsic width. */
  grid-template-columns: minmax(0, 1fr);
  /* No floor by default (round 3, 2026-08-06): a nonzero floor left a
     transparent gap above/below shorter content, and because the
     window uses background-attachment: fixed, that gap showed a
     viewport-relative, disconnected-looking fragment of the image
     instead of a sensible crop. Zero floor means the row is always
     exactly .chapter-content's own height, so the gap can't occur by
     construction. A chapter can still opt into a taller floor through
     semantic selector configuration; Bar and Coffee currently do. */
  grid-template-rows: minmax(var(--float-height, 0), auto);
}

.chapter--floating .chapter-window,
.chapter--floating .chapter-content {
  grid-area: 1 / 1;
}

.chapter--floating .chapter-window {
  height: 100%;
  min-height: 0;
  max-height: none;
  background-attachment: fixed;
}

.chapter--floating .chapter-window::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.15) 40%, rgba(0, 0, 0, 0.5));
}

.chapter--floating .chapter-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: transparent;
  color: #fff;
}

/* Opt in per chapter with class="chapter chapter--overlay" for a
   caption-on-photo look: text sits on top of the image, but neither is
   pinned — the whole chapter scrolls as one normal unit. Different
   from chapter--floating on purpose: no sticky/fixed trick, no release
   timing to keep in sync, just a window with its content layered
   directly on top instead of stacked below it.

   Stacked via CSS Grid (redesigned per
   untracked/BACKDROP_INDEPENDENCE_PLAN_20260806.md) rather than
   position: absolute; inset: 0, so content is never forced into a box
   sized by the image: the row is at least --window-height tall (the
   tier-1/2 preferred height) but grows to fit content automatically if
   a chapter's heading + reel ever need more room than that, on any
   viewport. The window stretches to match whatever the row ends up
   being. */
.chapter--overlay {
  display: grid;
  /* minmax(0, 1fr): see .chapter--floating above for why a bare 1fr
     risks overflowing past the viewport if this chapter ever carries a
     wide-content reel. */
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(var(--window-height, 33vh), auto);
}

.chapter--overlay .chapter-window,
.chapter--overlay .chapter-content {
  grid-area: 1 / 1;
}

.chapter--overlay .chapter-window {
  height: 100%;
  max-height: none;
}

.chapter--overlay .chapter-window::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.15) 40%, rgba(0, 0, 0, 0.45));
}

.chapter--overlay .chapter-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: transparent;
  color: #fff;
}

.chapter--floating .chapter-heading h2,
.chapter--overlay .chapter-heading h2 {
  color: #fff;
}

.chapter--floating .chapter-heading p,
.chapter--overlay .chapter-heading p {
  color: rgba(255, 255, 255, 0.85);
}

.chapter-reel {
  display: flex;
  gap: 16px;
  width: 100%;
  padding-top: 8px;
  padding-right: max(16px, calc((100vw - 1180px) / 2));
  padding-bottom: 20px;
  padding-left: max(16px, calc((100vw - 1180px) / 2));
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}

.chapter-reel[tabindex]:focus-visible {
  border-radius: 8px;
  outline: 3px solid var(--blue);
  outline-offset: 4px;
}

/* About's complete team roster should remain visible as a responsive matrix,
   not behave like a horizontally scrolling rotating-content reel. */
#team-content > .chapter-reel {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  width: min(1180px, 100%);
  margin-inline: auto;
  padding-inline: 16px;
  overflow: visible;
  scroll-snap-type: none;
}

#team-content > .chapter-reel .reel-card {
  width: 100%;
  min-width: 0;
  height: 100%;
  background: radial-gradient(circle at 50% 42%, #f5f9f8 0%, #e5f0ed 52%, #dceae6 100%);
}

#team-content > .chapter-reel .team-owner-card {
  grid-column: 1 / -1;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
  align-items: start;
  gap: 0 34px;
  padding: clamp(24px, 3vw, 34px);
  background:
    radial-gradient(circle at 50% 38%, rgba(255, 255, 255, 0.34) 0 16%, rgba(255, 255, 255, 0) 48%),
    conic-gradient(
      from -28deg at 50% 48%,
      rgba(239, 198, 221, 0.46) 0deg,
      rgba(229, 240, 237, 0.08) 72deg,
      rgba(210, 190, 235, 0.42) 144deg,
      rgba(229, 240, 237, 0.08) 224deg,
      rgba(242, 205, 226, 0.44) 304deg,
      rgba(239, 198, 221, 0.46) 360deg
    ),
    radial-gradient(circle at 50% 42%, #f5f9f8 0%, #e5f0ed 52%, #dceae6 100%);
}

.team-owner-card__title {
  position: absolute;
  z-index: 2;
  top: 24px;
  left: 50%;
  width: min(52%, 600px);
  margin: 0;
  transform: translateX(-50%);
  color: var(--purple);
  font-size: clamp(1.3rem, 2.1vw, 1.75rem);
  line-height: 1.15;
  text-align: center;
  white-space: nowrap;
}

#team-content > .chapter-reel .team-owner-card img {
  position: absolute;
  z-index: 1;
  top: 72px;
  left: 50%;
  width: min(40%, 460px);
  height: auto;
  margin: 0;
  transform: translateX(-50%);
  aspect-ratio: 5 / 3;
  object-fit: contain;
}

.team-owner-card__copy {
  min-width: 0;
  padding-top: clamp(38px, calc(72px - 3vw), 48px);
  color: #4a423d;
  font-size: 0.875rem;
  line-height: 1.62;
}

.team-owner-card__copy::before {
  height: clamp(200px, 22.5vw, 280px);
  content: "";
}

.team-owner-card__copy--first::before {
  float: right;
  width: 48%;
}

.team-owner-card__copy--second::before {
  float: left;
  width: 41%;
}

.team-owner-card__split--desktop {
  display: block;
}

.team-owner-card__split--mobile {
  display: none;
}

.page--about main {
  position: relative;
}

.site-attribution {
  position: absolute;
  z-index: 1;
  bottom: 16px;
  left: 50%;
  width: 18px;
  height: 18px;
  margin: 0;
  color: #706a65;
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1;
  transform: translateX(-50%);
}

.site-attribution > span {
  position: absolute;
  top: 50%;
  white-space: nowrap;
  transform: translateY(-50%);
}

.site-attribution > span:first-child {
  right: 24px;
  font-size: 0.66rem;
}

.site-attribution > span:last-child {
  left: 24px;
}

.site-attribution__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: inherit;
  cursor: default;
  text-decoration: none;
}

.site-attribution__link img {
  display: block;
  width: 18px;
  height: 18px;
}

.site-attribution__link:focus-visible {
  border-radius: 2px;
  outline: 1px solid #8f8984;
  outline-offset: 2px;
}

/* The temporary Coffee menu is a complete six-item set, so it should read
   as one centered composition instead of a horizontally clipped reel. */
.menu-grid--coffee {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  width: min(1180px, 100%);
  margin-inline: auto;
  padding-inline: 16px;
  overflow: visible;
  scroll-snap-type: none;
}

.menu-grid--coffee .reel-card {
  width: 100%;
  min-width: 0;
}

/* Coffee's three take-home brands follow the About team-card composition:
   one complete centered set, image first, then title and supporting copy. */
.take-home-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  width: min(1180px, 100%);
  margin-inline: auto;
  padding-inline: 16px;
  overflow: visible;
  scroll-snap-type: none;
}

.take-home-grid .reel-card {
  width: 100%;
  min-width: 0;
  height: 100%;
  background: radial-gradient(circle at 50% 42%, #f5f9f8 0%, #e5f0ed 52%, #dceae6 100%);
}

.take-home-grid .take-home-card > img {
  aspect-ratio: 3 / 2;
  height: auto;
  object-fit: contain;
}

.take-home-card .menu-price {
  display: block;
  margin-top: 18px;
}

.take-home-note {
  width: min(1180px, 100%);
  margin: 16px auto 0;
  padding-inline: 16px;
  color: #d0cbc7;
  font-family: "Segoe Print", "Bradley Hand", cursive;
  font-size: 0.9rem;
  font-style: italic;
  line-height: 1.45;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}

/* Bar's nine-item specialty menu is a complete set, so it reads as a
   responsive matrix instead of an overflowing horizontal reel. */
.menu-grid--bar {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  width: min(1180px, 100%);
  margin-inline: auto;
  padding-inline: 16px;
  overflow: visible;
  scroll-snap-type: none;
}

.menu-grid--bar .reel-card {
  width: 100%;
  min-width: 0;
  height: 100%;
}

.reel-card.specialty-card {
  aspect-ratio: 4 / 3;
  padding: 0;
  overflow: hidden;
  background: radial-gradient(circle at 50% 42%, #f5f9f8 0%, #e5f0ed 52%, #dceae6 100%);
}

/* Fall specialty cards use a deliberate warm-cream poster mat rather than
   attempting to hide their edges against the Coffee chapter background. */
.menu-grid--coffee .specialty-card {
  aspect-ratio: auto;
  padding: 10px;
  border: 3px solid var(--ink);
  border-radius: 6px;
  background: var(--cream);
  box-shadow: 9px 9px 0 var(--card-shadow, var(--orange));
}

.menu-grid--coffee .specialty-card__image {
  height: auto;
  border: 1px solid rgba(24, 21, 20, 0.18);
  border-radius: 2px;
  aspect-ratio: 1122 / 1402;
}

.chapter-heading--coffee-menu {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: center;
}

.coffee-menu-trigger {
  min-width: 168px;
  border: 3px solid var(--ink);
  border-radius: 4px;
  color: var(--ink);
  background: var(--cream);
  box-shadow: 8px 8px 0 var(--orange);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: transform 140ms ease, box-shadow 140ms ease;
}

.coffee-menu-trigger:hover {
  transform: translate(3px, 3px);
  box-shadow: 5px 5px 0 var(--orange);
}

.coffee-menu-trigger:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 5px;
}

html.coffee-menu-open,
html.coffee-menu-open body {
  overflow: hidden;
  overscroll-behavior: none;
}

.coffee-menu-dialog {
  width: 100vw;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgba(10, 8, 7, 0.82);
  color: #fff;
  overflow: hidden;
}

.coffee-menu-dialog[open] {
  display: grid;
  place-items: center;
}

.coffee-menu-dialog::backdrop {
  background: transparent;
}

.coffee-menu-dialog__panel {
  position: relative;
  width: min(94vw, 900px);
  height: calc(100dvh - 48px);
  max-height: 1350px;
  overflow: hidden;
}

.coffee-menu-dialog__scroll {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}

.coffee-menu-dialog__scroll::-webkit-scrollbar {
  display: none;
}

.coffee-menu-dialog__scroll:focus-visible {
  outline: 3px solid #fff;
  outline-offset: -5px;
}

.coffee-menu-dialog__image {
  display: block;
  width: 100%;
  height: auto;
}

.coffee-menu-dialog__close {
  position: fixed;
  z-index: 2;
  top: 12px;
  right: 12px;
  display: grid;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  place-items: center;
  color: #fff;
  background: transparent;
  font: 300 2.75rem/1 Arial, Helvetica, sans-serif;
  cursor: pointer;
  opacity: 0.86;
  transition: opacity 140ms ease, transform 140ms ease;
}

.coffee-menu-dialog__close:hover {
  opacity: 1;
  transform: scale(1.08);
}

.coffee-menu-dialog__close:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
}

.coffee-menu-dialog__scroll-cue {
  position: absolute;
  z-index: 1;
  top: 12px;
  left: 50%;
  margin: 0;
  padding: 7px 12px;
  border-radius: 999px;
  color: #fff;
  background: rgba(24, 21, 20, 0.84);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  pointer-events: none;
  transform: translateX(-50%);
  transition: opacity 160ms ease;
}

.coffee-menu-dialog--scrolled .coffee-menu-dialog__scroll-cue {
  opacity: 0;
}

.coffee-menu-dialog--fits .coffee-menu-dialog__scroll-cue {
  display: none;
}

.coffee-menu-noscript {
  padding-block: 40px;
}

.coffee-menu-noscript h3 {
  margin-top: 24px;
}

.reel-card .specialty-card__image {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  border-radius: 0;
  aspect-ratio: auto;
  object-fit: contain;
}

/* Bar's unfinished Beer & Wine and Specials chapters are consolidated into
   one dense editorial mosaic. Meaningful photos stay in the document flow
   as images; the bounded grid adds real content without adding page height. */
.bar-story {
  padding: 56px 16px 64px;
  background: var(--paper);
  color: var(--ink);
}

.bar-story__inner {
  width: min(1180px, 100%);
  margin-inline: auto;
}

.bar-story__heading {
  width: 100%;
  margin: 0 0 28px;
}

.bar-story__mosaic {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr);
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 16px;
  height: clamp(360px, 42vw, 520px);
}

.bar-story__media {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 2px solid var(--ink);
  border-radius: 12px;
  background: var(--ink);
}

.bar-story__media--primary {
  grid-row: 1 / -1;
  box-shadow: 7px 7px 0 var(--red);
}

.bar-story__media--team {
  box-shadow: 7px 7px 0 var(--purple);
}

.bar-story__media--service {
  box-shadow: 7px 7px 0 var(--orange);
}

.bar-story__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.reel-card {
  flex: 0 0 min(82vw, 340px);
  padding: 22px;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: var(--paper);
  box-shadow: 7px 7px 0 var(--card-shadow, var(--purple));
  scroll-snap-align: start;
}

.reel-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  margin-bottom: 14px;
  border-radius: 6px;
  object-fit: cover;
}

/* Emporium's complete four-card set centers as one composition whenever its
   existing 340px card widths fit. Narrower viewports retain the default reel
   overflow, and the established mobile rule still stacks the cards. */
#emporium-showcase .chapter-reel {
  width: min(1440px, 100%);
  margin-inline: auto;
  padding-inline: 16px;
}

@media (min-width: 1440px) {
  #emporium-showcase .chapter-reel {
    justify-content: center;
    overflow-x: visible;
    scroll-snap-type: none;
  }
}

/* Emporium's four compact samplers keep the existing reel footprint while
   showing several source-faithful product views per card. The image and
   scrim are layered inside the card, so media does not add a second block
   above the copy or lengthen the mobile stack unnecessarily. */
.emporium-card {
  position: relative;
  isolation: isolate;
  display: flex;
  min-height: 220px;
  align-items: flex-end;
  padding: 0;
  overflow: hidden;
  background: var(--ink);
}

.emporium-card > img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  border-radius: 0;
  aspect-ratio: auto;
  object-fit: cover;
}

.emporium-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(24, 21, 20, 0.04) 25%, rgba(24, 21, 20, 0.92) 100%);
  pointer-events: none;
}

.emporium-card-copy {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 72px 20px 18px;
  color: #fff;
}

.reel-card.emporium-card strong {
  margin-bottom: 5px;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.72);
}

.reel-card.emporium-card p {
  color: rgba(255, 255, 255, 0.94);
  font-size: 0.92rem;
  line-height: 1.35;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

.reel-card img.profile-photo--alice {
  object-position: center 38%;
}

.reel-card img.profile-photo--nivea {
  object-position: center 16%;
}

.reel-card strong {
  display: block;
  margin-bottom: 10px;
  color: var(--purple);
  font-size: 1.15rem;
}

.reel-card p {
  margin-bottom: 0;
  color: #4a423d;
}

.reel-card .profile-quote {
  margin-top: 16px;
  color: #675d67;
  font-family: "Segoe Print", "Bradley Hand", cursive;
  font-size: 0.9rem;
  font-style: italic;
  line-height: 1.4;
  text-align: center;
}

.reel-card .menu-price {
  color: var(--red);
  font-size: 1.4rem;
  font-weight: 900;
}

.reel-card .placeholder-note {
  display: inline-block;
  margin-top: 14px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--cream);
  color: #746a5e;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

/* Dated Events listings form a two-column set, with an optional featured
   card spanning the complete grid. Recurring listings continue below the
   divider at the established card size. */
#event-listings .chapter-reel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  width: min(1180px, 100%);
  margin-inline: auto;
  padding-inline: 16px;
  overflow: visible;
  scroll-snap-type: none;
}

.event-card--featured {
  grid-column: 1 / -1;
}

.events-divider {
  width: min(1180px, calc(100% - 32px));
  margin: 42px auto 20px;
  padding-top: 20px;
  border-top: 1px solid rgba(24, 21, 20, 0.2);
}

.events-divider h2 {
  margin-bottom: 0;
  color: rgba(24, 21, 20, 0.64);
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.event-card {
  position: relative;
  isolation: isolate;
  display: flex;
  min-height: 300px;
  overflow: hidden;
  flex-direction: column;
  padding: 24px;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: linear-gradient(135deg, #263d36, var(--ink));
  box-shadow: 7px 7px 0 var(--card-shadow, var(--green));
  transition: transform 160ms ease;
}

.event-card::before,
.event-card::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  content: "";
}

.event-card::before {
  background-image: var(--event-photo, none);
  background-position: var(--event-photo-position, center);
  background-size: cover;
}

.event-card::after {
  background: var(--event-scrim, linear-gradient(
    105deg,
    rgba(24, 21, 20, 0.88) 0%,
    rgba(24, 21, 20, 0.66) 58%,
    rgba(24, 21, 20, 0.76) 100%
  ));
}

.event-card:hover,
.event-card:focus-visible {
  transform: translateY(-4px);
}

.reel-card.event-card strong {
  margin-bottom: 16px;
  color: #fff;
  font-size: 1.2rem;
  line-height: 1.24;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.72);
}

.reel-card.event-card p {
  color: rgba(255, 255, 255, 0.72);
  text-shadow: 0 2px 7px rgba(0, 0, 0, 0.78);
}

.reel-card.event-card .event-card__schedule {
  margin-bottom: 10px;
  font-weight: 800;
}

.reel-card.event-card .event-card__summary {
  margin-bottom: 22px;
}

.event-card__cta {
  margin-top: auto;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* -------------------------------------------------- */
/* Visit panel (Home closer / shared)                  */
/* -------------------------------------------------- */

.visit-panel {
  display: flex;
  width: min(1180px, calc(100% - 32px));
  margin: 60px auto;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 30px;
  border-radius: 8px;
  color: #fff;
  background: linear-gradient(135deg, var(--purple), var(--ink));
}

.visit-panel h2 {
  margin-bottom: 10px;
  font-size: clamp(1.8rem, 4vw, 3rem);
}

.visit-panel p {
  max-width: 560px;
  margin-bottom: 0;
  color: rgba(255, 255, 255, 0.85);
}

/* -------------------------------------------------- */
/* Explore grid (Home only, links to launch sections)  */
/* -------------------------------------------------- */

.explore-band {
  padding: 74px 0;
  background: #fff8ec;
}

.section-heading {
  display: flex;
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto 26px;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
}

.section-heading h2 {
  margin-bottom: 0;
  font-size: clamp(2rem, 5vw, 3.4rem);
}

/* Static two-column grid for the four launch sections represented here.
   About Us remains available in the primary navigation. */
.explore-reel {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  width: min(1180px, calc(100% - 32px));
  margin-inline: auto;
}

.explore-card {
  position: relative;
  isolation: isolate;
  display: flex;
  min-height: 190px;
  overflow: hidden;
  flex-direction: column;
  justify-content: space-between;
  padding: 22px;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: var(--ink);
  box-shadow: 7px 7px 0 var(--card-shadow, var(--purple));
  transition: transform 160ms ease;
}

.explore-card::before,
.explore-card::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  content: "";
}

.explore-card::before {
  background-image: var(--explore-photo, none);
  background-position: center;
  background-size: cover;
}

.explore-card::after {
  background: linear-gradient(
    105deg,
    rgba(24, 21, 20, 0.84) 0%,
    rgba(24, 21, 20, 0.62) 58%,
    rgba(24, 21, 20, 0.72) 100%
  );
}

.explore-card:hover,
.explore-card:focus-visible {
  transform: translateY(-4px);
}

.explore-card strong {
  display: block;
  margin-bottom: 32px;
  color: #fff;
  font-size: 1.2rem;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.65);
}

.explore-card p {
  margin-bottom: 0;
  color: rgba(255, 255, 255, 0.94);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.75);
}

/* -------------------------------------------------- */
/* Footer                                              */
/* -------------------------------------------------- */

.site-footer {
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
  padding: 48px 0 39px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(320px, 1fr) auto;
  align-items: start;
  gap: clamp(40px, 8vw, 112px);
}

.footer-primary {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.footer-brand {
  display: inline-flex;
  align-items: flex-start;
  gap: 14px;
  width: fit-content;
  font-weight: 900;
}

.footer-brand img {
  width: 52px;
  height: 52px;
  flex: 0 0 auto;
  border-radius: 10px;
  object-fit: cover;
}

.footer-brand__text {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
}

.footer-brand__text::after {
  width: 84px;
  height: 4px;
  margin-top: 9px;
  background: var(--yellow);
  box-shadow: 4px 4px 0 var(--red);
  content: "";
}

.footer-brand__name {
  color: var(--purple);
  font-size: clamp(2rem, 3.2vw, 2.5rem);
  line-height: 1;
}

@supports (background-clip: text) or (-webkit-background-clip: text) {
  .footer-brand__name {
    background: linear-gradient(90deg, #c2186a, var(--purple));
    background-clip: text;
    color: transparent;
    -webkit-background-clip: text;
  }
}

.footer-brand__descriptor {
  margin-top: 5px;
  color: var(--ink);
  font-size: 0.98rem;
  font-weight: 900;
  letter-spacing: 0.055em;
  line-height: 1.25;
  text-transform: uppercase;
}

.footer-details {
  min-width: 240px;
  padding-top: 14px;
  font-size: 0.92rem;
}

.footer-hours {
  display: grid;
  gap: 9px;
  margin: 0;
}

.footer-hours > div {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 15px;
}

.footer-hours dt {
  font-weight: 800;
  white-space: nowrap;
}

.footer-hours dd {
  margin: 0;
  white-space: nowrap;
}

.footer-details address {
  margin: 18px 0 0;
  font-style: normal;
}

.footer-location {
  color: var(--purple);
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.footer-location:hover,
.footer-location:focus-visible {
  color: #c2186a;
}

.footer-socials {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  margin: 29px 0 0 66px;
}

.footer-social {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--purple);
  font-weight: 800;
  text-decoration: none;
  transition: color 160ms ease, transform 160ms ease;
}

.footer-social:hover,
.footer-social:focus-visible {
  color: #c2186a;
  transform: translate(-1px, -1px);
}

.footer-social__icon {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
}

/* -------------------------------------------------- */
/* Responsive                                          */
/* -------------------------------------------------- */

@media (max-width: 900px) {
  .chapter-heading--coffee-menu {
    grid-template-columns: 1fr;
  }

  .coffee-menu-trigger {
    width: 100%;
  }

  .hero-stage {
    grid-template-columns: 1fr;
  }

  .hero-poster {
    min-height: auto;
  }

  .visit-panel {
    align-items: stretch;
    flex-direction: column;
  }

  .chapter-content {
    padding: 44px 0;
  }

  .explore-reel {
    grid-template-columns: repeat(2, 1fr);
  }

  .menu-grid--coffee {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .take-home-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .menu-grid--bar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #team-content > .chapter-reel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #team-content > .chapter-reel .team-owner-card {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
  }

  .team-owner-card__title {
    position: static;
    grid-column: 1 / -1;
    width: auto;
    transform: none;
    white-space: normal;
  }

  #team-content > .chapter-reel .team-owner-card img {
    position: static;
    grid-column: 1 / -1;
    justify-self: center;
    width: min(100%, 540px);
    transform: none;
  }

  .team-owner-card__copy::before {
    display: none;
  }

  .team-owner-card__copy {
    padding-top: 0;
  }

  .bar-story {
    padding-block: 48px 56px;
  }

  .bar-story__mosaic {
    grid-template-columns: minmax(0, 3fr) minmax(220px, 2fr);
    height: clamp(340px, 52vw, 440px);
  }
}

@media (max-width: 640px) {
  :root {
    --nav-height: 160px;
  }

  .coffee-menu-dialog__panel {
    height: calc(100dvh - 32px);
  }

  .coffee-menu-dialog__close {
    top: 4px;
    right: 4px;
  }

  .site-nav {
    padding-block: 14px;
  }

  .site-nav-inner {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
  }

  .nav-links {
    justify-content: flex-start;
  }

  .hero-stage {
    min-height: auto;
    padding-top: 24px;
  }

  .hero-poster img {
    margin-top: 40px;
  }

  /* Conventional mobile layout by default: reels stack as a normal
     vertical list, no horizontal scroll. Horizontal scroll on mobile is
     an opt-in exception (add .reel-scroll-mobile to the .chapter
     wrapper) reserved for cases where stacking genuinely doesn't
     work — see PLANNING.md hard directives. (.explore-reel is a static
     grid, not a reel, so it isn't part of this flex-based opt-in — it
     just drops to a single column below, same D3 mobile-stack spirit,
     different mechanism.) */
  .chapter-reel {
    flex-direction: column;
    overflow-x: visible;
    scroll-snap-type: none;
    padding-inline: 16px;
  }

  .menu-grid--coffee {
    grid-template-columns: 1fr;
  }

  .take-home-grid {
    grid-template-columns: 1fr;
  }

  .menu-grid--bar {
    grid-template-columns: 1fr;
  }

  #team-content > .chapter-reel {
    grid-template-columns: 1fr;
  }

  #event-listings .chapter-reel {
    grid-template-columns: 1fr;
  }

  #team-content > .chapter-reel .team-owner-card {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .team-owner-card__title,
  #team-content > .chapter-reel .team-owner-card img {
    margin-bottom: 18px;
  }

  .team-owner-card__split--desktop {
    display: none;
  }

  .team-owner-card__split--mobile {
    display: block;
  }

  .bar-story {
    padding-block: 40px 48px;
  }

  .bar-story__heading {
    margin-bottom: 22px;
  }

  .bar-story__mosaic {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto auto;
    gap: 12px;
    height: auto;
  }

  .bar-story__media {
    aspect-ratio: 5 / 3;
  }

  .bar-story__media--primary {
    grid-row: auto;
    grid-column: 1 / -1;
  }

  .explore-reel {
    grid-template-columns: 1fr;
  }

  .reel-card {
    flex: 1 1 auto;
    width: 100%;
  }

  .reel-scroll-mobile .chapter-reel {
    flex-direction: row;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-inline: max(16px, calc((100vw - 1180px) / 2));
  }

  .reel-scroll-mobile .reel-card {
    flex: 0 0 78vw;
    width: auto;
  }

  .section-heading {
    display: block;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .site-footer {
    padding: 36px 0 32px;
  }

  .footer-brand img {
    width: 44px;
    height: 44px;
  }

  .footer-brand__name {
    font-size: 1.75rem;
  }

  .footer-brand__descriptor {
    font-size: 0.78rem;
  }

  .footer-socials,
  .footer-details {
    margin-left: 58px;
  }

  .footer-details {
    padding-top: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .coffee-menu-trigger,
  .coffee-menu-dialog__close,
  .coffee-menu-dialog__scroll-cue {
    transition: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .explore-card {
    transition: none;
  }
}

/* Food: established Jubilee backdrop-and-content chapter presentation. */
.page--food {
  --band-foreground: #100e0d;
}

.page--food .page-header {
  position: relative;
}

.food-header-doordash {
  position: absolute;
  top: 50%;
  right: max(16px, calc((100vw - 1180px) / 2));
  display: grid;
  width: clamp(210px, 20vw, 280px);
  aspect-ratio: 399 / 201;
  place-items: center;
  background: transparent;
  transform: translateY(-50%);
  transition: filter 160ms ease, transform 160ms ease;
}

.food-header-doordash img {
  display: block;
  width: 100%;
}

.food-header-doordash:hover,
.food-header-doordash:focus-visible {
  filter: drop-shadow(4px 4px 0 var(--purple));
  transform: translateY(calc(-50% + 4px));
}

#food-overview {
  --backdrop-photo: url('/assets/content/food/whole-chocolate-cake.webp');
  --window-height: 62vh;
}

#fresh-case .chapter-window {
  --backdrop-photo: url('/assets/content/food/fresh-case.webp');
  --window-height: 48vh;
  --window-max-height: 560px;
}

#something-sweet .chapter-window {
  --backdrop-photo: url('/assets/content/food/sweet-case.webp');
  --window-height: 48vh;
  --window-max-height: 560px;
}

.food-chapter-heading .eyebrow,
.food-visit .eyebrow {
  margin-bottom: 0.7rem;
  color: var(--yellow);
}

.food-sweetshop-interlude {
  overflow: hidden;
  isolation: isolate;
  background-image: linear-gradient(150deg, #f7d7ce, var(--yellow));
}

.food-sweetshop-interlude::before {
  position: absolute;
  top: 50%;
  right: clamp(-110px, -6vw, -36px);
  width: clamp(320px, 48vw, 620px);
  aspect-ratio: 1;
  content: "";
  background: url('/assets/content/food/albemarle-sweet-shop-logo.webp') center / contain no-repeat;
  filter: grayscale(1) contrast(1.35);
  mix-blend-mode: multiply;
  opacity: 0.14;
  transform: translateY(-50%) rotate(-15deg) scale(1.08);
  transform-origin: center;
}

.food-supplier-attribution {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  margin: 1.25rem 0;
}

.food-supplier-attribution img {
  width: clamp(92px, 10vw, 132px);
  height: auto;
  border-radius: 50%;
  box-shadow: 5px 5px 0 var(--yellow);
}

.food-supplier-attribution p {
  max-width: 22rem;
  margin: 0;
  color: var(--ink);
  font-size: clamp(1.05rem, 2vw, 1.35rem);
}

.food-supplier-attribution strong {
  display: block;
  color: #b80c70;
  font-size: clamp(1.45rem, 3vw, 2.2rem);
  line-height: 1.05;
}

.food-visit .chapter-content {
  color: #fff;
  text-align: center;
  background: var(--purple);
}

.food-visit__inner {
  margin-bottom: 0;
}

.food-visit__inner h2,
.food-visit__inner > p {
  margin-right: auto;
  margin-left: auto;
}

.food-visit__inner h2 {
  color: #fff;
}

.food-visit__inner > p:not(.eyebrow) {
  color: rgba(255, 255, 255, 0.85);
}

.food-visit__button {
  margin-top: 1.5rem;
}

@media (max-width: 640px) {
  .food-header-doordash {
    position: relative;
    top: auto;
    right: auto;
    width: min(220px, calc(100% - 32px));
    margin: -28px 16px 40px;
    transform: none;
  }

  .food-header-doordash:hover,
  .food-header-doordash:focus-visible {
    transform: translate(4px, 4px);
  }

  #food-overview {
    --window-height: 68vh;
  }

  #fresh-case .chapter-window,
  #something-sweet .chapter-window {
    --window-height: 42vh;
    --backdrop-position: center;
  }

  .food-supplier-attribution {
    align-items: flex-start;
  }

  .food-sweetshop-interlude::before {
    right: -28vw;
    width: 92vw;
    opacity: 0.12;
  }
}

/* Cleo Baby Tea: complete product artwork and an uncropped retail photograph. */
.page--cleo-baby-tea {
  --band-tint: var(--purple);
  --band-foreground: #fff;
}
.cleo-intro-actions {
  padding: 0 0 40px;
  background: var(--purple);
}
.page--cleo-baby-tea .page-intro { padding-bottom: 28px; }
.page--cleo-baby-tea .page-intro h1 { max-width: 940px; }
.cleo-story-layout, .cleo-visit-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
}
#cleo-story .chapter-content {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
#cleo-story .chapter-content::after {
  position: absolute;
  z-index: -1;
  right: clamp(-30px, 2vw, 36px);
  bottom: -42px;
  width: clamp(340px, 42vw, 610px);
  aspect-ratio: 272 / 302;
  background: url('/assets/content/cleo-baby-tea/cleo-dog-story-watermark.webp') center / contain no-repeat;
  content: "";
  opacity: 0.095;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 22%);
  mask-image: linear-gradient(to right, transparent, #000 22%);
  pointer-events: none;
}
.cleo-story-layout h2, .cleo-visit-copy h2 {
  font-size: clamp(2.3rem, 4.7vw, 4rem);
  text-transform: uppercase;
}
.cleo-story-copy { font-size: 1.1rem; }
.cleo-story-signoff { color: var(--purple); font-weight: 900; margin-bottom: 0; }
.cleo-tea-window {
  background-image: linear-gradient(135deg, var(--purple), #231039);
  --window-height: 24vh;
}
.cleo-teaware-window {
  background-image: linear-gradient(135deg, #164e4a, #263c39);
  --window-height: 24vh;
}
#cleo-teas .chapter-content { background: var(--cream); }
#cleo-teaware .chapter-content {
  background-color: #eee0c7;
  background-image:
    linear-gradient(rgba(238, 224, 199, 0.82), rgba(238, 224, 199, 0.82)),
    url('/assets/content/cleo-baby-tea/chapter-3-floral-pattern-v1.webp');
  background-repeat: repeat;
  background-size: 960px auto;
}
.cleo-product-grid {
  display: grid;
  gap: 28px;
  padding-right: 8px;
}
.cleo-tea-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cleo-teaware-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cleo-product-card {
  padding: 24px;
  background: #fff;
  border: 4px solid #fff;
  box-shadow: 7px 7px 0 var(--purple);
  text-align: center;
  min-width: 0;
}
.cleo-product-card img {
  width: 100%;
  height: 320px;
  object-fit: contain;
  margin: 0 auto 24px;
}
.cleo-teaware-grid .cleo-product-card { box-shadow: 7px 7px 0 #164e4a; }
.cleo-teaware-grid img { height: 240px; }
.cleo-product-card h3 { margin-bottom: 0; font-size: 1.25rem; }
.cleo-store-card {
  position: relative;
  display: flex;
  min-height: 344px;
  overflow: hidden;
  align-items: flex-start;
  justify-content: center;
  flex-direction: column;
  padding: clamp(24px, 3vw, 36px);
  border-color: #f2d88b;
  background:
    radial-gradient(circle at 100% 0, rgba(245, 200, 59, 0.3), transparent 38%),
    linear-gradient(145deg, #fffdf7, #f7eedf);
  text-align: left;
}
.cleo-store-card::before,
.cleo-store-card::after {
  position: absolute;
  width: 78px;
  height: 78px;
  border: 2px solid rgba(37, 143, 84, 0.22);
  border-radius: 68% 32% 70% 30%;
  content: "";
  pointer-events: none;
  transform: rotate(35deg);
}
.cleo-store-card::before { top: -37px; right: -22px; }
.cleo-store-card::after { bottom: -45px; left: -28px; transform: rotate(215deg); }
.cleo-store-card .eyebrow { margin-bottom: 12px; color: #164e4a; }
.cleo-store-card h3 {
  max-width: none;
  margin-bottom: 16px;
  color: var(--purple);
  font-size: clamp(1.65rem, 2.2vw, 2.1rem);
  line-height: 1;
  text-transform: uppercase;
}
.cleo-store-card p:not(.eyebrow) { max-width: 32ch; margin-bottom: 24px; }
.cleo-store-card .button { position: relative; z-index: 1; }
.cleo-selection-note { margin-top: 32px; margin-bottom: 0; color: #4a423d; }
#cleo-visit .chapter-content { background: var(--purple); color: #fff; }
.cleo-visit-copy .eyebrow { color: var(--yellow); }
.cleo-visit-copy .button-row { margin-top: 28px; }
.cleo-cabinet { margin: 0; min-width: 0; }
.cleo-cabinet img { width: 100%; height: auto; border: 6px solid #fff; box-shadow: 7px 7px 0 var(--yellow); }
.cleo-cabinet figcaption { margin-top: 20px; font-size: 0.9rem; }
.page--cleo-baby-tea a:focus-visible { outline: 3px solid var(--blue); outline-offset: 5px; }
@media (max-width: 900px) {
  .cleo-story-layout, .cleo-visit-layout { grid-template-columns: 1fr; }
  .cleo-teaware-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cleo-tea-grid { gap: 16px; }
  .cleo-product-card { padding: 16px; }
  .cleo-tea-grid img { height: 270px; }
}
@media (max-width: 600px) {
  #cleo-story .chapter-content::after {
    right: -100px;
    bottom: 12%;
    width: 390px;
    opacity: 0.08;
  }
  .cleo-product-grid { grid-template-columns: 1fr; gap: 28px; }
  #cleo-teaware .chapter-content { background-size: 720px auto; }
  .cleo-product-card { padding: 24px; }
  .cleo-tea-grid img { height: 340px; }
  .cleo-teaware-grid img { height: 260px; }
}