@import url('snake.css');
@import url('fonts.css');
/* Pascale Pieper — shared styles
   Brand: softness · slow down · yin. An invitation to soften.
   Palette (fixed, from Pascale): cream #dbd8cf · taupe #837e73 · ink #404040 — accent red #980C15
   Every background, graphic and text colour is one of the three; red only for accents.
   Type: Optima (display; Belleza as web fallback where Optima is not installed) + Jost light (body) */

:root{
  --cream:#dbd8cf;
  --taupe:#837e73;
  --ink:#404040;
  --red:#980C15;
  --display:Optima, 'Belleza', Candara, 'Segoe UI', sans-serif;
  --sans:'Jost', sans-serif;

  /* per-band tokens, overridden by .band-* */
  --bg:var(--cream);
  --fg:var(--ink);
  --soft:var(--taupe);
  --rule:rgba(64,64,64,.22);
}
.band-cream{ --bg:var(--cream); --fg:var(--ink); --soft:var(--taupe); --rule:rgba(64,64,64,.22); }
.band-taupe{ --bg:var(--taupe); --fg:var(--cream); --soft:var(--cream); --rule:rgba(219,216,207,.35); }
.band-ink{ --bg:var(--ink); --fg:var(--cream); --soft:var(--taupe); --rule:rgba(219,216,207,.22); }
.band-cream, .band-taupe, .band-ink{ background:var(--bg); color:var(--fg); }

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--cream);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:300;
  font-size:1.02rem;
  line-height:1.8;
  overflow-x:hidden;
}
body.nav-open{ overflow:hidden; }
a{color:inherit;text-decoration:none;}
img{display:block;max-width:100%;}
::selection{ background:var(--red); color:var(--cream); }

:focus-visible{ outline:1.5px solid var(--red); outline-offset:3px; border-radius:2px; }

.skip-link{
  position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%);
  background:var(--ink); color:var(--cream);
  padding:.6rem 1.2rem; font-size:.75rem; letter-spacing:.15em; text-transform:uppercase;
}
.skip-link:focus{
  position:fixed; top:1rem; left:1rem; z-index:300;
  width:auto; height:auto; clip-path:none;
}

.eyebrow{
  font-family:var(--sans);
  font-size:.72rem;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--red);
}
.band-taupe .eyebrow, .band-ink .eyebrow{ color:var(--cream); }

section{ position:relative; overflow:hidden; padding:clamp(4.5rem,11vw,9rem) clamp(1.5rem,6vw,5rem); scroll-margin-top:2rem; }

h1, h2, h3{ font-family:var(--display); font-weight:400; color:var(--fg); }
em, .it{ font-family:var(--display); font-style:normal; }

.section-head{ text-align:center; margin-bottom:clamp(2.5rem,6vw,4.5rem); }
.section-head .eyebrow{ display:block; margin-bottom:1.1rem; }
.section-head h2{ font-size:clamp(2rem,4vw,3rem); letter-spacing:.06em; text-transform:uppercase; line-height:1.2; }

/* ---------- circle signature ---------- */
.ring{
  position:absolute;
  border:1px solid var(--fg);
  border-radius:50%;
  opacity:.45;
  pointer-events:none;
}
@media (prefers-reduced-motion: no-preference){
  .ring.spin{ animation:spin 90s linear infinite; }
}
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ---------- twinkles & red blinking accents ---------- */
.twinkle{
  position:absolute; font-size:.62rem; line-height:1; color:var(--soft);
  pointer-events:none; user-select:none; z-index:1;
}
.twinkle.light{ color:var(--cream); }
.twinkle.accent{ color:var(--red); }
.twinkle.big{ font-size:.95rem; }
.twinkle.moonlet{ font-size:1rem; }
@media (prefers-reduced-motion: no-preference){
  .twinkle{ animation:pulse 4.2s ease-in-out infinite; }
  .ring.blink{ animation:pulse 6s ease-in-out infinite; }
}
@keyframes pulse{ 0%,100%{opacity:.15;} 50%{opacity:.95;} }
/* red circle that slowly blinks (page heroes, newsletter) */
.ring.blink{ border-color:var(--red); opacity:.8; }

/* ---------- moon phases ---------- */
.phases{
  display:flex; justify-content:center; align-items:center; gap:1.05rem;
  color:var(--fg); margin:0 auto;
}
.phases i{ display:block; width:13px; height:13px; border-radius:50%; border:1px solid currentColor; }
.phases .wax-c{ box-shadow:inset -4px 0 0 0 currentColor; }
.phases .wax-h{ background:linear-gradient(90deg, transparent 50%, currentColor 50%); }
.phases .full{ background:currentColor; }
.phases .wan-h{ background:linear-gradient(90deg, currentColor 50%, transparent 50%); }
.phases .wan-c{ box-shadow:inset 4px 0 0 0 currentColor; }

