:root {
  --paper: #f5f0e6;
  --paper-raised: #fbf8f1;
  --ink: #2e4a3c;
  --text: #333333;
  --muted: #5a6259;
  --gold: #c2a95d;
  --cranberry: #8c3d3d;
  --line: #e4dbc8;
  --font-display: "Lora", serif;
  --font-body: "Lora", serif;
  /* Motion (from the brand design system) */
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --dur-base: 250ms;
  --dur-slow: 400ms;
  /* Type tracking (from the brand design system) */
  --tracking-label: 0.1em;    /* all-caps overline / eyebrow — the standard */
  --tracking-display: -0.01em; /* slight negative on large display headings */
}

* { box-sizing: border-box; }

/* Form controls don't inherit type from the page — browsers substitute their
   own UI font — so opt them back in. Without this a real <button> renders in
   the system font while an <a class="button"> next to it renders in Lora. */
button, input, select, textarea, optgroup { font-family: inherit; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.6;
}

a { color: inherit; }

.wordmark img {
  height: 34px;
  width: auto;
  display: block;
}
/* Roomier wordmark once there's space for it beside the nav. */
@media (min-width: 900px) {
  .wordmark img { height: 46px; }
}

.site-header { border-bottom: 1px solid var(--line); }

/* Top contact bar — quick call / text */
.topbar { background: var(--ink); color: var(--paper); }
/* Both header rows share the page content's centred column (860px incl. the
   2rem gutter, matching `main`) so the wordmark sits directly above the page's
   left text edge instead of hugging the viewport. */
.topbar-inner {
  max-width: 860px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.45rem 2rem;
}
.topbar-info {
  margin: 0;
  font-size: 0.85rem;
  color: rgba(245, 240, 230, 0.82);
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.topbar-info .sep { opacity: 0.5; }
.topbar-actions { display: flex; gap: 0.5rem; flex: none; }
.topbar-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--paper);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  border: 1px solid rgba(245, 240, 230, 0.35);
  transition: background var(--dur-base) var(--ease-out);
}
.topbar-btn:hover, .topbar-btn:focus-visible { background: rgba(245, 240, 230, 0.14); color: var(--paper); }
.topbar-btn .num { color: rgba(245, 240, 230, 0.82); font-weight: 500; }

/* Main bar — wordmark, nav, shop */
.mainbar {
  max-width: 860px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 2rem;
  flex-wrap: wrap;
}
.wordmark {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.mainnav {
  display: flex;
  gap: 1.75rem;
  align-items: center;
  flex-wrap: wrap;
}
.mainnav a {
  text-decoration: none;
  color: var(--muted);
  font-weight: 500;
  font-size: 0.95rem;
}
.mainnav a:hover, .mainnav a:focus-visible { color: var(--ink); }

@media (max-width: 700px) {
  .topbar-inner { padding: 0; }
  .topbar-info { display: none; }
  .topbar-actions { width: 100%; gap: 0; }
  .topbar-btn {
    flex: 1 1 50%;
    justify-content: center;
    border: 0;
    border-radius: 0;
    padding: 0.8rem;
    font-size: 1rem;
    min-height: 46px;
  }
  .topbar-btn + .topbar-btn { border-left: 1px solid rgba(245, 240, 230, 0.25); }
  .topbar-btn .num { display: none; }
  .mainbar { flex-direction: column; gap: 0.85rem; padding: 1rem; text-align: center; }
  .mainnav { justify-content: center; gap: 1.25rem; }
}

main {
  max-width: 860px;
  margin: 0 auto;
  padding: 0 2rem;
}

.hero {
  padding: 4.5rem 0 3.5rem;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--ink);
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.4rem 1rem 0.4rem 0.75rem;
  margin: 0 0 1.5rem;
}

.eyebrow .bee { height: 16px; width: auto; display: block; }

h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.6rem, 6vw, 3.75rem);
  line-height: 1.06;
  letter-spacing: var(--tracking-display);
  margin: 0 0 1.25rem;
  max-width: 13ch;
  color: var(--ink);
}

.lede {
  font-size: 1.15rem;
  color: var(--muted);
  max-width: 46ch;
  margin: 0 0 2rem;
}

