/* ============================================================
   BREATH & BEING — Stylesheet
   Shared between index.html and event.html
   ============================================================ */

:root {
  --c-paper:    #F4EFE6;
  --c-sand:     #E5D9C3;
  --c-clay:     #B89A7A;
  --c-green:    #7A8471;
  --c-deep:     #3D3A33;
  --c-ink:      #2A2823;
  --c-copper:   #A86F3D;
  --c-line:     rgba(61, 58, 51, 0.15);
  --c-line-dk:  rgba(244, 239, 230, 0.18);
  --c-cream:    #EFE7D6;

  --serif: "Cormorant Garamond", "EB Garamond", Georgia, serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  --mono:  "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace;

  --maxw: 1240px;
  --gutter: clamp(20px, 4vw, 56px);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  color: var(--c-ink);
  background: var(--c-paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }

:focus-visible {
  outline: 2px solid var(--c-copper);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 200;
  padding: 10px 18px;
  background: var(--c-deep);
  color: var(--c-paper);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: 4px;
  transition: top 200ms;
}
.skip-link:focus { top: 16px; }

.serif { font-family: var(--serif); font-weight: 400; }
.italic { font-style: italic; }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.08;
  margin: 0;
  color: var(--c-deep);
  text-wrap: pretty;
}

p { margin: 0 0 1em; text-wrap: pretty; }

.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-clay);
  font-weight: 500;
}

.eyebrow .num {
  display: inline-block;
  width: 1.6em;
  color: var(--c-copper);
}

/* ---------- Layout primitives ---------- */
.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

section {
  padding-top: clamp(72px, 9vw, 140px);
  padding-bottom: clamp(72px, 9vw, 140px);
  position: relative;
}

.divider {
  height: 1px;
  background: var(--c-line);
  border: 0;
  margin: 0;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  min-height: 44px;
  font-size: 13px;
  font-family: var(--sans);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 999px;
  transition: all 220ms ease;
  white-space: nowrap;
  cursor: pointer;
  border: 1px solid transparent;
  text-decoration: none;
}

.btn-primary { background: var(--c-deep); color: var(--c-paper); }
.btn-primary:hover { background: var(--c-copper); transform: translateY(-1px); }

.btn-copper { background: var(--c-copper); color: var(--c-paper); }
.btn-copper:hover { background: var(--c-deep); transform: translateY(-1px); }

.btn-ghost { background: transparent; color: var(--c-deep); border: 1px solid var(--c-deep); }
.btn-ghost:hover { background: var(--c-deep); color: var(--c-paper); }

.btn-ghost-light { background: transparent; color: var(--c-paper); border: 1px solid var(--c-paper); }
.btn-ghost-light:hover { background: var(--c-paper); color: var(--c-deep); }

.btn-arrow::after {
  content: "→";
  font-family: var(--serif);
  font-size: 16px;
  letter-spacing: 0;
  transition: transform 220ms ease;
}
.btn-arrow:hover::after { transform: translateX(3px); }

/* ---------- Nav ---------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  padding: 18px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  transition: background 280ms ease, padding 280ms ease, border-color 280ms ease;
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background: rgba(244, 239, 230, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding-top: 12px;
  padding-bottom: 12px;
  border-bottom-color: var(--c-line);
}

/* Event hero: while the nav is transparent over the night sky, lift the logo
   mark and wordmark for legibility. Reverts automatically once scrolled (the
   nav gains its light background). The photo itself is untouched. */
body.event-page .nav:not(.scrolled) .brand .wordmark {
  color: var(--c-paper);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.35);
}
body.event-page .nav:not(.scrolled) .brand img {
  filter: invert(1) brightness(1.4) drop-shadow(0 1px 4px rgba(0, 0, 0, 0.5));
}

.brand { display: flex; align-items: center; gap: 12px; }
.brand img { width: 36px; height: 36px; object-fit: contain; }
.brand .wordmark {
  font-family: var(--serif);
  font-size: 18px;
  letter-spacing: 0.16em;
  color: var(--c-deep);
  text-transform: uppercase;
  white-space: nowrap;
}

.nav-links { display: flex; gap: 26px; align-items: center; }
.nav-links a {
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--c-ink);
  position: relative;
  padding: 4px 0;
  transition: color 200ms;
}
.nav-links a:hover { color: var(--c-copper); }
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--c-copper);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 220ms ease;
}
.nav-links a:hover::after { transform: scaleX(1); }

.nav-cta { padding: 10px 22px; font-size: 12px; min-height: 0; }
.nav-toggle { display: none; }

/* ---------- Hero ---------- */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: flex-end;
  position: relative;
  overflow: hidden;
  padding-top: 120px;
  padding-bottom: 80px;
  color: var(--c-paper);
}
.hero-img {
  position: absolute; inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  transition: opacity 800ms ease;
}
.hero-img::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(42,40,35,0.25) 0%, rgba(42,40,35,0.15) 35%, rgba(42,40,35,0.78) 100%);
}
.hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: end;
  gap: 60px;
}
.hero h1 {
  font-size: clamp(44px, 6.4vw, 96px);
  color: var(--c-paper);
  font-weight: 300;
  letter-spacing: -0.015em;
}
.hero h1 em { font-style: italic; color: var(--c-cream); }
.hero .lede {
  font-size: clamp(15px, 1.15vw, 18px);
  line-height: 1.7;
  color: rgba(244, 239, 230, 0.88);
  max-width: 440px;
  margin-bottom: 32px;
}
.hero .eyebrow { color: var(--c-cream); margin-bottom: 18px; display: block; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-actions .btn-primary { background: var(--c-paper); color: var(--c-deep); }
.hero-actions .btn-primary:hover { background: var(--c-copper); color: var(--c-paper); }

.hero-meta {
  position: absolute;
  z-index: 2;
  bottom: 36px;
  right: var(--gutter);
  display: flex;
  align-items: center;
  gap: 14px;
}
.hero-meta .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--c-copper);
  box-shadow: 0 0 0 4px rgba(168, 111, 61, 0.25);
  animation: pulse 2.4s ease-in-out infinite;
}
.hero-meta .text {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-cream);
}

@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(168, 111, 61, 0.2); }
  50% { box-shadow: 0 0 0 8px rgba(168, 111, 61, 0.05); }
}