/* ---------- snake (engraving from Pascale's inspo folder, used as a mask so it can take any brand colour) ---------- */
.snake{
  position:absolute; pointer-events:none; user-select:none;
  aspect-ratio:1034 / 1083;
  background:var(--soft);
  -webkit-mask:var(--snake-mask) center / contain no-repeat;
          mask:var(--snake-mask) center / contain no-repeat;
}
.snake.flip{ transform:scaleX(-1); }

/* ---------- photographs: monochrome, colour arrives on hover ---------- */
.tone{ position:relative; overflow:hidden; display:block; }
.tone img{
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(1) contrast(1.02);
  transition:filter 1.4s ease, transform 2.4s ease;
}
.tone:hover img, .tone.lit img{ filter:grayscale(0); transform:scale(1.025); }
.tone.arch{ border-radius:999px 999px 0 0; }
.tone.oval{ border-radius:50%; }
.tone.soft{ border-radius:3px; }
@media (prefers-reduced-motion: reduce){
  .tone img{ transition:filter .3s ease; }
  .tone:hover img, .tone.lit img{ transform:none; }
}

/* ---------- header / nav ---------- */
header.site-header{
  position:fixed; top:0; left:0; right:0; z-index:200;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.6rem clamp(1.5rem,5vw,4rem);
  transition:padding .5s ease, background .5s ease;
  pointer-events:none;
}
.header-wordmark{
  pointer-events:auto;
  font-family:var(--display); font-size:.86rem; letter-spacing:.34em; text-transform:uppercase;
  color:var(--ink); white-space:nowrap; transition:color .4s ease;
}
.header-wordmark:hover{ color:var(--red); }
header.site-header.scrolled{ padding:1.2rem clamp(1.5rem,5vw,4rem); }

.desktop-nav{
  pointer-events:auto;
  display:flex; align-items:center; gap:clamp(1.4rem,2.4vw,2.4rem);
}
.desktop-nav a{
  font-size:.72rem; letter-spacing:.24em; text-transform:uppercase; color:var(--ink);
  position:relative; padding-bottom:3px; transition:color .4s ease;
}
.desktop-nav a::after{
  content:''; position:absolute; left:0; bottom:0; height:1px; width:0;
  background:var(--red); transition:width .5s ease;
}
.desktop-nav a:hover{ color:var(--red); }
.desktop-nav a:hover::after{ width:100%; }
.desktop-nav a[aria-current="page"]{ color:var(--red); }
.desktop-nav a[aria-current="page"]::after{ width:100%; }
@media (max-width:900px){
  .desktop-nav{ display:none; }
}
@media (min-width:901px){
  header.site-header .menu-toggle{ display:none; }
  header.site-header.scrolled{
    background:rgba(219,216,207,.86); backdrop-filter:blur(8px);
  }
}
.menu-toggle{
  pointer-events:auto;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
  width:52px; height:52px; border-radius:50%;
  background:rgba(219,216,207,.88); backdrop-filter:blur(6px);
  border:1px solid rgba(64,64,64,.25); cursor:pointer; z-index:200;
  transition:background .3s ease;
}
.menu-toggle span{ width:18px; height:1px; background:var(--ink); display:block; transition:transform .3s ease, opacity .3s ease; }
.menu-toggle.open span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.menu-toggle.open span:nth-child(2){ opacity:0; }
.menu-toggle.open span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

nav.primary-nav{
  position:fixed; inset:0; z-index:150;
  background:var(--cream);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2.4rem;
  opacity:0; visibility:hidden; transition:opacity .6s ease, visibility 0s linear .6s;
  pointer-events:auto;
}
nav.primary-nav.open{ opacity:1; visibility:visible; transition:opacity .6s ease; }
nav.primary-nav a{
  font-family:var(--display); font-size:1.5rem;
  position:relative; padding-bottom:4px; color:var(--ink);
  opacity:0; transform:translateY(14px);
  transition:color .3s ease, opacity .6s ease, transform .6s ease;
}
nav.primary-nav.open a{ opacity:1; transform:translateY(0); }
nav.primary-nav.open a:nth-child(1){ transition-delay:.08s; }
nav.primary-nav.open a:nth-child(2){ transition-delay:.16s; }
nav.primary-nav.open a:nth-child(3){ transition-delay:.24s; }
nav.primary-nav.open a:nth-child(4){ transition-delay:.32s; }
nav.primary-nav.open a:nth-child(5){ transition-delay:.4s; }
nav.primary-nav a:hover, nav.primary-nav a[aria-current="page"]{ color:var(--red); }
.nav-cta{
  border:1px solid var(--ink); padding:.7rem 1.6rem; border-radius:40px;
  font-family:var(--sans) !important; font-style:normal !important;
  font-size:.78rem !important; letter-spacing:.2em; text-transform:uppercase;
}
nav.primary-nav a.nav-cta:hover{ background:var(--red); border-color:var(--red); color:var(--cream); }
nav.primary-nav .nav-star{
  position:absolute; bottom:3rem; left:50%; transform:translateX(-50%);
  color:var(--taupe); font-size:.85rem; letter-spacing:.8rem; opacity:0; transition:opacity .6s ease .4s;
}
nav.primary-nav.open .nav-star{ opacity:.8; }

