/* ============================================================
   Ulpotha — design system
   Brand held from ulpotha.com: warm sand ground (#F8F7F3),
   near-black ink, Lora display + Open Sans body,
   photography-led, unhurried.
   ============================================================ */

/* ---------- web fonts (self-hosted since 30 Sep 2026) ----------
   Lora and Open Sans from /assets/fonts/: the latin and latin-ext files Google Fonts serves, with
   its unicode ranges (a browser fetches a file only for the characters a page uses) and
   font-display: swap. Before this every page waited for a stylesheet and the font files from two
   Google origins, two more connections before the first paint. Every page head
   preloads the two upright latin files (lora-v37-latin, open-sans-v44-latin); the version is in
   the file names, so they can be cached for good. Licence: /assets/fonts/LICENSE-OFL.txt. */
/* Lora italic 400 600, latin-ext */
@font-face {
  font-family: "Lora";
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url("/assets/fonts/lora-v37-italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Lora italic 400 600, latin */
@font-face {
  font-family: "Lora";
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url("/assets/fonts/lora-v37-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Lora normal 400 600, latin-ext */
@font-face {
  font-family: "Lora";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/assets/fonts/lora-v37-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Lora normal 400 600, latin */
@font-face {
  font-family: "Lora";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/assets/fonts/lora-v37-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Open Sans italic 400, latin-ext */
@font-face {
  font-family: "Open Sans";
  font-style: italic;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url("/assets/fonts/open-sans-v44-italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Open Sans italic 400, latin */
@font-face {
  font-family: "Open Sans";
  font-style: italic;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url("/assets/fonts/open-sans-v44-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Open Sans normal 400, latin-ext */
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url("/assets/fonts/open-sans-v44-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Open Sans normal 400, latin */
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url("/assets/fonts/open-sans-v44-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Open Sans normal 600, latin-ext */
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url("/assets/fonts/open-sans-v44-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Open Sans normal 600, latin */
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url("/assets/fonts/open-sans-v44-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* the [hidden] attribute must beat author display:flex/grid rules (the UA
   stylesheet's [hidden]{display:none} loses on specificity) — global guard */
[hidden] { display: none !important; }

:root {
  --sand: #f8f7f3;
  --sand-deep: #efece4;
  --ink: #262626;
  --bark: #2f2721;   /* warm near-black for solid buttons and dark chips */
  /* small print carries a lot of this site (eyebrows, captions, notes, labels), so both
     greys clear WCAG AA 4.5:1 on every light ground we use: sand, sand-deep and white.
     They stay warm rather than neutral black, and faint stays a step lighter than soft. */
  --ink-soft: #5a564d;
  --ink-faint: #6b665c;
  --night: #070b12;
  --night-soft: #101826;
  --dawn: #d9a05b;
  --dawn-soft: #e8c79a;
  --leaf: #4a5d45;
  --brand: #b32416;   /* Ulpotha red, exact uit het merklogo (Lulu, 12 aug) */
  --white: #ffffff;

  --font-display: "Lora", Georgia, "Times New Roman", serif;
  --font-body: "Open Sans", "Open Sans Fallback", sans-serif;
  --font-quote: Georgia, serif;

  --ease-slow: cubic-bezier(0.22, 0.61, 0.36, 1);
  --reveal-duration: 1.4s;

  --max-w: 1200px;
  --max-text: 680px;
  --pad: clamp(1.25rem, 4vw, 3rem);
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* in-page anchors clear the fixed header (matches the 5.5rem sticky offsets used elsewhere) */
  scroll-padding-top: 5.5rem;
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body {
  margin: 0;
  background: var(--sand);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

html.nav-open body { overflow: hidden; }

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

/* ---------- typography ---------- */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.12;
  margin: 0 0 0.6em;
  letter-spacing: -0.01em;
}
h1 { font-size: clamp(2.6rem, 6.5vw, 4.75rem); }
h2 { font-size: clamp(1.9rem, 4vw, 3rem); }
h3 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); }

p { margin: 0 0 1.2em; }
p:last-child { margin-bottom: 0; }

.lede {
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  line-height: 1.65;
  color: var(--ink);
}

.eyebrow {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 1.4rem;
}

.muted { color: var(--ink-soft); }

a { color: inherit; }

blockquote, .quote {
  font-family: var(--font-quote);
  font-style: italic;
  font-size: clamp(1.2rem, 2.2vw, 1.55rem);
  line-height: 1.6;
  color: var(--ink);
  margin: 0;
}

/* ---------- layout ---------- */

.wrap { max-width: var(--max-w); margin: 0 auto; padding-inline: var(--pad); }
.wrap--text { max-width: var(--max-text); margin-inline: auto; }

.section { padding-block: clamp(4.5rem, 10vw, 8.5rem); }
.section--tight { padding-block: clamp(3rem, 6vw, 5rem); }
.section--deep { background: var(--sand-deep); }
.section--night { background: var(--night); color: var(--sand); }
.section--night .eyebrow, .section--nightfall .eyebrow { color: var(--dawn-soft); }
.section--night .muted, .section--nightfall .muted { color: #b9b4a9; }
/* the global .lede / .quote are dark ink — lift them to sand on dark sections so they stay legible */
.section--night .lede, .section--nightfall .lede { color: var(--sand); }
.section--night .quote, .section--nightfall .quote { color: var(--sand); }

.center { text-align: center; }

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.25rem, 2.5vw, 2.25rem);
}
@media (max-width: 860px) {
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
}

.rule {
  border: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, #d8d3c8, transparent);
  margin: 0 auto;
  max-width: var(--max-w);
}

/* ---------- buttons ---------- */

.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
  border-radius: 999px;
  padding: 0.95em 2.3em;
  border: 1px solid var(--ink);
  color: var(--ink);
  background: transparent;
  cursor: pointer;
  transition: background-color 0.45s var(--ease-slow), color 0.45s var(--ease-slow),
              border-color 0.45s var(--ease-slow), transform 0.45s var(--ease-slow);
}
.btn:hover { background: var(--bark); color: var(--sand); transform: translateY(-2px); }
.btn--solid { background: var(--bark); color: var(--sand); }
.btn--solid:hover { background: #46392e; border-color: #46392e; }
.btn--dawn { background: var(--dawn); border-color: var(--dawn); color: var(--night); }
.btn--dawn:hover { background: var(--dawn-soft); border-color: var(--dawn-soft); color: var(--night); }
.btn--ghost-light { border-color: rgba(248, 247, 243, 0.55); color: var(--sand); }
.btn--ghost-light:hover { background: var(--sand); color: var(--night); border-color: var(--sand); }

/* ---------- header ---------- */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  transition: background-color 0.6s var(--ease-slow), box-shadow 0.6s var(--ease-slow);
}
.site-header .wrap {
  max-width: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 1.1rem;
}
.site-header.scrolled {
  background: rgba(248, 247, 243, 0.92);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 rgba(38, 38, 38, 0.07);
}

.brand { display: inline-flex; align-items: center; text-decoration: none; flex-shrink: 0; }
.brand img { height: 34px; width: auto; }
/* Over the dark hero the crimson wordmark is lifted to white; once scrolled, back to brand red. */
.header-on-dark:not(.scrolled) .brand img { filter: brightness(0) invert(1); }
.header-on-dark:not(.scrolled) { --nav-ink: var(--sand); }
.site-header { --nav-ink: var(--ink); }

.site-nav { display: flex; align-items: center; gap: clamp(0.8rem, 1.5vw, 1.6rem); }
.site-nav a {
  color: var(--nav-ink);
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  opacity: 0.92;
  transition: opacity 0.3s;
}
.site-nav a:hover { opacity: 1; }
/* Underlining the current page suits a text link, but on /book the current page IS
   the Book button, and the reduced padding-bottom squashed it (44px tall elsewhere,
   37px there) and drew a line under the pill. */
.site-nav a.is-active:not(.btn) { border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.site-nav .btn { color: var(--nav-ink); border-color: currentColor; padding: 0.6em 1.6em; }
.site-header.scrolled .site-nav .btn:hover,
.site-header:not(.header-on-dark) .site-nav .btn:hover { background: var(--bark); color: var(--sand); }
.header-on-dark:not(.scrolled) .site-nav .btn:hover { background: var(--sand); color: var(--night); }

.nav-toggle {
  display: none;
  background: none;
  border: 0;
  width: 44px;
  height: 44px;
  cursor: pointer;
  position: relative;
  z-index: 70;
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--nav-ink);
  margin: 5px auto;
  transition: transform 0.4s var(--ease-slow), opacity 0.3s;
}
html.nav-open .nav-toggle span { background: var(--sand); }
html.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
html.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
html.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- nav dropdowns (audit W.CO, Sep 2026) ----------
   Five top-level links, each (except Contact) opening a small sand panel with the
   pages that used to be reachable only from the footer or from inside the site
   (/retreats, /instructors, /therapists, /ayurveda-retreat, /journal, /calendar,
   /weather). Hover or keyboard focus opens the panel; on the phone menu the
   sub-links are simply listed under their group. */
.nav-group { position: relative; display: flex; align-items: center; }
.nav-group > a::after {
  content: ""; display: inline-block; width: 0.38em; height: 0.38em; margin-left: 0.5em;
  border-right: 1px solid currentColor; border-bottom: 1px solid currentColor;
  transform: translateY(-40%) rotate(45deg); opacity: 0.7;
}
.nav-sub {
  position: absolute; top: 100%; left: 50%; z-index: 30;
  min-width: 14rem; padding: 0.55rem 0;
  background: var(--sand); color: var(--ink);
  border-radius: 4px; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);
  opacity: 0; visibility: hidden;
  transform: translateX(-50%) translateY(8px);
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0s linear 0.22s;
}
.nav-sub::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
.nav-group:hover .nav-sub,
.nav-group:focus-within .nav-sub { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); transition-delay: 0s; }
.site-nav .nav-sub a {
  display: block; padding: 0.45rem 1.25rem; color: var(--ink); opacity: 1;
  font-size: 0.92rem; letter-spacing: 0.01em; white-space: nowrap; border-bottom: 0;
}
.site-nav .nav-sub a:hover { background: rgba(47, 39, 33, 0.07); }
.site-nav .nav-sub a.is-active { font-weight: 600; padding-bottom: 0.45rem; }

/* The top-level links plus the Book button need room: below this the header used to
   squeeze the logo to nothing, so the menu takes over instead. The switch sits where
   there is real slack rather than where the row merely just fits. Since Teacher
   Training became a top-level link (26 Sep 2026) a link wrapped onto two lines up
   to about 1135px; measured at 1161px the row has 52px to spare. */
@media (max-width: 1160px) {
  .nav-toggle { display: block; }
  .site-nav {
    position: fixed;
    inset: 0;
    flex-direction: column;
    justify-content: safe center;
    /* ten items have to fit a short phone too: on a 667px screen a flat 2rem
       gap ran 681px tall and clipped the first and last item, so the gap
       follows the viewport height and the panel can scroll if it ever needs to */
    gap: clamp(0.9rem, 3vh, 2rem);
    overflow-y: auto;
    padding: 4.5rem 1.25rem 2.5rem;
    background: var(--night);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.6s var(--ease-slow);
  }
  .site-nav a { color: var(--sand); font-size: 1.3rem; font-family: var(--font-display); letter-spacing: 0.02em; }
  /* The Book button inherits --nav-ink, which is dark whenever the header is
     scrolled or sits on a light page. Inside the dark menu that left it at
     1.3:1 against the panel, so it read as an empty outline. */
  .site-nav .btn { color: var(--sand); border-color: rgba(248, 247, 243, 0.55); }
  .site-nav .btn:hover { background: var(--sand); color: var(--night); border-color: var(--sand); }
  html.nav-open .site-nav { opacity: 1; pointer-events: auto; }
  /* The scrolled header uses backdrop-filter, and that makes it the containing
     block for its position:fixed children. The full screen menu is one of them,
     so mid page it collapsed to the height of the header bar. Drop the blur
     while the menu is open: it sits behind a full screen panel anyway. */
  html.nav-open .site-header.scrolled {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  /* dropdown groups inside the phone menu: the group link stays, its pages sit
     underneath in a smaller wrapped row, so every page is one tap away */
  .nav-group { flex-direction: column; align-items: center; gap: 0.3rem; }
  .nav-group > a::after { display: none; }
  .nav-sub {
    position: static; transform: none; opacity: 1; visibility: visible;
    min-width: 0; padding: 0; background: transparent; box-shadow: none;
    display: flex; flex-wrap: wrap; justify-content: center; gap: 0.15rem 1rem;
  }
  .site-nav .nav-sub a { color: var(--sand); opacity: 0.72; font-family: var(--font-body); font-size: 0.95rem; padding: 0.1rem 0.15rem; letter-spacing: 0.01em; }
  .site-nav .nav-sub a.is-active { opacity: 1; font-weight: 600; }
}

/* ---------- hero ---------- */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  color: var(--sand);
  overflow: hidden;
}
.hero--short { min-height: 72svh; }
.hero-media { position: absolute; inset: 0; z-index: -1; }
.hero-media picture { position: absolute; inset: 0; }
.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* hero video (home): sits over the poster, and the poster is the video's own first frame (landscape and
   portrait), so the hand-over is a still that starts to move rather than a cut. site.js shows the first frame,
   fades it in, then lets it run; never with reduced motion or Save-Data; the portrait cut on phones held
   upright. Ken Burns runs on both layers in step and freezes where it is once the video shows. */
.hero-media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.6s var(--ease-slow), filter 4.5s var(--ease-slow);
}
.hero-media.is-playing video { opacity: 1; }
.hero-media.is-playing img, .hero-media.is-playing video { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .hero-media video { display: none; } }
.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  /* keep the upper text legible over bright photos: hold the scrim through the
     mid band where the eyebrow/headline sit, not just at the very bottom */
  background: linear-gradient(to top, rgba(7, 11, 18, 0.78) 0%, rgba(7, 11, 18, 0.44) 46%, rgba(7, 11, 18, 0.46) 100%);
}
.hero .wrap {
  position: relative;
  padding-block: clamp(3.5rem, 8vw, 6.5rem);
  /* --hero-lift raises the title block off the bottom edge of the photo. Set per page:
     index.html's own style block, or the "Title height" slider in the CMS, which the build
     bakes in as an inline style on the section (no runtime CSS or JS involved). */
  padding-bottom: calc(clamp(3.5rem, 8vw, 6.5rem) + var(--hero-lift, 0svh));
  width: 100%;
}
/* phones: their own lift when one is set (the CMS "on phones" slider), otherwise the shared one */
@media (max-width: 640px) {
  .hero .wrap { padding-bottom: calc(clamp(3.5rem, 8vw, 6.5rem) + var(--hero-lift-phone, var(--hero-lift, 0svh))); }
}
.hero h1 { text-shadow: 0 8px 24px rgba(0, 0, 0, 0.35); max-width: 14em; }
.hero .lede { max-width: 36em; color: inherit; text-shadow: 0 2px 14px rgba(0, 0, 0, 0.45); }
.hero .eyebrow { color: rgba(248, 247, 243, 0.92); text-shadow: 0 2px 14px rgba(0, 0, 0, 0.5); }

.kenburns img, .kenburns video { animation: kenburns 38s var(--ease-slow) both alternate infinite; }
@keyframes kenburns {
  from { transform: scale(1.04) translateY(0); }
  to { transform: scale(1.13) translateY(-1.6%); }
}

/* ---------- reveals ---------- */

[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity var(--reveal-duration) var(--ease-slow),
              transform var(--reveal-duration) var(--ease-slow);
  transition-delay: var(--reveal-delay, 0s);
}
[data-reveal].is-visible { opacity: 1; transform: none; }
[data-reveal="fade"] { transform: none; }

/* ---------- imagery ---------- */

.frame { overflow: hidden; border-radius: 4px; }
.frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 2.8s var(--ease-slow);
}
.frame:hover img { transform: scale(1.045); }
.frame--tall { aspect-ratio: 3 / 4; }
.frame--wide { aspect-ratio: 16 / 10; }
.frame--square { aspect-ratio: 1; }

figcaption {
  font-size: 0.85rem;
  color: var(--ink-faint);
  margin-top: 0.8rem;
  letter-spacing: 0.02em;
}

/* ---------- cards ---------- */

.card {
  background: var(--white);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(38, 38, 38, 0.05), 0 12px 40px -18px rgba(38, 38, 38, 0.18);
}
.card-body { padding: clamp(1.4rem, 2.5vw, 2rem); }

/* ---------- footer ---------- */

.site-footer {
  background: var(--night);
  color: #b9b4a9;
  padding-block: clamp(3.5rem, 7vw, 5.5rem) 2.5rem;
  font-size: 0.95rem;
}
.site-footer a { color: var(--sand); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; text-underline-offset: 3px; }
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 2.5rem;
  margin-bottom: 3rem;
}
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem 1.5rem; } }
/* on a phone the link lists stay two-up so the footer does not run on down the
   screen; only the brand column, which carries the newsletter, spans the width */
@media (max-width: 520px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 1.8rem 1.2rem; margin-bottom: 2rem; }
  .footer-grid > :first-child { grid-column: 1 / -1; }
  .site-footer { padding-block: clamp(2.5rem, 8vw, 3.5rem) 1.8rem; }
}

/* ---------- newsletter ---------- */
.nl { margin-top: 1.6rem; max-width: 26rem; }
.nl-line { font-size: 0.88rem; color: #b9b4a9; margin: 0 0 0.8rem; }
.nl-row { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.nl-input {
  flex: 1 1 12rem;
  min-width: 0;
  background: rgba(248, 247, 243, 0.06);
  border: 1px solid rgba(248, 247, 243, 0.25);
  border-radius: 999px;
  padding: 0.7em 1.1em;
  color: var(--sand);
  font-family: var(--font-body);
  font-size: 0.92rem;
}
.nl-input::placeholder { color: #89847a; }
.nl-input:focus-visible { outline: 2px solid var(--dawn); outline-offset: 2px; }
.nl-btn {
  border: 1px solid var(--dawn);
  background: var(--dawn);
  color: var(--night);
  border-radius: 999px;
  padding: 0.7em 1.5em;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: background 0.3s, border-color 0.3s;
}
.nl-btn:hover { background: var(--dawn-soft); border-color: var(--dawn-soft); }
.nl-btn:focus-visible { outline: 2px solid var(--sand); outline-offset: 2px; }
.site-footer .brand img { height: 38px; filter: brightness(0) invert(1); }
.footer-heading {
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #89847a;
  margin-bottom: 1.1rem;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.footer-bottom {
  border-top: 1px solid rgba(248, 247, 243, 0.12);
  padding-top: 1.8rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: 0.82rem;
  color: #89847a;
}

/* ---------- forms ---------- */

.field { display: grid; gap: 0.45rem; margin-bottom: 1.4rem; }
.field label {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.field input, .field select, .field textarea {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
  background: var(--white);
  border: 1px solid #ddd8cd;
  border-radius: 4px;
  padding: 0.85em 1em;
  transition: border-color 0.3s;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--dawn);
  box-shadow: 0 0 0 3px rgba(217, 160, 91, 0.18);
}

/* ---------- utilities ---------- */

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   Retreat cards: one component for /retreats (the chooser) and step one of /book
   (the same card, with a button instead of a link). Since 17 Sep 2026. The card is
   generated (scripts/gen_retreats.py) or rendered by book.html from the same data and
   carries data-cms-skip: its text lives in the Retreat Manager, not in Pages.
   ============================================================ */
.retreat-list { list-style: none; margin: 2.2rem 0 0; padding: 0; display: grid; gap: 1.1rem; scroll-margin-top: 6rem; }
.rl-season { font-size: 0.76rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); margin: 2.6rem 0 0; }
.rl-season:first-child { margin-top: 0; }
.retreat-card {
  scroll-margin-top: 6rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem 1.6rem;
  padding: 0.9rem 0.9rem 1rem;
  background: var(--white);
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(38, 38, 38, 0.05), 0 14px 44px -22px rgba(38, 38, 38, 0.2);
}
.retreat-card:target, .retreat-card.is-linked { box-shadow: 0 0 0 2px var(--dawn), 0 14px 44px -22px rgba(38, 38, 38, 0.3); }
@media (min-width: 900px) {
  .retreat-card { grid-template-columns: 16.5rem minmax(0, 1fr) auto; align-items: center; padding: 0.9rem 1.6rem 0.9rem 0.9rem; }
  .retreat-card--nophoto { grid-template-columns: minmax(0, 1fr) auto; padding-left: 1.6rem; }
}
/* the photo strip: swipe on a phone, arrows with a mouse (site.js adds the dots and arrows
   when there is more than one photo); the box keeps its shape before the pictures arrive */
.rc-media { position: relative; border-radius: 6px; overflow: hidden; background: var(--sand-deep); aspect-ratio: 16 / 10; }
.rc-strip { display: flex; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.rc-strip::-webkit-scrollbar { display: none; }
.rc-photo { flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover; scroll-snap-align: start; display: block; }
.rc-dots { position: absolute; left: 0; right: 0; bottom: 0.55rem; display: flex; justify-content: center; gap: 0.35rem; pointer-events: none; }
.rc-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, 0.55); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18); }
.rc-dot.is-on { background: #fff; }
.rc-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 2rem; height: 2rem; border-radius: 50%; border: 0;
  background: rgba(248, 247, 243, 0.88); color: var(--ink); cursor: pointer;
  display: none; align-items: center; justify-content: center;
  font-size: 1.25rem; line-height: 1; padding: 0 0 0.1rem;
}
.rc-arrow--prev { left: 0.5rem; }
.rc-arrow--next { right: 0.5rem; }
.rc-media.has-many:hover .rc-arrow, .rc-media.has-many:focus-within .rc-arrow { display: inline-flex; }
@media (hover: none) { .rc-arrow { display: none !important; } }
.rc-main { min-width: 0; }
.rc-dates { font-size: 0.74rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dawn); margin: 0; }
.rc-title { font-family: var(--font-display); font-size: clamp(1.25rem, 2.2vw, 1.55rem); line-height: 1.12; margin: 0.3rem 0 0.3rem; }
.rc-title a { color: inherit; text-decoration: none; }
.rc-title a:hover, .rc-title a:focus-visible { text-decoration: underline; text-decoration-color: var(--dawn); text-underline-offset: 4px; }
.rc-teacher { font-size: 0.92rem; color: var(--ink-soft); margin: 0 0 0.55rem; }
.rc-teacher a { color: var(--ink); text-decoration: underline; text-decoration-color: rgba(38, 38, 38, 0.25); text-underline-offset: 2px; }
.rc-teacher a:hover { text-decoration-color: var(--dawn); }
.rc-hook { font-size: 0.94rem; color: var(--ink-soft); max-width: 44em; margin: 0; }
.rc-foot { margin: 0.8rem 0 0; display: flex; flex-wrap: wrap; gap: 0.4rem 1.1rem; align-items: baseline; }
.rc-dur { font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); }
.rc-more { font-size: 0.85rem; color: var(--ink); text-decoration: underline; text-decoration-color: rgba(38, 38, 38, 0.28); text-underline-offset: 3px; }
.rc-more:hover { text-decoration-color: var(--dawn); }
.rc-side { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; padding-top: 0.9rem; border-top: 1px solid rgba(38, 38, 38, 0.08); }
.rc-side .btn { margin-left: auto; font: inherit; font-size: 0.9rem; }
@media (min-width: 900px) {
  .rc-side { flex-direction: column; align-items: flex-start; padding-top: 0; border-top: 0; min-width: 11rem; }
  .rc-side .btn { margin-left: 0; margin-top: 0.3rem; }
}
.rc-price { font-family: var(--font-display); font-size: 1.25rem; color: var(--ink); margin: 0; }
.rc-price s { color: var(--ink-faint); font-size: 0.95rem; margin-right: 0.35rem; font-family: var(--font-body); }
.rc-eb { font-size: 0.74rem; color: var(--dawn); font-weight: 600; }

