/* ═══════════════════════════════════════════════════════════════════
   lilith-course — 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; }
}

/* ═══════════════════════════════════════════════════════════════
   class-shop — page-specific
   ═══════════════════════════════════════════════════════════════ */

/* ── What every workshop includes ───────────────────────────── */
.included {
  display:grid; grid-template-columns:repeat(auto-fit, minmax(13rem, 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; }

/* ── The shelf: grouped workshop cards ──────────────────────── */
.shelf { max-width:var(--shell); }

.shelf-group { margin-top:clamp(2.6rem,5vw,3.6rem); text-align:left; }

.shelf-group:first-of-type { margin-top:2.6rem; }

.shelf-group-head {
  text-align:center; font-family:var(--sub); font-size:var(--caps-xs);
  letter-spacing:.22em; text-transform:uppercase; color:var(--gilt);
  margin:0 0 1.3rem;
}

.shelf-grid {
  display:grid; grid-template-columns:repeat(auto-fit, minmax(19.5rem, 1fr));
  gap:clamp(1.2rem,3vw,1.8rem);
}

.ws-card {
  background:var(--panel); padding:clamp(1.6rem,3vw,2.1rem);
  border:1px solid var(--hair); display:flex; flex-direction:column;
  scroll-margin-top:6rem; transition:background .35s, border-color .25s, transform .25s;
}

.ws-card:hover { border-color:color-mix(in srgb, var(--gilt) 65%, transparent); transform:translateY(-3px); }

/* The series gets a second rule around it, the way a boxed set sits apart. */
.ws-card--feature { outline:1px solid var(--hair); outline-offset:5px; }

.ws-head { display:flex; align-items:baseline; gap:.8rem; margin-bottom:.8rem; }

.ws-glyph { font-size:1.4rem; line-height:1; color:var(--gilt); }

.ws-kicker {
  font-family:var(--sub); font-size:var(--caps-xxs); letter-spacing:.2em;
  text-transform:uppercase; color:var(--muted); margin:0;
}

.ws-card h3 {
  font-family:var(--display); font-size:var(--step-1); font-weight:400;
  margin:0 0 .5rem; line-height:1.08; font-kerning:none;
}

.ws-tagline {
  font-family:var(--quote); font-style:italic; font-size:var(--quote-md);
  color:var(--ink); margin:0 0 .9rem;
}

.ws-card > p:not(.ws-tagline):not(.ws-best) { font-size:.95em; margin:0 0 1rem; }

.ws-best {
  font-family:var(--sub); font-size:var(--caps-xxs); letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted); margin:0 0 1.4rem; line-height:1.7;
}

.ws-foot {
  margin-top:auto; border-top:1px solid var(--hair); padding-top:1.1rem;
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; flex-wrap:wrap;
}

.ws-price {
  font-family:var(--display); font-size:var(--step-1); color:var(--gilt);
  margin:0; line-height:1; font-kerning:none;
}

.ws-price-note {
  display:block; font-family:var(--sub); font-size:var(--caps-xxs);
  letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
  margin-top:.35rem;
}

.btn--sm { padding:.7rem 1.3rem; font-size:var(--caps-xs); letter-spacing:.16em; }

/* A group holding a single card keeps the same column measure as its
   neighbours rather than stretching the full shell width. */
.shelf-grid > .ws-card:only-child { max-width:33rem; margin-inline:auto; }

/* ── Closing ─────────────────────────────────────────────────── */
.closing-actions {
  display:flex; align-items:baseline; justify-content:center;
  gap:1.6rem; flex-wrap:wrap; margin-top:.5rem;
}

@media (max-width:760px) {
  .shelf-grid { grid-template-columns:1fr; }
  .included { grid-template-columns:1fr; }
  .ws-foot { flex-direction:column; align-items:flex-start; gap:.9rem; }
}

/* ── 昴 The sky plate hero ────────────────────────────────────
   A star-atlas plate of the Pleiades in place of a portrait.
   Seven sisters, seven classes; the asterism draws itself in on
   load, the stars breathe, and each star is a link that carries
   you to her class (which kindles gold on arrival, below). */
.hero--sky .hero-grid { grid-template-columns:1fr 1.08fr; }

.sky-plate { margin:0; }

.sky-map { display:block; width:100%; height:auto; }

.sky-frame { fill:none; stroke:var(--hair); stroke-width:1; }

.sky-tick path { fill:none; stroke:var(--gilt); stroke-width:1.2; opacity:.75; }

.sky-plate-title, .sky-plate-no {
  font-family:var(--sub); font-size:7.5px; letter-spacing:.18em;
  text-transform:uppercase; fill:var(--muted);
}

.sky-mansion {
  font-family:"Songti SC","Songti TC","Noto Serif SC","SimSun",serif;
  font-size:120px; fill:var(--ink); opacity:.05;
}

.sky-grat path { fill:none; stroke:var(--hair); stroke-width:.6; opacity:.8; }

.sky-ecliptic { fill:none; stroke:var(--gilt); stroke-width:.7; stroke-dasharray:2 5; opacity:.5; }

.sky-field circle { fill:var(--dusk); opacity:.5; }

.sky-lines path {
  fill:none; stroke:var(--gilt); stroke-width:.8; opacity:.6;
  stroke-dasharray:1.1 1.1; stroke-dashoffset:1.15;
  animation:skyLine .9s ease var(--ld,0s) forwards;
}

@keyframes skyLine { to { stroke-dashoffset:.05; } }

.plei { cursor:pointer; outline:none; }

.plei .star-halo {
  fill:var(--gilt); opacity:.12;
  transition:opacity .3s ease;
}

.plei:hover .star-halo, .plei:focus .star-halo { opacity:.4; }

.plei .star-core {
  fill:var(--gilt); stroke:color-mix(in srgb, var(--wine) 40%, var(--gilt));
  stroke-width:.4;
  transform-box:fill-box; transform-origin:center;
  animation:pleiTwinkle var(--tw,3.2s) ease-in-out var(--td,0s) infinite alternate;
}

.plei--bright .star-core { animation-duration:4.2s; }

.star-cross { fill:none; stroke:var(--gilt); stroke-width:.5; opacity:.55; }

@keyframes pleiTwinkle {
  from { opacity:.7; transform:scale(.92); }
  to   { opacity:1;  transform:scale(1.08); }
}

.plei-name {
  font-family:var(--sub); font-size:8.5px; letter-spacing:.16em;
  text-transform:uppercase; fill:color-mix(in srgb, var(--ink) 80%, transparent);
  transition:fill .25s ease;
}

.plei-class {
  font-family:var(--sub); font-size:7px; letter-spacing:.12em;
  text-transform:uppercase; fill:var(--muted);
}

.plei:hover .plei-name, .plei:focus .plei-name { fill:var(--wine); }

/* The seventh star is a door, not a class: Alcyone holds no workshop, she
   opens onto the long courses. She gets a slow breathing gate-ring and a
   road running off the edge of the plate toward the deeper orbits. */
.star-gate {
  fill:none; stroke:var(--gilt); stroke-width:.6;
  stroke-dasharray:3 4; opacity:.45;
  transform-box:fill-box; transform-origin:center;
  animation:gateBreathe 6s ease-in-out infinite;
}

@keyframes gateBreathe {
  0%, 100% { opacity:.3;  transform:scale(.94) rotate(0deg); }
  50%      { opacity:.62; transform:scale(1.05) rotate(20deg); }
}

.plei--door:hover .star-gate, .plei--door:focus .star-gate {
  opacity:.85; animation-duration:2.6s;
}

.plei--door .plei-class { fill:var(--wine); letter-spacing:.16em; }

.sky-road {
  fill:none; stroke:var(--gilt); stroke-width:.7; opacity:.4;
  stroke-dasharray:1.5 3; stroke-dashoffset:4.5;
  animation:skyLine 1.4s ease 1.6s forwards;
}

.hero--sky:has(.plei--door:hover) .sky-road { opacity:.85; }

.sky-caption {
  margin-top:1rem; text-align:center;
  font-family:var(--sub); font-size:var(--caps-xxs); letter-spacing:.2em;
  text-transform:uppercase; color:var(--muted);
}

/* ── Star chips on the shelf cards ───────────────────────────── */
.ws-star {
  font-family:var(--sub); font-size:var(--caps-xs); letter-spacing:.22em;
  text-transform:uppercase; color:var(--gilt); cursor:help;
}

/* Arriving from the sky: the chosen card kindles like a lit lamp. */
.ws-card.is-kindled { animation:cardKindle 1.9s ease-out 1; }

@keyframes cardKindle {
  0%   { box-shadow:0 0 0 0 transparent; border-color:var(--hair); }
  22%  { box-shadow:0 0 0 3px color-mix(in srgb, var(--gilt) 55%, transparent),
                    0 0 36px color-mix(in srgb, var(--gilt) 40%, transparent);
         border-color:var(--gilt); }
  100% { box-shadow:0 0 0 0 transparent; border-color:var(--hair); }
}

/* ── The seventh star: handoff to the courses ────────────────── */
.seventh-note {
  max-width:30rem; margin:1.4rem auto 0;
  font-family:var(--sub); font-size:var(--caps-xs); letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted);
}