/* ---------- home hero (symmetric: photo behind, centred on the tattoo, red SLOW DOWN in front) ---------- */
.hero{
  position:relative; overflow:hidden;
  min-height:100vh; min-height:100svh;
  display:flex; align-items:center; justify-content:center;
  background:var(--cream);
}
/* the translate values are the tattoo's position inside the photo, so it always sits in the exact middle */
.hero-media{
  position:absolute; top:50%; left:50%;
  width:max(104%, 74vh); width:max(104%, 74svh); max-width:none; height:auto;
  transform:translate(-51.8%,-55.4%);
  filter:grayscale(1) contrast(1.02); opacity:.5;
}
.hero-ring{
  width:clamp(230px,34vw,400px); height:clamp(230px,34vw,400px);
  left:50%; top:50%; transform:translate(-50%,-50%);
  border-color:var(--ink); opacity:.22; z-index:1;
}
.hero-statement{
  position:relative; z-index:2; text-align:center;
  font-family:var(--display); font-weight:400; text-transform:uppercase;
  color:var(--red); font-size:clamp(2.6rem,6.8vw,5rem); line-height:.95; letter-spacing:.12em;
  padding-left:.12em;
}
.hero-statement .word{ display:block; }
.hero-statement .word:first-child{ margin-bottom:1.7em; }
.scroll-cue{
  position:absolute; bottom:2rem; left:50%; transform:translateX(-50%);
  z-index:2;
}
.scroll-cue .line{ display:block; width:1px; height:42px; background:var(--red); }

/* below the hero: dark disc + snake, then the offer list */
.hero-lower{ text-align:center; padding-top:clamp(4rem,9vw,7rem); padding-bottom:clamp(4rem,9vw,7rem); }
.hero-emblem{ position:relative; width:clamp(240px,32vw,420px); aspect-ratio:1; margin:0 auto; }
.hero-disc{ position:absolute; inset:0; border-radius:50%; background:var(--ink); }
.hero-snake{
  width:112%; left:50%; top:50%; transform:translate(-50%,-50%);
  background:var(--taupe);
}
.hero-list{ list-style:none; margin-top:clamp(2.2rem,5vw,3.4rem); position:relative; z-index:2; }
.hero-list li{ font-family:var(--display); font-size:clamp(1.1rem,1.9vw,1.55rem); line-height:1.7; color:var(--ink); }
.hero-list a{ transition:color .4s ease; }
.hero-list a:hover{ color:var(--red); }
.hero-list .heart{ color:var(--red); }
@media (prefers-reduced-motion: no-preference){
  .scroll-cue .line{ animation:pulse 2.6s ease-in-out infinite; }
  .hero-statement .word{ opacity:0; animation:rise 1.6s ease forwards; }
  .hero-statement .word:first-child{ animation-delay:.5s; }
  .hero-statement .word:last-child{ animation-delay:.9s; }
}
@keyframes rise{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:translateY(0); } }
@keyframes fadein{ to{ opacity:1; } }

/* ---------- subpage hero ---------- */
.page-hero{
  position:relative; text-align:center; overflow:hidden;
  padding:clamp(8rem,17vw,11rem) clamp(1.5rem,6vw,5rem) clamp(3.5rem,8vw,6rem);
  background:var(--cream);
}
.page-hero .eyebrow{ display:block; margin-bottom:1.4rem; }
.page-hero h1{
  font-size:clamp(2.2rem,5.2vw,3.9rem);
  line-height:1.15; letter-spacing:.08em; text-transform:uppercase;
}
.page-hero .phases{ margin-top:2rem; }
.page-hero .page-sub{
  margin:2rem auto 0; max-width:56ch;
}
.page-hero .ring{ width:clamp(200px,28vw,320px); height:clamp(200px,28vw,320px); left:50%; top:54%; transform:translate(-50%,-50%); opacity:.16; }
/* the red blinking circle stands on its own above the title, so it never cuts through the text */
.page-hero .ring.blink{
  position:static; display:block; transform:none;
  width:46px; height:46px; margin:0 auto 1.8rem; opacity:.8; border-width:1.5px;
}
@media (prefers-reduced-motion: no-preference){
  .page-hero .eyebrow, .page-hero h1, .page-hero .page-sub, .page-hero .phases{ opacity:0; animation:rise 1.3s ease forwards; }
  .page-hero h1{ animation-delay:.25s; }
  .page-hero .phases{ animation-delay:.5s; }
  .page-hero .page-sub{ animation-delay:.7s; }
}

