/* ============================================================================
   CLEO — UNIFIED STYLESHEET
   One stylesheet for the entire site. Replaces the previous six shared files
   (site/home/inner-page/photo-grid/retreat-hub/no-dividers) and the four
   page-scoped style.css files, each of which declared its own token family.

   Load order on every page:
     1. Google Fonts  2. this file  3. (nothing else)

   THEMES — set on <body data-theme="...">
     ivory   master site: home, space, story, retreat hub, privacy, terms, 404
     noir    Man Camp: /the-retreat/men/, /reserve/men/
     bloom   Lovergirl: /the-retreat/women/, /reserve/women/

   TYPOGRAPHY
     --font-display  Playfair Display  — H1 only. Echoes the CLEO mark's
                     high-contrast transitional serif.
     --font-heading  Archivo           — H2/H3/eyebrows/buttons/nav. Strong
                     grotesque. Swap this one token for Space Grotesk or
                     Familjen Grotesk to change every subhead at once.
     --font-body     Source Sans 3     — all body copy, lists, forms.
   ========================================================================= */

/* ---------------------------------------------------------------- RESET -- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

img, picture, video { display: block; max-width: 100%; }
button, input, textarea, select { font: inherit; color: inherit; }
a { color: inherit; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* --------------------------------------------------------------- TOKENS -- */
:root {
  /* Type families */
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-heading: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Source Sans 3', 'Helvetica Neue', Arial, sans-serif;

  /* Fluid type scale — 360px → 1440px viewport */
  --step--2: clamp(0.70rem, 0.67rem + 0.14vw, 0.78rem);
  --step--1: clamp(0.82rem, 0.79rem + 0.16vw, 0.92rem);
  --step-0:  clamp(1.02rem, 0.98rem + 0.20vw, 1.15rem);
  --step-1:  clamp(1.18rem, 1.10rem + 0.38vw, 1.42rem);
  --step-2:  clamp(1.40rem, 1.25rem + 0.68vw, 1.85rem);
  --step-3:  clamp(1.70rem, 1.42rem + 1.24vw, 2.55rem);
  --step-4:  clamp(2.05rem, 1.56rem + 2.18vw, 3.50rem);
  --step-5:  clamp(2.50rem, 1.62rem + 3.90vw, 5.00rem);

  /* Spacing — 8px base, fluid at the large end */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-s:   1rem;
  --space-m:   1.5rem;
  --space-l:   2.25rem;
  --space-xl:  3.5rem;
  --space-2xl: clamp(4rem, 3rem + 4vw, 6.5rem);
  --space-3xl: clamp(5.5rem, 3.8rem + 7vw, 10rem);

  /* Measure */
  --measure:       62ch;
  --measure-tight: 46ch;
  --shell:         1320px;
  --shell-narrow:  980px;

  /* Motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --rule: 1px;

  /* Slight corner rounding on CTAs and inputs — enough to soften the slab, not
     enough to read as a pill. */
  --radius: 5px;

  /* Nav height — used for body offset and mobile drawer sizing */
  --nav-h: 68px;

  /* The header is one constant brand bar across the whole site: the CLEO
     wordmark, the active underline and the Reserve CTA all stay this gold
     regardless of the page's theme. Deliberately NOT redefined per theme. */
  --nav-accent: #F5DB8C;
  --nav-bg:      rgba(26, 21, 19, 0.86);
  --nav-ink:     #F7F3EE;
  --nav-ink-dim: rgba(247, 243, 238, 0.74);
  --nav-line:    rgba(247, 243, 238, 0.20);

  /* Footer and sticky CTA are chrome, not page content: they stay dark on every
     theme. They previously used --bg-invert, which on the noir pages inverted to
     light bone while their own text stayed white — an invisible footer. */
  --chrome-bg:      #17130F;
  --chrome-ink:     #F7F3EE;
  --chrome-ink-dim: rgba(247, 243, 238, 0.66);
  --chrome-ink-faint: rgba(247, 243, 238, 0.44);
  --chrome-line:    rgba(247, 243, 238, 0.14);
}

@media (min-width: 900px) {
  :root { --nav-h: 82px; }
}

/* ---------------------------------------------------------------- THEMES -- */

/* IVORY — master site. Warm paper, espresso ink, antique gold. */
[data-theme="ivory"] {
  --bg:          #F7F3EE;
  --bg-sunk:     #EFE8DF;
  --bg-raised:   #FFFCF8;
  --bg-invert:   #2A2320;

  --ink:         #2A2320;
  --ink-muted:   #5E524C;
  --ink-faint:   #8C7E76;
  --ink-invert:  #F7F3EE;

  --accent:      #F5DB8C;
  --accent-deep: #E3C368;
  --accent-soft: #F5DB8C;
  --accent-wash: rgba(245, 219, 140, 0.16);
  /* #F5DB8C as small text on this cream page is ~1.4:1 — unreadable. Gold TEXT
     on light backgrounds uses a darkened tone of the same hue; every fill,
     rule and graphic still uses the logo gold above. */
  --accent-text: #8A6E2A;
  --on-accent:   #241D12;

  --line:        rgba(42, 35, 32, 0.16);
  --line-strong: rgba(42, 35, 32, 0.34);
  --line-accent: rgba(168, 130, 63, 0.42);
  --scrim:       linear-gradient(180deg, rgba(18,14,12,0.62) 0%, rgba(18,14,12,0.42) 40%, rgba(18,14,12,0.86) 100%);
  --on-scrim:    #FFFCF8;
}

