/* ==========================================================================
   Ruje Café - styles.css
   Mobile-first: base styles target a 375px screen, then @media (min-width: 768px)
   and @media (min-width: 1200px) layer the tablet and desktop layouts on top.
   ========================================================================== */

/* ---------- Design tokens ---------- */
:root {
  --cream:         #F5EADA;   /* page background, from the logo badge */
  --cream-deep:    #EADCC7;   /* alternating section background */
  --espresso:      #2A1D15;   /* primary text and dark sections, from the logo */
  --espresso-soft: #4A382C;   /* secondary text */
  --latte:         #C8A57B;   /* warm accent: dividers, hover states */
  --matcha:        #7FA650;   /* the ONE action colour, reserved for primary CTAs */
  --matcha-deep:   #5E7F38;   /* button hover */
  --white:         #FFFDF9;

  --shadow: 0 8px 32px rgba(42, 29, 21, 0.08);
  --radius-card: 16px;
  --radius-pill: 999px;

  --font-display: "Fraunces", Georgia, 'Times New Roman', serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --section-pad: 80px;        /* vertical rhythm, mobile */
  --header-height: 72px;

  /* Motion: one calm ease-out for reveals and hovers, a longer expo for entrances */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);

  /* Type tiers: the signature section gets the display size, utility sections a quieter h2 */
  --fs-display: clamp(2.75rem, 7vw, 5.25rem);
  --fs-h2-quiet: clamp(1.625rem, 3.5vw, 2.25rem);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

/* The hidden attribute always wins, even over author display rules */
[hidden] { display: none !important; }

html {
  scroll-behavior: smooth;
  scrollbar-color: var(--latte) var(--cream);
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--espresso);
  font-family: var(--font-body);
  font-size: clamp(1rem, 2vw, 1.125rem);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 800;
  margin: 0 0 1rem;
}

h1 {
  font-size: clamp(2.5rem, 8vw, 5rem);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

h2 {
  font-size: clamp(1.875rem, 5vw, 3rem);
  line-height: 1.15;
}

h3 {
  font-size: clamp(1.25rem, 3vw, 1.75rem);
  line-height: 1.3;
}

/* Utility sections speak more quietly than the signature ones */
.pre-order h2,
.find-us h2,
.follow h2 { font-size: var(--fs-h2-quiet); }

p { margin: 0 0 1rem; max-width: 65ch; }

a { color: inherit; }

.find-us-phone a,
.find-us-courts a,
.site-footer p a {
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--latte);
  transition: text-decoration-color 0.2s ease;
}
.find-us-phone a:hover,
.find-us-courts a:hover,
.site-footer p a:hover { text-decoration-color: currentColor; }

::selection { background: var(--latte); color: var(--espresso); }

/* Visible focus for keyboard users, on every interactive element */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--matcha-deep);
  outline-offset: 2px;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 100;
  background: var(--espresso);
  color: var(--cream);
  padding: 12px 20px;
  border-radius: var(--radius-pill);
  text-decoration: none;
}
.skip-link:focus { top: 12px; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Layout helpers ---------- */
.container {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 20px;
}

.container-narrow { max-width: 880px; }

section { padding-block: var(--section-pad); }

/* Anchored sections stop below the fixed header when scrolled to */
section[id] { scroll-margin-top: calc(var(--header-height) + 8px); }

/* Block, not flex: when the eyebrow wraps, its short rule follows the last
   word instead of floating at the far right */
.eyebrow {
  display: block;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--espresso-soft);
  margin-bottom: 1rem;
}
/* The rule is an empty inline box (not an inline-block), so it can never
   wrap onto a line of its own: it always travels with the last word */
.eyebrow::after {
  content: "";
  padding-left: 48px;
  margin-left: 12px;
  background: linear-gradient(var(--latte), var(--latte)) 0 50% / 100% 1px no-repeat;
}
.eyebrow-light { color: var(--latte); }
.nowrap { white-space: nowrap; }

.section-intro {
  font-size: clamp(1.0625rem, 2.2vw, 1.25rem);
  color: var(--espresso-soft);
  margin-bottom: 2.5rem;
}

.section-dark {
  background: var(--espresso);
  color: var(--cream);
}
.section-dark .section-intro { color: var(--latte); }
.section-dark a:focus-visible,
.section-dark button:focus-visible { outline-color: var(--latte); }

.section-cta { margin-top: 2.5rem; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;             /* comfortable tap target, above the 44px minimum */
  padding: 12px 28px;
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.16s ease, box-shadow 0.16s ease, background-color 0.2s ease,
              color 0.2s ease, border-color 0.2s ease,
              background-size 0.35s cubic-bezier(0.65, 0, 0.35, 1);
}

/* The one and only green: primary calls to action. Sticker-press physics. */
.btn-primary {
  background: var(--matcha);
  color: var(--espresso);
  box-shadow: 0 3px 0 0 var(--espresso);
}

/* Ghost buttons fill from the bottom like a slow pour */
.btn-ghost {
  background: linear-gradient(var(--espresso), var(--espresso)) no-repeat bottom / 100% 0%;
  color: var(--espresso);
  border-color: var(--espresso);
}
.btn-ghost:focus-visible { background-size: 100% 100%; color: var(--cream); }

.section-dark .btn-ghost {
  color: var(--cream);
  border-color: var(--cream);
  background-image: linear-gradient(var(--cream), var(--cream));
}

/* Light buttons get the same sticker physics as the primary, in latte */
.btn-light {
  background: var(--cream);
  color: var(--espresso);
  box-shadow: 0 3px 0 0 rgba(200, 165, 123, 0.5);
}

.btn-dark {
  background: var(--espresso);
  color: var(--cream);
  box-shadow: 0 3px 0 0 rgba(42, 29, 21, 0.45);
}

/* Hover only where a real pointer can hover, so a tapped button never sticks
   in its hover state on a phone */
@media (hover: hover) {
  .btn-primary:hover {
    background: var(--matcha-deep);
    color: var(--white);
    transform: translateY(-2px);
    box-shadow: 0 5px 0 0 var(--espresso);
  }
  .btn-ghost:hover { background-size: 100% 100%; color: var(--cream); }
  .section-dark .btn-ghost:hover { color: var(--espresso); }
  .btn-light:hover {
    background: var(--latte);
    transform: translateY(-2px);
    box-shadow: 0 5px 0 0 rgba(200, 165, 123, 0.5);
  }
  .btn-dark:hover {
    background: var(--espresso-soft);
    transform: translateY(-2px);
    box-shadow: 0 5px 0 0 rgba(42, 29, 21, 0.45);
  }
}

/* A real press state: quicker than the hover, and after it in the file so a
   pressed button always looks pressed */
.btn:active { transition-duration: 0.06s; }
.btn-primary:active { transform: translateY(2px); box-shadow: 0 0 0 0 var(--espresso); }
.btn-dark:active { transform: translateY(2px); box-shadow: 0 0 0 0 rgba(42, 29, 21, 0.45); }
.btn-light:active { transform: translateY(2px); box-shadow: 0 0 0 0 rgba(200, 165, 123, 0.5); }
.btn-ghost:active,
.btn-copy:active { transform: translateY(1px) scale(0.98); }

.btn-wide { width: 100%; }

/* ---------- Sticky header ---------- */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  background: transparent;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
.site-header.is-scrolled {
  background: var(--cream);
  box-shadow: var(--shadow);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: var(--header-height);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  min-height: 44px;
}
.brand-logo { width: 48px; height: 48px; border-radius: 50%; object-fit: contain; }
.brand-logo.img-missing { display: none; }

.brand-wordmark {
  display: none;                 /* shown by JS only when the logo file is missing */
  flex-direction: column;
  line-height: 1;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.5rem;
  letter-spacing: -0.01em;
}
.brand-wordmark small {
  font-family: var(--font-body);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: lowercase;
  color: var(--espresso-soft);
}
.brand-wordmark.is-visible { display: inline-flex; }
.brand-wordmark-light small { color: var(--latte); }

.site-nav { display: none; }     /* desktop only, see 768px breakpoint */
.site-nav a {
  position: relative;
  text-decoration: none;
  font-weight: 600;
  padding: 10px 14px;
  border-radius: var(--radius-pill);
  transition: background-color 0.2s ease;
}
/* Current-section underline (script.js sets .is-current while you read it) */
.site-nav a::after {
  content: "";
  position: absolute;
  left: 14px; right: 14px;
  bottom: 6px;
  height: 2px;
  border-radius: 2px;
  background: var(--espresso);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s var(--ease-out);
}
.site-nav a.is-current::after { transform: scaleX(1); }
@media (hover: hover) {
  .site-nav a:hover { background: var(--cream-deep); }
  .site-nav a:hover::after { transform: scaleX(1); }
}