@media (max-width:900px) {
  .hero--sky .hero-grid { grid-template-columns:1fr; }
  .hero--sky .sky-plate { max-width:27rem; margin-inline:auto; order:2; }
}

@media (prefers-reduced-motion:reduce) {
  .sky-lines path { stroke-dashoffset:.05; animation:none; }
  .plei .star-core { animation:none; }
  .star-gate { animation:none; opacity:.5; }
  .sky-road { stroke-dashoffset:0; animation:none; }
  .ws-card.is-kindled { animation:none; }
}

/* ═══════════════════════════════════════════════════════════════════
   THE ORRERY — three long orbits
   A workshop is a fixed star; a course is a body on a long orbit. Each
   of the three courses is drawn as a real point or body with its real
   period: the Lot of Fortune is Ascendant-derived and so completes a
   circuit every day, Black Moon Lilith takes 8.85 years, Chiron takes
   50.4. The animation durations are scaled to keep that ratio legible
   without making the outer one look frozen.
   ═══════════════════════════════════════════════════════════════════ */
.hero--orrery .hero-grid { grid-template-columns:1fr 1.08fr; }

.orrery-plate { margin:0; }

.orrery { display:block; width:100%; height:auto; overflow:visible; }

.orrery-field circle { fill:var(--dusk); opacity:.5; }

.orb {
  fill:none; stroke:var(--hair); stroke-width:.8;
  transition:stroke .3s ease, opacity .3s ease;
}

.orb--fortune { stroke-dasharray:1.5 2.5; opacity:.9; }

.orb--lilith  { stroke-dasharray:3 4; opacity:.8; }

.orb--chiron  { stroke-dasharray:5 6; opacity:.7; }

.centre-glow { fill:var(--gilt); opacity:.1; }

.centre-dot  { fill:var(--wine); }

.centre-label {
  font-family:var(--sub); font-size:7px; letter-spacing:.18em;
  text-transform:uppercase; fill:var(--muted);
}

/* Each body walks its own ellipse. offset-path keeps it exactly on the
   drawn orbit rather than approximating with a rotation. */
.body { cursor:pointer; outline:none; }

.body .body-mover {
  offset-rotate:0deg;
  animation:orbitRun linear infinite;
}

.body--fortune .body-mover {
  offset-path:path("M112,150 A58,34 0 1,1 228,150 A58,34 0 1,1 112,150");
  animation-duration:16s;
}

.body--lilith .body-mover {
  offset-path:path("M70,150 A100,60 0 1,1 270,150 A100,60 0 1,1 70,150");
  animation-duration:38s; animation-delay:-9s;
}

