/* ============================================================
   CULTIVAETE 2027
   The type and colour of the new look, for every page that loads
   this file. Swap the tokens here and the whole site follows.
   Syne for display, Schibsted Grotesk for everything you read.
   Warm grey instead of cream, a deeper wild fig, dark sections for
   rhythm, and half the vertical air of the first draft.
   The wordmark keeps the old serif on purpose.
   ============================================================ */

@font-face {
  font-family: 'Lowera';
  src: url('../assets/fonts/lowera-regular.woff2') format('woff2'),
       url('../assets/fonts/lowera-regular.woff') format('woff');
  font-weight: 100 900;
  font-display: swap;
}
/* Lowera tekent het euroteken piepklein op de basislijn, en de pijltjes zitten
   er niet in. Die drie tekens komen uit de tekstfont. Deze declaratie staat na
   de bovenstaande, dus hij wint voor precies dit bereik. */
@font-face {
  font-family: 'Lowera';
  src: local('Helvetica Neue'), local('Helvetica'), local('Arial');
  unicode-range: U+20AC, U+2190, U+2192;
}
@font-face {
  font-family: 'Tenor Sans';
  src: url('../assets/fonts/tenor-sans.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: 'Syne';
  src: url('../assets/fonts/syne.woff2') format('woff2');
  font-weight: 400 800;
  font-display: swap;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  src: url('../assets/fonts/schibsted-grotesk.woff2') format('woff2');
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  src: url('../assets/fonts/schibsted-grotesk-italic.woff2') format('woff2');
  font-weight: 400 600;
  font-style: italic;
  font-display: swap;
}

body {
  /* Emma's palette, October 2026. Warm Linen is the base, Soft Sky is the
     brand colour you see on every page header, Deep Midnight is the accent
     and every button, Olive Garden is the italic. */
  --almond-cream: #E8E2DD;   /* the warm off-white Koen picked off Son Blanc */
  --paper:        #E8E2DD;
  --paper-deep:   #DED8D1;   /* the same, one step down */
  --linen:        #EAE5DA;   /* Emma's Warm Linen, kept for the odd warm panel */
  --butter:       #F3E9C9;   /* Butter Cream, the second surface */
  --sky:          #B8CCDB;   /* Soft Sky */
  --sage:         #A4AF91;   /* Sage Leaf, now a surface and not just a line */
  --sage-soft:    #C6CDBA;   /* sage with the light turned up */
  --sage-deep:    #5F6C52;   /* sage with the light turned down, so white reads on it */

  --midnight:     #252C49;   /* Deep Midnight, accents and buttons */
  --midnight-up:  #313A5E;   /* one step up, for hover */
  --ink:          #A4AF91;   /* what used to be the dark band is sage now */
  --dark:         #A4AF91;
  --text:         #252C49;   /* you read in midnight. no brown, no black */
  --wild-fig:     #626F48;   /* Olive Garden, the italic on light */
  --wild-fig-up:  #B8CCDB;   /* Soft Sky, the italic on dark */
  --mosswood:     #4B5637;   /* a deeper olive, so green on green never merges */

  --font-display: 'Lowera', 'Tenor Sans', Georgia, serif;
  --font-body:    'Helvetica Neue', Helvetica, Arial, sans-serif;

  /* half the air of the first draft */
  --sp-lg: 2.5rem;
  --sp-xl: 4rem;

  background: var(--paper);
  font-family: var(--font-body);
  color: var(--text);
  letter-spacing: -0.005em;
}

/* het woordmerk gaat mee in Syne, oktober 2026 */
body .nav-logo, body .logo, body .hero-logo {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.12em;
}

body h1, body h2, body h3, body h4, body h5, body h6,
body .newsletter-popup-label, body .pg-head,
body .pg-list-head, body .pg-layer-name, body .hm-head {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.035em;
}
body .pg-text, body .pg-note, body p, body li {
  font-family: var(--font-body);
}
body .pg-mark, body .pg-caption, body .lab-eyebrow, body .hm-eyebrow {
  font-family: var(--font-display);
  font-weight: 600;
}

/* tighter rhythm everywhere on this page */
body .pg-tall { padding: 4.5rem 0; }
body .pg-mid { padding: 3.25rem 0; }
body .pg-short { padding: 2.75rem 0 2.25rem; }
body .pg-text { font-size: 1rem; line-height: 1.65; max-width: 46ch; margin-top: 0.85rem; }
body .pg-head { font-size: clamp(1.9rem, 3.6vw, 3.1rem); line-height: 1.08; }
body .pg { background: var(--paper); --rule: rgba(33, 31, 28, 0.22); }
body .pg-dark { background: var(--ink); --rule: rgba(222, 216, 204, 0.26); }
body .pg-dark .pg-head em, body .pg-dark .pg-word { color: var(--wild-fig-up); }

/* ---- HERO: dense, typographic, one big photograph --------------- */
.hm-hero {
  background: var(--paper);
  padding: calc(var(--nav-h) + 3rem) 0 2.5rem;
  border-bottom: 1px solid rgba(33, 31, 28, 0.22);
}
.hm-hero-grid {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--sp-md);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: var(--sp-md) var(--sp-lg);
  align-items: end;
}
.hm-eyebrow {
  font-size: 0.625rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0.6;
}
.hm-head {
  font-size: clamp(2.4rem, 6vw, 4.6rem);
  line-height: 0.92;
  letter-spacing: -0.04em;
  color: var(--ink);
  margin: 0.8rem 0 0;
}
.hm-head em { font-style: italic; color: var(--wild-fig); }
.hm-sub { font-size: 1.0625rem; line-height: 1.55; max-width: 34ch; margin-top: 1.1rem; }
.hm-hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; }
.hm-hero-media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  box-shadow: 0 30px 60px -30px rgba(26, 25, 23, 0.55);
}
.hm-hero-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- FLOATING WINDOWS: the four layers -------------------------- */
.hm-float {
  position: relative;
  min-height: 560px;
  margin-top: 1.5rem;
}
.hm-win {
  position: absolute;
  display: block;
  width: 30%;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: transform 0.55s var(--ease), opacity 0.45s var(--ease), box-shadow 0.55s var(--ease);
  box-shadow: 0 22px 45px -28px rgba(26, 25, 23, 0.7);
}
.hm-win-in { display: block; animation: hm-drift 8s ease-in-out infinite; }
.hm-win:nth-child(2) .hm-win-in { animation-duration: 9.5s; animation-delay: -2s; }
.hm-win:nth-child(3) .hm-win-in { animation-duration: 7.5s; animation-delay: -4s; }
.hm-win:nth-child(4) .hm-win-in { animation-duration: 10.5s; animation-delay: -1s; }
@keyframes hm-drift {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-16px) rotate(-0.4deg); }
}
/* they are laid out so the middle of each one stays clear of the others */
.hm-win--1 { left: 0; top: 2%; width: 31%; }
.hm-win--2 { left: 34%; top: 20%; width: 29%; }
.hm-win--3 { right: 2%; top: 0; width: 32%; }
.hm-win--4 { left: 16%; bottom: 0; width: 30%; }

.hm-win-media { position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: var(--mosswood); }
.hm-win-media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 1.2s var(--ease), filter 0.6s var(--ease);
  filter: saturate(0.85) brightness(0.82);
}
.hm-win-num {
  position: absolute;
  top: 0.75rem;
  left: 0.9rem;
  font-size: 0.625rem;
  letter-spacing: 0.2em;
  color: var(--paper);
  opacity: 0.8;
  z-index: 2;
}
.hm-win-name {
  position: absolute;
  left: 0.9rem;
  bottom: 0.8rem;
  z-index: 2;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.1rem, 1.7vw, 1.5rem);
  letter-spacing: -0.02em;
  color: var(--paper);
}
.hm-win--brand .hm-win-name { color: var(--wild-fig-up); font-style: italic; }
.hm-win-text {
  margin-top: 0.6rem;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--text);
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.45s var(--ease), transform 0.5s var(--ease);
}