.header-actions { display: flex; align-items: center; gap: 8px; }
.btn-header { min-height: 44px; padding: 8px 20px; font-size: 0.9375rem; }

/* Hamburger (mobile only) */
.menu-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 44px; height: 44px;
  padding: 10px;
  background: none;
  border: 0;
  cursor: pointer;
}
.menu-toggle-bar {
  display: block;
  width: 24px; height: 2px;
  background: var(--espresso);
  transition: transform 0.25s ease;
}
.menu-toggle[aria-expanded="true"] .menu-toggle-bar:first-child { transform: translateY(4px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle-bar:last-child { transform: translateY(-4px) rotate(-45deg); }

/* Full-screen cream overlay menu */
.mobile-menu {
  position: fixed;
  inset: var(--header-height) 0 0 0;
  background: var(--cream);
  padding: 40px 20px;
  overflow-y: auto;
}
.mobile-menu nav {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mobile-menu nav a {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 800;
  text-decoration: none;
  padding: 12px 8px;
  border-radius: 12px;
}
@media (hover: hover) {
  .mobile-menu nav a:hover { background: var(--cream-deep); }
}
.mobile-menu nav .btn {
  margin-top: 20px;
  font-family: var(--font-body);
  font-size: 1.125rem;
  align-self: flex-start;
  border-radius: var(--radius-pill);
  padding: 12px 28px;
}
body.menu-open { overflow: hidden; }

/* ---------- 1. Hero ---------- */
.hero {
  min-height: 90svh;
  display: flex;
  align-items: center;
  padding-top: calc(var(--header-height) + 24px);
  padding-bottom: 48px;
  background:
    radial-gradient(60rem 40rem at 85% -10%, rgba(200, 165, 123, 0.35), transparent 60%),
    radial-gradient(50rem 35rem at -10% 110%, rgba(234, 220, 199, 0.9), transparent 60%),
    var(--cream);
}

.hero-grid {
  display: grid;
  gap: 40px;
  width: 100%;
}

.hero-subhead {
  font-size: clamp(1.0625rem, 2.5vw, 1.3125rem);
  color: var(--espresso-soft);
  margin-bottom: 2rem;
}

.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 1.75rem;
}

.trust-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-weight: 600;
}
.trust-strip > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(255, 253, 249, 0.6);
  border: 1.5px solid rgba(200, 165, 123, 0.55);
  border-radius: var(--radius-pill);
  font-size: 0.8125rem;
  color: var(--espresso-soft);
}
.dot-live { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--latte); }
/* The "live" ring is a scaled, fading copy of the dot: transform and opacity
   only, so it never repaints the page */
@media (prefers-reduced-motion: no-preference) {
  .dot-live::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--latte);
    animation: dot-ring 2.4s var(--ease-out) infinite;
  }
}
@keyframes dot-ring {
  from { transform: scale(1); opacity: 0.55; }
  to { transform: scale(2.6); opacity: 0; }
}

/* ---------- Photo frames (gradient placeholders until real photos exist) ---------- */
.photo-frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow);
  background: linear-gradient(150deg, var(--cream-deep) 0%, var(--latte) 55%, var(--espresso-soft) 130%);
}
.photo-frame img { width: 100%; height: 100%; object-fit: cover; }
.photo-frame img.img-missing { display: none; }   /* photo not supplied yet: show the gradient */

.hero-photo { position: relative; max-width: 430px; margin-inline: auto; }
.photo-frame-hero {
  /* Native aspect of the handoff photo, shown whole */
  aspect-ratio: 3 / 4;
  border-radius: 999px 999px var(--radius-card) var(--radius-card);
}
.photo-frame-hero::after {
  content: "";
  position: absolute;
  inset: 10px;
  border: 2px solid rgba(255, 253, 249, 0.55);
  border-radius: 999px 999px 10px 10px;
  pointer-events: none;
}
/* Print-registration echo behind the arch */
.hero-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translate(14px, 14px);
  border: 2px solid var(--latte);
  border-radius: 999px 999px var(--radius-card) var(--radius-card);
  z-index: -1;
}
.photo-frame-label {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 16px;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  background: rgba(245, 234, 218, 0.92);
  color: var(--espresso);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ---------- 2. Three-reason strip ---------- */
.reasons { padding-block: calc(var(--section-pad) * 0.75); }

.reasons-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 36px;
}

.reason-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--cream-deep);
  color: var(--espresso);
  margin-bottom: 0.75rem;
}

.reason-title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 800;
  margin: 0 0 0.375rem;
}
.reason p { margin: 0; color: var(--espresso-soft); }

/* The strip as a printed ticket stub: one white card, dashed perforations
   between the reasons, and the icons as tilted rubber stamps */
.reasons-grid {
  background: var(--white);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow);
  padding: 4px 24px;
  gap: 0;
}
/* align-content keeps title and copy together at the top when the row
   stretches a card to its tallest neighbour */
.reason {
  display: grid;
  grid-template-columns: 52px 1fr;
  column-gap: 16px;
  align-items: start;
  align-content: start;
  padding: 16px 0;
  border-top: 2px dashed rgba(200, 165, 123, 0.55);
  text-align: left;
}
.reason:first-child { border-top: 0; }
.reason-icon {
  grid-row: span 2;
  width: 52px;
  height: 52px;
  margin: 0;
  background: none;
  border: 2px solid var(--latte);
  rotate: -8deg;
}
.reason-title { font-style: italic; font-variation-settings: "WONK" 1; }
@media (min-width: 768px) {
  .reasons-grid { grid-template-columns: repeat(3, 1fr); padding: 4px 0; }
  .reason {
    padding: 28px 32px;
    border-top: 0;
    border-left: 2px dashed rgba(200, 165, 123, 0.55);
  }
  .reason:first-child { border-left: 0; }
}
/* Tablets and small laptops: three narrow columns leave no room beside the
   stamp, so it sits above the title and the copy gets the full column width */
@media (min-width: 768px) and (max-width: 1199px) {
  .reason { grid-template-columns: 1fr; padding: 24px 20px; }
  .reason-icon { grid-row: auto; margin-bottom: 12px; }
}

/* ---------- 3. The Matcha Series ---------- */
.matcha-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 28px;
}

.matcha-card h3 { margin: 0.375rem 0; }
.matcha-card p { color: var(--latte); margin-bottom: 0.75rem; }

/* The full lineup card, whole and sharp, with a soft arch nod at the top */
.matcha-lineup { margin: 0 0 2.5rem; position: relative; }
.matcha-lineup img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: clamp(48px, 10vw, 140px) clamp(48px, 10vw, 140px) var(--radius-card) var(--radius-card);
  box-shadow: 0 20px 48px rgba(42, 29, 21, 0.45);
}
.matcha-lineup::after {
  content: "";
  position: absolute;
  inset: 10px;
  border: 2px solid rgba(245, 234, 218, 0.35);
  border-radius: clamp(42px, 9vw, 132px) clamp(42px, 9vw, 132px) calc(var(--radius-card) - 6px) calc(var(--radius-card) - 6px);
  pointer-events: none;
}

/* Obvious placeholder chip so nobody mistakes it for a real price */
.price-tbc {
  display: inline-block;
  padding: 2px 12px;
  border: 2px dashed var(--latte);
  border-radius: var(--radius-pill);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--latte);
  white-space: nowrap;
}
.menu-rest .price-tbc { color: var(--espresso-soft); border-color: var(--latte); }
/* Not "we have not published a price" but "this is not on sale yet", so it
   reads as something to look forward to rather than missing information.
   The solid line means "on its way"; the dashed, tilted .price-tbc means
   "not confirmed". */
.price-soon {
  display: inline-block;
  padding: 2px 12px;
  border: 2px solid var(--espresso-soft);
  border-radius: var(--radius-pill);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--espresso-soft);
  background: transparent;
  white-space: nowrap;
}

.tbc-tag {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--espresso-soft);
  border: 1.5px dashed var(--latte);
  background: rgba(234, 220, 199, 0.5);
  border-radius: var(--radius-pill);
  padding: 2px 10px;
}

/* ---------- 4. The rest of the menu ---------- */
.menu-columns { display: grid; gap: 40px; }

.menu-category h3 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  font-size: 1.125rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;            /* a heading that wraps stays centred between its rules */
  margin-bottom: 0.5rem;
}
.menu-category h3::before,
.menu-category h3::after { content: ""; flex: 1; height: 1px; background: var(--latte); opacity: 0.6; }
.menu-category-note {
  font-size: 0.9375rem;
  color: var(--espresso-soft);
  margin-bottom: 1.25rem;
  text-align: center;
  margin-inline: auto;
}