.scroll-indicator {
  position: absolute;
  bottom: 36px;
  left: var(--gutter);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--c-cream);
}
.scroll-indicator .line {
  width: 1px;
  height: 48px;
  background: linear-gradient(180deg, transparent, var(--c-cream), transparent);
  animation: drift 2.6s ease-in-out infinite;
}
@keyframes drift {
  0%,100% { transform: translateY(0); opacity: 0.6; }
  50% { transform: translateY(8px); opacity: 1; }
}
.scroll-indicator .label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

/* ---------- Section header pattern ---------- */
.s-head {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 60px;
  margin-bottom: 64px;
  align-items: end;
}
.s-head h2 { font-size: clamp(32px, 4vw, 56px); font-weight: 300; }
.s-head h2 em { font-style: italic; color: var(--c-clay); }
.s-head .lede { font-size: 17px; color: var(--c-ink); max-width: 520px; }

/* ---------- Start (was Membership — dark band) ---------- */
.start-band {
  background: var(--c-deep);
  color: var(--c-paper);
  position: relative;
  overflow: hidden;
}
.start-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 80% 20%, rgba(168, 111, 61, 0.15), transparent 60%),
    radial-gradient(ellipse 60% 60% at 10% 100%, rgba(122, 132, 113, 0.12), transparent 60%);
  pointer-events: none;
}
.start-band .wrap { position: relative; z-index: 1; }
.start-band .eyebrow { color: var(--c-clay); }
.start-band h2 { color: var(--c-paper); }
.start-band h2 em { color: var(--c-clay); }

.start-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr 1fr;
  gap: 24px;
  align-items: stretch;
}

/* Drop-in card (dark glass) */
.drop-card {
  background: rgba(244, 239, 230, 0.04);
  border: 1px solid var(--c-line-dk);
  padding: 40px 36px;
  position: relative;
  display: flex;
  flex-direction: column;
}
.drop-card .eyebrow { color: var(--c-clay); margin-bottom: 14px; display: block; }
.drop-card h3 { color: var(--c-paper); font-size: 28px; margin-bottom: 8px; font-weight: 400; }
.drop-card .price-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 6px;
  flex-wrap: nowrap;
  white-space: nowrap;
}
.drop-card .price {
  font-family: var(--serif);
  font-size: 64px;
  line-height: 1;
  color: var(--c-paper);
  font-weight: 300;
  letter-spacing: -0.02em;
}
.drop-card .per { font-size: 14px; color: rgba(244,239,230,0.7); letter-spacing: 0.04em; }
.drop-card .sub {
  color: rgba(244,239,230,0.65);
  font-size: 14px;
  margin-bottom: 28px;
}

/* 20-pass card — same base as drop-card, with a copper top accent */
.commit-card {
  background: rgba(244, 239, 230, 0.04);
  border: 1px solid var(--c-line-dk);
  border-top: 2px solid var(--c-copper);
  padding: 40px 36px;
  position: relative;
  display: flex;
  flex-direction: column;
}
.commit-card .eyebrow { color: var(--c-copper); margin-bottom: 14px; display: block; }
.commit-card h3 { color: var(--c-paper); font-size: 28px; margin-bottom: 8px; font-weight: 400; }
.commit-card .price-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 6px;
  flex-wrap: nowrap;
  white-space: nowrap;
}
.commit-card .price {
  font-family: var(--serif);
  font-size: 64px;
  line-height: 1;
  color: var(--c-paper);
  font-weight: 300;
  letter-spacing: -0.02em;
}
.commit-card .per { font-size: 14px; color: rgba(244,239,230,0.7); letter-spacing: 0.04em; }
.commit-card .sub {
  color: rgba(244,239,230,0.65);
  font-size: 14px;
  margin-bottom: 28px;
}

.start-list {
  list-style: none;
  padding: 0;
  margin: 0 0 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.start-list li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  font-size: 14px;
  color: rgba(244, 239, 230, 0.85);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--c-line-dk);
  line-height: 1.55;
}
.start-list li:last-child { border-bottom: none; padding-bottom: 0; }
.start-list .ic {
  color: var(--c-clay);
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1;
  margin-top: 2px;
  flex-shrink: 0;
  width: 16px;
}
.commit-card .start-list .ic { color: var(--c-copper); }

/* 10-pass — cream-highlighted hero card */
.pass-card {
  background: var(--c-paper);
  color: var(--c-deep);
  padding: 48px 44px 44px;
  position: relative;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.35);
}
.pass-card .most-popular {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--c-copper);
  color: var(--c-paper);
  padding: 6px 16px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  white-space: nowrap;
  z-index: 2;
  border-radius: 999px;
}
.pass-card .tag-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-copper);
  margin-bottom: 14px;
}
.pass-card h3 {
  font-size: 32px;
  font-weight: 400;
  margin-bottom: 10px;
}
.pass-card h3 em { color: var(--c-copper); font-style: italic; }
.pass-card .price-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 6px;
  flex-wrap: wrap;
  color: var(--c-deep);
}
.pass-card .price {
  font-family: var(--serif);
  font-size: 72px;
  line-height: 1;
  color: var(--c-deep);
  font-weight: 300;
  letter-spacing: -0.02em;
}
.pass-card .meta-row {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-clay);
}
.pass-card .body {
  font-size: 15px;
  color: var(--c-ink);
  margin: 20px 0 4px;
  line-height: 1.6;
}
.pass-card .perks {
  list-style: none;
  padding: 0;
  margin: 16px 0 28px;
  font-size: 14px;
  color: var(--c-ink);
}
.pass-card .perks li {
  padding: 12px 0;
  border-bottom: 1px solid var(--c-line);
  display: flex;
  align-items: flex-start;
  gap: 12px;
  line-height: 1.5;
}
.pass-card .perks li:last-child { border-bottom: 0; }
.pass-card .perks .ic { color: var(--c-copper); font-family: var(--serif); font-size: 18px; line-height: 1.4; flex-shrink: 0; }
.pass-card .perks strong { color: var(--c-deep); display: block; margin-bottom: 2px; }

