/* cosmic.css: the warm cosmic look (14 Oct 2026, De'Andre for Rosemary: "it feels like an empty box";
   make it feel like home, warm, welcoming and magical, with her purples and the glowing pyramid).
   Loaded after every other sheet on the public pages and the Sanctuary (scripts/build-theme.mjs adds the
   link; admin, the reading room and the overlay keep the night look). It re-points the style.css tokens
   to a rich violet ground and adds the scene bands, the lavender day bands, purple glass, the ornaments
   and the restored homepage sections. Every colour lives in the first :root block (scripts/check.mjs).
   Text on a photograph always sits on a shade or on glass; contrast is measured against the token grounds. */
:root{
  /* the ground: deep indigo to violet instead of near-black */
  --night:#1d0b3a; --deep:#2a1052; --card:#2e1460; --card-2:#3a1a72;
  --violet:#3b1670; --plum:#5a2a8c; --orchid:#e79be6; --magenta:#c04fc4;
  /* text on violet: cream with a lavender lean. 15.5, 12.6 and 9.3 to 1 on --night; 6+ on --plum */
  --cream:#f6ecdc; --cream-2:#e0d3ea; --cream-3:#c4b4d6;
  --gold:#d4af37; --gold-2:#f0cf6a; --gold-fill:#d4af37; --gold-fill-2:#f0cf6a;
  --gold-line:rgba(240,207,106,.38); --gold-line-soft:rgba(240,207,106,.2);
  --line:rgba(224,211,234,.16);
  --rose:#f29ac6; --teal:#6fdada; --teal-line:rgba(111,218,218,.5); --on-gold:#1d0b3a;
  --r-m:14px; --r-l:20px;
  /* glass and light */
  --glass:rgba(46,20,96,.66); --glass-hi:rgba(90,42,140,.42); --glass-deep:rgba(29,11,58,.82);
  --glass-line:rgba(240,207,106,.3);
  --glow-gold:rgba(240,207,106,.34); --glow-gold-soft:rgba(240,207,106,.14); --glow-orchid:rgba(215,110,220,.32);
  --glow-violet:rgba(120,60,200,.45); --shade:rgba(20,6,44,.78); --shade-2:rgba(20,6,44,.5); --shade-0:rgba(29,11,58,0);
  --star:rgba(255,246,225,.95); --star-2:rgba(231,155,230,.75); --star-3:rgba(240,207,106,.8);
  /* the lavender day band: plum text, 14.4, 10.7 and 6.9 to 1 on --day; dark gold 5.5, dark teal 5.5 */
  --day:#f4ecfb; --day-wash:rgba(244,236,251,.66); --day-glass:rgba(255,250,255,.72);
  --plum-1:#2b1048; --plum-2:#45275f; --plum-3:#5e4778; --gold-dk:#7d5a08; --teal-dk:#136a69; --rose-dk:#9c3367;
  --plum-line:rgba(43,16,72,.16); --plum-line-2:rgba(125,90,8,.42); --white:#ffffff;
}

/* ---- the ground: a fixed violet sky with soft glows and star dust behind every page ---- */
html{background:var(--night)}
body{background-color:transparent}
body::before,body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none}
body::before{background:
  radial-gradient(60% 45% at 85% 8%,var(--glow-orchid),transparent 70%),
  radial-gradient(70% 50% at 8% 60%,var(--glow-violet),transparent 72%),
  radial-gradient(50% 40% at 70% 100%,var(--glow-gold-soft),transparent 70%),
  linear-gradient(180deg,var(--night),var(--violet) 55%,var(--night))}
body::after{opacity:.75;background-image:
  radial-gradient(1px 1px at 12px 24px,var(--star),transparent),radial-gradient(1px 1px at 92px 140px,var(--star),transparent),
  radial-gradient(1.5px 1.5px at 160px 60px,var(--star-3),transparent),radial-gradient(1px 1px at 210px 190px,var(--star-2),transparent),
  radial-gradient(1px 1px at 48px 210px,var(--star),transparent),radial-gradient(1.5px 1.5px at 250px 110px,var(--star),transparent),
  radial-gradient(1px 1px at 130px 250px,var(--star-3),transparent),radial-gradient(1px 1px at 280px 20px,var(--star-2),transparent);
  background-size:300px 300px}
