/* ============================================================
   YONI MASSAGE — core stylesheet
   Palette: temple interior at night. Aubergine dark, candlelight
   brass, pomegranate flesh. Deliberately not spa-beige.
   ============================================================ */

:root{
  --ink:      #170D14;   /* deep aubergine black */
  --ink-2:    #1F1119;   /* section shift */
  --veil:     #2A1823;   /* raised surface */
  --rose:     #C46B72;   /* pomegranate flesh */
  --rose-dim: #8E4B52;
  --gold:     #C9A46A;   /* candlelight brass */
  --flesh:    #DCC5BE;   /* body text */
  --dawn:     #F4E7E0;   /* headline white */
  --hush:     rgba(220,197,190,.42);

  --display: "Fraunces", Georgia, serif;
  --body: "Karla", system-ui, -apple-system, sans-serif;

  --measure: 34rem;
  --gutter: clamp(1.25rem, 5vw, 5rem);
  --spine: clamp(1.1rem, 3.5vw, 3.25rem);

  --slow: 1.4s cubic-bezier(.16,.68,.32,1);
  --ease: .5s cubic-bezier(.16,.68,.32,1);
}

*,*::before,*::after{ box-sizing:border-box; }

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

body{
  margin:0;
  background:var(--ink);
  color:var(--flesh);
  font-family:var(--body);
  font-size:clamp(1.02rem,.96rem + .35vw,1.14rem);
  line-height:1.72;
  font-weight:400;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* ---------- type ---------- */

h1,h2,h3{
  font-family:var(--display);
  font-weight:400;
  color:var(--dawn);
  font-variation-settings:"SOFT" 60,"WONK" 1,"opsz" 40;
  line-height:1.06;
  letter-spacing:-.015em;
  margin:0 0 .55em;
  text-wrap:balance;
}

h1{ font-size:clamp(2.55rem,1.5rem + 5.1vw,5.7rem); }
h2{ font-size:clamp(1.95rem,1.3rem + 2.9vw,3.5rem); }
h3{ font-size:clamp(1.28rem,1.1rem + .8vw,1.72rem); line-height:1.18; }

p{ margin:0 0 1.35em; max-width:var(--measure); }
p:last-child{ margin-bottom:0; }

a{ color:var(--rose); text-decoration:none; }

em{ font-style:italic; }
strong{ font-weight:700; color:var(--dawn); }

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

.wrap{
  width:100%;
  max-width:74rem;
  margin-inline:auto;
  padding-inline:var(--gutter);
}

section{
  position:relative;
  padding-block:clamp(5rem,11vw,10.5rem);
}

.shift{ background:var(--ink-2); }

/* The thread: a vertical channel down the left edge that fills as
   you read. Structural, not decorative — it is the progress bar. */
.thread{
  position:fixed;
  left:var(--spine); top:0;
  width:1px; height:100vh;
  background:rgba(201,164,106,.15);
  z-index:40;
  pointer-events:none;
}
.thread span{
  display:block; width:100%; height:0;
  background:linear-gradient(180deg,var(--rose),var(--gold));
  box-shadow:0 0 12px rgba(201,164,106,.55);
}
@media(max-width:760px){ .thread{ display:none; } }

/* ---------- nav ---------- */

.nav{
  position:fixed; inset:0 0 auto 0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  gap:1.5rem;
  padding:1.1rem var(--gutter);
  background:linear-gradient(180deg,rgba(23,13,20,.92),rgba(23,13,20,0));
  transition:background var(--ease);
}
.nav.solid{ background:rgba(23,13,20,.96); backdrop-filter:blur(14px); }

.mark{
  font-family:var(--display);
  font-variation-settings:"SOFT" 80,"WONK" 1,"opsz" 20;
  font-size:1.22rem; color:var(--dawn); letter-spacing:.01em;
}
.mark i{ font-style:normal; color:var(--rose); }

.nav ul{ display:flex; gap:clamp(1rem,2.4vw,2.2rem); list-style:none; margin:0; padding:0; }
.nav a{
  color:var(--flesh); font-size:.9rem; letter-spacing:.02em;
  padding-block:.35rem; position:relative;
}
.nav a::after{
  content:""; position:absolute; left:0; bottom:0;
  width:100%; height:1px; background:var(--rose);
  transform:scaleX(0); transform-origin:right;
  transition:transform var(--ease);
}
.nav a:hover::after,.nav a:focus-visible::after{ transform:scaleX(1); transform-origin:left; }

@media(max-width:720px){
  .nav ul{ display:none; }
  .nav .call{ display:inline-block; }
}

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

.hero{
  min-height:100svh;
  display:grid;
  align-items:center;
  padding-block:8rem 6rem;
  overflow:hidden;
}
.hero .wrap{ position:relative; z-index:2; }

.hero h1{ margin-bottom:.4em; }
.hero .lede{
  font-size:clamp(1.1rem,1rem + .55vw,1.35rem);
  max-width:31rem;
  color:var(--flesh);
}

/* the breathing mandala — pure SVG, ~4kb, no image files */
.bloom{
  position:absolute;
  right:-14vw; top:50%;
  transform:translateY(-50%);
  width:min(94vw,68rem); height:auto;
  opacity:.5;
  z-index:1;
  pointer-events:none;
}
.bloom .petal{ fill:none; stroke:var(--gold); stroke-width:.5; opacity:.55; }
.bloom .petal.warm{ stroke:var(--rose); }
.bloom g{ transform-origin:400px 400px; }
.bloom .ring-a{ animation:turn 210s linear infinite; }
.bloom .ring-b{ animation:turn 300s linear infinite reverse; }
.bloom .core{ animation:breathe 8s ease-in-out infinite; transform-origin:400px 400px; }

@keyframes turn{ to{ transform:rotate(360deg); } }
@keyframes breathe{
  0%,100%{ transform:scale(1); opacity:.42; }
  45%{ transform:scale(1.075); opacity:.78; }
}

@media(max-width:760px){
  .bloom{ right:-38vw; opacity:.3; }
}

/* ---------- pull quote ---------- */

.quote{ padding-block:clamp(4rem,9vw,8rem); }
.quote blockquote{
  margin:0;
  font-family:var(--display);
  font-variation-settings:"SOFT" 90,"WONK" 1,"opsz" 44;
  font-size:clamp(1.8rem,1.1rem + 3.1vw,3.55rem);
  line-height:1.14;
  color:var(--dawn);
  max-width:26ch;
  letter-spacing:-.02em;
}
.quote .attrib{
  margin-top:1.6rem; font-size:.92rem; color:var(--hush); max-width:none;
}

/* ---------- editorial two-column ---------- */

.split{
  display:grid;
  gap:clamp(2.2rem,5vw,5.5rem);
  grid-template-columns:1fr;
}
@media(min-width:900px){
  .split{ grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); align-items:start; }
  .split.flip{ grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); }
}
.split h2{ position:sticky; top:6.5rem; }
@media(max-width:899px){ .split h2{ position:static; } }

