/* Ancestral Encounters — shared stylesheet
   Edit the colors below to reskin the whole site at once. */

:root {
  /* Palette drawn from the Sonoran desert + Sea of Cortez photos:
     twilight indigo sky, burnt-orange sunset, golden amber glow,
     saguaro sage, and warm desert sand. */
  --forest: #233150;      /* twilight indigo — dark headers, footer, banners */
  --forest-soft: #324569; /* lighter twilight */
  --terracotta: #a85e3c;  /* muted, gallery-grade clay — accents, buttons */
  --gold: #e3a13e;        /* golden amber glow — highlights */
  --jade: #2e6e57;        /* toad-medicine green — dark sections, marks */
  --jade-deep: #224f3f;   /* deep jade */
  --turquoise: #2f8d86;   /* Sea of Cortez — Comcaac coastal accent */
  --sage: #7e8c5c;        /* saguaro green — secondary accent */
  --sand: #f6ede0;        /* warm sand — page background */
  --cream: #fdf7ee;       /* lightest sand — cards */
  --ink: #2b2620;         /* body text */
  --muted: #756a5b;       /* secondary text */
  --line: #e7d9c6;

  /* --font-display: elegant, refined display caps for the hero + headings.
     Swap this one line (and the Google Fonts <link>) to change it. */
  --font-display: "Marcellus", "Cormorant Garamond", serif;
  --font-head: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-quote: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-body: "Mulish", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --maxw: 1080px;
  --radius: 14px;
  --shadow: 0 8px 30px rgba(47, 74, 60, 0.10);
}

* { box-sizing: border-box; }

/* clip (not hidden) so the off-canvas drawer can't create a horizontal
   scrollbar or a sliver of background on the side, while keeping the
   sticky header working (clip does not create a scroll container) */
html, body { overflow-x: clip; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;            /* Abel is single-weight; it reads light + condensed */
  color: var(--ink);
  background: var(--sand);
  line-height: 1.7;
  letter-spacing: 0.012em;
  font-size: 18px;
}

h1, h2, h3 {
  font-family: var(--font-head);
  font-weight: 600;
  line-height: 1.15;
  color: var(--forest);
  margin: 0 0 0.4em;
  overflow-wrap: break-word;
}

h1 { font-size: clamp(2.4rem, 6vw, 4rem); }
h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); }
h3 { font-size: 1.4rem; }