.button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--ink);
  color: var(--paper-raised);
  text-decoration: none;
  font-weight: 500;
  padding: 0.75rem 1.25rem;
  border-radius: 4px;
  border: none;
  font-size: 1rem;
  cursor: pointer;
}

.button:hover, .button:focus-visible { background: #23392e; }

.button.secondary {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
}

.button.secondary:hover, .button.secondary:focus-visible { background: rgba(46, 74, 60, 0.08); }

.button.shop {
  background: var(--cranberry);
}

.button.shop:hover, .button.shop:focus-visible { background: #742f2f; }

section.block {
  padding: 3rem 0;
  border-top: 1px solid var(--line);
}

section.block h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.6rem;
  margin: 0 0 0.75rem;
  color: var(--ink);
  position: relative;
  padding-bottom: 0.75rem;
}

section.block h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 44px;
  height: 3px;
  background: var(--gold);
  border-radius: 2px;
}

section.block .section-lede {
  color: var(--muted);
  margin: 0 0 1.75rem;
  max-width: 52ch;
}

.card-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

/* Fixed two-column grid: keeps an even 2x2 for four tiles instead of letting
   auto-fit strand a lone tile on its own row, and the wider columns stop the
   address and hours lines from wrapping. */
.card-grid.two-up { grid-template-columns: 1fr; }
@media (min-width: 640px) {
  .card-grid.two-up { grid-template-columns: repeat(2, 1fr); }
}

.card {
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 1.5rem;
  display: block;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

a.card:hover, a.card:focus-visible {
  transform: translateY(-3px);
  border-color: var(--gold);
  box-shadow: 0 10px 24px rgba(46, 74, 60, 0.12);
}

.card h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.15rem;
  margin: 0 0 0.5rem;
  color: var(--ink);
}

.card p {
  color: var(--muted);
  margin: 0;
  font-size: 0.95rem;
}

section.band {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  background: var(--ink);
  color: var(--paper);
  border-top: none;
}

section.band .band-inner {
  max-width: 860px;
  margin: 0 auto;
  padding: 3rem 2rem;
}

section.band h2 { color: var(--paper); }
section.band h2::after { background: var(--gold); }
section.band .section-lede { color: rgba(245, 240, 230, 0.75); }
section.band p { color: rgba(245, 240, 230, 0.9); }

.quotes {
  display: grid;
  gap: 2.25rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  /* Don't stretch to the row height, or the accent bar trails past shorter
     quotes sitting beside a long one. */
  align-items: start;
}

.quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.3rem;
  line-height: 1.4;
  color: var(--ink);
  position: relative;
  padding-left: 1.75rem;
  border-left: 3px solid var(--gold);
  margin: 0;
}

/* Accent colours cycle so any number of quotes stays varied. */
.quote:nth-child(3n + 2) { border-left-color: var(--cranberry); }
.quote:nth-child(3n) { border-left-color: var(--ink); }

.quote cite {
  display: block;
  margin-top: 0.6rem;
  font-size: 0.9rem;
  font-style: normal;
  font-weight: 500;
  color: var(--muted);
}

/* Stars carry the rating, so they take a legible palette colour rather than
   Antique Gold (decorative only, and fails contrast on cream). */
.quote cite .stars {
  color: var(--ink);
  letter-spacing: 0.05em;
}

