/* =========================================================
   CULTIVATING CALM — Redesign
   Editorial, typography-led, asymmetric, slow.
   ========================================================= */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
body {
  margin: 0;
  background: var(--bg);
}
button { font: inherit; cursor: pointer; border: 0; background: 0; color: inherit; }
img { display: block; max-width: 100%; }
ul, ol { margin: 0; padding: 0; list-style: none; }

/* ----------------------- Reveal primitive ----------------------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 1200ms var(--ease-out), transform 1200ms var(--ease-out);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-img {
  clip-path: inset(100% 0 0 0);
  transition: clip-path 1400ms var(--ease-out);
}
.reveal-img.is-visible { clip-path: inset(0 0 0 0); }

/* ----------------------- Generic layout ----------------------- */
.shell {
  width: 100%;
  max-width: var(--max-w-wide);
  margin: 0 auto;
  padding-inline: var(--gutter);
}
.shell--content { max-width: var(--max-w-content); }

.eyebrow-line {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font: var(--type-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-muted);
}
.eyebrow-line .ndash {
  display: inline-block;
  width: 28px;
  height: 1px;
  background: currentColor;
  opacity: .5;
}
.eyebrow-line .num { font-feature-settings: "tnum"; }

/* numbered section index, e.g. "i" "ii" — used on left rail */
.section-index {
  font: 400 italic clamp(20px, 1.4vw, 24px)/1 var(--font-display);
  color: var(--fg-subtle);
}

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  padding: 22px var(--gutter);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  transition: background var(--dur-2) var(--ease-out),
              backdrop-filter var(--dur-2) var(--ease-out),
              color var(--dur-2) var(--ease-out),
              padding var(--dur-2) var(--ease-out),
              border-color var(--dur-2) var(--ease-out);
  border-bottom: 1px solid transparent;
}
.nav.is-on-dark { color: var(--fg-on-dark); }
.nav.is-on-light { color: var(--fg); }
.nav.is-scrolled {
  background: rgba(251, 247, 240, 0.78);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  color: var(--fg);
  padding: 14px var(--gutter);
  border-bottom-color: var(--rule);
}
.nav__brand {
  display: inline-flex;
  align-items: center;
  color: inherit;
}
.nav__logo {
  height: 42px;
  width: auto;
  display: block;
  transition: filter var(--dur-2) var(--ease-out), height var(--dur-2) var(--ease-out);
}
/* Logo is black-on-transparent. Invert it when nav is on dark hero. */
.nav.is-on-dark .nav__logo { filter: invert(1) brightness(1.05); }
.nav.is-scrolled .nav__logo { height: 32px; filter: none; }

.nav__links {
  display: flex;
  gap: clamp(20px, 3vw, 44px);
  justify-content: center;
}
.nav__links a {
  font: var(--type-small);
  color: inherit;
  opacity: .85;
  position: relative;
  padding: 4px 0;
}
.nav__links a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: currentColor;
  opacity: 0;
  transform: scaleX(.3);
  transform-origin: left;
  transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}
.nav__links a:hover { opacity: 1; }
.nav__links a:hover::after { opacity: .5; transform: scaleX(1); }
.nav__links a.is-active::after {
  opacity: .7;
  transform: scaleX(1);
}
.nav__links a.is-active { opacity: 1; }

.nav__right {
  display: flex;
  gap: 18px;
  align-items: center;
  justify-content: flex-end;
  font: var(--type-small);
}
.nav__right .signin { opacity: .85; }
.nav__right .signin:hover { opacity: 1; }
.nav__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border: 1px solid currentColor;
  border-radius: var(--r-pill);
  opacity: .9;
  transition: background var(--dur-2) var(--ease-out),
              color var(--dur-2) var(--ease-out),
              opacity var(--dur-2) var(--ease-out);
}
.nav__cta:hover { opacity: 1; background: currentColor; color: var(--bg); }
.nav.is-scrolled .nav__cta:hover { color: var(--bg); }

/* mobile nav button */
.nav__burger {
  display: none;
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid currentColor;
  align-items: center; justify-content: center;
  flex-direction: column;
  gap: 4px;
  opacity: .85;
}
.nav__burger span {
  display: block;
  width: 14px; height: 1px; background: currentColor;
}

.nav__mobile {
  position: fixed;
  inset: 0;
  z-index: 49;
  background: var(--bg);
  padding: 96px var(--gutter) 32px;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-12px);
  transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}
.nav__mobile.is-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.nav__mobile-inner {
  display: flex; flex-direction: column;
  gap: 18px;
  padding-top: 32px;
  border-top: 1px solid var(--rule);
}
.nav__mobile-inner a {
  font: 300 clamp(28px, 6vw, 44px)/1.1 var(--font-display);
  letter-spacing: -0.015em;
  color: var(--ink-900);
  padding: 4px 0;
}
.nav__mobile-inner a.is-active { color: var(--clay-600); font-style: italic; }
.nav__mobile-inner .btn-pri { align-self: flex-start; margin-top: 24px; }

@media (max-width: 880px) {
  .nav { grid-template-columns: auto auto; }
  .nav__links, .nav__right .signin, .nav__right .nav__cta { display: none; }
  .nav__burger { display: inline-flex; }
  .nav__right { gap: 12px; }
}

/* ============================================================
   HERO — typography-led editorial
   ============================================================ */
.hero {
  position: relative;
  background: var(--bg-inverse);
  color: var(--fg-on-dark);
  min-height: 100vh;
  padding: clamp(120px, 16vh, 180px) 0 clamp(64px, 9vh, 120px);
  overflow: hidden;
}

/* Faint mandala watermark */
.hero__watermark {
  position: absolute;
  inset: auto -10% -25% auto;
  width: 78vmin;
  height: 78vmin;
  opacity: 0.07;
  pointer-events: none;
  color: var(--bone-100);
}
.hero__watermark svg { width: 100%; height: 100%; }

.hero__grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: end;
  position: relative;
  z-index: 2;
}

/* Left: typographic block */
.hero__type { padding-bottom: 8px; }
.hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  font: var(--type-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-on-dark-muted);
  margin-bottom: clamp(28px, 5vh, 44px);
}
.hero__eyebrow .ndash {
  display: inline-block;
  width: 32px; height: 1px;
  background: currentColor;
  opacity: .55;
}

.hero__title {
  font: 300 clamp(54px, 9.2vw, 148px)/0.96 var(--font-display);
  letter-spacing: -0.025em;
  color: var(--fg-on-dark);
  margin: 0;
  max-width: none;
}
.hero__title em {
  font-style: italic;
  font-weight: 400;
  color: var(--clay-300);
}
.hero__title .indent { display: inline-block; padding-left: clamp(48px, 7vw, 120px); }

.hero__lead {
  margin-top: clamp(28px, 5vh, 44px);
  max-width: 38ch;
  color: var(--fg-on-dark-muted);
  font: 300 clamp(16px, 1.25vw, 19px)/1.65 var(--font-sans);
}

.hero__actions {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: clamp(28px, 4.5vh, 40px);
  align-items: center;
}
.btn-pri {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 26px;
  background: var(--bone-50);
  color: var(--ink-900);
  border-radius: var(--r-pill);
  font: 500 14px/1 var(--font-sans);
  letter-spacing: 0.04em;
  transition: background var(--dur-2) var(--ease-out),
              color var(--dur-2) var(--ease-out),
              transform var(--dur-3) var(--ease-out);
}
.btn-pri:hover { background: var(--clay-500); color: var(--bone-50); }
.btn-pri .arrow {
  font-family: var(--font-display);
  font-size: 17px;
  transition: transform var(--dur-2) var(--ease-out);
}
.btn-pri:hover .arrow { transform: translateX(4px); }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 16px 6px;
  font: 500 14px/1 var(--font-sans);
  letter-spacing: 0.04em;
  color: var(--fg-on-dark);
  opacity: .82;
}
.btn-ghost::before {
  content: "";
  display: inline-block;
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 1px solid currentColor;
  position: relative;
  background:
    radial-gradient(circle at center, currentColor 2px, transparent 2.5px),
    radial-gradient(circle at calc(50% + 1px) 50%, transparent 0, transparent 100%);
  opacity: .85;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
}
.btn-ghost svg { width: 11px; height: 11px; }
.btn-ghost:hover { opacity: 1; }

/* Right: image + meta column */
.hero__visual {
  position: relative;
  align-self: stretch;
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 24px;
  min-height: 56vh;
}
.hero__frame {
  position: relative;
  height: 100%;
  min-height: clamp(360px, 56vh, 620px);
  border-radius: var(--r-arch);
  overflow: hidden;
}
.hero__frame img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(1.02);
}
.hero__frame::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(28,24,20,0) 30%, rgba(28,24,20,.45) 100%);
}

.hero__caption {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: end;
  padding-top: 16px;
  border-top: 1px solid var(--rule-on-dark);
  font: var(--type-small);
  color: var(--fg-on-dark-muted);
}
.hero__caption .place {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(15px, 1.1vw, 17px);
  color: var(--bone-100);
}

/* Bottom meta row across hero */
.hero__meta {
  position: relative;
  z-index: 2;
  margin-top: clamp(48px, 10vh, 96px);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(20px, 3vw, 48px);
  align-items: stretch;
  padding-top: 28px;
  border-top: 1px solid var(--rule-on-dark);
}
.hero__meta-item .hero__meta-label {
  font: var(--type-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-on-dark-muted);
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--rule-on-dark);
}
.hero__meta-item .k {
  font: 400 clamp(28px, 3.2vw, 44px)/1 var(--font-display);
  color: var(--bone-50);
  margin-bottom: 10px;
}
.hero__meta-item .k em {
  font-style: italic;
  color: var(--clay-300);
}
.hero__meta-item .l {
  font: var(--type-small);
  letter-spacing: 0.04em;
  color: var(--fg-on-dark-muted);
  max-width: 22ch;
}

.hero__scroll {
  position: absolute;
  bottom: 24px;
  left: var(--gutter);
  font: var(--type-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-on-dark-muted);
  display: flex;
  align-items: center;
  gap: 10px;
  opacity: 0;
  animation: fadeIn 1600ms 1400ms var(--ease-out) forwards;
}
.hero__scroll::after {
  content: "";
  width: 1px;
  height: 36px;
  background: currentColor;
  display: inline-block;
  transform-origin: top;
  animation: scrollLine 2400ms infinite var(--ease-in-out);
}
@keyframes scrollLine {
  0%   { transform: scaleY(0); transform-origin: top; }
  45%  { transform: scaleY(1); transform-origin: top; }
  55%  { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}
@keyframes fadeIn { to { opacity: 1; } }

@media (max-width: 920px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__visual { min-height: 0; }
  .hero__frame { min-height: 360px; }
  .hero__meta { grid-template-columns: 1fr 1fr; row-gap: 32px; }
  .hero__title .indent { padding-left: 0; display: inline; }
  .hero__scroll { display: none; }
}

/* ============================================================
   01 — NOTICE  (manifesto, asymmetric typography)
   ============================================================ */
.notice {
  padding: clamp(96px, 16vh, 200px) 0 clamp(96px, 14vh, 160px);
  background: var(--bg);
}
.notice__grid {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: clamp(32px, 6vw, 96px);
  align-items: start;
}
.notice__rail {
  position: sticky;
  top: 100px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.notice__rail .ix {
  font: 400 italic 22px/1 var(--font-display);
  color: var(--fg-subtle);
}
.notice__rail .label {
  font: var(--type-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-muted);
}

.notice__body {
  display: grid;
  gap: clamp(24px, 4vh, 48px);
  width: 100%;
}
.notice__statement {
  font: 300 clamp(34px, 4.6vw, 76px)/1.08 var(--font-display);
  letter-spacing: -0.018em;
  color: var(--ink-900);
  max-width: 22ch;
  text-wrap: pretty;
}
.notice__statement em {
  font-style: italic;
  font-weight: 400;
  color: var(--clay-600);
}
.notice__statement .drop {
  display: inline-block;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 1.4em;
  line-height: 0.85;
  color: var(--clay-500);
  vertical-align: baseline;
  margin-right: 0.02em;
}

.notice__support {
  margin-top: clamp(28px, 5vh, 52px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 56px);
  max-width: 64ch;
}
.notice__support p {
  font: 400 clamp(15px, 1.05vw, 17px)/1.7 var(--font-sans);
  color: var(--fg-muted);
  max-width: 32ch;
}
.notice__support p::first-letter { color: var(--clay-600); }

@media (max-width: 880px) {
  .notice__grid { grid-template-columns: 1fr; }
  .notice__rail { position: static; flex-direction: row; align-items: center; gap: 16px; }
  .notice__support { grid-template-columns: 1fr; }
}

/* ============================================================
   PRACTICE — featured, asymmetric, arch image
   ============================================================ */
.practice {
  background: var(--bone-100);
  padding: clamp(96px, 14vh, 180px) 0;
  position: relative;
}
.practice__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 6vw, 96px);
  align-items: center;
}
.practice__media {
  position: relative;
  height: clamp(440px, 78vh, 760px);
  border-radius: var(--r-arch);
  overflow: hidden;
  transform: translateY(0);
  box-shadow: var(--shadow-3);
}
.practice__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 2200ms var(--ease-out);
}
.practice__media:hover img { transform: scale(1.03); }

/* corner accent — a small terracotta seal */
.practice__seal {
  position: absolute;
  top: 24px; left: 24px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  background: rgba(28,24,20,0.32);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--bone-50);
  border-radius: var(--r-pill);
  font: 500 11px/1 var(--font-sans);
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.practice__seal::before {
  content: "";
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--clay-300);
  box-shadow: 0 0 0 4px rgba(217,178,153,0.18);
}