@media (prefers-reduced-motion:no-preference){ body::after{animation:twinkle 9s ease-in-out infinite alternate} }
@keyframes twinkle{from{opacity:.45}to{opacity:.85}}
body.san::after{opacity:.5}

/* ---- type: a little light in the headings ---- */
h1,.display{text-shadow:0 0 28px var(--glow-orchid),0 0 2px var(--shade-2)}
h2,.title{text-shadow:0 0 22px var(--glow-violet)}
.label{color:var(--gold-2)}
.rule{background:linear-gradient(90deg,var(--gold),transparent);height:1px;width:72px}

/* ornaments: a gold star between two hairlines; the star is decoration, so screen readers skip it */
.orn{display:inline-flex;align-items:center;gap:var(--s2);font:400 var(--t-label)/var(--lh-label) var(--f-label);letter-spacing:.18em;text-transform:uppercase;color:var(--gold-2)}
.orn::before,.orn::after{content:"\2726" / "";font-size:10px;color:var(--gold)}
.orn-rule{display:flex;align-items:center;justify-content:center;gap:var(--s3);margin:0 auto;max-width:360px;color:var(--gold)}
.orn-rule::before,.orn-rule::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--gold-line))}
.orn-rule::after{background:linear-gradient(270deg,transparent,var(--gold-line))}
.orn-rule > span::before{content:"\2726" / "";font-size:14px;text-shadow:0 0 12px var(--glow-gold)}
.head-c{display:flex;flex-direction:column;align-items:center;gap:var(--s3);text-align:center;margin:0 auto var(--s6);max-width:720px}
.head-c .lead,.head-c .text-2{max-width:56ch}
.glyph{display:inline-grid;place-items:center;width:56px;height:56px;border-radius:var(--r-full);font-size:26px;line-height:1;
  background:radial-gradient(circle at 50% 40%,var(--glass-hi),var(--glass-deep));border:1px solid var(--glass-line);box-shadow:0 0 22px var(--glow-orchid)}

/* ---- buttons: warm gold pills with a soft glow ---- */
.btn{border-radius:var(--r-full)}
.btn-primary{background-color:var(--gold-fill);background-image:linear-gradient(180deg,var(--gold-fill-2),var(--gold-fill));color:var(--on-gold);box-shadow:0 0 0 1px var(--gold-line),0 6px 24px var(--glow-gold)}
.btn-primary:hover{background-color:var(--gold-fill-2);background-image:none}
.btn-secondary{background-color:var(--glass);border-color:var(--gold-line)}
.btn-secondary:hover{box-shadow:0 0 18px var(--glow-gold-soft)}
.btn-quiet{border-radius:var(--r-s)}