/* Visible to screen readers only. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.empty-state {
  border: 1px dashed var(--line);
  border-radius: 6px;
  padding: 2.5rem 2rem;
  text-align: center;
  color: var(--muted);
}

.empty-state h3 {
  font-family: var(--font-display);
  color: var(--ink);
  margin: 0 0 0.5rem;
}

form.recommender {
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 2rem;
  display: grid;
  gap: 1.25rem;
}

label {
  display: block;
  font-weight: 500;
  font-size: 0.9rem;
  margin-bottom: 0.4rem;
}

input, select, textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--paper);
  color: var(--text);
}

input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
}

.site-footer {
  background: var(--ink);
  color: var(--paper);
  margin-top: 4rem;
}
.footer-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 3rem 2rem 2rem;
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 2rem;
}
.footer-brand img { height: 30px; width: auto; display: block; margin: 0 0 0.9rem; }
.footer-brand p { color: rgba(245, 240, 230, 0.78); font-size: 0.9rem; max-width: 34ch; margin: 0 0 0.75rem; }
.footer-social a { color: var(--paper); }
.footer-social span { color: rgba(245, 240, 230, 0.4); margin: 0 0.35rem; }
.footer-heading {
  font-family: var(--font-display);
  color: var(--paper);
  font-weight: 600;
  margin: 0 0 0.7rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid rgba(194, 169, 93, 0.5);
}
.footer-col p, .footer-hours { margin: 0.3rem 0; font-size: 0.9rem; color: rgba(245, 240, 230, 0.78); }
.site-footer a { color: rgba(245, 240, 230, 0.85); text-decoration: none; }
.site-footer a:hover, .site-footer a:focus-visible { color: var(--gold); text-decoration: underline; }
.footer-bottom { border-top: 1px solid rgba(245, 240, 230, 0.16); }
.footer-bottom p {
  max-width: 1100px;
  margin: 0 auto;
  padding: 1.2rem 2rem;
  font-size: 0.82rem;
  color: rgba(245, 240, 230, 0.6);
}
@media (max-width: 700px) {
  .footer-inner { grid-template-columns: 1fr 1fr; gap: 1.75rem; padding: 2.5rem 1.5rem 1.5rem; }
  .footer-brand { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: no-preference) {
  .button { transition: background 0.15s ease; }
}

/* Events */
.event-card .event-thumb {
  width: 100%;
  max-height: 200px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid var(--line);
  margin: 0 0 1rem;
  display: block;
}
.event-card .event-type {
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--gold);
  margin: 0 0 0.35rem;
}
.event-card .event-when {
  color: var(--ink);
  font-weight: 600;
  margin: 0 0 0.15rem;
}
.event-card .event-where {
  color: var(--muted);
  font-size: 0.9rem;
  margin: 0 0 0.75rem;
}
.event-card .event-book {
  color: var(--text);
  font-size: 0.9rem;
  margin: 0 0 0.5rem;
}
.event-buy {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 1.25rem;
}
/* Filled forest green: the background used to match --paper exactly, so these
   read as plain text on the page. Green rather than gold or cranberry — gold
   can't carry text at this size (4.2:1) and cranberry stays reserved for
   "Shop online". Kept small and pill-shaped so the larger Register button
   still reads as the primary action. */
.event-buy .buy-link {
  display: inline-flex;
  align-items: center;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--paper-raised);
  text-decoration: none;
  padding: 0.45rem 0.95rem;
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: var(--ink);
  transition: background var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}
.event-buy .buy-link:hover,
.event-buy .buy-link:focus-visible {
  background: #23392e;
  border-color: #23392e;
  color: var(--paper-raised);
}
.event-card .event-desc {
  color: var(--text);
  margin: 0 0 1rem;
}
.event-card .event-price {
  color: var(--ink);
  font-weight: 600;
  font-size: 0.9rem;
  margin: 0 0 0.5rem;
}
.event-card .event-spots {
  color: var(--muted);
  font-size: 0.85rem;
  margin: 0 0 0.5rem;
}
.event-card .event-full {
  color: var(--cranberry);
  font-weight: 600;
  border-top: 1px solid var(--line);
  margin-top: 1rem;
  padding-top: 1rem;
}

.rsvp-form {
  border-top: 1px solid var(--line);
  margin-top: 1rem;
  padding-top: 1rem;
  display: grid;
  gap: 0.75rem;
}
.rsvp-form .rsvp-heading {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink);
  margin: 0;
}
.rsvp-form label {
  margin-bottom: 0;
}
.rsvp-form .optional {
  color: var(--muted);
  font-weight: 400;
}
/* SMS reminder opt-in — a checkbox row, so it opts out of the stacked
   label layout the other fields use. */
.rsvp-form .rsvp-check {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  font-weight: 400;
  cursor: pointer;
}
.rsvp-form .rsvp-check input[type="checkbox"] {
  width: auto;
  margin: 0.2rem 0 0;
  flex: none;
  accent-color: var(--ink);
}
.rsvp-form .rsvp-check .check-hint {
  display: block;
  font-size: 0.82rem;
  color: var(--muted);
}
.rsvp-form button {
  justify-self: start;
}
/* Spam-trap field: off-screen rather than display:none, so bots that skip
   hidden inputs still see something to fill in. */