/* NOIR — Man Camp. Charcoal, bone, gold. */
[data-theme="noir"] {
  --bg:          #0E0D0C;
  --bg-sunk:     #080807;
  --bg-raised:   #171614;
  --bg-invert:   #F2EDE5;

  --ink:         #F2EDE5;
  --ink-muted:   rgba(242, 237, 229, 0.72);
  --ink-faint:   rgba(242, 237, 229, 0.46);
  --ink-invert:  #0E0D0C;

  --accent:      #F5DB8C;
  --accent-deep: #E3C368;
  --accent-soft: #F5DB8C;
  --accent-wash: rgba(245, 219, 140, 0.10);
  /* Charcoal page — the logo gold reads cleanly as text here. */
  --accent-text: #F5DB8C;
  --on-accent:   #14120F;

  --line:        rgba(242, 237, 229, 0.16);
  --line-strong: rgba(242, 237, 229, 0.34);
  --line-accent: rgba(245, 219, 140, 0.38);
  --scrim:       linear-gradient(180deg, rgba(6,6,5,0.66) 0%, rgba(6,6,5,0.44) 40%, rgba(6,6,5,0.88) 100%);
  --on-scrim:    #F2EDE5;
}

/* BLOOM — Lovergirl. Warm ivory, clay, rose-gold. */
[data-theme="bloom"] {
  --bg:          #FAF6F2;
  --bg-sunk:     #F2E9E2;
  --bg-raised:   #FFFDFB;
  --bg-invert:   #332623;

  --ink:         #332623;
  --ink-muted:   #6B564F;
  --ink-faint:   #9A857D;
  --ink-invert:  #FAF6F2;

  --accent:      #B07B57;
  --accent-deep: #8E5F3F;
  --accent-soft: #D3A184;
  --accent-wash: rgba(176, 123, 87, 0.09);
  --accent-text: #8E5F3F;
  --on-accent:   #FFFDFB;

  --line:        rgba(51, 38, 35, 0.16);
  --line-strong: rgba(51, 38, 35, 0.32);
  --line-accent: rgba(176, 123, 87, 0.38);
  --scrim:       linear-gradient(180deg, rgba(26,17,15,0.60) 0%, rgba(26,17,15,0.40) 40%, rgba(26,17,15,0.84) 100%);
  --on-scrim:    #FFFDFB;
}

/* A section can flip to the inverse of its page theme. */
/* Anything sitting on a dark surface uses the logo gold directly as text. */
.hero, .invert, .site-footer, .sticky-cta, [data-theme="noir"] {
  --accent-text: var(--accent-soft);
}

.invert {
  background: var(--bg-invert);
  color: var(--ink-invert);
  --ink: var(--ink-invert);
  --ink-muted: color-mix(in srgb, var(--ink-invert) 72%, transparent);
  --ink-faint: color-mix(in srgb, var(--ink-invert) 46%, transparent);
  --line: color-mix(in srgb, var(--ink-invert) 16%, transparent);
  --line-strong: color-mix(in srgb, var(--ink-invert) 34%, transparent);
  --bg: var(--bg-invert);
  --bg-raised: color-mix(in srgb, var(--bg-invert) 92%, var(--ink-invert));
}

/* ------------------------------------------------------------------ BASE -- */
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: 400;
  line-height: 1.68;
  letter-spacing: 0.002em;
  padding-top: var(--nav-h);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

::selection { background: var(--accent); color: var(--on-accent); }

:where(a, button, input, textarea, select, summary):focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 3px;
  border-radius: 1px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 2000;
  background: var(--accent);
  color: var(--on-accent);
  padding: var(--space-xs) var(--space-m);
  font-family: var(--font-heading);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
}
.skip-link:focus { left: var(--space-s); top: var(--space-s); }

/* ------------------------------------------------------------ TYPOGRAPHY -- */

/* H1 — Playfair Display. One per page. */
h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--step-5);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.018em;
  text-wrap: balance;
}

/* The italic counter-voice inside an H1. */
.h1 em, h1 em, .accent-italic {
  font-style: italic;
  font-weight: 500;
  color: var(--accent-text);
}

/* H2 — Archivo. The structural voice of the page. */
h2, .h2 {
  font-family: var(--font-heading);
  font-size: var(--step-3);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.014em;
  text-wrap: balance;
}

/* A display-serif H2 for lyrical section openers, where the grotesque
   would read too blunt. Still an <h2> semantically. */
h2.h2--display, .h2--display {
  font-family: var(--font-display);
  font-size: var(--step-4);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.012em;
}
.h2--display em { font-style: italic; color: var(--accent-text); }

h3, .h3 {
  font-family: var(--font-heading);
  font-size: var(--step-1);
  font-weight: 600;
  line-height: 1.24;
  letter-spacing: -0.006em;
}

h4, .h4 {
  font-family: var(--font-heading);
  font-size: var(--step-0);
  font-weight: 600;
  line-height: 1.34;
  letter-spacing: 0.01em;
}

p { max-width: var(--measure); }
p + p { margin-top: var(--space-s); }

.lead {
  font-size: var(--step-1);
  line-height: 1.52;
  color: var(--ink-muted);
  max-width: var(--measure-tight);
}

.muted { color: var(--ink-muted); }
.faint { color: var(--ink-faint); }
.tight { max-width: var(--measure-tight); }

/* Eyebrow — the tracked metadata label that carries the editorial feel. */
.eyebrow {
  display: block;
  /* p{max-width:62ch} would otherwise clamp this to a narrow box that sits
     left, so centring it did nothing. */
  max-width: none;
  font-family: var(--font-heading);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin-bottom: var(--space-s);
}

/* Bracketed metadata — [ TULUM, MEXICO ] */
.meta {
  max-width: none;
  font-family: var(--font-heading);
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.meta--bracket::before { content: '['; margin-right: 0.6em; color: var(--accent-text); }
.meta--bracket::after  { content: ']'; margin-left: 0.6em;  color: var(--accent-text); }

/* Pull quote */
.quote {
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: 400;
  font-style: italic;
  line-height: 1.26;
  letter-spacing: -0.01em;
  max-width: 22ch;
  color: var(--ink);
}
.quote-cite {
  display: block;
  margin-top: var(--space-m);
  font-family: var(--font-heading);
  font-size: var(--step--2);
  font-weight: 600;
  font-style: normal;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-text);
}