.body--chiron .body-mover {
  offset-path:path("M24,150 A146,92 0 1,1 316,150 A146,92 0 1,1 24,150");
  animation-duration:84s; animation-delay:-31s;
}

@keyframes orbitRun { to { offset-distance:100%; } }

.body-halo { fill:var(--gilt); opacity:.14; transition:opacity .3s ease; }

.body-glyph {
  font-size:13px; fill:var(--wine);
  transition:fill .25s ease;
}

.body:hover .body-halo, .body:focus .body-halo,
.body.is-lit .body-halo { opacity:.42; }

.body:hover .body-glyph, .body:focus .body-glyph { fill:var(--ink); }

/* Hovering a body brightens its own orbit and nothing else. */
.orrery:has(.body--fortune:hover) .orb--fortune,
.orrery:has(.body--lilith:hover)  .orb--lilith,
.orrery:has(.body--chiron:hover)  .orb--chiron,
.orrery.lit-fortune .orb--fortune,
.orrery.lit-lilith  .orb--lilith,
.orrery.lit-chiron  .orb--chiron { stroke:var(--gilt); opacity:1; }

/* ── Key beneath the plate ───────────────────────────────────────── */
.orrery-key {
  list-style:none; margin:1rem 0 0; padding:0;
  display:grid; grid-template-columns:repeat(3,1fr); gap:.5rem;
}

.orrery-key a {
  display:block; text-align:center; text-decoration:none;
  padding:.55rem .3rem; border:1px solid transparent; border-radius:2px;
  transition:border-color .25s ease, background .25s ease;
}

.orrery-key a:hover, .orrery-key a:focus {
  border-color:var(--hair); background:color-mix(in srgb, var(--gilt) 7%, transparent);
}

.key-glyph { display:block; font-size:1.1rem; color:var(--wine); line-height:1; }

.key-name {
  display:block; margin-top:.35rem;
  font-family:var(--sub); font-size:var(--caps-xxs); letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink);
}

.key-period {
  display:block; font-family:var(--sub); font-size:var(--caps-xxs);
  letter-spacing:.12em; text-transform:uppercase; color:var(--muted);
}

/* ── Fixed or wandering: the two shelves side by side ────────────── */
.compare {
  margin-top:2.6rem;
  display:grid; grid-template-columns:1fr auto 1fr;
  gap:clamp(1rem,3vw,2.2rem); align-items:center;
  max-width:52rem; margin-inline:auto;
}

.compare-col {
  text-align:left; padding:1.8rem 1.6rem;
  border:1px solid var(--hair); background:var(--paper);
}

.compare-col--lit {
  border-color:color-mix(in srgb, var(--gilt) 55%, var(--hair));
  box-shadow:0 0 30px color-mix(in srgb, var(--gilt) 12%, transparent);
}

.compare-kick {
  margin:0 0 .3rem; font-family:var(--sub); font-size:var(--caps-xxs);
  letter-spacing:.2em; text-transform:uppercase; color:var(--muted);
}

.compare-col h3 { margin:0 0 .9rem; }

.compare-list { list-style:none; margin:0 0 1.3rem; padding:0; }

.compare-list li {
  padding:.42rem 0 .42rem 1.1rem; position:relative;
  border-bottom:1px solid var(--hair); font-size:.94em;
}

.compare-list li:last-child { border-bottom:0; }

.compare-list li::before {
  content:"✦"; position:absolute; left:0; top:.42rem;
  color:var(--gilt); font-size:.7em;
}

.compare-vs { color:var(--gilt); font-size:1.1rem; opacity:.7; }

.btn--ghost {
  background:transparent; color:var(--ink);
  border:1px solid var(--hair);
}

.btn--ghost:hover { border-color:var(--gilt); background:transparent; }

/* ── The three courses ───────────────────────────────────────────── */
.course {
  display:grid; grid-template-columns:8.5rem 1fr;
  gap:clamp(1.2rem,3vw,2.4rem); align-items:start;
  text-align:left; max-width:50rem; margin:0 auto 2.2rem;
  padding:2rem 1.9rem; border:1px solid var(--hair); background:var(--paper);
  transition:border-color .3s ease, box-shadow .3s ease;
}

.course:hover {
  border-color:color-mix(in srgb, var(--gilt) 50%, var(--hair));
  box-shadow:0 0 34px color-mix(in srgb, var(--gilt) 11%, transparent);
}

.course-mark { text-align:center; padding-top:.3rem; }

.course-glyph {
  display:block; font-size:2.6rem; line-height:1; color:var(--wine);
}

.course-period {
  display:block; margin-top:.6rem;
  font-family:var(--sub); font-size:var(--caps-xxs); letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted); line-height:1.5;
}

.course-kicker {
  margin:0 0 .35rem; font-family:var(--sub); font-size:var(--caps-xxs);
  letter-spacing:.2em; text-transform:uppercase; color:var(--gilt);
}

.course-body h3 { margin:0 0 .6rem; }

.course-tagline { font-family:var(--display-it,var(--body)); font-style:italic; }

.course-best {
  margin-top:1rem; font-family:var(--sub); font-size:var(--caps-xxs);
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
}

.course-foot {
  margin-top:1.4rem; padding-top:1.1rem; border-top:1px solid var(--hair);
  display:flex; flex-wrap:wrap; gap:1rem; align-items:center;
  justify-content:space-between;
}

.course-price { margin:0; font-size:1.5rem; font-weight:600; }

.course-price-note {
  display:block; font-family:var(--sub); font-size:var(--caps-xxs);
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
  font-weight:400;
}

/* ── Love notes ──────────────────────────────────────────────────── */
.notes-grid {
  margin-top:2.4rem; display:grid; gap:1.4rem;
  grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));
  max-width:52rem; margin-inline:auto; text-align:left;
}

