/* ═══════════════════════════════════════════════════════════════════
   money-luck-bundle — 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:.22em; 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; }
}


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