/* ---- surfaces: purple glass ---- */
.card,.panel,.glass{background-color:var(--glass);background-image:linear-gradient(160deg,var(--glass-hi),transparent 60%);border:1px solid var(--glass-line);border-radius:var(--r-m);box-shadow:0 18px 48px var(--shade-2),inset 0 1px 0 var(--gold-line-soft)}
.glass{padding:var(--card-pad)}
.scene .glass{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
a.card:hover{background-color:var(--card-2)}
.dialog-in,.toast{background-color:var(--card)}
.field input:not([type="checkbox"]):not([type="radio"]),.field textarea,.field select{border-radius:var(--r-s);background:var(--deep)}
.menu{background:linear-gradient(180deg,var(--night),var(--violet))}
.nav{background:color-mix(in srgb,var(--night) 82%,transparent);border-bottom-color:var(--gold-line-soft)}

/* ---- scene bands: a photograph behind a section, a shade over it, soft edges into the sky.
   The shade is the picture's own ::after, so a section's ::before and ::after stay free (the day band uses them). ---- */
.scene{position:relative;isolation:isolate}
.scene-bg{position:absolute;inset:0;z-index:-1;display:block;margin:0;overflow:hidden;background:var(--night) center/cover no-repeat}
.scene-bg img{width:100%;height:100%;object-fit:cover}
.scene-bg::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,var(--night) 0,var(--shade-2) 22%,var(--shade-2) 78%,var(--night) 100%)}
.scene-soft .scene-bg::after{background:linear-gradient(180deg,var(--night) 0,var(--shade-0) 20%,var(--shade-0) 80%,var(--night) 100%)}
.scene-dim .scene-bg::after{background:linear-gradient(180deg,var(--night) 0,var(--shade) 20%,var(--shade) 80%,var(--night) 100%)}
.scene .head-c{padding:var(--s4) var(--s3);border-radius:var(--r-l);background:radial-gradient(closest-side,var(--shade),transparent)}
.scene .head-c.glass{background-color:var(--glass);padding:var(--s5) var(--s4)}
.actions-c{justify-content:center}
.center-note{margin:var(--s5) auto 0;text-align:center}
.scene-bg[data-bg="pyramid"]{background-image:url(/assets/backgrounds/pyramid-lqip.webp)}
.scene-bg[data-bg="chakra"]{background-image:url(/assets/backgrounds/chakra-lqip.webp)}
.scene-bg[data-bg="sphinx"]{background-image:url(/assets/backgrounds/sphinx-lqip.webp)}
.scene-bg[data-bg="horus"]{background-image:url(/assets/backgrounds/horus-lqip.webp)}
.scene-bg[data-bg="altar"]{background-image:url(/assets/backgrounds/altar-lqip.webp)}
.scene-bg[data-bg="moonrise"]{background-image:url(/assets/backgrounds/moonrise-lqip.webp)}
.scene-bg[data-bg="temple"]{background-image:url(/assets/backgrounds/temple-lqip.webp)}
.scene-bg[data-bg="nebula"]{background-image:url(/assets/backgrounds/nebula-lqip.webp)}
.scene-bg[data-bg="dunes"]{background-image:url(/assets/backgrounds/dunes-lqip.webp)}
.scene-bg[data-bg="galaxy"]{background-image:url(/assets/backgrounds/galaxy-lqip.webp)}
.scene-bg[data-bg="nook"]{background-image:url(/assets/backgrounds/nook-lqip.webp)}
/* a page's opening band: the picture fills the top and fades into the sky */
.intro.scene,.hero.scene{padding-top:var(--s7);padding-bottom:var(--s7)}
@media (min-width:1024px){ .intro.scene,.hero.scene{padding-top:var(--s8);padding-bottom:var(--s8)} }

/* ---- the lavender day band: warm and light for reading, plum text, the same components ---- */
.day{position:relative;isolation:isolate;background-color:var(--day);color:var(--plum-1);
  --cream:var(--plum-1);--cream-2:var(--plum-2);--cream-3:var(--plum-3);--gold:var(--gold-dk);--gold-2:var(--gold-dk);
  --gold-line:var(--plum-line-2);--gold-line-soft:var(--plum-line);--line:var(--plum-line);--teal:var(--teal-dk);--rose:var(--rose-dk);
  --deep:var(--white);--card:var(--white);--card-2:var(--day);--glass:var(--day-glass);--glass-hi:var(--day-glass);--glass-line:var(--plum-line-2)}
.day::before,.day::after{content:"";position:absolute;left:0;right:0;height:72px;pointer-events:none;z-index:-1}
.day::before{top:-72px;background:linear-gradient(180deg,transparent,var(--day))}
.day::after{bottom:-72px;background:linear-gradient(0deg,transparent,var(--day))}
.day h1,.day h2,.day .title,.day .display{text-shadow:none}
.day .scene-bg{opacity:1;background-color:var(--day)}
.day .scene-bg img{opacity:.6}
.day .scene-bg::after{background:linear-gradient(180deg,var(--day) 0,var(--day-wash) 18%,var(--day-wash) 82%,var(--day) 100%)}
.day .scene .head-c,.day.scene .head-c{background:none}
.day .btn-primary{background-color:var(--gold-fill);background-image:linear-gradient(180deg,var(--gold-fill-2),var(--gold-fill));color:var(--plum-1)}
.day .btn-secondary{background-color:var(--white);color:var(--plum-1)}
.day .card,.day .panel,.day .glass{box-shadow:0 12px 36px var(--plum-line)}
.day .glyph{background:radial-gradient(circle at 50% 40%,var(--white),var(--day));box-shadow:0 0 18px var(--glow-orchid)}
.day .orn,.day .label{color:var(--gold-dk)}
.day + .block,.block + .day{padding-top:var(--section)}
.day.block{margin-block:72px}