/* Tribal display face on the big headings (h3/subheads stay serif). */
h1, h2 {
  font-family: var(--font-display);
  font-weight: 400;        /* Marcellus is single-weight */
  line-height: 1.16;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

p { margin: 0 0 1.1em; }

a { color: var(--terracotta); text-decoration: none; }
a:hover { text-decoration: underline; }

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

.container {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- Header / nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 90;
  background: rgba(251, 247, 240, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
  transition: background .35s ease, border-color .35s ease, backdrop-filter .35s ease;
}

/* Home page: let the hero image run to the very top behind a transparent
   header; it solidifies to cream once the user scrolls (see js/main.js). */
body.home .site-header {
  position: fixed;
  left: 0; right: 0;
  background: transparent;
  border-bottom-color: transparent;
  backdrop-filter: none;
}
body.home .site-header.scrolled {
  background: rgba(251, 247, 240, 0.92);
  border-bottom-color: var(--line);
  backdrop-filter: blur(8px);
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  max-width: var(--maxw);
  margin: 0 auto;
}
.brand {
  font-family: var(--font-body);
  font-size: clamp(0.78rem, 1.5vw, 1rem);
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--forest);
  display: flex;
  align-items: center;
  gap: 15px;
}
.brand:hover { text-decoration: none; }
.brand .mark {
  width: 46px; height: 46px;
  flex-shrink: 0;
  object-fit: contain;
}
/* Off-canvas sidebar drawer (opened by the three-bar toggle) */
.nav-links {
  position: fixed;
  top: 0; right: 0;
  height: 100vh;
  width: min(330px, 82vw);
  margin: 0;
  padding: 96px 44px 44px;
  list-style: none;
  background: var(--cream);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 26px;
  transform: translateX(105%);
  transition: transform .4s cubic-bezier(.5,.05,.2,1);
  z-index: 95;
  box-shadow: -14px 0 44px rgba(20,15,12,0.20);
  /* Let the panel scroll when the expanded sub-menu is taller than the screen */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.nav-links.open { transform: translateX(0); }
.nav-links a {
  color: var(--ink);
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: 0.01em;
}
.nav-links a:hover { color: var(--terracotta); text-decoration: none; }
.nav-links .btn { margin-top: 8px; }

/* Grouped nav item with a collapsible sub-menu (Teachings & Journeys).
   Collapsed by default; opens on hover or when toggled by click/tap. */
.nav-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.nav-group-title {
  font-family: var(--font-body);
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--ink);
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 11px;
}
.nav-group-title:hover { color: var(--terracotta); }
/* chevron that points down when collapsed, flips up when open */
.nav-group-title::after {
  content: "";
  width: 7px; height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  position: relative; top: -2px;
  opacity: 0.6;
  transition: transform .3s ease, top .3s ease;
}
.nav-group:hover .nav-group-title::after,
.nav-group.open .nav-group-title::after {
  transform: rotate(-135deg);
  top: 1px;
}
.nav-sub {
  list-style: none;
  margin: 0;
  padding: 0 0 0 16px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  border-left: 1px solid var(--line);
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height .35s ease, opacity .3s ease, margin .35s ease;
}
.nav-group:hover .nav-sub,
.nav-group.open .nav-sub {
  max-height: 640px;
  opacity: 1;
  margin-top: 18px;
}
.nav-sub a {
  font-size: 1.02rem;
  font-weight: 400;
  color: var(--muted);
}
.nav-sub a:hover { color: var(--terracotta); }
.nav-sub a { line-height: 1.25; }
.nav-sub-note {
  display: block;
  font-size: 0.78rem;
  font-style: italic;
  color: var(--jade);
  margin-top: 1px;
  line-height: 1.3;
}

/* Backdrop behind the drawer (created in js/main.js) */
.nav-backdrop {
  position: fixed; inset: 0;
  background: rgba(20,15,12,0.45);
  opacity: 0; visibility: hidden;
  transition: opacity .35s ease, visibility .35s ease;
  z-index: 80;
}
.nav-backdrop.open { opacity: 1; visibility: visible; }

/* Three-bar toggle (always visible) */
.nav-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 30px; height: 30px;
  padding: 0;
  background: none; border: none;
  cursor: pointer;
  position: relative;
  z-index: 80;            /* stay above the drawer to remain clickable as ✕ */
}
.nav-toggle span {
  display: block;
  width: 26px; height: 2px;
  border-radius: 2px;
  background: var(--forest);
  transition: transform .3s ease, opacity .25s ease;
}
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Language toggle (EN / ES) ---------- */
.lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-right: 18px;
  padding: 5px 11px;
  background: none;
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1;
  color: var(--muted);
  transition: border-color .25s ease, color .25s ease;
}
.lang-toggle:hover { border-color: var(--terracotta); }
.lang-toggle .sep { opacity: 0.5; font-weight: 400; }
.lang-toggle span[data-lang] { opacity: 0.45; transition: opacity .2s ease, color .2s ease; }
.lang-toggle span[data-lang].active { opacity: 1; color: var(--forest); }
body.home .site-header .lang-toggle { color: var(--forest); border-color: rgba(35, 49, 80, 0.28); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  background: var(--terracotta);
  color: #fff;
  padding: 17px 38px;
  border-radius: 14px;
  font-weight: 400;
  font-size: 0.8rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background .25s ease, border-color .25s ease, color .25s ease,
              transform .2s ease, box-shadow .25s ease;
}
.btn:hover {
  background: #ecdfc9;          /* off-white / tan on hover */
  border-color: #ecdfc9;
  color: var(--forest);
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(40,28,20,0.18);
}
.btn-outline {
  background: transparent;
  color: var(--forest);
  border: 1.5px solid rgba(43,38,32,0.28);
}
.btn-outline:hover {
  background: #ecdfc9;          /* off-white / tan on hover */
  border-color: #ecdfc9;
  color: var(--forest);
  transform: translateY(-2px);
  box-shadow: none;
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: clamp(90px, 14vw, 160px) 0;
  text-align: center;
  overflow: hidden;
  /* Cinematic multi-tone wash: ocean-twilight at top, warm sun glow through
     the middle, deep shadow at the base so text + buttons read crisp. */
  background:
    linear-gradient(180deg,
      rgba(253,247,238,0.88) 0%,
      rgba(253,247,238,0.38) 12%,
      rgba(253,247,238,0.10) 34%,
      rgba(253,247,238,0.04) 60%,
      rgba(253,247,238,0.20) 100%),
    url("../images/hero.jpg") center/cover no-repeat,
    linear-gradient(135deg, var(--forest), var(--forest-soft));
  color: var(--forest);
}
/* Hero content reveals (pops up) after the welcome splash fades */
html.js .hero-content { opacity: 0; transform: translateY(24px); }
body.intro-done .hero-content {
  opacity: 1; transform: none;
  transition: opacity 1.1s cubic-bezier(.2,.7,.2,1) .25s,
              transform 1.1s cubic-bezier(.2,.7,.2,1) .25s;
}
/* small white toad beneath the hero headline (AWKN-style) */
.hero-toad {
  width: 52px; height: 65px;
  margin: 28px auto 0;
  background: url("../images/white-toad.png") center / contain no-repeat;
}

