/* ═══════════════════════════════════════════════════════════════════
   enchant-your-brand — 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; }

/* Alcyone down to Atlas. Dotted, because he is not part of the asterism. */
.sky-descent {
  fill:none; stroke:var(--gilt); stroke-width:.6; opacity:.34;
  stroke-dasharray:1 3;
}

.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-descent { opacity:.7; }

.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; }
}

/* ═══════════════════════════════════════════════════════════════════
   ENCHANT YOUR BRAND — the Rose of Venus
   Venus and Earth sit in a near-perfect 13:8 orbital resonance, so over
   eight Earth years the five inferior conjunctions land 215.52° apart
   and close a pentagram against the zodiac. The faint mandala behind it
   is the real geocentric path of Venus over those same eight years. The
   star draws itself last, because the whole point is that the mark was
   already there waiting to be traced.
   ═══════════════════════════════════════════════════════════════════ */
/* hero--venus retired: the page now opens on her own night (hero--nox) */



.venus-plate { margin:0; }

.venus-rose { display:block; width:100%; height:auto; }

.vr-trace {
  fill:none; stroke:var(--gilt); stroke-width:.45; opacity:.34;
  stroke-dasharray:1.02 1.02; stroke-dashoffset:1.04;
  animation:vrDraw 5.2s ease-out .2s forwards;
}

.vr-penta {
  fill:none; stroke:var(--wine); stroke-width:1.5;
  stroke-linejoin:round; stroke-linecap:round;
  stroke-dasharray:1.02 1.02; stroke-dashoffset:1.04;
  animation:vrDraw 2.6s cubic-bezier(.6,0,.25,1) 1.9s forwards;
}

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

.vp-node {
  fill:var(--wine);
  transform-box:fill-box; transform-origin:center;
  opacity:0; animation:vpPop .5s ease var(--nd,2s) forwards;
}

@keyframes vpPop {
  0%   { opacity:0; transform:scale(.2); }
  60%  { opacity:1; transform:scale(1.5); }
  100% { opacity:1; transform:scale(1); }
}

.venus-plate:hover .vr-trace { opacity:.62; }

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

/* ── The check in ────────────────────────────────────────────────── */
.checkin-note {
  max-width:32rem; margin:2rem auto 0;
  font-family:var(--display-it,var(--body)); font-style:italic; font-size:1.05rem;
}

/* ── Three levels ────────────────────────────────────────────────── */
.levels {
  margin-top:2.6rem; display:grid;
  grid-template-columns:minmax(0,22rem) 1fr;
  gap:clamp(1.6rem,4vw,3.4rem); align-items:center;
  max-width:52rem; margin-inline:auto; text-align:left;
}

/* her own pyramid graphic, not a drawn stand-in */
.levels-fig { margin:0; width:100%; }
.levels-fig img { width:100%; height:auto; display:block; }



@keyframes lvRise { from { opacity:0; transform:translateY(9px); } to { opacity:1; transform:none; } }



.levels-key { list-style:none; margin:0; padding:0; counter-reset:lv; }

.levels-key li {
  padding:1rem 0; border-bottom:1px solid var(--hair);
}

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

.lk-n {
  margin:0 0 .2rem; font-family:var(--sub); font-size:var(--caps-xxs);
  letter-spacing:.24em; color:var(--gilt);
}

.levels-key h3 { margin:0 0 .4rem; }

.levels-key p:last-child { margin:0; font-size:.94em; }

/* ── The five lessons ────────────────────────────────────────────── */
.lessons {
  margin-top:3rem; display:flex; flex-wrap:wrap; justify-content:center;
  gap:1.2rem; text-align:left;
}
/* flex rather than grid so the last row of two centres under the three
   above it, instead of hanging off the left edge */
.lesson { flex:0 1 calc(33.333% - .8rem); min-width:15rem; }

.lesson {
  padding:1.6rem 1.5rem; border:1px solid var(--hair); background:var(--paper);
  transition:border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}

.lesson:hover {
  border-color:color-mix(in srgb, var(--gilt) 55%, var(--hair));
  box-shadow:0 0 28px color-mix(in srgb, var(--gilt) 12%, transparent);
  transform:translateY(-2px);
}