.note {
  margin:0; padding:1.6rem 1.5rem;
  border:1px solid var(--hair); background:var(--paper);
}

.note blockquote { margin:0; }

.note blockquote p { margin:0; font-size:.95em; }

.note figcaption { margin-top:1rem; }

.note-who {
  display:block; font-family:var(--sub); font-size:var(--caps-xs);
  letter-spacing:.2em; text-transform:uppercase; color:var(--ink);
}

.note-what {
  display:block; font-family:var(--sub); font-size:var(--caps-xxs);
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
}

@media (max-width:900px) {
  .hero--orrery .hero-grid { grid-template-columns:1fr; }
  .hero--orrery .orrery-plate { max-width:27rem; margin-inline:auto; order:2; }
  .compare { grid-template-columns:1fr; }
  .compare-vs { justify-self:center; }
}

@media (max-width:640px) {
  .course { grid-template-columns:1fr; }
  .course-mark { display:flex; gap:.9rem; align-items:baseline; text-align:left; }
  .course-glyph { font-size:2rem; }
  .course-period { margin-top:0; }
  .course-period br { display:none; }
  .orrery-key { grid-template-columns:1fr; }
}

@media (prefers-reduced-motion:reduce) {
  .body .body-mover { animation:none; }
  .body--fortune .body-mover { offset-distance:18%; }
  .body--lilith  .body-mover { offset-distance:62%; }
  .body--chiron  .body-mover { offset-distance:84%; }
}

/* ═══════════════════════════════════════════════════════════════════
   LILITH — the empty focus
   An ellipse has two foci. The moon's orbit puts Earth at one of them;
   the other is unoccupied, and that unoccupied point is Black Moon
   Lilith. She is not a body. She is a coordinate defined by absence,
   which is the most honest possible image for a course about the part
   of the feminine that got written out. The moon rides the actual drawn
   path via offset-path, and the two radii track her as she goes: their
   lengths change constantly, their sum never does.
   ═══════════════════════════════════════════════════════════════════ */
.hero--focus .hero-grid { grid-template-columns:1.04fr 1fr; }

.focus-plate { margin:0; }

.focus-fig { display:block; width:100%; height:auto; overflow:visible; }

.ff-halo {
  fill:color-mix(in srgb, var(--wine) 7%, transparent); stroke:none;
  opacity:0; animation:ffFade 1.4s ease .9s forwards;
}

.ff-orbit {
  fill:none; stroke:var(--hair); stroke-width:1.1;
  stroke-dasharray:1.02 1.02; stroke-dashoffset:1.04;
  animation:ffDraw 2.8s cubic-bezier(.5,0,.2,1) .2s forwards;
}

@keyframes ffDraw { to { stroke-dashoffset:.02; } }

@keyframes ffFade { to { opacity:1; } }

.ff-axis {
  stroke:var(--hair); stroke-width:.8; stroke-dasharray:3 4;
  opacity:0; animation:ffFade 1s ease 1.6s forwards;
}

.ff-radius {
  stroke:var(--gilt); stroke-width:.8; opacity:0;
  animation:ffFade 1s ease 2.6s forwards;
}

.ff-radius--dark { stroke:var(--wine); }

.ff-earth-body { fill:var(--ink); }

.ff-lil-ring {
  fill:var(--paper); stroke:var(--wine); stroke-width:1.6;
  stroke-dasharray:2.6 2.6;
}

.ff-lil-pulse {
  fill:none; stroke:var(--wine); stroke-width:1;
  transform-box:fill-box; transform-origin:center;
  animation:lilPulse 3.4s ease-out infinite 2.4s;
}

@keyframes lilPulse {
  0%   { opacity:.5; transform:scale(.55); }
  70%  { opacity:0;  transform:scale(1.9); }
  100% { opacity:0;  transform:scale(1.9); }
}

.ff-glyph { font-size:13px; fill:var(--wine); }

.ff-earth, .ff-lilith { opacity:0; animation:ffFade .9s ease 2s forwards; }

.ff-label {
  font-family:var(--sub); font-size:8.5px; letter-spacing:.18em;
  text-transform:uppercase; fill:var(--ink);
}

.ff-label--lil { fill:var(--wine); }

.ff-sub {
  font-family:var(--sub); font-size:6.4px; letter-spacing:.12em;
  text-transform:uppercase; fill:var(--muted);
}

.ff-moon-body { fill:var(--gilt); }

.ff-moon { opacity:0; animation:ffFade .8s ease 2.4s forwards; }

.ff-sum {
  font-family:var(--sub); font-size:7px; letter-spacing:.16em;
  text-transform:uppercase; fill:var(--muted);
  opacity:0; animation:ffFade 1s ease 3s forwards;
}

.ff-sum-a { fill:var(--gilt); }

.ff-sum-b { fill:var(--wine); }

.focus-caption {
  margin-top:1.2rem; text-align:center; max-width:26rem; margin-inline:auto;
  font-family:var(--sub); font-size:var(--caps-xxs); letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); line-height:1.7;
}

/* ── Power codes list ────────────────────────────────────────────── */
.codes { list-style:none; margin:1.4rem 0 0; padding:0; }

.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(--wine);
}

.codes li:last-child { border-bottom:0; }

/* ── The four modules, marked by real lunar phases ───────────────── */
.mod-list {
  margin-top:2.8rem; display:grid; gap:1px;
  background:var(--hair); border:1px solid var(--hair);
  max-width:56rem; margin-inline:auto; text-align:left;
}

.mod {
  display:grid; grid-template-columns:11rem 1fr; gap:clamp(1.2rem,3vw,2.4rem);
  padding:clamp(1.6rem,3.4vw,2.4rem); background:var(--paper);
  transition:background .35s ease;
}

.mod:hover { background:color-mix(in srgb, var(--wine) 4%, var(--paper)); }

.mod-mark { text-align:center; }