/* Welcome splash — home only, shown once per session (js-controlled) */
#preloader { display: none; }
html.js #preloader {
  display: flex;
  position: fixed; inset: 0;
  z-index: 200;
  flex-direction: column;
  align-items: center; justify-content: center;
  background: #161f38;
  transition: opacity .85s ease, visibility .85s ease;
}
body.intro-done #preloader { opacity: 0; visibility: hidden; }
.preloader-inner {
  display: flex; flex-direction: column; align-items: center;
  animation: splashIn 1s cubic-bezier(.2,.7,.2,1) both;
}
.preloader-toad {
  width: 92px; height: 115px;
  background: url("../images/white-toad.png") center / contain no-repeat;
}
.preloader-word {
  margin: 24px 0 0;
  color: var(--cream);
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.32em;
  font-size: 1.1rem;
}
@keyframes splashIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
/* gold accent rule under centered eyebrows */
/* Geometric diamond divider (echoes the Otac logo + Comcaac geometry):
   gold flanking lines with a turquoise Sea-of-Cortez diamond. */
.section-head .eyebrow::after {
  content: "";
  display: block;
  width: 74px; height: 12px;
  margin: 18px auto 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='74' height='12' viewBox='0 0 74 12'%3E%3Cline x1='0' y1='6' x2='28' y2='6' stroke='%23e3a13e' stroke-width='1.5'/%3E%3Cline x1='46' y1='6' x2='74' y2='6' stroke='%23e3a13e' stroke-width='1.5'/%3E%3Crect x='32' y='3' width='6' height='6' fill='none' stroke='%232f8d86' stroke-width='1.5' transform='rotate(45 35 6)'/%3E%3C/svg%3E") no-repeat center / contain;
}
/* Same diamond divider under the left-aligned eyebrows in split sections */
.split .eyebrow::after {
  content: "";
  display: block;
  width: 74px; height: 12px;
  margin: 14px 0 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='74' height='12' viewBox='0 0 74 12'%3E%3Cline x1='0' y1='6' x2='28' y2='6' stroke='%23e3a13e' stroke-width='1.5'/%3E%3Cline x1='46' y1='6' x2='74' y2='6' stroke='%23e3a13e' stroke-width='1.5'/%3E%3Crect x='32' y='3' width='6' height='6' fill='none' stroke='%232f8d86' stroke-width='1.5' transform='rotate(45 35 6)'/%3E%3C/svg%3E") no-repeat left center / contain;
}
/* subtle scroll cue */
.scroll-cue {
  position: absolute;
  left: 50%; bottom: 26px;
  transform: translateX(-50%);
  animation: cueBounce 1.9s ease-in-out infinite;
}
.scroll-cue span {
  display: block;
  width: 20px; height: 20px;
  border-right: 2px solid rgba(35,49,80,0.7);
  border-bottom: 2px solid rgba(35,49,80,0.7);
  transform: rotate(45deg);
}
@keyframes cueBounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(8px); }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-cue { animation: none; }
  html.js .hero-content { opacity: 1; transform: none; }
}
.hero h1 { color: #fff; max-width: 14ch; margin-inline: auto; }

/* AWKN-style centered hero: small kicker, logo centerpiece, small tagline */
.hero-logo {
  width: clamp(210px, 30vw, 340px);
  height: auto;
  display: block;
  margin: 0 auto;
  filter: drop-shadow(0 4px 18px rgba(253,247,238,0.6));
}
/* Centered brand lockup: logo + wordmark, large */
.hero-lockup {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 2.4vw, 34px);
  flex-wrap: wrap;
}
.hero-lockup .hero-logo {
  width: clamp(82px, 12vw, 150px);
}
.hero .hero-wordmark {
  font-family: var(--font-body);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: clamp(1.5rem, 4.2vw, 2.7rem);
  line-height: 1.08;
  color: var(--forest);
  margin: 26px auto 0;
  text-shadow: 0 1px 16px rgba(253,247,238,0.7);
}
.hero-content { width: 100%; }
.hero .hero-kicker, .hero .hero-tagline {
  font-family: var(--font-body);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: clamp(0.46rem, 2.5vw, 0.8rem);
  color: var(--forest);
  max-width: none;
  white-space: nowrap;
  line-height: 1.5;
  text-shadow: 0 1px 16px rgba(253,247,238,0.7);
}
.hero-kicker { margin: 0 0 30px; }
.hero-tagline { margin: 14px 0 0; }
.hero p {
  font-size: 1.25rem;
  max-width: 56ch;
  margin: 0 auto 1.8em;
  color: rgba(255,255,255,0.92);
}
.hero .btn-outline { color: #fff; border-color: rgba(255,255,255,0.5); }
.hero .btn-outline:hover { background: rgba(255,255,255,0.14); border-color: #fff; color: #fff; }
.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--gold);
  margin-bottom: 1em;
}