@media (hover: hover) and (pointer: fine) {
  .hm-win:hover { transform: scale(1.07) translateY(-10px); z-index: 20; }
  .hm-float:hover .hm-win:not(:hover) { transform: scale(0.94); opacity: 0.45; }
  .hm-win:hover .hm-win-media img { filter: none; transform: scale(1.04); }
  .hm-win:hover .hm-win-text { opacity: 1; transform: none; }
}
.hm-win.is-open { transform: scale(1.07) translateY(-10px); z-index: 20; }
.hm-win.is-open .hm-win-media img { filter: none; }
.hm-win.is-open .hm-win-text { opacity: 1; transform: none; }

@media (max-width: 900px) {
  .hm-hero-grid { grid-template-columns: 1fr; }
  .hm-float {
    position: static;
    min-height: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
  .hm-win { position: static; width: auto; }
  .hm-win-in { animation: none; }
}

/* ============================================================
   HERO: a wall of photographs. Move through it and the one under
   your hand comes forward, the rest step back. On a phone, where
   there is no cursor, it picks one by itself every few seconds.
   Each frame drifts on its own, like a print lying loose.
   ============================================================ */
.hm-wall {
  position: relative;
  height: 100vh;
  height: 100dvh;
  min-height: 600px;
  background: var(--dark);
  overflow: hidden;
  isolation: isolate;
}
.hm-wall-grid {
  position: absolute;
  inset: -3%;
  display: grid;
  gap: 6px;
  grid-template-columns: repeat(var(--cols, 7), 1fr);
  grid-template-rows: repeat(var(--rows, 5), 1fr);
  grid-auto-flow: dense;
}
/* not a tidy wall: some frames are twice the size of their neighbour */
.hm-tile--w { grid-column: span 2; }
.hm-tile--h { grid-row: span 2; }
.hm-tile--b { grid-column: span 2; grid-row: span 2; }

/* the frame itself drifts */
.hm-tile {
  position: relative;
  background: #11100F;
  animation: hm-hover var(--dur, 11s) ease-in-out var(--delay, 0s) infinite;
  transition: filter 0.45s var(--ease), opacity 0.45s var(--ease);
  will-change: transform;
}
@keyframes hm-hover {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  33% { transform: translate3d(var(--dx, 4px), calc(var(--dy, 5px) * -1), 0) rotate(var(--rot, 0.5deg)); }
  66% { transform: translate3d(calc(var(--dx, 4px) * -1), var(--dy, 5px), 0) rotate(calc(var(--rot, 0.5deg) * -1)); }
}
/* the scale under the cursor rides on the inner frame, so both can move */
.hm-tile-in {
  position: absolute;
  inset: 0;
  overflow: hidden;
  transform: scale(var(--s, 1));
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.hm-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.78) brightness(0.62);
  transition: filter 0.45s var(--ease);
}
.hm-tile.is-near { z-index: 2; }
.hm-tile.is-near img { filter: saturate(0.95) brightness(0.9); }
.hm-tile.is-lead { z-index: 3; }
.hm-tile.is-lead img { filter: none; }
.hm-tile.is-lead .hm-tile-in { box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.9); }

/* the middle stays clear, so the wordmark always reads */
.hm-wall-veil {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background:
    radial-gradient(42% 46% at 50% 48%, rgba(26, 25, 23, 0.72) 0%, rgba(26, 25, 23, 0.6) 45%, rgba(26, 25, 23, 0) 100%),
    linear-gradient(180deg, rgba(26, 25, 23, 0.7) 0%, rgba(26, 25, 23, 0) 22%, rgba(26, 25, 23, 0) 72%, rgba(26, 25, 23, 0.85) 100%);
}
.hm-wall-centre {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 0 var(--sp-md);
  pointer-events: none;
}
.hm-wall-title { margin: 0; }
.hm-wall-logo {
  width: min(52vw, 540px);
  aspect-ratio: 1000 / 150;
  background-color: var(--paper);
  -webkit-mask-image: url('../assets/logo-light.png');
  mask-image: url('../assets/logo-light.png');
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  display: block;
  margin: 0 auto;
}
.hm-wall-actions { display: flex; gap: 0.75rem; justify-content: center; margin-top: 1.75rem; pointer-events: auto; }

/* the words are there for readers and agents, the wall carries the feeling */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---- headlines that run on instead of breaking mid-phrase -------- */
body .pg-head, body .hm-head, body .pg-list-head, body .cv-head-title {
  text-wrap: balance;
}
body .pg-word { white-space: nowrap; }

@media (max-width: 760px) {
  .hm-wall-grid { gap: 4px; --cols: 4; --rows: 7; }
  .hm-wall-logo { width: 74vw; }
}

/* ---- the bar stays clear until you scroll ------------------------ */
body nav.nav-dark { background: transparent; }
body nav.nav-dark.scrolled { background: rgba(26, 25, 23, 0.95); backdrop-filter: blur(10px); }

/* ---- the rolling strip, on warm grey ----------------------------- */
body .lab-strip-section { background: var(--paper-deep); padding: 2.25rem 0; }
@media (min-width: 901px) { body .lab-slide { flex-basis: min(34vw, 420px); } }


/* ---- the four layers, back as cards, in the new dress ------------- */
body .section-layers { background: var(--paper); padding: 4.5rem 0 4rem; }
body .layers-label { color: var(--ink); opacity: 0.6; font-family: var(--font-display); font-weight: 600; }
body .layer-card-name,
body .layer-card-back-name {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.03em;
  text-transform: lowercase;
}
body .layer-card:nth-child(4) .layer-card-name { font-style: italic; color: var(--wild-fig-up); }
body .layer-card .flip-card-back { background: var(--ink); color: var(--paper); }
body .layer-card-back-text { font-family: var(--font-body); font-weight: 400; }
body .layer-card-hint { font-family: var(--font-display); font-weight: 600; }
/* nothing clipped at the foot of a card */
body .layer-card-front-content { padding-bottom: 1.5rem; }

/* ---- the practice photograph, whole ------------------------------- */
body .pg-break { align-items: center; }
body .pg-break-media { width: 100%; aspect-ratio: 16 / 10; }


/* the wordmark is the heading; the words are there for readers and agents */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.hm-wall-title { margin: 0; }

/* ============================================================
   THE REST OF THE SITE IN THE NEW TYPE
   Syne is wider and tighter than the old serif, so every heading
   that was sized for the serif needs its own measure again.
   ============================================================ */