.practice__copy { padding: clamp(8px, 2vh, 24px) 0; }
.practice__eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  font: var(--type-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-muted);
  margin-bottom: clamp(24px, 4vh, 40px);
}
.practice__eyebrow .ndash {
  display: inline-block;
  width: 28px; height: 1px;
  background: currentColor;
  opacity: .55;
}
.practice__title {
  font: 300 clamp(40px, 5.4vw, 88px)/1.02 var(--font-display);
  letter-spacing: -0.02em;
  margin: 0;
}
.practice__title em { font-style: italic; font-weight: 400; color: var(--clay-600); }
.practice__lead {
  margin: clamp(24px, 4vh, 40px) 0 0;
  font: 300 clamp(17px, 1.3vw, 21px)/1.65 var(--font-sans);
  color: var(--ink-900);
  max-width: 38ch;
}
.practice__detail {
  margin-top: clamp(28px, 5vh, 48px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 32px;
  max-width: 460px;
  padding-top: 24px;
  border-top: 1px solid var(--rule);
}
.practice__detail dt {
  font: var(--type-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-subtle);
  margin-bottom: 8px;
}
.practice__detail dd {
  font: 400 italic clamp(17px, 1.2vw, 20px)/1.3 var(--font-display);
  color: var(--ink-900);
  margin: 0;
}
.practice__actions {
  margin-top: clamp(32px, 5vh, 48px);
  display: flex;
  gap: 22px;
  align-items: center;
  flex-wrap: wrap;
}
.btn-dark {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 28px;
  background: var(--ink-900);
  color: var(--bone-50);
  border-radius: var(--r-pill);
  font: 500 13px/1 var(--font-sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: background var(--dur-2) var(--ease-out);
}
.btn-dark:hover { background: var(--clay-700); color: var(--bone-50); }
.btn-dark .arrow { font-family: var(--font-display); font-size: 16px; text-transform: none; transition: transform var(--dur-2) var(--ease-out); }
.btn-dark:hover .arrow { transform: translateX(4px); }

.link-arrow {
  font: 500 13px/1 var(--font-sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-900);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--rule-strong);
  white-space: nowrap;
  transition: color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out);
}
.link-arrow:hover { color: var(--clay-600); border-color: var(--clay-500); }
.link-arrow .arrow { font-family: var(--font-display); text-transform: none; font-size: 16px; transition: transform var(--dur-2) var(--ease-out); }
.link-arrow:hover .arrow { transform: translateX(4px); }

@media (max-width: 980px) {
  .practice__grid { grid-template-columns: 1fr; }
  .practice__media { height: 70vh; max-height: 620px; }
}

/* ============================================================
   QUOTE — large editorial pull quote
   ============================================================ */
.quote-block {
  padding: clamp(120px, 20vh, 220px) 0;
  background: var(--bg);
}
.quote-block__inner {
  max-width: 1180px;
  margin: 0 auto;
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: clamp(24px, 4vw, 56px);
}
.quote-block__mark {
  font: 300 italic clamp(80px, 8vw, 140px)/0.8 var(--font-display);
  color: var(--clay-500);
}
.quote-block__text {
  font: 300 italic clamp(30px, 3.6vw, 60px)/1.22 var(--font-display);
  color: var(--ink-900);
  letter-spacing: -0.012em;
  max-width: 22ch;
  text-wrap: balance;
}
.quote-block__text em {
  font-style: normal;
  font-weight: 400;
  color: var(--clay-600);
}
.quote-block__cite {
  margin-top: clamp(28px, 5vh, 52px);
  display: flex;
  align-items: center;
  gap: 16px;
  font: var(--type-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-muted);
}
.quote-block__cite .ndash {
  width: 28px; height: 1px; background: currentColor; opacity: .55;
}

@media (max-width: 720px) {
  .quote-block__inner { grid-template-columns: 1fr; gap: 12px; }
  .quote-block__mark { font-size: 80px; }
}

/* ============================================================
   SERIES — 3-up editorial grid w/ asymmetric vertical rhythm
   ============================================================ */
.series {
  background: var(--bone-100);
  padding: clamp(96px, 14vh, 180px) 0 clamp(80px, 12vh, 140px);
}
.series__head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 5vw, 80px);
  align-items: end;
  margin-bottom: clamp(56px, 9vh, 96px);
}
.series__head h2 {
  font: 300 clamp(40px, 5vw, 84px)/1.02 var(--font-display);
  letter-spacing: -0.02em;
  max-width: 14ch;
}
.series__head h2 em { font-style: italic; font-weight: 400; color: var(--clay-600); }
.series__head-meta {
  display: grid;
  gap: 18px;
  padding-bottom: 12px;
}
.series__head-meta .eyebrow-line { color: var(--fg-muted); }
.series__head-meta p {
  font: 400 clamp(15px, 1.05vw, 17px)/1.7 var(--font-sans);
  color: var(--fg-muted);
  max-width: 42ch;
}

.series__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 3vw, 48px);
  align-items: start;
}
.series__card {
  display: flex;
  flex-direction: column;
  gap: 20px;
  transition: transform var(--dur-3) var(--ease-out);
}

.series__media {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
  aspect-ratio: 4 / 5.4;
}
.series__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 2200ms var(--ease-out);
}
.series__card:hover .series__media img { transform: scale(1.04); }
.series__media-tag {
  position: absolute;
  bottom: 14px; left: 14px;
  font: var(--type-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--bone-50);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: rgba(28,24,20,0.42);
  backdrop-filter: blur(8px);
  border-radius: var(--r-pill);
}
.series__copy { padding: 4px 4px 0; }
.series__num {
  font: 400 italic clamp(18px, 1.3vw, 22px)/1 var(--font-display);
  color: var(--clay-600);
  letter-spacing: 0.02em;
}
.series__title {
  margin: 14px 0 10px;
  font: 400 clamp(22px, 2vw, 30px)/1.2 var(--font-display);
  letter-spacing: -0.01em;
  color: var(--ink-900);
  min-height: 2.4em;
  text-wrap: balance;
}
.series__title em { font-style: italic; }
.series__meta {
  display: flex;
  gap: 14px;
  font: var(--type-small);
  color: var(--fg-muted);
  align-items: center;
  margin-bottom: 12px;
  flex-wrap: nowrap;
  white-space: nowrap;
}
.series__meta .dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .5; }
.series__desc {
  font: 400 15px/1.65 var(--font-sans);
  color: var(--fg-muted);
  max-width: 30ch;
  margin-bottom: 18px;
  min-height: calc(1.65em * 3);
}
.series__link {
  font: 500 13px/1 var(--font-sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-900);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--rule);
  align-self: flex-start;
  white-space: nowrap;
  transition: color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out);
}
.series__link:hover { color: var(--clay-600); border-color: var(--clay-500); }
.series__link .arrow { font-family: var(--font-display); text-transform: none; transition: transform var(--dur-2) var(--ease-out); }
.series__link:hover .arrow { transform: translateX(4px); }

.series__foot {
  margin-top: clamp(64px, 10vh, 112px);
  padding-top: 32px;
  border-top: 1px solid var(--rule);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 24px;
}
.series__foot .all {
  font: 400 italic clamp(20px, 1.8vw, 26px)/1.2 var(--font-display);
  color: var(--ink-900);
  max-width: 40ch;
}

@media (max-width: 900px) {
  .series__head { grid-template-columns: 1fr; }
  .series__grid { grid-template-columns: 1fr; gap: 56px; }
}

/* ============================================================
   METHOD — editorial spread, image left + text right, with index list
   ============================================================ */
.method {
  background: var(--bg);
  padding: clamp(120px, 16vh, 200px) 0;
}
.method__grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(32px, 6vw, 96px);
  align-items: start;
}
.method__media {
  position: sticky;
  top: 100px;
  height: clamp(540px, 78vh, 720px);
  border-radius: 4px;
  overflow: hidden;
}
.method__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(1.0) contrast(1.02);
}
.method__copy {}
.method__title {
  font: 300 clamp(40px, 5vw, 84px)/1.02 var(--font-display);
  letter-spacing: -0.02em;
  margin-bottom: clamp(24px, 5vh, 48px);
  max-width: 12ch;
}
.method__title em { font-style: italic; font-weight: 400; color: var(--clay-600); }
.method__intro {
  font: 300 clamp(17px, 1.25vw, 21px)/1.65 var(--font-sans);
  color: var(--fg-muted);
  max-width: 38ch;
  margin-bottom: clamp(40px, 7vh, 72px);
}

.method__list {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--rule);
}
.method__item {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 24px;
  padding: clamp(24px, 4vh, 40px) 0;
  border-bottom: 1px solid var(--rule);
  align-items: baseline;
  transition: background var(--dur-2) var(--ease-out);
  cursor: pointer;
}
.method__item:hover { background: rgba(28,24,20,0.015); }
.method__item .ix {
  font: 400 italic clamp(28px, 2.6vw, 40px)/1 var(--font-display);
  color: var(--clay-500);
}
.method__item h3 {
  font: 400 clamp(22px, 1.7vw, 28px)/1.25 var(--font-display);
  letter-spacing: -0.01em;
  color: var(--ink-900);
  margin-bottom: 12px;
  text-wrap: balance;
}
.method__item p {
  font: 400 15px/1.65 var(--font-sans);
  color: var(--fg-muted);
  max-width: 40ch;
}

@media (max-width: 980px) {
  .method__grid { grid-template-columns: 1fr; }
  .method__media { position: static; height: 56vh; }
}

/* ============================================================
   RITUAL — today's practice / audio module
   ============================================================ */
.ritual {
  background: var(--ink-900);
  color: var(--fg-on-dark);
  padding: clamp(120px, 18vh, 200px) 0;
  position: relative;
  overflow: hidden;
}
.ritual__watermark {
  position: absolute;
  inset: -10% -10% auto auto;
  width: 64vmin; height: 64vmin;
  opacity: .06;
  color: var(--bone-50);
  pointer-events: none;
}
.ritual__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}
.ritual__copy {}
.ritual__date {
  font: var(--type-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-on-dark-muted);
  margin-bottom: clamp(24px, 4vh, 36px);
  display: flex;
  align-items: center;
  gap: 14px;
}
.ritual__date .ndash { display: inline-block; width: 28px; height: 1px; background: currentColor; opacity: .5; }
.ritual__title {
  font: 300 clamp(40px, 5.4vw, 84px)/1.02 var(--font-display);
  letter-spacing: -0.02em;
  margin-bottom: clamp(24px, 4vh, 36px);
  color: var(--bone-50);
}
.ritual__title em { font-style: italic; font-weight: 400; color: var(--clay-300); }
.ritual__lead {
  font: 300 clamp(16px, 1.2vw, 19px)/1.65 var(--font-sans);
  color: var(--fg-on-dark-muted);
  max-width: 40ch;
  margin-bottom: clamp(40px, 6vh, 56px);
}
.ritual__meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 24px;
  padding-top: 28px;
  border-top: 1px solid var(--rule-on-dark);
  max-width: 480px;
}
.ritual__meta dt {
  font: var(--type-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-on-dark-muted);
  margin-bottom: 6px;
}
.ritual__meta dd {
  font: 400 italic clamp(16px, 1.1vw, 19px)/1.3 var(--font-display);
  color: var(--bone-50);
  margin: 0;
}

/* Player card */
.player {
  background: rgba(244,238,228,0.05);
  border: 1px solid var(--rule-on-dark);
  border-radius: 4px;
  padding: clamp(28px, 4vh, 44px);
  display: grid;
  gap: clamp(28px, 4vh, 40px);
  backdrop-filter: blur(4px);
}
.player__art {
  aspect-ratio: 16/9;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}
.player__art img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: brightness(0.92);
}
.player__art::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(28,24,20,0) 30%, rgba(28,24,20,.4) 100%);
}
.player__art-bottom {
  position: absolute;
  inset: auto 18px 16px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 2;
}
.player__art-bottom .tag {
  font: var(--type-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--bone-50);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: rgba(28,24,20,0.5);
  border-radius: var(--r-pill);
  backdrop-filter: blur(6px);
}
.player__art-bottom .pulse {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--clay-300);
  box-shadow: 0 0 0 0 rgba(217,178,153,0.6);
  animation: pulse 2400ms infinite var(--ease-out);
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(217,178,153,0.55); }
  100% { box-shadow: 0 0 0 14px rgba(217,178,153,0); }
}

.player__controls {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  align-items: center;
  gap: 22px;
}
.player__play {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--bone-50);
  color: var(--ink-900);
  display: grid;
  place-items: center;
  transition: background var(--dur-2) var(--ease-out), transform var(--dur-3) var(--ease-out);
}
.player__play:hover { background: var(--clay-500); color: var(--bone-50); }
.player__play svg { width: 16px; height: 16px; }
.player__track {
  display: grid;
  gap: 10px;
}
.player__track h4 {
  font: 400 clamp(17px, 1.2vw, 21px)/1.2 var(--font-display);
  color: var(--bone-50);
  letter-spacing: -0.01em;
  margin: 0;
}
.player__bar {
  position: relative;
  height: 2px;
  background: rgba(244,238,228,0.18);
  border-radius: 1px;
  overflow: hidden;
  cursor: pointer;
}
.player__bar::before {
  content: "";
  position: absolute;
  inset: 0 var(--progress, 70%) 0 0;
  background: var(--clay-300);
}
.player__bar-meta {
  display: flex;
  justify-content: space-between;
  font: 400 12px/1 var(--font-mono);
  color: var(--fg-on-dark-muted);
  letter-spacing: 0.04em;
}
.player__icons {
  display: flex; gap: 14px; color: var(--fg-on-dark-muted);
}
.player__icons button {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: grid; place-items: center;
  transition: color var(--dur-2) var(--ease-out), background var(--dur-2) var(--ease-out);
}
.player__icons button:hover { color: var(--bone-50); background: rgba(244,238,228,0.06); }
.player__icons svg { width: 16px; height: 16px; }

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

/* ============================================================
   VOICES — testimonial editorial
   ============================================================ */
.voices {
  padding: clamp(120px, 18vh, 200px) 0;
  background: var(--bg);
}
.voices__head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: end;
  gap: clamp(28px, 5vw, 80px);
  margin-bottom: clamp(56px, 9vh, 96px);
}
.voices__head h2 {
  font: 300 clamp(40px, 5vw, 84px)/1.02 var(--font-display);
  letter-spacing: -0.02em;
  max-width: 12ch;
}
.voices__head h2 em { font-style: italic; font-weight: 400; color: var(--clay-600); }
.voices__nav {
  display: flex; gap: 12px;
  justify-content: flex-end;
  align-items: center;
}
.voices__nav button {
  width: 56px; height: 56px;
  border-radius: 50%;
  border: 1px solid var(--rule-strong);
  display: grid; place-items: center;
  transition: background var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out);
  color: var(--ink-900);
}
.voices__nav button:hover { background: var(--ink-900); color: var(--bone-50); border-color: var(--ink-900); }
.voices__nav svg { width: 18px; height: 18px; }
.voices__counter {
  font: 400 italic clamp(18px, 1.4vw, 22px)/1 var(--font-display);
  color: var(--fg-muted);
  margin-right: 8px;
}
.voices__counter b { color: var(--ink-900); font-weight: 400; font-style: normal; font-feature-settings: "tnum"; }