/* A run of short lines set as its own rhythm — used in "The Quiet Loss". */
.cadence { margin: var(--space-l) 0; }
.cadence p {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 400;
  line-height: 1.32;
  color: var(--ink);
  max-width: none;
}
.cadence p + p { margin-top: var(--space-2xs); }

.text-center { text-align: center; }
.text-center p, .text-center .lead { margin-left: auto; margin-right: auto; }

/* --------------------------------------------------------------- LAYOUT -- */
.shell {
  width: min(100% - (2 * var(--gutter, 1.5rem)), var(--shell));
  margin-inline: auto;
}
.shell--narrow { --shell: var(--shell-narrow); }
.shell--text   { --shell: 720px; }

@media (min-width: 768px)  { .shell { --gutter: 2.5rem; } }
@media (min-width: 1200px) { .shell { --gutter: 4rem; } }

section { padding-block: var(--space-2xl); }
section.section--tight { padding-block: var(--space-xl); }
section.section--loose { padding-block: var(--space-3xl); }
section.section--sunk  { background: var(--bg-sunk); }

/* Hairline rule — the editorial divider that replaced the old .divider. */
.rule {
  border: 0;
  border-top: var(--rule) solid var(--line);
  margin-block: var(--space-l);
}
.rule--accent { border-color: var(--line-accent); }
.rule--short  { width: 72px; border-color: var(--accent-text); border-top-width: 2px; }
.rule--tight  { margin-block: var(--space-m); }
.text-center .rule--short { margin-inline: auto; }

/* Editorial two-column: a sticky label rail beside the body copy. */
.editorial {
  display: grid;
  gap: var(--space-l);
}
@media (min-width: 900px) {
  .editorial {
    grid-template-columns: minmax(180px, 1fr) minmax(0, 2.4fr);
    gap: var(--space-2xl);
    align-items: start;
  }
  .editorial__rail { position: sticky; top: calc(var(--nav-h) + var(--space-l)); }
}
.editorial__rail .eyebrow { margin-bottom: var(--space-xs); }
.editorial__body > * + * { margin-top: var(--space-m); }
.editorial__body h2 { margin-bottom: var(--space-m); }

/* Alternating text/photo panel. Replaces the old .panel with a proportional
   image instead of an uncapped object-fit stretch (the previous build's
   known over-crop tradeoff on very long sections). */
.panel {
  display: grid;
  gap: var(--space-l);
  align-items: center;
}
@media (min-width: 900px) {
  .panel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2xl);
    /* Photo columns fill the row top to bottom rather than sitting centred. */
    align-items: stretch;
  }
  .panel--reverse .panel__media { order: -1; }
  .panel--wide-text { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
  /* Reversing moves the photo into column 1, so the wide column has to move
     with it — otherwise the photo takes the wide side and the text is squeezed
     into the narrow one. */
  .panel--wide-text.panel--reverse { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }

  /* Text sits vertically centred against the photo. flex-direction:column keeps
     multi-child bodies stacked — a plain `display:flex` here laid an intro block
     and a list out as side-by-side columns in the original build. */
  .panel__body {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

}
.panel__body { min-width: 0; }
.panel__body > * + * { margin-top: var(--space-m); }
.panel__media {
  position: relative;
  /* Without this the column refuses to shrink below the image's min-content
     width and spills over the text column. */
  min-width: 0;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--bg-sunk);
}
.panel__media img { width: 100%; height: 100%; object-fit: cover; }
.panel__media--wide { aspect-ratio: 3 / 2; }
.panel__media--tall { aspect-ratio: 3 / 4; }

/* Photo caption in the editorial register. */
.panel__media figcaption,
.figure figcaption {
  margin-top: var(--space-2xs);
  font-family: var(--font-heading);
  font-size: var(--step--2);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* Full-bleed photo band. */
.band {
  position: relative;
  width: 100%;
  height: clamp(280px, 46vw, 620px);
  overflow: hidden;
  background: var(--bg-sunk);
}
.band img { width: 100%; height: 100%; object-fit: cover; }
.band--tall { height: clamp(360px, 62vw, 780px); }

/* Auto-flowing card grid. */
.grid {
  display: grid;
  gap: var(--space-m);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); }
.grid--tight { gap: var(--space-s); }

/* --------------------------------------------------------------- CARDS -- */
.card {
  display: flex;
  flex-direction: column;
  padding: var(--space-l);
  background: var(--bg-raised);
  border: var(--rule) solid var(--line);
}
/* Push a card's CTA to the bottom so buttons align across a row of cards
   whose copy runs to different lengths. */
.card .btn-row { margin-top: auto; }
.card h3 { margin-bottom: var(--space-2xs); }
.card p { color: var(--ink-muted); max-width: none; }
.card .eyebrow { margin-bottom: var(--space-xs); }

/* Bare card — hairline rule above instead of a full border. */
.card--bare {
  background: transparent;
  border: 0;
  border-top: 2px solid var(--line-accent);
  padding: var(--space-m) 0 0;
}

/* Person card — facilitators, speakers, founder. */
.person {
  display: grid;
  gap: var(--space-m);
}
@media (min-width: 640px) {
  .person { grid-template-columns: minmax(0, 200px) minmax(0, 1fr); align-items: start; }
}
.person__photo { aspect-ratio: 1; overflow: hidden; background: var(--bg-sunk); }
.person__photo img { width: 100%; height: 100%; object-fit: cover; }
.person__role {
  font-family: var(--font-heading);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin-bottom: var(--space-2xs);
}

/* Spec list — the [ label / value ] table used for dates, location, size. */
.specs {
  list-style: none;
  border-top: var(--rule) solid var(--line);
}
.specs li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-s);
  padding-block: var(--space-s);
  border-bottom: var(--rule) solid var(--line);
}
.specs dt, .specs .specs__key {
  font-family: var(--font-heading);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.specs dd, .specs .specs__val {
  font-family: var(--font-heading);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink);
  text-align: right;
}

