/* ═══════════════════════════════════════════════════════════════════
   chiron-alchemist — 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;
}

.enrol .subhead { margin-bottom:1.2rem; }

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

/* Her cloud plate as weather across the whole hero, not as an object
   beside the figures: wide, low, faint, and bleeding past both edges so
   the hero dissolves downward rather than stopping on a line. */
.hero { position:relative; overflow:hidden; }
.hero > *:not(.hero-weather) { position:relative; z-index:1; }
.hero-weather {
  position:absolute; left:50%; bottom:-16%; z-index:0; pointer-events:none;
  width:min(160%, 1900px); height:auto;
  transform:translateX(-50%); opacity:.55;
}

/* ── 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:.08em; fill:var(--gilt); text-transform:uppercase; }

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

/* ═══════════════════════════════════════════════════════════════════
   MICHELLE'S OWN PLATES
   Every image below is hers, lifted from the live Chiron Alchemist
   page. They are hung as composed set pieces rather than dropped in
   as loose decoration, and each one is positioned so it never
   competes with the text it sits beside.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Premise ──────────────────────────────────────────────────────
   The gold Chiron glyph is the watermark of the whole section; the
   centaur roundel answers it from the opposite corner. Both are
   decorative, so both are pushed behind the type and out of the
   accessibility tree. */
.premise { position:relative; overflow:hidden; }
.premise > *:not(.premise-glyph):not(.premise-ring) { position:relative; z-index:1; }