.menu-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 18px;
}

.menu-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

.menu-item-text { display: flex; flex-direction: column; gap: 2px; }
.menu-item-name { font-weight: 700; }
.menu-item-desc { font-size: 0.9375rem; color: var(--espresso-soft); }

.menu-note {
  margin-top: 2.5rem;
  font-size: 0.875rem;
  color: var(--espresso-soft);
}

/* ---------- 5. Pre-order (espresso band from .section-dark, a white slip on it) ---------- */
.pre-order { position: relative; }
.pre-order .container-narrow { max-width: 640px; }

.order-form {
  display: grid;
  gap: 20px;
  max-width: 560px;
}

.form-field { display: flex; flex-direction: column; gap: 6px; }

.form-field label { font-weight: 700; font-size: 0.9375rem; }

.form-field input,
.form-field select,
.form-field textarea {
  font: inherit;
  color: var(--espresso);
  background: var(--white);
  border: 2px solid transparent;
  border-radius: 12px;
  padding: 12px 16px;
  min-height: 48px;
  width: 100%;
}
.form-field textarea { resize: vertical; min-height: 96px; }

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  border-color: var(--matcha-deep);
  outline: 3px solid var(--matcha-deep);
  outline-offset: 2px;
}

.form-field.has-error input,
.form-field.has-error textarea { border-color: var(--espresso); border-style: dashed; }
.form-field.has-error input:focus-visible,
.form-field.has-error textarea:focus-visible {
  outline: 3px solid var(--matcha-deep);
  outline-offset: 2px;
}
/* The pickup radios are visually hidden; the field styling above must not
   grow them back to full width (that caused sideways scroll on phones) */
.form-field input.visually-hidden { width: 1px; height: 1px; min-height: 0; padding: 0; margin: -1px; border: 0; }

.field-error {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--espresso);
}

.form-hint {
  margin: 0;
  font-size: 0.875rem;
  color: var(--espresso-soft);
}

.order-result {
  max-width: 560px;
  margin-top: 2rem;
  background: var(--white);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow);
  padding: 24px;
}
.order-result h3 { margin-top: 0; }

.order-preview {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  background: var(--cream);
  border-top: 2px dashed var(--latte);
  border-bottom: 2px dashed var(--latte);
  border-radius: 12px;
  padding: 16px;
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0 0 1.25rem;
}

.order-result-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* ---------- 6. Find us ---------- */
.find-us-grid { display: grid; gap: 40px; }

.map-frame {
  position: relative;
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow);
  aspect-ratio: 4 / 3;
  background: var(--cream-deep);
}
.map-frame::after {
  content: "";
  position: absolute;
  inset: 10px;
  border: 2px solid rgba(255, 253, 249, 0.55);
  border-radius: calc(var(--radius-card) - 6px);
  pointer-events: none;
  z-index: 1;
}
.map-frame iframe { width: 100%; height: 100%; border: 0; display: block; }

.address-block { font-style: normal; margin-bottom: 1.5rem; }
.address-block p { margin-bottom: 0.75rem; }

.plus-code-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.plus-code {
  font-weight: 700;
  background: var(--cream-deep);
  border-radius: 8px;
  padding: 6px 12px;
}

.btn-copy {
  font: inherit;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--espresso);
  background: none;
  border: 2px solid var(--espresso);
  border-radius: var(--radius-pill);
  padding: 8px 18px;
  min-height: 44px;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.14s ease;
}
@media (hover: hover) {
  .btn-copy:hover { background: var(--espresso); color: var(--cream); }
}

.hours-block { margin: 0 0 1.75rem; }
.hours-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--latte);
  max-width: 420px;
}
.hours-row dt { font-weight: 700; }
.hours-row dd { margin: 0; color: var(--espresso-soft); }

.find-us-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 1.5rem;
}

.find-us-phone a { font-weight: 700; }
.phone-note { font-size: 0.875rem; color: var(--espresso-soft); }

/* ---------- 7. Our story ---------- */
.story-grid { display: grid; gap: 40px; }

.pull-quote {
  margin: 0 0 2rem;
  position: relative;
  padding-top: 2.75rem;
}
.pull-quote::before {
  content: "\201C";
  position: absolute;
  top: 0;
  left: -0.04em;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(4rem, 10vw, 6rem);
  line-height: 0.8;
  color: var(--latte);
  font-variation-settings: "opsz" 144;
}
.pull-quote p {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.5rem, 4vw, 2.125rem);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--cream);
  margin-bottom: 0.75rem;
}
.pull-quote cite {
  display: flex;
  align-items: center;
  gap: 10px;
  font-style: normal;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--latte);
}
.pull-quote cite::before { content: ""; width: 32px; height: 1px; background: var(--latte); }

.our-story .story-copy > p:not(.eyebrow) { color: var(--cream-deep); }

/* The photo's own aspect (900 x 957), so Jeff and the standee are shown whole */
.photo-frame-story { aspect-ratio: 900 / 957; max-width: 420px; }
.photo-frame-story::after {
  content: "";
  position: absolute;
  inset: 10px;
  border: 2px solid rgba(245, 234, 218, 0.35);
  border-radius: calc(var(--radius-card) - 6px);
  pointer-events: none;
}

/* ---------- 8. Follow / launch list ---------- */
.follow-actions {
  display: grid;
  gap: 20px;
  align-items: center;
}

.email-form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.email-form input {
  flex: 1 1 220px;
  font: inherit;
  background: var(--white);
  color: var(--espresso);
  border: 2px solid var(--latte);
  border-radius: var(--radius-pill);
  padding: 12px 20px;
  min-height: 48px;
}
.email-form input:focus { border-color: var(--matcha-deep); outline: none; }

.email-feedback {
  font-weight: 600;
  margin-top: 1rem;
}

/* ---------- 9. Footer ---------- */
.site-footer {
  position: relative;
  background: var(--espresso);
  color: var(--cream);
  padding-block: 56px;
  padding-top: calc(56px + clamp(36px, 7vw, 88px));
  /* leave room for the mobile action bar so nothing is hidden behind it */
  padding-bottom: calc(56px + 84px + env(safe-area-inset-bottom));
}

.footer-grid { display: grid; gap: 32px; }

.footer-brand .brand-logo { width: 56px; height: 56px; margin-bottom: 8px; }
.footer-tagline {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--latte);
  margin-top: 0.75rem;
}

.site-footer p { margin-bottom: 0.5rem; }
.site-footer a { color: var(--cream); font-weight: 600; }
.site-footer a:hover { color: var(--latte); }

.footer-social {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  text-decoration: none;
}

.footer-copyright { font-size: 0.875rem; color: var(--latte); margin-top: 1rem; }

/* ---------- 10. Sticky mobile action bar ---------- */
.mobile-action-bar {
  position: fixed;
  left: 12px; right: 12px;
  bottom: calc(10px + env(safe-area-inset-bottom));
  z-index: 40;
  display: grid;
  grid-template-columns: 1fr 1fr 48px;
  align-items: center;
  gap: 8px;
  padding: 8px;
  background: var(--espresso);
  border-radius: var(--radius-pill);
  box-shadow: 0 12px 32px rgba(42, 29, 21, 0.28);
  transform: translateY(140%);
  visibility: hidden;
  transition: transform 0.3s ease, visibility 0s 0.3s;
}
.mobile-action-bar.is-visible {
  transform: translateY(0);
  visibility: visible;
  transition: transform 0.3s ease, visibility 0s 0s;
}
/* nowrap + tighter padding: the dock stays one line, even at 320px */
.mobile-action-bar .btn { min-height: 48px; padding-inline: 8px; font-size: 0.9375rem; white-space: nowrap; }
.mobile-action-bar .btn-dark {
  background: transparent;
  border-color: var(--latte);
  color: var(--cream);
  box-shadow: none;
}
@media (hover: hover) {
  .mobile-action-bar .btn-dark:hover { background: rgba(200, 165, 123, 0.15); transform: none; box-shadow: none; }
}
.action-bar-ig {
  width: 48px; height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--cream);
  border: 2px solid var(--latte);
}

/* ---------- Commented-out testimonial component (styling ready for later) ---------- */
.testimonials { background: var(--cream-deep); }
.testimonial-grid {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  gap: 24px;
}
.testimonial-card {
  background: var(--white);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow);
  padding: 28px;
}
.testimonial-card blockquote { margin: 0; }
.testimonial-card cite {
  display: block;
  margin-top: 0.75rem;
  font-style: normal;
  font-weight: 700;
  color: var(--espresso-soft);
}