/* ---- quiet legal lines (De'Andre, 14 Oct: smaller, still clear and conspicuous, right beside what they qualify;
   15 Oct: smaller again, muted, no rule, and the Reiki and Veil notes fold under one line, the legal text unchanged inside) ---- */
.disclosure{max-width:60ch;padding:0;border:0;background:none;font-size:var(--t-label);line-height:18px;color:var(--cream-3)}
.disclosure + .disclosure{margin-top:var(--s1)}
.note-fold{display:block}
.note-fold summary{display:flex;align-items:center;gap:var(--s2);min-height:var(--tap);cursor:pointer;list-style:none;font-size:var(--t6);line-height:var(--lh6);color:var(--cream-3)}
.note-fold summary::-webkit-details-marker{display:none}
.note-fold summary::before{content:"+" / "";display:inline-grid;place-items:center;width:18px;height:18px;border:1px solid var(--gold-line);border-radius:var(--r-full);font-size:12px;line-height:1;color:var(--gold)}
.note-fold[open] summary::before{content:"\2212" / ""}
.note-fold summary:hover{color:var(--cream-2)}
.note-fold > p{margin:0 0 var(--s2) 26px;max-width:60ch}
.offer .note-fold{width:100%}
/* a scene band that follows another block keeps its breathing room above the picture */
.block + .block.scene{padding-top:var(--section)}
.foot-legal .small{font-size:var(--t-label);line-height:18px}
.label-ai{font-size:var(--t6);line-height:var(--lh6)}
/* the AI notice: one line, the full text one tap away (a native details, so it works without script) */
.ai-note{max-width:var(--measure);font-size:var(--t6);line-height:var(--lh6);color:var(--cream-3)}
.ai-note summary{display:block;min-height:var(--tap);padding-block:12px;cursor:pointer;list-style:none}
.ai-note summary::-webkit-details-marker{display:none}
.ai-note summary .label-ai{display:inline;font-weight:500}
.ai-more{margin-left:var(--s1);color:var(--cream-2);text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--teal-line)}
.ai-note[open] .ai-more{display:none}
.ai-note > div{display:grid;gap:var(--s2);padding:0 0 var(--s3);color:var(--cream-3)}
.ai-note a{color:var(--cream-2);text-underline-offset:4px}
.bubble-ai.bubble-note{background-color:transparent;border-left-color:var(--line);padding-block:var(--s2)}
.bubble-note p{font-size:var(--t6);line-height:var(--lh6);color:var(--cream-3)}
.bubble-note .pill-ai{min-height:22px}

/* ---- nav: sub-menus on desktop (hover or keyboard focus), sub-links and glyphs in the phone sheet ---- */
.nav-item{position:relative;display:inline-flex}
.nav-sub{position:absolute;top:100%;left:-16px;z-index:var(--z-sheet);display:none;min-width:220px;padding:var(--s2);
  background:linear-gradient(170deg,var(--card-2),var(--night));border:1px solid var(--glass-line);border-radius:var(--r-m);box-shadow:0 18px 40px var(--shade)}
