:root {
  --color-bg: #fffaf3;
  --color-bg-alt: #fbf1e2;
  --color-text: #2b2622;
  --color-text-muted: #6b6259;
  /* Darkened from #c98a2c / #a06f22 so text on these passes WCAG AA (4.5:1).
     The old accent gave white button text only 2.93:1. Now 4.71:1, and
     --color-accent-dark reaches 6.23:1 as a link colour on the cream bg. */
  --color-accent: #9a6a20;
  --color-accent-dark: #7f5618;
  --color-accent-soft: #f3ddb0;
  --color-border: #ecdfc7;
  --max-width: 1120px;
  --radius: 14px;
  --shadow: 0 10px 30px rgba(43, 38, 34, 0.08);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

/* Keyboard focus was previously invisible on buttons and links. :focus-visible
   only fires for keyboard/AT navigation, so mouse users see no change. */
:focus-visible {
  outline: 3px solid var(--color-accent-dark);
  outline-offset: 2px;
  border-radius: 2px;
}

@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;
    scroll-behavior: auto !important;
  }
}

body {
  margin: 0;
  font-family: "Georgia", "Iowan Old Style", serif;
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.6;
}

h1, h2, h3, h4 {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-weight: 600;
  line-height: 1.25;
  margin: 0 0 0.6em;
}

h1 { font-size: clamp(2rem, 4vw, 3rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); text-align: center; }
p { margin: 0 0 1em; }

a {
  color: var(--color-accent-dark);
}

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* height:auto is mandatory alongside the width/height attributes in the markup.
   Those attributes are presentational hints that set the CSS height property, so
   without this the image keeps its full intrinsic height while max-width shrinks
   the width — stretching it vertically. */
img { max-width: 100%; height: auto; display: block; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  background: var(--color-accent);
  color: #fff;
  border: none;
  padding: 0.75em 1.6em;
  border-radius: 999px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}

.btn:hover {
  background: var(--color-accent-dark);
  transform: translateY(-1px);
}

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

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 250, 243, 0.92);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--color-border);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
}

.site-logo img {
  height: 44px;
  width: auto;
}

.site-nav ul {
  list-style: none;
  display: flex;
  gap: 1.75rem;
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 0.95rem;
}

.site-nav a {
  color: var(--color-text);
  text-decoration: none;
  font-weight: 500;
}

.site-nav a:hover {
  color: var(--color-accent-dark);
}

.nav-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 1.6rem;
  cursor: pointer;
  color: var(--color-text);
}

@media (max-width: 820px) {
  .nav-toggle { display: block; }

  .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
  }

  .site-nav.open { display: block; }

  .site-nav ul {
    flex-direction: column;
    gap: 0;
    padding: 0.5rem 1.5rem 1rem;
  }

  .site-nav li { padding: 0.6rem 0; border-top: 1px solid var(--color-border); }
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  padding: 5rem 0 4rem;
  background: linear-gradient(180deg, var(--color-bg-alt), var(--color-bg));
  text-align: center;
  overflow: hidden;
}

.hero-image {
  max-width: 640px;
  margin: 2.5rem auto 0;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.hero .lead {
  max-width: 640px;
  margin: 0 auto;
  color: var(--color-text-muted);
  font-size: 1.1rem;
}

/* ---------- Generic section ---------- */

section {
  padding: 4rem 0;
}

section.alt {
  background: var(--color-bg-alt);
}

.section-intro {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 2.5rem;
  color: var(--color-text-muted);
}

/* ---------- Video section ---------- */

.video-wrap {
  max-width: 800px;
  margin: 0 auto;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  aspect-ratio: 16 / 9;
}

.video-wrap iframe {
  width: 100%;
  height: 100%;
  border: none;
}

/* ---------- Practices ---------- */

.practices-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
  max-width: var(--max-width);
  margin: 0 auto;
}

.practice-card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.75rem;
  text-align: center;
}