/* ---------- lists (true ul/li per content rules) ---------- */

ul.marks{ list-style:none; margin:2rem 0 0; padding:0; max-width:var(--measure); }
ul.marks li{
  position:relative;
  padding:.85rem 0 .85rem 2.1rem;
  border-top:1px solid rgba(220,197,190,.12);
}
ul.marks li:last-child{ border-bottom:1px solid rgba(220,197,190,.12); }
ul.marks li::before{
  content:"";
  position:absolute; left:.35rem; top:1.55rem;
  width:.44rem; height:.44rem;
  border-radius:50% 0 50% 50%;
  background:var(--rose);
  transform:rotate(45deg);
}

/* ---------- pathways ---------- */

.paths{ display:grid; gap:1px; background:rgba(220,197,190,.13); margin-top:clamp(2.5rem,5vw,4rem); }
@media(min-width:820px){ .paths{ grid-template-columns:repeat(3,1fr); } }

.path{
  background:var(--ink);
  padding:clamp(2rem,3.4vw,3rem);
  display:flex; flex-direction:column;
  transition:background var(--ease);
}
.path:hover,.path:focus-within{ background:var(--veil); }
.path h3{ margin-bottom:.3em; }
.path .tag{
  font-size:.86rem; color:var(--gold); letter-spacing:.04em;
  margin:0 0 1.15rem;
}
.path p{ font-size:.98rem; flex:1; }
.path .go{
  margin-top:1.8rem;
  font-size:.92rem; color:var(--rose);
  border-bottom:1px solid rgba(196,107,114,.4);
  padding-bottom:.25rem;
  align-self:flex-start;
  transition:border-color var(--ease),color var(--ease);
}
.path .go:hover{ color:var(--gold); border-color:var(--gold); }