.nav-item:hover .nav-sub,.nav-item:focus-within .nav-sub{display:grid}
.nav-links .nav-sub a{padding:0 var(--s3);border-radius:var(--r-s);white-space:nowrap}
.nav-links .nav-sub a:hover{background:var(--glass-hi)}
.menu-sub{display:grid;padding:0 0 var(--s2) var(--s4)}
.menu nav .menu-sub a{min-height:var(--tap);border-bottom:0;font:400 var(--t5)/1.3 var(--f-body);color:var(--cream-2)}
.menu nav a::before,.nav-sub a::before{display:inline-block;width:1.6em;flex:none;font-size:15px;font-family:system-ui,sans-serif}
.menu nav a[href="/"]::before{content:"\1F3E0" / ""}
.menu nav a[href="/readings"]::before,.nav-sub a[href="/readings#tarot"]::before,.menu nav a[href="/readings#tarot"]::before{content:"\1F52E" / ""}
.nav-sub a[href="/readings#reiki"]::before,.menu nav a[href="/readings#reiki"]::before{content:"\1F33F" / ""}
.nav-sub a[href="/readings#veil"]::before,.menu nav a[href="/readings#veil"]::before{content:"\1F54A\FE0F" / ""}
.nav-sub a[href="/readings#live"]::before,.menu nav a[href="/readings#live"]::before{content:"\1F319" / ""}
.nav-sub a[href="/readings#ask"]::before,.menu nav a[href="/readings#ask"]::before{content:"\1F4AC" / ""}
.menu nav a[href="/oracle"]::before{content:"\1F319" / ""}
.menu nav a[href="/learn/"]::before,.nav-sub a[href="/learn/cards/"]::before,.menu nav a[href="/learn/cards/"]::before{content:"\1F0CF" / ""}
.nav-sub a[href="/today"]::before,.menu nav a[href="/today"]::before{content:"\2600\FE0F" / ""}
.nav-sub a[href="/blog"]::before,.menu nav a[href="/blog"]::before{content:"\1F4D6" / ""}
.menu nav a[href="/membership"]::before{content:"\1F49C" / ""}
.menu nav a[href="/signin"]::before,.menu nav a[href="/sanctuary/"]::before{content:"\1F56F\FE0F" / ""}
.menu nav a[href="/admin"]::before{content:"\1F511" / ""}
[data-moon-badge]{display:inline-flex;align-items:center}

/* ---- home: the hero over her pyramid ---- */
.hero-cosmic{min-height:calc(100svh - 64px);display:flex;align-items:flex-end}
.hero-cosmic > .wrap{position:relative}
.hero-cosmic .scene-bg::after{background:
  linear-gradient(180deg,var(--shade-2) 0,var(--shade-0) 12%,var(--shade-0) 26%,var(--shade-2) 46%,var(--shade) 68%,var(--night) 100%)}
.hero-cosmic .hero-bg img{object-position:50% 0}
.hero-cosmic .hero-text{gap:var(--s3)}
.hero-cosmic h1{text-shadow:0 0 32px var(--glow-orchid),0 2px 12px var(--shade)}
.hero-cosmic .card-plate::after{border-color:var(--gold-line)}
.hero-cosmic .card-plate img{box-shadow:0 0 40px var(--glow-gold),0 0 90px var(--glow-orchid)}
@media (min-width:1024px){
  .hero-cosmic{align-items:center}
  .hero-cosmic .scene-bg::after{background:
    linear-gradient(90deg,var(--shade) 0,var(--shade-2) 45%,var(--shade-0) 72%),
    linear-gradient(180deg,var(--shade-0) 72%,var(--night) 100%)}
  .hero-cosmic .hero-bg img{object-position:50% 30%}
}
.hero-parallax{will-change:transform}

/* the quote panel: her words, large, on glass with ornaments */
.quote-panel{position:relative;max-width:820px;margin:0 auto;padding:var(--s6) var(--s4);text-align:center}
.quote-panel blockquote{margin:0}
.quote-panel p{font:italic 400 26px/36px var(--f-display);color:var(--cream)}
.quote-panel cite{display:block;margin-top:var(--s3);font:400 var(--t-label)/var(--lh-label) var(--f-label);letter-spacing:.16em;text-transform:uppercase;font-style:normal;color:var(--gold-2)}
@media (min-width:768px){ .quote-panel p{font-size:32px;line-height:44px} .quote-panel{padding:var(--s7) var(--s7)} }

/* three, four or more tiles that stack on a phone and sit in a row from 768 */
.tri{display:grid;gap:var(--s3)}
@media (min-width:768px){ .tri{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4)} }
.tile-c{display:flex;flex-direction:column;align-items:center;gap:var(--s3);text-align:center}
.tile-c h3{font-size:var(--t3)}
.tile-c p{color:var(--cream-2)}

/* Choose your healing: three offers */
.offer{display:flex;flex-direction:column;gap:var(--s3);align-items:flex-start}
.offer .glyph{margin-bottom:var(--s1)}
.offer .from{font:400 var(--t4)/var(--lh4) var(--f-display);color:var(--gold-2)}
.offer .from .price{color:inherit}
.offer .btn{margin-top:auto}
.offer ul{display:grid;gap:var(--s1);color:var(--cream-2);font-size:15px}
.offer ul li::before{content:"\2726" / "";margin-right:var(--s2);font-size:10px;color:var(--gold)}