body .page-hero-headline,
body .fr-headline,
body .retreat-detail-headline,
body .programme-headline,
body .events-next-headline,
body .about-focus-headline,
body .email-headline,
body .pricing-popup-headline,
body .event-reveal-title,
body .lab-title,
body .lab-map-title,
body .lab-what-head,
body .lab-end-head,
body .retreat-split-name,
body .lab-row-name,
body .lab-slide-name,
body .format-panel-name,
body h4, body h5, body h6 { font-weight: 600; letter-spacing: 0.02em; }
body .intro-headline,
body .section-video-headline {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

body .page-hero-headline {
  font-size: clamp(2rem, 4.4vw, 3.4rem);
  line-height: 0.96;
  max-width: 17ch;
}
body .page-hero-label,
body .label-tag,
body .label-tag-light,
body .pkey,
body .programme-time,
body .fr-pillar-name,
body .lab-eyebrow {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.2em;
}
body .fr-pillar-name { letter-spacing: 0.04em; font-weight: 600; font-size: 1.05rem; text-transform: none; }
body .page-hero-sub,
body .fr-sub,
body .programme-sub,
body .retreat-detail-body p,
body .page-hero-body p,
body .fr-acc-text,
body .fr-list-note,
body .programme-note,
body .pval,
body .fr-list li,
body .class-card-back-desc {
  font-family: var(--font-body);
  font-weight: 400;
  letter-spacing: 0;
}
body .page-hero-sub { font-size: 1.0625rem; line-height: 1.5; }
body .fr-headline,
body .retreat-detail-headline,
body .programme-headline { font-size: clamp(1.75rem, 3.2vw, 2.6rem); line-height: 1.0; max-width: 20ch; }
body .events-next-headline { font-size: clamp(1.6rem, 3vw, 2.4rem); line-height: 1.05; }
body .fr-acc-summary,
body .programme-title,
body .class-card-name,
body .class-card-date { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.02em; }
body .fr-acc-summary { font-size: 1.0625rem; }

/* italics are the accent, and there is only one accent now */
body em { font-style: italic; }
body .page-hero-headline em,
body .fr-headline em,
body .retreat-detail-headline em,
body .programme-headline em,
body .events-next-headline em,
body .about-focus-headline em,
body .intro-headline em { color: var(--wild-fig); }
body .page-hero-video em,
body .page-hero-photo em,
body .events-next-merged em,
body .section-video-headline em,
body .retreat-split-name em,
body .lab-slide-name em { color: var(--wild-fig-up); }

/* buttons in the new voice */
body .btn, body .btn-nav, body .class-card-back-cta, body .pricing-action-name {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.14em;
}

/* ---- PHOTO HEROES: shorter, denser, readable ---------------------- */
body .page-hero-video { min-height: 78vh; height: 78vh; }
body .page-hero-video-row { min-height: 0; grid-template-rows: auto auto; align-content: end; }
body .page-hero-photo, body .page-hero-plain { min-height: 52vh; }
body .page-hero-body { margin-bottom: clamp(1.5rem, 4vh, 3rem); }

/* a deeper scrim at the foot, so cream type always holds */
body .hero-video-overlay {
  background: linear-gradient(180deg, rgba(20, 24, 26, 0.62) 0%, rgba(20, 24, 26, 0.3) 18%, rgba(20, 24, 26, 0.5) 50%, rgba(20, 24, 26, 0.88) 100%);
}
body .page-hero-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(180deg, rgba(20, 24, 26, 0.62) 0%, rgba(20, 24, 26, 0.28) 18%, rgba(20, 24, 26, 0.5) 52%, rgba(20, 24, 26, 0.88) 100%);
}
body .page-hero-photo .container { position: relative; z-index: 1; }

/* the headline runs on instead of stacking word by word */
body .page-hero-video .page-hero-headline,
body .page-hero-photo .page-hero-headline {
  font-size: clamp(1.9rem, 3.6vw, 3rem);
  line-height: 0.98;
  max-width: 24ch;
}
/* on a photograph the accent is the light tint, never the dark green */
body .page-hero-video em,
body .page-hero-photo em,
body .page-hero-video .page-hero-headline em,
body .page-hero-photo .page-hero-headline em { color: var(--wild-fig-up); }

/* the wordmark keeps its footing on a bright photograph */
body .page-hero-video ~ nav .logo-img,
body nav.nav-dark:not(.scrolled) .nav-logo .logo-img { filter: drop-shadow(0 1px 6px rgba(0, 0, 0, 0.55)); }
body nav.nav-dark:not(.scrolled) .nav-links a { text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5); }

/* sections breathe less, the whole site reads tighter */
body .fr-section { padding: 4rem 0; }
body .fr-section--alt { padding: 4rem 0; }
body .retreat-programme-section { padding: 4rem 0; }
body .france-gallery-section { padding: 3.5rem 0; }


/* ---- on a dark or green panel the accent is the light tint -------- */
body .lab-what .lab-rotator > span,
body .lab-what em,
body .pg-dark em,
body .pg-dark .lab-rotator > span,
body .events-next-merged em,
body .lab-rows--light .lab-row-name em,
body .section-layers .layer-card-name em { color: var(--wild-fig-up); }
body .lab-what { background: var(--mosswood); }
body .lab-end-head em { color: var(--wild-fig); }


/* ---- descenders: Syne hangs low, so no heading sits on its baseline */
body .pg-head, body .cv-head-title, body .hm-wall-head, body .pg-stat,
body .page-hero-headline, body .fr-headline, body .retreat-detail-headline,
body .programme-headline, body .events-next-headline, body .lab-what-head {
  line-height: 1.08;
  padding-bottom: 0.08em;
}

/* ---- 6. the four layers line up left and right ------------------- */
body .lab-what-item:nth-child(n) { margin-top: 0; }
body .lab-what-grid { align-items: start; row-gap: var(--sp-lg); }

/* ---- 4. the retreats header is the same ink as the other pages --- */
body .lab-top {
  background: var(--ink);
  padding: calc(var(--nav-h) + 1.25rem) 0 1.25rem;
}
body .lab-top .lab-title { color: var(--almond-cream); }
body .lab-top .lab-title em { color: var(--wild-fig-up); }


/* ---- phone: the strip keeps readable cards, the header keeps its head */
@media (max-width: 900px) {
  body .lab-slide { flex: 0 0 78vw; }
  body .lab-top { padding: calc(var(--nav-h) + 1.25rem) 0 1.75rem; }
  body .cv-head { padding: calc(var(--nav-h) + 1.75rem) 0 1.75rem; }
  body .pg-break-media { width: 100%; }
}


/* ---- the bar: the wordmark is always there, always readable ------- */
/* every page now opens on a dark header or a photograph with a scrim,
   so the bar is cream until it fills in on scroll. */
body nav.nav-dark .nav-logo,
body nav.nav-dark .nav-links a { color: var(--almond-cream); }
body nav.nav-dark .logo-img { background-color: var(--almond-cream); }
body nav.nav-dark .nav-links .btn-nav { border-color: rgba(231, 226, 215, 0.45); color: var(--almond-cream); }
body nav.nav-dark .nav-links .btn-nav:hover { background: var(--almond-cream); color: var(--ink); }
body nav.nav-dark .nav-toggle span { background: var(--almond-cream); }
/* style.css hides the nav wordmark on the homepage, because the old video
   hero handed its logo over on scroll. That hero is gone, so bring it back. */
body.home #main-nav .nav-logo { opacity: 1 !important; pointer-events: auto !important; }

/* the italic sits on a photograph in these bands, so it takes the light accent */
body .retreat-detail-overlay .retreat-detail-headline em { color: var(--wild-fig-up); }
body .retreat-detail-overlay-tint {
  background: linear-gradient(180deg, rgba(28,26,23,0.62) 0%, rgba(28,26,23,0.78) 100%);
}


/* ============================================================
   EMMA'S PALETTE, October 2026
   Warm Linen underneath everything, Soft Sky on the page headers
   so the brand colour lands on every page, Butter Cream for the
   second surface, Sage Leaf for the lines, Deep Midnight on every
   button and accent, Olive Garden for the italics on light.
   ============================================================ */