/* ---------- Sessions / Beyond ---------- */
.sessions-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}
.session-card {
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 300ms ease, box-shadow 300ms ease;
}
.session-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 30px 60px -30px rgba(61,58,51,0.18);
}
.session-card .ph {
  height: 240px;
  background-size: cover;
  background-position: center;
  position: relative;
}
.session-card .ph::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(244,239,230,0) 60%, rgba(244,239,230,0.6) 100%);
}
.session-body { padding: 36px; flex: 1; display: flex; flex-direction: column; }
.session-body h3 { font-size: 32px; font-weight: 400; margin-bottom: 8px; }
.session-body .meta {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-clay);
  margin-bottom: 18px;
}
.session-body p { font-size: 15px; color: var(--c-ink); margin-bottom: 24px; }

.transparency-note {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-clay);
  margin: 0 0 10px;
}

.pricing-table {
  border-top: 1px solid var(--c-line);
  margin-bottom: 20px;
}
.pricing-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--c-line);
  font-size: 15px;
}
.pricing-row .lab { color: var(--c-ink); flex: 1; min-width: 0; }
.pricing-row .val { white-space: nowrap; flex-shrink: 0; font-family: var(--serif); font-size: 22px; color: var(--c-deep); }
.pricing-row .lab .note { display: block; font-size: 11px; color: var(--c-clay); font-family: var(--mono); letter-spacing: 0.1em; margin-top: 2px; }
.pricing-row.featured .val { color: var(--c-copper); }
.pricing-row.featured { background: rgba(168, 111, 61, 0.04); padding-left: 12px; padding-right: 12px; margin: 0 -12px; }

.consult-note {
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  line-height: 1.55;
  color: var(--c-ink);
  margin: 4px 0 24px;
  padding: 16px 0 0;
  border-top: 1px solid var(--c-line);
  max-width: 460px;
}

.session-body .btn { align-self: flex-start; margin-top: auto; }

/* ---------- Events list (inside session card) ---------- */
.events-list { border-top: 1px solid var(--c-line); margin-bottom: 24px; }
.event-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--c-line);
}
.event-row.featured { background: rgba(168, 111, 61, 0.04); padding-left: 12px; padding-right: 12px; margin: 0 -12px; }
.event-name { font-family: var(--serif); font-size: 21px; color: var(--c-deep); margin-bottom: 2px; line-height: 1.2; }
.event-when { font-family: var(--mono); font-size: 11px; color: var(--c-clay); letter-spacing: 0.12em; text-transform: uppercase; }
.event-tag {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-copper);
  background: rgba(168, 111, 61, 0.1);
  padding: 5px 10px;
  border-radius: 999px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ---------- Approach ---------- */
.approach { background: var(--c-cream); }
.approach-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.approach-img {
  height: 540px;
  background-size: cover;
  background-position: center;
  filter: saturate(0.9);
  position: relative;
}
.approach-img::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(232, 217, 195, 0.2), rgba(122,132,113,0.1));
}
.approach h2 { font-size: clamp(34px, 4vw, 60px); margin-bottom: 24px; }
.approach h2 em { font-style: italic; color: var(--c-green); }
.approach .lede { font-size: 17px; line-height: 1.75; margin-bottom: 32px; max-width: 480px; }

.approach-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.approach-list li {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 18px;
  align-items: baseline;
  padding: 18px 0;
  border-top: 1px solid var(--c-line);
  font-size: 15px;
  line-height: 1.6;
}
.approach-list li:last-child { border-bottom: 1px solid var(--c-line); }
.approach-list .num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--c-copper);
}

/* ---------- What to Expect ---------- */
.expect-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
}
.expect-step {
  padding: 56px 36px;
  border-right: 1px solid var(--c-line);
  position: relative;
}
.expect-step:last-child { border-right: none; }
.expect-step .step-num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--c-copper);
  margin-bottom: 28px;
}
.expect-step .icon {
  width: 56px; height: 56px;
  border-radius: 50%;
  border: 1px solid var(--c-clay);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 24px;
  position: relative;
}
.expect-step .icon::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1px solid var(--c-line);
}
.expect-step .icon::after {
  content: "";
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--c-clay);
}
.expect-step:nth-child(2) .icon::after { background: var(--c-green); }
.expect-step:nth-child(3) .icon::after { background: var(--c-copper); }
.expect-step h3 { font-size: 26px; font-weight: 400; margin-bottom: 10px; }
.expect-step p { font-size: 14px; color: var(--c-ink); margin: 0; }

.bring {
  margin-top: 72px;
  padding-top: 48px;
  border-top: 1px solid var(--c-line);
  text-align: center;
}
.bring .eyebrow { display: block; margin-bottom: 28px; }
.bring-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 28px;
  max-width: 900px;
  margin: 0 auto;
}
.bring-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.bring-item .icon {
  width: 80px; height: 80px;
  border-radius: 50%;
  background: var(--c-sand);
  border: 1px solid var(--c-line);
  position: relative;
}
.bring-item .icon::before {
  /* Outer concentric ring */
  content: "";
  position: absolute;
  inset: -9px;
  border-radius: 50%;
  border: 1px solid var(--c-line);
  opacity: 0.4;
  pointer-events: none;
}
.bring-item .icon img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
.bring-item .lab {
  font-family: var(--serif);
  font-style: italic;
  font-size: 17px;
  color: var(--c-deep);
  line-height: 1.2;
}
.bring-item .opt {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  color: var(--c-clay);
  text-transform: uppercase;
}

/* ---------- After-session pack (inside §07 What to expect) ---------- */
.pack {
  margin-top: clamp(64px, 8vw, 110px);
  padding-top: clamp(48px, 6vw, 72px);
  border-top: 1px solid var(--c-line);
  text-align: center;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}
.pack .eyebrow { display: block; margin-bottom: 22px; }
.pack h3 {
  font-size: clamp(28px, 3.2vw, 42px);
  font-weight: 300;
  line-height: 1.14;
  margin-bottom: 20px;
}
.pack h3 em { font-style: italic; color: var(--c-clay); }
.pack p {
  font-size: 16px;
  color: var(--c-ink);
  max-width: 560px;
  margin: 0 auto 36px;
  line-height: 1.7;
}
.pack-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  max-width: 520px;
  margin: 0 auto 32px;
}
.pack-item { display: flex; flex-direction: column; gap: 14px; }
.pack-cover {
  aspect-ratio: 5 / 7;       /* matches the source covers — no more bottom crop */
  background: var(--c-sand);
  border: 1px solid var(--c-line);
  overflow: hidden;
  box-shadow: 0 14px 32px -18px rgba(61, 58, 51, 0.25);
  transition: transform 320ms ease, box-shadow 320ms ease;
}
.pack-cover:hover {
  transform: translateY(-3px);
  box-shadow: 0 24px 48px -20px rgba(61, 58, 51, 0.3);
}
.pack-cover img {
  width: 100%;
  height: 100%;
  object-fit: contain;       /* show the full cover including the byline */
  object-position: center;
  display: block;
}
.pack-title {
  font-family: var(--serif);
  font-style: italic;
  font-size: 17px;
  color: var(--c-deep);
  text-align: center;
  line-height: 1.3;
}
.pack-note {
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  color: var(--c-clay);
  margin: 0;
}