/* ---------- reveal on scroll (slow, soft) ---------- */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity 1.5s ease, transform 1.5s ease; }
.reveal.in{ opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; }
}

/* ---------- statement band (large soft words) ---------- */
.statement{ text-align:center; overflow:hidden; padding-top:clamp(5rem,11vw,8rem); padding-bottom:clamp(5rem,11vw,8rem); }
.statement .inner{ max-width:900px; margin:0 auto; position:relative; }
.statement .ring{ width:130px; height:130px; left:50%; top:-46px; transform:translateX(-50%); opacity:.55; }
.statement .moon{ display:block; font-size:1.5rem; margin-bottom:3.6rem; color:var(--red); }
.statement p.support{
  font-family:var(--display); font-size:clamp(1.4rem,2.8vw,2rem); line-height:1.55;
  max-width:30em; margin:0 auto; color:var(--fg);
}
.statement p.support.small{ font-size:clamp(1.1rem,1.9vw,1.4rem); line-height:1.7; max-width:36em; }
.statement .phases{ margin-top:2.4rem; }

/* ---------- two-column work grid ---------- */
.work-grid{
  max-width:1180px; margin:0 auto;
  display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(2.5rem,7vw,6rem);
  align-items:center;
}
.work-grid.rev{ grid-template-columns:1.15fr .85fr; }
.work-media{ position:relative; }
.work-media .tone{ aspect-ratio:4/5; }
.work-media .tone.oval{ aspect-ratio:1; }
.work-media .ring{ width:clamp(130px,30vw,210px); height:clamp(130px,30vw,210px); left:-11%; bottom:-9%; transition:border-color .6s ease, opacity .6s ease; }
.work-media:hover .ring{ border-color:var(--red); opacity:.9; }
.work-text{ position:relative; }
.work-text .eyebrow{ margin-bottom:1.1rem; display:block; }
/* eyebrow at the size of the lead paragraph (1:1 page, "The Work") */
.work-text .eyebrow.big{ font-family:var(--display); font-size:clamp(1.2rem,2vw,1.45rem); letter-spacing:.14em; line-height:1.6; margin-bottom:1.4rem; }
.work-text h2{
  font-size:clamp(2rem,3.6vw,2.9rem);
  margin-bottom:1.4rem; letter-spacing:.06em; text-transform:uppercase; line-height:1.2;
}
.work-text h3{ font-size:clamp(1.5rem,2.6vw,1.9rem); margin:1.8rem 0 .8rem; }
.work-text p{ margin-bottom:1.1rem; max-width:54ch; }
.work-text p.lead{ font-family:var(--display); font-size:clamp(1.2rem,2vw,1.45rem); line-height:1.6; }

.btn{
  display:inline-flex; align-items:center; gap:.6rem;
  margin-top:1.5rem;
  border:1px solid var(--fg); padding:.9rem 2rem; border-radius:40px;
  font-size:.74rem; letter-spacing:.22em; text-transform:uppercase;
  background:none; cursor:pointer; font-family:var(--sans); color:var(--fg); font-weight:300;
  transition:background .6s ease, color .6s ease, border-color .6s ease;
}
.btn:hover{ background:var(--red); border-color:var(--red); color:var(--cream); }

/* ---------- info strip ---------- */
.info-strip{
  max-width:1180px; margin:clamp(3.5rem,7vw,6rem) auto 0;
  border-top:1px solid var(--rule);
  display:grid; grid-template-columns:repeat(4,1fr);
}
.info-strip .cell{ padding:1.7rem 1.2rem; border-right:1px solid var(--rule); }
.info-strip .cell:last-child{ border-right:none; }
.info-strip .cell .label{ font-size:.68rem; letter-spacing:.22em; text-transform:uppercase; margin-bottom:.5rem; opacity:.8; }
.info-strip .cell .value{ font-family:var(--display); font-size:1.35rem; }