/* Deep Midnight is the accent, so it owns every solid button */
body .btn-primary,
body .pricing-action-block {
  background: var(--midnight);
  color: var(--almond-cream);
}
body .btn-primary:hover,
body .pricing-action-block:hover { background: var(--midnight-up); }
body .pricing-action-block--soft { background: #3A4160; }
body .pricing-action-block--soft:hover { background: #474E72; }
body .btn-outline-dark {
  border-color: rgba(37, 44, 73, 0.4);
  color: var(--midnight);
}
body .btn-outline-dark:hover {
  background: var(--midnight);
  border-color: var(--midnight);
  color: var(--almond-cream);
}
body .inline-link { color: var(--midnight); text-decoration-color: rgba(37, 44, 73, 0.35); }

/* Soft Sky is the brand colour: it carries the page headers */
body .cv-head--ink {
  background: var(--sky);
  color: var(--midnight);
}
body .cv-head--ink .cv-head-label { color: var(--midnight); opacity: 0.6; }
body .cv-head--ink .cv-head-title { color: var(--midnight); }
body .cv-head--ink .cv-head-title em { color: var(--wild-fig); }
/* the bar above it carries the same blue, so the two read as one block */
body.has-sky-head #main-nav:not(.scrolled) { background: var(--sky); }
body.has-sky-head #main-nav:not(.scrolled) .nav-links a,
body.has-sky-head #main-nav:not(.scrolled) .nav-logo { color: var(--midnight); }
body.has-sky-head #main-nav:not(.scrolled) .nav-logo .logo-img { background-color: var(--midnight); }
body.has-sky-head #main-nav:not(.scrolled) .btn-nav {
  border-color: rgba(37, 44, 73, 0.45);
  color: var(--midnight);
}
body.has-sky-head #main-nav:not(.scrolled) .nav-toggle span { background: var(--midnight); }
body.has-sky-head nav.nav-dark:not(.scrolled) .nav-logo .logo-img { filter: none; }

/* Butter Cream is the second surface */
body .fr-section--alt { background: var(--butter); }
body .france-gallery-section { background: var(--butter); }

/* Sage Leaf draws the lines */
body .pg-rule { background: var(--sage); opacity: 0.7; }
body .pg-mark b { color: var(--mosswood); }
body .pg-layer { border-top-color: rgba(164, 175, 145, 0.55); }
body .pg-layer-list { border-bottom-color: rgba(164, 175, 145, 0.55); }
body .retreat-practical > div { border-top-color: rgba(164, 175, 145, 0.6); }
body .fr-acc-item { border-color: rgba(164, 175, 145, 0.55); }

/* ============================================================
   THE LIGHT PALETTE, 18 October 2026
   Claire's call: no brown, no black. Light colours, sage green
   doing most of the work, soft sky and the cream sand alongside
   it. Midnight is the only dark left and it is only there so you
   can read. Every band that used to be dark is sage now.
   ============================================================ */

/* ---- type ---- */
body,
body .pg-text, body .pg-note, body p, body li,
body .hm-eyebrow, body .hm-head, body .layers-label { color: var(--midnight); }
body .pg-head,
body .fr-headline,
body .programme-headline,
body .cv-head-title,
body .lab-map-title,
body .pg-layer-name,
body .pg-stat,
body .cv-duo-name,
body .retreat-detail-headline { color: var(--midnight); }
body .pg-mark b { color: var(--midnight); opacity: 0.55; }
body .cv-head--ink,
body .cv-head--ink .cv-head-title,
body .cv-head--ink .cv-head-label { color: var(--midnight); }
body.has-sky-head #main-nav:not(.scrolled) .nav-links a,
body.has-sky-head #main-nav:not(.scrolled) .nav-logo { color: var(--midnight); }
body.has-sky-head #main-nav:not(.scrolled) .nav-logo .logo-img { background-color: var(--midnight); }
body.has-sky-head #main-nav:not(.scrolled) .btn-nav {
  border-color: rgba(37, 44, 73, 0.45);
  color: var(--midnight);
}
body.has-sky-head #main-nav:not(.scrolled) .nav-toggle span { background: var(--midnight); }

/* ---- the bands that used to be dark are sage ---- */
body .pg-dark { background: var(--sage); --rule: rgba(37, 44, 73, 0.24); }
body .pg-dark .pg-mark,
body .pg-dark .pg-head,
body .pg-dark .pg-text,
body .pg-dark .pg-note,
body .pg-dark .pg-stat,
body .pg-dark .pg-layer-name,
body .pg-dark .pg-head em,
body .pg-dark em { color: var(--midnight); }
body .pg-dark .pg-mark b { color: var(--midnight); opacity: 0.55; }
body .pg-dark .btn-outline-dark { border-color: rgba(37, 44, 73, 0.45); color: var(--midnight); }
body .pg-dark .btn-outline-dark:hover { background: var(--midnight); color: var(--almond-cream); }

body .lab-top { background: var(--sky); }
body .lab-top .lab-title,
body .lab-top .lab-title em { color: var(--midnight); }

body .hm-wall { background: var(--sage); }
body .layer-card .flip-card-back { background: var(--butter); color: var(--midnight); }
body .layer-card-back-name, body .layer-card-back-text { color: var(--midnight); }
body .lab-what { background: var(--sage); }
body .lab-what, body .lab-what * { color: var(--midnight); }
body .gallery-item, body .gallery-film, body .rt-loop, body .hm-win-media { background: var(--sage-soft); }

body footer { background: var(--sage); color: var(--midnight); }
body footer a, body footer p, body footer li, body footer span, body footer h2, body footer h3 { color: var(--midnight); }
body footer .logo-img { background-color: var(--midnight); }
body nav.nav-dark.scrolled { background: rgba(234, 229, 218, 0.95); border-bottom: 1px solid rgba(37, 44, 73, 0.1); }
body nav.nav-dark.scrolled .nav-links a,
body nav.nav-dark.scrolled .nav-logo { color: var(--midnight); }
body nav.nav-dark.scrolled .nav-logo .logo-img { background-color: var(--midnight); filter: none; }
body nav.nav-dark.scrolled .btn-nav { border-color: rgba(37, 44, 73, 0.45); color: var(--midnight); }
body nav.nav-dark.scrolled .nav-toggle span { background: var(--midnight); }
body nav.nav-dark .nav-links .btn-nav:hover { background: var(--midnight); color: var(--almond-cream); border-color: var(--midnight); }