/* Mobile: no header CTA at all. The hero has its own Get directions, and the
   floating dock carries Directions after that, so the reserved green appears
   only once per screen. */
@media (max-width: 767px) {
  .btn-header { display: none; }
}

/* The mobile overlay eases in, its links rising one after another. Hidden
   states live inside the guard, so reduced motion opens it instantly. */
@media (prefers-reduced-motion: no-preference) {
  .mobile-menu { opacity: 0; transition: opacity 0.2s ease; }
  .mobile-menu.is-open { opacity: 1; }
  .mobile-menu nav > * {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.3s var(--ease-out), transform 0.45s var(--ease-out);
  }
  .mobile-menu.is-open nav > * { opacity: 1; transform: none; }
  .mobile-menu.is-open nav > :nth-child(2) { transition-delay: 40ms; }
  .mobile-menu.is-open nav > :nth-child(3) { transition-delay: 80ms; }
  .mobile-menu.is-open nav > :nth-child(4) { transition-delay: 120ms; }
  .mobile-menu.is-open nav > :nth-child(5) { transition-delay: 160ms; }
}

/* ---------- Scroll reveal (JS adds .is-revealed) ----------
   Hidden only when the inline <head> script has marked the page .js, so the
   content is never lost if JavaScript is off. It moves with the individual
   `translate` property, leaving `transform` and `rotate` free for the photo
   tilts and hover lifts. --reveal-delay is the batch stagger set by script.js. */
.js .reveal {
  opacity: 0;
  translate: 0 24px;
  transition: opacity 0.6s var(--ease-out) var(--reveal-delay, 0ms),
              translate 0.7s var(--ease-out) var(--reveal-delay, 0ms);
}
.js .reveal.is-revealed {
  opacity: 1;
  translate: none;
}

/* ---------- Reduced motion: switch all of it off ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .js .reveal { opacity: 1; translate: none; transition-delay: 0s !important; }
  .mobile-action-bar { transition: none; }
}

/* ==========================================================================
   Tablet and up (768px)
   ========================================================================== */
@media (min-width: 768px) {
  :root { --section-pad: 110px; }

  .container { padding-inline: 40px; }

  .site-nav { display: flex; gap: 4px; }
  .menu-toggle { display: none; }
  .mobile-menu { display: none !important; }

  .hero { min-height: min(100svh, 820px); }
  .hero-grid {
    grid-template-columns: 1.1fr 0.9fr;
    align-items: center;
    gap: 56px;
  }

  .matcha-grid { grid-template-columns: repeat(2, 1fr); gap: 32px; }

  .find-us-grid { grid-template-columns: 1fr 1fr; align-items: start; gap: 56px; }
  .map-frame { aspect-ratio: auto; height: 100%; min-height: 480px; }

  .story-grid {
    grid-template-columns: 1.2fr 0.8fr;
    align-items: center;
    gap: 56px;
  }

  .follow-actions { grid-template-columns: auto 1fr; gap: 32px; }

  .footer-grid { grid-template-columns: repeat(3, 1fr); gap: 48px; }

  .mobile-action-bar { display: none; }

  .testimonial-grid { grid-template-columns: 1fr 1fr; }
}

/* ==========================================================================
   Desktop (1200px)
   ========================================================================== */
@media (min-width: 1200px) {
  :root { --section-pad: 120px; }

  /* Five printed index entries in a row under the lineup photo */
  .matcha-grid {
    grid-template-columns: repeat(5, 1fr);
    gap: 28px;
  }
}

/* ==========================================================================
   Design layer: the printed-object pass
   One voice: a printed piece from the cafe's counter, stamped with the badge.
   Three motifs from the logo: the circle/arch, printed matter, and the wave.
   ========================================================================== */

/* ---------- Film grain over everything (static, one data URI, no request) ---------- */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  opacity: 0.038;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Lamp-glow warmth inside the dark sections (latte tints only) ----------
   The glow lives on its own layer so it can breathe slowly (below); with
   reduced motion it simply stays put. */
.matcha-series,
.our-story { position: relative; overflow: hidden; overflow: clip; }
.matcha-series > .container,
.our-story > .container { position: relative; z-index: 1; }
.matcha-series::before,
.our-story::before {
  content: "";
  position: absolute;
  inset: -15%;
  z-index: 0;
  pointer-events: none;
}
.matcha-series::before {
  background: radial-gradient(55rem 32rem at 77% 8%, rgba(200, 165, 123, 0.16), transparent 60%);
}
.our-story::before {
  background: radial-gradient(48rem 30rem at 4% 90%, rgba(200, 165, 123, 0.14), transparent 60%);
}
@media (prefers-reduced-motion: no-preference) {
  .matcha-series::before,
  .our-story::before { animation: lamp-breathe 16s ease-in-out infinite alternate; }
}
@keyframes lamp-breathe {
  from { opacity: 0.65; transform: none; }
  to { opacity: 1; transform: translate3d(3%, 2%, 0); }
}

/* ---------- The wave: cream sweeping into espresso, from the logo's crescent ---------- */
.wave-divider {
  position: absolute;
  left: 0; right: 0;
  width: 100%;
  height: clamp(36px, 7vw, 88px);
  display: block;
  pointer-events: none;
  z-index: 1;
}
.wave-divider-top { top: -1px; }
.wave-divider-bottom { bottom: -1px; transform: scaleY(-1); }

/* ---------- Display voice: Fraunces wonk italic + the bigger hero headline ---------- */
.hero h1 {
  font-size: clamp(3rem, 7.2vw, 5.9rem);
  line-height: 0.98;
  letter-spacing: -0.035em;
  text-wrap: balance;
  font-optical-sizing: auto;
}
.display-wonk {
  font-style: italic;
  font-variation-settings: "WONK" 1, "SOFT" 0;
  letter-spacing: -0.02em;
}
.hero .line { display: block; overflow: clip; padding: 0.14em; margin: -0.14em; }
.hero .line-in { display: block; }

/* ---------- Hero pour-in on load (hidden states live INSIDE the guard, so
     reduced-motion visitors and any failure mode see everything instantly) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .hero .line-in {
    transform: translateY(135%);
    animation: hero-rise 0.85s var(--ease-expo) 0s both;
  }
  .hero .line:nth-child(2) .line-in { animation-delay: 0.09s; }
  /* The largest first-screen pieces (the subhead on phones, the photo on
     desktop) slide but never fade, so the browser counts them as painted
     straight away (fast LCP) */
  .hero-subhead {
    opacity: 1;
    transform: translateY(12px);
    animation: hero-slide 0.7s var(--ease-out) 0.28s both;
  }
  .hero-photo {
    opacity: 1;
    transform: translateY(20px);
    animation: hero-slide 0.9s var(--ease-expo) 0.12s both;
  }
  .hero-copy .eyebrow,
  .hero-ctas,
  .trust-strip,
  .hero-cup-rail {
    opacity: 0;
    transform: translateY(14px);
    animation: hero-fade 0.4s var(--ease-out) both;
  }
  .hero-copy .eyebrow { animation-delay: 0s; }
  .hero-ctas { animation-delay: 0.38s; }
  .trust-strip { animation-delay: 0.46s; }
  .hero-cup-rail { animation-delay: 0.54s; }
  /* The stamp lands last, with a little overshoot */
  .hero-stamp { animation: stamp-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.7s both; }
}
@keyframes hero-rise { to { transform: none; } }
@keyframes hero-fade { to { opacity: 1; transform: none; } }
@keyframes hero-slide { to { transform: none; } }
@keyframes stamp-in { from { opacity: 0; transform: scale(0.8) rotate(-25deg); } }
/* Once the entrance has played, JS adds this class so the hero's visibility
   no longer depends on animation state (protects slow devices and any
   environment where animations pause or restart) */
.hero-settled .hero .line-in,
.hero-settled .hero-copy .eyebrow,
.hero-settled .hero-subhead,
.hero-settled .hero-ctas,
.hero-settled .trust-strip,
.hero-settled .hero-cup-rail,
.hero-settled .hero-photo,
.hero-settled .hero-stamp {
  animation: none;
  opacity: 1;
  transform: none;
}

/* ---------- Rotating tagline stamp (text ring spins, badge stays upright) ---------- */
.hero-stamp {
  position: absolute;
  left: -18px;
  bottom: 32px;
  width: 104px;
  height: 104px;
  display: grid;
  place-items: center;
  pointer-events: none;
  z-index: 2;
  filter: drop-shadow(0 4px 12px rgba(42, 29, 21, 0.18));
}
.hero-stamp svg { width: 100%; height: 100%; }
.hero-stamp img { position: absolute; width: 44px; height: 44px; border-radius: 50%; }
.hero-stamp text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: 0.24em;
  fill: var(--espresso);
  text-transform: uppercase;
}
@media (prefers-reduced-motion: no-preference) {
  .hero-stamp .rotor { animation: stamp-spin 45s linear infinite; transform-origin: 60px 60px; }
}
@keyframes stamp-spin { to { transform: rotate(360deg); } }