/* ---------- divider ---------- */
.divider-line{ max-width:220px; margin:0 auto; padding:2.5rem clamp(1.5rem,6vw,5rem); display:flex; justify-content:center; }
.divider-line span{ display:block; width:100%; height:1px; background:var(--red); }
@media (prefers-reduced-motion: no-preference){
  .divider-line span{ animation:pulse 3.6s ease-in-out infinite; }
}

/* ---------- collage gallery (deliberately unordered: nature, body, sky) ---------- */
.collage-band{ overflow:hidden; }
.collage{
  max-width:1120px; margin:0 auto;
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(.9rem,2.2vw,1.8rem);
  align-items:start;
}
.collage .col{ display:flex; flex-direction:column; gap:clamp(.9rem,2.2vw,1.8rem); }
.collage .col:nth-child(2){ margin-top:clamp(2.5rem,8vw,7rem); }
.collage .col:nth-child(3){ margin-top:clamp(1rem,3vw,2.5rem); }
@media (max-width:700px){
  .collage{ grid-template-columns:1fr 1fr; }
  .collage .col:nth-child(3){ grid-column:1 / -1; flex-direction:row; margin-top:0; }
  .collage .col:nth-child(3) > *{ flex:1; min-width:0; }
  .collage .col:nth-child(3) .tone{ aspect-ratio:3/4; }
  .collage .col:nth-child(3) .tone.oval{ align-self:center; }
}

/* small photo strip */
.photo-strip{
  max-width:1120px; margin:0 auto;
  display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(.8rem,2vw,1.6rem); align-items:end;
}
.photo-strip.five{ grid-template-columns:repeat(5,1fr); }
.photo-strip .tone{ aspect-ratio:3/4; }
/* circles sit a little higher than the rectangles */
.photo-strip .tone.oval{ aspect-ratio:1; margin-bottom:clamp(1rem,4vw,3rem); }
@media (max-width:700px){
  .photo-strip, .photo-strip.five{ grid-template-columns:1fr 1fr; }
  .photo-strip.five .tone:first-child{ grid-column:1 / -1; width:56%; margin-left:auto; margin-right:auto; }
}

/* ---------- paired cards (practices / yoga on home) ---------- */
.pair{
  max-width:1180px; margin:0 auto;
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4.5rem);
}
.pair .card{ position:relative; text-align:center; }
.pair .card .tone{ aspect-ratio:4/3; margin-bottom:1.8rem; }
.pair .card .eyebrow{ display:block; margin-bottom:.9rem; }
.pair .card h3{ font-size:clamp(1.6rem,2.8vw,2.1rem); margin-bottom:.9rem; }
.pair .card p{ max-width:44ch; margin:0 auto; }

/* ---------- centred call band ---------- */
.journal-band{ text-align:center; overflow:hidden; }
.journal-inner{ max-width:640px; margin:0 auto; position:relative; z-index:2; }
.journal-inner .eyebrow{ display:block; margin-bottom:1rem; }
.journal-inner h3{ font-size:clamp(2rem,4vw,2.8rem); margin-bottom:1.1rem; }
.journal-inner p{ margin-bottom:1rem; }

/* ---------- about ---------- */
.about-grid{
  max-width:1180px; margin:0 auto;
  display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(2.5rem,7vw,6rem);
  align-items:center;
}
.about-grid.rev{ grid-template-columns:1.2fr .8fr; }
.about-media{ position:relative; }
.about-media .tone{ aspect-ratio:3/4; }
.about-media .ring{ inset:-5% -7%; border-radius:999px 999px 0 0; transition:border-color .6s ease; }
.about-media:hover .ring{ border-color:var(--red); }
.about-text{ position:relative; }
.about-text .eyebrow{ display:block; margin-bottom:1.1rem; }
.about-text h2{ font-size:clamp(1.9rem,3.4vw,2.7rem); margin-bottom:1.3rem; line-height:1.25; letter-spacing:.04em; }
.about-text p{ margin-bottom:1.1rem; max-width:56ch; }

/* ---------- long-form prose (about page, journal posts) ---------- */
.prose{ max-width:660px; margin:0 auto; position:relative; }
.prose p{ margin-bottom:1.6rem; }
.prose p.serif-lead{ font-family:var(--display); font-size:clamp(1.35rem,2.4vw,1.7rem); line-height:1.55; }
.prose h2, .prose h3{ font-size:clamp(1.7rem,3vw,2.2rem); margin:2.6rem 0 1.2rem; line-height:1.25; }
.prose blockquote{
  font-family:var(--display); font-size:clamp(1.25rem,2.2vw,1.55rem); line-height:1.55;
  border-left:1px solid var(--red); padding-left:1.4rem; margin:2rem 0;
}
.prose .sign-off{ font-family:var(--display); }
.symbol-line{
  text-align:center; margin:3rem auto 0; color:var(--fg);
  font-family:var(--display); font-size:1rem; letter-spacing:.12em;
}
.symbol-line .r{ color:var(--red); }