/* ---- the scrims over photographs are midnight, never black ---- */
body .retreat-detail-overlay-tint {
  background: linear-gradient(180deg, rgba(37, 44, 73, 0.58) 0%, rgba(37, 44, 73, 0.74) 100%);
}
body .lab-bleed-tint {
  background: linear-gradient(180deg, rgba(37, 44, 73, 0.46) 0%, rgba(37, 44, 73, 0.42) 30%, rgba(37, 44, 73, 0.74) 62%, rgba(37, 44, 73, 0.88) 100%);
}
body .hero-video-overlay, body .page-hero-video .hero-video-overlay {
  background: linear-gradient(180deg, rgba(37, 44, 73, 0.34) 0%, rgba(37, 44, 73, 0.52) 60%, rgba(37, 44, 73, 0.72) 100%);
}
body .hm-wall-veil {
  background: radial-gradient(60% 55% at 50% 50%, rgba(37, 44, 73, 0.12) 0%, rgba(37, 44, 73, 0.52) 100%);
}
body .cv-duo-tint {
  background: linear-gradient(180deg, rgba(37, 44, 73, 0) 35%, rgba(37, 44, 73, 0.72) 100%);
}
body .layer-card-tint {
  background: linear-gradient(180deg, rgba(37, 44, 73, 0.1) 0%, rgba(37, 44, 73, 0.62) 100%);
}
body .pricing-action-block--soft { background: #49527A; }
body .pricing-action-block--soft:hover { background: #576089; }

/* the marquee takes the butter, so three bands never run the same colour */
body .pg-marquee { background: var(--butter); border-top: 1px solid rgba(37, 44, 73, 0.1); border-bottom: 1px solid rgba(37, 44, 73, 0.1); }
body .pg-marquee a, body .pg-marquee em, body .pg-marquee span { color: var(--midnight); }
body .pg-marquee a:hover { color: var(--wild-fig); }

/* ============================================================
   LINE LENGTH
   The columns were set at 34 to 46 characters, which chops a
   sentence into three stubs. Everything you read runs to 66 to
   72 now, so a line finishes its thought before it wraps.
   ============================================================ */
body .pg-text,
body .pg-note,
body .pg-lede,
body .lab-rows-lede,
body .fr-sub,
body .fr-acc-text,
body .programme-sub,
body .retreat-detail-body,
body .retreat-detail-body p,
body .fr-foryou,
body .fr-list,
body .france-gallery-head p { max-width: 68ch; }
body .pg-layer-text { max-width: 72ch; }
body .cv-duo-text { max-width: 52ch; }
body .hm-sub { max-width: 54ch; }
body .lab-row-note { max-width: 62ch; }
body .fr-section-head { max-width: 70ch; }
body .page-hero-body p { max-width: 54ch; }

/* two columns side by side leave no room to run on, so the
   sections that are really one argument get the full measure */
@media (min-width: 900px) {
  body .pg-two { grid-template-columns: 1fr 1fr; column-gap: clamp(2rem, 5vw, 5rem); }
  body .pg-break { column-gap: clamp(2rem, 5vw, 4.5rem); }
}

/* the display lines were pinned tight enough to break mid-phrase */
body .cv-head-title { max-width: 26ch; }
body .pg-stat { max-width: 24ch; }
body .pg-head { max-width: 30ch; }

/* ------------------------------------------------------------------
   TEXT THAT SITS ON A PHOTOGRAPH STAYS CREAM
   The midnight rule above is for text on paper. Anything lying over
   an image or a film needs the light colour back, or it disappears.
   ------------------------------------------------------------------ */
body .page-hero-video,
body .page-hero-video p,
body .page-hero-video .page-hero-label,
body .page-hero-video .page-hero-headline,
body .page-hero-video .page-hero-body p,
body .page-hero-video .page-hero-sub,
body .page-hero-photo,
body .page-hero-photo p,
body .retreat-detail-overlay-inner,
body .retreat-detail-overlay-inner p,
body .retreat-detail-overlay .pg-mark,
body .retreat-detail-overlay .retreat-detail-headline,
body .retreat-detail-overlay .retreat-detail-body,
body .retreat-detail-overlay .retreat-detail-body p,
body .lab-bleed-inner,
body .lab-bleed-inner p,
body .lab-bleed-inner span,
body .lab-rows--light .lab-row-name,
body .lab-rows--light .lab-row-note,
body .lab-rows--light .lab-row-when,
body .lab-rows--light .lab-row-go,
body .lab-rows-lede,
body .cv-duo-body,
body .cv-duo-body p,
body .cv-duo-name,
body .cv-duo-meta,
body .cv-duo-text,
body .lab-slide-body,
body .lab-slide-when,
body .lab-slide-name,
body .layer-card-front-content,
body .layer-card-num,
body .layer-card-name,
body .layer-card-hint,
body .events-next-merged,
body .events-next-merged p,
body .events-next-headline,
body .label-tag,
body .rt-film-caption,
body .gallery-film-mark,
body .hm-wall-centre,
body .hm-wall-centre p { color: var(--almond-cream); }
body .retreat-detail-overlay .retreat-detail-headline em,
body .lab-rows--light .lab-row-name em,
body .lab-slide-name em,
body .page-hero-video em,
body .page-hero-photo em,
body .events-next-merged em,
body .cv-duo-name em { color: var(--sky); }
body .retreat-detail-overlay .pg-mark b { color: var(--almond-cream); opacity: 0.7; }
body .btn-outline-light, body .btn-outline-cream {
  color: var(--almond-cream);
  border-color: rgba(234, 229, 218, 0.45);
}
body .btn-outline-light:hover, body .btn-outline-cream:hover {
  background: var(--almond-cream);
  color: var(--midnight);
}

/* ============================================================
   THE HERO TILES ARE LINKS
   Every photograph in the wall belongs to one of the weeks away,
   so every frame takes you there.
   ============================================================ */
a.hm-tile { display: block; text-decoration: none; color: inherit; }
.hm-tile-tag {
  position: absolute;
  left: 0.6rem;
  bottom: 0.5rem;
  z-index: 3;
  font-family: var(--font-body);
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--almond-cream);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.7);
  pointer-events: none;
}
.hm-tile.is-lead .hm-tile-tag,
a.hm-tile:focus-visible .hm-tile-tag { opacity: 0.95; transform: translateY(0); }
a.hm-tile:focus-visible { outline: 2px solid var(--sky); outline-offset: 2px; }
@media (hover: none) {
  /* on a phone nothing hovers, so only the big frames carry their name */
  .hm-tile--w .hm-tile-tag,
  .hm-tile--h .hm-tile-tag,
  .hm-tile--b .hm-tile-tag { opacity: 0.8; transform: none; }
}

/* ============================================================
   LINE LENGTH
   The columns were set at 34 to 46 characters, which chops a
   sentence into three stubs. Everything you read runs to 66 to
   72 now, so a line finishes its thought before it wraps.
   ============================================================ */
body .pg-text,
body .pg-note,
body .pg-lede,
body .lab-rows-lede,
body .fr-sub,
body .fr-acc-text,
body .programme-sub,
body .retreat-detail-body,
body .retreat-detail-body p,
body .fr-foryou,
body .fr-list,
body .france-gallery-head p { max-width: 68ch; }
body .pg-layer-text { max-width: 72ch; }
body .cv-duo-text { max-width: 52ch; }
body .hm-sub { max-width: 54ch; }
body .lab-row-note { max-width: 62ch; }
body .fr-section-head { max-width: 70ch; }
body .page-hero-body p { max-width: 54ch; }

/* two columns side by side leave no room to run on, so the
   sections that are really one argument get the full measure */
@media (min-width: 900px) {
  body .pg-two { grid-template-columns: 1fr 1fr; column-gap: clamp(2rem, 5vw, 5rem); }
  body .pg-break { column-gap: clamp(2rem, 5vw, 4.5rem); }
}

/* the display lines were pinned tight enough to break mid-phrase */
body .cv-head-title { max-width: 26ch; }
body .pg-stat { max-width: 24ch; }
body .pg-head { max-width: 30ch; }

/* ------------------------------------------------------------------
   TEXT THAT SITS ON A PHOTOGRAPH STAYS CREAM
   The midnight rule above is for text on paper. Anything lying over
   an image or a film needs the light colour back, or it disappears.
   ------------------------------------------------------------------ */
body .page-hero-video,
body .page-hero-video p,
body .page-hero-video .page-hero-label,
body .page-hero-video .page-hero-headline,
body .page-hero-video .page-hero-body p,
body .page-hero-video .page-hero-sub,
body .page-hero-photo,
body .page-hero-photo p,
body .retreat-detail-overlay-inner,
body .retreat-detail-overlay-inner p,
body .retreat-detail-overlay .pg-mark,
body .retreat-detail-overlay .retreat-detail-headline,
body .retreat-detail-overlay .retreat-detail-body,
body .retreat-detail-overlay .retreat-detail-body p,
body .lab-bleed-inner,
body .lab-bleed-inner p,
body .lab-bleed-inner span,
body .lab-rows--light .lab-row-name,
body .lab-rows--light .lab-row-note,
body .lab-rows--light .lab-row-when,
body .lab-rows--light .lab-row-go,
body .lab-rows-lede,
body .cv-duo-body,
body .cv-duo-body p,
body .cv-duo-name,
body .cv-duo-meta,
body .cv-duo-text,
body .lab-slide-body,
body .lab-slide-when,
body .lab-slide-name,
body .layer-card-front-content,
body .layer-card-num,
body .layer-card-name,
body .layer-card-hint,
body .events-next-merged,
body .events-next-merged p,
body .events-next-headline,
body .label-tag,
body .rt-film-caption,
body .gallery-film-mark,
body .hm-wall-centre,
body .hm-wall-centre p { color: var(--almond-cream); }
body .retreat-detail-overlay .retreat-detail-headline em,
body .lab-rows--light .lab-row-name em,
body .lab-slide-name em,
body .page-hero-video em,
body .page-hero-photo em,
body .events-next-merged em,
body .cv-duo-name em { color: var(--sky); }
body .retreat-detail-overlay .pg-mark b { color: var(--almond-cream); opacity: 0.7; }
body .btn-outline-light, body .btn-outline-cream {
  color: var(--almond-cream);
  border-color: rgba(234, 229, 218, 0.45);
}
body .btn-outline-light:hover, body .btn-outline-cream:hover {
  background: var(--almond-cream);
  color: var(--midnight);
}

/* ============================================================
   THE HERO TILES ARE LINKS
   Every photograph in the wall belongs to one of the weeks away,
   so every frame takes you there.
   ============================================================ */