/* ---------- bio ---------- */

.bio p{ max-width:38rem; }
.bio .plate{
  border-left:1px solid rgba(201,164,106,.3);
  padding-left:clamp(1.2rem,2.5vw,2.2rem);
}

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

.btn{
  display:inline-block;
  font-family:var(--body); font-size:.97rem; letter-spacing:.015em;
  color:var(--ink); background:var(--dawn);
  padding:.95rem 2.1rem;
  border:0; border-radius:999px;
  cursor:pointer;
  transition:background var(--ease),color var(--ease),transform var(--ease);
}
.btn:hover,.btn:focus-visible{ background:var(--rose); color:var(--dawn); transform:translateY(-2px); }

.btn.ghost{
  background:transparent; color:var(--dawn);
  box-shadow:inset 0 0 0 1px rgba(220,197,190,.35);
}
.btn.ghost:hover{ background:transparent; box-shadow:inset 0 0 0 1px var(--gold); color:var(--gold); }

.cta-row{ display:flex; flex-wrap:wrap; gap:.9rem; margin-top:2.4rem; }

/* ---------- closing ---------- */

.closing{ text-align:center; }
.closing p,.closing h2{ margin-inline:auto; }
.closing .cta-row{ justify-content:center; }

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

footer{
  border-top:1px solid rgba(220,197,190,.14);
  padding-block:clamp(3rem,6vw,5rem) 2.5rem;
  font-size:.92rem;
}
.foot-grid{ display:grid; gap:2.5rem; }
@media(min-width:760px){ .foot-grid{ grid-template-columns:1.4fr 1fr 1fr; } }
footer h4{
  font-family:var(--body); font-size:.86rem; font-weight:700;
  color:var(--dawn); letter-spacing:.03em; margin:0 0 1rem;
}
footer ul{ list-style:none; margin:0; padding:0; }
footer li{ margin-bottom:.6rem; }
footer a{ color:var(--flesh); }
footer a:hover{ color:var(--rose); }
.fine{ margin-top:3rem; color:var(--hush); font-size:.84rem; max-width:46rem; }

/* ---------- motion system ---------- */

/* One orchestrated page-load moment: the veil parts. */
.veil{
  position:fixed; inset:0; z-index:99;
  display:grid; grid-template-columns:1fr 1fr;
  pointer-events:none;
}
.veil i{ background:var(--ink); transition:transform 1.5s cubic-bezier(.76,0,.24,1); }
.veil i:first-child{ transform-origin:left; }
.veil i:last-child{ transform-origin:right; }
body.lifted .veil i:first-child{ transform:translateX(-100%); }
body.lifted .veil i:last-child{ transform:translateX(100%); }
body.lifted .veil{ transition:visibility 0s 1.5s; visibility:hidden; }

/* Reveals: focus pull, not slide-up-fade. */
.rise{ opacity:0; filter:blur(9px); transform:translateY(14px); }
.rise.seen{
  opacity:1; filter:blur(0); transform:none;
  transition:opacity var(--slow),filter var(--slow),transform var(--slow);
}
.rise.d1.seen{ transition-delay:.1s; }
.rise.d2.seen{ transition-delay:.2s; }
.rise.d3.seen{ transition-delay:.3s; }