/* ---------- accordion (1:1 page) ---------- */
.faq{ max-width:860px; margin:0 auto; border-top:1px solid var(--rule); }
.faq details{ border-bottom:1px solid var(--rule); }
.faq summary{
  list-style:none; cursor:pointer;
  display:flex; justify-content:space-between; align-items:center; gap:1.5rem;
  padding:clamp(1.5rem,3.4vw,2.3rem) 0;
  font-family:var(--display); font-size:clamp(1.15rem,2.4vw,1.7rem); letter-spacing:.08em; text-transform:uppercase;
  transition:color .5s ease;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:'+'; font-family:var(--sans); font-weight:300; font-size:1.7rem; line-height:1;
  color:var(--red); transition:transform .6s ease;
}
.faq details[open] summary::after{ transform:rotate(45deg); }
.faq summary:hover{ color:var(--red); }
.faq .answer{ padding:0 0 clamp(1.8rem,4vw,2.6rem); max-width:58ch; }
.faq .answer p{ margin-bottom:1rem; }
.faq .answer ul{ list-style:none; }
.faq .answer li{ padding-left:1.4rem; position:relative; margin-bottom:.8rem; }
.faq .answer li::before{ content:'✦'; position:absolute; left:0; top:.55em; font-size:.5rem; color:var(--red); }
.faq .answer li strong{ font-weight:400; font-family:var(--display); font-size:1.08em; }
.faq .answer .sub{ font-family:var(--display); font-size:1.2rem; margin:1.4rem 0 .6rem; }
@media (prefers-reduced-motion: no-preference){
  .faq details[open] .answer{ animation:rise .9s ease; }
}

/* ---------- education list ---------- */
.education{ max-width:780px; margin:0 auto; }
.education .edu-row{
  display:grid; grid-template-columns:90px 1fr; gap:1.4rem;
  padding:1.15rem 0; border-bottom:1px solid var(--rule);
}
.education .edu-row:last-child{ border-bottom:none; }
.education .year{ font-family:var(--display); font-size:1.25rem; }
.education .what{ align-self:center; }

/* ---------- yoga schedule (no lines: day + hour, then the class name) ---------- */
.schedule{ max-width:640px; margin:0 auto; }
.schedule .class-row{
  display:grid; grid-template-columns:11.5rem 1fr; gap:1.5rem; align-items:baseline;
  padding:.7rem 0;
}
.schedule .when{ font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; white-space:nowrap; }
.schedule .name{ font-family:var(--display); font-size:clamp(1.05rem,1.7vw,1.25rem); line-height:1.4; }
.schedule .name small{ font-family:var(--sans); font-size:.66rem; letter-spacing:.2em; margin-left:.5rem; opacity:.8; }
.schedule-note{ text-align:center; margin-top:2.4rem; }
.schedule-note a.inline{ border-bottom:1px solid var(--red); transition:color .4s ease; }
.schedule-note a.inline:hover{ color:var(--red); }
@media (max-width:640px){
  .schedule{ text-align:center; }
  .schedule .class-row{ grid-template-columns:1fr; gap:.15rem; padding:.9rem 0; }
}

/* ---------- video ---------- */
.video-frame{ max-width:900px; margin:0 auto; aspect-ratio:16/9; position:relative; }
.video-frame iframe{ width:100%; height:100%; border:0; border-radius:3px; filter:grayscale(1); transition:filter 1.4s ease; }
.video-frame:hover iframe{ filter:none; }

/* ---------- quote band ---------- */
.quote-band{ text-align:center; overflow:hidden; }
.quote-band blockquote{
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.35rem,2.8vw,2rem); max-width:760px; margin:0 auto; line-height:1.55;
  position:relative; z-index:2;
}
.quote-band cite{ display:block; margin-top:1.8rem; font-family:var(--sans); font-style:normal; font-size:.76rem; letter-spacing:.26em; text-transform:uppercase; }
.quote-band .phases{ margin-bottom:2.2rem; }