/* ---------- Mobile cup rail: the five drinks above the fold ---------- */
/* Grid items default to min-width auto, which would let the rail's content
   stretch the whole column wider than the phone screen. */
.hero-grid > * { min-width: 0; }
.hero-cup-rail {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  margin-inline: -20px;
  padding: 4px 20px 12px;
  scroll-snap-type: x proximity;
  /* Snap the first cup to the text gutter, so the rail opens unscrolled */
  scroll-padding-inline: 20px;
  scrollbar-width: none;
}
.hero-cup-rail::-webkit-scrollbar { display: none; }
.hero-cup-rail a {
  flex: 0 0 104px;
  scroll-snap-align: start;
  display: grid;
  gap: 6px;
  justify-items: center;
  text-decoration: none;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--espresso-soft);
  min-height: 44px;
}
.hero-cup-rail img {
  width: 104px;
  height: 130px;
  object-fit: cover;
  object-position: 50% 14%;
  border-radius: 14px;
  border: 2px solid var(--white);
  box-shadow: var(--shadow);
}
/* Name over price, like a price card */
.hero-cup-rail span { display: grid; justify-items: center; line-height: 1.25; }
.hero-cup-rail b { font-family: var(--font-display); font-weight: 700; color: var(--espresso); }
@media (max-width: 767px) {
  /* Tighter mobile fold: a smaller arch of Russ under the buttons, then the
     cup rail; no forced viewport height */
  .hero-grid { gap: 32px; }
  .hero-photo { width: min(300px, 100%); }
  .hero { min-height: 0; padding-top: calc(var(--header-height) + 16px); }
  .hero-subhead { margin-bottom: 1.25rem; }
  /* Two equal CTAs side by side; they stack full width on a 320px screen */
  .hero-ctas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
  }
  .hero-ctas .btn { padding-inline: 14px; }
  /* The trust strip reads as a printed dateline, not three pills: the live
     status on its own line, then the facts separated by a dot (so a wrapped
     line never starts with a stray separator) */
  .trust-strip { row-gap: 4px; column-gap: 8px; }
  .trust-strip > span { background: none; border: 0; padding: 0; }
  .trust-strip > span:first-child { flex-basis: 100%; }
  .trust-strip > span + span + span::before { content: "\00B7"; margin-right: 8px; color: var(--latte); }
}
/* Tablet: move the caption right, clear of the rotating stamp (position only) */
@media (min-width: 768px) and (max-width: 1199px) {
  .photo-frame-hero .photo-frame-label { left: auto; right: 18px; transform: none; }
}
@media (min-width: 768px) {
  .hero-cup-rail { display: none; }
  .hero-stamp {
    width: clamp(100px, 11vw, 136px);
    height: clamp(100px, 11vw, 136px);
    left: clamp(-28px, -2vw, -16px);
  }
  .site-footer { padding-bottom: 56px; }
}

/* ---------- Matcha Series: printed index entries under the lineup ---------- */
.matcha-card {
  border-top: 1px solid rgba(200, 165, 123, 0.25);
  padding-top: 1rem;
  display: flex;
  flex-direction: column;
}
.matcha-card .price-tbc { margin-top: auto; align-self: flex-start; }

.matcha-num {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 0.8125rem;
  letter-spacing: 0.18em;
  color: var(--latte);
  font-variant-numeric: tabular-nums;
}
.matcha-num::after { content: ""; flex: 1; height: 2px; background: var(--latte); opacity: 0.35; }

@media (max-width: 767px) {
  .matcha-card h3 { font-size: 1.125rem; }
  .matcha-card p { font-size: 0.875rem; margin-bottom: 0.5rem; }
  .matcha-card .price-tbc { font-size: 0.75rem; padding: 2px 10px; }
}

/* The page's high point: the display type tier and a centred opener with a
   mirrored rule, one rule per card, and prices on a shared baseline */
.matcha-series h2 { font-size: var(--fs-display); line-height: 1; letter-spacing: -0.03em; }
.matcha-series .container > .eyebrow,
.matcha-series .container > h2,
.matcha-series .container > .section-intro { text-align: center; margin-inline: auto; }
/* Centred eyebrows get a mirrored rule on the left too (same inline box,
   so it stays with the first word) */
.matcha-series .eyebrow::before,
.follow .eyebrow::before {
  content: "";
  padding-left: 48px;
  margin-right: 12px;
  background: linear-gradient(var(--latte), var(--latte)) 0 50% / 100% 1px no-repeat;
}
.matcha-series .section-cta { text-align: center; }
.matcha-card { border-top: 0; padding-top: 0; }
.matcha-card .menu-price { margin-top: auto; }
@media (min-width: 1200px) {
  .matcha-card h3 { font-size: 1.375rem; text-wrap: balance; }
}
/* Phones: a printed index, name and price on one line */
@media (max-width: 767px) {
  .matcha-grid { gap: 22px; }
  .matcha-card {
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: 12px;
    align-items: baseline;
  }
  .matcha-num { grid-column: 1 / -1; }
  .matcha-card h3 { grid-column: 1; }
  .matcha-card .menu-price { grid-column: 2; grid-row: 2; margin-top: 0; font-size: 1.25rem; }
  .matcha-card p { grid-column: 1 / -1; }
}

/* ---------- The printed cards: a contact sheet (desktop), a swipe strip (phones) ---------- */
.sheet-label {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--espresso-soft);
  margin: 0 0 12px;
}
/* The menus read straight and clean; the candid prints elsewhere keep their tilt */
.counter-sheet .counter-print { rotate: 0deg; }
@media (max-width: 767px) {
  .counter-sheet {
    display: flex;
    align-items: center;
    gap: 16px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    margin: 0 -20px 2.5rem;
    padding: 4px 20px 16px;
    scroll-padding-inline: 20px;
    scrollbar-width: thin;
    scrollbar-color: var(--latte) transparent;
  }
  .sheet-row { display: contents; }
  .counter-sheet .counter-print { flex: 0 0 auto; scroll-snap-align: start; }
  /* Whole at native aspect: as tall as the screen allows, never wider than
     the screen (the landscape frappes card), so the next card peeks in.
     The width is definite before the image loads (from --ar), so the strip
     never jumps in height. */
  .counter-sheet .counter-print img {
    width: min(100vw - 72px, min(60svh, 440px) * var(--ar));
    height: auto;
    max-width: none;
  }
}
@media (min-width: 768px) {
  .counter-sheet { display: grid; gap: 24px; margin-bottom: 2.5rem; }
  .sheet-row { display: flex; gap: 24px; align-items: flex-start; }
  /* Width in proportion to each image's aspect ratio, so a row shares one height */
  .sheet-row > .counter-print { flex: var(--ar) 1 0%; min-width: 0; }
}

.counter-print {
  margin: 0;
  background: var(--white);
  padding: 10px 10px 12px;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow);
}
.counter-print img,
.counter-print video {
  width: 100%;
  height: auto;
  display: block;
  border-radius: calc(var(--radius-card) - 6px);
}
/* Lazy images land on a warm tone instead of a white flash */
.counter-print img { background: var(--cream-deep); }
/* Tilts use the individual `rotate` property, so the reveal's `translate`
   and the hover's `transform` never overwrite them */
.counter-print-frappes { rotate: -1deg; }
.counter-print-rice { rotate: 1.2deg; }

/* ---------- The printed counter card menu ---------- */
.menu-card {
  position: relative;
  background: var(--white);
  border: 1px solid rgba(42, 29, 21, 0.12);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow);
  padding: 40px 24px;
}
.menu-card::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1.5px solid rgba(200, 165, 123, 0.55);
  border-radius: calc(var(--radius-card) - 6px);
  pointer-events: none;
}
.menu-badge {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  margin: 0 auto 12px;
  box-shadow: 0 0 0 3px var(--white), 0 0 0 5px var(--latte);
}
.menu-item-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
}
/* Printed-menu row anatomy: name · dotted leader · price on the first line,
   description on its own full-width line below */
.menu-row {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(16px, 1fr) auto;
  align-items: end;
  gap: 2px 10px;
}
.menu-item-text { display: contents; }
.menu-item-name { grid-column: 1; grid-row: 1; }
/* "anywhere" (unlike break-word) also shrinks min-content, so long placeholder
   tokens like [DESCRIPTION TBC] cannot force the row wider than a 320px screen */