/* ---------- "Includes pack" perk line on §02 cards ---------- */
.pack-perk {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.pack-perk::before {
  content: "✦";
  font-family: var(--serif);
  font-size: 14px;
  letter-spacing: 0;
}
/* Dark cards: muted paper tone */
.drop-card .pack-perk,
.commit-card .pack-perk { color: rgba(244, 239, 230, 0.55); }
.drop-card .pack-perk::before,
.commit-card .pack-perk::before { color: var(--c-clay); }
/* Light cream card: copper accent */
.pass-card .pack-perk { color: var(--c-clay); }
.pass-card .pack-perk::before { color: var(--c-copper); }

/* ---------- Safety ---------- */
.safety { background: var(--c-cream); }
.safety-intro {
  font-size: 17px;
  line-height: 1.75;
  max-width: 680px;
  margin: 0 0 56px;
  color: var(--c-ink);
}
.safety-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 56px;
  align-items: start;
}
.safety-footer {
  margin-top: 48px;
  padding-top: 28px;
  border-top: 1px solid var(--c-line);
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px;
  color: var(--c-ink);
  max-width: 640px;
}
.safety-footer a {
  color: var(--c-copper);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* ---------- FAQ ---------- */
.faq-list { border-top: 1px solid var(--c-line); }
.faq-item { border-bottom: 1px solid var(--c-line); }
.faq-q {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 24px 0;
  text-align: left;
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 400;
  color: var(--c-deep);
  cursor: pointer;
  line-height: 1.25;
  transition: color 200ms;
}
.faq-q:hover { color: var(--c-copper); }
.faq-toggle {
  font-family: var(--mono);
  font-size: 22px;
  color: var(--c-clay);
  transition: transform 240ms ease, color 200ms;
  flex-shrink: 0;
  line-height: 1;
}
.faq-item.open .faq-toggle { transform: rotate(45deg); color: var(--c-copper); }
.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 320ms ease, padding 320ms ease;
}
.faq-item.open .faq-a { max-height: 360px; padding-bottom: 24px; }
.faq-a p {
  font-size: 15px;
  line-height: 1.75;
  color: var(--c-ink);
  margin: 0;
  max-width: 720px;
}
.faq-a a {
  color: var(--c-copper);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- Coming Soon / Horizon ---------- */
.coming-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.coming-card {
  position: relative;
  height: 380px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding: 36px;
  color: var(--c-paper);
  border: 1px solid var(--c-line);
}
.coming-card .bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 0;
}
.coming-card::after {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(42,40,35,0.05), rgba(42,40,35,0.7));
}
.coming-card .body { position: relative; z-index: 2; width: 100%; }
.coming-card .tag {
  display: inline-block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  background: rgba(244,239,230,0.16);
  backdrop-filter: blur(6px);
  padding: 5px 12px;
  margin-bottom: 16px;
  border: 1px solid rgba(244,239,230,0.3);
}
.coming-card h3 { color: var(--c-paper); font-size: 36px; font-weight: 400; margin-bottom: 8px; }
.coming-card p { font-size: 14px; color: rgba(244,239,230,0.85); margin-bottom: 18px; max-width: 320px; }

/* Static "coming soon" action-slot chip (replaces the v1 button). */
.coming-soon-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(244, 239, 230, 0.75);
  border: 1px solid rgba(244, 239, 230, 0.3);
  border-radius: 999px;
  cursor: default;
  user-select: none;
}
.coming-soon-chip::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--c-clay);
}

/* ---------- Testimonials ---------- */
.testimonials { background: var(--c-sand); }
.test-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 32px;
}
.test {
  padding: 36px;
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  display: flex;
  flex-direction: column;
}
.test .stars { color: var(--c-copper); font-size: 14px; letter-spacing: 4px; margin-bottom: 20px; }
.test .quote {
  font-family: var(--serif);
  font-style: italic;
  font-size: 19px;
  line-height: 1.5;
  color: var(--c-deep);
  margin-bottom: 28px;
}
.test .quote.collapsed {
  display: -webkit-box;
  -webkit-line-clamp: 7;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 14px;
}
.test .read-more {
  align-self: flex-start;
  background: none;
  border: 0;
  padding: 0 0 2px;
  margin: 0 0 28px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-copper);
  cursor: pointer;
  border-bottom: 1px solid currentColor;
  transition: color 200ms;
}
.test .read-more:hover { color: var(--c-deep); }
.test .author { display: flex; align-items: center; gap: 14px; margin-top: auto; }
.test .ava { width: 40px; height: 40px; border-radius: 50%; background: var(--c-clay); flex-shrink: 0; }
.test .name { font-size: 14px; color: var(--c-deep); font-weight: 500; }
.test .meta { font-size: 11px; color: var(--c-clay); font-family: var(--mono); letter-spacing: 0.1em; text-transform: uppercase; }

.test-callout {
  margin-top: 56px;
  text-align: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  color: var(--c-green);
}

/* ---------- Approach → Facilitators flow ---------- */
/* Approach and Facilitators share the cream background and a soft bridge
   between them so they read as one trust-building movement. */
section.approach { padding-bottom: clamp(40px, 4vw, 64px); }
section.facilitators-section {
  background: var(--c-cream);
  padding-top: clamp(32px, 4vw, 56px);
}
.section-bridge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-bottom: clamp(48px, 6vw, 80px);
}
.section-bridge .line {
  display: block;
  width: 1px;
  height: 56px;
  background: linear-gradient(180deg, transparent, var(--c-clay));
}
.section-bridge .label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-clay);
}