/* ---------- journal index ---------- */
.journal-list{ max-width:760px; margin:0 auto; }
.post-card{ display:block; padding:2.3rem 0; border-bottom:1px solid var(--rule); }
.post-card:hover h2{ color:var(--red); }
.post-card .post-date{ font-size:.7rem; letter-spacing:.24em; text-transform:uppercase; display:block; margin-bottom:.6rem; opacity:.8; }
.post-card h2{ font-size:clamp(1.6rem,3vw,2.2rem); line-height:1.25; margin-bottom:.6rem; transition:color .5s ease; }
.post-card p{ max-width:60ch; }
.post-card .read-more{ display:inline-block; margin-top:.9rem; font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--red); }
.journal-empty{ text-align:center; padding:3rem 0; }

/* ---------- journal post ---------- */
.post-header{ text-align:center; max-width:760px; margin:0 auto clamp(2.5rem,6vw,4rem); }
.post-header .post-date{ font-size:.7rem; letter-spacing:.24em; text-transform:uppercase; display:block; margin-bottom:1rem; opacity:.8; }
.post-header h1{ font-size:clamp(2rem,4.6vw,3.2rem); line-height:1.2; letter-spacing:.04em; }
.post-image{ max-width:860px; margin:0 auto clamp(2.5rem,6vw,4rem); }
.post-image img{ width:100%; border-radius:3px; }
.post-footer{
  max-width:660px; margin:3rem auto 0; padding-top:2rem;
  border-top:1px solid var(--rule);
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem;
}
/* placeholder for a post image that is not there yet */
.ph{
  border:1px dashed rgba(64,64,64,.35); border-radius:3px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.4rem;
  font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; aspect-ratio:16/9;
}
.ph .plus{ font-family:var(--display); font-size:1.6rem; color:var(--taupe); }

/* ---------- newsletter ---------- */
.newsletter{ position:relative; text-align:center; overflow:hidden; }
.newsletter .ring{ width:min(580px,94vw); height:min(580px,94vw); left:50%; top:50%; transform:translate(-50%,-50%); opacity:.3; }
.newsletter .ring.blink{ opacity:.8; }
.newsletter .moon, .journal-inner .moon{ display:block; font-size:1.5rem; line-height:1; margin-bottom:1.4rem; color:var(--red); }
.newsletter-inner{ position:relative; z-index:2; max-width:560px; margin:0 auto; }
.newsletter .eyebrow{ display:block; margin-bottom:1rem; }
.newsletter h2{ font-size:clamp(2rem,4vw,2.8rem); margin-bottom:1rem; }
.newsletter p{ margin-bottom:1rem; }
.form-note{ margin-top:1.4rem; font-size:.74rem; letter-spacing:.06em; opacity:.85; }

/* ---------- footer ---------- */
footer{
  position:relative; overflow:hidden;
  background:var(--ink); color:var(--cream);
  padding:clamp(3.5rem,8vw,6rem) clamp(1.5rem,6vw,5rem) 2rem;
}
footer .snake{ right:-3rem; bottom:-5rem; width:clamp(220px,28vw,380px); background:var(--taupe); opacity:.5; }
.footer-grid{
  position:relative; z-index:2;
  max-width:1180px; margin:0 auto;
  display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:2.5rem;
  padding-bottom:3rem; border-bottom:1px solid rgba(219,216,207,.18);
}
.footer-grid .f-logo{ font-family:var(--display); font-size:1.3rem; letter-spacing:.3em; text-transform:uppercase; margin-bottom:1.2rem; }
.footer-grid p{ max-width:34ch; font-size:.95rem; font-family:var(--display); }
.footer-col .label{ font-size:.68rem; letter-spacing:.22em; text-transform:uppercase; color:var(--taupe); margin-bottom:1rem; }
.footer-col a, .footer-col span{ display:block; margin-bottom:.7rem; font-size:.95rem; color:var(--cream); transition:color .4s ease; }
.footer-col a:hover{ color:var(--red); }
/* red on ink is hard to read, so footer hovers get an underline instead */
footer .footer-col a:hover{ color:var(--cream); text-decoration:underline; text-decoration-color:var(--red); text-underline-offset:5px; }
.footer-bottom{
  position:relative; z-index:2;
  max-width:1180px; margin:0 auto; padding-top:1.6rem;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:.6rem;
  font-size:.72rem; letter-spacing:.08em; color:var(--cream); opacity:.75;
}

@media (max-width:900px){
  .work-grid, .work-grid.rev, .about-grid, .about-grid.rev, .pair{ grid-template-columns:1fr; }
  .work-grid.rev .work-media, .about-grid.rev .about-media{ order:-1; }
  .info-strip{ grid-template-columns:repeat(2,1fr); }
  .info-strip .cell:nth-child(2){ border-right:none; }
  .info-strip .cell:nth-child(1), .info-strip .cell:nth-child(2){ border-bottom:1px solid var(--rule); }
  .footer-grid{ grid-template-columns:1fr; }
  .work-media, .about-media{ max-width:440px; margin:0 auto; width:100%; }
}