/* Checklist — "What you get". */
.checklist { list-style: none; }
.checklist li {
  position: relative;
  padding-left: 1.9em;
  padding-block: var(--space-2xs);
  color: var(--ink-muted);
}
.checklist li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.82em;
  width: 1.1em;
  height: 2px;
  background: var(--accent-text);
}
.checklist li strong { color: var(--ink); font-weight: 600; }

/* --------------------------------------------------------------- BUTTONS -- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  padding: 1.05em 2.2em;
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--font-heading);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  border: 2px solid var(--accent);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease),
              color 0.25s var(--ease), transform 0.25s var(--ease);
}
.btn:hover {
  background: var(--accent-deep);
  border-color: var(--accent-deep);
  transform: translateY(-2px);
}
.btn:active { transform: translateY(0); }

.btn--outline {
  background: transparent;
  color: var(--accent-text);
  /* The border follows the TEXT tone, not the fill tone. On the cream pages the
     pale brand gold scores 1.23:1 as a hairline and all but vanishes; on dark
     grounds --accent-text resolves back to the bright gold, so this stays the
     logo colour where the ground can carry it. */
  border-color: var(--accent-text);
}
.btn--outline:hover {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
}

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-strong);
}
.btn--ghost:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }

.btn--block { display: flex; width: 100%; }
.btn--lg { padding: 1em 2.3em; font-size: var(--step--1); }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
  margin-top: var(--space-l);
}
.text-center .btn-row { justify-content: center; }

/* Text link with an underline that grows on hover. */
.link {
  color: var(--accent-text);
  text-decoration: none;
  font-family: var(--font-heading);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-bottom: 2px solid var(--line-accent);
  padding-bottom: 2px;
  transition: border-color 0.25s var(--ease);
}
.link:hover { border-color: var(--accent-text); }

/* ------------------------------------------------------------------- NAV -- */
#site-nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1000;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  gap: var(--space-m);
  padding-inline: var(--space-m);
  background: var(--nav-bg);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: var(--rule) solid var(--nav-line);
}
@media (min-width: 1200px) { #site-nav { padding-inline: 4rem; } }

.nav-logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  height: 60%;
  text-decoration: none;
  color: var(--nav-ink);
}
.nav-logo img { height: 100%; width: auto; }
.nav-logo__word {
  font-family: var(--font-display);
  font-size: var(--step-0);
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--nav-accent);
}

.nav-toggle {
  margin-left: auto;
  background: none;
  border: var(--rule) solid var(--nav-line);
  color: var(--nav-ink);
  font-family: var(--font-heading);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.7em 1.1em;
  border-radius: var(--radius);
  cursor: pointer;
}

.nav-links {
  position: fixed;
  top: var(--nav-h);
  left: 0;
  right: 0;
  height: calc(100dvh - var(--nav-h));
  background: var(--nav-bg);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-l);
  transform: translateX(100%);
  transition: transform 0.3s var(--ease);
  overflow-y: auto;
}
.nav-links.open { transform: translateX(0); }
.nav-links .btn--outline {
  color: var(--nav-accent);
  border-color: var(--nav-accent);
  background: transparent;
}
.nav-links .btn--outline:hover {
  background: var(--nav-accent);
  color: #1A1512;
}
.nav-links a {
  font-family: var(--font-heading);
  font-size: var(--step-1);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--nav-ink-dim);
  transition: color 0.2s var(--ease);
}
.nav-links a:hover, .nav-links a.active { color: var(--nav-accent); }

@media (min-width: 900px) {
  .nav-toggle { display: none; }
  .nav-links {
    position: static;
    height: auto;
    margin-left: auto;
    flex-direction: row;
    align-items: center;
    gap: var(--space-l);
    background: transparent;
    /* The drawer's blur must be cancelled here, or it keeps filtering the nav
       bar behind a now-transparent box and paints a darker rectangle around
       the desktop links. */
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transform: none;
    overflow: visible;
  }
  .nav-links a {
    font-size: var(--step--2);
    letter-spacing: 0.14em;
  }
  .nav-links a.active { position: relative; color: var(--nav-accent); }
  .nav-links a.active::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -0.5em;
    height: 1px;
    background: var(--nav-accent);
  }
  /* The nav CTA is a nav item, not a page button — lighter border, tighter box. */
  .nav-links .btn {
    font-size: var(--step--2);
    letter-spacing: 0.14em;
    padding: 0.7em 1.4em;
    border-width: 1px;
    margin-left: var(--space-2xs);
  }
  .nav-links .btn:hover { transform: none; }
}

/* ------------------------------------------------------------------ HERO -- */
.hero {
  position: relative;
  display: grid;
  align-items: end;
  min-height: min(92svh, 860px);
  padding-block: var(--space-2xl);
  overflow: hidden;
  isolation: isolate;
  color: var(--on-scrim);
}
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--scrim);
}
.hero .eyebrow { color: var(--accent-soft); }
.hero h1 { max-width: 16ch; }
.hero .lead {
  color: rgba(255, 255, 255, 0.88);
  /* wider measure than the body default so the hero line doesn't wrap early */
  max-width: 58ch;
}
.hero__note {
  max-width: 62ch;
  color: rgba(255, 255, 255, 0.78);
}
.hero--center .hero__note { margin-inline: auto; }

/* Hero variant: centered, for the master site's Rediscover Yourself. */
.hero--center {
  align-items: center;
  text-align: center;
  justify-items: center;
}
.hero--center h1 { max-width: 14ch; margin-inline: auto; }
.hero--center .lead { margin-inline: auto; }
.hero--center .btn-row { justify-content: center; }

.hero__mark {
  width: clamp(88px, 14vw, 148px);
  height: auto;
  margin: 0 auto var(--space-m);
}

/* The metadata strip along the bottom of a hero. */
.hero__specs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s) var(--space-l);
  margin-top: var(--space-l);
  padding-top: var(--space-m);
  border-top: var(--rule) solid rgba(255, 255, 255, 0.28);
  list-style: none;
}
.hero--center .hero__specs { justify-content: center; }
.hero__specs li {
  font-family: var(--font-heading);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
}
.hero__specs li span { color: var(--accent-soft); }