.premise-glyph {
  position:absolute; left:clamp(-6rem,-4vw,-2rem); top:12%;
  width:clamp(11rem,22vw,20rem); height:auto;
  opacity:.16; pointer-events:none; z-index:0;
  /* the plate is a hard-edged gold cutout: feathered so it reads as a
     watermark pressed into the paper rather than a pasted sticker */
  -webkit-mask-image:radial-gradient(closest-side, #000 55%, transparent 100%);
          mask-image:radial-gradient(closest-side, #000 55%, transparent 100%);
}

.premise-ring {
  position:absolute; margin:0; pointer-events:none; z-index:0;
  width:clamp(9rem,20vw,17rem);
}
.premise-ring img { width:100%; height:auto; display:block; }
.premise-ring--centaur { right:clamp(-3rem,-1vw,0rem); top:4%; opacity:.9; }

.premise-wheel { margin:2.6rem auto .4rem; max-width:17rem; }
.premise-wheel img { width:100%; height:auto; display:block; }
.premise-wheel figcaption {
  margin-top:.4rem; font-family:var(--quote); font-style:italic;
  font-size:.95rem; color:var(--muted);
}

/* ── The twelve-point star at the chart's centre ──────────────────
   Sits behind the centre cell's heading, one point per house. */
.sc-centre { position:relative; overflow:hidden; }
.sc-centre .display-h2 { position:relative; z-index:1; }
.sc-star {
  /* sized off the cell's height, not the viewport: the centre cell is a
     hard box with overflow:hidden, and a viewport-sized star had its
     top and bottom points sliced flat against the cell edge */
  position:absolute; left:50%; top:50%; height:104%; width:auto;
  transform:translate(-50%,-50%); opacity:.22; pointer-events:none; z-index:0;
}

/* ── The hard way: Regnault beside the list ───────────────────── */
.hardway-grid {
  display:grid; grid-template-columns:minmax(0,20rem) 1fr;
  gap:clamp(2rem,5vw,3.6rem); align-items:center; text-align:left;
}
.hardway-art { margin:0; }
.hardway-art img {
  width:100%; height:auto; display:block; border-radius:200px 200px 10px 10px;
  box-shadow:0 24px 60px rgba(45,32,26,.20);
}
.hardway-art figcaption {
  margin-top:.8rem; font-family:var(--quote); font-style:italic;
  font-size:.95rem; color:var(--muted); text-align:center;
}
.hardway-band .hardway { max-width:none; }

/* ── Quadrant art ─────────────────────────────────────────────────
   A band across the top of each card. The cards are unequal in text
   length, so the art is given a fixed aspect ratio: without it the
   four images set four different heights and the row goes ragged. */
.quad { display:flex; flex-direction:column; }
.quad-art { margin:0 0 1.1rem; overflow:hidden; border-radius:6px; }
.quad-art img {
  width:100%; aspect-ratio:16 / 9; object-fit:cover; display:block;
  filter:sepia(.12) saturate(.92);
  transition:transform .6s cubic-bezier(.2,.7,.3,1), filter .5s ease;
}
.quad:hover .quad-art img { transform:scale(1.04); filter:sepia(0) saturate(1); }

/* ── The enrol section, fully dressed ─────────────────────────── */
/* No background plate here, deliberately.
   The damask was tried twice and dropped both times. It is a black
   plate (mean luma 20/255) built for the live site's black section, so
   on parchment it can only ever be a grey veil; relit as a white-ground
   engraving it stopped veiling but started shouting, because the plate
   is 2:1 while this section is taller than it is wide, so `cover`
   scaled it to ~2800px and left three enormous swirls on screen.
   Beyond the mechanics: this section already carries the hummingbirds,
   the archer roundel, the collection mockup, two candles and the cazimi
   lotus. The product shot is the argument here and it needs quiet
   ground. If this section ever goes dark like the live page, the
   original damask belongs here at low opacity and nothing else does. */
.enrol--dressed { position:relative; overflow:hidden; }
.enrol--dressed > * { position:relative; z-index:1; }
.enrol-ring {
  position:absolute; right:clamp(-4rem,-2vw,-1rem); top:8%;
  width:clamp(8rem,17vw,15rem); height:auto;
  opacity:.85; pointer-events:none; z-index:0 !important;
}
.enrol-birds {
  display:block; width:clamp(9rem,18vw,13rem); height:auto;
  margin:0 auto .4rem;
}
.enrol-collection { margin:2rem auto 2.6rem; max-width:44rem; }
.enrol-collection img {
  width:100%; height:auto; display:block;
  filter:drop-shadow(0 26px 46px rgba(45,32,26,.26));
}
.enrol-collection figcaption {
  margin:1rem auto 0; max-width:34rem;
  font-size:.95rem; color:var(--muted); line-height:1.65;
}

/* ── Testimonials on her ceiling fresco ──────────────────────── */
/* max-width:none, then the measure put back on the children. A plain
   .band is a 66rem box centred in the page, so a ::before pinned to
   inset:0 stops at the box's edges and the plate ends in mid-air with
   bare page either side. This is the same two-step .band--alt and
   .band--fresco use, and it is the only way a background reaches the
   glass on a wide screen. */
.testimonials { position:relative; overflow:hidden; max-width:none; }
.testimonials > * {
  position:relative; z-index:1;
  max-width:calc(var(--shell) - 2*var(--gutter)); margin-inline:auto;
}
.testimonials::before {
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:url('images/fresco-ceiling.webp') center / cover no-repeat;
  opacity:.20;
  -webkit-mask-image:linear-gradient(to bottom, #000, transparent 68%);
          mask-image:linear-gradient(to bottom, #000, transparent 68%);
}
.notes img { width:100%; height:auto; display:block; }

/* ── FAQ seal ─────────────────────────────────────────────────── */
.faq-art--glyph { width:6rem; }
.faq-art--glyph img { border-radius:0; filter:none; width:100%; height:auto; }

@media (max-width:900px) {
  .hardway-grid { grid-template-columns:1fr; }
  .hardway-art { max-width:17rem; margin-inline:auto; }
  .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; }
  .enrol .subhead { letter-spacing:.10em; }
  .price .price-sub { letter-spacing:.10em; }
  .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; }
  /* On a phone the roundels would land on top of the headline they are
     meant to sit beside, so the absolutely-placed plates step back to
     faint watermarks and the in-flow ones simply shrink. */
  .premise-ring--centaur { width:8rem; right:-1.5rem; top:1%; opacity:.30; }
  .premise-glyph { width:9rem; left:-2.5rem; opacity:.10; }
  .enrol-ring { width:7.5rem; right:-1.5rem; top:3%; opacity:.28; }
  .premise-wheel { max-width:12rem; }
  .enrol-birds { width:8rem; }
  .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; }
}

/* ── Before you buy ───────────────────────────────────────────
   Step 7 terms next to the price rather than after the decision. Plain
   by design: this is the block that should read as information. */
.enrol-terms {
  margin:1.4rem auto 0; max-width:33rem; padding-top:1.1rem;
  border-top:1px solid var(--hair); text-align:left;
}
.enrol-terms .et-head {
  margin:0 0 .65rem; font-family:var(--sub); font-size:var(--caps-xs);
  letter-spacing:.2em; text-transform:uppercase; color:var(--muted);
}
.enrol-terms p {
  margin:0 0 .65rem; font-family:var(--body);
  font-size:.9rem; line-height:1.6; color:var(--muted);
}
.enrol-terms p:last-child { margin-bottom:0; }
.enrol-terms a { color:var(--ink); text-decoration:underline; text-underline-offset:.18em; }


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

   The page's design is unchanged. Two things only, so it sits in the
   same family as the new pages: the site's radius system (buttons are
   pills, cards 14px, inner boxes 12px, images 12px), and her fresco
   hung in the air behind the masthead, dissolving before it reaches
   the hero, exactly as it does on the other pages.
   ═══════════════════════════════════════════════════════════════════ */

/* ── the radius system ── */
.btn, .btn--ghost, .link-portal { border-radius:999px; }

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

.quad-art, .sc-star, .hero-weather, .split figure img,
.hardway-art img, .notes img { border-radius:12px; }

/* the hero portrait keeps its arch: that shape is the page's own */

/* ── 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); }
/* the page's own layers stay above it */
.topbar, main, .sitefoot { position:relative; z-index:1; }