/* ---------- Facilitators ---------- */
.facilitators-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}
.facilitator-photo {
  height: 540px;
  background: linear-gradient(135deg, var(--c-sand), var(--c-clay) 60%, var(--c-green));
  background-size: cover;
  background-position: center;
  position: sticky;        /* track the longer Sammy bio on desktop */
  top: 100px;
  display: flex;
  align-items: flex-end;
  padding: 22px;
}
.facilitator-photo::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(42,40,35,0) 60%, rgba(42,40,35,0.35));
  pointer-events: none;
}
.facilitator-photo .cap {
  position: relative;
  z-index: 1;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(244,239,230,0.8);
}
.facilitators-body h2 { font-size: clamp(34px, 4vw, 60px); margin-bottom: 24px; }
.facilitators-body h2 em { font-style: italic; color: var(--c-clay); }
.facilitators-body .lede { font-size: 17px; line-height: 1.75; color: var(--c-ink); margin: 0 0 32px; max-width: 480px; }
.bio-block { padding: 28px 0; border-top: 1px solid var(--c-line); }
.bio-block:last-child { border-bottom: 1px solid var(--c-line); }
.bio-block h4 { font-family: var(--serif); font-size: 24px; font-weight: 400; color: var(--c-deep); margin-bottom: 14px; }
.bio-block p { font-family: var(--sans); font-size: 15px; color: var(--c-ink); margin: 0 0 14px; line-height: 1.7; }
.bio-block p:last-child { margin-bottom: 0; }
.bio-toggle {
  display: inline-block;
  background: none;
  border: 0;
  padding: 0 0 2px;
  margin: 14px 0 0;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-copper);
  cursor: pointer;
  border-bottom: 1px solid currentColor;
  transition: color 200ms;
}
.bio-toggle:hover { color: var(--c-deep); }

/* ---------- Final CTA ---------- */
.final-cta {
  background: var(--c-deep);
  color: var(--c-paper);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.final-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 60% at 50% 60%, rgba(168, 111, 61, 0.18), transparent 70%);
  pointer-events: none;
}
.final-cta .wrap { position: relative; z-index: 1; }
.final-cta h2 {
  color: var(--c-paper);
  font-size: clamp(40px, 6vw, 84px);
  font-weight: 300;
  line-height: 1.12;
  margin: 0 auto 28px;
  max-width: 18ch;
}
.final-cta h2 em { font-style: italic; color: var(--c-clay); }
.final-cta p {
  color: rgba(244,239,230,0.75);
  font-size: 17px;
  max-width: 540px;
  margin: 0 auto 40px;
  position: relative;
  z-index: 2;
}
.final-cta .actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.final-cta .btn-primary { background: var(--c-paper); color: var(--c-deep); }
.final-cta .btn-primary:hover { background: var(--c-copper); color: var(--c-paper); }
/* Tuck the cancellation line right back in the final banner — small,
   quiet, one tidy line. The full policy lives in §03. */
.final-cta .fineprint {
  font-size: 10px;
  letter-spacing: 0.02em;
  color: rgba(244, 239, 230, 0.42);
  margin-top: 22px;
}

/* ---------- Footer ---------- */
.footer {
  background: var(--c-deep);
  color: rgba(244,239,230,0.75);
  padding: 56px var(--gutter) 36px;
  border-top: 1px solid var(--c-line-dk);
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
  max-width: var(--maxw);
  margin: 0 auto 36px;
}
.footer h4 {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-clay);
  font-weight: 500;
  margin-bottom: 18px;
}
.footer ul { list-style: none; padding: 0; margin: 0; }
.footer li { padding: 6px 0; font-size: 13px; }
.footer a { cursor: pointer; }
.footer a:hover { color: var(--c-copper); }
.footer .brand { color: var(--c-paper); }
.footer .brand img { filter: invert(1) brightness(1.2); }
.footer .brand .wordmark { color: var(--c-paper); }
.footer .tag { font-family: var(--serif); font-style: italic; color: rgba(244,239,230,0.7); margin-top: 14px; max-width: 320px; line-height: 1.5; }

.social-row {
  display: flex;
  gap: 12px;
  margin-top: 22px;
}
.social-row a {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--c-line-dk);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(244, 239, 230, 0.8);
  transition: color 200ms, border-color 200ms, transform 200ms;
}
.social-row a:hover {
  color: var(--c-paper);
  border-color: var(--c-copper);
  transform: translateY(-1px);
}
.social-row svg { width: 18px; height: 18px; display: block; }
.footer-bottom {
  max-width: var(--maxw);
  margin: 0 auto;
  padding-top: 24px;
  border-top: 1px solid var(--c-line-dk);
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: rgba(244,239,230,0.5);
  text-transform: uppercase;
}