/* Inner-page hero — shorter, no photo required. */
.page-head {
  padding-block: var(--space-2xl) var(--space-xl);
  border-bottom: var(--rule) solid var(--line);
}
.page-head h1 { max-width: 18ch; }
.page-head .lead { margin-top: var(--space-m); }

/* ------------------------------------------------------------- PRICING -- */
.price-card {
  display: flex;
  flex-direction: column;
  padding: var(--space-xl) var(--space-l);
  background: var(--bg-raised);
  border: var(--rule) solid var(--line);
}
.price-card--feature {
  border-color: var(--accent-text);
  border-width: 2px;
  position: relative;
}
.price-card--feature::before {
  content: attr(data-flag);
  position: absolute;
  top: 0;
  left: var(--space-l);
  transform: translateY(-50%);
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--font-heading);
  font-size: var(--step--2);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.5em 1em;
}
.price-card__amount {
  font-family: var(--font-display);
  font-size: var(--step-4);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
  margin-block: var(--space-2xs) var(--space-xs);
}
.price-card__note { color: var(--ink-faint); font-size: var(--step--1); }
.price-card .checklist { margin-block: var(--space-m); flex: 1; }
.price-card .btn { margin-top: auto; }

/* ------------------------------------------------------------------ FAQ -- */
.faq { border-top: var(--rule) solid var(--line); }
.faq details { border-bottom: var(--rule) solid var(--line); }
.faq summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-m);
  padding-block: var(--space-m);
  cursor: pointer;
  list-style: none;
  font-family: var(--font-heading);
  font-size: var(--step-0);
  font-weight: 600;
  letter-spacing: -0.004em;
  transition: color 0.2s var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--accent-text); }
.faq summary::after {
  content: '+';
  flex-shrink: 0;
  font-size: var(--step-2);
  font-weight: 400;
  line-height: 1;
  color: var(--accent-text);
  transition: transform 0.25s var(--ease);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > *:not(summary) {
  padding-bottom: var(--space-m);
  color: var(--ink-muted);
  max-width: var(--measure);
}

/* ----------------------------------------------------------------- FORMS -- */
.field { display: grid; gap: var(--space-3xs); margin-bottom: var(--space-m); }
.field label {
  font-family: var(--font-heading);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.field input,
.field textarea,
.field select {
  width: 100%;
  padding: 0.9em 1em;
  background: var(--bg-raised);
  border: var(--rule) solid var(--line-strong);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  border-radius: var(--radius);
  transition: border-color 0.2s var(--ease);
}
.field input:focus,
.field textarea:focus,
.field select:focus { outline: none; border-color: var(--accent-text); }
.field textarea { min-height: 8rem; resize: vertical; }

.form-note {
  font-size: var(--step--1);
  color: var(--ink-faint);
  margin-top: var(--space-s);
  min-height: 1.4em;
}
.hidden-field { position: absolute; left: -9999px; }

/* VIP bar — email capture. It appears twice on most pages, so it stays a
   compact single line: label and field share one row, and it only stacks below
   560px where a one-line layout genuinely cannot fit. */
.vip {
  background: var(--bg-sunk);
  border-block: var(--rule) solid var(--line);
  padding-block: var(--space-m);
}
.vip__inner {
  display: flex;
  /* nowrap, so the field never drops onto a second row — the label shrinks
     instead. It only stacks under the 560px breakpoint below. */
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-m);
}
.vip__text {
  flex: 0 1 auto;
  min-width: 0;
  margin: 0;
  /* No max-width: a ch cap clamped this well below the space actually
     available and wrapped the label onto a second line. */
  max-width: none;
  font-size: var(--step--1);
  line-height: 1.4;
  color: var(--ink-muted);
  /* One line, always — the row is sized so this never needs to wrap above the
     560px stacking breakpoint. */
  white-space: nowrap;
}
/* Below the point where label + field can share a line, the label is allowed to
   wrap again rather than overflow. */
@media (max-width: 899px) {
  .vip__text { white-space: normal; }
}
.vip__text strong { color: var(--accent-text); font-weight: 700; }

.vip form { flex: 0 1 380px; min-width: 250px; }
.vip__row { display: flex; gap: var(--space-3xs); }
.vip__row input {
  flex: 1;
  min-width: 0;
  padding: 0.7em 0.9em;
  background: var(--bg-raised);
  border: var(--rule) solid var(--line-strong);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step--1);
  border-radius: var(--radius);
}
.vip__row input:focus { outline: none; border-color: var(--accent-text); }
.vip__row .btn {
  flex-shrink: 0;
  padding: 0.7em 1.4em;
  font-size: var(--step--2);
  letter-spacing: 0.14em;
}
.vip__row .btn:hover { transform: none; }

/* The status line only takes space once it actually says something, so the bar
   sits on one line at rest. */
.vip .form-note { margin-top: var(--space-2xs); min-height: 0; font-size: var(--step--2); }
.vip .form-note:empty { display: none; }

@media (max-width: 559px) {
  .vip__inner { flex-direction: column; flex-wrap: wrap; text-align: center; }
  .vip form { flex: 1 1 100%; width: 100%; }
  .vip__row { flex-direction: column; gap: var(--space-2xs); }
}