.lesson--lit {
  border-color:color-mix(in srgb, var(--wine) 40%, var(--hair));
  background:color-mix(in srgb, var(--wine) 5%, var(--paper));
}

.lesson-glyph {
  display:block; font-size:1.5rem; line-height:1; color:var(--wine);
  margin-bottom:.7rem;
}

.lesson h3 { margin:0 0 .5rem; font-size:1.02rem; }

.lesson p { margin:0; font-size:.92em; }

/* ── Softer arch crop for the collage art ────────────────────────── */
.oval--soft img {
  border-radius:0; clip-path:none;
  width:100%; height:auto; display:block;
}

/* ── No clones ───────────────────────────────────────────────────── */
.clones-note {
  max-width:33rem; margin:1.6rem auto 0;
  font-family:var(--display-it,var(--body)); font-style:italic;
}

/* ── The enrol card, dressed for Venus ───────────────────────────── */
.enrol-card--venus { position:relative; }

.ec-rose {
  display:block; font-size:1.9rem; line-height:1;
  color:var(--wine); margin-bottom:.6rem;
}

@media (max-width:900px) {
  .hero--venus .hero-grid { grid-template-columns:1fr; }
  .hero--venus .venus-plate { max-width:24rem; margin-inline:auto; order:2; }
  .levels { grid-template-columns:1fr; }
  .levels-fig { max-width:20rem; margin-inline:auto; }
}

@media (prefers-reduced-motion:reduce) {
  .vr-trace, .vr-penta { stroke-dashoffset:.02; animation:none; }
  .vp-node { opacity:1; animation:none; }
  .lv { opacity:1; animation:none; }
}

/* The deliverables list is a sales-page component that lives on the
   workshop pages; class-shop never used it, so it never came across. */
.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; }

/* ═══════════════════════════════════════════════════════════════════
   ENCHANT YOUR BRAND — her own night
   The hero and the manifesto band stand on her starry brushed-ink
   ground (nox-texture.jpg, from the live page), with the eclipse couple
   on their clouds, the neon logotype as the headline graphic, and her
   doves in the corners. The Rose of Venus survives as the watermark
   behind the enrol card: the mark was already drawn, claim it.
   ═══════════════════════════════════════════════════════════════════ */