.rsvp-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.rsvp-status {
  margin: 0;
  font-size: 0.9rem;
}
.rsvp-status:empty {
  display: none;
}
.rsvp-status.is-success { color: var(--ink); }
.rsvp-status.is-error { color: var(--cranberry); }

/* ============================================================
   Homepage redesign — design-system aligned
   (hero with media, Visit band, quote slider, reveal motion)
   ============================================================ */

/* Scroll-in reveal — only hides when JS is present (html.js), so no-JS users
   always see content; respects reduced motion via the block below. */
.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--dur-slow) var(--ease-out),
              transform var(--dur-slow) var(--ease-out);
  will-change: opacity, transform;
}
.js .reveal.is-visible { opacity: 1; transform: none; }

/* Split hero: copy + media */
.home-hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: center;
  padding: 4rem 0 3.5rem;
}
.home-hero .hero-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}
@media (min-width: 900px) {
  .home-hero {
    /* Copy column gets the wider share so both hero CTAs fit on one row. */
    grid-template-columns: 1.2fr 0.8fr;
    gap: 3rem;
    padding: 5rem 0 4rem;
  }
}

/* Media frame — holds a real photo (.media-img) or a branded placeholder */
.media-img {
  width: 100%;
  height: auto;
  /* Reserve the shape before the file loads so the hero doesn't shift. */
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--line);
  display: block;
}
.media-placeholder {
  aspect-ratio: 4 / 5;
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 2rem;
  position: relative;
  overflow: hidden;
}
.media-placeholder::after {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid var(--gold);
  border-radius: 5px;
  opacity: 0.45;
  pointer-events: none;
}
.media-placeholder .bee-mark { width: 92px; height: auto; opacity: 0.7; margin-bottom: 1rem; }
.media-placeholder .ph-label {
  font-style: italic;
  color: var(--muted);
  font-size: 0.95rem;
  max-width: 26ch;
  margin: 0;
}
.media-placeholder.landscape { aspect-ratio: 16 / 10; }

/* Storefront photo — wide figure with a caption (Visit page) */
.storefront {
  /* Pull up against the hero's 3.5rem bottom padding — the photo reads as
     part of the intro rather than a separate band. */
  margin: -1.25rem 0 0.5rem;
}
.storefront-img {
  width: 100%;
  height: auto;
  /* Match the 3:2 crop so the caption doesn't jump when the file lands. */
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--line);
  display: block;
}
.storefront figcaption {
  margin-top: 0.75rem;
  font-size: 0.95rem;
  font-style: italic;
  color: var(--muted);
}

/* Visit band — full-bleed forest green, real NAP + hours (the one band) */
.visit-band {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  background: var(--ink);
  color: var(--paper);
}
.visit-band .visit-inner {
  max-width: 860px;
  margin: 0 auto;
  padding: 3.5rem 2rem;
}
.visit-band h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.6rem;
  color: var(--paper);
  margin: 0 0 0.75rem;
  padding-bottom: 0.75rem;
  position: relative;
}
.visit-band h2::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 44px; height: 3px;
  background: var(--gold);
  border-radius: 2px;
}
.visit-band .visit-lede {
  color: rgba(245, 240, 230, 0.8);
  max-width: 54ch;
  margin: 0 0 1.5rem;
}
.visit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1.75rem;
  margin-top: 1.75rem;
}
.visit-item { display: flex; gap: 0.75rem; align-items: flex-start; }
.visit-item .ico { color: var(--gold); flex: none; margin-top: 2px; }
.visit-item .label {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: rgba(245, 240, 230, 0.7);
  margin: 0 0 0.25rem;
}
.visit-item .val { color: var(--paper); line-height: 1.5; margin: 0; }
.visit-item .val a { color: var(--paper); text-decoration: underline; text-underline-offset: 2px; }
.visit-item .val a:hover { color: var(--gold); }

/* Quote slider — manual, non-autoplaying, keyboard accessible */
.quote-slider { position: relative; }
/* All slides stack in one grid cell; the active one fades in. This sizes the
   container to the tallest slide and lets each slide wrap normally — no
   transform/flex-width math, so text never clips. */