.practice-card .practice-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  background: var(--color-accent-soft);
  color: var(--color-accent-dark);
  font-weight: 700;
  margin-bottom: 0.9rem;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

.practice-card h3 {
  font-size: 1.1rem;
  margin-bottom: 0.4em;
}

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

/* ---------- Events carousel ---------- */

.carousel {
  /* Narrowed from 720px back when the slides were uncropped square posters, which
     at that width ran to half a screen tall. The slides are all wide banners now,
     so this could go back up — it is left narrow because the captions carry a lot
     of copy and a shorter measure is easier to read. */
  max-width: 560px;
  margin: 0 auto;
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.carousel-track {
  display: flex;
  transition: transform 0.4s ease;
}

.carousel-slide {
  min-width: 100%;
}

.carousel-slide figure {
  margin: 0;
}

.carousel-slide img {
  width: 100%;
  /* No forced aspect-ratio and no object-fit: every image renders at its own
     shape. Slide artwork comes from whatever the event's own listing uses, so the
     ratios genuinely differ — currently between 1.78:1 and 4.35:1 — and any fixed
     ratio would crop somebody's title or date out of frame. Because the slides
     share a flex row, the carousel takes the height of the tallest and holds it,
     so a shorter slide leaves space rather than making the section jump as it
     advances. */
  height: auto;
}

.carousel-caption {
  background: var(--color-bg);
  border-top: 1px solid var(--color-border);
  padding: 1.1rem 1.25rem;
  text-align: left;
}

.carousel-caption h3 {
  font-size: 1.05rem;
  margin: 0 0 0.3rem;
}

.carousel-caption p {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.92rem;
}

.carousel-caption .event-when {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-weight: 600;
  color: var(--color-accent-dark);
  font-size: 0.88rem;
  margin-bottom: 0.2rem;
}

/* Captions held a single line when the rule above was written, so p had no margin
   at all. Event copy now runs to several paragraphs, which without this collapses
   into one unbroken block. */
.carousel-caption p + p,
.carousel-caption h4,
.carousel-caption ul {
  margin-top: 0.6rem;
}

.carousel-caption h4 {
  font-size: 0.95rem;
  margin-bottom: 0.25rem;
}

/* The leading emoji in the markup are the list markers, so the default discs are
   removed rather than sitting alongside them. */
.event-benefits {
  list-style: none;
  padding: 0;
  margin-bottom: 0;
  color: var(--color-text-muted);
  font-size: 0.92rem;
}

.event-benefits li + li {
  margin-top: 0.25rem;
}

.carousel-controls {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  pointer-events: none;
}

.carousel-btn {
  pointer-events: auto;
  background: rgba(43, 38, 34, 0.55);
  color: #fff;
  border: none;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  font-size: 1.1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.carousel-dots {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1rem;
}

.carousel-dots button {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  border: none;
  background: var(--color-border);
  cursor: pointer;
}

.carousel-dots button.active {
  background: var(--color-accent);
}

/* ---------- Scheduling CTA ---------- */

.cta {
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
}

.cta .lead {
  color: var(--color-text-muted);
}

/* ---------- FAQ ---------- */

.faq {
  max-width: 760px;
  margin: 0 auto;
}

.faq-item {
  border-bottom: 1px solid var(--color-border);
}

.faq-question {
  width: 100%;
  background: none;
  border: none;
  text-align: left;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-weight: 600;
  font-size: 1.05rem;
  padding: 1.1rem 0;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  color: var(--color-text);
}

.faq-question .icon {
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.faq-item.open .faq-question .icon {
  transform: rotate(180deg);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease;
  color: var(--color-text-muted);
}

.faq-answer p {
  padding-bottom: 1.1rem;
  margin: 0;
}

/* ---------- Contact ---------- */

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 2.5rem;
  max-width: var(--max-width);
  margin: 0 auto;
  align-items: start;
}

@media (max-width: 820px) {
  .contact-grid { grid-template-columns: 1fr; }
}

.contact-info p {
  margin-bottom: 0.5rem;
}

.contact-info a {
  color: var(--color-text);
  text-decoration: none;
  font-weight: 600;
}

form .field {
  margin-bottom: 1.1rem;
}

form label {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 0.35rem;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

form input,
form textarea {
  width: 100%;
  padding: 0.7em 0.9em;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-family: inherit;
  font-size: 1rem;
  background: #fff;
}

form input:focus,
form textarea:focus {
  outline: 2px solid var(--color-accent-soft);
  border-color: var(--color-accent);
}

.honeypot-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-status {
  margin-top: 0.8rem;
  font-size: 0.95rem;
}

.form-status.success { color: #2f7a3d; }
.form-status.error { color: #b3392c; }

/* ---------- Location page ---------- */

.location-day {
  max-width: 760px;
  margin: 0 auto 1.75rem;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-accent);
  border-radius: var(--radius);
  padding: 2rem 2.25rem;
  text-align: center;
  box-shadow: var(--shadow);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.location-day:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 36px rgba(43, 38, 34, 0.12);
}

.day-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--color-accent-soft);
  color: var(--color-accent-dark);
  margin-bottom: 1rem;
}

.location-day h3 {
  margin-bottom: 0.6rem;
}

.location-day p {
  color: var(--color-text-muted);
  margin-bottom: 1rem;
}

.badge {
  display: inline-block;
  background: var(--color-accent-soft);
  color: var(--color-accent-dark);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 0.35em 0.95em;
  border-radius: 999px;
}

.location-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: 460px;
  margin: 1.5rem auto 0;
  text-align: left;
}

.location-entry {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 0.9rem 1.1rem;
  border-radius: 10px;
  background: var(--color-bg-alt);
}

.location-entry .pin-icon {
  flex-shrink: 0;
  margin-top: 0.15rem;
  color: var(--color-accent);
}

.location-entry h4 {
  margin: 0 0 0.2rem;
  font-size: 1rem;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

.location-entry p {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.92rem;
}

.location-entry .contact-line {
  margin-top: 0.4rem;
  color: var(--color-accent-dark);
  font-weight: 600;
  font-size: 0.85rem;
}

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

.site-footer {
  background: #26211c;
  color: #e9e2d6;
  padding: 3.5rem 0 2rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 2.5rem;
  margin-bottom: 2.5rem;
}

@media (max-width: 820px) {
  .footer-grid { grid-template-columns: 1fr; }
}

.site-footer .site-logo img {
  height: 40px;
  margin-bottom: 1rem;
  filter: brightness(0) invert(1);
}

.site-footer p {
  color: #c9bfae;
}

.newsletter-form {
  display: flex;
  gap: 0.6rem;
  max-width: 380px;
}

@media (max-width: 480px) {
  .newsletter-form { flex-direction: column; }
}

/* The signup form currently lives in the light #newsletter section, not the
   footer, so it matches the other inputs on the page. The dark treatment is
   kept but scoped to the footer, for if the form is ever moved back there. */
.newsletter-form input {
  flex: 1;
  padding: 0.7em 0.9em;
  border-radius: 8px;
  border: 1px solid var(--color-border);
  background: #fff;
  color: var(--color-text);
}

.site-footer .newsletter-form input {
  border-color: #4a4038;
  background: #33291f;
  color: #fff;
}

.social-links {
  display: flex;
  gap: 1rem;
  margin-top: 1.25rem;
}

.social-links a {
  color: #e9e2d6;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  border: 1px solid #4a4038;
  display: flex;
  align-items: center;
  justify-content: center;
}

.footer-bottom {
  border-top: 1px solid #3a322a;
  padding-top: 1.5rem;
  text-align: center;
  font-size: 0.85rem;
  color: #a99d8a;
}