.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--nox {
  position:relative; overflow:hidden; max-width:none;
  padding-block:clamp(3.4rem,6.5vw,5.5rem);
  background:#101011 url('images/nox-texture.jpg') center/cover;
  border-bottom:1px solid #23201c;
}
.hero--nox::before {
  content:''; position:absolute; inset:0;
  /* an even scrim plus a soft vignette. Sits UNDER .hero-grid (z-index 2)
     and the doves (z-index 3), so it calms the plate without touching the
     collage or the type. */
  background:
    radial-gradient(ellipse at 62% 34%, rgba(16,16,17,.26), rgba(16,16,17,.80) 76%),
    rgba(12,11,12,.44);
}
.hero--nox .hero-grid {
  position:relative; z-index:2;
  max-width:calc(var(--shell) - 2*var(--gutter)); margin-inline:auto;
  grid-template-columns:.92fr 1.08fr;
}
.hero--nox .eyebrow { color:#b9b3c9; justify-content:flex-start; }
.hero--nox .hero-body { color:#cfc9dd; max-width:30rem; }
.hero--nox .fineprint { color:#8d8798; }

.nox-logotype {
  display:block; width:min(30rem,100%); height:auto; margin:0 0 1.1rem -0.6rem;
  filter:drop-shadow(0 0 26px rgba(137,117,255,.35));
}

.nox-plate { position:relative; margin:0; }
.nox-couple {
  display:block; width:min(24rem,90%); height:auto; margin-inline:auto;
  filter:drop-shadow(0 18px 44px rgba(0,0,0,.55));
}
.nox-cloud {
  position:absolute; bottom:-9%; left:50%; width:62%; height:auto;
  transform:translateX(-50%); pointer-events:none;
  animation:cloudDrift 9s ease-in-out infinite alternate;
}
@keyframes cloudDrift { from { transform:translateX(-54%); } to { transform:translateX(-46%); } }

.nox-dove {
  position:absolute; width:clamp(4.5rem,8vw,7rem); height:auto;
  z-index:3; pointer-events:none; opacity:.9;
}
.nox-dove--l { left:9%;  top:18%; transform:scaleX(-1); }
.nox-dove--r { right:4%; bottom:14%; transform:scaleX(-1); }

/* ── The check-in's gold star ────────────────────────────────────── */
#checkin { position:relative; overflow:hidden; }
.gold-star {
  position:absolute; right:7%; top:3.4rem; width:clamp(4rem,6.5vw,5.5rem);
  height:auto; pointer-events:none; opacity:.85;
  animation:goldTurn 46s linear infinite;
}
@keyframes goldTurn { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce) { .gold-star { animation:none; } }

/* ── The gold wheel ──────────────────────────────────────────────── */
.wheel-fig { margin:0; }
.wheel-fig img { width:100%; height:auto; display:block; }
.wheel-caption {
  margin-top:.9rem; text-align:center;
  font-family:var(--sub); font-size:var(--caps-xxs); letter-spacing:.2em;
  text-transform:uppercase; color:var(--muted);
}

/* ── Her night band for the manifesto ────────────────────────────── */
.band--nox {
  position:relative; max-width:none;
  background:#101011 url('images/nox-texture.jpg') center/cover;
  border-block:1px solid #23201c;
}
/* the vinyl has bright grooves and speckle; without a scrim the body copy
   sits right on top of them and stops being readable */
.band--nox::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:rgba(12,11,12,.74);
}
/* the scrim is absolutely positioned, so it paints over the section's
   in-flow children unless they are lifted onto their own layer. It must
   darken the PLATE, never the type sitting on it. */
.band--nox > * { position:relative; z-index:1; }
.band--nox > * { max-width:calc(var(--shell) - 2*var(--gutter)); margin-inline:auto; }
.band--nox .eyebrow { color:#b9b3c9; }
.display-h2--light { color:#f0ecf7; }
.display-h2--light em { color:var(--violet); }
.subhead--light { color:#efeaf8; }
.another-line {
  max-width:30rem; margin:1.6rem auto 2rem;
  font-family:var(--quote); font-style:italic; font-size:var(--quote-lg);
  color:#fbf9ff;
}

/* ── Workbook tablet ─────────────────────────────────────────────── */
.tablet-fig { margin:0; }
.tablet-fig img {
  width:min(20rem,88%); height:auto; display:block; margin-inline:auto;
  filter:drop-shadow(0 18px 40px rgba(20,15,10,.25));
}

/* ── The clone pair ──────────────────────────────────────────────── */
.clone-pair {
  margin:2rem auto 1.6rem; display:flex; justify-content:center;
  align-items:flex-end; gap:clamp(1rem,4vw,2.6rem);
}
.clone-pair img { width:clamp(7rem,16vw,11rem); height:auto; }
/* the second bust is the copy: a touch smaller, a touch fainter */
.clone-pair img:last-child { width:clamp(6.3rem,14.4vw,9.9rem); opacity:.82; }

/* ── Enrol: flame above, the Rose of Venus behind ────────────────── */
.enrol-wrap { position:relative; max-width:42rem; margin-inline:auto; }
.rose-watermark {
  position:absolute; inset:0; margin:0; display:grid; place-items:center;
  pointer-events:none; z-index:0;
  /* clipped to the card's own box: at 118% the star's nodes used to spill
     up into the section heading and read as a stray purple blob */
  overflow:hidden;
}
.rose-watermark .venus-rose {
  /* larger than the card on purpose, so the star's points reach past its
     edges and the mark reads as drawn beneath the offer */
  width:min(44rem,100%); height:auto; opacity:.75;
}
.enrol-wrap .enrol-card { position:relative; z-index:1; }
.rose-caption {
  margin:1.4rem auto 0; max-width:26rem; text-align:center;
  font-family:var(--sub); font-size:var(--caps-xxs); letter-spacing:.18em;
  text-transform:uppercase;
  /* --muted is dark ink; on the night ground it disappears */
  color:#cfc9dd;
}

@media (max-width:900px) {
  .hero--nox .hero-grid { grid-template-columns:1fr; }
  .nox-plate { order:2; max-width:20rem; margin-inline:auto; }
  .nox-logotype { margin-inline:auto; }
  .nox-dove--r { display:none; }
  .nox-dove--l { width:3.6rem; top:4%; }
  .clone-pair img { width:clamp(6rem,30vw,8rem); }
  .clone-pair img:last-child { width:clamp(5.4rem,27vw,7.2rem); }
}
@media (prefers-reduced-motion:reduce) {
  .nox-dove { display:none; }
  .nox-cloud { animation:none; }
}

/* ── Star-marked list (the three Discover bullets) ───────────────── */
.codes { list-style:none; margin:1.4rem 0 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; }

/* the conjunction dots read as blobs at watermark scale; the drawn
   pentagram is the whole point, so only the lines survive */
.rose-watermark .vp-node { display:none; }

/* ── The ask on her night ────────────────────────────────────────── */
.band--nox.enrol .rose-watermark .vr-trace { stroke:#8f87a8; opacity:.5; }
.band--nox.enrol .rose-watermark .vr-penta { stroke:var(--violet); stroke-width:1.9; }
.band--nox.enrol .rose-watermark .vp-node  { fill:var(--violet); }
.band--nox.enrol .rose-caption { color:#cfc9dd; }
.band--nox.enrol .enrol-card {
  box-shadow:0 24px 70px rgba(0,0,0,.55);
}

/* --paper was never defined on this page (it is a lilith-course alias);
   without it the lesson cards lost their panels and the pyramid's middle
   label went black-on-violet. */
:root { --paper:var(--panel); }

/* long copy on the manifesto band reads in the body serif, not in caps */
.another-body {
  max-width:34rem; margin:0 auto .4rem; color:#e2dcee;
}

/* ── The check-in as an editorial split ──────────────────────────── */
.checkin-head {
  align-items:center; text-align:left; margin-bottom:.4rem;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
}
.plate-art { margin:0; max-width:24rem; }
.plate-art img {
  width:100%; height:auto; display:block;
  border:6px solid #fff; outline:1px solid var(--hair);
  box-shadow:0 16px 40px rgba(20,15,10,.18);
}
.plate-art figcaption {
  margin-top:.8rem; font-family:var(--sub); font-size:var(--caps-xxs);
  letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
}

@media (max-width:900px) {
  .checkin-head { text-align:center; grid-template-columns:1fr; }
  .plate-art { max-width:22rem; margin-inline:auto; }
  .plate-art figcaption { text-align:center; }
}

/* ── The chart collage ───────────────────────────────────────────── */
.wheel-collage {
  position:relative; margin:0; aspect-ratio:1/1.02;
  max-width:30rem; margin-inline:auto;
}
.wheel-collage img { position:absolute; height:auto; }
.wc-wheel  { width:80%;  left:10%;  top:4%;   opacity:.95; z-index:1; }
.wc-star   { width:26%;  right:0;   top:0;    opacity:.5;  z-index:2;
             animation:goldTurn 60s linear infinite reverse; }
.wc-plinth { width:17%;  left:-1%;  bottom:6%; z-index:3;
             filter:drop-shadow(0 10px 22px rgba(30,24,18,.22)); }
.wc-bust   { width:56%;  left:24%;  top:20%;  z-index:4;
             filter:drop-shadow(0 16px 34px rgba(30,24,18,.24)); }
.wc-cloud  { width:66%;  left:16%;  bottom:-2%; z-index:5; opacity:.95; }
.wheel-collage .wheel-caption {
  position:absolute; left:0; right:0; bottom:-2.6rem; z-index:6;
}
@media (max-width:900px) { .wheel-collage { max-width:22rem; } }
@media (prefers-reduced-motion:reduce) { .wc-star { animation:none; } }



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

   The page's design is unchanged. The site's radius system (buttons are
   pills, cards and boxes 14px, framed media 12px), and her fresco hung
   behind the masthead, dissolving before the hero. Cut-out artwork and
   full-bleed bands keep their own edges: rounding scenery reads as a
   mistake.
   ═══════════════════════════════════════════════════════════════════ */

.btn, .btn--lg, .btn--ghost, .link-portal { border-radius:999px; }

.enrol-card, .enrol-terms, .sc-cell, .quad, .opp-col, .notes, .oval,
.faq-list details, .square-chart, .hardway-art, .price,
.mod-card, .tcard, .win-card, .slip { border-radius:14px; }

.quad-art, .sc-star, .hero-weather, .oval img, .notes img,
.hardway-art img, .split figure 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; }