.menu-item-desc { grid-column: 1 / -1; grid-row: 2; overflow-wrap: anywhere; }
.menu-columns > * { min-width: 0; }
.menu-leader {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  min-width: 16px;
  height: 8px;
  margin: 0 0 0.45em;
  background-image: radial-gradient(circle, rgba(74, 56, 44, 0.45) 1.2px, transparent 1.3px);
  background-size: 9px 8px;
  background-repeat: repeat-x;
  background-position: left bottom 2px;
}
.menu-row > .menu-price,
.menu-row > .price-tbc,
.menu-row > .price-soon { grid-column: 3; grid-row: 1; justify-self: end; }
@media (max-width: 479px) {
  .price-tbc,
  .price-soon { font-size: 0.6875rem; padding: 1px 8px; letter-spacing: 0.04em; }
  .menu-category h3 { font-size: 0.9375rem; letter-spacing: 0.06em; gap: 10px; }
  /* A little more room per row, so names stay on line one with their price */
  .menu-card { padding-inline: 18px; }
  .menu-row { column-gap: 8px; grid-template-columns: minmax(0, auto) minmax(12px, 1fr) auto; }
  .menu-leader { min-width: 12px; }
  .menu-item-name { font-size: 1rem; }
}

/* Jump chips: straight to a category on the long phone menu */
/* 6px of padding top and bottom leaves room for the 3px focus ring and its
   2px offset inside the scroller, which clips on every side */
.menu-jump {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  margin: -2px -20px 1.5rem;
  padding: 6px 20px;
  scrollbar-width: none;
}
.menu-jump::-webkit-scrollbar { display: none; }
.menu-jump a {
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 16px;
  border: 2px solid var(--latte);
  border-radius: var(--radius-pill);
  background: var(--white);
  color: var(--espresso);
  font-size: 0.875rem;
  font-weight: 700;
  text-decoration: none;
  transition: background-color 0.2s ease;
}
@media (hover: hover) {
  .menu-jump a:hover { background: var(--cream-deep); }
}
.menu-category[id] { scroll-margin-top: calc(var(--header-height) + 16px); }
@media (min-width: 768px) {
  /* The chips wrap here, so nothing needs to scroll and focus rings show whole */
  .menu-jump { flex-wrap: wrap; overflow: visible; margin-inline: 0; padding-inline: 0; }
}
/* Placeholder prices as tilted rubber stamps; obviously not real prices */
.menu-rest .price-tbc { background: rgba(234, 220, 199, 0.5); transform: rotate(-1.5deg); }
.menu-row:nth-child(even) .price-tbc { transform: rotate(1.25deg); }
.menu-note { text-align: center; margin-inline: auto; }
/* Real prices, in the printed-menu voice */
.menu-price {
  font-variant-numeric: tabular-nums lining-nums;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.0625rem;
  white-space: nowrap;
}
.matcha-card .menu-price { color: var(--latte); }

/* New-item stamp beside a category name */
.new-tag {
  display: inline-block;
  background: var(--espresso);
  color: var(--cream);
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: var(--radius-pill);
  padding: 3px 10px;
  transform: rotate(-2deg);
  flex: none;
}

/* Customization note under the menu */
.menu-custom {
  margin: 2rem auto 0.5rem;
  text-align: center;
  font-size: 0.9375rem;
  color: var(--espresso-soft);
}
@media (min-width: 768px) {
  .menu-card { padding: 56px 48px; }
  /* Tablet portrait: one centred column at a comfortable reading width, so
     every dish name stays on one line with its price */
  .menu-columns { max-width: 560px; margin-inline: auto; gap: 48px; }
}
/* Balanced newspaper columns once each column is wide enough for the longest
   names and headings: categories flow top to bottom, never split */
@media (min-width: 1024px) {
  .menu-columns { display: block; max-width: none; columns: 2; column-gap: 64px; }
  .menu-category { break-inside: avoid; margin-bottom: 48px; }
}

/* ---------- Pre-order as a real order slip on the espresso band ---------- */
.order-form,
.order-result {
  position: relative;
  background: var(--white);
  color: var(--espresso);
  padding: 32px 24px 28px;
  border-radius: 6px;
  box-shadow: 0 24px 60px rgba(42, 29, 21, 0.45);
}
/* Printed header, read as decoration only (the alt text after the slash is empty) */
.order-form::before {
  content: "ORDER SLIP";
  content: "ORDER SLIP" / "";
  display: block;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 0.8125rem;
  letter-spacing: 0.2em;
  padding-bottom: 14px;
  border-bottom: 2px dashed var(--latte);
}
/* Perforated top and bottom edges: espresso "holes" punched into the slip */
.order-form::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: -7px; bottom: -7px;
  pointer-events: none;
  background:
    radial-gradient(circle 7px at 9px 50%, var(--espresso) 98%, transparent 100%) top left / 18px 14px repeat-x,
    radial-gradient(circle 7px at 9px 50%, var(--espresso) 98%, transparent 100%) bottom left / 18px 14px repeat-x;
}
/* Fields: cream wells with a clear 3:1 boundary on the white slip. The :not
   keeps the hidden pickup radios hidden. */
.form-field input:not(.visually-hidden),
.form-field textarea {
  background: var(--cream);
  border: 2px solid rgba(42, 29, 21, 0.62);
}
/* A field with a problem keeps its dashed espresso edge on the slip too */
.form-field.has-error input:not(.visually-hidden),
.form-field.has-error textarea { border-color: var(--espresso); border-style: dashed; }
/* The slip is white, so focus rings go back to matcha-deep (the band's latte
   ring would be too faint on white) */
.pre-order .order-form :focus-visible,
.pre-order .order-result :focus-visible { outline-color: var(--matcha-deep); }
.order-result h3:focus { outline: none; }
/* Ghost buttons on the white slip keep their espresso ink */
.pre-order .order-result .btn-ghost {
  color: var(--espresso);
  border-color: var(--espresso);
  background-image: linear-gradient(var(--espresso), var(--espresso));
}
.pre-order .order-result .btn-ghost:focus-visible { color: var(--cream); }
@media (hover: hover) {
  .pre-order .order-result .btn-ghost:hover { color: var(--cream); }
}

.field-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.order-total {
  margin: 4px 0 0;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.45;
}

.chip-groups { display: grid; gap: 16px; margin-bottom: 10px; }
.chip-group-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--espresso-soft);
}
.chip-group-label { font-size: 0.75rem; }
.chip-group-label .new-tag { font-size: 0.6875rem; padding: 2px 8px; }
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.chip {
  min-height: 44px;
  padding: 8px 16px;
  border: 2px solid var(--latte);
  border-radius: var(--radius-pill);
  background: var(--white);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--espresso);
  cursor: pointer;
  position: relative;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease,
              transform 0.14s var(--ease-out);
}
.chip:active { transform: scale(0.95); }
.chip.is-active { background: var(--espresso); border-color: var(--espresso); color: var(--cream); }
@media (hover: hover) {
  .chip:not(.is-active):hover { border-color: var(--espresso); }
  .pill-row input:not(:checked) + label:hover { border-color: var(--espresso); }
}
/* Real menu prices on the chips (a leading space in the markup reads naturally
   to screen readers, so the visual gap is small) */
.chip-price { margin-left: 2px; font-weight: 600; color: var(--espresso-soft); }
.chip.is-active .chip-price { color: var(--cream-deep); }
/* Phones: a two-column order pad, name over price, so the priced chips sit
   two to a row instead of one */
@media (max-width: 479px) {
  .chip-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .chip {
    display: grid;
    justify-items: center;
    align-content: center;
    padding: 6px 10px;
    line-height: 1.25;
  }
  .chip-price { margin-left: 0; font-size: 0.75rem; }
}
/* The quantity badge floats on the corner, so a chip never widens and shoves
   its neighbours when you add a second one */
.chip-qty {
  position: absolute;
  top: -8px;
  right: -6px;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  margin: 0;
  border-radius: 999px;
  background: var(--latte);
  color: var(--espresso);
  font-size: 0.6875rem;
  line-height: 22px;
  text-align: center;
  box-shadow: 0 0 0 2px var(--white);
}
@media (prefers-reduced-motion: no-preference) {
  .chip.is-bumped { animation: chip-bump 0.34s cubic-bezier(0.34, 1.56, 0.64, 1); }
  .chip.is-bumped .chip-qty { animation: qty-pop 0.34s cubic-bezier(0.34, 1.56, 0.64, 1); }
  .order-result:not([hidden]) { animation: slip-in 0.36s var(--ease-out); }
}
@keyframes chip-bump { 40% { transform: scale(1.07); } }
@keyframes qty-pop { from { transform: scale(0.4); opacity: 0; } }
@keyframes slip-in { from { opacity: 0; transform: translateY(-10px); } }