/* ---------------------------------------------------------------- FOOTER -- */
footer.site-footer {
  background: var(--chrome-bg);
  color: var(--chrome-ink);
  --accent-text: var(--accent-soft);
  padding-block: var(--space-2xl) var(--space-l);
  border-top: var(--rule) solid var(--chrome-line);
}
.site-footer__top {
  display: grid;
  gap: var(--space-xl);
  padding-bottom: var(--space-xl);
  border-bottom: var(--rule) solid var(--chrome-line);
}
@media (min-width: 860px) {
  .site-footer__top { grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); }
}
.site-footer__word {
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--accent-soft);
}
.site-footer p { color: var(--chrome-ink-dim); max-width: 34ch; }
.site-footer h4 {
  color: var(--chrome-ink-faint);
  font-size: var(--step--2);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: var(--space-s);
}
.site-footer ul { list-style: none; display: grid; gap: var(--space-2xs); }
.site-footer a {
  color: var(--chrome-ink-dim);
  text-decoration: none;
  font-size: var(--step--1);
  transition: color 0.2s var(--ease);
}
.site-footer a:hover { color: var(--accent-soft); }
.site-footer__base {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s) var(--space-l);
  justify-content: space-between;
  padding-top: var(--space-l);
}
.site-footer__base p,
.site-footer__base a {
  font-family: var(--font-heading);
  font-size: var(--step--2);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--chrome-ink-faint);
  max-width: none;
}
.site-footer__legal { display: flex; flex-wrap: wrap; gap: var(--space-m); }

/* --------------------------------------------------------- STICKY CTA BAR -- */
.sticky-cta {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
  padding: var(--space-s) var(--space-m);
  background: var(--chrome-bg);
  color: var(--chrome-ink);
  --accent-text: var(--accent-soft);
  border-top: 2px solid var(--accent);
  transform: translateY(100%);
  transition: transform 0.35s var(--ease);
}
.sticky-cta.visible { transform: translateY(0); }
.sticky-cta__text {
  font-family: var(--font-heading);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--chrome-ink-dim);
  max-width: none;
}
.sticky-cta__text strong { color: var(--accent-soft); }
.sticky-cta .btn { padding: 0.85em 1.6em; flex-shrink: 0; }
@media (max-width: 599px) {
  .sticky-cta__text { display: none; }
  .sticky-cta .btn { width: 100%; }
}

/* ------------------------------------------------------------ REVEAL FX -- */
[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
[data-reveal].in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; }
}

/* -------------------------------------------------------------- UTILITIES -- */
.stack > * + * { margin-top: var(--space-m); }
.stack--s > * + * { margin-top: var(--space-s); }
.stack--l > * + * { margin-top: var(--space-l); }
.mt-0 { margin-top: 0; }
.mt-l { margin-top: var(--space-l); }
.mt-xl { margin-top: var(--space-xl); }
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------------------------ PRINT -- */
@media print {
  #site-nav, .sticky-cta, .vip, .band { display: none; }
  body { background: #fff; color: #000; padding-top: 0; }
  a { text-decoration: underline; }
}

/* ------------------------------------------------------- GALLERY + LIGHTBOX */
/* Explicit columns, not auto-fit. `repeat(auto-fit, minmax(260px, 1fr))` resolved
   to FIVE columns at a 1320px shell, so the feature (span 2) and the three
   thumbs all crammed into one row — the feature ended up 2/5 wide and its 8:3
   ratio fought the thumbs' 4:3. With four images the layout is fixed, so state
   it: one full-width feature, three equal thumbs beneath. */
.gallery {
  display: grid;
  gap: var(--space-2xs);
  grid-template-columns: 1fr;
}
@media (min-width: 700px) {
  .gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.gallery button {
  display: block;
  padding: 0;
  border: 0;
  background: var(--bg-sunk);
  cursor: zoom-in;
  overflow: hidden;
  aspect-ratio: 4 / 3;
}
.gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease), opacity 0.3s var(--ease);
}
.gallery button:hover img { transform: scale(1.04); opacity: 0.92; }
/* The feature runs the full width of the grid as a banner above the thumbs.
   Must be `button.gallery__feature` — `.gallery button` above is (0,1,1) and
   out-specifies a lone class, so a plain `.gallery__feature` silently kept the
   4:3 ratio and rendered a ~984px-tall slab. */
@media (min-width: 700px) {
  .gallery button.gallery__feature {
    grid-column: 1 / -1;
    aspect-ratio: 21 / 9;
  }
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-m);
  background: rgba(8, 8, 7, 0.94);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.lightbox[hidden] { display: none; }
.lightbox img {
  max-width: min(100%, 1400px);
  max-height: 88vh;
  width: auto;
  height: auto;
  object-fit: contain;
}
.lightbox__close {
  position: absolute;
  top: var(--space-m);
  right: var(--space-m);
  width: 2.6rem;
  height: 2.6rem;
  display: grid;
  place-items: center;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: #fff;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s var(--ease);
}
.lightbox__close:hover { background: rgba(255, 255, 255, 0.14); }

/* ------------------------------------------------------------- LEGAL PROSE */
/* Privacy / Terms. Long-form document rhythm: the H2s act as section marks
   against a hairline, and the copy stays at a comfortable reading measure. */
.legal > * + * { margin-top: var(--space-s); }
.legal h2 {
  font-size: var(--step-1);
  margin-top: var(--space-xl);
  padding-top: var(--space-m);
  border-top: var(--rule) solid var(--line);
}
.legal h2:first-child { margin-top: 0; border-top: 0; padding-top: 0; }
.legal p { color: var(--ink-muted); }
.legal p strong { color: var(--ink); font-weight: 600; }
.legal a:not(.link) { color: var(--accent-text); }

/* ---------------------------------------------------------- TESTIMONIALS */
.testimonial {
  padding: var(--space-l) 0;
  border-top: var(--rule) solid var(--line);
}
.testimonial:last-child { border-bottom: var(--rule) solid var(--line); }
.testimonial p {
  font-size: var(--step-0);
  line-height: 1.7;
  color: var(--ink-muted);
  max-width: var(--measure);
}
.testimonial p::before { content: '\201C'; color: var(--accent-text); }
.testimonial p::after  { content: '\201D'; color: var(--accent-text); }
.testimonial footer {
  margin-top: var(--space-m);
  font-family: var(--font-heading);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.testimonial footer strong { color: var(--accent-text); font-weight: 700; }

/* ------------------------------------------------- DAY-BY-DAY ITINERARY */
.itinerary { counter-reset: day; border-top: var(--rule) solid var(--line); }
.itinerary__day {
  display: grid;
  gap: var(--space-2xs) var(--space-l);
  padding-block: var(--space-l);
  border-bottom: var(--rule) solid var(--line);
}
@media (min-width: 720px) {
  .itinerary__day { grid-template-columns: minmax(120px, 1fr) minmax(0, 4fr); }
}
.itinerary__label {
  font-family: var(--font-heading);
  font-size: var(--step--2);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-text);
  font-variant-numeric: tabular-nums;
}
.itinerary__day h3 { margin-bottom: var(--space-2xs); }
.itinerary__day p { color: var(--ink-muted); }
.itinerary__day p strong { color: var(--ink); font-weight: 600; }