/* ---------- Sections ---------- */
.section { padding: clamp(48px, 6.5vw, 78px) 0; }
/* short, centered text blocks (e.g. the intro) need far less breathing room
   beneath them so they don't leave a big void before the next section */
.section-tight { padding-bottom: clamp(20px, 3vw, 36px); }
.section.alt { background: var(--cream); }
.section-head { text-align: center; max-width: 60ch; margin: 0 auto 3rem; }
.section-head .eyebrow { color: var(--jade); }
.section-head p { color: var(--muted); }

/* ---------- Card grid ---------- */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 28px;
}
.card {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 32px 28px;
  box-shadow: var(--shadow);
  transition: transform 0.2s ease;
}
.section.alt .card { background: var(--sand); }
.card:hover { transform: translateY(-4px); }
.card .icon {
  width: 24px; height: 24px;
  margin-bottom: 20px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Crect x='6' y='6' width='12' height='12' fill='none' stroke='%232f8d86' stroke-width='1.5' transform='rotate(45 12 12)'/%3E%3C/svg%3E") no-repeat left center / contain;
}
/* belief-card icons (story page) — keep the green, swap the shape */
.card .icon.icon-toad { width: 38px; height: 30px; background-image: url("../images/icon-toad.png"); }
.card .icon.icon-cactus { width: 30px; height: 30px; background-image: url("../images/icon-cactus.svg"); }
.card .icon.icon-bridge { width: 30px; height: 30px; background-image: url("../images/icon-bridge.svg"); }
.card h3 { color: var(--forest); }
.card p { color: var(--muted); margin-bottom: 0; font-size: 0.98rem; }
.card .price { color: var(--terracotta); font-weight: 600; margin-top: 14px; display: block; }

/* ---------- Split (text + image) ---------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
.split img {
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* Offerings — stacked alternating splits */
.offerings .split { margin-top: clamp(56px, 8vw, 96px); }
.offer-meta { font-size: 0.92rem; color: var(--muted); margin: 1.3em 0 0; }
.offer-meta strong { color: var(--forest); font-weight: 600; }
.offer-cost {
  font-family: var(--font-display);
  color: var(--terracotta);
  font-size: 1.2rem;
  margin: 0.5em 0 1.5em;
}
.split .placeholder {
  aspect-ratio: 4/3;
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--forest-soft), var(--gold));
  box-shadow: var(--shadow);
}