.voices__stage {
  position: relative;
  min-height: clamp(360px, 56vh, 520px);
}
.voice {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
  opacity: 0;
  transition: opacity 600ms var(--ease-out);
  pointer-events: none;
}
.voice.is-active { opacity: 1; pointer-events: auto; }
.voice__media {
  height: clamp(360px, 60vh, 540px);
  border-radius: var(--r-arch);
  overflow: hidden;
  background: var(--bone-200);
}
.voice__media img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.voice__copy {}
.voice__quote {
  font: 300 italic clamp(24px, 2.8vw, 40px)/1.32 var(--font-display);
  color: var(--ink-900);
  max-width: 22ch;
  letter-spacing: -0.012em;
  margin-bottom: clamp(28px, 5vh, 44px);
  text-wrap: balance;
}
.voice__quote em {
  font-style: normal;
  font-weight: 400;
  color: var(--clay-600);
}
.voice__cite {
  display: grid;
  gap: 4px;
  padding-top: 24px;
  border-top: 1px solid var(--rule);
}
.voice__cite .name {
  font: 400 clamp(17px, 1.2vw, 20px)/1.3 var(--font-display);
  font-style: italic;
  color: var(--ink-900);
}
.voice__cite .meta {
  font: var(--type-small);
  color: var(--fg-muted);
}

@media (max-width: 880px) {
  .voices__head { grid-template-columns: 1fr; }
  .voices__nav { justify-content: flex-start; }
  .voice { grid-template-columns: 1fr; }
  .voice__media { height: 56vh; max-height: 480px; }
  .voices__stage { min-height: 0; }
  .voice { position: relative; display: none; }
  .voice.is-active { display: grid; }
}

/* ============================================================
   MOODBOARD — four small image moments
   ============================================================ */
.moodboard {
  background: var(--bg);
  padding: clamp(96px, 14vh, 160px) 0 clamp(72px, 11vh, 120px);
}
.moodboard__head {
  display: grid;
  gap: 18px;
  margin-bottom: clamp(40px, 7vh, 72px);
  max-width: 60ch;
}
.moodboard__title {
  font: 300 clamp(28px, 2.8vw, 44px)/1.18 var(--font-display);
  letter-spacing: -0.015em;
  color: var(--ink-900);
  max-width: 26ch;
  text-wrap: balance;
}
.moodboard__title em { font-style: italic; font-weight: 400; color: var(--clay-600); }

.moodboard__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 2.4vw, 32px);
  align-items: end;
}
.moodboard__item {
  display: flex;
  flex-direction: column;
  gap: 14px;
  /* Editorial vertical rhythm — gentle stagger */
}
.moodboard__item:nth-child(1) { transform: translateY(0); }
.moodboard__item:nth-child(2) { transform: translateY(clamp(20px, 4vh, 44px)); }
.moodboard__item:nth-child(3) { transform: translateY(clamp(-14px, -2vh, -8px)); }
.moodboard__item:nth-child(4) { transform: translateY(clamp(28px, 5vh, 56px)); }

.moodboard__frame {
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 4px;
  background: var(--bone-200);
}
.moodboard__frame img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 2200ms var(--ease-out);
}
.moodboard__item:hover .moodboard__frame img { transform: scale(1.04); }
.moodboard__item figcaption {
  display: grid;
  gap: 4px;
}
.moodboard__item .ix {
  font: var(--type-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-subtle);
}
.moodboard__item .cap {
  font: 400 italic clamp(15px, 1.05vw, 17px)/1.3 var(--font-display);
  color: var(--ink-900);
}

@media (max-width: 880px) {
  .moodboard__grid { grid-template-columns: 1fr 1fr; gap: 24px; }
  .moodboard__item:nth-child(n) { transform: translateY(0); }
}

/* ============================================================
   JOURNAL — reading list  (with thumbnails)
   ============================================================ */
.journal {
  background: var(--bone-100);
  padding: clamp(120px, 16vh, 200px) 0;
}
.journal__head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 5vw, 80px);
  align-items: end;
  margin-bottom: clamp(48px, 8vh, 80px);
}
.journal__head h2 {
  font: 300 clamp(40px, 5vw, 84px)/1.02 var(--font-display);
  letter-spacing: -0.02em;
  max-width: 12ch;
}
.journal__head h2 em { font-style: italic; font-weight: 400; color: var(--clay-600); }
.journal__head .all {
  justify-self: end;
}
.journal__list {
  display: grid;
  border-top: 1px solid var(--rule);
}
.journal__row {
  display: grid;
  grid-template-columns: 56px 96px 1.6fr 0.9fr 120px 24px;
  gap: clamp(18px, 2.4vw, 40px);
  align-items: center;
  padding: clamp(20px, 3.5vh, 32px) 0;
  border-bottom: 1px solid var(--rule);
  position: relative;
  cursor: pointer;
  transition: padding-left var(--dur-2) var(--ease-out);
}
.journal__row:hover { padding-left: 16px; }
.journal__row .ix {
  font: 400 italic clamp(20px, 1.5vw, 26px)/1 var(--font-display);
  color: var(--fg-subtle);
}
.journal__row .thumb {
  width: 96px; height: 96px;
  overflow: hidden;
  border-radius: 4px;
  background: var(--bone-200);
  position: relative;
}
.journal__row .thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1800ms var(--ease-out);
}
.journal__row:hover .thumb img { transform: scale(1.06); }
.journal__row .ttl {
  font: 400 clamp(20px, 1.8vw, 28px)/1.18 var(--font-display);
  letter-spacing: -0.01em;
  color: var(--ink-900);
  max-width: 28ch;
  transition: color var(--dur-2) var(--ease-out);
  align-self: center;
}
.journal__row .ttl em { font-style: italic; }
.journal__row:hover .ttl { color: var(--clay-700); }
.journal__row .topic {
  font: var(--type-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-muted);
}
.journal__row .read {
  font: var(--type-small);
  color: var(--fg-muted);
  text-align: right;
  font-feature-settings: "tnum";
}
.journal__row .arrow {
  font: 400 22px/1 var(--font-display);
  color: var(--ink-900);
  transition: transform var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out);
}
.journal__row:hover .arrow { transform: translateX(6px); color: var(--clay-600); }

@media (max-width: 880px) {
  .journal__head { grid-template-columns: 1fr; }
  .journal__head .all { justify-self: start; }
  .journal__row {
    grid-template-columns: 64px 1fr 24px;
    gap: 14px 18px;
    row-gap: 8px;
  }
  .journal__row .ix { display: none; }
  .journal__row .thumb { width: 64px; height: 64px; }
  .journal__row .topic, .journal__row .read {
    grid-column: 2; text-align: left;
    font-size: 11px;
  }
}

/* ============================================================
   BEGIN — large invitation CTA
   ============================================================ */
.begin {
  position: relative;
  background: var(--ink-900);
  color: var(--fg-on-dark);
  padding: clamp(140px, 22vh, 240px) 0;
  overflow: hidden;
}
.begin__bg {
  position: absolute; inset: 0;
  background-image: url("assets/img-meditation-sunset.jpg");
  background-size: cover;
  background-position: center;
  opacity: 0.32;
  filter: blur(0px);
}
.begin__scrim {
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 50% 60%, rgba(28,24,20,0) 0%, rgba(28,24,20,0.65) 60%, rgba(28,24,20,0.92) 100%);
}
.begin__inner {
  position: relative;
  z-index: 2;
  display: grid;
  gap: clamp(32px, 6vh, 56px);
  justify-items: center;
  text-align: center;
}
.begin__eyebrow {
  font: var(--type-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-on-dark-muted);
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.begin__eyebrow .ndash { width: 28px; height: 1px; background: currentColor; opacity: .5; display: inline-block; }
.begin__title {
  font: 300 clamp(54px, 8vw, 132px)/0.98 var(--font-display);
  letter-spacing: -0.025em;
  color: var(--bone-50);
  max-width: 14ch;
  margin: 0;
}
.begin__title em { font-style: italic; font-weight: 400; color: var(--clay-300); }
.begin__lead {
  font: 300 clamp(17px, 1.3vw, 21px)/1.65 var(--font-sans);
  color: var(--fg-on-dark-muted);
  max-width: 42ch;
}
.begin__actions {
  display: flex; gap: 18px; flex-wrap: wrap; justify-content: center;
}

/* ============================================================
   NEWSLETTER — quiet form  (with image)
   ============================================================ */
.news {
  padding: clamp(96px, 14vh, 160px) 0 clamp(80px, 12vh, 140px);
  background: var(--ink-900);
  color: var(--fg-on-dark);
  border-top: 1px solid var(--rule-on-dark);
}
.news__inner {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}
.news__media {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-arch);
  overflow: hidden;
  background: var(--bone-200);
  max-height: 520px;
}
.news__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: brightness(0.95);
}
.news__media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(28,24,20,0) 50%, rgba(28,24,20,0.5) 100%);
}
.news__media-caption {
  position: absolute;
  inset: auto 18px 16px 18px;
  z-index: 2;
  font: 400 italic clamp(15px, 1.1vw, 17px)/1.3 var(--font-display);
  color: var(--bone-50);
  display: flex; justify-content: space-between; align-items: end;
}
.news__media-caption .num {
  font-family: var(--font-sans);
  font-style: normal;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-on-dark-muted);
}
.news__body {
  display: grid;
  gap: clamp(28px, 5vh, 48px);
}
.news__copy h3 {
  font: 300 clamp(28px, 3vw, 48px)/1.05 var(--font-display);
  letter-spacing: -0.015em;
  margin-bottom: 14px;
  color: var(--bone-50);
}
.news__copy h3 em { font-style: italic; font-weight: 400; color: var(--clay-300); }
.news__copy p {
  font: 400 clamp(14px, 1vw, 16px)/1.65 var(--font-sans);
  color: var(--fg-on-dark-muted);
  max-width: 44ch;
}
.news__form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px;
  align-items: end;
}
.news__field {
  display: grid; gap: 8px;
}
.news__field label {
  font: var(--type-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: lowercase;
  color: var(--fg-on-dark-muted);
}
.news__field input {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rule-on-dark);
  color: var(--bone-50);
  padding: 12px 0;
  font: 400 17px/1.2 var(--font-display);
  font-style: italic;
  outline: 0;
  transition: border-color var(--dur-2) var(--ease-out);
}
.news__field input::placeholder { color: rgba(244,238,228,0.35); }
.news__field input:focus { border-color: var(--clay-300); }
.news__submit {
  align-self: end;
  font: 500 13px/1 var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--bone-50);
  padding: 12px 0;
  border-bottom: 1px solid var(--rule-on-dark);
  display: inline-flex;
  gap: 12px;
  align-items: center;
  transition: color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out);
}
.news__submit:hover { color: var(--clay-300); border-color: var(--clay-300); }
.news__submit .arrow { font-family: var(--font-display); font-size: 18px; transition: transform var(--dur-2) var(--ease-out); }
.news__submit:hover .arrow { transform: translateX(4px); }

@media (max-width: 880px) {
  .news__inner { grid-template-columns: 1fr; gap: 40px; }
  .news__media { max-height: 320px; aspect-ratio: 16/10; }
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  background: var(--ink-900);
  color: var(--fg-on-dark);
  padding: clamp(72px, 10vh, 120px) 0 clamp(32px, 5vh, 56px);
  border-top: 1px solid var(--rule-on-dark);
}
.footer__top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: clamp(28px, 4vw, 64px);
  padding-bottom: clamp(56px, 9vh, 96px);
  border-bottom: 1px solid var(--rule-on-dark);
}
.footer__brand {
  display: flex; flex-direction: column;
  gap: 18px;
}
.footer__logo {
  width: clamp(180px, 18vw, 240px);
  height: auto;
  display: block;
  /* Footer is dark — invert logo to white */
  filter: invert(1) brightness(1.05);
}
.footer__brand p {
  margin-top: 10px;
  font: 400 italic clamp(15px, 1.05vw, 17px)/1.5 var(--font-display);
  color: var(--fg-on-dark-muted);
  max-width: 28ch;
}
.footer__col h5 {
  font: var(--type-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-on-dark-muted);
  margin: 0 0 22px;
  font-weight: 500;
}
.footer__col ul { display: grid; gap: 14px; }
.footer__col a {
  font: 400 15px/1.4 var(--font-sans);
  color: var(--bone-50);
  opacity: .82;
  transition: opacity var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out);
}
.footer__col a:hover { opacity: 1; color: var(--clay-300); }

.footer__bottom {
  margin-top: clamp(32px, 5vh, 56px);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px;
  align-items: center;
  font: var(--type-small);
  color: var(--fg-on-dark-muted);
}
.footer__bottom .legal {
  display: flex; gap: 22px; flex-wrap: wrap;
}
.footer__bottom .legal a:hover { color: var(--clay-300); }
.footer__bottom .credit { font-family: var(--font-display); font-style: italic; }

@media (max-width: 880px) {
  .footer__top { grid-template-columns: 1fr 1fr; row-gap: 48px; }
  .footer__bottom { grid-template-columns: 1fr; }
}

/* ============================================================
   BEGIN MODAL
   ============================================================ */