.phase { display:block; width:4.4rem; height:4.4rem; margin:0 auto .8rem; }

.ph-disc { fill:none; stroke:var(--hair); stroke-width:1.2; }

.ph-lit  { fill:var(--wine); }

.mod-n {
  margin:0; font-family:var(--sub); font-size:var(--caps-xxs);
  letter-spacing:.24em; text-transform:uppercase; color:var(--gilt);
}

.mod-phase {
  margin:.2rem 0 0; font-family:var(--sub); font-size:var(--caps-xxs);
  letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
}

.mod-body h3 { margin:0 0 .7rem; }

.mod-body > p { margin:0 0 1rem; }

.mod-body ul { list-style:none; margin:0; padding:0; }

.mod-body li {
  padding:.4rem 0 .4rem 1.5rem; position:relative;
  font-family:var(--sub); font-size:var(--caps-xs); letter-spacing:.02em;
}

.mod-body li::before {
  content:'✦'; position:absolute; left:0; color:var(--gilt);
}

/* ── The paradox ─────────────────────────────────────────────────── */
.paradox-art { margin:2rem auto; max-width:46rem; }

.paradox-art img { width:100%; height:auto; display:block; border:1px solid var(--hair); }

.paradox-art figcaption {
  margin-top:.8rem; font-family:var(--sub); font-size:var(--caps-xxs);
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
}

/* ── Is / isn't ──────────────────────────────────────────────────── */
.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(--bone, #efe9e0); color:#37312c; }

.isnt-col--is   { border-color:color-mix(in srgb, var(--gilt) 45%, var(--hair)); }

.isnt-col--isnt { border-color:color-mix(in srgb, var(--wine) 38%, 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(--gilt); }

.isnt-col--isnt .isnt-head { color:var(--wine); }

.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(--gilt); }

.isnt-col--isnt li::before { content:'×'; position:absolute; left:.15rem; color:var(--wine); }

.container-note {
  max-width:34rem; margin:2rem auto 0;
  font-family:var(--display-it,var(--body)); font-style:italic;
}

.benefits-note {
  max-width:32rem; margin:2rem auto 0;
  font-family:var(--display-it,var(--body)); font-style:italic;
}

/* ── Enrol card ──────────────────────────────────────────────────── */
.ec-moon {
  display:block; font-size:1.9rem; line-height:1;
  color:var(--wine); margin-bottom:.6rem;
}

.oval--soft img { border-radius:0; clip-path:none; width:100%; height:auto; display:block; }

.deliverables { list-style:none; margin:0 0 1.7rem; padding:0; text-align:left; max-width:26rem; margin-inline:auto; position:relative; }

.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(--gilt); }

.deliverables li:last-child { border-bottom:0; }

@media (max-width:900px) {
  .hero--focus .hero-grid { grid-template-columns:1fr; }
  .hero--focus .focus-plate { max-width:26rem; margin-inline:auto; order:2; }
  .mod { grid-template-columns:1fr; }
  .mod-mark { text-align:left; display:flex; align-items:center; gap:.9rem; }
  .phase { margin:0; width:3.2rem; height:3.2rem; }
  .mod-phase { margin:0; }
}

@media (prefers-reduced-motion:reduce) {
  .ff-orbit { stroke-dashoffset:.02; }
  .ff-halo, .ff-axis, .ff-radius, .ff-earth, .ff-lilith, .ff-moon { opacity:1; animation:none; }
  .ff-lil-pulse { animation:none; opacity:.3; }
}

/* ═══════════════════════════════════════════════════════════════════
   LILITH RE-GLAZE — oxblood, onyx, bone
   The violet accent steps aside for the onyx blood red of the live
   page (#4d1d1d, sampled from michellesaya.com/lilith-course), and the
   pale purple surfaces warm to bone. Nocturnal lifts the oxblood so it
   still reads on near-black ground.
   ═══════════════════════════════════════════════════════════════════ */
:root {
  --violet:#4d1d1d;
  --lilac:#e6ddd3;
  --dusk:#8a5a50;
  --onyx:#100e0d;
  --onyx-2:#181514;
  --bone:#efe9e0;
  /* older Lilith blocks reference --paper; alias it to the page ground */
  --paper:var(--parchment);
}

html[data-sect="nocturnal"] {
  --violet:#c76e60;
  --dusk:#a3766c;
}

/* ── The hero goes onyx in BOTH sects, like the live page ────────── */
.hero--focus {
  position:relative; overflow:hidden;
  background:var(--onyx) url('images/damask.jpg') center/cover;
  background-blend-mode:luminosity;
}

.hero--focus::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse at 50% 20%, rgba(16,14,13,.45), rgba(16,14,13,.92) 75%);
}

.hero--focus .hero-grid { position:relative; z-index:2; }