/* ---------- Sticky CTA ---------- */
.sticky-join {
  position: fixed;
  bottom: 24px; right: 24px;
  z-index: 40;
  background: var(--c-copper);
  color: var(--c-paper);
  padding: 14px 22px;
  border-radius: 999px;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 500;
  box-shadow: 0 16px 40px -12px rgba(168, 111, 61, 0.5);
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transform: translateY(120px);
  opacity: 0;
  transition: all 360ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.sticky-join.visible { transform: translateY(0); opacity: 1; }
.sticky-join:hover { background: var(--c-deep); }
.sticky-join .price { font-family: var(--serif); font-size: 16px; letter-spacing: 0; text-transform: none; }

/* ---------- Cancellation policy modal ---------- */
.modal-shade {
  position: fixed; inset: 0;
  background: rgba(42, 40, 35, 0.55);
  backdrop-filter: blur(6px);
  z-index: 100;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  animation: fadein 240ms ease;
}
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
.modal {
  background: var(--c-paper);
  width: 100%;
  max-width: 560px;
  max-height: 92vh;
  overflow-y: auto;
  border-radius: 6px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.3);
  animation: lift 320ms cubic-bezier(0.2,0.7,0.2,1);
}
@keyframes lift { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.modal-head {
  padding: 28px 32px 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
}
.modal-head h3 { font-size: 28px; font-weight: 400; }
.modal-head .close {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  color: var(--c-ink);
  background: transparent;
  transition: background 180ms;
  flex-shrink: 0;
}
.modal-head .close:hover { background: var(--c-sand); }
.modal-body { padding: 24px 32px 32px; }

.policy-list { padding: 0; margin: 0; list-style: none; }
.policy-list li {
  padding: 14px 0;
  border-bottom: 1px solid var(--c-line);
  font-size: 14px;
  color: var(--c-ink);
  line-height: 1.6;
}
.policy-list li:last-child { border-bottom: none; }
.policy-list strong { font-family: var(--serif); font-style: italic; font-size: 17px; color: var(--c-deep); display: block; margin-bottom: 4px; font-weight: 400; }
.policy-foot { margin-top: 18px; font-family: var(--serif); font-style: italic; font-size: 15px; color: var(--c-ink); }
.policy-foot a { color: var(--c-copper); text-decoration: underline; text-underline-offset: 3px; }

/* ====================================================================
   EVENT PAGE — Breathwork Under the Stars (event.html)
   Reuses main-site classes wherever possible (.start-band, .pass-card,
   .drop-card, .facilitators-grid, .final-cta). Additions live below.
   ==================================================================== */

/* Tighter rhythm than the main site — event page has shorter sections, so
   the global 140px max padding leaves too much air between them. Drop to
   ~88px max and the page reads cleaner without losing breathing room. */
body.event-page section {
  padding-top: clamp(56px, 6vw, 88px);
  padding-bottom: clamp(56px, 6vw, 88px);
}

/* On the event page, tickets are the goal — keep the nav CTA visible on
   mobile (the main site hides it). Shrink it and the wordmark so the brand
   name isn't clipped by the button on narrow phones. */
@media (max-width: 880px) {
  body.event-page .nav { gap: 12px; }
  body.event-page .nav-cta {
    display: inline-flex;
    padding: 8px 15px;
    font-size: 11px;
    letter-spacing: 0.08em;
  }
  body.event-page .brand .wordmark {
    font-size: 15px;
    letter-spacing: 0.08em;
  }

  /* Phone only: collapse the hosts bio after the lede behind Read more.
     body.event-page prefix lifts specificity above the later default rule. */
  body.event-page .hosts-toggle { display: inline-block; }
  body.event-page .hosts-body:not(.expanded) .hosts-extra { display: none; }

  /* Reset the desktop left-align margins — the mobile menu is a fixed dropdown.
     body.event-page prefix lifts specificity above the later default rule. */
  body.event-page .nav-links-event { margin-left: 0; margin-right: 0; }
}

/* Event-page nav: links sit just left of centre (right after the brand) so
   "Weekly session" — the way back to the main site — reads first on the left.
   The CTA + hamburger are pushed to the far right by the auto margin. */
.nav-links-event { margin-right: auto; margin-left: clamp(24px, 4vw, 52px); }
.nav-links-event .nav-home { color: var(--c-deep); font-weight: 500; }
.nav-links-event .nav-home::before {
  content: "←";
  margin-right: 7px;
  color: var(--c-copper);
  font-size: 14px;
}
@media (max-width: 400px) {
  body.event-page .brand .wordmark { font-size: 13px; }
  body.event-page .nav-cta { padding: 8px 13px; }
}

/* Soft visual flow between adjacent light sections — a thin gradient line
   pulled down by a small mono caption. Same family as the main site's
   approach→facilitators bridge so it feels native, not bolted on. */
.section-flow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: clamp(20px, 3vw, 36px) 0 0;
  pointer-events: none;
}
.section-flow .line {
  display: block;
  width: 1px;
  height: 40px;
  background: linear-gradient(180deg, transparent, var(--c-clay));
  animation: section-flow-drift 3.6s ease-in-out infinite;
}
.section-flow .dot {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--c-copper);
  opacity: 0.6;
}
@keyframes section-flow-drift {
  0%, 100% { transform: scaleY(1); opacity: 0.55; transform-origin: top; }
  50%      { transform: scaleY(1.18); opacity: 1;   transform-origin: top; }
}
@media (prefers-reduced-motion: reduce) {
  .section-flow .line { animation: none; }
}

/* §01 Invitation — short hosts' voice block */
.event-intro {
  max-width: 760px;
  font-size: clamp(17px, 1.4vw, 21px);
  line-height: 1.65;
  color: var(--c-ink);
}
.event-intro p { margin: 0 0 1em; }
.event-intro p:last-child { margin-bottom: 0; }

/* §02 What's included — clean list, not numbered */
.included-list {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--c-line);
}
.included-list li {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 18px;
  align-items: baseline;
  padding: 20px 0;
  border-bottom: 1px solid var(--c-line);
  font-size: 16px;
  line-height: 1.55;
}
.included-list .ic {
  font-family: var(--serif);
  font-style: italic;
  font-size: 20px;
  color: var(--c-copper);
  line-height: 1;
}
.included-list strong {
  font-family: var(--serif);
  font-weight: 400;
  font-style: italic;
  font-size: 20px;
  color: var(--c-deep);
  display: block;
  margin-bottom: 2px;
}
.included-list .by {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-clay);
  white-space: nowrap;
}
.included-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 12px;
  padding: 7px 16px;
  border: 1px solid var(--c-line);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-deep);
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.included-link:hover {
  background: var(--c-copper);
  border-color: var(--c-copper);
  color: var(--c-cream);
}

/* Slim variant of the start cards used on the event page — no bullet lists.
   Keeps the cards aligned and tighter when there are no perks to fill the body. */
.ticket-card { padding-top: clamp(40px, 4.5vw, 56px); padding-bottom: clamp(40px, 4.5vw, 56px); }
.ticket-card .body, .ticket-card .ticket-body {
  margin: 18px 0 32px;
  max-width: 380px;
}
.drop-card.ticket-card .ticket-body {
  font-size: 14px;
  line-height: 1.6;
  color: rgba(244, 239, 230, 0.7);
}
.drop-card.ticket-card h3 em { font-style: italic; color: var(--c-clay); }

/* Keep the two ticket cards visually aligned — matched heading + price
   scale so the title and price-row sit on the same line across both cards.
   Buttons are pinned to the card bottom (margin-top:auto, inline) so they
   land on one line too. */
.tickets-grid .ticket-card h3 { font-size: 30px; margin-bottom: 10px; }
.tickets-grid .ticket-card .price { font-size: 64px; }
.tickets-grid .ticket-card .price-row { min-height: 64px; }