.modal {
  position: fixed; inset: 0;
  z-index: 100;
  display: grid; place-items: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur-3) var(--ease-out);
}
.modal.is-open { opacity: 1; pointer-events: auto; }
.modal__scrim {
  position: absolute; inset: 0;
  background: rgba(28,24,20,0.55);
  backdrop-filter: blur(10px);
}
.modal__dialog {
  position: relative;
  width: min(580px, calc(100vw - 32px));
  background: var(--bone-50);
  border-radius: 4px;
  padding: clamp(36px, 5vw, 56px);
  transform: translateY(20px);
  transition: transform var(--dur-3) var(--ease-out);
  box-shadow: var(--shadow-3);
}
.modal.is-open .modal__dialog { transform: translateY(0); }
.modal__close {
  position: absolute;
  top: 18px; right: 18px;
  width: 40px; height: 40px;
  border-radius: 50%;
  display: grid; place-items: center;
  color: var(--fg-muted);
  font: 300 24px/1 var(--font-display);
  transition: background var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out);
}
.modal__close:hover { background: rgba(28,24,20,0.06); color: var(--ink-900); }
.modal__eyebrow {
  font: var(--type-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-muted);
  display: inline-flex;
  align-items: center; gap: 12px;
  margin-bottom: 18px;
}
.modal__eyebrow .ndash { display: inline-block; width: 24px; height: 1px; background: currentColor; opacity: .55; }
.modal__title {
  font: 300 clamp(32px, 4vw, 48px)/1.08 var(--font-display);
  letter-spacing: -0.015em;
  margin-bottom: 14px;
}
.modal__title em { font-style: italic; font-weight: 400; color: var(--clay-600); }
.modal__lead {
  font: 400 15px/1.65 var(--font-sans);
  color: var(--fg-muted);
  margin-bottom: 28px;
  max-width: 42ch;
}
.modal__form {
  display: grid; gap: 18px;
}
.modal__row { display: grid; gap: 6px; }
.modal__row label {
  font: var(--type-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: lowercase;
  color: var(--fg-muted);
}
.modal__row input {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rule-strong);
  padding: 10px 0;
  font: 400 17px/1.2 var(--font-display);
  font-style: italic;
  outline: 0;
  transition: border-color var(--dur-2) var(--ease-out);
}
.modal__row input:focus { border-color: var(--clay-500); }
.modal__submit {
  margin-top: 14px;
  justify-self: start;
}

/* ============================================================
   Section anchors / utility
   ============================================================ */
section { scroll-margin-top: 80px; }

/* ============================================================
   Tweaks (accent variants)
   ============================================================ */
.theme-clay  { --accent: var(--clay-500); --accent-hover: var(--clay-600); --accent-ink: var(--clay-700); --accent-soft: var(--clay-300); }
.theme-moss  { --accent: var(--moss-500); --accent-hover: var(--moss-700); --accent-ink: var(--moss-700); --accent-soft: var(--moss-300); }
.theme-ochre { --accent: var(--ochre-500); --accent-hover: var(--ochre-600); --accent-ink: var(--ochre-600); --accent-soft: var(--ochre-400); }

/* When using a non-clay theme, recolor things that hard-coded clay vars.
   We retarget the actual usage points via these overrides. */
.theme-moss .hero__title em,
.theme-moss .notice__statement em,
.theme-moss .practice__title em,
.theme-moss .quote-block__text em,
.theme-moss .series__head h2 em,
.theme-moss .method__title em,
.theme-moss .journal__head h2 em,
.theme-moss .voices__head h2 em,
.theme-moss .news__copy h3 em,
.theme-moss .ritual__title em,
.theme-moss .begin__title em,
.theme-moss .modal__title em,
.theme-moss .voice__quote em,
.theme-moss .footer__brand .mandala { color: var(--moss-500); }

.theme-moss .hero__title em,
.theme-moss .ritual__title em,
.theme-moss .begin__title em { color: var(--moss-300); }

.theme-moss .notice__statement .drop,
.theme-moss .method__item .ix,
.theme-moss .quote-block__mark,
.theme-moss .series__num,
.theme-moss .practice__seal::before,
.theme-moss .player__play:hover { color: var(--moss-500); }
.theme-moss .player__play:hover { background: var(--moss-500); color: var(--bone-50); }
.theme-moss .player__bar::before { background: var(--moss-300); }
.theme-moss .practice__seal::before,
.theme-moss .player__art-bottom .pulse { background: var(--moss-300); box-shadow: 0 0 0 4px rgba(169,180,152,0.18); }
.theme-moss .btn-pri:hover { background: var(--moss-500); }
.theme-moss ::selection { background: var(--moss-300); }

.theme-ochre .hero__title em,
.theme-ochre .notice__statement em,
.theme-ochre .practice__title em,
.theme-ochre .quote-block__text em,
.theme-ochre .series__head h2 em,
.theme-ochre .method__title em,
.theme-ochre .journal__head h2 em,
.theme-ochre .voices__head h2 em,
.theme-ochre .news__copy h3 em,
.theme-ochre .ritual__title em,
.theme-ochre .begin__title em,
.theme-ochre .modal__title em,
.theme-ochre .voice__quote em,
.theme-ochre .footer__brand .mandala { color: var(--ochre-500); }
.theme-ochre .hero__title em,
.theme-ochre .ritual__title em,
.theme-ochre .begin__title em { color: var(--ochre-400); }
.theme-ochre .notice__statement .drop,
.theme-ochre .method__item .ix,
.theme-ochre .quote-block__mark,
.theme-ochre .series__num { color: var(--ochre-500); }
.theme-ochre .btn-pri:hover { background: var(--ochre-500); }
.theme-ochre ::selection { background: var(--ochre-400); }

/* Density tweak */
.density-airy section { padding-block: clamp(140px, 22vh, 280px); }
.density-tight section { padding-block: clamp(72px, 11vh, 140px); }

/* ============================================================
   Print-ish reset for safety
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================
   PAGE HEADER — large editorial header for inner pages
   ============================================================ */
.ph {
  position: relative;
  background: var(--bg-inverse);
  color: var(--fg-on-dark);
  padding: clamp(180px, 24vh, 260px) 0 clamp(96px, 14vh, 140px);
  overflow: hidden;
}
.ph__watermark {
  position: absolute;
  inset: auto -10% -25% auto;
  width: 78vmin;
  height: 78vmin;
  opacity: 0.06;
  pointer-events: none;
  color: var(--bone-100);
}
.ph__watermark svg { width: 100%; height: 100%; }
.ph__inner {
  position: relative; z-index: 2;
  display: grid;
  gap: clamp(28px, 5vh, 44px);
}
.ph__eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  font: var(--type-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-on-dark-muted);
  flex-wrap: wrap;
}
.ph__eyebrow .ndash { display: inline-block; width: 32px; height: 1px; background: currentColor; opacity: .55; }
.ph__title {
  font: 300 clamp(48px, 8.4vw, 132px)/0.98 var(--font-display);
  letter-spacing: -0.025em;
  color: var(--bone-50);
  margin: 0;
  max-width: 16ch;
  text-wrap: balance;
}
.ph__title em { font-style: italic; font-weight: 400; color: var(--clay-300); }
.ph__lead {
  font: 300 clamp(17px, 1.3vw, 21px)/1.65 var(--font-sans);
  color: var(--fg-on-dark-muted);
  max-width: 52ch;
}

.theme-moss .ph__title em { color: var(--moss-300); }
.theme-ochre .ph__title em { color: var(--ochre-400); }

/* ============================================================
   TEASERS — home, three independent worlds
   ============================================================ */
.teasers {
  background: var(--bg);
  padding: clamp(96px, 14vh, 180px) 0;
}
.teasers__head {
  display: grid;
  gap: 18px;
  margin-bottom: clamp(48px, 8vh, 88px);
  max-width: var(--max-w-content);
}
.teasers__title {
  font: 300 clamp(40px, 5vw, 84px)/1.02 var(--font-display);
  letter-spacing: -0.02em;
  max-width: 14ch;
}
.teasers__title em { font-style: italic; font-weight: 400; color: var(--clay-600); }
.theme-moss .teasers__title em { color: var(--moss-500); }
.theme-ochre .teasers__title em { color: var(--ochre-500); }

.teasers__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
}
.teaser {
  display: flex;
  flex-direction: column;
  gap: 22px;
  text-decoration: none;
  color: inherit;
  transition: transform var(--dur-3) var(--ease-out);
}
.teaser__media {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--bone-200);
}
.teaser__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 2200ms var(--ease-out);
}
.teaser:hover .teaser__media img { transform: scale(1.04); }
.teaser__copy { padding: 4px 4px 0; }
.teaser__eyebrow {
  font: var(--type-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-subtle);
  margin-bottom: 12px;
}
.teaser__title {
  font: 400 clamp(26px, 2.3vw, 36px)/1.15 var(--font-display);
  letter-spacing: -0.01em;
  color: var(--ink-900);
  margin: 0 0 14px;
  min-height: 2.3em;
  text-wrap: balance;
}
.teaser__title em { font-style: italic; }
.teaser__desc {
  font: 400 15px/1.65 var(--font-sans);
  color: var(--fg-muted);
  max-width: 34ch;
  margin-bottom: 22px;
  min-height: calc(1.65em * 3);
}
.teaser__cta {
  font: 500 13px/1 var(--font-sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-900);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--rule-strong);
  transition: color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out);
  align-self: flex-start;
}
.teaser__cta .arrow { font-family: var(--font-display); text-transform: none; transition: transform var(--dur-2) var(--ease-out); }
.teaser:hover .teaser__cta { color: var(--clay-600); border-color: var(--clay-500); }
.teaser:hover .teaser__cta .arrow { transform: translateX(4px); }

@media (max-width: 900px) {
  .teasers__grid { grid-template-columns: 1fr; gap: 56px; }
}

/* ============================================================
   RETREATS PAGE
   ============================================================ */
.retreats__intro {
  background: var(--bg);
  padding: clamp(72px, 11vh, 120px) 0 clamp(48px, 7vh, 80px);
}
.retreats__intro-inner {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}
.retreats__intro-copy {
  display: grid;
  gap: 28px;
}
.retreats__intro h2 {
  font: 300 clamp(28px, 3vw, 44px)/1.18 var(--font-display);
  letter-spacing: -0.012em;
  max-width: 36ch;
  text-wrap: balance;
}
.retreats__intro h2 em { font-style: italic; font-weight: 400; color: var(--clay-600); }
.theme-moss .retreats__intro h2 em { color: var(--moss-500); }
.theme-ochre .retreats__intro h2 em { color: var(--ochre-500); }
.retreats__intro-media {
  aspect-ratio: 5 / 4;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--bone-200);
  max-height: 380px;
}
.retreats__intro-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 2400ms var(--ease-out);
}
.retreats__intro-media:hover img { transform: scale(1.03); }

@media (max-width: 880px) {
  .retreats__intro-inner { grid-template-columns: 1fr; }
}

.retreats__list {
  background: var(--bg);
  padding: clamp(40px, 6vh, 80px) 0 clamp(96px, 14vh, 160px);
}
.retreats__card {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
  padding: clamp(56px, 9vh, 96px) 0;
  border-top: 1px solid var(--rule);
}
.retreats__card:nth-child(even) {
  grid-template-columns: 1fr 1.1fr;
}
.retreats__card:nth-child(even) .retreats__card-media { order: 2; }
.retreats__card:last-child { border-bottom: 1px solid var(--rule); }

.retreats__card-media {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-arch);
  overflow: hidden;
  background: var(--bone-200);
  max-height: 640px;
}
.retreats__card-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 2400ms var(--ease-out);
}
.retreats__card:hover .retreats__card-media img { transform: scale(1.03); }

.retreats__card-status {
  position: absolute;
  top: 18px; left: 18px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  background: rgba(28,24,20,0.42);
  backdrop-filter: blur(8px);
  color: var(--bone-50);
  border-radius: var(--r-pill);
  font: 500 11px/1 var(--font-sans);
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.retreats__card-status .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--clay-300);
  box-shadow: 0 0 0 4px rgba(217,178,153,0.18);
}
.retreats__card-status.status-waitlist .dot { background: var(--ochre-400); box-shadow: 0 0 0 4px rgba(212,168,106,0.18); }
.retreats__card-status.status-open .dot { background: var(--moss-300); box-shadow: 0 0 0 4px rgba(169,180,152,0.18); }

.retreats__card-body { padding: 8px 0; }
.retreats__card-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  font: var(--type-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-muted);
  margin-bottom: 22px;
  flex-wrap: wrap;
}
.retreats__card-meta .ndash { display: inline-block; width: 28px; height: 1px; background: currentColor; opacity: .55; }
.retreats__card-title {
  font: 300 clamp(36px, 4.6vw, 72px)/1.02 var(--font-display);
  letter-spacing: -0.02em;
  margin: 0 0 12px;
}
.retreats__card-title em { font-style: italic; font-weight: 400; color: var(--clay-600); }
.theme-moss .retreats__card-title em { color: var(--moss-500); }
.theme-ochre .retreats__card-title em { color: var(--ochre-500); }
.retreats__card-place {
  font: 400 italic clamp(17px, 1.2vw, 20px)/1.3 var(--font-display);
  color: var(--ink-900);
  margin-bottom: clamp(20px, 3vh, 28px);
}
.retreats__card-desc {
  font: 400 clamp(15px, 1.05vw, 17px)/1.7 var(--font-sans);
  color: var(--fg-muted);
  max-width: 46ch;
  margin-bottom: clamp(24px, 4vh, 36px);
}
.retreats__card-detail {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 16px 24px;
  padding-top: 24px;
  margin: 0 0 clamp(28px, 4vh, 40px);
  border-top: 1px solid var(--rule);
  max-width: 460px;
}
.retreats__card-detail dt {
  font: var(--type-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-subtle);
  margin-bottom: 6px;
}
.retreats__card-detail dd {
  font: 400 italic clamp(16px, 1.1vw, 19px)/1.3 var(--font-display);
  color: var(--ink-900);
  margin: 0;
}
.retreats__card-actions {
  display: flex; gap: 22px; align-items: center; flex-wrap: wrap;
}

@media (max-width: 980px) {
  .retreats__card,
  .retreats__card:nth-child(even) { grid-template-columns: 1fr; }
  .retreats__card:nth-child(even) .retreats__card-media { order: 0; }
}

/* Rhythm — day shape */
.retreats__rhythm {
  background: var(--bone-100);
  padding: clamp(96px, 14vh, 160px) 0;
}
.retreats__rhythm-inner {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}
.retreats__rhythm-copy {
  position: sticky; top: 100px;
}
.retreats__rhythm-copy h2 {
  font: 300 clamp(40px, 5vw, 80px)/1.02 var(--font-display);
  letter-spacing: -0.02em;
  margin: 22px 0 28px;
  max-width: 14ch;
}
.retreats__rhythm-copy h2 em { font-style: italic; font-weight: 400; color: var(--clay-600); }
.theme-moss .retreats__rhythm-copy h2 em { color: var(--moss-500); }
.theme-ochre .retreats__rhythm-copy h2 em { color: var(--ochre-500); }
.retreats__rhythm-copy p {
  font: 400 clamp(15px, 1.05vw, 17px)/1.7 var(--font-sans);
  color: var(--fg-muted);
  max-width: 40ch;
}
.retreats__rhythm-list {
  display: grid;
  border-top: 1px solid var(--rule);
}
.retreats__rhythm-list li {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 24px;
  align-items: baseline;
  padding: clamp(20px, 3vh, 32px) 0;
  border-bottom: 1px solid var(--rule);
}
.retreats__rhythm-list .t {
  font: 400 italic clamp(22px, 1.8vw, 30px)/1 var(--font-display);
  color: var(--clay-600);
  font-feature-settings: "tnum";
}
.theme-moss .retreats__rhythm-list .t { color: var(--moss-500); }
.theme-ochre .retreats__rhythm-list .t { color: var(--ochre-500); }
.retreats__rhythm-list .l {
  font: 400 clamp(16px, 1.15vw, 19px)/1.5 var(--font-sans);
  color: var(--ink-900);
}