/* leaders / founders (story page) */
.team {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 6vw, 64px);
  max-width: 860px;
  margin: 48px auto 0;
}
.team-member { text-align: center; }
.team-photo {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  margin: 0 auto 22px;
  object-fit: cover;
  box-shadow: var(--shadow);
}
.team-photo.placeholder {
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--forest-soft), var(--gold));
  color: var(--cream);
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.team-member h3 { color: var(--forest); margin: 0 0 4px; font-size: 1.4rem; }
.team-role { color: var(--gold); font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; margin: 0 0 14px; }
.team-member p { color: var(--muted); }
/* Short, uniform teaser on each leader card; the full bio lives on their page */
.team-blurb { font-size: 0.92rem; line-height: 1.55; }
.team-link {
  display: inline-block;
  margin-top: 4px;
  color: var(--terracotta);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.team-link::after { content: " \2192"; }
@media (max-width: 700px) {
  .team { grid-template-columns: 1fr; gap: 44px; }
}

/* long-form bio (leader detail pages) */
.prose { max-width: 70ch; margin: 0 auto; }
.bio-photo {
  display: block;
  width: 100%;
  max-width: 360px;
  height: auto;
  margin: 0 auto 18px;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
/* fixed "back" button on leader bio pages */
.back-fab {
  position: fixed;
  top: 92px;
  left: 22px;
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border-radius: 999px;
  background: var(--cream);
  border: 1.5px solid var(--line);
  color: var(--terracotta);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  box-shadow: var(--shadow);
  transition: transform 0.15s ease, background 0.15s ease;
}
.back-fab:hover { background: #fff; transform: translateX(-2px); text-decoration: none; }
.back-fab-arrow { font-size: 1.05rem; line-height: 1; }
@media (max-width: 600px) {
  .back-fab { top: 80px; left: 12px; padding: 8px 14px; font-size: 0.76rem; }
}

.page-head .hero-creds {
  color: var(--gold);
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
  max-width: 72ch;
  line-height: 1.8;
  margin: 16px auto 0;
}
.prose .lead { font-size: 1.2rem; color: var(--ink); line-height: 1.7; }
.prose h2 {
  font-family: var(--font-display);
  color: var(--forest);
  font-size: 1.7rem;
  margin: 1.7em 0 0.5em;
}
.prose p { color: var(--ink); margin: 0 0 1.15em; line-height: 1.75; }

/* photo gallery (Infinity School) — horizontal scroll carousel.
   Uniform height + auto width = a film strip that fits mixed orientations. */
.gallery {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-bottom: 16px;
  -webkit-overflow-scrolling: touch;
  scrollbar-color: var(--terracotta) var(--line);
}
.gallery img {
  height: clamp(280px, 40vw, 430px);
  width: auto;
  flex: 0 0 auto;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  scroll-snap-align: start;
}
.gallery::-webkit-scrollbar { height: 8px; }
.gallery::-webkit-scrollbar-track { background: var(--line); border-radius: 10px; }
.gallery::-webkit-scrollbar-thumb { background: var(--terracotta); border-radius: 10px; }

/* full gallery page — 2 rows of 3, scrolling left/right */
.photo-grid {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(2, clamp(220px, 26vw, 320px));
  grid-auto-columns: calc((100% - 2 * 16px) / 3);
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-bottom: 16px;
  -webkit-overflow-scrolling: touch;
  scrollbar-color: var(--terracotta) var(--line);
}
.photo-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  scroll-snap-align: start;
}
.photo-grid::-webkit-scrollbar { height: 8px; }
.photo-grid::-webkit-scrollbar-track { background: var(--line); border-radius: 10px; }
.photo-grid::-webkit-scrollbar-thumb { background: var(--terracotta); border-radius: 10px; }
@media (max-width: 780px) {
  .photo-grid {
    grid-template-rows: repeat(2, clamp(180px, 38vw, 240px));
    grid-auto-columns: calc((100% - 16px) / 1.6);
  }
}

/* small green note under the curriculum heading */
.section-head .curriculum-meetups {
  color: var(--jade);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.82rem;
  font-weight: 600;
  margin: 0 0 1.2em;
}

/* 12-month curriculum — 4 across, 3 rows */
.curriculum {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px 32px;
}
.curriculum li {
  padding: 20px 0 0;
  border-top: 1px solid var(--line);
}
.curriculum .month {
  display: block;
  font-family: var(--font-display);
  font-size: 1.4rem;
  line-height: 1;
  color: var(--terracotta);
  margin-bottom: 12px;
}
.curriculum h3 {
  color: var(--forest);
  font-size: 1.05rem;
  margin: 0 0 6px;
}
.curriculum p {
  color: var(--muted);
  font-size: 0.92rem;
  margin: 0;
}
@media (max-width: 860px) {
  .curriculum { grid-template-columns: repeat(2, 1fr); gap: 26px 28px; }
}
@media (max-width: 480px) {
  .curriculum { grid-template-columns: 1fr; gap: 0; }
}

/* ---------- Quote / banner ---------- */
.banner {
  background: linear-gradient(120deg, var(--terracotta), var(--jade));
  color: var(--cream);
  text-align: center;
  padding: clamp(60px, 9vw, 90px) 0;
}
.banner h2 { color: #fff; }
.banner blockquote {
  font-family: var(--font-quote);
  font-size: clamp(1.7rem, 3.8vw, 2.4rem);
  font-style: italic;
  max-width: 22ch;
  margin: 0 auto;
  color: #fff;
}
.banner cite { display: block; margin-top: 1rem; font-size: 1rem; color: var(--gold); font-style: normal; }

/* ---------- Forms ---------- */
.form { max-width: 620px; margin: 0 auto; }
.form label { display: block; font-weight: 600; margin: 0 0 6px; font-size: 0.95rem; }
.form .field { margin-bottom: 20px; }
.form input, .form textarea, .form select {
  width: 100%;
  padding: 13px 15px;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  font-family: inherit;
  font-size: 1rem;
  background: var(--cream);
  color: var(--ink);
}
.form input:focus, .form textarea:focus, .form select:focus {
  outline: none;
  border-color: var(--terracotta);
}
.form textarea { min-height: 140px; resize: vertical; }
.form-note { font-size: 0.9rem; color: var(--muted); }

/* contact page — info left, form right */
.contact-layout {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(40px, 6vw, 72px);
  align-items: start;
}
.contact-layout .form { margin: 0; max-width: none; }
.contact-info .eyebrow { color: var(--terracotta); }
.contact-info h2 { margin: 8px 0 0; }

/* contact methods (phone / whatsapp / email) */
.contact-methods {
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 24px;
}
.contact-methods h3 {
  font-family: var(--font-head);
  font-size: 1.2rem;
  margin: 0 0 4px;
  color: var(--jade);
}
.contact-methods p { margin: 0; font-size: 1.05rem; }
.contact-methods a { color: var(--terracotta); }
.contact-methods .contact-sub { font-size: 0.92rem; color: var(--muted); margin-top: 2px; }

@media (max-width: 760px) {
  .contact-layout { grid-template-columns: 1fr; gap: 44px; }
}

/* ---------- Footer ---------- */
.site-footer {
  position: relative;
  background:
    linear-gradient(rgba(14,18,26,0.82), rgba(14,18,26,0.9)),
    url("../images/comcaac-tribe.jpg") center 42% / cover no-repeat;
  color: rgba(255,255,255,0.78);
  padding: 72px 0 30px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 40px;
}
.site-footer h4 {
  color: var(--gold);
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin: 0 0 14px;
}
/* brand column heading reads as the wordmark, not a small label */
.footer-grid > div:first-child h4 {
  color: #fff;
  font-size: 0.98rem;
  letter-spacing: 0.24em;
}
.site-footer p { color: rgba(255,255,255,0.7); max-width: 34ch; }
.site-footer a { color: rgba(255,255,255,0.82); transition: color .2s ease; }
.site-footer a:hover { color: var(--gold); text-decoration: none; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 9px; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.14);
  margin-top: 32px;
  padding-top: 20px;
  text-align: center;
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  color: rgba(255,255,255,0.55);
}

/* ---------- Page header (interior pages) ---------- */
.page-head {
  background: linear-gradient(120deg, var(--terracotta), var(--jade));
  color: var(--cream);
  text-align: center;
  padding: clamp(70px, 11vw, 120px) 0 clamp(50px, 8vw, 80px);
}
/* photo-backed page-head (Infinity School) — taller, image shown in true color.
   No color tint; only a faint neutral darken + text-shadow so text stays legible. */
.page-head.page-head-img {
  background:
    linear-gradient(rgba(0,0,0,0.16), rgba(0,0,0,0.16)),
    url("../images/infinity-hero.jpg") center 30% / cover no-repeat;
  min-height: 74vh;
  display: grid;
  place-items: center;
}
.page-head.page-head-img .container { width: 100%; }
.page-head.page-head-img .eyebrow,
.page-head.page-head-img h1,
.page-head.page-head-img p {
  text-shadow: 0 2px 16px rgba(0,0,0,0.55);
}
.page-head h1 { color: #fff; }
.page-head p { color: rgba(255,255,255,0.9); max-width: 56ch; margin: 0 auto; font-size: 1.15rem; }
/* shorter photo heroes on phones — placed AFTER the 74vh base so source order wins */
@media (max-width: 600px) {
  .page-head.page-head-img { min-height: 30vh; padding-top: 40px; padding-bottom: 28px; }
  .page-head.page-head-img h1 { font-size: 2rem; }
  .page-head.page-head-img p { font-size: 1rem; }
}
/* small gold subtitle beneath a page-head title (e.g. "Bufo Facilitator Training") */
.page-head .ph-sub { color: var(--gold); font-size: 0.82rem; margin: 16px auto 18px; }

/* ---------- Private Ceremony (private / traveling ceremony CTA) ---------- */
.call-ceremony {
  background: linear-gradient(150deg, var(--forest), var(--jade-deep));
  color: var(--cream);
}
.call-ceremony .eyebrow { color: var(--gold); }
.call-ceremony h2 { color: #fff; }
.call-ceremony p { color: rgba(255, 255, 255, 0.9); }
.call-ceremony .call-ceremony-invite {
  font-family: var(--font-quote);
  font-style: italic;
  font-size: clamp(1.3rem, 2.6vw, 1.7rem);
  color: var(--gold);
  margin: 0.6em 0 1.4em;
}
.call-ceremony .btn-outline {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.5);
}
.call-ceremony .btn-outline:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: #fff;
  color: #fff;
}
.cta-row {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ---------- Shop ---------- */
.shop-notice {
  max-width: 760px;
  margin: 0 auto 2.6rem;
  padding: 18px 24px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--gold);
  border-radius: 10px;
  background: var(--cream);
  color: var(--muted);
  font-size: 0.96rem;
  text-align: center;
}
.shop-notice strong { color: var(--forest); }
.shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
}
.product {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-align: left;
}
.product .product-media {
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, var(--forest-soft), var(--gold));
  overflow: hidden;
}
.product .product-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.product:hover .product-media img { transform: scale(1.04); }
.product .product-media.placeholder {
  display: grid;
  place-items: center;
  color: var(--cream);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.product .product-body {
  padding: 24px 26px 28px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.product h3 { color: var(--forest); margin: 0 0 8px; }
.product .product-body p { color: var(--muted); font-size: 0.96rem; margin: 0 0 14px; }
.product .product-meta {
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--jade);
  margin-bottom: 6px;
}
.product .product-price {
  font-family: var(--font-display);
  color: var(--terracotta);
  font-size: 1.3rem;
  margin: 4px 0 18px;
}
.product-buy { margin-top: auto; }
.product-buy .btn { width: 100%; text-align: center; }
.product-paid {
  color: var(--jade);
  font-weight: 600;
  font-size: 0.95rem;
  margin: 0;
}
.shop-support {
  max-width: 64ch;
  margin: clamp(20px, 4vw, 40px) auto 0;
  text-align: center;
  color: var(--muted);
}

/* product cards are links to the item's own page */
a.product, a.product:hover { text-decoration: none; color: inherit; }
.product .product-blurb { color: var(--muted); font-size: 0.96rem; margin: 0 0 14px; }
.product .product-cta {
  margin-top: auto;
  width: 100%;
  text-align: center;
}

/* "Coming soon" label used while the shop is in preview mode. Looks like a
   button but is intentionally muted and non-interactive. */
.product-cta-soon,
.btn.product-cta-soon {
  display: inline-block;
  padding: 17px 38px;
  border-radius: 14px;
  border: 1.5px solid rgba(43, 38, 32, 0.18);
  background: transparent;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-align: center;
  cursor: default;
}
.product-cta-soon:hover { background: transparent; color: var(--muted); border-color: rgba(43, 38, 32, 0.18); }
.product.is-coming-soon { cursor: default; }
.product.is-coming-soon:hover .product-media img { transform: none; }

/* ---------- Product detail page ---------- */
.product-back {
  display: inline-block;
  margin-bottom: clamp(18px, 4vw, 32px);
  font-size: 0.82rem;
  letter-spacing: 0.05em;
  color: var(--terracotta);
  font-weight: 600;
}
.product-detail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
}
.product-detail-media {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  aspect-ratio: 4 / 5;
  background: linear-gradient(135deg, var(--forest-soft), var(--gold));
}
.product-detail-media img { width: 100%; height: 100%; object-fit: cover; }
.product-detail-media.placeholder {
  display: grid;
  place-items: center;
  color: var(--cream);
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.product-detail-info .product-meta {
  font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--jade); margin-bottom: 8px;
}
.product-detail-info h1 { font-size: clamp(2rem, 4vw, 2.8rem); margin: 0 0 10px; }
.product-detail-price {
  font-family: var(--font-display);
  color: var(--terracotta);
  font-size: 1.5rem;
  margin: 0 0 22px;
}
.product-size { margin: 0 0 22px; max-width: 340px; }
.product-size label {
  display: block; font-weight: 600; font-size: 0.8rem;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--forest); margin-bottom: 8px;
}
.product-size select {
  width: 100%; padding: 12px 14px;
  border: 1.5px solid var(--line); border-radius: 10px;
  font-family: inherit; font-size: 1rem; background: var(--cream); color: var(--ink);
  cursor: pointer;
}
.product-size select:focus { outline: none; border-color: var(--terracotta); }
.product-detail-body p { color: var(--ink); margin: 0 0 1em; }
.product-detail-info .product-buy { margin-top: 22px; max-width: 340px; }
.product-detail-info .product-buy .btn { width: 100%; text-align: center; }
.product-note { font-size: 0.85rem; color: var(--muted); margin-top: 14px; max-width: 42ch; }
.product-missing { text-align: center; padding: clamp(20px, 6vw, 60px) 0; }
@media (max-width: 760px) {
  .product-detail { grid-template-columns: 1fr; gap: 28px; }
  .product-detail-media { max-width: 82%; margin: 0 auto; }
}
.product-status { margin-top: 14px; font-size: 0.95rem; color: var(--jade); min-height: 1.2em; }
.product-status a { color: var(--terracotta); font-weight: 600; }