.quote-viewport { display: grid; }
.quote-slide {
  grid-area: 1 / 1;
  margin: 0;
  padding: 0.5rem 1rem;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-slow) var(--ease-out),
              visibility var(--dur-slow) var(--ease-out);
}
.quote-slide.is-active { opacity: 1; visibility: visible; }
.quote-slide .quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.35rem, 3.2vw, 1.9rem);
  line-height: 1.4;
  color: var(--ink);
  max-width: 40ch;
  margin: 0 auto;
  padding: 0;
  border: 0;
}
.quote-slide .quote cite {
  display: block;
  margin-top: 1rem;
  font-size: 0.95rem;
  font-style: normal;
  font-weight: 500;
  color: var(--muted);
}
.quote-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 1.5rem;
}
.quote-nav {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink);
  border-radius: 999px;
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.quote-nav:hover { background: var(--gold-tint, rgba(194, 169, 93, 0.15)); border-color: var(--gold); }
.quote-dots { display: flex; gap: 0.5rem; }
.quote-dot {
  width: 9px; height: 9px;
  border-radius: 999px;
  border: 0;
  background: var(--line);
  padding: 0;
  cursor: pointer;
  transition: background var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.quote-dot[aria-current="true"] { background: var(--gold); transform: scale(1.25); }

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .quote-slide { transition: none; }
}

/* ============================================================
   FAQ — native <details> accordions (no JS, keyboard-operable,
   and the answers stay in the DOM for crawlers)
   ============================================================ */
.faq-list { display: grid; gap: 0.65rem; }
.faq-item {
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
}
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 1.15rem;
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink);
  list-style: none;
  transition: background var(--dur-base) var(--ease-out);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { background: rgba(194, 169, 93, 0.1); }
.faq-item[open] summary { border-bottom: 1px solid var(--line); }
.faq-chevron {
  flex: none;
  color: var(--muted);
  transition: transform var(--dur-base) var(--ease-out);
}
.faq-item[open] .faq-chevron { transform: rotate(180deg); }
.faq-item > p {
  margin: 0;
  padding: 0.9rem 1.15rem 1.05rem;
  color: var(--text);
  max-width: 68ch;
}
.faq-item > p a {
  color: var(--ink);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .faq-chevron { transition: none; }
}

/* ============================================================
   Shop online
   ============================================================ */

/* Card titles are h2 here (they follow the page h1 directly), so cancel the
   section-heading underline they'd otherwise inherit. */
.shop-card h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.3rem;
  color: var(--ink);
  margin: 0 0 0.4rem;
  padding-bottom: 0;
}
.shop-card h2::after { display: none; }
.card-label {
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--gold);
  margin: 0 0 0.35rem;
}
.shop-card { display: flex; flex-direction: column; }
.shop-card .card-cta {
  margin-top: auto;
  padding-top: 0.85rem;
  color: var(--ink);
  font-weight: 600;
  font-size: 0.9rem;
}
.shop-note {
  color: var(--muted);
  font-size: 0.9rem;
  max-width: 60ch;
  margin: 1.5rem 0 0;
}

/* ============================================================
   Events — list tiles, category filters, detail page
   ============================================================ */

/* "Host your own" invitation above the calendar. Deliberately light — a gold
   accent rule rather than a second colour-blocked band. */