@media (max-width: 880px) {
  .retreats__rhythm-inner { grid-template-columns: 1fr; }
  .retreats__rhythm-copy { position: static; }
}

/* What's included */
.retreats__inc {
  background: var(--bg);
  padding: clamp(96px, 14vh, 160px) 0;
}
.retreats__inc-head {
  display: grid;
  gap: 18px;
  margin-bottom: clamp(48px, 7vh, 80px);
  max-width: 60ch;
}
.retreats__inc-head h2 {
  font: 300 clamp(36px, 4.4vw, 72px)/1.04 var(--font-display);
  letter-spacing: -0.02em;
}
.retreats__inc-head h2 em { font-style: italic; font-weight: 400; color: var(--clay-600); }
.theme-moss .retreats__inc-head h2 em { color: var(--moss-500); }
.theme-ochre .retreats__inc-head h2 em { color: var(--ochre-500); }

.retreats__inc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 4vw, 48px);
}
.retreats__inc-card {
  padding: clamp(32px, 4vh, 48px) 0 0;
  border-top: 1px solid var(--rule-strong);
}
.retreats__inc-card h3 {
  font: 400 italic clamp(22px, 1.7vw, 28px)/1.25 var(--font-display);
  letter-spacing: -0.01em;
  color: var(--ink-900);
  margin-bottom: 24px;
}
.retreats__inc-card ul {
  display: grid; gap: 14px;
}
.retreats__inc-card li {
  font: 400 clamp(15px, 1.05vw, 17px)/1.55 var(--font-sans);
  color: var(--fg-muted);
  padding-left: 22px;
  position: relative;
}
.retreats__inc-card li::before {
  content: "—";
  position: absolute;
  left: 0; top: 0;
  font-family: var(--font-display);
  color: var(--clay-500);
  font-style: italic;
}
.theme-moss .retreats__inc-card li::before { color: var(--moss-500); }
.theme-ochre .retreats__inc-card li::before { color: var(--ochre-500); }

@media (max-width: 880px) {
  .retreats__inc-grid { grid-template-columns: 1fr; gap: 40px; }
}

/* Retreats final CTA */
.retreats__cta {
  position: relative;
  background: var(--ink-900);
  color: var(--fg-on-dark);
  padding: clamp(140px, 22vh, 240px) 0;
  overflow: hidden;
}
.retreats__cta-bg {
  position: absolute; inset: 0;
  background-image: url("assets/retreat-pool.jpeg");
  background-size: cover;
  background-position: center;
  opacity: 0.32;
}
.retreats__cta-scrim {
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 50% 50%, rgba(28,24,20,0) 0%, rgba(28,24,20,0.7) 70%, rgba(28,24,20,0.92) 100%);
}
.retreats__cta-inner {
  position: relative; z-index: 2;
  display: grid;
  gap: clamp(28px, 5vh, 48px);
  justify-items: center; text-align: center;
}
.retreats__cta h2 {
  font: 300 clamp(48px, 7vw, 110px)/0.98 var(--font-display);
  letter-spacing: -0.025em;
  color: var(--bone-50);
  max-width: 14ch;
  margin: 0;
}
.retreats__cta h2 em { font-style: italic; font-weight: 400; color: var(--clay-300); }
.theme-moss .retreats__cta h2 em { color: var(--moss-300); }
.theme-ochre .retreats__cta h2 em { color: var(--ochre-400); }
.retreats__cta p {
  font: 300 clamp(16px, 1.2vw, 19px)/1.65 var(--font-sans);
  color: var(--fg-on-dark-muted);
  max-width: 44ch;
}

/* ============================================================
   GALLERY PAGE
   ============================================================ */
.gallery {
  background: var(--bg);
  padding: clamp(72px, 11vh, 120px) 0 clamp(96px, 14vh, 160px);
}
.gallery__filters {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: clamp(56px, 9vh, 96px);
  padding-bottom: 32px;
  border-bottom: 1px solid var(--rule);
}
.gallery__filter {
  display: inline-flex; align-items: baseline;
  gap: 8px;
  padding: 10px 18px;
  border: 1px solid var(--rule);
  border-radius: var(--r-pill);
  font: 500 13px/1 var(--font-sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-900);
  background: transparent;
  transition: background var(--dur-2) var(--ease-out),
              color var(--dur-2) var(--ease-out),
              border-color var(--dur-2) var(--ease-out);
}
.gallery__filter:hover { background: rgba(28,24,20,0.04); }
.gallery__filter.is-active {
  background: var(--ink-900);
  color: var(--bone-50);
  border-color: var(--ink-900);
}
.gallery__filter .n {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 0;
  opacity: .65;
  text-transform: none;
}

/* Uniform-size grid */
.gallery__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.6vw, 36px);
}
.gallery__item {
  display: flex; flex-direction: column;
  gap: 14px;
  cursor: pointer;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 900ms var(--ease-out), transform 900ms var(--ease-out);
}
.gallery__item.is-visible { opacity: 1; transform: translateY(0); }

.gallery__frame {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--bone-200);
}

.gallery__frame img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 2200ms var(--ease-out);
}
.gallery__item:hover .gallery__frame img { transform: scale(1.04); }

.gallery__item figcaption {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  align-items: baseline;
  padding: 0 4px;
}
.gallery__item .ix {
  font: 400 italic 14px/1 var(--font-display);
  color: var(--fg-subtle);
  font-feature-settings: "tnum";
}
.gallery__item .cap {
  font: 400 italic clamp(15px, 1.1vw, 17px)/1.3 var(--font-display);
  color: var(--ink-900);
}
.gallery__item .loc {
  font: var(--type-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-subtle);
  text-align: right;
}

@media (max-width: 980px) {
  .gallery__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .gallery__grid { grid-template-columns: 1fr; }
  .gallery__item figcaption { grid-template-columns: 1fr auto; }
  .gallery__item .ix { display: none; }
}

/* Lightbox */
.lightbox {
  position: fixed; inset: 0;
  z-index: 200;
  background: rgba(28, 24, 20, 0.94);
  backdrop-filter: blur(8px);
  display: grid;
  place-items: center;
  padding: clamp(40px, 6vh, 80px) clamp(32px, 6vw, 96px);
  animation: lbFade 280ms var(--ease-out);
}
@keyframes lbFade { from { opacity: 0; } to { opacity: 1; } }
.lightbox__close,
.lightbox__prev,
.lightbox__next {
  position: absolute;
  width: 52px; height: 52px;
  border-radius: 50%;
  border: 1px solid rgba(244,238,228,0.32);
  color: var(--bone-50);
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 22px;
  background: transparent;
  transition: background var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out);
}
.lightbox__close { top: 24px; right: 24px; font-size: 30px; }
.lightbox__prev  { left: 24px; top: 50%; transform: translateY(-50%); }
.lightbox__next  { right: 24px; top: 50%; transform: translateY(-50%); }
.lightbox__close:hover,
.lightbox__prev:hover,
.lightbox__next:hover {
  background: rgba(244,238,228,0.08);
  border-color: var(--bone-50);
}
.lightbox__figure {
  display: grid; gap: 18px;
  max-width: min(1100px, 90vw);
  max-height: 84vh;
  justify-items: center;
}
.lightbox__figure img {
  max-width: 100%;
  max-height: 76vh;
  object-fit: contain;
  border-radius: 4px;
}
.lightbox__figure figcaption {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  gap: 18px;
  color: var(--fg-on-dark-muted);
  font: var(--type-small);
}
.lightbox__figure .cap {
  font: 400 italic clamp(15px, 1.1vw, 18px)/1.3 var(--font-display);
  color: var(--bone-50);
  text-align: center;
  flex: 1;
}

/* ============================================================
   CONTACT PAGE
   ============================================================ */
.contact {
  background: var(--bg);
  padding: clamp(72px, 11vh, 120px) 0 clamp(96px, 14vh, 160px);
}
.contact__inner {
  display: grid;
  grid-template-columns: 0.85fr 1.4fr;
  gap: clamp(48px, 7vw, 120px);
  align-items: start;
}

/* Meta column */
.contact__meta {
  position: sticky;
  top: 100px;
  display: grid;
  gap: clamp(32px, 5vh, 56px);
  padding: clamp(32px, 5vh, 48px) 0;
  border-top: 1px solid var(--rule);
  position: relative;
  overflow: hidden;
}
.contact__meta-watermark {
  position: absolute;
  inset: auto -30% -10% auto;
  width: 60vmin; height: 60vmin;
  opacity: 0.05;
  color: var(--ink-900);
  pointer-events: none;
  z-index: 0;
}
.contact__meta-watermark svg { width: 100%; height: 100%; }
.contact__meta-block { position: relative; z-index: 1; }
.contact__meta-block h4 {
  font: var(--type-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-subtle);
  margin: 0 0 14px;
}
.contact__meta-block p {
  font: 400 clamp(15px, 1.05vw, 17px)/1.55 var(--font-sans);
  color: var(--ink-900);
  max-width: 32ch;
}
.contact__meta-block a {
  color: var(--ink-900);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  transition: color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out);
}
.contact__meta-block a:hover { color: var(--clay-600); border-color: var(--clay-500); }

/* Form */
.contact__form-wrap {
  background: var(--bone-100);
  padding: clamp(40px, 6vh, 64px) clamp(32px, 4vw, 56px);
  border-radius: var(--r-lg);
  min-height: 320px;
}
.contact__form { display: grid; gap: clamp(24px, 4vh, 36px); }
.contact__form-head { display: grid; gap: 14px; }
.contact__form-head h2 {
  font: 300 clamp(32px, 3.6vw, 56px)/1.05 var(--font-display);
  letter-spacing: -0.02em;
  margin: 0;
}
.contact__form-head h2 em { font-style: italic; font-weight: 400; color: var(--clay-600); }
.theme-moss .contact__form-head h2 em { color: var(--moss-500); }
.theme-ochre .contact__form-head h2 em { color: var(--ochre-500); }

.contact__reason {
  border: 0; padding: 0; margin: 0;
  display: grid; gap: 12px;
}
.contact__reason legend {
  font: var(--type-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: lowercase;
  color: var(--fg-muted);
  padding: 0;
}
.contact__reason-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.contact__reason label {
  display: inline-flex; align-items: center;
  padding: 10px 18px;
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-pill);
  cursor: pointer;
  font: 400 14px/1 var(--font-sans);
  color: var(--ink-900);
  background: transparent;
  transition: background var(--dur-2) var(--ease-out),
              color var(--dur-2) var(--ease-out),
              border-color var(--dur-2) var(--ease-out);
}
.contact__reason label input { position: absolute; opacity: 0; pointer-events: none; }
.contact__reason label:hover { background: rgba(28,24,20,0.04); }
.contact__reason label.is-active {
  background: var(--ink-900);
  color: var(--bone-50);
  border-color: var(--ink-900);
}

.contact__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.contact__field {
  display: grid;
  gap: 8px;
  position: relative;
}
.contact__field label {
  font: var(--type-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: lowercase;
  color: var(--fg-muted);
}
.contact__field input,
.contact__field textarea,
.contact__field select {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rule-strong);
  padding: 12px 0;
  font: 400 17px/1.4 var(--font-display);
  font-style: italic;
  outline: 0;
  color: var(--ink-900);
  resize: vertical;
  transition: border-color var(--dur-2) var(--ease-out);
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0;
}
.contact__field select { font-style: italic; cursor: pointer; }
.contact__field input::placeholder,
.contact__field textarea::placeholder {
  color: rgba(28,24,20,0.32);
  font-style: italic;
}
.contact__field input:focus,
.contact__field textarea:focus,
.contact__field select:focus {
  border-color: var(--clay-500);
}
.theme-moss .contact__field input:focus,
.theme-moss .contact__field textarea:focus,
.theme-moss .contact__field select:focus { border-color: var(--moss-500); }
.theme-ochre .contact__field input:focus,
.theme-ochre .contact__field textarea:focus,
.theme-ochre .contact__field select:focus { border-color: var(--ochre-500); }

.contact__field.is-error input,
.contact__field.is-error textarea {
  border-color: var(--clay-600);
}
.contact__err {
  font: 400 italic 14px/1.3 var(--font-display);
  color: var(--clay-700);
  margin-top: 4px;
}
.contact__count {
  position: absolute;
  right: 0; top: 4px;
  font: 400 11px/1 var(--font-mono);
  color: var(--fg-subtle);
  letter-spacing: 0.06em;
}

.contact__actions {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  padding-top: 12px;
  border-top: 1px solid var(--rule);
}
.contact__actions .btn-dark:disabled {
  opacity: 0.4; cursor: not-allowed;
}
.contact__small {
  font: 400 13px/1.55 var(--font-sans);
  color: var(--fg-subtle);
  max-width: 38ch;
}

/* Thanks state */
.contact__thanks {
  display: grid;
  gap: 18px;
  padding: clamp(20px, 4vh, 36px) 0;
}
.contact__thanks h2 {
  font: 300 clamp(40px, 5vw, 72px)/1.02 var(--font-display);
  letter-spacing: -0.02em;
}
.contact__thanks h2 em { font-style: italic; font-weight: 400; color: var(--clay-600); }
.theme-moss .contact__thanks h2 em { color: var(--moss-500); }
.theme-ochre .contact__thanks h2 em { color: var(--ochre-500); }
.contact__thanks p {
  font: 400 clamp(15px, 1.1vw, 17px)/1.7 var(--font-sans);
  color: var(--fg-muted);
  max-width: 44ch;
}
.contact__thanks .btn-dark { justify-self: flex-start; margin-top: 16px; }

@media (max-width: 980px) {
  .contact__inner { grid-template-columns: 1fr; }
  .contact__meta { position: static; }
  .contact__grid { grid-template-columns: 1fr; }
}