.hero--focus .eyebrow { color:#c9b8a8; }

.hero--focus h1 { color:#f3ede4; }

.hero--focus h1 em { color:#c76e60; }

.hero--focus .standfirst { color:#d8cfc2; }

.hero--focus .hero-body { color:#b9aea1; }

.hero--focus .fineprint { color:#8f847a; }

.hero--focus .btn {
  background:#4d1d1d; border-color:#6b2f2c; color:#f3ede4;
}

.hero--focus .btn:hover { background:#5d2624; }

/* figure recolored for dark ground */
.hero--focus .ff-orbit  { stroke:#5a4f47; }

.hero--focus .ff-axis   { stroke:#453c36; }

.hero--focus .ff-halo   { fill:rgba(199,110,96,.05); }

.hero--focus .ff-radius { stroke:#a08c6a; }

.hero--focus .ff-radius--dark { stroke:#c76e60; }

.hero--focus .ff-earth-body   { fill:#f3ede4; }

.hero--focus .ff-lil-ring     { fill:var(--onyx); stroke:#c76e60; }

.hero--focus .ff-lil-pulse    { stroke:#c76e60; }

.hero--focus .ff-glyph        { fill:#c76e60; }

.hero--focus .ff-label        { fill:#d8cfc2; }

.hero--focus .ff-label--lil   { fill:#c76e60; }

.hero--focus .ff-sub          { fill:#8f847a; }

.hero--focus .ff-moon-body    { fill:#e6d2ae; }

.hero--focus .ff-sum          { fill:#8f847a; }

.hero--focus .ff-sum-a        { fill:#a08c6a; }

.hero--focus .ff-sum-b        { fill:#c76e60; }

.hero--focus .focus-caption   { color:#8f847a; }

/* ── The black moon ──────────────────────────────────────────────
   A large disc descending into the hero from above, roughly a third of
   it cut off by the top edge, with the Lilith wordmark set into the
   dark about three-fifths of the way down. The glow is drawn rather
   than baked into the PNG so it survives the sect toggle. */
.black-moon {
  /* Sits BEHIND the headline (the grid is z-index 2), so the type reads
     over the dark of the disc instead of being covered by it. */
  /* The disc inside the PNG is centred at 49% of the canvas height (the
     file carries transparent padding), so translating up by 49% puts the
     circle's own centre exactly on the hero's top edge: half moon showing. */
  position:absolute; top:0; left:50%; z-index:1; pointer-events:none;
  width:clamp(14.5rem, 47.5vw, 35.5rem); aspect-ratio:900/829;
  transform:translate(-50%,-49%);
}

.bm-disc {
  width:100%; height:auto; display:block;
  filter:drop-shadow(0 0 46px rgba(243,237,228,.30))
         drop-shadow(0 0 120px rgba(243,237,228,.13));
}

.bm-logo {
  position:absolute; left:50%; top:57%; width:14%; height:auto;
  transform:translateX(-50%);
}

/* ── The flanking collages ───────────────────────────────────────
   bml-left and bml-right are two different plates, each already
   composed for its own side, so neither is mirrored. Mirroring one to
   fake the other put the archer on the wrong side of both. */
.hero-flank {
  position:absolute; bottom:0; width:clamp(13rem,30vw,25rem); height:auto;
  opacity:.6; z-index:1; pointer-events:none;
}

.hero-flank--l { left:-7vw; }

.hero-flank--r { right:-6vw; }

/* z-index 0 puts the stars BEHIND the collages, so the painted figures
   always occlude them and no face is ever cut across. They still read in
   the dark negative space around the plates. */
.hero-star {
  position:absolute; height:auto; opacity:.45; z-index:0; pointer-events:none;
}

.hero-star--l { width:clamp(3.5rem,8vw,6.5rem); left:-2%;  top:28%; }

.hero-star--r { width:clamp(3.5rem,8vw,6.5rem); right:-1%; top:24%; }

/* ── Shared dark bands ───────────────────────────────────────────── */
.band--onyx {
  background:var(--onyx-2); color:#d8cfc2;
  border-block:1px solid #262019;
}

.band--onyx .eyebrow { color:#c9b8a8; }

.band--onyx .display-h2 { color:#f3ede4; }

.band--onyx .display-h2 em { color:#c76e60; }

.band--damask {
  background:var(--onyx) url('images/damask.jpg') center/cover;
  background-blend-mode:luminosity;
}

.band--duo, .band--diana { position:relative; overflow:hidden; }

.band--duo::before, .band--diana::before {
  content:''; position:absolute; inset:0; opacity:.5; pointer-events:none;
  background:url('images/duo-flame.jpg') center/cover;
}

.band--diana::before { background-image:url('images/duo-diana.jpg'); }

.band--duo > *, .band--diana > * { position:relative; z-index:2; }

.display-h2--light { color:#f3ede4; }

.display-h2--light em { color:#c76e60; }

.prose--onblood p { color:#d8cfc2; }

.band--onyx .prose p, .band--onyx .subhead { color:#d8cfc2; }

.codes--light li { border-bottom-color:rgba(216,207,194,.18); color:#d8cfc2; }

.codes--light li::before { color:#c76e60; }

/* the power-codes list sits centred on the live page */
#codes .codes { max-width:36rem; margin-inline:auto; text-align:left; margin-top:2rem; }

/* ── Framed art (her paintings get real frames) ──────────────────── */
.frame-art { margin:0; }

.frame-art img {
  width:100%; height:auto; display:block;
  border:6px solid #fff; outline:1px solid var(--hair);
  box-shadow:0 14px 40px rgba(20,15,10,.22);
}

.band--onyx .frame-art img { border-color:#efe9e0; outline-color:#33291f; }

/* ── Mockup ──────────────────────────────────────────────────────── */
.mockup { margin:0 auto 2.4rem; max-width:52rem; }

.mockup img { width:100%; height:auto; display:block; }

.mockup--final { margin:2.4rem auto; }

/* ── Oxblood band + module tabs ──────────────────────────────────── */
.band--oxblood {
  background:#4d1d1d; color:#e9ddd2;
  border-block:1px solid #3a1414;
}

.band--oxblood .eyebrow { color:#caa9a0; }

.band--oxblood .display-h2 { color:#f6efe6; }

.band--oxblood .display-h2 em { color:#e0a294; }

.band--oxblood .prose p { color:#e9ddd2; }

.modtabs { max-width:52rem; margin:2.6rem auto 0; text-align:left; }

.modtabs-bar { display:flex; gap:2px; }

.modtab {
  flex:1; display:flex; align-items:center; justify-content:center; gap:.55rem;
  padding:.85rem .5rem; cursor:pointer;
  background:#3c1616; color:#caa9a0; border:0; border-bottom:2px solid transparent;
  font-family:var(--sub); font-size:var(--caps-xs); letter-spacing:.18em;
  text-transform:uppercase; transition:background .25s ease, color .25s ease;
}

.modtab:hover { background:#451a1a; color:#efdfd5; }

.modtab[aria-selected="true"] { background:var(--bone); color:#4d1d1d; }

.modtab .phase { width:1.5rem; height:1.5rem; margin:0; }

.modtab .ph-disc { stroke:#8a5a50; }

.modtab .ph-lit  { fill:#8a5a50; }

.modtab[aria-selected="true"] .ph-disc { stroke:#4d1d1d; }

.modtab[aria-selected="true"] .ph-lit  { fill:#4d1d1d; }

.modpanel {
  background:var(--bone); color:#37312c;
  padding:clamp(1.8rem,4vw,2.8rem);
  border-top:0;
}

.modpanel-phase {
  margin:0 0 .5rem; font-family:var(--sub); font-size:var(--caps-xxs);
  letter-spacing:.24em; text-transform:uppercase; color:#8a5a50;
}

.modpanel h3 { margin:0 0 .8rem; color:#4d1d1d; }

.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:#5d4a42;
  border-bottom:1px dotted rgba(138,90,80,.35);
}

.modpanel li:last-child { border-bottom:0; }

.modpanel li::before {
  content:''; position:absolute; left:.1rem; top:.78rem;
  width:.55rem; height:.55rem; border-radius:50%; background:#4d1d1d;
}

.modpanel-strip { width:100%; height:auto; display:block; margin-top:1.6rem; }

/* ── Portal card on damask ───────────────────────────────────────── */
.enrol-card--portal {
  background:rgba(10,8,7,.55); border:1px solid #efe9e0; color:#efe9e0;
  backdrop-filter:blur(2px);
}

.enrol-card--portal h3, .enrol-card--portal .price { color:#f6efe6; }

.enrol-card--portal .price-sub { color:#c9b8a8; }

.enrol-card--portal .deliverables li { border-bottom-color:rgba(216,207,194,.2); color:#d8cfc2; }

.enrol-card--portal .deliverables li::before { content:'✓'; color:#c76e60; }

.enrol-card--portal .fineprint { color:#8f847a; }

.enrol-card--portal .btn--lg { background:#efe9e0; color:#2a1310; border-color:#efe9e0; }

.enrol-card--portal .btn--lg:hover { background:#fff; }

.ec-moon { display:block; font-size:1.9rem; line-height:1; color:#c76e60; margin-bottom:.6rem; }

/* ── Eclipse figure ──────────────────────────────────────────────── */
.eclipse-fig {
  margin:0; display:grid; place-items:center; aspect-ratio:1;
  background:radial-gradient(circle at 50% 42%, #fff 0%, #ded9d2 34%, #6d675f 70%, #23201d 100%);
  border:6px solid #fff; outline:1px solid var(--hair);
  box-shadow:0 14px 40px rgba(20,15,10,.22);
}

.eclipse-fig img { width:52%; height:auto; filter:drop-shadow(0 0 34px rgba(255,255,255,.85)); }

/* ── Benefits ────────────────────────────────────────────────────── */
.bene-row {
  margin-top:2.4rem; display:grid; gap:1.2rem;
  grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));
  max-width:52rem; margin-inline:auto;
}

.bene {
  border:1px solid rgba(216,207,194,.5); padding:1.6rem 1.4rem; text-align:center;
  background:rgba(10,8,7,.4);
}

.bene h3 {
  margin:0 0 .6rem; color:#f3ede4;
  font-family:var(--sub); font-size:var(--caps-sm); letter-spacing:.18em;
  text-transform:uppercase; font-weight:400;
}

.bene p { margin:0; font-size:.92em; color:#c9beb1; }

/* ── Titian band ─────────────────────────────────────────────────── */
.band--titian {
  position:relative; overflow:hidden;
  background:url('images/sacred-profane.jpg') center 30%/cover;
}

.band--titian::before {
  content:''; position:absolute; inset:0;
  background:rgba(16,12,10,.55);
}

.band--titian > * { position:relative; z-index:2; }

.band--titian .isnt { margin-top:0; }

.band--titian .isnt-col { box-shadow:0 14px 40px rgba(10,8,6,.4); }

/* ── Final CTA ───────────────────────────────────────────────────── */
.final-cta .eyebrow { color:#c9b8a8; }

.final-grid {
  display:grid; grid-template-columns:auto auto; gap:clamp(1.6rem,5vw,4rem);
  justify-content:center; align-items:center; text-align:left;
}

.price--light { color:#f6efe6; }

.final-line { max-width:15rem; font-family:var(--quote); font-style:italic; color:#d8cfc2; }

.deliverables--light li { border-bottom-color:rgba(216,207,194,.2); color:#d8cfc2; }

.deliverables--light li::before { content:'✓'; color:#c76e60; }

@media (max-width:900px) {
  .hero-flank, .hero-star { display:none; }
  /* On a narrow screen the moon has no room beside the type, so it moves
     fully above it: the hero opens up and the disc rides the top edge. */
  .hero--focus { padding-top:5rem; }
  .black-moon { width:clamp(7.5rem,39vw,14.5rem); transform:translate(-50%,-49%); }
  .modtabs-bar { flex-wrap:wrap; }
  .modtab { flex:1 1 46%; }
  .final-grid { grid-template-columns:1fr; text-align:center; }
  .final-line { margin-inline:auto; }
}

/* Full-bleed dark sections, like the live page: the section stretches
   edge to edge and its inner grid keeps the shell width. */
.hero--focus, .band--onyx, .band--oxblood, .band--titian {
  max-width:none;
}

.hero--focus .hero-grid,
.band--onyx > *:not(.hero-grid),
.band--oxblood > * ,
.band--titian > * {
  max-width:calc(var(--shell) - 2*var(--gutter));
  margin-inline:auto;
}

.band--onyx .split, .band--onyx .isnt { max-width:calc(var(--shell) - 2*var(--gutter)); }

/* ── 十二 The twelve — transitional strip between bands ──────────── */
.twelve {
  background:var(--onyx); padding:0 0 .9rem;
  border-block:1px solid #262019;
}

.twelve img { display:block; width:100%; height:auto; }

.twelve-cap {
  margin:0; padding:.85rem var(--gutter) .8rem; text-align:center;
  font-family:var(--sub); font-size:var(--caps-xxs); letter-spacing:.28em;
  text-transform:uppercase; color:#8f847a;
}

/* ═══════════════════════════════════════════════════════════════════
   IMAGE FIT PASS
   The paintings arrive in mixed aspect ratios; left alone they float at
   whatever height the source happens to be, which reads as accidental
   next to a tall column of type. Each framed image is given a deliberate
   portrait crop with an object-position chosen for that painting's
   subject, so the art fills its half of the split on purpose.
   ═══════════════════════════════════════════════════════════════════ */
.split { align-items:center; }

.frame-art img {
  aspect-ratio:4/5; object-fit:cover;
}

.frame-art--tall img { aspect-ratio:3/4.4; }

/* the weeping woman is a landscape source; hold the face */
#grief .frame-art img { object-position:56% 34%; }

/* Sirin's crown sits high in the plate */
#codes .frame-art img { object-position:50% 22%; }

/* Alkonost's face and sun-rays are upper-centre */
#shatki .frame-art img { object-position:50% 26%; }

/* Michelle, framed on her own terms */
.story .frame-art img { aspect-ratio:4/5; object-position:50% 30%; }

/* Joan raises the sword above centre */
#wholeness .frame-art img { object-position:50% 30%; }

/* the power-codes band no longer needs a full-bleed wash behind it */
.band--duo::before { opacity:.16; }

#codes .codes { max-width:none; margin-inline:0; margin-top:1.4rem; }

/* ── A believable total eclipse ──────────────────────────────────── */
.eclipse-fig {
  position:relative; margin:0; display:grid; place-items:center; aspect-ratio:4/5;
  background:radial-gradient(circle at 50% 50%, #241f1c 0%, #14100e 55%, #0a0807 100%);
  border:6px solid #efe9e0; outline:1px solid var(--hair);
  box-shadow:0 14px 40px rgba(20,15,10,.22); overflow:hidden;
}

.eclipse-corona {
  position:absolute; top:50%; left:50%; width:64%; aspect-ratio:1;
  transform:translate(-50%,-50%); border-radius:50%; pointer-events:none;
  background:
    radial-gradient(circle, rgba(255,247,232,.95) 26%, rgba(255,240,214,.42) 34%,
                            rgba(233,190,150,.18) 46%, rgba(180,130,100,.07) 62%, transparent 72%);
  filter:blur(.5px);
  animation:coronaBreathe 7s ease-in-out infinite;
}

@keyframes coronaBreathe {
  0%,100% { transform:translate(-50%,-50%) scale(1);    opacity:.92; }
  50%     { transform:translate(-50%,-50%) scale(1.06); opacity:1; }
}

.eclipse-fig img {
  position:relative; z-index:2; width:32%; height:auto;
  filter:drop-shadow(0 0 26px rgba(255,244,224,.55));
}

@media (prefers-reduced-motion:reduce) { .eclipse-corona { animation:none; } }

@media (max-width:900px) {
  .frame-art img, .frame-art--tall img { aspect-ratio:4/5; }
  .eclipse-fig { aspect-ratio:1; }
}

/* ── Before you enrol ─────────────────────────────────────────
   Step 7 terms, stated above the fold of the decision rather than
   after it. Deliberately plain: this is the one block on the page
   that should read as information rather than as invitation. */
.enrol-terms {
  margin:1.6rem auto 0; max-width:34rem; padding-top:1.2rem;
  border-top:1px solid color-mix(in srgb, var(--lilac) 26%, transparent);
  text-align:left;
}
.enrol-terms .et-head {
  margin:0 0 .7rem; font-family:var(--sub); font-size:var(--caps-xs);
  letter-spacing:.2em; text-transform:uppercase; opacity:.75;
}
.enrol-terms p {
  margin:0 0 .7rem; font-family:var(--body);
  font-size:.92rem; line-height:1.6; opacity:.82;
}
.enrol-terms p:last-child { margin-bottom:0; }
.enrol-terms a {
  /* inherit, deliberately. The page's link colour is a dark oxblood built
     for the light bands, and on this card it came out at 1.44:1 against
     the background, which is invisible. Body text here is 16.6:1, and a
     crisis link is the last thing on the site that should be hard to read. */
  color:inherit; text-decoration:underline; text-underline-offset:.18em;
  text-decoration-thickness:1px;
}

/* ── Nocturnal contrast repairs ───────────────────────────────
   Lilith runs its own clay palette. At night --gilt lands on #a3766c,
   which is fine as a border or a glyph and too dark as text: the
   marquee and the footer headings sat at 4.02:1 and 4.47:1, and the
   "what this is" heading at 3.24:1 on the bone panel. Text takes a
   lifted clay; everything structural keeps the original. */
html[data-sect="nocturnal"] .sky-marquee-track span,
html[data-sect="nocturnal"] .marquee-track span,
html[data-sect="nocturnal"] .foot-head { color:#c9948a; }
html[data-sect="nocturnal"] .isnt-col--is .isnt-head { color:#8a5348; }
html[data-sect="nocturnal"] .isnt-col--isnt .isnt-head { color:#9c3f30; }


/* ═══ HER PORTRAIT, UNFRAMED ═══
   The painted artworks on this page keep their white frames: a frame is
   right for a painting. Her own photograph is not a painting, and the
   frame plus hairline read as a second edge around her, so it comes off
   and the picture grows by a third, lifted on its own shadow. */
.frame-art--me img {
  border:0; outline:0; border-radius:12px;
  box-shadow:0 20px 44px rgba(20,15,10,.24);
}
@media (min-width:820px) {
  .frame-art--me { width:130%; max-width:none; justify-self:center; }
  .split--rev .frame-art--me { margin-right:-15%; }
}