/* month chips on a phone: the season at a glance, one tap to the first retreat of that month
   (on wider screens the planner strip does this job) */
.rl-months { display: flex; gap: 0.5rem; overflow-x: auto; scrollbar-width: none; margin: 1.4rem 0 0; padding-bottom: 0.2rem; }
.rl-months::-webkit-scrollbar { display: none; }
.rl-months a {
  flex: none; font-size: 0.76rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink); text-decoration: none; padding: 0.5em 1em;
  border: 1px solid rgba(38, 38, 38, 0.18); border-radius: 999px; background: var(--white);
}
.rl-months a:hover { border-color: var(--ink); }
@media (min-width: 821px) { .rl-months { display: none; } }
.rl-planner { margin-top: 1.6rem; }
@media (max-width: 820px) { .rl-planner { display: none; } }

/* the retreats page hero: title, one line, the price and two buttons, like the homepage; the
   block is lifted off the bottom edge the same way (the CMS "Title height" slider overrides it) */
.hero--retreats { min-height: 100svh; --hero-lift: 0svh; --hero-lift-phone: 0svh; }   /* block right at the foot of the photo (Robbe: 0%, not 8%) */
.hero--retreats .wrap { padding-top: 6rem; }
.hero--retreats .hero-ctas { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 2.2rem; }
.hero--retreats .hero-price { margin: 0.9rem 0 0; font-size: 1.05rem; color: var(--sand); text-shadow: 0 2px 14px rgba(0, 0, 0, 0.45); }
.hero--retreats .hero-price strong { font-weight: 600; }