/* ============================================================
   JOURNAL — extra (byline on inner page)
   ============================================================ */
.journal__row .ttl .byline {
  display: block;
  margin-top: 8px;
  font: 400 italic clamp(13px, 0.9vw, 15px)/1.3 var(--font-display);
  color: var(--fg-subtle);
}

/* ============================================================
   ROUTE container — keep a clean transition between pages
   ============================================================ */
.route { animation: routeFade 480ms var(--ease-out); }
@keyframes routeFade {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   RETREAT DETAIL PAGE  (rd__*)
   ============================================================ */
.rd {
  /* Accent variable cascades down the page */
  --rd-accent: var(--clay-500);
  --rd-accent-soft: var(--clay-300);
  --rd-accent-ink: var(--clay-700);
}
.rd--moss  { --rd-accent: var(--moss-500);  --rd-accent-soft: var(--moss-300);  --rd-accent-ink: var(--moss-700); }
.rd--ochre { --rd-accent: var(--ochre-500); --rd-accent-soft: var(--ochre-400); --rd-accent-ink: var(--ochre-600); }

/* Hero */
.rd__hero {
  position: relative;
  min-height: 96vh;
  display: flex;
  align-items: flex-end;
  color: var(--fg-on-dark);
  overflow: hidden;
}
.rd__hero-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(1.02);
}
.rd__hero-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(28,24,20,0.55) 0%,
    rgba(28,24,20,0.18) 28%,
    rgba(28,24,20,0.65) 75%,
    rgba(28,24,20,0.92) 100%);
}
.rd__hero-inner {
  position: relative; z-index: 2;
  padding: clamp(160px, 22vh, 240px) var(--gutter) clamp(64px, 10vh, 120px);
  width: 100%;
  display: grid;
  gap: clamp(18px, 3vh, 32px);
}
.rd__crumb {
  font: var(--type-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: rgba(244,238,228,0.7);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  align-self: flex-start;
  text-decoration: none;
  transition: color var(--dur-2) var(--ease-out);
}
.rd__crumb .arrow { font-family: var(--font-display); font-size: 16px; text-transform: none; transition: transform var(--dur-2) var(--ease-out); }
.rd__crumb:hover { color: var(--bone-50); }
.rd__crumb:hover .arrow { transform: translateX(-4px); }
.rd__hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font: var(--type-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-on-dark-muted);
  flex-wrap: wrap;
}
.rd__hero-eyebrow .ndash { display: inline-block; width: 28px; height: 1px; background: currentColor; opacity: .55; }

.rd__hero-name {
  font: 500 14px/1 var(--font-sans);
  letter-spacing: 0.42em;
  color: var(--rd-accent-soft);
  margin: 0;
  text-transform: uppercase;
}
.rd__hero-title {
  font: 300 clamp(48px, 7.2vw, 124px)/0.98 var(--font-display);
  letter-spacing: -0.025em;
  color: var(--bone-50);
  margin: 0;
  max-width: 18ch;
  text-wrap: balance;
}
.rd__hero-title em { font-style: italic; font-weight: 400; color: var(--rd-accent-soft); }
.rd__hero-audience {
  font: 400 italic clamp(15px, 1.15vw, 18px)/1.3 var(--font-display);
  color: var(--fg-on-dark-muted);
}

/* Lead section */
.rd__lead-sec {
  background: var(--bg);
  padding: clamp(96px, 14vh, 160px) 0;
}
.rd__lead-inner {
  display: grid;
  grid-template-columns: 1fr 1.7fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}
.rd__lead-rail {
  position: sticky; top: 100px;
  display: flex; flex-direction: column; gap: 12px;
}
.rd__lead-rail .ix {
  font: 400 italic 22px/1 var(--font-display);
  color: var(--fg-subtle);
}
.rd__lead-rail .label {
  font: var(--type-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-muted);
}
.rd__lead-body { display: grid; gap: clamp(22px, 4vh, 36px); }
.rd__lead {
  font: 300 clamp(22px, 2.4vw, 36px)/1.32 var(--font-display);
  letter-spacing: -0.012em;
  color: var(--ink-900);
  max-width: 28ch;
  text-wrap: balance;
}
.rd__para {
  font: 400 clamp(15px, 1.05vw, 17px)/1.75 var(--font-sans);
  color: var(--fg-muted);
  max-width: 56ch;
}

@media (max-width: 880px) {
  .rd__lead-inner { grid-template-columns: 1fr; }
  .rd__lead-rail { position: static; flex-direction: row; gap: 14px; }
}

/* Gallery strip — asymmetric editorial grid */
.rd__gallery {
  background: var(--bone-100);
  padding: clamp(72px, 11vh, 120px) 0;
}
.rd__gallery-head {
  margin-bottom: clamp(40px, 6vh, 64px);
}
.rd__gallery-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(16px, 2.4vw, 32px);
  padding-inline: var(--gutter);
  max-width: var(--max-w-wide);
  margin: 0 auto;
}
.rd__shot {
  display: flex; flex-direction: column;
  gap: 12px;
}
/* Asymmetric column spans for visual rhythm */
.rd__shot--0 { grid-column: span 7; }
.rd__shot--1 { grid-column: span 5; }
.rd__shot--2 { grid-column: span 4; }
.rd__shot--3 { grid-column: span 4; }
.rd__shot--4 { grid-column: span 4; }
.rd__shot--5 { grid-column: span 12; }

.rd__shot-frame {
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--bone-200);
  aspect-ratio: 4 / 3;
}
.rd__shot--0 .rd__shot-frame,
.rd__shot--5 .rd__shot-frame { aspect-ratio: 16 / 9; }
.rd__shot--1 .rd__shot-frame { aspect-ratio: 4 / 5; }

.rd__shot-frame img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 2400ms var(--ease-out);
}
.rd__shot:hover .rd__shot-frame img { transform: scale(1.04); }
.rd__shot figcaption {
  display: flex; align-items: baseline; gap: 12px;
  padding: 0 4px;
}
.rd__shot .ix {
  font: 400 italic 13px/1 var(--font-display);
  color: var(--fg-subtle);
  font-feature-settings: "tnum";
}
.rd__shot .cap {
  font: 400 italic clamp(14px, 1vw, 16px)/1.3 var(--font-display);
  color: var(--ink-900);
}

@media (max-width: 980px) {
  .rd__gallery-grid { grid-template-columns: repeat(6, 1fr); }
  .rd__shot--0 { grid-column: span 6; }
  .rd__shot--1, .rd__shot--2, .rd__shot--3, .rd__shot--4 { grid-column: span 3; }
  .rd__shot--5 { grid-column: span 6; }
}
@media (max-width: 600px) {
  .rd__gallery-grid { grid-template-columns: 1fr; }
  .rd__shot, .rd__shot--0, .rd__shot--1, .rd__shot--2,
  .rd__shot--3, .rd__shot--4, .rd__shot--5 { grid-column: 1; }
}

/* Pillars (4 axes) */
.rd__pillars {
  background: var(--bg);
  padding: clamp(96px, 14vh, 160px) 0;
}
.rd__pillars-head {
  display: grid;
  gap: 16px;
  margin-bottom: clamp(48px, 7vh, 80px);
  max-width: 60ch;
}
.rd__pillars-head h2 {
  font: 300 clamp(36px, 4.4vw, 72px)/1.04 var(--font-display);
  letter-spacing: -0.02em;
  max-width: 18ch;
}
.rd__pillars-head h2 em {
  font-style: italic; font-weight: 400;
  color: var(--rd-accent-ink);
}
.rd__pillars-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(20px, 3vw, 40px);
}
.rd__pillar {
  padding-top: 28px;
  border-top: 1px solid var(--rule-strong);
  display: grid;
  gap: 12px;
}
.rd__pillar .ix {
  font: 400 italic clamp(22px, 1.8vw, 28px)/1 var(--font-display);
  color: var(--rd-accent);
  font-feature-settings: "tnum";
}
.rd__pillar h3 {
  font: 400 italic clamp(20px, 1.7vw, 26px)/1.2 var(--font-display);
  color: var(--ink-900);
}
.rd__pillar p {
  font: 400 14px/1.65 var(--font-sans);
  color: var(--fg-muted);
}
@media (max-width: 980px) {
  .rd__pillars-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 540px) {
  .rd__pillars-grid { grid-template-columns: 1fr; }
}

/* Why — dark interlude with bg image */
.rd__why {
  position: relative;
  padding: clamp(120px, 20vh, 220px) 0;
  color: var(--fg-on-dark);
  overflow: hidden;
}
.rd__why-bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.35;
}
.rd__why-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(160deg, rgba(28,24,20,0.92) 0%, rgba(28,24,20,0.7) 50%, rgba(28,24,20,0.92) 100%);
}
.rd__why-inner {
  position: relative; z-index: 2;
  display: grid;
  gap: clamp(24px, 4vh, 40px);
  max-width: 90ch;
}
.rd__why-title {
  font: 300 clamp(40px, 5.4vw, 88px)/1.02 var(--font-display);
  letter-spacing: -0.025em;
  color: var(--bone-50);
  max-width: 18ch;
  margin: 0;
}
.rd__why-title em {
  font-style: italic; font-weight: 400;
  color: var(--rd-accent-soft);
}
.rd__why-body {
  font: 300 clamp(16px, 1.2vw, 19px)/1.75 var(--font-sans);
  color: var(--fg-on-dark-muted);
  max-width: 60ch;
}

/* Detail card / fact sheet */
.rd__detail {
  background: var(--bone-100);
  padding: clamp(80px, 12vh, 140px) 0;
}
.rd__detail-inner {
  display: grid;
  grid-template-columns: 1fr 1.4fr 1.1fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
  background: var(--bone-50);
  padding: clamp(32px, 5vh, 56px) clamp(28px, 4vw, 56px);
  border-radius: var(--r-lg);
  border: 1px solid var(--rule);
}
.rd__detail-side {
  border-right: 1px solid var(--rule);
  padding-right: clamp(20px, 3vw, 48px);
}
.rd__detail-label {
  font: 500 12px/1 var(--font-sans);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rd-accent-ink);
  margin-bottom: 14px;
  display: block;
}
.rd__detail-side h3 {
  font: 500 24px/1 var(--font-sans);
  letter-spacing: 0.22em;
  color: var(--ink-900);
}
.rd__detail-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 32px;
  margin: 0;
}
.rd__detail-stats dt {
  font: var(--type-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-muted);
  margin-bottom: 6px;
}
.rd__detail-stats dd {
  font: 400 italic clamp(18px, 1.5vw, 22px)/1.2 var(--font-display);
  color: var(--ink-900);
  margin: 0;
}
.rd__detail-cta { display: grid; gap: 12px; }
.rd__detail-cta p {
  font: 400 13px/1.55 var(--font-sans);
  color: var(--fg-subtle);
  max-width: 32ch;
}
@media (max-width: 980px) {
  .rd__detail-inner { grid-template-columns: 1fr; gap: 32px; padding: 28px; }
  .rd__detail-side { border-right: 0; border-bottom: 1px solid var(--rule); padding: 0 0 24px; }
}

/* Other retreats teaser */
.rd__other {
  background: var(--bg);
  padding: clamp(96px, 14vh, 160px) 0;
}
.rd__other-title {
  font: 300 clamp(36px, 4.4vw, 72px)/1.04 var(--font-display);
  letter-spacing: -0.02em;
  margin: 18px 0 clamp(48px, 7vh, 80px);
  max-width: 16ch;
}
.rd__other-title em { font-style: italic; font-weight: 400; color: var(--clay-600); }
.theme-moss  .rd__other-title em { color: var(--moss-500); }
.theme-ochre .rd__other-title em { color: var(--ochre-500); }

.rd__other-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4vw, 48px);
}
.rd__other-card {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(20px, 3vw, 36px);
  text-decoration: none;
  color: inherit;
  align-items: center;
  padding: 20px;
  border-radius: var(--r-lg);
  border: 1px solid var(--rule);
  transition: border-color var(--dur-3) var(--ease-out),
              box-shadow var(--dur-3) var(--ease-out),
              transform var(--dur-3) var(--ease-out);
}
.rd__other-card:hover {
  border-color: var(--rule-strong);
  box-shadow: var(--shadow-2);
  transform: translateY(-2px);
}
.rd__other-media {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 4px;
  background: var(--bone-200);
}
.rd__other-media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 2400ms var(--ease-out);
}
.rd__other-card:hover .rd__other-media img { transform: scale(1.05); }
.rd__other-body { display: grid; gap: 12px; }
.rd__other-body .sub {
  font: 500 11px/1 var(--font-sans);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--clay-600);
}
.rd__other-card--moss  .rd__other-body .sub { color: var(--moss-500); }
.rd__other-card--ochre .rd__other-body .sub { color: var(--ochre-500); }
.rd__other-body h3 {
  font: 500 18px/1 var(--font-sans);
  letter-spacing: 0.18em;
  color: var(--ink-900);
}
.rd__other-body p {
  font: 400 14px/1.6 var(--font-sans);
  color: var(--fg-muted);
  max-width: 32ch;
}
.rd__other-body .cta {
  font: 500 12px/1 var(--font-sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-900);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--rule-strong);
  align-self: flex-start;
  margin-top: 6px;
  transition: color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out);
}
.rd__other-body .cta .arrow { font-family: var(--font-display); text-transform: none; font-size: 14px; transition: transform var(--dur-2) var(--ease-out); }
.rd__other-card:hover .cta { color: var(--clay-600); border-color: var(--clay-500); }
.rd__other-card:hover .cta .arrow { transform: translateX(4px); }
.rd__other-card--moss:hover  .cta { color: var(--moss-500); border-color: var(--moss-500); }
.rd__other-card--ochre:hover .cta { color: var(--ochre-500); border-color: var(--ochre-500); }

@media (max-width: 880px) {
  .rd__other-grid { grid-template-columns: 1fr; gap: 24px; }
  .rd__other-card { grid-template-columns: 1fr; }
}

/* Make the retreats list cards clickable */
.retreats__card {
  position: relative;
}
.retreats__card-link {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* The link itself is invisible; real action buttons sit above with their own z-index */
}
.retreats__card-body,
.retreats__card-media { position: relative; z-index: 2; }
.retreats__card:hover .retreats__card-title { color: var(--clay-700); transition: color var(--dur-2) var(--ease-out); }
.retreats__card--moss:hover  .retreats__card-title { color: var(--moss-700); }
.retreats__card--ochre:hover .retreats__card-title { color: var(--ochre-600); }

