
:root{
  --bg:#050507;
  --bg2:#0a0610;
  --panel:rgba(20,10,22,.88);
  --panel2:rgba(10,6,13,.90);
  --text:#fff7fd;
  --muted:#e1d0df;
  --pink:#f85cb2;
  --pink-deep:#ff3f9d;
  --pink-soft:#ff84c6;
  --ink:#090609;
  --border:rgba(255,255,255,.09);
  --shadow:0 18px 48px rgba(0,0,0,.38);
  --max:1120px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:linear-gradient(180deg,#050507,#0b0410 55%,#050507);color:var(--text);font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;min-height:100vh;overflow-x:hidden;position:relative}
a{color:inherit;text-decoration:none}img{display:block;max-width:100%}button{font:inherit}.container{width:min(calc(100% - 1.2rem),var(--max));margin:auto}

/* ambient background */
.smoke-stage{position:fixed;inset:0;z-index:-3;overflow:hidden;pointer-events:none}
.cloud{position:absolute;border-radius:50%;filter:blur(50px);opacity:.38;animation:smokeMove 18s ease-in-out infinite alternate}
.cloud.pink1{width:32rem;height:15rem;background:rgba(165,13,92,.72);left:-7rem;top:3.5rem}
.cloud.black1{width:34rem;height:16rem;background:rgba(14,7,18,.92);right:-10rem;top:11rem;animation-duration:22s}
.cloud.pink2{width:26rem;height:14rem;background:rgba(130,8,73,.75);right:9%;bottom:7rem;animation-duration:20s}
.cloud.black2{width:24rem;height:12rem;background:rgba(26,11,32,.82);left:8%;bottom:2rem;animation-duration:24s}
.cloud.pink3{width:22rem;height:11rem;background:rgba(248,92,178,.18);left:35%;top:22%;animation-duration:16s}
@keyframes smokeMove{from{transform:translate(0,0) scale(1)}to{transform:translate(2.5rem,-1rem) scale(1.15)}}

/* visible page-to-page smoke wash */
.page-wash{position:fixed;inset:0;z-index:120;pointer-events:none;opacity:0;transition:opacity .42s ease}
.page-wash.show{opacity:1}
.page-wash .wash-bg{position:absolute;inset:0;background:rgba(6,4,8,.42);backdrop-filter:blur(3px)}
.page-wash .wash-cloud{position:absolute;border-radius:50%;filter:blur(44px);opacity:.9}
.page-wash .wash1{width:24rem;height:13rem;background:rgba(255,69,160,.32);left:-4rem;top:5rem}
.page-wash .wash2{width:28rem;height:14rem;background:rgba(10,7,12,.90);right:-6rem;top:11rem}
.page-wash .wash3{width:22rem;height:12rem;background:rgba(206,30,122,.26);left:25%;bottom:7rem}
.page-wash .wash4{width:18rem;height:9rem;background:rgba(11,8,13,.92);right:18%;bottom:5rem}

.topbar{position:sticky;top:0;z-index:40;background:rgba(8,5,10,.78);backdrop-filter:blur(14px);border-bottom:1px solid rgba(255,255,255,.06)}
.topbar-inner{display:flex;align-items:center;justify-content:space-between;padding:.85rem 0;gap:1rem}
.brand{display:flex;align-items:center;gap:.8rem}
.logo-circle,.mini-logo{width:3.35rem;height:3.35rem;border-radius:50%;overflow:hidden;flex:none;background:transparent}
.logo-circle img,.mini-logo img{width:100%;height:100%;object-fit:cover;transform:scale(1.12)}
.brand b{font-size:1.08rem;display:block}
.brand small{display:block;color:var(--muted);font-size:.8rem;margin-top:.06rem}
.menu-btn{width:3rem;height:3rem;border:1px solid var(--border);border-radius:1rem;background:rgba(255,255,255,.03);color:#fff;font-size:1.5rem;display:grid;place-items:center;cursor:pointer}
.menu{position:fixed;right:0;top:0;bottom:0;width:min(88vw,24rem);z-index:60;background:rgba(10,6,11,.985);border-left:1px solid var(--border);transform:translateX(100%);transition:.24s;padding:1rem;overflow:auto}
.menu.open{transform:translateX(0)}
.menu a{display:block;padding:.9rem 1rem;margin:.45rem 0;border-radius:1rem;border:1px solid var(--border);background:rgba(255,255,255,.03);font-weight:800}
.menu a span{display:block;color:var(--muted);font-size:.82rem;margin-top:.18rem;font-weight:500}
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.48);z-index:50;opacity:0;pointer-events:none;transition:.24s}
.scrim.show{opacity:1;pointer-events:auto}

.hero,.page-hero,.witch-hero,.divine-hero{padding:3.5rem 0 1.3rem}
.panel,.card,.feature-card,.verse-card,.info-card{background:linear-gradient(180deg,rgba(23,11,27,.90),rgba(10,6,13,.92));border:1px solid var(--border);border-radius:1.7rem;box-shadow:var(--shadow)}
.panel,.card,.feature-card,.info-card{padding:1.3rem}
.eyebrow{text-transform:uppercase;letter-spacing:.22em;font-weight:900;font-size:.77rem;color:var(--pink-soft)}
h1{font-size:clamp(2.55rem,11vw,5rem);line-height:.94;margin:.5rem 0 .85rem} 
p,.text{color:#f2e7ef;line-height:1.68;font-size:1.02rem}
.actions{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:1rem}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:.92rem 1.1rem;border-radius:999px;font-weight:900;background:linear-gradient(90deg,var(--pink-deep),var(--pink-soft));color:#160b10;box-shadow:0 10px 24px rgba(248,92,178,.18)}
.btn.alt{background:rgba(255,255,255,.03);border:1px solid var(--border);color:var(--text);box-shadow:none}
.btn.small{padding:.75rem 1rem;font-size:.95rem}
.helper{margin-top:.95rem;color:var(--muted);font-size:.95rem}

.section{padding:1.15rem 0}
.section-head{margin-bottom:1rem}
.paint-title{position:relative;display:inline-block;z-index:1;margin:.15rem 0 .65rem;font-size:clamp(1.8rem,6vw,2.75rem);line-height:1.05;font-weight:950;color:#0f0810;padding:.18rem .62rem .26rem}
.paint-title::before{content:"";position:absolute;z-index:-1;inset:-.24em -.7em -.24em -.7em;background:url('assets/paint-stroke-pink.png?v=4') center/100% 100% no-repeat}
.paint-title.splatter::after{content:"";position:absolute;width:1rem;height:1rem;border-radius:50%;background:#0b070d;right:-.8rem;top:-.35rem;box-shadow:.85rem .55rem 0 -.2rem #0b070d,1.55rem -.1rem 0 -.35rem #0b070d;opacity:.88}
.section-head p{margin:.35rem 0 0;color:var(--muted)}
.grid{display:grid;gap:1rem}.two{grid-template-columns:repeat(auto-fit,minmax(270px,1fr))}.three{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.card h3,.feature-card h3{font-size:1.35rem;margin:.1rem 0 .55rem}
.card h4{margin:.2rem 0 .35rem;font-size:1rem}
.pill,.tag{display:inline-flex;align-items:center;padding:.6rem .9rem;border-radius:999px;border:1px solid var(--border);background:rgba(255,255,255,.035);font-weight:760;margin:.25rem .35rem .25rem 0}
.note-stack{display:grid;gap:.75rem;margin-top:1rem}
.note-card,.platform,.social,.resource-link,.booking-item,.reading-item,.viewing-item,.tool-card{padding:.95rem;border-radius:1rem;border:1px solid var(--border);background:rgba(255,255,255,.03)}
.platform b,.social b,.resource-link b,.booking-item b,.reading-item b,.viewing-item b,.tool-card b{display:block;font-size:1rem;margin-bottom:.18rem}
.platform span,.social span,.resource-link span,.booking-item span,.reading-item span,.viewing-item span,.tool-card span{display:block;font-size:.9rem;color:var(--muted);line-height:1.55}
.platforms,.socials,.resource-grid,.tool-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.7rem;margin-top:.8rem}
.feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1rem}
.feature-card{position:relative;overflow:hidden}
.feature-card::after{content:"";position:absolute;right:-1.2rem;bottom:-1rem;width:7rem;height:7rem;border-radius:50%;background:radial-gradient(circle,rgba(248,92,178,.18),transparent 66%);pointer-events:none}
.feature-label{text-transform:uppercase;letter-spacing:.18em;color:var(--pink-soft);font-size:.78rem;font-weight:900}
.feature-title{font-family:Georgia,serif;font-size:clamp(1.5rem,4.5vw,2.2rem);margin:.3rem 0 .7rem}
.inline-list{padding-left:1.2rem;margin:.7rem 0 0;color:#f2e7ef;line-height:1.7}
.inline-list li{margin:.35rem 0}

/* niblings */
.nibling{position:fixed;right:.68rem;bottom:.68rem;z-index:30;width:84px;height:84px;border:0;background:transparent;padding:0;cursor:pointer;animation:bob 4.5s ease-in-out infinite}
.nibling img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 8px 14px rgba(0,0,0,.45))}
.bubble{position:fixed;right:.85rem;bottom:6.5rem;z-index:31;max-width:16rem;display:none;padding:.85rem .95rem;border-radius:1rem;background:rgba(18,9,19,.97);border:1px solid var(--border);box-shadow:var(--shadow)}
.bubble.show{display:block}
@keyframes bob{50%{transform:translateY(-8px)}}

.footer{padding:2.2rem 0 3.5rem;color:var(--muted)}
.footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem}.kicker{color:var(--pink-soft);font-weight:900;letter-spacing:.14em;text-transform:uppercase;font-size:.8rem}

/* page-specific */
.hero-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(260px,.8fr);gap:1rem;align-items:stretch}
.hero-side{display:grid;gap:1rem}
.hero-box{padding:1rem;border-radius:1.2rem;border:1px solid var(--border);background:rgba(255,255,255,.03)}
.hero-box strong{display:block;font-size:1rem;margin-bottom:.25rem}
.hero-box span{display:block;color:var(--muted);line-height:1.55}
.callout{margin-top:1rem;padding:1rem;border-radius:1.2rem;border:1px dashed rgba(248,92,178,.34);background:rgba(248,92,178,.07)}