a.hm-tile { display: block; text-decoration: none; color: inherit; }
.hm-tile-tag {
  position: absolute;
  left: 0.6rem;
  bottom: 0.5rem;
  z-index: 3;
  font-family: var(--font-body);
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--almond-cream);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.7);
  pointer-events: none;
}
.hm-tile.is-lead .hm-tile-tag,
a.hm-tile:focus-visible .hm-tile-tag { opacity: 0.95; transform: translateY(0); }
a.hm-tile:focus-visible { outline: 2px solid var(--sky); outline-offset: 2px; }
@media (hover: none) {
  /* on a phone nothing hovers, so only the big frames carry their name */
  .hm-tile--w .hm-tile-tag,
  .hm-tile--h .hm-tile-tag,
  .hm-tile--b .hm-tile-tag { opacity: 0.8; transform: none; }
}

/* ============================================================
   THE SCENE
   One scroll instead of two more sections. The frame opens, the
   photograph changes once, and the words change with it. Nothing
   jumps: every step is tied to how far you have scrolled.
   ============================================================ */
.sc { position: relative; height: 300vh; }
.sc-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  min-height: 560px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
  padding: 0 var(--sp-md);
  overflow: hidden;
}
.sc-frame {
  position: relative;
  justify-self: end;
  /* --p is the scroll. The entrance is the first third of it, so the
     frame opens from almost nothing and is full size well before the
     words change. */
  width: calc(5% + 95% * clamp(0, var(--p, 0) * 3.1, 1));
  height: calc(4% + 82% * clamp(0, var(--p, 0) * 3.1, 1));
  opacity: clamp(0, var(--p, 0) * 14, 1);
  overflow: hidden;
  background: var(--sage-soft);
  box-shadow: 0 30px 80px -40px rgba(37, 44, 73, calc(0.25 + 0.3 * var(--p, 0)));
  transition: box-shadow 0.4s var(--ease);
}
.sc-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* the picture drifts the other way, so the frame feels like a window */
  transform: scale(calc(1.16 - 0.14 * var(--p, 0)));
  will-change: transform;
}
.sc-img--a { opacity: calc(1 - clamp(0, (var(--p, 0) - 0.42) * 6, 1)); }
.sc-img--b { opacity: clamp(0, (var(--p, 0) - 0.42) * 6, 1); }
.sc-copy {
  position: relative;
  max-width: 34rem;
  /* the words grow with the frame, at the same pace and off the same
     scroll value, so the two move as one thing */
  transform: scale(calc(0.05 + 0.95 * clamp(0, var(--p, 0) * 3.1, 1)));
  opacity: clamp(0, var(--p, 0) * 14, 1);
  transform-origin: left center;
  will-change: transform;
}
.sc-beat {
  grid-area: 1 / 1;
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
.sc-copy { display: grid; }
.sc-beat--a {
  opacity: calc(1 - clamp(0, (var(--p, 0) - 0.42) * 7, 1));
  transform: translateY(calc(var(--p, 0) * -28px));
}
.sc-beat--b {
  opacity: clamp(0, (var(--p, 0) - 0.5) * 7, 1);
  transform: translateY(calc(26px - clamp(0, (var(--p, 0) - 0.5) * 7, 1) * 26px));
}
.sc-beat--a { pointer-events: auto; }
.sc-beat--b { pointer-events: none; }
.sc.is-late .sc-beat--a { pointer-events: none; }
.sc.is-late .sc-beat--b { pointer-events: auto; }
.sc-mark {
  font-family: var(--font-display);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--midnight);
  opacity: 0.55;
  margin: 0 0 1.1rem;
}
.sc-mark b { font-weight: 500; margin-right: 0.6rem; }
.sc-head {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.75rem, 3.2vw, 2.9rem);
  line-height: 1.06;
  letter-spacing: -0.015em;
  color: var(--midnight);
  margin: 0;
  max-width: 20ch;
}
.sc-text {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--midnight);
  margin: 1rem 0 1.75rem;
  max-width: 46ch;
}
.sc-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.sc-dots {
  position: absolute;
  left: 50%;
  bottom: 2.2rem;
  transform: translateX(-50%);
  display: flex;
  gap: 0.45rem;
}
.sc-dots i {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--midnight);
  opacity: 0.2;
  transition: opacity 0.4s var(--ease);
}
.sc-dots i:first-child { opacity: calc(0.85 - clamp(0, (var(--p, 0) - 0.42) * 7, 1) * 0.65); }
.sc-dots i:last-child { opacity: calc(0.2 + clamp(0, (var(--p, 0) - 0.42) * 7, 1) * 0.65); }

@media (max-width: 900px) {
  /* no pinning on a phone: the two beats simply sit under each other */
  .sc { height: auto; }
  .sc-stage {
    position: static;
    height: auto;
    min-height: 0;
    grid-template-columns: 1fr;
    padding: var(--sp-lg) var(--sp-md);
    gap: var(--sp-md);
  }
  .sc-frame { width: 100%; height: auto; aspect-ratio: 4 / 3; justify-self: stretch; order: -1; opacity: 1; }
  .sc-img { transform: none; }
  .sc-img--a, .sc-img--b { opacity: 1; }
  .sc-img--b { display: none; }
  .sc-copy { display: block; max-width: none; transform: none; opacity: 1; }
  .sc-beat { opacity: 1 !important; transform: none !important; pointer-events: auto !important; }
  .sc-beat--b { margin-top: var(--sp-md); }
  .sc-beat--b::before {
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    background: rgba(37, 44, 73, 0.14);
    margin-bottom: var(--sp-md);
  }
  .sc-dots { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sc { height: auto; }
  .sc-stage { position: static; height: auto; min-height: 0; padding: var(--sp-lg) var(--sp-md); }
  .sc-frame { width: 100%; height: auto; aspect-ratio: 4 / 3; opacity: 1; }
  .sc-img { transform: none; }
  .sc-img--b { display: none; }
  .sc-copy { transform: none; opacity: 1; }
  .sc-beat { opacity: 1 !important; transform: none !important; pointer-events: auto !important; }
  .sc-dots { display: none; }
}


/* ============================================================
   THE MAP IN THE HOUSE COLOURS
   Soft Sky for the water, Sage Leaf for the land, midnight for
   the line and the pins. It reads as a map without borrowing a
   single colour from outside the palette.
   ============================================================ */
body .lab-map-section { background: var(--paper); }
body .lab-map {
  background: var(--sky);
  padding: clamp(1rem, 3vw, 2.25rem);
}
body .lab-map svg {
  /* the water is a panel now, so the land fades into it at the edges
     instead of being chopped off square. It also takes the loose
     coastlines in the top corner out of the picture. */
  -webkit-mask-image: radial-gradient(96% 84% at 42% 66%, #000 42%, rgba(0,0,0,0.75) 66%, transparent 88%);
  mask-image: radial-gradient(96% 84% at 42% 66%, #000 42%, rgba(0,0,0,0.75) 66%, transparent 88%);
}
body .lab-land { fill: var(--sage); opacity: 0.85; }
body .lab-land--main { fill: var(--sage); opacity: 0.6; }
body .lab-coast { stroke: var(--midnight); opacity: 0.3; stroke-width: 1.1; }
body .lab-route { stroke: var(--midnight); opacity: 0.45; }
body .lab-map-title { color: var(--midnight); }
body .lab-map-title em { color: var(--wild-fig); }
body .lab-pin-hit { color: var(--midnight); }
body .lab-pin-dot { background: var(--paper); border-color: var(--midnight); }
body .lab-pin-hit:hover .lab-pin-dot,
body .lab-pin-hit:focus-visible .lab-pin-dot { background: var(--midnight); border-color: var(--midnight); }
body .lab-pin-label { color: var(--midnight); opacity: 0.75; }
body .lab-pin-card {
  background: var(--paper);
  border-color: rgba(37, 44, 73, 0.25);
  box-shadow: 0 18px 40px -24px rgba(37, 44, 73, 0.5);
}
body .lab-pin-card-name, body .lab-pin-card-when { color: var(--midnight); }
body .lab-pin-card-go { color: var(--wild-fig); }
body .lab-map-photo { background: var(--sage-soft); }

/* the two column blocks: give the words the wider half, so a line
   still finishes its thought next to a photograph */
@media (min-width: 900px) {
  body .pg-break { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.9fr); align-items: center; }
  body .pg-two { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
  body .pg-grid { grid-template-columns: 7rem minmax(0, 1fr); }
}


/* ============================================================
   SAGE CARRIES THE CHROME, 19 October 2026
   Koen: headers, the footer, the bar that appears on scroll and
   any band used as fill are sage. The wordmark goes white on them,
   so those bands are the deep sage: white on the pale one cannot
   be read. Soft Sky stays, as the italic on those bands.
   ============================================================ */
body .cv-head--ink,
body .lab-top {
  background: var(--sage-deep);
  color: #FFFFFF;
}
body .cv-head--ink .cv-head-title,
body .cv-head--ink .cv-head-label,
body .lab-top .lab-title { color: #FFFFFF; }
body .cv-head--ink .cv-head-label { opacity: 0.72; }
body .cv-head--ink .cv-head-title em,
body .lab-top .lab-title em { color: var(--sky); }

/* the bar on top: transparent over a photograph, sage once you scroll */
body nav.nav-dark.scrolled,
body.has-sky-head #main-nav:not(.scrolled) {
  background: var(--sage-deep);
  border-bottom: none;
}
body nav.nav-dark.scrolled .nav-links a,
body nav.nav-dark.scrolled .nav-logo,
body.has-sky-head #main-nav:not(.scrolled) .nav-links a,
body.has-sky-head #main-nav:not(.scrolled) .nav-logo { color: #FFFFFF; }
body nav.nav-dark.scrolled .nav-logo .logo-img,
body.has-sky-head #main-nav:not(.scrolled) .nav-logo .logo-img {
  background-color: #FFFFFF;
  filter: none;
}
body nav.nav-dark.scrolled .btn-nav,
body.has-sky-head #main-nav:not(.scrolled) .btn-nav {
  border-color: rgba(255, 255, 255, 0.5);
  color: #FFFFFF;
}
body nav.nav-dark.scrolled .btn-nav:hover,
body.has-sky-head #main-nav:not(.scrolled) .btn-nav:hover {
  background: #FFFFFF;
  color: var(--sage-deep);
}
body nav.nav-dark.scrolled .nav-toggle span,
body.has-sky-head #main-nav:not(.scrolled) .nav-toggle span { background: #FFFFFF; }