/* ============================================================
   HOME — Pillars (Awareness / Love / Mindfulness)
   ============================================================ */
.home-pillars {
  background: var(--bg);
  padding: clamp(96px, 14vh, 160px) 0;
}
.home-pillars__head {
  display: grid;
  gap: 20px;
  margin-bottom: clamp(56px, 9vh, 96px);
  max-width: 60ch;
}
.home-pillars__head h2 {
  font: 300 clamp(36px, 4.4vw, 72px)/1.04 var(--font-display);
  letter-spacing: -0.02em;
  max-width: 16ch;
}
.home-pillars__head h2 em { font-style: italic; font-weight: 400; color: var(--clay-600); }
.theme-moss .home-pillars__head h2 em { color: var(--moss-500); }
.theme-ochre .home-pillars__head h2 em { color: var(--ochre-500); }

.home-pillars__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 4vw, 56px);
}
.home-pillar {
  padding: clamp(32px, 5vh, 48px) 0 0;
  border-top: 1px solid var(--rule-strong);
}
.home-pillar .ix {
  font: 400 italic clamp(28px, 2.4vw, 38px)/1 var(--font-display);
  color: var(--clay-500);
  display: block;
  margin-bottom: 18px;
}
.theme-moss .home-pillar .ix { color: var(--moss-500); }
.theme-ochre .home-pillar .ix { color: var(--ochre-500); }
.home-pillar h3 {
  font: 300 clamp(26px, 2.4vw, 38px)/1.1 var(--font-display);
  letter-spacing: -0.015em;
  margin-bottom: 18px;
  color: var(--ink-900);
}
.home-pillar h3 em { font-style: italic; font-weight: 400; color: var(--clay-600); }
.theme-moss .home-pillar h3 em { color: var(--moss-500); }
.theme-ochre .home-pillar h3 em { color: var(--ochre-500); }
.home-pillar p {
  font: 400 clamp(15px, 1.05vw, 17px)/1.65 var(--font-sans);
  color: var(--fg-muted);
  max-width: 32ch;
}

@media (max-width: 880px) {
  .home-pillars__grid { grid-template-columns: 1fr; gap: 40px; }
}

/* ============================================================
   HOME — Retreats teaser (Neurobloom / ETERNA / IMMENSE)
   ============================================================ */
.home-retreats {
  background: var(--bone-100);
  padding: clamp(96px, 14vh, 180px) 0;
}
.home-retreats__head {
  display: grid;
  gap: 20px;
  margin-bottom: clamp(56px, 9vh, 96px);
  max-width: 60ch;
}
.home-retreats__title {
  font: 300 clamp(40px, 5vw, 84px)/1.02 var(--font-display);
  letter-spacing: -0.02em;
  max-width: 16ch;
}
.home-retreats__title em { font-style: italic; font-weight: 400; color: var(--clay-600); }
.theme-moss .home-retreats__title em { color: var(--moss-500); }
.theme-ochre .home-retreats__title em { color: var(--ochre-500); }
.home-retreats__intro {
  font: 400 clamp(15px, 1.05vw, 17px)/1.7 var(--font-sans);
  color: var(--fg-muted);
  max-width: 50ch;
}

.home-retreats__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 3vw, 40px);
  align-items: stretch;
}
.home-retreat {
  display: flex;
  flex-direction: column;
  gap: 22px;
  text-decoration: none;
  color: inherit;
  background: var(--bone-50);
  padding: clamp(20px, 3vw, 32px);
  border-radius: var(--r-lg);
  border: 1px solid var(--rule);
  transition: transform var(--dur-3) var(--ease-out),
              border-color var(--dur-3) var(--ease-out),
              box-shadow var(--dur-3) var(--ease-out);
}
.home-retreat:hover {
  transform: translateY(-3px);
  border-color: var(--rule-strong);
  box-shadow: var(--shadow-2);
}
.home-retreat__media {
  position: relative;
  aspect-ratio: 5 / 4;
  overflow: hidden;
  border-radius: 4px;
}
.home-retreat__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 2400ms var(--ease-out);
}
.home-retreat:hover .home-retreat__media img { transform: scale(1.05); }
.home-retreat__num {
  position: absolute;
  bottom: 14px; left: 14px;
  font: 400 italic 28px/1 var(--font-display);
  color: var(--bone-50);
  text-shadow: 0 1px 8px rgba(28,24,20,0.4);
}
.home-retreat__body { display: flex; flex-direction: column; flex: 1; }
.home-retreat__body h3 {
  font: 500 18px/1 var(--font-sans);
  letter-spacing: 0.18em;
  color: var(--ink-900);
  margin-bottom: 8px;
}
.home-retreat__body .sub {
  font: 400 italic clamp(17px, 1.2vw, 21px)/1.2 var(--font-display);
  color: var(--clay-600);
  margin-bottom: 16px;
}
.home-retreat--moss  .home-retreat__body .sub { color: var(--moss-500); }
.home-retreat--ochre .home-retreat__body .sub { color: var(--ochre-500); }
.home-retreat__body p {
  font: 400 15px/1.6 var(--font-sans);
  color: var(--fg-muted);
  margin-bottom: 24px;
  flex: 1;
}
.home-retreat__body .cta {
  font: 500 12px/1 var(--font-sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-900);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  align-self: flex-start;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--rule-strong);
  transition: color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out);
}
.home-retreat__body .cta .arrow {
  font-family: var(--font-display);
  text-transform: none;
  font-size: 15px;
  transition: transform var(--dur-2) var(--ease-out);
}
.home-retreat:hover .home-retreat__body .cta { color: var(--clay-600); border-color: var(--clay-500); }
.home-retreat:hover .home-retreat__body .cta .arrow { transform: translateX(4px); }
.home-retreat--moss:hover  .home-retreat__body .cta { color: var(--moss-500); border-color: var(--moss-500); }
.home-retreat--ochre:hover .home-retreat__body .cta { color: var(--ochre-500); border-color: var(--ochre-500); }

@media (max-width: 980px) {
  .home-retreats__grid { grid-template-columns: 1fr; gap: 24px; }
}

/* ============================================================
   HOME — Locations dark band
   ============================================================ */
.home-locations {
  position: relative;
  background: var(--ink-900);
  color: var(--fg-on-dark);
  padding: clamp(120px, 18vh, 200px) 0;
  overflow: hidden;
}
.home-locations__bg {
  position: absolute; inset: 0;
  background-image: url("assets/retreat-villa.jpeg");
  background-size: cover;
  background-position: center;
  opacity: 0.18;
}
.home-locations__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(120deg, rgba(28,24,20,0.92) 0%, rgba(28,24,20,0.7) 60%, rgba(28,24,20,0.95) 100%);
}
.home-locations__inner {
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}
.home-locations__copy h2 {
  font: 300 clamp(40px, 5.4vw, 96px)/1.02 var(--font-display);
  letter-spacing: -0.022em;
  margin: 22px 0 28px;
  max-width: 14ch;
  color: var(--bone-50);
}
.home-locations__copy h2 em { font-style: italic; font-weight: 400; color: var(--clay-300); }
.theme-moss .home-locations__copy h2 em { color: var(--moss-300); }
.theme-ochre .home-locations__copy h2 em { color: var(--ochre-400); }
.home-locations__copy p {
  font: 300 clamp(15px, 1.1vw, 18px)/1.7 var(--font-sans);
  color: var(--fg-on-dark-muted);
  max-width: 44ch;
}
.home-locations__visual {
  display: grid;
  gap: clamp(20px, 3vw, 36px);
  position: relative;
}
.home-locations__card {
  position: relative;
  aspect-ratio: 5 / 3;
  overflow: hidden;
  border-radius: var(--r-lg);
}
.home-locations__card img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 2400ms var(--ease-out);
}
.home-locations__card:hover img { transform: scale(1.04); }
.home-locations__card--2 { transform: translateX(clamp(12px, 4vw, 56px)); }
.home-locations__card .tag {
  position: absolute;
  bottom: 14px; left: 14px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: rgba(28,24,20,0.55);
  backdrop-filter: blur(8px);
  border-radius: var(--r-pill);
  color: var(--bone-50);
  font: 500 12px/1 var(--font-sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.home-locations__card .tag .num {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 16px;
  text-transform: none;
  letter-spacing: 0;
  color: var(--clay-300);
}

@media (max-width: 980px) {
  .home-locations__inner { grid-template-columns: 1fr; }
  .home-locations__card--2 { transform: translateX(0); }
}

/* ============================================================
   RETREATS PAGE — Card content (new pillars list + num)
   ============================================================ */
.retreats__card-name {
  font: 500 14px/1 var(--font-sans);
  letter-spacing: 0.32em;
  color: var(--clay-600);
  margin: 0 0 14px;
  text-transform: uppercase;
}
.retreats__card--moss  .retreats__card-name { color: var(--moss-500); }
.retreats__card--ochre .retreats__card-name { color: var(--ochre-500); }

.retreats__card--moss  .retreats__card-title em { color: var(--moss-500); }
.retreats__card--ochre .retreats__card-title em { color: var(--ochre-500); }
.theme-moss  .retreats__card-title em { color: var(--moss-500); }
.theme-ochre .retreats__card-title em { color: var(--ochre-500); }

.retreats__card-num {
  position: absolute;
  bottom: 20px; right: 24px;
  font: 300 italic clamp(64px, 9vw, 140px)/0.8 var(--font-display);
  color: var(--bone-50);
  text-shadow: 0 2px 24px rgba(28,24,20,0.4);
  opacity: 0.85;
  pointer-events: none;
}

.retreats__card-pillars {
  display: grid;
  gap: 10px;
  margin: 0 0 clamp(28px, 4vh, 40px);
  max-width: 46ch;
  padding-top: 24px;
  border-top: 1px solid var(--rule);
}
.retreats__card-pillars li {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 16px;
  align-items: baseline;
  padding: 8px 0;
  font: 400 clamp(14px, 1vw, 16px)/1.55 var(--font-sans);
  color: var(--ink-900);
}
.retreats__card-pillars .ix {
  font: 400 italic 14px/1 var(--font-display);
  color: var(--clay-600);
  font-feature-settings: "tnum";
}
.retreats__card--moss  .retreats__card-pillars .ix { color: var(--moss-500); }
.retreats__card--ochre .retreats__card-pillars .ix { color: var(--ochre-500); }

/* Status color variants */
.retreats__card-status.status-three-places .dot { background: var(--clay-300); box-shadow: 0 0 0 4px rgba(217,178,153,0.18); }

/* ============================================================
   RETREATS — Format section
   ============================================================ */
.retreats__format {
  background: var(--bone-100);
  padding: clamp(96px, 14vh, 160px) 0;
}
.retreats__format-inner {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
  margin-bottom: clamp(48px, 8vh, 80px);
}
.retreats__format-copy h2 {
  font: 300 clamp(40px, 5vw, 80px)/1.02 var(--font-display);
  letter-spacing: -0.02em;
  margin: 22px 0 28px;
  max-width: 16ch;
}
.retreats__format-copy h2 em { font-style: italic; font-weight: 400; color: var(--clay-600); }
.theme-moss  .retreats__format-copy h2 em { color: var(--moss-500); }
.theme-ochre .retreats__format-copy h2 em { color: var(--ochre-500); }
.retreats__format-copy p {
  font: 400 clamp(15px, 1.05vw, 17px)/1.7 var(--font-sans);
  color: var(--fg-muted);
  max-width: 44ch;
  margin-bottom: 22px;
}

.retreats__format-media {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-arch);
  overflow: hidden;
  background: var(--bone-200);
  max-height: 560px;
}
.retreats__format-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 2400ms var(--ease-out);
}
.retreats__format-media:hover img { transform: scale(1.03); }
.retreats__format-cap {
  position: absolute;
  bottom: 20px; left: 20px;
  display: inline-flex;
  align-items: baseline;
  gap: 14px;
  padding: 12px 18px;
  background: rgba(28,24,20,0.5);
  backdrop-filter: blur(8px);
  border-radius: var(--r-pill);
  color: var(--bone-50);
}
.retreats__format-cap .num {
  font: 300 italic 26px/1 var(--font-display);
  color: var(--clay-300);
}
.theme-moss  .retreats__format-cap .num { color: var(--moss-300); }
.theme-ochre .retreats__format-cap .num { color: var(--ochre-400); }
.retreats__format-cap > span:last-child {
  font: 500 12px/1 var(--font-sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.retreats__format-stats-wrap {
  padding-top: 40px;
  border-top: 1px solid var(--rule);
}
.retreats__format-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(20px, 3vw, 36px);
  margin: 0;
}
.retreats__format-stats > div {
  padding: 20px 0;
}
.retreats__format-stats dt {
  font: var(--type-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-muted);
  margin-bottom: 14px;
}
.retreats__format-stats dd {
  font: 300 clamp(40px, 4.4vw, 72px)/1 var(--font-display);
  letter-spacing: -0.02em;
  color: var(--ink-900);
  margin: 0 0 14px;
}
.retreats__format-stats dd em { font-style: italic; font-weight: 400; color: var(--clay-600); font-size: 0.7em; }
.theme-moss  .retreats__format-stats dd em { color: var(--moss-500); }
.theme-ochre .retreats__format-stats dd em { color: var(--ochre-500); }
.retreats__format-stats .cap {
  font: 400 italic clamp(13px, 0.95vw, 15px)/1.4 var(--font-display);
  color: var(--fg-muted);
  display: block;
  max-width: 28ch;
}

@media (max-width: 980px) {
  .retreats__format-inner { grid-template-columns: 1fr; }
  .retreats__format-stats { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 540px) {
  .retreats__format-stats { grid-template-columns: 1fr; }
}

/* ============================================================
   RETREATS — Locations
   ============================================================ */
.retreats__locations {
  background: var(--bg);
  padding: clamp(120px, 16vh, 200px) 0;
}
.retreats__locations-head {
  display: grid;
  gap: 20px;
  margin-bottom: clamp(56px, 9vh, 96px);
  max-width: 60ch;
}
.retreats__locations-head h2 {
  font: 300 clamp(40px, 5vw, 84px)/1.02 var(--font-display);
  letter-spacing: -0.02em;
  max-width: 18ch;
}
.retreats__locations-head h2 em { font-style: italic; font-weight: 400; color: var(--clay-600); }
.theme-moss  .retreats__locations-head h2 em { color: var(--moss-500); }
.theme-ochre .retreats__locations-head h2 em { color: var(--ochre-500); }
.retreats__locations-head p {
  font: 400 clamp(15px, 1.05vw, 17px)/1.7 var(--font-sans);
  color: var(--fg-muted);
  max-width: 52ch;
}

.retreats__locations-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4vw, 56px);
}
.retreats__location {
  display: grid;
  gap: 24px;
}
.retreats__location-media {
  position: relative;
  aspect-ratio: 5 / 4;
  overflow: hidden;
  border-radius: var(--r-arch);
  background: var(--bone-200);
}
.retreats__location-media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 2400ms var(--ease-out);
}
.retreats__location:hover .retreats__location-media img { transform: scale(1.04); }
.retreats__location-tag {
  position: absolute;
  bottom: 18px; left: 18px;
  display: inline-flex; align-items: center; gap: 14px;
  padding: 10px 18px;
  background: rgba(28,24,20,0.5);
  backdrop-filter: blur(8px);
  border-radius: var(--r-pill);
  color: var(--bone-50);
}
.retreats__location-tag .num {
  font: 400 italic 18px/1 var(--font-display);
  color: var(--clay-300);
}
.retreats__location-tag .sub {
  font: 500 12px/1 var(--font-sans);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.retreats__location-body h3 {
  font: 300 clamp(34px, 4vw, 64px)/1.02 var(--font-display);
  letter-spacing: -0.02em;
  margin-bottom: 14px;
}
.retreats__location-body p {
  font: 400 clamp(15px, 1.05vw, 17px)/1.65 var(--font-sans);
  color: var(--fg-muted);
  max-width: 38ch;
  margin-bottom: 20px;
}
.retreats__location-body ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
}
.retreats__location-body li {
  font: var(--type-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-subtle);
}