/* ---------- Cart icon (in the header, beside the menu toggle) ---------- */
.nav-cart { position: relative; display: inline-flex; align-items: center; color: var(--forest); }
.nav-cart:hover { color: var(--terracotta); text-decoration: none; }
/* sits just left of the three-bar toggle, both pushed to the right */
.nav-cart-header { margin-left: auto; margin-right: 18px; }
body.home .site-header .nav-cart-header { color: var(--forest); }
.cart-count {
  position: absolute; top: -7px; right: -10px;
  min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 9px; background: var(--terracotta); color: #fff;
  font-size: 0.62rem; font-weight: 600; line-height: 1;
  display: none; align-items: center; justify-content: center;
}
.cart-count.has-items { display: inline-flex; }

/* ---------- Cart page ---------- */
.cart-title { margin: 0 0 clamp(20px, 4vw, 32px); }
.cart-empty { text-align: center; padding: clamp(20px, 6vw, 50px) 0; }
.cart-empty p { color: var(--muted); margin-bottom: 20px; }
.cart-list { display: flex; flex-direction: column; gap: 18px; }
.cart-item {
  display: grid;
  grid-template-columns: 92px 1fr auto auto;
  gap: 20px;
  align-items: center;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 18px;
}
.cart-item-media {
  display: block; width: 92px; height: 92px;
  border-radius: 10px; overflow: hidden;
  background: linear-gradient(135deg, var(--forest-soft), var(--gold));
}
.cart-item-media img { width: 100%; height: 100%; object-fit: cover; }
.cart-item-noimg {
  display: grid; place-items: center; width: 100%; height: 100%;
  color: var(--cream); font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase;
}
.cart-item-name, .cart-item-name:hover { text-decoration: none; }
.cart-item-info h3 { color: var(--forest); margin: 0 0 2px; font-size: 1.15rem; }
.cart-item-name:hover h3 { color: var(--terracotta); }
.cart-item-meta { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--jade); margin: 0 0 6px; }
.cart-item-unit { font-size: 0.88rem; color: var(--muted); margin: 0 0 8px; }
.cart-remove {
  background: none; border: 0; padding: 0; font-family: inherit;
  color: var(--muted); font-size: 0.82rem; cursor: pointer; text-decoration: underline;
}
.cart-remove:hover { color: var(--terracotta); }
.cart-item-qty {
  display: inline-flex; align-items: center;
  border: 1px solid var(--line); border-radius: 999px; overflow: hidden; background: #fff;
}
.cart-item-qty button {
  width: 34px; height: 34px; border: 0; background: none;
  font-size: 1.1rem; line-height: 1; cursor: pointer; color: var(--forest);
}
.cart-item-qty button:hover { background: var(--sand); }
.cart-qty-val { min-width: 30px; text-align: center; font-weight: 600; font-size: 0.95rem; }
.cart-item-line { font-family: var(--font-display); color: var(--terracotta); font-size: 1.15rem; white-space: nowrap; }
.cart-summary { margin: 28px 0 0 auto; max-width: 420px; }
.cart-totals { border-top: 1px solid var(--line); padding-top: 18px; }
.cart-row {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 10px; font-size: 1rem; color: var(--muted);
}
.cart-row span:last-child { color: var(--ink); }
.cart-row.cart-total {
  margin-top: 12px; padding-top: 14px; border-top: 1px solid var(--line);
  font-size: 1.15rem; color: var(--forest);
}
.cart-row.cart-total span:last-child {
  font-family: var(--font-display); color: var(--forest); font-size: 1.5rem;
}
.cart-summary-note { font-size: 0.82rem; color: var(--muted); margin: 8px 0 16px; }
.cart-checkout .btn { width: 100%; text-align: center; }
.cart-note { font-size: 0.88rem; color: var(--muted); margin: 10px 0 0; text-align: center; }
.cart-note strong { color: var(--forest); }
@media (max-width: 620px) {
  .cart-item {
    grid-template-columns: 70px 1fr;
    grid-template-areas: "media info" "qty line";
    row-gap: 14px;
  }
  .cart-item-media { grid-area: media; width: 70px; height: 70px; }
  .cart-item-info { grid-area: info; }
  .cart-item-qty { grid-area: qty; }
  .cart-item-line { grid-area: line; text-align: right; align-self: center; }
  .cart-summary { max-width: none; }
}