/* ------------------------------------------------- FULL-WIDTH STATEMENT */
/* The one-line refrains the sales copy leans on ("Your life. Your values.
   Your rules."). Set large, in the display serif, with air around it. */
.statement {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-style: italic;
  font-weight: 500;
  line-height: 1.24;
  color: var(--accent-text);
  margin-block: var(--space-l);
  max-width: 24ch;
}
.text-center .statement { margin-inline: auto; }

/* ------------------------------------------------------ TOPIC TAG CLOUD */
.topics {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  list-style: none;
  margin-block: var(--space-l);
}
.topics li {
  padding: 0.55em 1.05em;
  border: var(--rule) solid var(--line-accent);
  font-family: var(--font-heading);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* ------------------------------------------- RETREAT WORDMARK IN THE HERO */
/* The retreat's own wordmark sits at the top of the hero rather than in a
   separate bar under the nav — one less horizontal band above the fold. */
.hero__wordmark {
  width: auto;
  height: clamp(38px, 5.5vw, 64px);
  margin-bottom: var(--space-l);
}
.hero--center .hero__wordmark { margin-inline: auto; }

/* --------------------------------------------------------------- TICKER */
.ticker {
  overflow: hidden;
  padding-block: var(--space-s);
  background: var(--accent);
  color: var(--on-accent);
  border-block: var(--rule) solid var(--accent-deep);
}
.ticker__track {
  display: flex;
  gap: var(--space-2xl);
  width: max-content;
  animation: ticker 38s linear infinite;
}
.ticker span {
  font-family: var(--font-heading);
  font-size: var(--step--2);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  white-space: nowrap;
}
@keyframes ticker {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .ticker__track { animation: none; justify-content: center; width: 100%; }
  .ticker__track span:nth-child(n+2) { display: none; }
}

/* ------------------------------------------------- CHECKOUT MINIMAL NAV */
/* Checkout pages convert better with fewer exits — just a way back. */
.checkout-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
  padding: var(--space-s) var(--space-m);
  background: var(--nav-bg);
  border-bottom: var(--rule) solid var(--nav-line);
}
.checkout-bar a.back {
  font-family: var(--font-heading);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--nav-ink-dim);
  text-decoration: none;
  transition: color 0.2s var(--ease);
}
.checkout-bar a.back:hover { color: var(--nav-accent); }
.checkout-bar img { height: 34px; width: auto; }

/* --------------------------------------------------------- INCLUDED GRID */
/* Title + description pairs, two columns on desktop, hairline separated. */
.included {
  display: grid;
  gap: 0;
  border-top: var(--rule) solid var(--line);
}
@media (min-width: 860px) {
  .included { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-2xl); }
}
.included li {
  list-style: none;
  padding-block: var(--space-m);
  border-bottom: var(--rule) solid var(--line);
}
.included h3 {
  font-size: var(--step-0);
  margin-bottom: var(--space-3xs);
}
.included p { color: var(--ink-muted); font-size: var(--step--1); max-width: none; }

/* ----------------------------------------------------------- TERMS PANEL */
.terms { border-block: var(--rule) solid var(--line); }
.terms summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
  padding-block: var(--space-m);
  cursor: pointer;
  list-style: none;
  font-family: var(--font-heading);
  font-size: var(--step-0);
  font-weight: 700;
  letter-spacing: 0.06em;
}
.terms summary::-webkit-details-marker { display: none; }
.terms summary::after {
  content: '+';
  font-size: var(--step-2);
  font-weight: 400;
  line-height: 1;
  color: var(--accent-text);
  transition: transform 0.25s var(--ease);
}
.terms[open] summary::after { transform: rotate(45deg); }
.terms__body { padding-bottom: var(--space-l); }
.terms__body p {
  font-size: var(--step--1);
  color: var(--ink-muted);
  margin-top: var(--space-s);
}
.terms__body p strong { color: var(--ink); font-weight: 700; }

/* ===================================================== CENTERED TRACKED TEXT */
/* Uppercase text with wide letter-spacing carries a trailing space after its
   last character, so centering it optically shifts the line left by one full
   letter-space. Push it back by the same amount wherever it's centered. */
.text-center .eyebrow,
.hero--center .eyebrow { text-indent: 0.24em; }

.text-center .meta,
.hero--center .meta { text-indent: 0.2em; }

.hero--center .hero__specs li,
.text-center .specs__key,
.text-center .person__role,
.text-center .quote-cite,
.text-center .testimonial footer { text-indent: 0.18em; }

/* A bracketed meta line brackets both ends, so it's already balanced. */
.text-center .meta--bracket,
.hero--center .meta--bracket { text-indent: 0; }



/* =============================================== TEAM / SPEAKER CARDS */
/* The bordered, photo-down-one-side card from the original build, rebuilt on
   the new type scale and tokens. Stacks on mobile, alternates on desktop. */
.team-card {
  border: var(--rule) solid var(--line);
  background: var(--bg-raised);
  overflow: hidden;
  border-radius: var(--radius);
  max-width: 1100px;
  margin: var(--space-l) auto;
}
.team-card > img {
  width: 100%;
  display: block;
  object-fit: cover;
  aspect-ratio: 4 / 5;
}
.team-card__info { padding: var(--space-l) var(--space-m); text-align: center; }
.team-card__name {
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.012em;
  margin-bottom: var(--space-3xs);
}
.team-card__role {
  font-family: var(--font-heading);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin-bottom: var(--space-m);
}
.team-card__bio { color: var(--ink-muted); max-width: none; }
.team-card__bio + .team-card__bio { margin-top: var(--space-s); }
.team-card__quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--accent-text);
  margin-top: var(--space-m);
  padding-top: var(--space-m);
  border-top: var(--rule) solid var(--line-accent);
  max-width: none;
}