/* §03 Tickets — 2-card grid inside the dark .start-band */
.tickets-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: stretch;
}
.tickets-included {
  margin-top: 28px;
  text-align: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: 19px;
  color: rgba(244, 239, 230, 0.78);
}
.not-sure-note {
  margin-top: 40px;
  text-align: center;
  font-size: 14px;
  color: rgba(244, 239, 230, 0.7);
  max-width: 540px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
}
.not-sure-note a {
  color: var(--c-clay);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.not-sure-note a:hover { color: var(--c-paper); }

/* Subtle mid-page CTA — small buttons, quiet treatment, no band */
.mid-cta-wrap { padding: clamp(4px, 1.5vw, 16px) 0 clamp(48px, 6vw, 80px); }
.mid-cta { text-align: center; }
.mid-cta .eyebrow { display: block; margin-bottom: 18px; }
.mid-cta .actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.mid-cta .btn { padding: 12px 24px; font-size: 12px; }

/* §04 Who this is for — short reassurance, no grid */
.who-block {
  max-width: 720px;
  font-size: 17px;
  line-height: 1.75;
  color: var(--c-ink);
}
.who-block .end {
  font-family: var(--serif);
  font-style: italic;
  font-size: 19px;
  color: var(--c-green);
  margin-top: 18px;
  display: block;
}

/* §05 hosts bio — all paragraphs share one type style (no lede/body split,
   so the bio reads as one continuous voice rather than two different fonts). */
.hosts-body p {
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 400;
  color: var(--c-ink);
  margin: 0 0 18px;
  line-height: 1.75;
  max-width: none;
}
.hosts-body p:last-child { margin-bottom: 0; }
.hosts-body p.lede { font-size: 16px; font-weight: 400; }

/* Hosts bio read-more is phone-only — desktop always shows the full bio,
   so the toggle is hidden and .hosts-extra stays visible by default. */
.hosts-toggle {
  display: none;
  background: none;
  border: 0;
  padding: 0 0 2px;
  margin: 16px 0 0;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-copper);
  cursor: pointer;
  border-bottom: 1px solid currentColor;
  transition: color 200ms;
}
.hosts-toggle:hover { color: var(--c-deep); }

/* §05 The people — hosts (Sammy & Jordy) reuses .facilitators-grid.
   Collaborators get a 3-col grid below. */
.collab-divider {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: clamp(64px, 8vw, 96px) 0 clamp(40px, 5vw, 56px);
}
.collab-divider .label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-clay);
  flex-shrink: 0;
}
.collab-divider .line {
  flex: 1;
  height: 1px;
  background: var(--c-line);
}
.collab-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.collab-card {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.collab-photo {
  aspect-ratio: 4 / 5;
  background: linear-gradient(135deg, var(--c-sand), var(--c-clay) 60%, var(--c-green));
  background-size: cover;
  background-position: center;
  border: 1px solid var(--c-line);
}
.collab-card h4 {
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 400;
  color: var(--c-deep);
  margin: 0;
}
.collab-card .role {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-clay);
  margin: -8px 0 0;
}
.collab-card p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--c-ink);
  margin: 0;
}

/* §06 Make a night of it — premium overnight, distinct from ticket cards */
.stay-over {
  background: var(--c-cream);
}
.stay-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.stay-photo {
  aspect-ratio: 5 / 4;
  background: linear-gradient(135deg, var(--c-clay), var(--c-green));
  background-size: cover;
  background-position: center;
  border: 1px solid var(--c-line);
}
.stay-body h2 { font-size: clamp(30px, 3.6vw, 48px); margin-bottom: 20px; }
.stay-body h2 em { font-style: italic; color: var(--c-copper); }
.stay-body p { font-size: 16px; line-height: 1.7; color: var(--c-ink); margin: 0 0 14px; }
.stay-perks {
  list-style: none;
  padding: 0;
  margin: 6px 0 6px;
}
.stay-perks li {
  font-size: 15px;
  line-height: 1.65;
  color: var(--c-ink);
  padding: 10px 0 10px 18px;
  border-top: 1px solid var(--c-line);
  position: relative;
}
.stay-perks li:last-child { border-bottom: 1px solid var(--c-line); }
.stay-perks li::before {
  content: "✦";
  position: absolute;
  left: 0; top: 10px;
  font-family: var(--serif);
  color: var(--c-copper);
  font-size: 14px;
  line-height: 1.6;
}
.stay-perks strong { font-family: var(--serif); font-style: italic; font-size: 17px; color: var(--c-deep); display: inline; font-weight: 400; margin-right: 6px; }
.stay-body .meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-clay);
  margin: 22px 0 28px;
  padding-top: 18px;
  border-top: 1px solid var(--c-line);
}

/* §07 Practical details — 4-up info row, no card chrome */
.practical-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
}
.practical-cell {
  padding: 36px 28px;
  border-right: 1px solid var(--c-line);
}
.practical-cell:last-child { border-right: none; }
.practical-cell h4 {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--c-copper);
  text-transform: uppercase;
  margin-bottom: 16px;
  font-weight: 500;
}
.practical-cell p {
  font-size: 14px;
  line-height: 1.65;
  color: var(--c-ink);
  margin: 0 0 0.8em;
}
.practical-cell p:last-child { margin-bottom: 0; }
.practical-cell ul {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 14px;
  color: var(--c-ink);
  line-height: 1.7;
}
.practical-cell li { padding: 2px 0; }
.practical-footnote {
  margin-top: 28px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  color: var(--c-ink);
  max-width: 640px;
}
.practical-footnote a {
  color: var(--c-copper);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Cancellation fineprint */
.fineprint {
  margin: 28px auto 0;
  max-width: 640px;
  text-align: center;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.02em;
  color: rgba(244, 239, 230, 0.55);
  line-height: 1.7;
}

/* Mobile */
@media (max-width: 880px) {
  .tickets-grid { grid-template-columns: 1fr; gap: 36px; }
  .tickets-grid .pass-card { order: 1; }
  .tickets-grid .drop-card { order: 2; }
  .hosts-photos { flex-direction: row; gap: 12px; }
  .hosts-photo { flex: 1; height: 220px; }
  .collab-grid { grid-template-columns: 1fr; gap: 36px; }
  .collab-photo { aspect-ratio: 5 / 4; max-width: 340px; }
  .stay-grid { grid-template-columns: 1fr; gap: 28px; }
  .stay-photo { aspect-ratio: 5 / 4; }
  .practical-grid { grid-template-columns: 1fr 1fr; }
  .practical-cell { border-right: none; border-bottom: 1px solid var(--c-line); padding: 28px 20px; }
  .practical-cell:nth-child(odd) { border-right: 1px solid var(--c-line); }
  .practical-cell:last-child, .practical-cell:nth-last-child(2) { border-bottom: none; }
  .included-list li { grid-template-columns: 30px 1fr; }
  .included-list .by { grid-column: 1 / -1; padding-left: 48px; margin-top: 4px; }
}
@media (max-width: 560px) {
  .practical-grid { grid-template-columns: 1fr; }
  .practical-cell { border-right: none; border-bottom: 1px solid var(--c-line); }
  .practical-cell:last-child { border-bottom: none; }
}

/* ---------- Event landing page (legacy generic template — kept for reference) ---------- */
.event-hero {
  min-height: 80vh;
  display: flex;
  align-items: flex-end;
  position: relative;
  overflow: hidden;
  padding-top: 120px;
  padding-bottom: 80px;
  color: var(--c-paper);
}
.event-hero-img {
  position: absolute; inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center top;
  background-color: var(--c-deep);
}
.event-hero-img::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(42,40,35,0.3) 0%, rgba(42,40,35,0.2) 35%, rgba(42,40,35,0.85) 100%);
}
.event-hero .wrap { position: relative; z-index: 2; }
.event-hero .eyebrow { color: var(--c-cream); margin-bottom: 18px; display: block; }
.event-hero h1 {
  font-size: clamp(40px, 5.6vw, 80px);
  color: var(--c-paper);
  font-weight: 300;
  letter-spacing: -0.015em;
  margin-bottom: 18px;
  max-width: 18ch;
}
.event-hero h1 em { font-style: italic; color: var(--c-cream); }
.event-hero .tagline {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(18px, 1.6vw, 24px);
  color: rgba(244, 239, 230, 0.88);
  max-width: 600px;
  margin: 0;
  line-height: 1.4;
}
.event-meta {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
  margin-top: 28px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-cream);
}