/* ---------- sub headings inside a section (practices: weekly schedule / events) ---------- */
.sub-head{
  text-align:center; font-size:clamp(1.15rem,2vw,1.4rem); letter-spacing:.2em; text-transform:uppercase;
  margin:0 0 1.4rem;
}
.schedule-note + .sub-head{ margin-top:clamp(3.5rem,8vw,5.5rem); }
.events-empty{ text-align:center; }

/* ---------- video: the Youtube player only loads after a click ---------- */
.video-consent{
  width:100%; height:100%; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1rem;
  background:var(--ink); color:var(--cream); border:0; border-radius:3px;
  font-family:var(--sans); font-weight:300; padding:1.5rem;
}
.video-consent .play{
  width:74px; height:74px; border-radius:50%; border:1.5px solid var(--red); position:relative;
  transition:background .6s ease;
}
.video-consent .play::after{
  content:''; position:absolute; left:54%; top:50%; transform:translate(-50%,-50%);
  border-left:15px solid var(--cream); border-top:10px solid transparent; border-bottom:10px solid transparent;
}
.video-consent:hover .play{ background:var(--red); }
.video-consent .video-label{ font-family:var(--display); font-size:clamp(1.1rem,2vw,1.4rem); letter-spacing:.14em; text-transform:uppercase; }
.video-consent .video-note{ font-size:.74rem; letter-spacing:.06em; opacity:.8; max-width:34ch; line-height:1.6; }

/* ---------- contact form ---------- */
.contact-form{ max-width:560px; margin:0 auto; position:relative; z-index:2; }
.contact-form label{ display:block; font-size:.7rem; letter-spacing:.24em; text-transform:uppercase; margin:1.8rem 0 .5rem; }
.contact-form input[type="text"], .contact-form input[type="email"], .contact-form textarea{
  width:100%; background:transparent; color:var(--fg);
  border:0; border-bottom:1px solid var(--rule); border-radius:0;
  font-family:var(--sans); font-weight:300; font-size:1.02rem; line-height:1.7; padding:.5rem 0;
  transition:border-color .5s ease;
}
.contact-form textarea{ min-height:9.5rem; resize:vertical; }
.contact-form input:focus, .contact-form textarea:focus{ outline:none; border-bottom-color:var(--fg); }
.contact-form .consent{
  display:flex; gap:.8rem; align-items:flex-start; margin-top:2rem;
  font-size:.86rem; letter-spacing:0; text-transform:none; line-height:1.6;
}
.contact-form .consent input{ margin-top:.3rem; accent-color:var(--red); flex:none; }
.contact-form .consent a, .legal a{ border-bottom:1px solid currentColor; }
.contact-form .hp{ position:absolute; left:-9999px; }
.contact-form .form-actions{ text-align:center; margin-top:1rem; }
.contact-form .form-status{ text-align:center; margin-top:1.4rem; min-height:1.8em; }

/* ---------- legal pages (impressum, privacy) ---------- */
.legal{ padding-top:clamp(8rem,17vw,11rem); }
.legal .prose h1{ font-size:clamp(2rem,4.6vw,3.2rem); letter-spacing:.08em; text-transform:uppercase; line-height:1.2; margin-bottom:.6rem; }
.legal .prose .eyebrow{ display:block; margin-bottom:1.2rem; }
.legal .prose h2{ font-size:clamp(1.25rem,2.2vw,1.5rem); letter-spacing:.06em; margin:2.8rem 0 .9rem; }
.legal .prose p{ margin-bottom:1rem; }
.legal .prose ul{ margin:0 0 1rem 1.2rem; }
.legal .prose li{ margin-bottom:.4rem; }
.legal .prose address{ font-style:normal; margin-bottom:1rem; }
.legal a:hover{ color:var(--red); }

.footer-bottom a{ transition:opacity .4s ease; }
.footer-bottom a:hover{ text-decoration:underline; text-decoration-color:var(--red); text-underline-offset:5px; }

/* ===== VERSION B: only Optima (chosen by Pascale, 14 Oct 2026) ===== */
:root{ --sans:Optima, 'Belleza', Candara, 'Segoe UI', sans-serif; }
body{ font-weight:400; }
.btn, .video-consent{ font-weight:400; }
/* bigger red circle above the sub page titles */
.page-hero .ring.blink{ width:clamp(92px,11vw,128px); height:clamp(92px,11vw,128px); margin-bottom:2.2rem; }
.page-hero{ padding-top:clamp(7rem,14vw,9.5rem); }