/* Sacred Guides: rows of small tiles; a sideways row on a phone */
.guides{display:grid;gap:var(--s6)}
.guide-group > .orn{display:flex;justify-content:center;margin-bottom:var(--s3)}
.guide-row{display:flex;gap:var(--s3);overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);padding:var(--s1) 0 var(--s3);scrollbar-width:none}
.guide-row::-webkit-scrollbar{display:none}
.guide-row > li{flex:0 0 72%;scroll-snap-align:start}
@media (min-width:768px){ .guide-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));overflow:visible} .guide-row > li{flex:auto} }
.guide{height:100%;display:flex;flex-direction:column;gap:var(--s2)}
.guide .glyph{width:48px;height:48px;font-size:22px}
.guide h3{font-size:22px;line-height:28px}
.guide p{font-size:15px;line-height:24px;color:var(--cream-2)}
.angels{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s2)}
.angels li{display:inline-flex;align-items:baseline;gap:var(--s2);padding:6px 14px;border:1px solid var(--glass-line);border-radius:var(--r-full);background-color:var(--glass);font-size:var(--t6);color:var(--cream-2)}
.angels b{font:500 18px/1 var(--f-display);color:var(--gold-2);font-variant-numeric:lining-nums}

/* membership on the homepage: three small tiers */
.tier-mini{display:flex;flex-direction:column;gap:var(--s2);align-items:center;text-align:center}
.tier-mini .price{font-size:40px;line-height:44px;color:var(--gold-2)}
.tier-mini ul{display:grid;gap:var(--s1);font-size:15px;color:var(--cream-2)}
.tier-mini ul li:nth-child(n+4){display:none}
.tier-mini-mid{border-color:var(--gold);box-shadow:0 0 36px var(--glow-gold-soft),0 18px 48px var(--shade-2)}

/* the blog and the list */
.teasers{display:grid;gap:var(--s3)}
@media (min-width:768px){ .teasers{grid-template-columns:repeat(3,minmax(0,1fr))} }
.teasers a{display:grid;gap:var(--s2);height:100%;text-decoration:none;color:var(--cream)}
.teasers h3{font-size:22px;line-height:28px}
.news{max-width:560px;margin:0 auto;text-align:center}
.news .row{flex-wrap:nowrap}
.news input{flex:1;min-width:0}
.news .field > label{text-align:left}

/* watch: two big doors */
.doors{display:flex;flex-wrap:wrap;gap:var(--s3);justify-content:center}

/* Today's card and the hero card get a stronger halo on violet */
.glow::before{background:radial-gradient(closest-side,var(--glow-gold),var(--glow-orchid) 55%,transparent)}

/* ---- footer: a darker plum floor with a gold horizon ---- */
.footer{position:relative;background:linear-gradient(180deg,transparent,var(--glass-deep) 30%,var(--night));border-top:1px solid var(--gold-line-soft)}
.footer::before{content:"";position:absolute;left:10%;right:10%;top:-1px;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent)}

/* ---- the Sanctuary: the same violet room, a candle-warm greeting ---- */
.san .rail{background:linear-gradient(180deg,var(--glass-deep),var(--shade-2))}
.san .topbar,.san .tabbar{background:color-mix(in srgb,var(--night) 90%,transparent)}
.san-head{position:relative;isolation:isolate;padding:var(--s4);margin-inline:calc(-1 * var(--s2));border-radius:var(--r-l);overflow:hidden;
  background-color:var(--glass);background-image:linear-gradient(180deg,var(--shade-2),var(--glass-deep)),url(/assets/backgrounds/nook-480.webp);background-size:cover;background-position:center 30%;border:1px solid var(--glass-line)}
@media (min-width:1024px){ .san-head{background-image:linear-gradient(90deg,var(--glass-deep) 30%,var(--shade-2)),url(/assets/backgrounds/altar-1280.webp);padding:var(--s5)} }

