/* ═══════════════════════════════════════════════════════════════════
   embody-u-program — page-specific styles
   Loaded AFTER shared/ephemeris.css, so anything repeated here
   deliberately overrides the shared rule of the same name.
   ═══════════════════════════════════════════════════════════════════ */

body {
  margin:0; background:var(--parchment); color:var(--ink);
  font-family:var(--body); font-size:16px; line-height:1.5;
  -webkit-font-smoothing:antialiased; transition:background .35s, color .35s;
}

.hero-figure { margin:0; position:relative; }

/* ── Aureole ─────────────────────────────────────────────────
   背光 — the radiant ring behind a Guan Yin statue. A real
   photographed gold ring reads far better than a drawn one;
   the CSS ray version is kept below, commented, in case the
   image ever needs to come out.                             */
.aureole { position:absolute; left:50%; top:-5%; width:74%; aspect-ratio:1; transform:translateX(-50%); z-index:0; pointer-events:none; }

.seal text { font-family:var(--sub); font-size:11px; letter-spacing:.045em; fill:var(--gilt); text-transform:uppercase; }

@media (max-width:900px) {
  .hero-grid { grid-template-columns:1fr; }
  .hero-figure { max-width:22rem; margin-inline:auto; order:-1; }
  .foot-inner { grid-template-columns:1fr 1fr; }
}

@media (max-width:760px) {
  .mobile-break { display:block; }
  .menu-toggle { display:block; }
  .topbar-inner { flex-wrap:wrap; }
  .topbar nav { display:none; flex-basis:100%; flex-direction:column; align-items:flex-start; gap:.9rem; padding-top:1.1rem; margin-left:0; }
  .topbar.is-open nav { display:flex; }
  .square-chart { grid-template-columns:1fr; }
  .sc-angle { display:none; }
  .opposition { grid-template-columns:1fr; }
  .opp-glyph { justify-self:center; }
  .quadrants { grid-template-columns:1fr; }
  .split, .split--rev { grid-template-columns:1fr; }
  .split figure { max-width:19rem; }
  .seal { width:150px; height:150px; right:-1rem; bottom:-1rem; }
  .foot-inner { grid-template-columns:1fr; }
}

/* ── Incense ─────────────────────────────────────────────────
   The cursor is a lit stick; the smoke is drawn on a canvas
   beneath the grain so it reads as part of the page.        */
.incense-smoke {
  position:fixed; inset:0; width:100%; height:100%;
  pointer-events:none; z-index:34;
  /* Ribbons are stroked crisp, then softened here — far cheaper than
     blurring every stroke, and it melts the edges into real smoke. */
  filter:blur(5.5px);
}

/* Incense stick: dark shaft, pale ash near the tip, glowing ember.
   Hotspot sits on the ember, which is where the smoke is emitted. */
:root {
  --cursor-incense:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='38' height='38' viewBox='0 0 38 38'%3E%3Cline x1='5' y1='35' x2='26' y2='10' stroke='%23000' stroke-opacity='.16' stroke-width='4.4' stroke-linecap='round'/%3E%3Cline x1='5' y1='35' x2='26' y2='10' stroke='%235b4636' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='21' y1='16' x2='25.5' y2='10.5' stroke='%23c9c2b6' stroke-width='2.2' stroke-linecap='round'/%3E%3Ccircle cx='27' cy='8.6' r='5' fill='%23ff7a2f' opacity='.3'/%3E%3Ccircle cx='27' cy='8.6' r='2.4' fill='%23ff9440'/%3E%3Ccircle cx='27' cy='8.6' r='1.1' fill='%23ffd9a0'/%3E%3C/svg%3E") 27 9;
}

body { cursor:var(--cursor-incense), auto; }

a, button, summary, [role="button"], .rail-decan { cursor:var(--cursor-incense), pointer; }

@media (prefers-reduced-motion:reduce) {
  .sect-ripple, .incense-smoke, .petal, .threshold { display:none; }
  .aureole::before, .aureole::after, .candle-flame, .altar-candle::after, .bell.is-rung svg,
  .eyebrow.is-lit, .glyph-rule.is-lit::after, .glyph-rule--lotus.is-lit .lotus-glyph { animation:none; }
}

/* ═══════════════════════════════════════════════════════════════════
   EMBODY U — her own night
   The hero and the dark bands stand on her black desert-sand starfield
   (sand.jpg, from the live page), with the marble goddess crowned by
   the gold-leaf starburst. Same scrim discipline as everywhere else:
   the overlay darkens the PLATE only, never the type, so every child
   is lifted onto its own layer.
   ═══════════════════════════════════════════════════════════════════ */
.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;
}

.hero--eu, .band--sand {
  position:relative; max-width:none;
  background:#0b0a09 url('images/sand.jpg') center/cover;
  border-block:1px solid #211d18;
}
.hero--eu::before, .band--sand::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:rgba(10,9,8,.72);
}
.hero--eu > *, .band--sand > * { position:relative; z-index:1; }
.hero--eu .hero-grid {
  max-width:calc(var(--shell) - 2*var(--gutter)); margin-inline:auto;
  grid-template-columns:.95fr 1.05fr;
}
.band--sand > * {
  max-width:calc(var(--shell) - 2*var(--gutter)); margin-inline:auto;
}