/* the footer: light letters, white wordmark */
body footer { background: var(--sage-deep); color: #FFFFFF; }
body footer a,
body footer p,
body footer li,
body footer span,
body footer h2,
body footer h3,
body footer .footer-tagline,
body footer .footer-col-title { color: #FFFFFF; }
body footer .footer-tagline { opacity: 0.8; }
body footer .footer-col-title { opacity: 0.62; }
body footer a { opacity: 0.86; transition: opacity 0.3s var(--ease); }
body footer a:hover { opacity: 1; }
body footer .logo-img { background-color: #FFFFFF; }
body footer .footer-bottom,
body footer .footer-bottom * { color: #FFFFFF; opacity: 0.6; }
body footer hr,
body footer .footer-rule { border-color: rgba(255, 255, 255, 0.22); background: rgba(255, 255, 255, 0.22); }

/* a fill band between sections is the pale sage */
body .pg-marquee {
  background: var(--sage);
  border-top: none;
  border-bottom: none;
}
body .pg-marquee a, body .pg-marquee em, body .pg-marquee span { color: var(--midnight); }

/* ---- the map sits on the page again, no panel of its own ---- */
body .lab-map { background: transparent; padding: 0; }
body .lab-land { fill: var(--sage); opacity: 0.9; }
body .lab-land--main { fill: var(--sage); opacity: 0.55; }
body .lab-coast { stroke: var(--midnight); opacity: 0.22; }
body .lab-map-sub { max-width: 68ch; opacity: 0.85; }


/* the wall reads bright now: every frame is lit, the one under the
   cursor just comes a little further forward */
body .hm-tile img { filter: saturate(0.98) brightness(0.92); }
body .hm-tile.is-near img { filter: saturate(1) brightness(1); }
body .hm-tile.is-lead img { filter: saturate(1.04) brightness(1.06); }
body .hm-wall-veil {
  background:
    radial-gradient(44% 48% at 50% 48%, rgba(37, 44, 73, 0.6) 0%, rgba(37, 44, 73, 0.42) 48%, rgba(37, 44, 73, 0) 100%),
    linear-gradient(180deg, rgba(37, 44, 73, 0.5) 0%, rgba(37, 44, 73, 0) 24%, rgba(37, 44, 73, 0) 74%, rgba(37, 44, 73, 0.55) 100%);
}

/* the land fill already draws the coast, and the stroke carried
   Britain and Ireland along with it */
body .lab-coast { display: none; }

/* a page that opens straight into a block needs to clear the bar */
body .pg > .of:first-child,
body .pg > .of-stat:first-child { padding-top: calc(var(--nav-h) + var(--sp-lg)); }
/* on the sage band the olive italic sinks away, so it reads midnight */
body .of-stat .of-stat-line em,
body .pg-dark .of-title em { color: var(--midnight); }

/* ============================================================
   THE OFFSET BLOCKS
   The picture runs off one edge and the words sit beside it, so
   you never have to guess which text belongs to which photograph.
   The next block leans the other way.
   ============================================================ */
.of {
  display: grid;
  align-items: center;
  gap: clamp(1.75rem, 4vw, 4rem);
  padding: var(--sp-xl) 0;
}
.of--left  { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
.of--right { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
.of--left  .of-media { grid-column: 1; grid-row: 1; }
.of--left  .of-copy  { grid-column: 2; grid-row: 1; padding-right: var(--gutter-out); }
.of--right .of-media { grid-column: 2; grid-row: 1; }
.of--right .of-copy  { grid-column: 1; grid-row: 1; padding-left: var(--gutter-out); }
.of-copy { --gutter-out: max(var(--sp-md), calc((100vw - var(--max-w)) / 2 + var(--sp-md))); }

.of-media {
  margin: 0;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--sage-soft);
}
.of-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.of-media--tall { aspect-ratio: 4 / 5; }

.of-mark {
  font-family: var(--font-display);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  color: var(--midnight);
  opacity: 0.5;
  margin: 0 0 1rem;
}
.of-mark span { opacity: 0.5; margin-left: 0.15rem; }
.of-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.6rem, 2.9vw, 2.6rem);
  line-height: 1.07;
  letter-spacing: -0.035em;
  color: var(--midnight);
  margin: 0 0 1.1rem;
  max-width: 18ch;
}
.of-text {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--midnight);
  margin: 0 0 1.25rem;
  max-width: 44ch;
}
.of-side--long .of-text { margin-bottom: 1rem; }
.of-sign { font-size: 1rem; color: var(--midnight); opacity: 0.8; margin: 0 0 1.4rem; }
.of-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.4rem; }

/* the blocks without a picture keep the three column head */
/* the cards need room under them, or they butt straight into the
   green band that follows */
.of--plain { display: block; padding: var(--sp-xl) 0; }
.of--plain .of-head {
  max-width: var(--max-w);
  margin: 0 auto var(--sp-md);
  padding: 0 var(--sp-md);
  display: grid;
  grid-template-columns: 7rem minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: var(--sp-md);
  align-items: start;
}
.of--plain .of-mark { margin-top: 0.45rem; }
.of--plain .of-title { max-width: 22ch; }

/* the one big line on About, on its sage band */
.of-stat { padding: var(--sp-xl) 0; }
.of-head--stat {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--sp-md);
  display: grid;
  grid-template-columns: 7rem minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: var(--sp-md);
  align-items: start;
}
.of-stat-line {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.6rem, 2.9vw, 2.5rem);
  line-height: 1.1;
  letter-spacing: -0.035em;
  color: var(--midnight);
  margin: 0;
  max-width: 20ch;
}
.of-stat .of-mark { margin-top: 0.45rem; }
.of-stat .of-text:last-child { margin-bottom: 0; }