.witch-panel{position:relative;overflow:hidden;padding:1.5rem;border-radius:1.8rem;border:1px solid var(--border);background:linear-gradient(180deg,rgba(13,8,15,.96),rgba(8,5,10,.94));box-shadow:var(--shadow)}
.witch-panel::before{content:"";position:absolute;inset:auto -10% -18% auto;width:16rem;height:16rem;border-radius:50%;background:radial-gradient(circle,rgba(248,92,178,.16),transparent 65%)}
.witch-smoke{position:absolute;inset:0;pointer-events:none;z-index:1}
.witch-smoke::before,.witch-smoke::after{content:"";position:absolute;border-radius:50%;filter:blur(36px);opacity:.55;animation:clearSmoke 4.8s ease forwards}
.witch-smoke::before{width:18rem;height:10rem;left:-3rem;top:1rem;background:rgba(248,92,178,.20)}
.witch-smoke::after{width:17rem;height:10rem;right:-3rem;top:4rem;background:rgba(10,7,12,.92)}
@keyframes clearSmoke{0%{opacity:.7;transform:scale(1)}100%{opacity:.18;transform:translateX(1.35rem) scale(1.12)}}
.witch-content{position:relative;z-index:2}
.witch-title{font-family:Georgia,serif;font-size:clamp(2.7rem,12vw,5.1rem);line-height:.9;margin:.5rem 0 .6rem;letter-spacing:.03em}
.witch-sub{font-family:Georgia,serif;font-size:clamp(1.05rem,4.4vw,1.55rem);color:#f4dfe9;margin-bottom:1rem}
.verse-card{margin-top:1rem;padding:1.1rem;border-radius:1.35rem;border:1px solid rgba(248,92,178,.32);background:linear-gradient(180deg,rgba(77,10,49,.26),rgba(255,255,255,.02))}
.day-label{font-size:.75rem;text-transform:uppercase;letter-spacing:.18em;font-weight:900;color:var(--pink-soft)}
.verse-ref{font-family:Georgia,serif;font-size:1.6rem;margin:.35rem 0 .45rem}
.verse-why{color:#f0e3ee;line-height:1.6;margin-bottom:.85rem}
.passage-box{padding:1rem;border-radius:1rem;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.03)}
.passage-box p{margin:.45rem 0;line-height:1.7}
.search-grid{display:grid;grid-template-columns:1.4fr .8fr .8fr;gap:.7rem;margin-top:1rem}.fake-field{padding:.95rem 1rem;border-radius:1rem;border:1px solid var(--border);background:rgba(255,255,255,.03);color:#f1e8ef}
.tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.8rem}.hand-card{padding:1rem 1.05rem;border-radius:1.2rem;border:1px solid var(--border);background:rgba(255,255,255,.025)}.hand-card b{color:var(--pink-soft)}

.divine-name{font-family:Georgia,serif;font-size:clamp(2.1rem,9vw,4rem);line-height:1;margin:.45rem 0 1rem;display:inline-block;position:relative;color:#0d0810;padding:.22rem .68rem;z-index:1}.divine-name::before{content:"";position:absolute;inset:-.26em -.7em;z-index:-1;background:url('assets/paint-stroke-pink.png?v=4') center/100% 100% no-repeat}

.resource-link{display:block}
.small-note{font-size:.88rem;color:var(--muted)}
.reading-list,.viewing-list{display:grid;gap:.7rem}

@media(max-width:860px){
  .hero-grid,.footer-grid{grid-template-columns:1fr}
  .search-grid{grid-template-columns:1fr}
}
@media(max-width:620px){
  .hero,.page-hero,.witch-hero,.divine-hero{padding:2.7rem 0 1rem}
  .nibling{width:78px;height:78px}
  .paint-title::before{inset:-.22em -.52em -.22em -.52em}
}