/* Cursor warmth, desktop fine-pointer only. */
.glow{
  position:fixed; z-index:1; top:0; left:0;
  width:36rem; height:36rem; margin:-18rem 0 0 -18rem;
  border-radius:50%;
  background:radial-gradient(circle,rgba(196,107,114,.13),transparent 62%);
  pointer-events:none; opacity:0;
  transition:opacity 1s ease;
}
@media(hover:hover) and (pointer:fine){ .glow.on{ opacity:1; } }
@media(hover:none),(pointer:coarse){ .glow{ display:none; } }

/* ---------- accessibility floor ---------- */

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

.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--dawn); color:var(--ink); padding:.8rem 1.4rem;
}
.skip:focus{ left:var(--gutter); top:.6rem; }

@media(prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .rise{ opacity:1; filter:none; transform:none; }
  .veil{ display:none; }
  .glow{ display:none; }
}

/* ---------- WhatsApp buttons ---------- */
.btn{ display:inline-flex; align-items:center; gap:.6rem; }
.btn .wa{ width:1.15em; height:1.15em; fill:currentColor; flex:none; }

/* inline "go" links used at the foot of a prose column */
.split .go{ display:inline-block; margin-top:1.9rem; font-size:.95rem;
  color:var(--rose); border-bottom:1px solid rgba(196,107,114,.4);
  padding-bottom:.25rem; transition:color var(--ease),border-color var(--ease); }
.split .go:hover{ color:var(--gold); border-color:var(--gold); }

/* ---------- article reading column ---------- */
.article{ max-width:40rem; margin-inline:auto; }
.article > *{ max-width:none; }
.article h2{ margin-top:2.6em; }
.article h2:first-child{ margin-top:0; }
.article p + h3{ margin-top:2em; }
.article a{ border-bottom:1px solid rgba(196,107,114,.4); }
.article a:hover{ color:var(--gold); border-color:var(--gold); }
.article .marks{ margin-block:1.8rem; }

/* ---------- journal index ---------- */
.cluster{ margin-top:clamp(3rem,6vw,5rem); }
.cluster > p{ color:var(--hush); max-width:38rem; }
.entries{ list-style:none; margin:2rem 0 0; padding:0; }
.entries li{ border-top:1px solid rgba(220,197,190,.13); }
.entries li:last-child{ border-bottom:1px solid rgba(220,197,190,.13); }
.entries a{
  display:block; padding:1.5rem 0; color:var(--flesh);
  transition:color var(--ease),padding-left var(--ease);
}
.entries a:hover{ color:var(--dawn); padding-left:.7rem; }
.entries .t{
  display:block; font-family:var(--display);
  font-variation-settings:"SOFT" 60,"WONK" 1,"opsz" 30;
  font-size:clamp(1.2rem,1.05rem + .7vw,1.55rem); color:var(--dawn);
  line-height:1.2; margin-bottom:.35rem;
}
.entries .d{ display:block; font-size:.95rem; color:var(--hush); max-width:44rem; }

/* ---------- read next ---------- */
.readnext{ max-width:40rem; margin:0 auto; }
.readnext h2{ font-size:clamp(1.1rem,1rem + .5vw,1.35rem); margin-bottom:1.4rem; }
.readnext ul{ list-style:none; margin:0; padding:0; }
.readnext li{ border-top:1px solid rgba(220,197,190,.13); }
.readnext li:last-child{ border-bottom:1px solid rgba(220,197,190,.13); }
.readnext a{
  display:block; padding:1.25rem 0; color:var(--flesh);
  transition:color var(--ease),padding-left var(--ease);
}
.readnext a:hover{ color:var(--dawn); padding-left:.7rem; }
.readnext .t{
  display:block; font-family:var(--display);
  font-variation-settings:"SOFT" 60,"WONK" 1,"opsz" 30;
  font-size:1.18rem; color:var(--dawn); line-height:1.2; margin-bottom:.3rem;
}
.readnext .d{ display:block; font-size:.93rem; color:var(--hush); }

/* ---------- author byline ---------- */
.byline{
  max-width:40rem; margin:clamp(2.5rem,5vw,3.5rem) auto 0;
  padding-top:1.6rem;
  border-top:1px solid rgba(220,197,190,.13);
  font-size:.93rem; color:var(--hush);
}
.byline strong{ color:var(--flesh); font-weight:700; }