@media (max-width: 880px) {
  .retreats__locations-grid { grid-template-columns: 1fr; gap: 56px; }
}

/* ============================================================
   RETREATS — Principles
   ============================================================ */
.retreats__principles {
  background: var(--bone-100);
  padding: clamp(96px, 14vh, 160px) 0;
}
.retreats__principles-head {
  display: grid;
  gap: 18px;
  margin-bottom: clamp(56px, 9vh, 96px);
  max-width: 60ch;
}
.retreats__principles-head h2 {
  font: 300 clamp(40px, 5vw, 76px)/1.02 var(--font-display);
  letter-spacing: -0.02em;
}
.retreats__principles-head h2 em { font-style: italic; font-weight: 400; color: var(--clay-600); }
.theme-moss  .retreats__principles-head h2 em { color: var(--moss-500); }
.theme-ochre .retreats__principles-head h2 em { color: var(--ochre-500); }

.retreats__principles-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(20px, 3vw, 40px);
}
.retreats__principle {
  display: grid;
  gap: 16px;
}
.retreats__principle-media {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--bone-200);
  margin-bottom: 8px;
}
.retreats__principle-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 2400ms var(--ease-out);
}
.retreats__principle:hover .retreats__principle-media img { transform: scale(1.05); }
.retreats__principle .ix {
  font: 400 italic clamp(24px, 2vw, 32px)/1 var(--font-display);
  color: var(--clay-500);
}
.theme-moss  .retreats__principle .ix { color: var(--moss-500); }
.theme-ochre .retreats__principle .ix { color: var(--ochre-500); }
.retreats__principle h3 {
  font: 400 italic clamp(20px, 1.7vw, 26px)/1.2 var(--font-display);
  color: var(--ink-900);
}
.retreats__principle p {
  font: 400 14px/1.65 var(--font-sans);
  color: var(--fg-muted);
}

@media (max-width: 880px) {
  .retreats__principles-grid { grid-template-columns: 1fr; gap: 32px; }
}

/* ============================================================
   PRACTICE PAGE — About / Method / Dimensions
   ============================================================ */
.about {
  background: var(--bg);
  padding: clamp(96px, 14vh, 160px) 0;
}
.about__inner {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}
.about__rail {
  position: sticky; top: 100px;
  display: flex; flex-direction: column;
  gap: 12px;
}
.about__rail .ix {
  font: 400 italic 22px/1 var(--font-display);
  color: var(--fg-subtle);
}
.about__rail .label {
  font: var(--type-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-muted);
}
.about__body { display: grid; gap: clamp(28px, 5vh, 48px); }
.about__statement {
  font: 300 clamp(28px, 3.4vw, 56px)/1.12 var(--font-display);
  letter-spacing: -0.012em;
  color: var(--ink-900);
  max-width: 26ch;
}
.about__statement em { font-style: italic; font-weight: 400; color: var(--clay-600); }
.theme-moss  .about__statement em { color: var(--moss-500); }
.theme-ochre .about__statement em { color: var(--ochre-500); }
.about__statement .drop {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 1.45em;
  line-height: 0.9;
  color: var(--clay-500);
  float: left;
  padding: 0.18em 0.12em 0 0;
}
.theme-moss  .about__statement .drop { color: var(--moss-500); }
.theme-ochre .about__statement .drop { color: var(--ochre-500); }
.about__support {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(24px, 4vw, 48px);
  max-width: 64ch;
}
.about__support p {
  font: 400 clamp(15px, 1.05vw, 17px)/1.7 var(--font-sans);
  color: var(--fg-muted);
  max-width: 36ch;
}

@media (max-width: 880px) {
  .about__inner { grid-template-columns: 1fr; }
  .about__rail { position: static; flex-direction: row; align-items: center; gap: 16px; }
  .about__support { grid-template-columns: 1fr; }
}

/* Method (new — practice page) */
.method-new {
  background: var(--bone-100);
  padding: clamp(96px, 14vh, 160px) 0;
}
.method-new__head {
  display: grid;
  gap: 18px;
  margin-bottom: clamp(56px, 9vh, 96px);
  max-width: 60ch;
}
.method-new__head h2 {
  font: 300 clamp(40px, 5vw, 80px)/1.02 var(--font-display);
  letter-spacing: -0.02em;
}
.method-new__head h2 em { font-style: italic; font-weight: 400; color: var(--clay-600); }
.theme-moss  .method-new__head h2 em { color: var(--moss-500); }
.theme-ochre .method-new__head h2 em { color: var(--ochre-500); }
.method-new__head p {
  font: 400 clamp(15px, 1.05vw, 17px)/1.7 var(--font-sans);
  color: var(--fg-muted);
  max-width: 52ch;
}
.method-new__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(20px, 3vw, 40px);
}
.method-new__card {
  display: grid;
  gap: 14px;
  padding-top: 32px;
  border-top: 1px solid var(--rule-strong);
}
.method-new__card .ix {
  font: 400 italic clamp(26px, 2.2vw, 36px)/1 var(--font-display);
  color: var(--clay-500);
}
.theme-moss  .method-new__card .ix { color: var(--moss-500); }
.theme-ochre .method-new__card .ix { color: var(--ochre-500); }
.method-new__card h3 {
  font: 400 italic clamp(22px, 1.8vw, 28px)/1.2 var(--font-display);
  color: var(--ink-900);
}
.method-new__card p {
  font: 400 14px/1.65 var(--font-sans);
  color: var(--fg-muted);
}

@media (max-width: 980px) {
  .method-new__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .method-new__grid { grid-template-columns: 1fr; }
}

/* Dimensions section (practice page) */
.dimensions {
  background: var(--bg);
  padding: clamp(120px, 16vh, 200px) 0;
}
.dimensions__head {
  display: grid;
  gap: 18px;
  margin-bottom: clamp(56px, 9vh, 96px);
  max-width: 60ch;
}
.dimensions__head h2 {
  font: 300 clamp(40px, 5vw, 80px)/1.02 var(--font-display);
  letter-spacing: -0.02em;
}
.dimensions__head h2 em { font-style: italic; font-weight: 400; color: var(--clay-600); }
.theme-moss  .dimensions__head h2 em { color: var(--moss-500); }
.theme-ochre .dimensions__head h2 em { color: var(--ochre-500); }
.dimensions__head p {
  font: 400 clamp(15px, 1.05vw, 17px)/1.7 var(--font-sans);
  color: var(--fg-muted);
  max-width: 52ch;
}
.dimensions__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 4vw, 56px);
}
.dimension {
  display: flex;
  flex-direction: column;
  gap: 24px;
  text-decoration: none;
  color: inherit;
}
.dimension__media {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--bone-200);
}
.dimension__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 2400ms var(--ease-out);
}
.dimension:hover .dimension__media img { transform: scale(1.05); }
.dimension__sub {
  font: 500 12px/1 var(--font-sans);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--clay-600);
}
.theme-moss  .dimension__sub { color: var(--moss-500); }
.theme-ochre .dimension__sub { color: var(--ochre-500); }
.dimension__body h3 {
  font: 300 clamp(28px, 2.8vw, 40px)/1.1 var(--font-display);
  letter-spacing: -0.015em;
  color: var(--ink-900);
  margin: 12px 0 14px;
}
.dimension__body p {
  font: 400 15px/1.65 var(--font-sans);
  color: var(--fg-muted);
  margin-bottom: 18px;
  max-width: 32ch;
}
.dimension__cta {
  font: 500 12px/1 var(--font-sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-900);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--rule);
  align-self: flex-start;
  transition: color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out);
}
.dimension__cta .arrow { font-family: var(--font-display); text-transform: none; font-size: 15px; transition: transform var(--dur-2) var(--ease-out); }
.dimension:hover .dimension__cta { color: var(--clay-600); border-color: var(--clay-500); }
.dimension:hover .dimension__cta .arrow { transform: translateX(4px); }

@media (max-width: 980px) {
  .dimensions__grid { grid-template-columns: 1fr; gap: 48px; }
}

.practice__cta {
  background: var(--bone-100);
  padding: clamp(96px, 14vh, 160px) 0;
}
.practice__cta-inner {
  display: grid;
  gap: 32px;
  justify-items: center;
  text-align: center;
}
.practice__cta h2 {
  font: 300 clamp(36px, 4.6vw, 76px)/1.05 var(--font-display);
  letter-spacing: -0.02em;
  max-width: 22ch;
  text-wrap: balance;
}
.practice__cta h2 em { font-style: italic; font-weight: 400; color: var(--clay-600); }
.theme-moss  .practice__cta h2 em { color: var(--moss-500); }
.theme-ochre .practice__cta h2 em { color: var(--ochre-500); }

/* ============================================================
   JOURNAL — Featured essay + filters
   ============================================================ */
.journal-feat {
  background: var(--bg);
  padding: clamp(72px, 11vh, 120px) 0 clamp(48px, 7vh, 80px);
}
.journal-feat__inner {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}
.journal-feat__media {
  position: relative;
  aspect-ratio: 5 / 4;
  overflow: hidden;
  border-radius: var(--r-arch);
  background: var(--bone-200);
  max-height: 640px;
}
.journal-feat__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 2400ms var(--ease-out);
}
.journal-feat__media:hover img { transform: scale(1.03); }
.journal-feat__num {
  position: absolute;
  bottom: 24px; right: 28px;
  font: 300 italic clamp(60px, 8vw, 128px)/0.8 var(--font-display);
  color: var(--bone-50);
  text-shadow: 0 2px 24px rgba(28,24,20,0.4);
}
.journal-feat__body { display: grid; gap: 22px; }
.journal-feat__title {
  font: 300 clamp(36px, 4.4vw, 64px)/1.04 var(--font-display);
  letter-spacing: -0.02em;
  margin: 0;
}
.journal-feat__title em { font-style: italic; font-weight: 400; color: var(--clay-600); }
.theme-moss  .journal-feat__title em { color: var(--moss-500); }
.theme-ochre .journal-feat__title em { color: var(--ochre-500); }
.journal-feat__meta {
  display: flex;
  gap: 14px;
  align-items: center;
  font: var(--type-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-muted);
}
.journal-feat__meta .dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .5; }
.journal-feat__desc {
  font: 400 clamp(15px, 1.05vw, 17px)/1.7 var(--font-sans);
  color: var(--fg-muted);
  max-width: 42ch;
  margin-bottom: 14px;
}

@media (max-width: 980px) {
  .journal-feat__inner { grid-template-columns: 1fr; gap: 32px; }
  .journal-feat__media { aspect-ratio: 4 / 3; }
}

/* Filters */
.journal__head {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: clamp(28px, 5vw, 80px);
  align-items: end;
  margin-bottom: clamp(40px, 7vh, 64px);
}
.journal__head h2 {
  font: 300 clamp(36px, 4.4vw, 64px)/1.04 var(--font-display);
  letter-spacing: -0.02em;
}
.journal__head h2 em { font-style: italic; font-weight: 400; color: var(--clay-600); }
.theme-moss  .journal__head h2 em { color: var(--moss-500); }
.theme-ochre .journal__head h2 em { color: var(--ochre-500); }

.journal__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}
.journal__filter {
  padding: 8px 16px;
  border: 1px solid var(--rule);
  border-radius: var(--r-pill);
  background: transparent;
  font: 500 12px/1 var(--font-sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-900);
  transition: background var(--dur-2) var(--ease-out),
              color var(--dur-2) var(--ease-out),
              border-color var(--dur-2) var(--ease-out);
}
.journal__filter:hover { background: rgba(28,24,20,0.04); }
.journal__filter.is-active {
  background: var(--ink-900);
  color: var(--bone-50);
  border-color: var(--ink-900);
}
@media (max-width: 880px) {
  .journal__head { grid-template-columns: 1fr; }
  .journal__filters { justify-content: flex-start; }
}

/* ============================================================
   LANGUAGE SELECTOR
   ============================================================ */
.nav__lang {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 500 11px/1 var(--font-sans);
  letter-spacing: 0.12em;
  opacity: .75;
  transition: opacity var(--dur-2) var(--ease-out);
  padding: 6px 0;
}
.nav__lang:hover { opacity: 1; }
.nav__lang span { transition: color var(--dur-2) var(--ease-out), opacity var(--dur-2) var(--ease-out); opacity: .5; }
.nav__lang span.is-active { opacity: 1; color: currentColor; }
.nav__lang-sep {
  display: inline-block;
  width: 1px;
  height: 10px;
  background: currentColor;
  opacity: .3;
}
.nav__lang--mobile {
  font-size: 14px;
  letter-spacing: 0.08em;
  color: var(--ink-900);
}