@media (min-width: 900px) {
  .team-card { display: flex; align-items: stretch; }
  .team-card--reverse { flex-direction: row-reverse; }
  .team-card > img {
    width: 38%;
    flex-shrink: 0;
    height: auto;
    aspect-ratio: 4 / 5;
  }
  .team-card__info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
    padding: var(--space-xl);
  }
}

/* ============================================ PANEL MEDIA — DESKTOP OVERRIDE */
/* This block MUST stay at the end of the file. `.panel__media` and
   `.panel__media img` are declared further down in the component section, so a
   copy of these rules placed next to the .panel layout block loses to them at
   equal specificity — which silently left `aspect-ratio: 4/5` on the figure.

   On desktop the panel breaks out of .shell to the full viewport width, so the
   photo column runs edge to edge, and the image fills the column completely
   (height:100% + object-fit:cover). An earlier attempt pinned the image with
   position:sticky and capped it to the viewport to limit cropping on very tall
   sections — but sticky only moves where the image PAINTS, not the space it
   occupies, so it left a large empty block under the photo. Filling the column
   is the priority; the crop on the longest sections is the accepted tradeoff. */
@media (min-width: 900px) {
  .panel {
    /* full-bleed breakout — body already has overflow-x:hidden */
    width: 100vw;
    max-width: 100vw;
    margin-inline: calc(50% - 50vw);
    gap: 0;
    align-items: stretch;
  }
  .panel__body {
    padding-block: var(--space-xl);
    padding-inline: clamp(2rem, 5vw, 5.5rem);
  }
  .panel__media,
  .panel__media--wide,
  .panel__media--tall {
    aspect-ratio: auto;
    align-self: stretch;
    min-width: 0;
    min-height: 100%;
  }
  .panel__media img {
    position: static;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}


/* ============================================================ RETREAT TILES */
/* The two retreat choices on the home page and the retreat hub. These sit on a
   pale cream page, so they go dark and photo-led: each tile carries its own
   retreat's palette and reads as its own brand rather than a bordered box. */
.retreat-tiles {
  display: grid;
  gap: var(--space-l);
}
@media (min-width: 860px) {
  .retreat-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.retreat-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border-radius: calc(var(--radius) * 1.6);
  background: var(--tile-bg);
  color: var(--tile-ink);
  box-shadow: 0 1px 2px rgba(20, 16, 12, 0.06), 0 16px 40px -18px rgba(20, 16, 12, 0.45);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.retreat-tile:hover {
  transform: translateY(-4px);
  box-shadow: 0 1px 2px rgba(20, 16, 12, 0.08), 0 26px 56px -20px rgba(20, 16, 12, 0.55);
}

/* Photo header with the retreat name set over it. */
.retreat-tile__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  isolation: isolate;
}
.retreat-tile__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease);
}
.retreat-tile:hover .retreat-tile__media img { transform: scale(1.05); }
.retreat-tile__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(10, 8, 6, 0.34) 0%,
    rgba(10, 8, 6, 0.22) 42%,
    var(--tile-bg) 100%);
}
.retreat-tile__label {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 1;
  padding: var(--space-m) var(--space-l) var(--space-s);
}
.retreat-tile__eyebrow {
  font-family: var(--font-heading);
  font-size: var(--step--2);
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--tile-accent);
  margin-bottom: var(--space-3xs);
}
.retreat-tile__name {
  font-family: var(--font-display);
  font-size: var(--step-4);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.015em;
  color: #FFFDFA;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.5);
}

.retreat-tile__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--space-m) var(--space-l) var(--space-l);
}
.retreat-tile__body p { color: var(--tile-ink-dim); max-width: none; }

/* Spec table on the dark ground. */
.retreat-tile .specs {
  border-top-color: var(--tile-line);
  margin-block: var(--space-l) var(--space-l);
}
.retreat-tile .specs li { border-bottom-color: var(--tile-line); }
.retreat-tile .specs__key { color: var(--tile-ink-faint); }
.retreat-tile .specs__val { color: var(--tile-ink); }

.retreat-tile .btn {
  margin-top: auto;
  display: flex;
  width: 100%;
  background: var(--tile-accent);
  border-color: var(--tile-accent);
  color: var(--tile-on-accent);
}
.retreat-tile .btn:hover {
  background: var(--tile-accent-deep);
  border-color: var(--tile-accent-deep);
  transform: none;
}

/* Man Camp — charcoal and gold. */
.retreat-tile--mancamp {
  --tile-bg:           #14120F;
  --tile-ink:          #F4EFE6;
  --tile-ink-dim:      rgba(244, 239, 230, 0.74);
  --tile-ink-faint:    rgba(244, 239, 230, 0.46);
  --tile-line:         rgba(244, 239, 230, 0.16);
  --tile-accent:       #F5DB8C;
  --tile-accent-deep:  #E3C368;
  --tile-on-accent:    #1A1510;
}

/* Lovergirl — deep clay and rose-gold. */
.retreat-tile--lovergirl {
  --tile-bg:           #2B1D19;
  --tile-ink:          #FBF1EA;
  --tile-ink-dim:      rgba(251, 241, 234, 0.76);
  --tile-ink-faint:    rgba(251, 241, 234, 0.48);
  --tile-line:         rgba(251, 241, 234, 0.16);
  --tile-accent:       #E0B394;
  --tile-accent-deep:  #C9956F;
  --tile-on-accent:    #2B1D19;
}

/* The whole tile is clickable, with the button as the visible affordance. */
.retreat-tile__link::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
}
.retreat-tile:focus-within { outline: 2px solid var(--accent-text); outline-offset: 4px; }