.pickup-pills { border: 0; padding: 0; margin: 0; }
.pickup-pills legend { font-weight: 700; font-size: 0.9375rem; padding: 0; margin-bottom: 6px; }
.pill-row { display: flex; flex-wrap: wrap; gap: 8px; }
.pill-row label {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 16px;
  border: 2px solid var(--latte);
  border-radius: var(--radius-pill);
  background: var(--white);
  font-size: 0.875rem;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.pill-row input:checked + label { background: var(--espresso); border-color: var(--espresso); color: var(--cream); }
.pill-row input:focus-visible + label { outline: 3px solid var(--matcha-deep); outline-offset: 2px; }

/* ---------- Tablet band (768-1199): no orphaned grid cells ---------- */
@media (min-width: 768px) and (max-width: 1199px) {
  .matcha-card:last-child { grid-column: 1 / -1; }
}

/* ---------- Spotted at the counter ---------- */
.spotted-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.spotted-grid .counter-print img { aspect-ratio: 3 / 4; object-fit: cover; }
.spotted-grid .counter-print:nth-child(1) { rotate: -1.2deg; }
.spotted-grid .counter-print:nth-child(2) { rotate: 0.8deg; }
.spotted-grid .counter-print:nth-child(3) { rotate: -0.6deg; }
.spotted-grid .counter-print:nth-child(4) { rotate: 1deg; }
.spotted-grid .counter-print:nth-child(5) { rotate: -0.9deg; }
.counter-print figcaption {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(0.875rem, 2vw, 1.0625rem);
  color: var(--espresso-soft);
  text-align: center;
  padding: 12px 8px 4px;
}
@media (min-width: 768px) {
  .spotted-grid { grid-template-columns: repeat(5, 1fr); align-items: start; gap: 20px; }
}

/* ==========================================================================
   Interaction layer: photo hover and the click-to-enlarge lightbox
   ========================================================================== */
.lightbox-able { cursor: zoom-in; }

/* Keyboard focus on a photo: a clear 3px ring. Where a frame clips its photo
   (hero, story), the frame wears the ring instead. Green on cream, latte on
   espresso. */
.lightbox-able:focus-visible { outline: 3px solid var(--matcha-deep); outline-offset: 3px; }
.photo-frame:has(.lightbox-able:focus-visible) { outline: 3px solid var(--matcha-deep); outline-offset: 4px; }
.section-dark .lightbox-able:focus-visible,
.section-dark .photo-frame:has(.lightbox-able:focus-visible) { outline-color: var(--latte); }
/* The venue's pinned frame clips and covers its own outline, so its ring is a
   layer drawn on top */
.venue-cinema-sticky::after {
  content: "";
  position: absolute;
  inset: 6px;
  z-index: 2;
  border: 3px solid var(--latte);
  border-radius: 4px;
  opacity: 0;
  pointer-events: none;
}
.venue-cinema-sticky:has(.lightbox-able:focus-visible)::after { opacity: 1; }
.venue-cinema .lightbox-able:focus-visible { outline: none; }

/* One transition list for every photo card: the reveal (opacity, translate,
   with its stagger delay) plus the hover (rotate, transform, scale, shadow)
   without any delay. Written with .reveal so it outranks `.js .reveal`. */
@media (prefers-reduced-motion: no-preference) {
  .counter-print,
  .counter-print.reveal,
  .photo-frame-hero,
  .photo-frame-story,
  .photo-frame-story.reveal {
    transition: opacity 0.6s var(--ease-out) var(--reveal-delay, 0ms),
                translate 0.7s var(--ease-out) var(--reveal-delay, 0ms),
                rotate 0.4s var(--ease-out), transform 0.4s var(--ease-out),
                scale 0.15s ease, box-shadow 0.4s ease;
  }
  /* Touch press: the card gives a little, the photo inside never scales */
  .counter-print:has(> .lightbox-able:active),
  .photo-frame:has(.lightbox-able:active) { scale: 0.985; }
}

/* Hover and keyboard focus look the same: the print straightens and lifts.
   Keyboard focus only (:focus-visible), so a photo that gets focus back after
   the lightbox is closed with the mouse does not stay lifted. The :has() rules
   are kept separate so a browser without :has() still gets the hover. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .counter-print:hover,
  .spotted-grid .counter-print:hover {
    rotate: 0deg;
    transform: translateY(-6px);
    box-shadow: 0 16px 40px rgba(42, 29, 21, 0.16);
  }
  .counter-print:has(.lightbox-able:focus-visible),
  .spotted-grid .counter-print:has(.lightbox-able:focus-visible) {
    rotate: 0deg;
    transform: translateY(-6px);
    box-shadow: 0 16px 40px rgba(42, 29, 21, 0.16);
  }
  .matcha-lineup img { transition: box-shadow 0.4s ease; }
  .matcha-lineup:hover img,
  .matcha-lineup img:focus-visible { box-shadow: 0 28px 60px rgba(42, 29, 21, 0.55); }
  .photo-frame-story:hover,
  .photo-frame-hero:hover { box-shadow: 0 16px 44px rgba(42, 29, 21, 0.22); }
  .photo-frame-story:has(.lightbox-able:focus-visible),
  .photo-frame-hero:has(.lightbox-able:focus-visible) { box-shadow: 0 16px 44px rgba(42, 29, 21, 0.22); }
}

/* Zoom cue on desktop: a small cream badge says "this opens larger". Not on
   the hero arch, whose ::after is the registration echo and label area. */
@media (hover: hover) {
  .counter-print,
  .photo-frame,
  .matcha-lineup { position: relative; }
  .counter-print::before,
  .photo-frame-story::before,
  .matcha-lineup::before {
    content: "";
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 2;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--cream) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232A1D15' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9V4h5M20 9V4h-5M4 15v5h5M20 15v5h-5'/%3E%3C/svg%3E") center / 18px no-repeat;
    box-shadow: var(--shadow);
    opacity: 0;
    transform: scale(0.85);
    transition: opacity 0.2s ease, transform 0.25s var(--ease-out);
    pointer-events: none;
  }
  /* The lineup's top corners are an arch, so its badge sits bottom right */
  .matcha-lineup::before { top: auto; bottom: 20px; right: 20px; }
  .counter-print:hover::before,
  .photo-frame-story:hover::before,
  .matcha-lineup:hover::before { opacity: 1; transform: none; }
  .counter-print:has(.lightbox-able:focus-visible)::before,
  .photo-frame-story:has(.lightbox-able:focus-visible)::before,
  .matcha-lineup:has(.lightbox-able:focus-visible)::before { opacity: 1; transform: none; }
}

/* The photo zooms out of its thumbnail (script.js animates it from the
   thumbnail's position) while the backdrop fades in behind it */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.lightbox::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(42, 29, 21, 0.94);
  opacity: 0;
  transition: opacity 0.26s ease;
}
.lightbox.is-open::before { opacity: 1; }
.lightbox-figure {
  position: relative;
  z-index: 1;
  margin: 0;
  min-width: 0;
  max-width: min(1100px, 94vw);
  text-align: center;
}
.lightbox-close,
.lightbox figcaption { opacity: 0; transition: opacity 0.2s ease 0.14s; }
.lightbox.is-open .lightbox-close,
.lightbox.is-open figcaption { opacity: 1; }
/* script.js sets --lb-w (the original's width) and --lb-ar (its proportions),
   so the enlarged box has its final size before any pixels arrive and keeps
   it when the sharper copy is swapped in. Whole photo, never cropped. */
.lightbox img {
  width: min(var(--lb-w, 1100px), 1100px, 94vw, 100vw - 48px, 82vh * var(--lb-ar, 1));
  aspect-ratio: var(--lb-ar, auto);
  max-width: 100%;
  max-height: 82vh;
  height: auto;
  object-fit: contain;
  margin-inline: auto;
  border-radius: var(--radius-card);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
}
.lightbox figcaption {
  margin-top: 14px;
  color: var(--cream);
  font-size: 0.9375rem;
}
.lightbox-close {
  position: absolute;
  z-index: 1;
  top: 18px;
  right: 18px;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  background: rgba(245, 234, 218, 0.12);
  border: 2px solid var(--latte);
  border-radius: 50%;
  color: var(--cream);
  cursor: pointer;
}
@media (hover: hover) {
  .lightbox-close:hover { background: var(--cream); color: var(--espresso); }
}
body.lightbox-open { overflow: hidden; }
/* Keeps the scrollbar's space reserved, so locking the scroll never shifts the page */
html { scrollbar-gutter: stable; }
/* With classic scrollbars that reserved lane sits outside the fixed lightbox;
   paint it the same colour as the backdrop so no cream strip shows. (Body keeps
   its own cream background, so only the lane changes.) */