/* ---- the room: her candle altar (or, on a phone in the Sanctuary, sage in purple smoke) behind the glass of the Sanctuary
   and the admin (15 Oct 2026, DESIGN_SPEC §0b). /js/ambient.js shows the poster once the shell opens (the admin: once she is
   signed in) and loads the loop after the page is interactive; never behind a sign-in form, never under reduced motion or
   Save-Data. Dimmed and soft-edged, so the glass panels keep their contrast. ---- */
.san-ambient{position:fixed;inset:0;z-index:var(--z-base);pointer-events:none;overflow:hidden}
.san-ambient[hidden]{display:none}
.san-video{position:absolute;inset:-6%;width:112%;height:112%;object-fit:cover;opacity:.36;
  -webkit-mask-image:radial-gradient(ellipse 70% 62% at 50% 55%,var(--night) 40%,transparent 100%);mask-image:radial-gradient(ellipse 70% 62% at 50% 55%,var(--night) 40%,transparent 100%)}
.san-ambient::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,var(--shade-2),var(--shade-0) 35%,var(--shade-0) 65%,var(--shade))}
.san-glow{position:absolute;left:50%;bottom:-24vh;width:130vw;height:74vh;transform:translateX(-50%);border-radius:var(--r-full);
  background:radial-gradient(closest-side,var(--glow-gold),var(--glow-gold-soft) 46%,transparent 72%);opacity:.55;will-change:opacity,transform}
.san-wisp{position:absolute;left:61%;bottom:16vh;width:2px;height:150px;border-radius:var(--r-full);opacity:0;will-change:opacity,transform;
  background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--cream) 34%,transparent) 45%,transparent)}
.san-wisp-2{left:65%;height:120px}
@media (prefers-reduced-motion:no-preference){
  .san-glow{animation:candle-breathe 7s ease-in-out infinite alternate}
  .san-wisp{animation:wisp 12s ease-in-out infinite}
  .san-wisp-2{animation-delay:5s;animation-duration:15s}
}
@keyframes candle-breathe{from{opacity:.4;transform:translateX(-50%) scale(.96)}to{opacity:.68;transform:translateX(-50%) scale(1.04)}}
@keyframes wisp{0%{opacity:0;transform:translate3d(0,0,0) scaleY(.6)}18%{opacity:.6}55%{transform:translate3d(14px,-170px,0) rotate(6deg) scaleY(1.1)}100%{opacity:0;transform:translate3d(-12px,-320px,0) rotate(-8deg) scaleY(1.35)}}
@media (prefers-reduced-motion:reduce){ .san-video{display:none} }

@media (prefers-reduced-motion:reduce){ .hero-parallax{transform:none} }

/* fixes after the first look */
.guides > *,.guide-group,.tri > *{min-width:0}
@media (min-width:1024px){
  .hero-cosmic .hero-text{max-width:540px}
  .hero-cosmic .hero-art{justify-self:end}
}
/* a page's opening scene: the words sit on the darker side of the picture */
.intro.scene .scene-bg::after,.hero.scene:not(.hero-cosmic) .scene-bg::after{background:linear-gradient(180deg,var(--shade-2) 0,var(--shade) 45%,var(--shade) 80%,var(--night) 100%)}
@media (min-width:1024px){
  .intro.scene .scene-bg::after,.hero.scene:not(.hero-cosmic) .scene-bg::after{background:
    linear-gradient(90deg,var(--shade) 0,var(--shade) 30%,var(--shade-2) 55%,var(--shade-0) 80%),
    linear-gradient(180deg,var(--shade-0) 70%,var(--night) 100%)}
}

/* phones: a shorter opening band so her sentence and the first button share the first screen (the look builder's note, 15 Oct) */
@media (max-width:767.98px){ .hero-cosmic.scene{padding-top:var(--s5);padding-bottom:var(--s6)} }

/* ---- Rosie's crystal ball (15 Oct 2026): a living orb in her purples and gold. CSS does the swirl; js/rosie-orb.js only
   pauses it off screen and brightens it while she thinks. Animation is transform and opacity only; still under reduced motion.
   Sizes: .orb-hero (the Oracle page), .orb-mid (the homepage), .orb-small (the Sanctuary panel), .rosie-mark (the pill). ---- */