.host-banner {
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-left: 4px solid var(--gold);
  border-radius: 6px;
  padding: 1rem 1.25rem;
}
.host-banner p {
  margin: 0;
  max-width: 64ch;
  font-size: 0.95rem;
}
.host-banner a {
  color: var(--ink);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.host-banner a:hover, .host-banner a:focus-visible { color: #23392e; }

/* Category filter chips */
.event-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 1.75rem;
}
.chip {
  font-family: var(--font-body);
  font-size: 0.9rem;
  padding: 0.45rem 0.95rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--paper-raised);
  color: var(--muted);
  cursor: pointer;
  transition: background var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out);
}
.chip:hover, .chip:focus-visible { border-color: var(--gold); color: var(--ink); }
.chip.is-active { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* Full-width event tiles */
.event-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1rem; }
.event-item { margin: 0; }
.event-tile {
  display: flex;
  gap: 1.25rem;
  align-items: stretch;
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 1rem;
  text-decoration: none;
  color: inherit;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.event-tile:hover, .event-tile:focus-visible {
  transform: translateY(-2px);
  border-color: var(--gold);
  box-shadow: 0 10px 24px rgba(46, 74, 60, 0.12);
}
.event-tile-media { flex: 0 0 auto; }
.event-tile-media img,
.cover-ph {
  width: 96px;
  height: 140px;
  border-radius: 4px;
  border: 1px solid var(--line);
  display: block;
}
.event-tile-media img { object-fit: cover; }
.cover-ph { background: var(--paper); display: grid; place-items: center; }
.cover-ph img { width: 46px; height: auto; border: 0; opacity: 0.6; }
.event-tile-body { display: flex; flex-direction: column; min-width: 0; }
.event-tile .event-type {
  text-transform: uppercase; letter-spacing: var(--tracking-label); font-size: 0.72rem;
  font-weight: 600; color: var(--gold); margin: 0 0 0.25rem;
}
.event-tile h3 {
  font-family: var(--font-display); font-weight: 600; font-size: 1.2rem;
  color: var(--ink); margin: 0 0 0.35rem;
}
/* Tiles omit the address — nearly every event is in-store; the detail page
   carries the full location. */
.event-tile .event-when { color: var(--ink); font-weight: 600; font-size: 0.95rem; margin: 0 0 0.55rem; }
.event-tile .event-desc {
  color: var(--text); font-size: 0.92rem; margin: 0 0 0.6rem;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.event-tile .event-meta {
  margin: auto 0 0; display: flex; gap: 0.85rem; align-items: center;
  flex-wrap: wrap; font-size: 0.85rem; color: var(--muted);
}
.event-tile .event-cta { margin-left: auto; color: var(--ink); font-weight: 600; }
.event-price { color: var(--ink); font-weight: 600; }
.is-full { color: var(--cranberry); font-weight: 600; }
.event-empty-filter { color: var(--muted); }

@media (max-width: 520px) {
  .event-tile { gap: 0.9rem; padding: 0.85rem; }
  .event-tile-media img, .cover-ph { width: 72px; height: 104px; }
  .cover-ph img { width: 34px; }
  .event-tile h3 { font-size: 1.1rem; }
  .event-tile .event-cta { margin-left: 0; }
}

/* Event detail page */
.back-link { margin: 0 0 1.5rem; font-size: 0.9rem; }
.event-detail { display: grid; grid-template-columns: 200px 1fr; gap: 2rem; align-items: start; }
.event-detail-media img,
.cover-ph-lg { width: 200px; height: 300px; border-radius: 6px; border: 1px solid var(--line); display: block; }
.event-detail-media img { object-fit: cover; }
.cover-ph-lg { background: var(--paper); display: grid; place-items: center; }
.cover-ph-lg img { width: 88px; height: auto; border: 0; opacity: 0.6; }
.event-detail-body h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); margin: 0 0 0.75rem; }
.event-detail-body .event-when { color: var(--ink); font-weight: 600; margin: 0 0 0.15rem; }
.event-detail-body .event-where { color: var(--muted); margin: 0 0 1rem; }
.event-book { color: var(--muted); margin: 0 0 1rem; }
.event-detail-desc { margin: 0 0 1.25rem; }
.event-detail-meta { display: flex; gap: 1rem; flex-wrap: wrap; margin: 0 0 1.5rem; }
.event-note {
  background: var(--paper-raised); border: 1px solid var(--line);
  border-radius: 6px; padding: 1rem 1.25rem; color: var(--muted); margin: 1rem 0 0;
}
.event-note a { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
/* Finished event: state it up front, before the date and details. */
.event-past {
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-left: 4px solid var(--cranberry);
  border-radius: 6px;
  padding: 0.75rem 1rem;
  margin: 0 0 1rem;
  font-size: 0.95rem;
  color: var(--text);
}
.event-past a { color: var(--ink); font-weight: 600; margin-left: 0.4rem; }
@media (max-width: 640px) {
  .event-detail { grid-template-columns: 1fr; gap: 1.5rem; }
  .event-detail-media img, .cover-ph-lg { width: 160px; height: 240px; }
}