html:has(body.lightbox-open) {
  background: var(--espresso);
  background: color-mix(in srgb, var(--espresso) 94%, var(--cream));
}

/* ---------- Venue band: the render blended into the landing page ---------- */
.venue-band { padding-block: 0 24px; }
.venue-band-figure { margin: 0; position: relative; }
.venue-band img {
  width: 100%;
  height: auto;
  display: block;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
}
.venue-band .photo-frame-label { bottom: 26px; }
@media (max-width: 767px) {
  /* A taller crop on phones so the band still has presence */
  .venue-band img { aspect-ratio: 4 / 3; object-fit: cover; object-position: 40% 50%; }
}

/* ---------- PeriPeriBoy: the fire side of the counter ---------- */
.ppb { position: relative; background: var(--cream-deep); }
.ppb-grid { display: grid; gap: 40px; }
.ppb-print { position: relative; max-width: 420px; }
/* The film lies exactly over the still inside the print's white border; it
   ignores clicks so the still underneath still opens the lightbox */
.ppb-print > .film-overlay {
  position: absolute;
  left: 10px;
  top: 10px;
  width: calc(100% - 20px);
  height: auto;
  aspect-ratio: 896 / 1200;
  object-fit: cover;
  pointer-events: none;
  transition: opacity 0.5s ease;
}
/* Between plays the film fades back to the still for a breath */
.film-overlay.is-resting { opacity: 0; }
@media (min-width: 768px) {
  /* Mirrored from Our Story: photo left with a slight tilt, words right */
  .ppb-grid { grid-template-columns: 0.8fr 1.2fr; align-items: center; gap: 56px; }
  .ppb-print { justify-self: center; order: -1; rotate: -1.2deg; }
}

/* ---------- Venue scroll-cinema: pinned media, dolly-in on scroll ---------- */
.venue-cinema { position: relative; padding-block: 0; }
.venue-cinema-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}
.venue-cinema-media {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 45% 50%;
  display: block;
  transform-origin: 50% 45%;
  will-change: transform;
}
/* Legibility scrim for the chapter captions, gradient only (no blur over media) */
.venue-cinema-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(42, 29, 21, 0.35) 0%, transparent 22%),
    linear-gradient(0deg, rgba(42, 29, 21, 0.55) 0%, transparent 36%);
  pointer-events: none;
}
.venue-cinema-chapters {
  position: relative;
  margin-top: -100vh;
  margin-top: -100svh;
  pointer-events: none;
}
.venue-chapter {
  min-height: 90vh;
  min-height: 90svh;
  display: grid;
  place-items: end center;
  padding: 0 24px 12vh;
  margin: 0;
  max-width: none;
}
.venue-chapter span {
  font-family: var(--font-display);
  font-weight: 800;
  font-style: italic;
  font-variation-settings: "WONK" 1, "SOFT" 0;
  font-size: clamp(1.75rem, 5vw, 3.25rem);
  line-height: 1.15;
  color: var(--cream);
  text-align: center;
  text-shadow: 0 2px 24px rgba(42, 29, 21, 0.65);
}
/* The chapters container is pulled up a full viewport, so chapter one
   lands on the pinned screen itself. script.js fades each caption in and
   out by its position on screen, like a film title. */
.venue-chapter span { will-change: opacity, transform; }
.venue-wave { z-index: 3; }

/* The desktop film is laid over the still (the still keeps the alt text and
   the lightbox; clicks pass through the film to it) */
.venue-cinema-sticky > .film-overlay { position: absolute; inset: 0; pointer-events: none; }

@media (max-width: 767px) {
  /* Phones: the whole render in a widescreen band at its own aspect ratio
     (nothing cropped, shown smaller than its source), panned by script.js
     from the Ruje counter on the left to the PeriPeriBoy counter on the right */
  .venue-cinema-sticky { background: var(--espresso); display: grid; align-items: center; }
  .venue-cinema-media {
    width: auto;
    max-width: none;
    height: min(58svh, 480px);
    aspect-ratio: 1600 / 719;
    object-fit: cover;
    justify-self: start;
    transform-origin: 0 50%;
  }
  .venue-cinema-scrim { display: none; }
  /* Backstop: the desktop film never shows in the phone band (script.js
     also takes it off when the window narrows) */
  .venue-cinema-sticky > .film-overlay { display: none; }
  .venue-chapter {
    min-height: 70svh;
    padding-bottom: calc(8svh + env(safe-area-inset-bottom));
  }
  /* Extra pinned track after the last chapter, so "Pull up a chair." lands
     over the band (at the PeriPeriBoy end of the pan) before it scrolls away */
  .venue-cinema-chapters { padding-bottom: 34svh; }
}
/* Reduced motion on phones: no pan and no pinning. The whole render sits
   still between the waves, with the three captions right under it. */
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  .venue-cinema { background: var(--espresso); padding-bottom: calc(clamp(36px, 7vw, 88px) + 24px); }
  .venue-cinema-sticky {
    position: relative;
    height: auto;
    padding-top: calc(clamp(36px, 7vw, 88px) + 16px);
  }
  .venue-cinema-media { width: 100%; height: auto; justify-self: stretch; }
  .venue-cinema-chapters { margin-top: 0; padding: 20px 0 0; }
  .venue-chapter { min-height: 0; padding: 6px 24px; }
  .venue-chapter span { font-size: 1.625rem; }
}

/* ---------- Hero ambient glow: two warm lamps drifting slowly past each other ---------- */
/* clip contains the oversized drifting glow layers without creating a scroll context */
.hero { position: relative; overflow: hidden; overflow: clip; }
.hero > .container { position: relative; z-index: 1; }
@media (prefers-reduced-motion: no-preference) {
  .hero::before,
  .hero::after {
    content: "";
    position: absolute;
    inset: -22%;
    z-index: 0;
    pointer-events: none;
  }
  .hero::before {
    background: radial-gradient(38rem 28rem at 72% 22%, rgba(200, 165, 123, 0.38), transparent 62%);
    animation: glow-a 18s ease-in-out infinite alternate;
  }
  .hero::after {
    background: radial-gradient(32rem 24rem at 16% 80%, rgba(234, 220, 199, 0.7), transparent 60%);
    animation: glow-b 24s ease-in-out infinite alternate-reverse;
  }
}
@keyframes glow-a {
  from { transform: translate3d(-6%, -4%, 0) scale(1); }
  to { transform: translate3d(5%, 4%, 0) scale(1.14); }
}
@keyframes glow-b {
  from { transform: translate3d(4%, -3%, 0) scale(1.1); }
  to { transform: translate3d(-5%, 3%, 0) scale(1); }
}

/* Background motion pauses while its section is off screen (script.js
   toggles .is-offscreen), so the page does no work it cannot show */
.is-offscreen::before,
.is-offscreen::after,
.is-offscreen .rotor,
.is-offscreen .dot-live::after { animation-play-state: paused; }

/* ---------- Find us: answers before the map on phones, comfortable phone links ----------
   The details come first in the HTML (so focus reaches them first); from
   768px the map moves back to the left column. */
@media (min-width: 768px) {
  .find-us-grid > .map-frame { order: -1; }
}
.site-footer p a:not(.footer-social) {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
/* The phone link sits inside a sentence: padding gives it a 44px+ tap area
   and the matching negative margin keeps the line its normal height */
.find-us-phone a {
  display: inline-block;
  padding-block: 10px;
  margin-block: -10px;
}

/* ---------- Follow: one centred block, no dead band before the footer ---------- */
.follow .container-narrow { text-align: center; }
.follow .section-intro { margin-inline: auto; }
.follow-actions { justify-items: center; grid-template-columns: 1fr; }
.follow { padding-bottom: calc(var(--section-pad) * 0.6); }

/* ---------- Our story: the founders' quote leads, the heading steps back ---------- */
.our-story h2 { font-size: clamp(1.75rem, 3.6vw, 2.5rem); }
.pull-quote { margin-top: 2.25rem; }
.pull-quote p { font-size: clamp(1.375rem, 3.2vw, 1.875rem); }

/* ---------- Spotted on phones: no orphan print, cards hug their captions ---------- */
@media (max-width: 767px) {
  .spotted-grid { align-items: start; }
  .spotted-grid .counter-print:last-child { grid-column: 1 / -1; }
  .counter-print figcaption { font-size: 0.875rem; line-height: 1.35; text-wrap: balance; }
}