.rosie-orb{--orb:112px;position:relative;display:block;flex:none;width:var(--orb);height:var(--orb);border-radius:var(--r-full);overflow:hidden;isolation:isolate;
  background:radial-gradient(circle at 50% 42%,color-mix(in srgb,var(--orchid) 38%,var(--plum)) 0,var(--plum) 30%,var(--violet) 62%,var(--night) 100%);
  box-shadow:0 0 0 1px var(--gold-line-soft),inset 0 0 calc(var(--orb) / 5) var(--shade-2),0 0 calc(var(--orb) / 3) var(--glow-violet);
  transition:box-shadow .9s ease}
.rosie-orb > i{position:absolute;inset:-12%;border-radius:var(--r-full);pointer-events:none;will-change:transform,opacity}
.rosie-orb > i:nth-child(1){background:radial-gradient(38% 38% at 32% 36%,color-mix(in srgb,var(--orchid) 88%,transparent),transparent 72%);animation:orb-a 11s ease-in-out infinite}
.rosie-orb > i:nth-child(2){background:radial-gradient(34% 42% at 66% 62%,color-mix(in srgb,var(--gold-2) 78%,transparent),transparent 72%);animation:orb-b 14s ease-in-out infinite}
.rosie-orb > i:nth-child(3){background:conic-gradient(from 0deg,transparent 0 18%,color-mix(in srgb,var(--magenta) 75%,transparent) 30%,transparent 44% 66%,color-mix(in srgb,var(--gold-2) 62%,transparent) 80%,transparent 94%);opacity:.75;filter:blur(calc(var(--orb) / 14));animation:orb-c 26s linear infinite}
.rosie-orb::before{content:"";position:absolute;inset:0;z-index:2;border-radius:var(--r-full);background:radial-gradient(42% 28% at 36% 16%,var(--star),transparent 72%);opacity:.42;pointer-events:none}
.rosie-orb::after{content:"";position:absolute;inset:0;z-index:2;border-radius:var(--r-full);box-shadow:inset 0 calc(var(--orb) / -10) calc(var(--orb) / 4) var(--glow-gold-soft),inset 0 1px 0 var(--gold-line);pointer-events:none}
@keyframes orb-a{0%,100%{transform:translate(0,0) scale(1);opacity:.85}50%{transform:translate(16%,12%) scale(1.22);opacity:1}}
@keyframes orb-b{0%,100%{transform:translate(0,0) scale(1.1);opacity:.75}50%{transform:translate(-18%,-14%) scale(.9);opacity:1}}
@keyframes orb-c{to{transform:rotate(1turn)}}
.rosie-orb.is-thinking{box-shadow:0 0 0 1px var(--gold-line),inset 0 0 calc(var(--orb) / 5) var(--shade-2),0 0 calc(var(--orb) / 1.6) var(--glow-orchid),0 0 calc(var(--orb) / 4) var(--glow-gold)}
.rosie-orb.is-thinking > i:nth-child(1){animation-duration:3.6s}
.rosie-orb.is-thinking > i:nth-child(2){animation-duration:4.6s}
.rosie-orb.is-thinking > i:nth-child(3){animation-duration:9s;opacity:.8}
.rosie-orb.is-settled{box-shadow:0 0 0 1px var(--gold-line),inset 0 0 calc(var(--orb) / 5) var(--shade-2),0 0 calc(var(--orb) / 2.2) var(--glow-gold)}
.rosie-orb.is-off > i{animation-play-state:paused}
.orb-hero{--orb:clamp(112px,30vw,168px)}
.orb-mid{--orb:clamp(96px,24vw,128px)}
.orb-small{--orb:56px}
.rosie-mark{--orb:18px;display:inline-block;vertical-align:-4px;margin-right:7px;box-shadow:0 0 0 1px var(--gold-line-soft)}
.rosie-mark > i:nth-child(3){filter:blur(1px)}
.rosie-mark::before{opacity:.5}
.panel-head .rosie-orb{margin-right:var(--s2)}
.panel-head .orb-small + h2{flex:1}
@media (prefers-reduced-motion:reduce){ .rosie-orb > i{animation:none} .rosie-orb{transition:none} }