@media (max-width: 900px) {
  .of, .of--left, .of--right { grid-template-columns: 1fr; padding: var(--sp-lg) 0; gap: var(--sp-sm, 1.25rem); }
  .of--left .of-media, .of--right .of-media { grid-column: 1; grid-row: 1; aspect-ratio: 4 / 3; }
  .of--left .of-copy, .of--right .of-copy {
    grid-column: 1;
    grid-row: 2;
    padding: 0 var(--sp-md);
  }
  .of-title { max-width: none; }
  .of--plain { padding: var(--sp-lg) 0; }
  .of--plain .of-head, .of-head--stat { grid-template-columns: 1fr; gap: 0.75rem; }
  .of--plain .of-mark, .of-stat .of-mark { margin-top: 0; }
}

/* ============================================================
   THE DAY, AS A TIMELINE
   One line across the page, a small drawing at every moment.
   It scrolls sideways, so the day reads the way you walk through it.
   ============================================================ */
.tl {
  list-style: none;
  margin: 0;
  padding: 0 0 1.25rem;
  display: flex;
  gap: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(37, 44, 73, 0.25) transparent;
}
.tl::before { content: none; }
.tl::-webkit-scrollbar { height: 3px; }
.tl::-webkit-scrollbar-track { background: rgba(37, 44, 73, 0.08); }
.tl::-webkit-scrollbar-thumb { background: rgba(37, 44, 73, 0.28); border-radius: 2px; }
.tl-step {
  position: relative;
  flex: 0 0 clamp(188px, 17.5vw, 218px);
  display: block;
  padding: 0 1.35rem 0 0;
  scroll-snap-align: start;
}
/* the rail runs from one circle to the next */
.tl-step::before {
  content: "";
  position: absolute;
  left: 15px;
  right: 0;
  top: 8px;
  height: 1px;
  background: rgba(37, 44, 73, 0.18);
}
.tl-step:last-child { padding-right: 0; }
.tl-step:last-child::before { content: none; }
.tl-step::after {
  content: "";
  position: absolute;
  left: 0;
  top: 5px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--midnight);
  opacity: 0.45;
}
.tl-body { display: block; padding-top: 1.5rem; }
.tl-time {
  display: block;
  font-family: var(--font-display);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--midnight);
  opacity: 0.5;
  margin-bottom: 0.3rem;
}
.tl-title {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.125rem;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--midnight);
}
.tl-note {
  display: block;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--midnight);
  opacity: 0.75;
  margin-top: 0.35rem;
  max-width: none;
}
/* the rail is the line now, so the old border above it goes */
.retreat-programme-grid--day .programme-schedule { border-top: 0; padding-top: 0.5rem; }

/* the day runs sideways, so it gets the full width: intro above, rail below */
.retreat-programme-grid--day { grid-template-columns: 1fr; gap: var(--sp-md); }
.retreat-programme-grid--day .programme-sub { max-width: 68ch; }

/* a sideways rail must not stretch its grid column, or the page scrolls with it */
.programme-schedule { min-width: 0; }
.tl { width: 100%; max-width: 100%; min-width: 0; }


/* the hero of a retreat fills the screen, so the next section waits */
body .page-hero-video { min-height: 100vh; height: 100vh; height: 100dvh; }
@media (max-width: 900px) {
  .tl-step { flex-basis: 240px; padding-right: 1.1rem; }
}
@media (max-width: 420px) {
  .tl-step { flex-basis: 76vw; }
}

/* the invitation is a colour band now, not a photograph, so a picture
   never follows a picture straight down the page */
body .retreat-detail-band {
  background: var(--butter);
  padding: var(--sp-xl) 0;
}
body .retreat-detail-band .retreat-detail-headline,
body .retreat-detail-band .retreat-detail-body,
body .retreat-detail-band .retreat-detail-body p,
body .retreat-detail-band .pg-mark { color: var(--midnight); }
body .retreat-detail-band .retreat-detail-headline em { color: var(--wild-fig); }
body .retreat-detail-band .pg-mark b { color: var(--midnight); opacity: 0.55; }
body .retreat-detail-band .pg-rule { background: rgba(37, 44, 73, 0.25); }
/* the band and the butter section further down must not touch */
body .retreat-detail-band + .fr-section--alt,
body .fr-section--alt + .retreat-detail-band { border-top: 1px solid rgba(37, 44, 73, 0.1); }

/* 21 Oct: no rule above the three pillars on the retreat pages */
body .fr-pillar { border-top: 0; padding-top: 0; }

/* ============================================================
   TENOR SANS, 21 oktober 2026
   Koen koos een gebeitelde humanist in plaats van de brede Syne.
   Het font heeft één gewicht, dus de face hierboven dekt 100 tot 900
   en de browser tekent nergens een nepvet. De strakke letterafstand
   van Syne kan eraf: die knijpt een humanist dicht.
   ============================================================ */
/* geen nepvet, maar de schuine staart in de koppen moet blijven: Tenor Sans
   heeft geen cursief, dus die laten we de browser wel tekenen */
body { font-synthesis: style; }
body h1, body h2, body h3, body h4, body h5, body h6,
body .of-title, body .of-stat-line,
body .page-hero-headline, body .fr-headline, body .retreat-detail-headline,
body .programme-headline, body .events-next-headline, body .about-focus-headline,
body .email-headline, body .pricing-popup-headline, body .event-reveal-title,
body .lab-title, body .lab-map-title, body .lab-what-head, body .lab-end-head,
body .retreat-split-name, body .lab-row-name, body .lab-slide-name,
body .format-panel-name, body .intro-headline, body .section-video-headline {
  letter-spacing: -0.005em;
}
body .nav-logo, body .logo, body .hero-logo { letter-spacing: 0.16em; }

/* ============================================================
   GEEN HAARLIJNEN BOVEN TEKST, 23 oktober 2026
   Koen: "die strepen zijn heel AI". Elke dunne lijn die alleen
   een blok tekst versiert gaat eruit. Lijnen die laten zien dat
   je ergens op kunt klikken blijven staan, net als de grens
   tussen twee vlakken van bijna dezelfde kleur.
   ============================================================ */
body .lab-what-item,
body .fr-host,
body .pg-layer,
body .pg-layer-list,
body .layer-row,
body .layer-row:last-child,
body .about-layer,
body .about-layer:last-child,
body .unfold-list,
body .unfold-item,
body .footer-grid,
body .retreat-practical,
body .retreat-practical > div,
body .pricing-option,
body .pricing-option:last-of-type,
body .events-next-merged--soft,
body .fr-list li {
  border-top: 0;
  border-bottom: 0;
}
/* zonder lijn mag de ruimte eromheen het werk doen */
body .lab-what-item { padding-top: 0; }
body .retreat-practical > div { padding-top: 0.2rem; }
body .pricing-option { padding-top: 0.9rem; padding-bottom: 0.9rem; }

/* ============================================================
   CURSIEF ALLEEN IN DE STAART VAN EEN KOP, 23 oktober 2026
   Koen houdt van het schuinschrift waar het de plaatsnaam of het
   laatste woord van een titel is (Costa Brava, Portugal,
   countryside). Overal waar een hele zin of een naam schuin stond
   gaat het eruit. En Lowera is mooi in kapitalen, dus de namen
   van de onderdelen staan nu zo.
   ============================================================ */
body .page-hero-video .page-hero-sub,
body .page-hero-body .page-hero-sub,
body .page-hero-video .page-hero-sub em,
body .page-hero-body .page-hero-sub em,
body .page-hero-sub,
body .page-hero-sub em,
body .fr-acc-close,
body .fr-acc-close em,
body .fr-host-chef,
body .footer-tagline,
body .lab-what-name {
  font-style: normal;
}
body .lab-what-name,
body .fr-pillar-name {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.875rem;
  font-style: normal;
}