.event-details-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid var(--c-line);
}
.event-detail .lab {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-clay);
  margin-bottom: 8px;
}
.event-detail .val {
  font-family: var(--serif);
  font-size: 20px;
  color: var(--c-deep);
  line-height: 1.3;
}

.event-included {
  list-style: none;
  padding: 0;
  margin: 24px 0 0;
  border-top: 1px solid var(--c-line);
}
.event-included li {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 12px;
  align-items: baseline;
  padding: 16px 0;
  border-bottom: 1px solid var(--c-line);
  font-size: 16px;
}
.event-included .num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--c-copper);
}

.event-cta-band {
  background: var(--c-deep);
  color: var(--c-paper);
  text-align: center;
  padding: clamp(64px, 8vw, 120px) var(--gutter);
}
.event-cta-band h2 {
  color: var(--c-paper);
  font-size: clamp(32px, 4vw, 56px);
  font-weight: 300;
  margin: 0 auto 20px;
  max-width: 18ch;
}
.event-cta-band h2 em { font-style: italic; color: var(--c-clay); }
.event-cta-band p {
  color: rgba(244,239,230,0.8);
  font-size: 16px;
  max-width: 480px;
  margin: 0 auto 32px;
}
.event-cta-band .btn-primary { background: var(--c-paper); color: var(--c-deep); }
.event-cta-band .btn-primary:hover { background: var(--c-copper); color: var(--c-paper); }

.event-empty {
  text-align: center;
  padding: clamp(80px, 12vw, 160px) var(--gutter);
}
.event-empty h2 {
  font-size: clamp(32px, 4vw, 56px);
  font-weight: 300;
  margin: 0 auto 24px;
  max-width: 20ch;
}
.event-empty h2 em { font-style: italic; color: var(--c-clay); }
.event-empty p {
  font-size: 17px;
  color: var(--c-ink);
  max-width: 520px;
  margin: 0 auto 32px;
}

/* ---------- Mobile ---------- */
@media (max-width: 880px) {
  .nav-links { display: none; position: fixed; top: 64px; left: 0; right: 0; background: var(--c-paper); flex-direction: column; gap: 0; padding: 20px var(--gutter) 28px; border-bottom: 1px solid var(--c-line); }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 14px 0; border-bottom: 1px solid var(--c-line); width: 100%; font-size: 16px; }
  .nav-links a:last-child { border-bottom: none; }
  .nav-cta { display: none; }
  .nav-toggle {
    display: flex; flex-direction: column; gap: 4px;
    width: 28px; height: 28px;
    align-items: center; justify-content: center;
  }
  .nav-toggle span {
    display: block; width: 22px; height: 1px;
    background: var(--c-deep);
    transition: transform 200ms;
  }

  .hero { min-height: 92vh; padding-top: 100px; }
  .hero-content { grid-template-columns: 1fr; gap: 24px; }
  .hero h1 { font-size: 44px; }
  .scroll-indicator, .hero-meta { display: none; }

  .s-head { grid-template-columns: 1fr; gap: 16px; margin-bottom: 36px; }
  .start-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  /* Mobile order: 10-pass (hero) → drop-in → 20-pass */
  .start-grid .pass-card   { order: 1; }
  .start-grid .drop-card   { order: 2; }
  .start-grid .commit-card { order: 3; }

  .sessions-grid, .approach-grid, .coming-grid, .test-grid, .facilitators-grid {
    grid-template-columns: 1fr; gap: 24px;
  }
  .approach-img, .facilitator-photo { height: 320px; }
  .facilitator-photo { position: static; }
  .expect-grid { grid-template-columns: 1fr; }
  .expect-step { border-right: none; border-bottom: 1px solid var(--c-line); padding: 36px 24px; }
  .expect-step:last-child { border-bottom: none; }
  .bring-grid { grid-template-columns: repeat(3, 1fr); gap: 28px; max-width: 480px; }
  .pack-grid { grid-template-columns: 1fr; max-width: 280px; }
  .safety-cols { grid-template-columns: 1fr; gap: 0; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
  .footer-bottom { flex-direction: column; gap: 12px; align-items: flex-start; }

  .drop-card .price, .commit-card .price { font-size: 56px; }
  .pass-card .price { font-size: 56px; }

  .sticky-join { left: 16px; right: 16px; bottom: 16px; justify-content: center; }
  .sticky-join .price { font-size: 14px; }

  .faq-q { font-size: 20px; padding: 20px 0; }

  .event-details-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
  .event-meta { gap: 18px; font-size: 11px; }
}

.hidden { display: none !important; }
.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;
}