/* hero type on the night */
.eu-wordmark { display:block; width:min(17rem,80%); height:auto; margin:0 0 1.4rem; }
.eu-eyebrow {
  margin:0 0 .6rem; font-family:var(--quote); font-style:italic;
  font-size:var(--quote-md); color:var(--lilac);
}
.hero--eu h1 { color:#f3efe8; }
.hero--eu h1 em { color:var(--lilac); }
.hero--eu .hero-body { color:#cfc9be; max-width:30rem; }
.hero--eu .fineprint { color:#938c80; }

/* the collage: gold star behind, goddess forward, cloud at her shoulder */
.eu-plate { position:relative; margin:0; aspect-ratio:1/1.12; }
.eu-plate img { position:absolute; height:auto; }
.eu-star {
  width:88%; left:2%; top:2%; opacity:.95; z-index:1;
  animation:euTurn 90s linear infinite;
}
@keyframes euTurn { to { transform:rotate(360deg); } }
.eu-goddess {
  width:62%; left:16%; top:6%; z-index:2;
  filter:drop-shadow(0 20px 44px rgba(0,0,0,.6));
}
.eu-cloud { width:86%; left:4%; bottom:-4%; z-index:3; opacity:.96; }

/* ── The calling, on sand ────────────────────────────────────────── */
.calling-lead {
  max-width:34rem; margin:0 auto 1.6rem;
  font-family:var(--display); font-size:var(--step-1); line-height:1.25;
  color:var(--lilac); font-kerning:none;
}
.prose--onsand p { color:#d6d0c5; }
.calling-beat { font-family:var(--quote); font-style:italic; color:#f3efe8; }
.calling-beat--big {
  font-family:var(--display); font-style:normal; font-size:var(--step-1);
  color:#f3efe8; font-kerning:none;
}
.doubts { margin-top:2rem; }
.doubt {
  max-width:30rem; margin:0 auto .9rem;
  font-family:var(--quote); font-style:italic; font-size:var(--quote-md);
  color:#b9b1a3;
}

/* ── Clarity list ────────────────────────────────────────────────── */
.codes { list-style:none; margin:1.6rem auto 0; padding:0; text-align:left; }
.codes li { padding:.8rem 0 .8rem 1.7rem; position:relative; border-bottom:1px solid var(--hair); }
.codes li::before { content:'✦'; position:absolute; left:0; top:.75rem; color:var(--violet); }
.codes li:last-child { border-bottom:0; }
.clarity-list { max-width:34rem; }

/* ── Tarot row ───────────────────────────────────────────────────── */
.tarot-row {
  margin-top:2.6rem; display:grid; gap:clamp(1.2rem,3vw,2rem);
  grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));
  max-width:56rem; margin-inline:auto; text-align:center;
}
.tarot { margin:0; }
.tarot img {
  width:min(13rem,72%); height:auto;
  filter:drop-shadow(0 14px 30px rgba(30,24,50,.35));
  transition:transform .35s ease;
}
.tarot:hover img { transform:translateY(-6px) rotate(-1.2deg); }
.tarot h3 { margin:.9rem 0 .4rem; font-size:1rem; }
.tarot figcaption p { margin:0; font-size:.92em; }

/* ── The four arrow visions ──────────────────────────────────────── */
.arrows { max-width:38rem; margin:2.2rem auto 0; text-align:left; }
.arrow {
  position:relative; padding:1.1rem 0 1.1rem 2.4rem;
  border-bottom:1px solid var(--hair);
}
.arrow:last-child { border-bottom:0; }
.arrow::before {
  content:'→'; position:absolute; left:.2rem; top:1.05rem;
  color:var(--violet); font-size:1.15rem;
}
.arrow p { margin:0; }
.gap-line {
  max-width:32rem; margin:2.2rem auto 0;
  font-family:var(--quote); font-style:italic; font-size:var(--quote-lg);
}

/* ── Included cells (shared pattern, local styles) ───────────────── */
.included {
  display:grid; grid-template-columns:repeat(auto-fit, minmax(14rem, 1fr));
  gap:clamp(1rem,2.5vw,1.6rem); margin-top:2.4rem; text-align:left;
}
.inc-cell {
  background:var(--panel); padding:clamp(1.3rem,2.6vw,1.7rem);
  border:1px solid var(--hair); transition:background .35s;
}
.inc-glyph {
  display:block; font-size:1.35rem; line-height:1; color:var(--gilt);
  margin-bottom:.7rem; font-family:var(--sub);
}
.inc-cell h3 {
  font-family:var(--sub); font-size:var(--caps-xs); letter-spacing:.22em;
  text-transform:uppercase; margin:0 0 .6rem; font-weight:400;
}
.inc-cell p { margin:0; font-size:.93em; }
.checkin-note {
  max-width:34rem; margin:2rem auto 0;
  font-family:var(--quote); font-style:italic; font-size:1.02rem;
}

/* ── Framed art ──────────────────────────────────────────────────── */
.frame-art { margin:0; }
.frame-art img {
  width:100%; height:auto; display:block; aspect-ratio:4/3.6; object-fit:cover;
  border:6px solid #fff; outline:1px solid var(--hair);
  box-shadow:0 14px 40px rgba(20,15,10,.2);
}

/* ── For / not for ───────────────────────────────────────────────── */
.isnt {
  margin-top:2.4rem; display:grid; gap:1.4rem;
  grid-template-columns:repeat(auto-fit,minmax(18rem,1fr));
  max-width:52rem; margin-inline:auto; text-align:left;
}
.isnt-col { padding:1.8rem; border:1px solid var(--hair); background:var(--panel); }
.isnt-col--is   { border-color:color-mix(in srgb, var(--violet) 40%, var(--hair)); }
.isnt-col--isnt { border-color:color-mix(in srgb, var(--stone) 70%, var(--hair)); }
.isnt-head {
  margin:0 0 1rem; font-family:var(--sub); font-size:var(--caps-xs);
  letter-spacing:.2em; text-transform:uppercase;
}
.isnt-col--is .isnt-head { color:var(--violet); }
.isnt-col--isnt .isnt-head { color:var(--muted); }
.isnt-col ul { list-style:none; margin:0; padding:0; }
.isnt-col li {
  padding:.6rem 0 .6rem 1.5rem; position:relative; font-size:.94em;
  border-bottom:1px dotted var(--hair);
}
.isnt-col li:last-child { border-bottom:0; }
.isnt-col--is li::before { content:'✦'; position:absolute; left:0; color:var(--violet); }
.isnt-col--isnt li::before { content:'×'; position:absolute; left:.15rem; color:var(--muted); }

/* ── Quote bands ─────────────────────────────────────────────────── */
.big-quote { margin:1.4rem auto 0; max-width:37rem; }
.big-quote p {
  font-family:var(--quote); font-style:italic; font-size:var(--quote-lg);
  margin:0 0 1rem; color:var(--ink);
}
.quote-who {
  /* the shared `.band--alt > *` rule grants max-width AND margin-inline:auto;
     a margin shorthand here would silently clobber the auto and pin it left */
  margin:1.2rem auto 0; font-family:var(--sub); font-size:var(--caps-xs);
  letter-spacing:.2em; text-transform:uppercase; color:var(--violet);
}
.quote-win {
  margin:.5rem auto 0; max-width:30rem; font-family:var(--sub);
  font-size:var(--caps-xxs); letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted); line-height:1.8;
}

/* ── Astro profile chips ─────────────────────────────────────────── */
.chips-head {
  margin:1.6rem 0 .7rem; font-family:var(--sub); font-size:var(--caps-xxs);
  letter-spacing:.24em; text-transform:uppercase; color:var(--gilt);
}
.chips { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.6rem; }
.chips li {
  padding:.45rem .9rem; border:1px solid var(--hair); border-radius:99px;
  font-family:var(--sub); font-size:var(--caps-xxs); letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink); background:var(--panel);
}

/* ── Wins ────────────────────────────────────────────────────────── */
.win-grid {
  margin-top:2.4rem; display:grid; gap:1.4rem;
  grid-template-columns:repeat(auto-fit,minmax(19rem,1fr));
  max-width:52rem; margin-inline:auto; text-align:left;
}
.win-card { background:var(--panel); border:1px solid var(--hair); padding:1.8rem; }
.win-name {
  margin:0 0 .8rem; font-family:var(--display); font-size:var(--step-1);
  font-kerning:none;
}
.win-name span {
  display:block; font-family:var(--sub); font-size:var(--caps-xxs);
  letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin-top:.3rem;
}
.win-quote { font-family:var(--quote); font-style:italic; margin:0 0 1rem; }
.win-head {
  margin:0 0 .5rem; font-family:var(--sub); font-size:var(--caps-xxs);
  letter-spacing:.2em; text-transform:uppercase; color:var(--gilt);
}
.win-card ul { list-style:none; margin:0; padding:0; }
.win-card li {
  padding:.4rem 0 .4rem 1.4rem; position:relative;
  font-family:var(--sub); font-size:var(--caps-xs); letter-spacing:.03em;
  border-bottom:1px dotted var(--hair);
}
.win-card li:last-child { border-bottom:0; }
.win-card li::before { content:'✦'; position:absolute; left:0; color:var(--violet); }

.receipts {
  margin-top:2rem; display:flex; justify-content:center; align-items:flex-start;
  gap:1.4rem; flex-wrap:wrap;
}
.receipts img {
  width:min(17rem,44%); height:auto; border:1px solid var(--hair);
  background:#fff; padding:6px; box-shadow:0 12px 30px rgba(20,15,10,.14);
}
.receipts img:first-child { transform:rotate(-1.4deg); }
.receipts img:last-child  { transform:rotate(1.1deg); }

/* ── Curriculum ──────────────────────────────────────────────────── */
.phase { margin-top:clamp(2.6rem,5vw,3.8rem); }
.phase-mark {
  margin:0 0 .3rem; font-family:var(--sub); font-size:var(--caps-xs);
  letter-spacing:.3em; text-transform:uppercase; color:var(--violet);
}
.phase-name {
  margin:0 0 1.4rem; font-family:var(--display); font-weight:400;
  font-size:var(--step-1); font-kerning:none;
}
.mod-grid {
  /* every phase holds exactly four modules: a 2x2 lattice, never 3+1 */
  display:grid; gap:1.2rem; grid-template-columns:repeat(2,1fr);
  max-width:52rem; margin-inline:auto; text-align:left;
}
@media (max-width:760px) { .mod-grid { grid-template-columns:1fr; } }
.mod-card {
  background:var(--panel); border:1px solid var(--hair);
  padding:clamp(1.4rem,2.8vw,1.9rem);
}
.mod-n {
  margin:0 0 .4rem; font-family:var(--sub); font-size:var(--caps-xxs);
  letter-spacing:.24em; text-transform:uppercase; color:var(--gilt);
}
.mod-card h4 {
  margin:0 0 .6rem; font-family:var(--display); font-weight:400;
  font-size:1.15rem; line-height:1.15; font-kerning:none;
}
.mod-card > p { margin:0 0 .9rem; font-size:.93em; }
.mod-card ul { list-style:none; margin:0; padding:0; }
.mod-card li {
  padding:.35rem 0 .35rem 1.4rem; position:relative;
  font-family:var(--sub); font-size:var(--caps-xxs); letter-spacing:.06em;
  text-transform:uppercase; color:var(--muted);
}
.mod-card li::before { content:'✦'; position:absolute; left:0; color:var(--violet); }

/* ── A new journey (angel) ───────────────────────────────────────── */
.angel-fig { margin:0 auto 1.6rem; max-width:34rem; }
.angel-fig img { width:100%; height:auto; display:block;
  filter:drop-shadow(0 18px 40px rgba(0,0,0,.55)); }
.display-h2--light { color:#f3efe8; }
.display-h2--light em { color:var(--lilac); }
.subhead--light { color:#e6e0d5; }
.band--sand .eyebrow { color:#b9b1a3; }

/* ── Enrol card on sand ──────────────────────────────────────────── */
.enrol-card--eu { max-width:44rem; }
.ec-wordmark {
  display:block; width:min(15rem,70%); height:auto; margin:0 auto 1.2rem;
  filter:invert(1) opacity(.85);
}
.value-line {
  margin:-.6rem 0 1.2rem; font-family:var(--sub); font-size:var(--caps-xxs);
  letter-spacing:.2em; text-transform:uppercase; color:var(--muted);
}
.deliverables { list-style:none; margin:0 0 1.7rem; padding:0; text-align:left; max-width:28rem; margin-inline:auto; }
.deliverables li { padding:.55rem 0 .55rem 1.6rem; position:relative; border-bottom:1px dotted var(--hair); font-family:var(--sub); font-size:var(--caps-xs); letter-spacing:.02em; }
.deliverables li::before { content:'✓'; position:absolute; left:0; color:var(--violet); }
.deliverables li:last-child { border-bottom:0; }

@media (max-width:900px) {
  .hero--eu .hero-grid { grid-template-columns:1fr; }
  .eu-plate { max-width:20rem; margin-inline:auto; order:2; }
  .eu-wordmark { margin-inline:auto; }
  .receipts img { width:min(15rem,86%); }
}
@media (prefers-reduced-motion:reduce) {
  .eu-star { animation:none; }
  .tarot:hover img { transform:none; }
}

/* ═══════════════════════════════════════════════════════════════════
   FINE-TOOTH PASS + CHOREOGRAPHY
   ═══════════════════════════════════════════════════════════════════ */

/* Reading measure on the sand bands: the copy was running ~125 characters
   a line, edge to edge of the shell. Nothing on this page gets to be
   wider than a comfortable read. */
#calling .prose, #newjourney .prose { max-width:37rem; margin-inline:auto; }
#clarity .prose, #decision .prose { max-width:36rem; margin-inline:auto; }

/* Phase marks become medallions: the numeral in a thin ring, so the three
   phases read as stations on a path rather than stray labels. */
.phase-mark {
  display:inline-block; margin:0 0 .8rem; padding:.55rem 1.15rem;
  border:1px solid color-mix(in srgb, var(--violet) 45%, var(--hair));
  border-radius:99px; background:var(--panel);
  font-family:var(--sub); font-size:var(--caps-xxs);
  letter-spacing:.3em; text-transform:uppercase; color:var(--violet);
}

/* Arrival choreography: .rv is only ever added by script, so nothing is
   hidden for anyone without JS, observers, or with reduced motion. */
.rv {
  opacity:0; transform:translateY(16px);
  transition:opacity .65s ease var(--rvd,0s),
             transform .65s cubic-bezier(.2,.7,.3,1) var(--rvd,0s);
}
.rv.is-in { opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce) { .rv { opacity:1; transform:none; transition:none; } }

/* Tarot: transform is driven by the tilt script; keep a soft settle */
.tarot img { transition:transform .45s cubic-bezier(.2,.7,.3,1), filter .35s ease; will-change:transform; }
.tarot:hover img { filter:drop-shadow(0 20px 38px rgba(30,24,50,.45)); }

/* Receipts straighten under the hand, like being picked up to read */
.receipts img { transition:transform .4s cubic-bezier(.2,.7,.3,1), box-shadow .4s ease; }
.receipts img:hover { transform:rotate(0deg) scale(1.03); box-shadow:0 18px 44px rgba(20,15,10,.22); z-index:2; position:relative; }

/* Parallax layers get their own compositing layer */
.eu-goddess, .eu-cloud { will-change:translate; }

/* Altar candles need the section to anchor them */
#enrol .altar { position:relative; }

/* ═══════════════════════════════════════════════════════════════════
   FOLLOWING THE LIVE PAGE — her lavender plates, her collages,
   her module tabs, her video testimonials.
   ═══════════════════════════════════════════════════════════════════ */

/* The tarot cards sat 39px left of their captions: a shared
   `img { display:block }` makes text-align:center a no-op, so a block
   image with margin:0 pins flush left. Centre it explicitly. */
.tarot img { margin-inline:auto; }
.tarot figcaption { max-width:19rem; margin-inline:auto; }

/* ── Lavender plate ──────────────────────────────────────────────
   Her live sections sit on a soft violet ground with her own painted
   wash over it, bleeding edge to edge like every other band. */
.band--lavender {
  position:relative; max-width:none; overflow:hidden;
  background:#cdbcf2;
  border-block:1px solid #b6a2e4;
}
.band--lavender::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:url('images/wash-violet.png') center/cover;
  opacity:.34; mix-blend-mode:soft-light;
}
.band--lavender > * {
  position:relative; z-index:1;
  max-width:calc(var(--shell) - 2*var(--gutter)); margin-inline:auto;
}
.band--lavender .display-h2,
.band--lavender h2, .band--lavender h3, .band--lavender p { color:#1b1526; }
.eyebrow--onlav { color:#4a3a72; }
.prose--wide { max-width:40rem; margin-inline:auto; }
.band--lavender .prose p { color:#241d33; }

/* ── INTRODUCING: wordmark over the silver star, then the suite ── */
.intro-mark { position:relative; margin:.4rem auto 1.6rem; }
.intro-star {
  position:absolute; width:min(19rem,52%); height:auto;
  opacity:.55; z-index:0; animation:euTurn 140s linear infinite reverse;
}
.intro-word { position:relative; z-index:1; width:min(28rem,84%); height:auto; }
.intro-suite { margin:0 auto 2rem; max-width:52rem; }
.intro-suite img {
  width:100%; height:auto; display:block;
  filter:drop-shadow(0 26px 54px rgba(40,28,70,.34));
}

/* ── ONE OF A KIND: the dial, the sleeping marble, the lotus ───── */
.kind-stage {
  position:relative; margin:1.5rem auto 0; max-width:56rem;
  min-height:clamp(30rem,54vw,42rem);
  display:grid; place-items:center;
}
.kind-stage img { position:absolute; height:auto; pointer-events:none; }
.kind-dial {
  width:min(40rem,82%); top:-9%; left:50%; translate:-50% 0; z-index:0; opacity:.92;
  animation:euTurn 220s linear infinite;
}
.kind-figure { width:min(40rem,80%); right:-13%; bottom:-4%; z-index:1; }
.kind-lotus { width:min(14rem,27%); z-index:3; }
.kind-lotus--l { left:-8%;  bottom:-7%; }
/* the second bloom tucks behind her shoulder, not across her face */
.kind-lotus--r { right:-9%; bottom:-2%; width:min(10rem,19%); z-index:0; }
.kind-card {
  position:relative; z-index:2; width:min(34rem,84%);
  background:#ddd3fb; border-radius:14px;
  padding:clamp(1.8rem,4vw,2.6rem);
  box-shadow:0 22px 60px rgba(35,24,66,.26);
}
.kind-head {
  margin:0 0 1.1rem; font-family:var(--sub);
  font-size:var(--caps-xs); letter-spacing:.2em; text-transform:uppercase;
  font-weight:400; line-height:1.7; color:#1b1526;
}
.kind-card p { margin:0 0 1rem; font-size:.97em; }
.btn--ink {
  display:inline-block; margin-top:.7rem;
  background:#141018; color:#f3efe8; border-color:#141018;
}
.btn--ink:hover { background:#000; border-color:#000; }
.kind-pillars { margin-top:clamp(2.4rem,5vw,3.4rem); }
.band--lavender .inc-cell {
  background:rgba(255,255,255,.62); border-color:rgba(70,50,120,.22);
  backdrop-filter:blur(2px);
}
.band--lavender .inc-glyph { color:#5a3fa8; }

/* Two boxes per row, evenly dispersed — never a 3+1 orphan row */
.included--2up { grid-template-columns:repeat(2,1fr); max-width:48rem; margin-inline:auto; }
@media (max-width:720px) { .included--2up { grid-template-columns:1fr; } }

/* ── Module tabs (the Lilith pattern, in Embody U's palette) ───── */
.modtabs { max-width:52rem; margin:0 auto; text-align:left; }
.modtabs-bar { display:flex; gap:2px; }
.modtab {
  flex:1; display:flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.85rem .5rem; cursor:pointer;
  background:#e4dcf4; color:#5b4f7a; border:0;
  font-family:var(--sub); font-size:var(--caps-xxs); letter-spacing:.16em;
  text-transform:uppercase; transition:background .25s ease, color .25s ease;
}
.modtab:hover { background:#d6cbee; color:#2e2544; }
.modtab[aria-selected="true"] { background:var(--panel); color:var(--violet); }
.modtab .phase-moon { width:1.35rem; height:1.35rem; flex:none; }
.modtab .ph-disc { fill:none; stroke:#8d7fb4; stroke-width:3; }
.modtab .ph-lit  { fill:#8d7fb4; }
.modtab[aria-selected="true"] .ph-disc { stroke:var(--violet); }
.modtab[aria-selected="true"] .ph-lit  { fill:var(--violet); }

.modpanel {
  background:var(--panel); border:1px solid var(--hair); border-top:0;
  padding:clamp(1.7rem,3.6vw,2.5rem);
}
.modpanel-phase {
  margin:0 0 .5rem; font-family:var(--sub); font-size:var(--caps-xxs);
  letter-spacing:.24em; text-transform:uppercase; color:var(--gilt);
}
.modpanel h4 {
  margin:0 0 .8rem; font-family:var(--display); font-weight:400;
  font-size:var(--step-1); line-height:1.12; font-kerning:none;
}
.modpanel > p { margin:0 0 1rem; }
.modpanel ul { list-style:none; margin:1.2rem 0 0; padding:0; }
.modpanel li {
  padding:.5rem 0 .5rem 1.6rem; position:relative;
  font-family:var(--sub); font-size:var(--caps-xs); letter-spacing:.04em;
  text-transform:uppercase; color:var(--muted);
  border-bottom:1px dotted var(--hair);
}
.modpanel li:last-child { border-bottom:0; }
.modpanel li::before { content:'✦'; position:absolute; left:0; color:var(--violet); }
@media (max-width:640px) {
  .modtabs-bar { flex-wrap:wrap; }
  .modtab { flex:1 0 calc(50% - 2px); }
}

/* ── Video testimonials (poster facade → Vimeo on request) ─────── */
.vid { position:relative; margin:0 auto 1.6rem; background:#151119; overflow:hidden; }
.vid--portrait { width:min(17rem,74%); aspect-ratio:9/16; border-radius:12px; }
.vid--wide     { width:min(34rem,92%); aspect-ratio:16/9; border-radius:10px; }
.vid iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.vid-open {
  position:absolute; inset:0; width:100%; height:100%; padding:0;
  border:0; background:none; cursor:pointer; display:block;
}
.vid-open img { width:100%; height:100%; object-fit:cover; display:block; }
.vid-cue {
  position:absolute; left:50%; top:50%; translate:-50% -50%;
  width:3.4rem; height:3.4rem; transition:scale .3s cubic-bezier(.2,.7,.3,1);
}
.vid-cue svg { width:100%; height:100%; }
.vid-cue circle { fill:rgba(20,16,24,.5); stroke:#fff; stroke-width:1.5; }
.vid-cue path { fill:#fff; }
.vid-open:hover .vid-cue, .vid-open:focus-visible .vid-cue { scale:1.12; }
.vid-label {
  position:absolute; left:0; right:0; bottom:.85rem;
  font-family:var(--sub); font-size:var(--caps-xxs); letter-spacing:.2em;
  text-transform:uppercase; color:#fff; text-shadow:0 2px 10px rgba(0,0,0,.7);
}
.win-card .vid { margin-bottom:1.3rem; }

@media (max-width:900px) {
  .kind-stage { min-height:0; padding-block:2rem; }
  .kind-stage img { position:static; margin:0 auto; }
  .kind-dial, .kind-figure, .kind-lotus--r { display:none; }
  .kind-lotus--l { width:8rem; margin-bottom:-2rem; }
  .kind-card { width:100%; }
}
@media (prefers-reduced-motion:reduce) {
  .intro-star, .kind-dial { animation:none; }
}

/* ═══════════════════════════════════════════════════════════════════
   SECTION-BY-SECTION AGAINST THE LIVE PAGE
   Placement below is taken from her published layout (1200px canvas),
   converted to percentages so it holds at every width.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Testimonial quotes ──────────────────────────────────────────
   Upright, not italic: the script face is beautiful but hard to read
   at length. Two points smaller and tighter leading, as asked. */
.big-quote p {
  font-family:var(--body); font-style:normal;
  font-size:calc(var(--quote-lg) - 2pt);
  line-height:1.5; margin:0 0 .75rem;
  letter-spacing:.005em;
}
.win-quote { font-style:normal; font-family:var(--body); line-height:1.5; }
.quote-who a {
  color:inherit; text-decoration:none;
  border-bottom:1px solid color-mix(in srgb, currentColor 45%, transparent);
  padding-bottom:1px; transition:border-color .25s ease, color .25s ease;
}
.quote-who a:hover { color:var(--ink); border-bottom-color:currentColor; }

/* ── Her phone frame around every portrait testimonial ───────────
   The live page mounts each vertical video inside this shell. */
.phone {
  position:relative; width:min(15.5rem,72%); margin:0 auto 1.5rem;
  aspect-ratio:460/909;
}
.phone::after {
  content:''; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:url('images/phone-frame.png') center/100% 100% no-repeat;
}
/* The screen window was measured off her own 460x909 plate after the
   opaque black fill was knocked out of it, so the video sits exactly
   where the glass is. */
.phone .vid--portrait {
  position:absolute; left:4.57%; top:1.21%; width:90.87%; height:97.25%;
  margin:0; border-radius:16px; aspect-ratio:auto; z-index:1;
}
.win-card .phone { margin-bottom:1.3rem; }

/* ── INTRODUCING: the silver star sits left of the wordmark ──────
   Live canvas: star centre x=266/1200, wordmark centred. */
.intro-mark { position:relative; display:block; min-height:clamp(6rem,13vw,9.5rem); }
.intro-star {
  position:absolute; left:2%; top:50%; translate:0 -50%;
  width:min(15rem,30%); height:auto; opacity:.5; z-index:0;
  animation:euTurn 140s linear infinite reverse;
}
.intro-word {
  position:relative; z-index:1; display:block;
  width:min(28rem,72%); height:auto; margin-inline:auto;
  top:50%; translate:0 -50%;
}

/* ── ONE OF A KIND: her true proportions ─────────────────────────
   dial  w=1134/1200 = 94%, centre x=538
   figure w=1221/1200 = 102%, centre x=730
   blooms centres x=76, 204, 842, 1282 */
.kind-dial   { width:94%;  top:-6%;   left:44.8%; translate:-50% 0; }
.kind-figure { width:102%; bottom:-6%; left:60.8%; translate:-50% 0; right:auto; }
.kind-lotus  { width:min(11rem,22%); z-index:3; }
.kind-lotus--l  { left:-8%;   bottom:-6%;  width:min(12rem,24%); }
.kind-lotus--l2 { left:9%;    bottom:2%;   width:min(7rem,14%); }
.kind-lotus--r  { left:64%;   bottom:14%;  width:min(13rem,26%); z-index:0; }
.kind-lotus--r2 { left:auto; right:-5%; bottom:4%; width:min(9rem,18%); }

/* ── Her gold twelve-point star heads each pillar ────────────────*/
.inc-star {
  display:block; width:2.1rem; height:auto; margin:0 0 .75rem;
}
.included--2up .inc-cell { text-align:left; }

/* ── Her own check mark ticks the "who this is for" list ─────────*/
.isnt-col--is li::before {
  content:''; position:absolute; left:0; top:.72rem;
  width:.78rem; height:.78rem;
  background:var(--violet);
  -webkit-mask:var(--tick) center/contain no-repeat;
          mask:var(--tick) center/contain no-repeat;
}

/* ── Jupiter turns beside the prosperity copy ────────────────────*/
.jupiter { margin:2.4rem auto .4rem; width:min(9rem,34%); text-align:center; }
.jupiter img { width:100%; height:auto; display:block; }
.jupiter figcaption {
  margin-top:.7rem; font-family:var(--sub); font-size:var(--caps-xxs);
  letter-spacing:.18em; text-transform:uppercase; color:var(--muted);
}

@media (max-width:900px) {
  .kind-lotus--l2, .kind-lotus--r2 { display:none; }
  .kind-lotus--r { display:none; }
}
@media (prefers-reduced-motion:reduce) { .intro-star { animation:none; } }

/* ═══════════════════════════════════════════════════════════════════
   CLOUDS, CONTRAST, AND THE CARDS
   Her live page carries nineteen cloud plates, many spilling 77-174%
   of the canvas. They are not decoration: they are what gives the page
   its depth, and in the hero they are what covers the foot of the
   goddess plate so she sits IN the sky rather than being cut by it.
   ═══════════════════════════════════════════════════════════════════ */

.cloudbank {
  position:absolute; inset:0; z-index:0; pointer-events:none;
  overflow:hidden; max-width:none !important; margin:0 !important;
}
.cloudbank--top  { z-index:2; bottom:auto; height:min(18rem,28%); }
.cloudbank--foot { top:auto; bottom:0; height:min(22rem,32%); }
.cloud {
  position:absolute; height:auto; opacity:.9;
  filter:drop-shadow(0 8px 26px rgba(20,16,40,.18));
}
/* hero: three at her 77% width, centres -4.9% / 49.1% / 66.7%,
   sitting low so they take the cut edge of the plate */
.hero--eu .cloudbank { z-index:4; }
.c-h1 { width:88%; left:-30%; bottom:-6%; opacity:.97; }
.c-h2 { width:82%; left:12%;  bottom:-14%; opacity:1; }
.c-h3 { width:58%; left:52%;  bottom:-6%;  opacity:.85; }
.c-h4 { width:60%; left:-22%; top:-6%;  opacity:.22; }
.c-h5 { width:56%; right:-20%; top:-4%; opacity:.18; }
.c-a1 { width:62%; left:-34%; top:2%;   opacity:.16; }
.c-a2 { width:52%; right:-26%; bottom:2%; opacity:.13; }
.c-b1 { width:66%; left:-32%; top:-6%;  opacity:.3; }
.c-b2 { width:58%; right:-28%; bottom:2%; opacity:.26; }
.c-c1 { width:70%; left:-35%; top:4%;   opacity:.26; }
.c-c2 { width:60%; right:-30%; top:44%; opacity:.22; }
.c-c3 { width:78%; left:14%; bottom:-24%; opacity:.18; }
.c-d1 { width:44%; left:-17%; bottom:-9%;  opacity:.5; }
.c-d2 { width:40%; left:20%;  bottom:-13%; opacity:.42; }
.c-d3 { width:44%; right:-18%; bottom:-8%; opacity:.46; }
.c-d4 { width:30%; right:8%;  bottom:-4%;  opacity:.3; }
.c-e1 { width:46%; left:-19%; bottom:-10%; opacity:.5; }
.c-e2 { width:44%; right:-18%; bottom:-9%; opacity:.46; }
.c-f1 { width:64%; left:-28%; bottom:-8%; opacity:.2; }
.c-f2 { width:68%; right:-30%; bottom:-12%; opacity:.16; }
.c-g1 { width:50%; left:-20%; bottom:-9%; opacity:.34; }
.c-g2 { width:46%; left:24%;  bottom:-13%; opacity:.28; }
.c-g3 { width:40%; right:-15%; bottom:-4%; opacity:.24; }

/* The hero plate and text ride above the weather */
.hero--eu .hero-grid { position:relative; z-index:5; }
.hero--eu .eu-plate  { z-index:1; }
.band--sand > *, .band--lavender > *, .band--fresco > * { position:relative; }
#calling > *, #clarity > *, #wakeup > *, #inside > *, #for > *,
#curriculum > *, #newjourney > *, #enrol > * { z-index:1; }
.cloudbank { z-index:0; }

/* ── Contrast between the opening sections ──────────────────────────
   Hero and calling were both on the same sand, so they read as one
   long stretch. Calling now takes her rose-nebula field, and the two
   sections that follow take the storm sky her live page uses there. */
#calling { background:#0b0a09 url('images/nebula.png') center 20%/cover; }
#calling::before { background:rgba(12,10,16,.76); }
#clarity, #wakeup {
  position:relative; max-width:none; overflow:hidden;
  background:#8f8a99 url('images/sky-storm.jpg') center/cover;
  border-block:1px solid rgba(60,52,74,.35);
}
#clarity > *, #wakeup > * { position:relative; z-index:1; }
#clarity::after, #wakeup::after {
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(246,244,250,.9), rgba(246,244,250,.82));
}
#wakeup::after { background:linear-gradient(180deg, rgba(226,220,242,.88), rgba(238,234,248,.8)); }

/* ── Jupiter rides the right edge on her own cloud ──────────────────*/
.jupiter {
  position:absolute; left:50%; top:16%; width:min(15rem,30%);
  /* an explicit box, or the absolutely-placed cloud has no height to
     resolve its bottom offset against and rides up to the top */
  aspect-ratio:1/1.34;
  margin:0 0 0 calc(50vw - 10rem); z-index:0; pointer-events:none;
}
.jupiter img { position:absolute; height:auto; }
.jup-orb   { width:66%; left:10%; top:0; opacity:.94;
             filter:drop-shadow(0 14px 34px rgba(40,30,70,.3)); }
.jup-cloud { width:118%; left:-16%; top:44%; opacity:.9; }
#blueprint { position:relative; }
#blueprint > *:not(.jupiter) { position:relative; z-index:1; }

/* ── INTRODUCING was being swallowed by the wordmark ────────────────*/
.eyebrow--intro { position:relative; z-index:3; margin-bottom:1.1rem; }
.intro-word { top:auto; translate:none; }
.intro-mark { display:flex; align-items:center; justify-content:center; min-height:0; }
.intro-star { top:52%; }

/* ── Her four blooms, at her four different sizes ───────────────────
   Live widths as a share of the 1200 canvas: 43.5% / 41.1% / 29.2% /
   19.1%, at centres 70.2% / 6.3% / 106.8% / 17.0%. */
.kind-lotus--r  { width:43.5%; left:48.4%;  bottom:12%;  z-index:0; }
.kind-lotus--l  { width:41.1%; left:-14.2%; bottom:-8%;  z-index:3; }
.kind-lotus--r2 { width:29.2%; left:auto; right:-21.4%; bottom:2%; z-index:3; }
.kind-lotus--l2 { width:19.1%; left:7.5%;   bottom:4%;   z-index:4; }

/* ── Two marble profiles face each other across "who this is for" ───*/
.band--facing {
  /* full-bleed so the profiles can run off the true page edges; the
     copy inside stays on the shell measure */
  position:relative; overflow:hidden; max-width:none;
}
.band--facing > *:not(.face):not(.seal-mark) {
  max-width:calc(var(--shell) - 2*var(--gutter)); margin-inline:auto;
}
.band--facing > *:not(.face):not(.seal-mark) { position:relative; z-index:2; }
.face { position:absolute; height:auto; z-index:0; opacity:.9; pointer-events:none; }
.face--l { width:min(19rem,25%); left:-6%;  top:6%; }
.face--r { width:min(20rem,26%); right:-7%; top:4%; transform:scaleX(-1); }
.seal-mark {
  position:absolute; right:3%; bottom:4%; width:min(7rem,13%); height:auto;
  z-index:3; opacity:.5; pointer-events:none;
  animation:euTurn 120s linear infinite;
}

/* ── Her gold glyphs ring the angel ─────────────────────────────────*/
.glyph-ring { position:absolute; inset:0; z-index:1; pointer-events:none; }
.zg { position:absolute; height:auto; opacity:.85;
      filter:drop-shadow(0 4px 14px rgba(0,0,0,.5)); }
.zg-1 { width:3.4%; left:16%;  top:16%; }
.zg-2 { width:3.8%; left:24%;  top:24%; }
.zg-3 { width:3.6%; right:28%; top:22%; }
.zg-4 { width:2.4%; left:28%;  top:8%;  }
.zg-5 { width:3.2%; right:16%; top:10%; }
.zg-6 { width:3%;   right:12%; top:19%; }
.zg-7 { width:3.4%; left:12%;  top:8%;  }
#newjourney { position:relative; overflow:hidden; }

/* ── The three cards, drawn rather than photographed ────────────────*/
.tcard {
  width:min(13.5rem,74%); height:auto; display:block; margin-inline:auto;
  filter:drop-shadow(0 16px 34px rgba(30,24,60,.34));
  transition:transform .45s cubic-bezier(.2,.7,.3,1), filter .35s ease;
  will-change:transform;
}
.tarot:hover .tcard { filter:drop-shadow(0 22px 44px rgba(30,24,60,.46)); }
.tnum  { font-family:'Heartbreak Eighties',Georgia,serif; font-size:23px; letter-spacing:5px; }
.tname { font-family:'Heartbreak Eighties',Georgia,serif; font-size:16.5px; letter-spacing:2.4px; }

@media (max-width:900px) {
  .face, .seal-mark, .jupiter { display:none; }
  .c-c3, .c-f1, .c-f2 { display:none; }
  .zg { display:none; }
}
@media (prefers-reduced-motion:reduce) { .seal-mark { animation:none; } }

/* Clouds deliberately overhang both edges; the page itself must never
   scroll sideways because of them. */
html, body { overflow-x:hidden; }
.hero--eu, #calling, #clarity, #wakeup, #introducing,
#inside, #for, #curriculum, #newjourney, #enrol { overflow:hidden; }

/* The hero bank spans the whole plate column and sits above it, so the
   foot of the goddess is inside the weather rather than cut by it. */
.cloudbank--hero {
  /* The weather belongs to the plate column: it takes the cut foot of
     the goddess without ever drifting across her headline. */
  position:absolute; left:-14%; right:52%; bottom:-4%; top:auto;
  height:min(24rem,52%); z-index:3; pointer-events:none; overflow:visible;
  -webkit-mask-image:linear-gradient(to right, #000 78%, transparent 100%);
          mask-image:linear-gradient(to right, #000 78%, transparent 100%);
}
.hero--eu .hero-text { position:relative; z-index:6; }

/* ═══════════════════════════════════════════════════════════════════
   THE FOUR REMAINING PLATES FROM HER LIVE PAGE
   ═══════════════════════════════════════════════════════════════════ */

/* ── Explore the Course: her black plate, the wordmark, the strip ── */
.course-hero {
  position:relative; max-width:none; overflow:hidden; text-align:center;
  background:#0b0a09 url('images/star-chart.png') center -8rem/56rem no-repeat;
  background-color:#0b0a09; border-block:1px solid #211d18;
  padding:clamp(3rem,6vw,4.5rem) var(--gutter) 0;
}
.course-hero::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse at 50% 0%, rgba(30,26,44,.0), rgba(11,10,9,.88) 72%);
}
.course-hero > * { position:relative; z-index:1; }
.eyebrow--onnight { color:#b9b1a3; }
.ch-word {
  display:block; width:min(46rem,86%); height:auto; margin:1rem auto 0;
}
.ch-star {
  position:absolute; left:6%; top:34%; width:min(15rem,26%); height:auto;
  z-index:2; animation:euTurn 110s linear infinite;
  filter:drop-shadow(0 10px 30px rgba(0,0,0,.6));
}
.ch-strip {
  position:relative; margin:1.6rem calc(-1 * var(--gutter)) 0; z-index:2;
  background:color-mix(in srgb, var(--violet) 55%, #6f66b8);
  padding:.8rem var(--gutter);
}
.ch-explore {
  margin:0; font-family:var(--quote); font-style:italic;
  font-size:clamp(1.3rem,2.6vw,1.9rem); color:#f6f3ec;
}
.ch-seal {
  position:absolute; right:8%; top:50%; translate:0 -50%;
  width:clamp(5.5rem,9vw,7.5rem); height:auto;
  animation:euTurn 90s linear infinite;
  filter:drop-shadow(0 6px 18px rgba(0,0,0,.5));
}
.imac { position:relative; margin:2.4rem auto 0; width:min(56rem,92%); }
.imac-shell { width:100%; height:auto; display:block; position:relative; z-index:1; }
/* the Loom sits on the glass: the shell is nearly all screen, the stand
   begins at ~78% height */
.imac .vid--loom {
  position:absolute; left:2.6%; top:2.4%; width:94.8%; height:75%;
  z-index:2; border-radius:6px; aspect-ratio:auto;
}
.vid--loom { background:#101016; }

/* ── Have a Q? bubble ────────────────────────────────────────────── */
.qa { position:fixed; left:1.1rem; bottom:1.1rem; z-index:60; }
.qa-bubble {
  display:block; position:relative; width:5.6rem; height:5.6rem;
  border-radius:50%; overflow:hidden;
  border:4px solid var(--lilac);
  box-shadow:0 10px 30px rgba(30,24,60,.4);
  transition:transform .3s cubic-bezier(.2,.7,.3,1);
}
.qa-bubble:hover { transform:scale(1.07); }
.qa-bubble img { width:100%; height:100%; object-fit:cover; display:block; }
.qa-label {
  position:absolute; left:0; right:0; top:50%; translate:0 -50%;
  font-family:var(--sub); font-size:.72rem; letter-spacing:.06em;
  color:#fff; font-weight:700; text-shadow:0 1px 8px rgba(0,0,0,.75);
  text-align:center; pointer-events:none;
}
.qa-close {
  position:absolute; right:-.3rem; top:-.3rem; z-index:2;
  width:1.5rem; height:1.5rem; border-radius:50%;
  /* the visible dot stays 24px; the touchable area does not */
  outline-offset:2px; border:0;
  background:var(--lilac); color:#37306b; font-size:1rem; line-height:1;
  cursor:pointer; box-shadow:0 3px 10px rgba(30,24,60,.35);
}
@media (max-width:760px) { .qa { left:.7rem; bottom:.7rem; } .qa-bubble { width:4.4rem; height:4.4rem; } }

/* ── The sign: chart disc, petals, the rose-tucked marble, cloud ── */
.sign-plate {
  position:relative; margin:0 auto 1.8rem; width:min(30rem,86%);
  aspect-ratio:1/0.92; pointer-events:none;
}
.sign-plate img { position:absolute; height:auto; }
.sp-chart { width:88%; left:6%; top:0; opacity:.5; animation:euTurn 240s linear infinite; }
.sp-lotus { width:64%; left:18%; top:16%; opacity:.95;
            filter:drop-shadow(0 12px 34px rgba(120,90,220,.35)); }
.sp-bust  { width:56%; left:22%; top:14%;
            filter:drop-shadow(0 18px 40px rgba(0,0,0,.6)); }
.sp-cloud { width:96%; left:2%; bottom:-6%; opacity:.98; }

/* ── The column and the statue with the glowing geode ────────────── */
#clarity > .pillar {
  /* the #clarity > * lifter would win on specificity and put the figure
     back into flow at the left; this scoped rule outranks it */
  position:absolute; left:auto; right:-2%; top:5%;
  width:min(17rem,26%); height:min(34rem,86%);
  /* above the storm-sky wash, clear of the centred copy */
  margin:0; z-index:1; pointer-events:none; opacity:1;
}
.pillar img { position:absolute; height:auto; }
.pillar-col    { width:74%; right:0; top:0; }
.pillar-statue { width:88%; left:0; top:34%; }
/* the geode floats just over her offered hand */
.pillar-geode  { width:26%; left:47%; top:36.5%; mix-blend-mode:screen;
                 filter:drop-shadow(0 0 18px rgba(140,120,255,.8)); }
#clarity .pillar ~ * { position:relative; z-index:1; }
@media (max-width:900px) { .pillar { display:none; } .ch-star { display:none; } }
@media (prefers-reduced-motion:reduce) { .ch-seal, .ch-star, .sp-chart { animation:none; } }

/* ═══════════════════════════════════════════════════════════════════
   CORRECTIONS PASS
   ═══════════════════════════════════════════════════════════════════ */

/* 1 · The hero headline was running too large for its column */
.hero--eu h1 { font-size:clamp(2rem, 1.35rem + 2.3vw, 2.95rem); }

/* 2 · The hero cloudbank was cut square at its left edge. Feather both
       sides so the weather dissolves instead of ending. */
.cloudbank--hero {
  -webkit-mask-image:linear-gradient(to right, transparent 0%, #000 12%, #000 78%, transparent 100%);
          mask-image:linear-gradient(to right, transparent 0%, #000 12%, #000 78%, transparent 100%);
}

/* 3 · The calling section reads darker and softer, so her copy lifts
       clean off it. The blur is on the ground only, never the type. */
#calling::before {
  background:rgba(8,7,12,.86);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
}
#calling { background-position:center 26%; }

/* 4 · The column and statue grow 15% and drop so their foot lands on
       the section seam: no cut-off, a clean hand-off to what follows. */
#clarity > .pillar {
  width:min(19.6rem,30%); height:min(39rem,99%);
  top:auto; bottom:0; right:-2%;
}
.pillar-col    { width:74%; right:0; bottom:14%; top:auto; }
.pillar-statue { width:88%; left:0;  bottom:0;   top:auto; }
.pillar-geode  { width:26%; left:47%; bottom:46%; top:auto; }

/* 5 · The cards lift and float under the hand */
.tarot .tcard { transition:transform .5s cubic-bezier(.2,.7,.3,1), filter .4s ease; }
.tarot:hover .tcard { transform:translateY(-10px); }

/* 6 · Jupiter's weather sits in FRONT of the planet and at its foot,
       veiling it rather than hiding behind it. */
.jupiter { z-index:0; }
.jup-orb    { width:70%; left:8%; top:0; z-index:0; }
.jup-cloud  { width:120%; left:-20%; top:auto; bottom:24%; z-index:1; opacity:.96; }
.jup-cloud2 { width:82%;  left:26%;  top:auto; bottom:12%; z-index:2; opacity:.85; }

/* 7 · The seal now carries a full ring of text */
.seal text { letter-spacing:.02em; }

/* 8 · The silver star was almost invisible */
.intro-star { opacity:.92; }

/* 9 · Mist of varied shape and scale around the reclining marble.
       The card is lifted above every layer so the copy always wins. */
.kind-mist { position:absolute; inset:0; z-index:3; pointer-events:none; }
.kind-mist img { position:absolute; height:auto; }
/* each one takes a different hard edge of the marble: the left end,
   the plinth line, the right end, the whole base, and the shoulder */
.km-1 { width:60%; left:-20%;  bottom:2%;   opacity:1; }
.km-2 { width:86%; left:8%;    bottom:-6%;  opacity:.92; }
.km-3 { width:52%; right:-16%; bottom:6%;   opacity:1; }
.km-4 { width:104%; left:-2%;  bottom:-10%; opacity:.72; }
.km-5 { width:40%; right:4%;   bottom:22%;  opacity:.85; }
.kind-card { z-index:6; }
.kind-lotus { z-index:4; }
.kind-lotus--r { z-index:2; }

/* 10 · The two profiles face each other and bleed off both edges, at
        her live proportions (each ~48.6% of canvas, hung off-page).
        Neither needs mirroring: each already looks toward the centre. */
.face--l { width:31%; left:-9%;  right:auto; top:auto; bottom:0; transform:none; }
.face--r { width:31%; left:auto; right:-9%; top:auto; bottom:0; transform:none; }
.band--facing { padding-bottom:clamp(3.4rem,7vw,6rem); }

/* 11 · The walkthrough sits behind the plate; the shell takes no
        pointer events so the play control underneath still answers. */
.imac { position:relative; }
.imac-shell {
  position:absolute; inset:0; width:100%; height:auto;
  z-index:2; pointer-events:none;
}
.imac .vid--loom {
  position:absolute; left:2.61%; top:3.43%; width:94.55%; height:65.84%;
  z-index:1; border-radius:2px; aspect-ratio:auto; background:#0d0d12;
}
.imac::after { content:''; display:block; padding-top:76.3%; }

/* 12 · The disc behind the wordmark: half the opacity, a third smaller */
.course-hero { background-size:39rem; background-position:center -5rem; }
.course-hero::before {
  background:radial-gradient(ellipse at 50% 0%, rgba(30,26,44,.35), rgba(11,10,9,.92) 70%);
}

/* 13 · More weather at the foot of the sign, taking her cut edge */
.sp-cloud  { width:96%;  left:2%;    bottom:2%;  opacity:.98; z-index:4; }
.sp-cloud2 { width:62%;  left:-16%;  bottom:6%;  opacity:.92; z-index:5; }
.sp-cloud3 { width:104%; left:-2%;   bottom:-2%; opacity:.8;  z-index:5; }
.sp-cloud4 { width:88%;  right:-14%; bottom:8%;  opacity:.7;  z-index:4; }
.sign-plate { aspect-ratio:1/0.98; }
/* the weather stays inside the plate; every line of copy sits above it */
#decision > *:not(.sign-plate) { position:relative; z-index:6; }

@media (max-width:900px) {
  .face--l, .face--r { display:none; }
  .kind-mist { display:none; }
}

/* ═══════════════════════════════════════════════════════════════════
   THREE MORE
   ═══════════════════════════════════════════════════════════════════ */

/* · The chart disc gets its own layer so it can hold a true 20%.
     As a background-image its opacity was only ever faked by the
     vignette sitting on top of it. */
.course-hero { background:#0b0a09; }
.course-hero::before {
  background:url('images/star-chart.png') center -5rem/39rem no-repeat;
  opacity:.2;
}
.course-hero::after {
  content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:radial-gradient(ellipse at 50% 0%, rgba(11,10,9,0), rgba(11,10,9,.72) 78%);
}

/* · cloud-band and cloud-veil are cropped strips: their bottom edge is
     a hard cut in the source. Feather it wherever they are used. */
.km-2, .km-4, .cloud-strip {
  -webkit-mask-image:linear-gradient(to bottom, #000 52%, transparent 98%);
          mask-image:linear-gradient(to bottom, #000 52%, transparent 98%);
}

/* · The sign plate: only the feathered puff, at four different scales,
     two of them mirrored so no silhouette repeats. */
.sp-cloud  { width:96%;  left:2%;    bottom:3%;  opacity:.98; z-index:4; }
.sp-cloud2 { width:58%;  left:-15%;  bottom:7%;  opacity:.94; z-index:5; transform:scaleX(-1); }
.sp-cloud3 { width:72%;  left:20%;   bottom:-1%; opacity:.9;  z-index:5; }
.sp-cloud4 { width:52%;  right:-12%; bottom:9%;  opacity:.86; z-index:4; transform:scaleX(-1); }

/* · #decision and #enrol were the same sand back to back. The decision
     now stands on her storm sky in a deep violet-grey, the way her live
     page sets a grey-violet plate before the black pricing block. */
#decision {
  background:#3a3546 url('images/sky-storm.jpg') center/cover;
  border-block:1px solid #2b2735;
}
#decision::before { background:rgba(46,41,60,.74); }

/* ═══════════════════════════════════════════════════════════════════
   THE BOARD — her students' messages, pinned rather than pasted
   Two flat scans on an empty field read as an afterthought. Given a
   gold star behind, a reaching marble hand, tape at the corners and a
   line of her own on either side, they read as evidence.
   ═══════════════════════════════════════════════════════════════════ */
.board {
  position:relative; margin:clamp(2.6rem,6vw,4.4rem) auto 0;
  max-width:54rem; padding:clamp(2rem,4vw,3.2rem) 0 0;
}
.board-star {
  position:absolute; left:50%; top:1%; translate:-50% 0;
  width:min(22rem,42%); height:auto; z-index:0; opacity:.16;
  animation:euTurn 160s linear infinite;
}
.board-hand {
  position:absolute; right:-7%; bottom:14%; width:min(9rem,17%);
  height:auto; z-index:4; opacity:.95; pointer-events:none;
  transform:rotate(14deg);
  filter:drop-shadow(0 14px 30px rgba(40,28,80,.3));
}
.board-eyebrow {
  position:relative; z-index:2; margin:0 0 .5rem;
  font-family:var(--sub); font-size:var(--caps-xxs);
  letter-spacing:.28em; text-transform:uppercase; color:var(--violet);
}
.board-head {
  position:relative; z-index:2; margin:0 0 2rem;
  font-family:var(--display); font-weight:400;
  font-size:var(--step-1); line-height:1.1; font-kerning:none;
}
.receipts {
  position:relative; z-index:3; display:flex; justify-content:center;
  align-items:flex-start; gap:clamp(.5rem,2vw,1.6rem); flex-wrap:nowrap;
  margin:0;
}
.slip {
  position:relative; margin:0; background:#fff; padding:.55rem;
  box-shadow:0 20px 46px rgba(38,26,82,.24), 0 2px 6px rgba(38,26,82,.14);
  transition:transform .45s cubic-bezier(.2,.7,.3,1), box-shadow .45s ease;
}
.slip img { width:100%; height:auto; display:block; }
.slip--a { width:min(17rem,38%); rotate:-3.4deg; margin-top:1.6rem; z-index:2; }
.slip--b { width:min(22rem,46%); rotate:2.2deg;  margin-left:-1.4rem; z-index:1; }
.slip:hover {
  rotate:0deg; transform:translateY(-8px) scale(1.02); z-index:5;
  box-shadow:0 30px 60px rgba(38,26,82,.32);
}
/* the tape: two translucent strips per slip, at opposing corners */
.tape {
  position:absolute; width:4.6rem; height:1.35rem; z-index:2;
  background:linear-gradient(180deg, rgba(255,255,255,.62), rgba(226,218,255,.5));
  box-shadow:0 1px 3px rgba(40,28,80,.16);
}
.tape::before, .tape::after {
  content:''; position:absolute; top:0; bottom:0; width:5px;
  background:repeating-linear-gradient(90deg, rgba(255,255,255,.55) 0 2px, transparent 2px 4px);
}
.tape::before { left:0; } .tape::after { right:0; }
.tape--tl { left:-1.5rem; top:1.1rem;  rotate:-38deg; }
.tape--br { right:-1.5rem; bottom:1.1rem; rotate:-38deg; }
.tape--tr { right:-1.5rem; top:1.1rem;  rotate:38deg; }
.tape--bl { left:-1.5rem; bottom:1.1rem; rotate:38deg; }
.board-foot {
  position:relative; z-index:2; margin:2.2rem auto 0; max-width:30rem;
  font-family:var(--quote); font-style:italic; font-size:var(--quote-md);
  color:var(--muted);
}
@media (max-width:760px) {
  .receipts { flex-wrap:wrap; gap:1.8rem; }
  .slip--a, .slip--b { width:min(17rem,84%); rotate:0deg; margin:0; }
  .board-hand { display:none; }
}
@media (prefers-reduced-motion:reduce) { .board-star { animation:none; } }

/* ═══════════════════════════════════════════════════════════════════
   THE RECLINING MARBLE — the real cause of the cut-off
   Her source plate is cropped hard: the bottom edge is fully opaque
   (alpha 255) and the right edge nearly so (97). No amount of cloud
   reliably hides a straight edge, so the plate itself is feathered
   first, and the mist then sits on the softened seam.
   ═══════════════════════════════════════════════════════════════════ */
.kind-figure {
  -webkit-mask-image:
    linear-gradient(to bottom, #000 62%, transparent 99%),
    linear-gradient(to right,  #000 84%, transparent 100%);
  -webkit-mask-composite:source-in;
          mask-image:
    linear-gradient(to bottom, #000 62%, transparent 99%),
    linear-gradient(to right,  #000 84%, transparent 100%);
          mask-composite:intersect;
}

/* The blooms clear her face. The left plate now sits at her shoulder
   and below, never across the profile. */
.kind-lotus--l  { width:41.1%; left:-15%;  bottom:-26%; z-index:3; }
.kind-lotus--l2 { width:19.1%; left:9%;    bottom:-12%; z-index:4; }
.kind-lotus--r  { width:43.5%; left:50%;   bottom:6%;   z-index:2; }
.kind-lotus--r2 { width:29.2%; left:auto; right:-20%; bottom:-8%; z-index:3; }

/* Mist sits along the softened bottom seam, five different scales,
   three of them mirrored so no silhouette repeats. */
.km-1 { width:56%;  left:-18%;  bottom:-8%;  opacity:1;   transform:scaleX(-1); }
.km-2 { width:78%;  left:10%;   bottom:-14%; opacity:.95; }
.km-3 { width:46%;  right:-14%; bottom:-6%;  opacity:1;   transform:scaleX(-1); }
.km-4 { width:96%;  left:-4%;   bottom:-20%; opacity:.8;  }
.km-5 { width:34%;  right:8%;   bottom:4%;   opacity:.9;  transform:scaleX(-1); }
.kind-mist { z-index:5; }
.kind-card { z-index:7; }

/* ═══════════════════════════════════════════════════════════════════
   HER OWN DECK
   The three emblems are replaced by her photographed cards, cut from
   the wood, straightened, corner-rounded and given back the colour a
   flat scan loses. They still lift and float under the hand.
   ═══════════════════════════════════════════════════════════════════ */
img.tcard {
  width:min(14rem,78%); height:auto; display:block; margin-inline:auto;
  /* the rounding lives in the image's own alpha now; a CSS radius here
     was rounding the transparent canvas, which is what showed as white
     slivers at the corners of the old rectangular files */
  filter:drop-shadow(0 16px 32px rgba(40,30,70,.3));
  transition:transform .5s cubic-bezier(.2,.7,.3,1), filter .4s ease;
  will-change:transform;
}
.tarot:hover img.tcard {
  transform:translateY(-10px);
  filter:drop-shadow(0 26px 48px rgba(40,30,70,.42));
}
.deck-credit {
  margin:2rem auto 0; max-width:28rem;
  font-family:var(--sub); font-size:var(--caps-xxs);
  letter-spacing:.1em; color:var(--muted); line-height:1.8;
}
.deck-credit em { font-family:var(--quote); font-style:italic; letter-spacing:.02em; }


/* The explore line is near-white on the periwinkle band: 2.95:1. */
html[data-sect="nocturnal"] .ch-explore { color:#1f1b30; }

/* ═══════════════════════════════════════════════════════════════════
   THE CROSSING · CORNERS AND THE FRESCO HEADER

   The page's design is unchanged. Two things only, matching the new
   pages: the site's radius system (buttons and tabs are pills, cards
   and boxes 14px, framed media 12px), and her fresco hung behind the
   masthead, dissolving before the hero. The device mockups (the iMac,
   the phones) and the full-bleed bands keep their own edges: rounding
   scenery reads as a mistake.
   ═══════════════════════════════════════════════════════════════════ */

/* pills. (Not the module tabs: those are folder tabs whose active one
   docks into the panel below, and a full pill broke that shape. Not
   .vid-open either: it is the invisible full-cover play overlay.) */
.btn { border-radius:999px; }

/* the module tabs keep their folder metaphor, in the site's corners:
   rounded shoulders, a flat foot that docks into the panel. The panel
   squares its top so an end tab can merge without the corner's curve
   cutting a notch into it, and rounds its foot like every other card. */
.modtab { border-radius:12px 12px 0 0; }
.modpanel { border-radius:0 0 14px 14px; }

/* cards and boxes */
.win-card, .enrol-card, .isnt-col, .inc-cell, .doubt,
.slip, .faq-list details, .ec-strip { border-radius:14px; }

/* framed media */
.vid--wide, .win-card img, .modpanel img { border-radius:12px; }

/* ── the fresco, behind the masthead ── */
body { position:relative; }
body::before {
  content:''; position:absolute; left:0; right:0; top:0; z-index:0;
  aspect-ratio:1400/933; pointer-events:none;
  background:url('/shared/images/fresco.png') top center / 100% auto no-repeat;
  opacity:.11;
  -webkit-mask-image:linear-gradient(180deg, #000 0%, #000 36%, transparent 82%);
          mask-image:linear-gradient(180deg, #000 0%, #000 36%, transparent 82%);
}
html[data-sect="nocturnal"] body::before { opacity:.065; filter:invert(1); }
.topbar, main, .sitefoot { position:relative; z-index:1; }

@media (max-width:640px) {
  .qa-close { width:2.2rem; height:2.2rem; right:-.55rem; top:-.55rem; }
}