/* ---------- Responsive ---------- */
/* Scroll-reveal: elements fade + rise as they enter the viewport */
.reveal { transition: opacity .85s cubic-bezier(.2,.7,.2,1), transform .85s cubic-bezier(.2,.7,.2,1); }
html.js .reveal { opacity: 0; transform: translateY(30px); }
html.js .reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html.js .reveal { opacity: 1; transform: none; transition: none; }
}

/* Bufo (toad) motif — recurring accent dispersed between sections */
.toad-divider {
  width: 70px; height: 88px;
  margin: 12px auto;
  background: url("../images/Black-toad.png") center / contain no-repeat;
}

/* Minimal hero: make the lone tagline a touch more present */
.hero .eyebrow { font-size: clamp(0.85rem, 1.7vw, 1.12rem); margin-bottom: 0; }

@media (max-width: 780px) {
  .split { grid-template-columns: 1fr; gap: 32px; }
  /* offerings: always show the photo first, and a touch smaller */
  .split img {
    order: -1;
    max-width: 84%;
    margin-left: auto;
    margin-right: auto;
    aspect-ratio: 4 / 3;
  }
  .site-footer { padding-top: 40px; padding-bottom: 22px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 16px 24px; }
  .footer-grid > div:first-child { grid-column: 1 / -1; margin-bottom: 2px; }
  .site-footer h4 { margin-bottom: 8px; }
  .site-footer li { margin-bottom: 6px; }
  .site-footer p { font-size: 0.92rem; line-height: 1.5; margin: 0; }
  .footer-bottom { margin-top: 22px; padding-top: 16px; }
}