/* Akashic Soul Contract Explorer · Magical Healings
   Emerald + antique gold (the Akashic Healing Oracle's own colours), ivory reading pages.
   Type: Marcellus (display) · Cormorant Garamond (voice/quotes) · Jost (interface). */
:root{
  --em-950:#081B15; --em-900:#0B231C; --em-850:#0F2C24; --em-800:#133629; --em-700:#1A4536; --em-600:#245C48; --em-500:#2F7A60; --em-300:#8FB3A3; --em-200:#BFD3C8;
  --gold:#D4A84B; --gold-2:#EBCB7A; --gold-3:#F6E3AE; --gold-deep:#9E7724;
  --ivory:#F8F2E4; --ivory-2:#EFE6D0; --ink:#1B2A22; --ink-2:#44564C; --ink-3:#6E7D74;
  --plum:#6B2A4A;
  --text:#F4EEDF; --text-2:#BFD3C8; --text-3:#8FB3A3; --line:rgba(235,203,122,.22); --line-2:rgba(235,203,122,.45);
  --display:"Marcellus",Georgia,serif; --voice:"Cormorant Garamond",Georgia,serif; --ui:"Jost",system-ui,-apple-system,"Segoe UI",sans-serif;
  --r:18px; --shadow:0 22px 60px rgba(2,10,7,.55); --tab:62px; --ease:cubic-bezier(.2,.8,.2,1);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;color:var(--text);font:400 16px/1.65 var(--ui);background:var(--em-900);
  padding-bottom:calc(var(--tab) + env(safe-area-inset-bottom))}
body:before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(900px 600px at 50% -10%,rgba(47,122,96,.55),transparent 65%),
    radial-gradient(700px 500px at 100% 100%,rgba(212,168,75,.10),transparent 60%),
    radial-gradient(1.2px 1.2px at 12% 18%,rgba(246,227,174,.7),transparent 60%),
    radial-gradient(1px 1px at 78% 12%,rgba(246,227,174,.6),transparent 60%),
    radial-gradient(1.4px 1.4px at 64% 42%,rgba(246,227,174,.5),transparent 60%),
    radial-gradient(1px 1px at 22% 66%,rgba(246,227,174,.5),transparent 60%),
    radial-gradient(1.2px 1.2px at 88% 72%,rgba(246,227,174,.6),transparent 60%),
    radial-gradient(1px 1px at 40% 88%,rgba(246,227,174,.45),transparent 60%),
    var(--em-900)}
body.ritual{padding-bottom:0}
img{max-width:100%;height:auto;display:block}
a{color:var(--gold-2)}
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.15;margin:0 0 .5em;letter-spacing:.01em}
h1{font-size:clamp(2.2rem,7.5vw,3.6rem)}
h2{font-size:clamp(1.7rem,5vw,2.4rem)}
h3{font-size:1.35rem}
p{margin:0 0 1em}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.skip{position:absolute;left:-999px;top:0;background:var(--gold);color:var(--em-900);padding:.6em 1em;z-index:99}
.skip:focus{left:8px;top:8px}
:focus-visible{outline:2px solid var(--gold-2);outline-offset:3px;border-radius:8px}
main{outline:none}
.ico{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* ---------- chrome ---------- */
.top{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:.8rem;padding:.65rem 1rem;
  background:rgba(11,35,28,.78);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:.55rem;text-decoration:none;color:var(--text);min-width:0}
.brand img{width:34px}
.brand b{display:block;font:400 1.05rem/1.1 var(--display);letter-spacing:.03em}
.brand small{display:block;font-size:.68rem;color:var(--text-3);letter-spacing:.08em}
.topnav{display:none;margin-left:auto;gap:1.4rem}
.topnav a{color:var(--text-2);text-decoration:none;font-size:.9rem;letter-spacing:.03em}
.topnav a:hover,.topnav a[aria-current]{color:var(--gold-2)}
.menu-btn{margin-left:auto;background:none;border:1px solid var(--line);color:var(--text);border-radius:12px;width:42px;height:42px;display:grid;place-items:center;cursor:pointer}
.leave{display:none;margin-left:auto;align-items:center;gap:.35rem;color:var(--text-2);text-decoration:none;font-size:.88rem}
body.ritual .topnav,body.ritual .menu-btn,body.ritual .tabbar{display:none}
body.ritual .leave{display:inline-flex}
@media(min-width:960px){.topnav{display:flex}.menu-btn{display:none}body:not(.ritual) .tabbar{display:none}body{padding-bottom:0}}

.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:40;display:grid;grid-template-columns:repeat(4,1fr);
  height:calc(var(--tab) + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);
  background:rgba(8,27,21,.94);backdrop-filter:blur(14px);border-top:1px solid var(--line)}
.tabbar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:var(--text-3);text-decoration:none;font-size:.7rem;letter-spacing:.06em}
.tabbar a[aria-current]{color:var(--gold-2)}
.sheet{position:fixed;inset:0;z-index:50;background:rgba(3,12,9,.6);display:flex;align-items:flex-end}
.sheet-panel{width:100%;background:var(--em-850);border-top:1px solid var(--line);border-radius:24px 24px 0 0;padding:1.2rem 1.2rem calc(1.2rem + env(safe-area-inset-bottom))}
.sheet-panel a{display:flex;align-items:center;gap:.8rem;padding:.95rem .3rem;color:var(--text);text-decoration:none;border-bottom:1px solid rgba(255,255,255,.06);font-size:1.02rem}
.sheet-panel a .ico{color:var(--gold-2)}

/* ---------- layout ---------- */
.wrap{max-width:1080px;margin:0 auto;padding:0 1.15rem}
.col{max-width:620px;margin:0 auto;padding:0 1.15rem}
.center{text-align:center}
.eyebrow{display:inline-block;font:500 .74rem var(--ui);letter-spacing:.22em;text-transform:uppercase;color:var(--gold-2);margin-bottom:1rem}
.lead{font-size:clamp(1.02rem,2.6vw,1.15rem);color:var(--text-2);line-height:1.7}
.voice{font-family:var(--voice);font-style:italic}
.muted{color:var(--text-3)}
.small{font-size:.86rem}
.gold-rule{display:flex;align-items:center;justify-content:center;gap:.8rem;color:var(--gold);margin:1.4rem 0}
.gold-rule:before,.gold-rule:after{content:"";height:1px;width:64px;background:linear-gradient(90deg,transparent,var(--gold))}
.gold-rule:after{transform:scaleX(-1)}

/* ---------- buttons ---------- */
.btn{position:relative;overflow:hidden;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:1rem 1.8rem;border-radius:999px;border:1px solid transparent;cursor:pointer;text-decoration:none;
  font:500 .95rem var(--ui);letter-spacing:.14em;text-transform:uppercase;transition:transform .25s var(--ease),box-shadow .3s,background .3s,border-color .3s}
.btn:active{transform:scale(.97)}
.btn-gold{background:linear-gradient(135deg,var(--gold-3),var(--gold) 50%,var(--gold-deep));color:#1E1A0E;box-shadow:0 10px 30px rgba(212,168,75,.3)}
.btn-gold:before{content:"";position:absolute;top:0;left:-80%;width:55%;height:100%;z-index:-1;background:linear-gradient(110deg,transparent,rgba(255,255,255,.7),transparent);transform:skewX(-20deg);transition:left .8s var(--ease)}
.btn-gold:hover,.btn-gold:focus-visible{transform:translateY(-2px);box-shadow:0 16px 42px rgba(212,168,75,.5)}
.btn-gold:hover:before,.btn-gold:focus-visible:before{left:135%}
.btn-ghost{background:rgba(255,255,255,.02);color:var(--text);border-color:var(--line-2)}
.btn-ghost:hover,.btn-ghost:focus-visible{transform:translateY(-2px);border-color:var(--gold-2);background:rgba(235,203,122,.08)}
.btn-ink{background:var(--em-850);color:var(--gold-3)}
.btn-ink:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(11,35,28,.35)}
.btn-sm{padding:.7rem 1.2rem;font-size:.8rem}
.btn-block{display:flex;width:100%}
.btn-row{display:flex;flex-wrap:wrap;gap:.8rem}
.center .btn-row{justify-content:center}
.breathe-btn{animation:halo 3s ease-in-out infinite}
.breathe-btn:hover{animation:none}
@keyframes halo{0%,100%{box-shadow:0 10px 30px rgba(212,168,75,.3),0 0 0 0 rgba(235,203,122,.45)}50%{box-shadow:0 10px 30px rgba(212,168,75,.3),0 0 0 14px rgba(235,203,122,0)}}
.link{background:none;border:0;padding:0;color:var(--gold-2);font:inherit;cursor:pointer;text-decoration:underline;text-underline-offset:3px}

/* ---------- home ---------- */
.hero{padding:clamp(2rem,7vw,4.5rem) 0 2rem;text-align:center}
.hero h1{max-width:13ch;margin:0 auto .4em}
.hero h1 em{font-style:normal;background:linear-gradient(100deg,var(--gold-2),var(--gold-3) 45%,var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .lead{max-width:34em;margin:0 auto 1.6rem}
.shimmer{background:linear-gradient(90deg,var(--gold-deep),var(--gold-2) 25%,#FFF6D8 50%,var(--gold-2) 75%,var(--gold-deep));background-size:200% auto;
  -webkit-background-clip:text;background-clip:text;color:transparent;animation:shimmer 6s linear infinite}
@keyframes shimmer{to{background-position:-200% center}}
.portal{position:relative;width:min(220px,40vw);margin:0 auto 1.8rem;display:block}
.portal:before{content:"";position:absolute;inset:-22%;border-radius:50%;background:radial-gradient(circle,rgba(235,203,122,.35),rgba(47,122,96,.25) 45%,transparent 70%);animation:glow 5s ease-in-out infinite}
.portal img{position:relative;border-radius:14px;box-shadow:var(--shadow);border:1px solid var(--line-2);animation:float 6s ease-in-out infinite}
@keyframes glow{0%,100%{opacity:.7;transform:scale(.95)}50%{opacity:1;transform:scale(1.05)}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.path{display:flex;justify-content:center;align-items:center;gap:.5rem;flex-wrap:wrap;margin:1.4rem 0 0;font:400 .8rem var(--ui);letter-spacing:.2em;text-transform:uppercase;color:var(--text-2)}
.path i{width:4px;height:4px;border-radius:50%;background:var(--gold)}
.micro{margin-top:.9rem;font-size:.8rem;letter-spacing:.12em;color:var(--text-3)}
.quote-band{padding:2.5rem 0;text-align:center}
.quote-band p{font:italic 500 clamp(1.45rem,4.4vw,2rem)/1.35 var(--voice);color:var(--text);max-width:22em;margin:0 auto .6rem}
.quote-band small{font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-2)}
.today{display:grid;grid-template-columns:62px 1fr auto;gap:1rem;align-items:center;text-decoration:none;color:var(--text);
  padding:1rem 1.1rem;border:1px solid var(--line);border-radius:var(--r);background:rgba(255,255,255,.03);margin:0 auto 2.5rem;max-width:620px;transition:border-color .3s,transform .3s var(--ease)}
.today:hover{border-color:var(--line-2);transform:translateY(-2px)}
.today img{width:62px;border-radius:8px}
.today small{display:block;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-2)}
.today b{display:block;font:400 1.2rem var(--display)}
.today em{font:italic 500 1rem/1.4 var(--voice);color:var(--text-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.today .ico{color:var(--gold-2)}

/* ---------- ritual flow ---------- */
.flow{padding:1.6rem 0 3rem;min-height:calc(100vh - 70px)}
.steps{display:flex;justify-content:center;gap:.4rem;margin:0 auto 2rem;max-width:360px}
.steps span{flex:1;text-align:center;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text-3);padding-top:.55rem;border-top:2px solid rgba(255,255,255,.12);transition:color .3s,border-color .3s}
.steps span.on{color:var(--gold-2);border-color:var(--gold)}
.flow h1{font-size:clamp(2rem,6.5vw,2.9rem)}
textarea,input[type=text],input[type=number]{width:100%;background:rgba(255,255,255,.04);border:1px solid var(--line-2);border-radius:16px;color:var(--text);font:400 1.05rem/1.55 var(--voice);padding:1rem 1.1rem;resize:vertical;transition:border-color .2s,background .2s}
textarea:focus,input:focus{outline:none;border-color:var(--gold-2);background:rgba(255,255,255,.07)}
textarea::placeholder,input::placeholder{color:#7FA192;font-style:italic}
.tip{display:flex;gap:.6rem;font-size:.86rem;color:var(--text-2);background:rgba(235,203,122,.07);border:1px solid var(--line);border-radius:14px;padding:.8rem .9rem;margin:1rem 0}
.tip b{color:var(--gold-2);font-weight:500}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin:.6rem 0 1.4rem}
.chip{border:1px solid var(--line);background:transparent;color:var(--text-2);border-radius:999px;padding:.5rem .95rem;font:400 .88rem var(--ui);cursor:pointer;transition:all .2s}
.chip:hover{border-color:var(--line-2);color:var(--text)}
.chip[aria-pressed="true"]{background:rgba(235,203,122,.16);border-color:var(--gold-2);color:var(--gold-3)}
.label{display:block;font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--text-3);margin:1.2rem 0 .3rem}
.private{font-size:.8rem;color:var(--text-3);margin-top:.5rem;display:flex;align-items:center;gap:.4rem}
.private .ico{width:15px;height:15px}

.breath{position:relative;width:min(240px,62vw);aspect-ratio:1;margin:2rem auto 1.6rem;display:grid;place-items:center}
.breath .ring{position:absolute;inset:0;border-radius:50%;border:1px solid var(--line-2);background:radial-gradient(circle,rgba(235,203,122,.28),rgba(47,122,96,.3) 55%,transparent 72%);transform:scale(.62);transition:transform 4s ease-in-out}
.breath.in .ring{transform:scale(1)}
.breath .ring2{position:absolute;inset:-10%;border-radius:50%;border:1px dashed rgba(235,203,122,.25);animation:spin 40s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.breath b{position:relative;font:italic 500 1.35rem var(--voice);color:var(--gold-3)}
.breath-count{font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-2);margin-bottom:.3rem}
.breath-line{font:italic 500 1.35rem/1.4 var(--voice);color:var(--text);min-height:3.8em;max-width:20em;margin:0 auto}

.deck{position:relative;width:min(190px,48vw);aspect-ratio:479/686;margin:2.2rem auto 2rem}
.deck img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:12px;border:1px solid var(--line-2);box-shadow:0 10px 24px rgba(0,0,0,.35);transition:transform .35s var(--ease)}
.deck.riffle img:nth-child(odd){animation:riffL .7s var(--ease) 3}
.deck.riffle img:nth-child(even){animation:riffR .7s var(--ease) 3}
@keyframes riffL{40%{transform:translateX(-62%) rotate(-10deg)}}
@keyframes riffR{40%{transform:translateX(62%) rotate(10deg)}}

.spread{position:relative;height:clamp(240px,58vw,340px);margin:1.6rem auto .6rem;max-width:720px}
.spread button{position:absolute;bottom:0;left:50%;width:clamp(96px,22vw,150px);aspect-ratio:479/686;border:0;padding:0;background:none;cursor:pointer;border-radius:11px;
  transform-origin:50% 150%;transition:transform .6s var(--ease),filter .25s;filter:drop-shadow(0 12px 18px rgba(0,0,0,.45))}
.spread button img{width:100%;height:100%;object-fit:cover;border-radius:11px;border:1px solid var(--line-2)}
.spread button:hover,.spread button:focus-visible{filter:drop-shadow(0 0 24px rgba(235,203,122,.65))}
.numdraw{max-width:300px;margin:1rem auto 0;display:flex;gap:.6rem}
.numdraw input{text-align:center;font:400 1.3rem var(--display)}

.reveal{perspective:1500px;width:min(290px,70vw);margin:1rem auto 1.2rem}
.flip{position:relative;aspect-ratio:600/857;transform-style:preserve-3d;transition:transform 1.4s var(--ease)}
.flip.on{transform:rotateY(180deg)}
.flip.on.rev{transform:rotateY(180deg) rotateZ(180deg)}
.flip img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:14px;backface-visibility:hidden;box-shadow:var(--shadow)}
.flip .front{transform:rotateY(180deg)}
.card-meta{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-2)}
.card-name{font:400 clamp(1.9rem,6vw,2.7rem)/1.12 var(--display);margin:.35rem 0 .3rem;color:#fff}
.rev-badge{display:inline-block;margin-left:.5rem;padding:.15rem .55rem;border:1px solid var(--line-2);border-radius:999px;font-size:.66rem;color:var(--gold-3)}

/* ---------- gate ---------- */
.gate{max-width:500px;margin:1.6rem auto 0;background:var(--ivory);color:var(--ink);border-radius:22px;padding:1.5rem 1.3rem 1.3rem;box-shadow:var(--shadow);text-align:left}
#named{scroll-margin-top:76px}
.teaser{position:relative;max-height:96px;overflow:hidden;margin-bottom:1rem;user-select:none}
.teaser p{filter:blur(4.5px);margin:0;color:var(--ink);font:1.02rem/1.6 var(--voice)}
.teaser:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(248,242,228,0),var(--ivory) 90%)}
.gate-badge{display:inline-flex;align-items:center;gap:.4rem;background:var(--em-850);color:var(--gold-3);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;border-radius:999px;padding:.4rem .8rem;margin-bottom:.8rem}
.gate-badge .ico{width:14px;height:14px}
.gate h3{font:400 1.6rem/1.2 var(--display);color:var(--ink)}
.gate h3 em{font-style:normal;color:var(--em-600)}
.unlock{list-style:none;padding:0;margin:.4rem 0 .9rem}
.unlock li{position:relative;padding:.32rem 0 .32rem 1.9rem;color:var(--ink-2);font-size:.95rem}
.unlock li:before{content:"";position:absolute;left:0;top:.45rem;width:1.15rem;height:1.15rem;border-radius:50%;background:var(--em-600) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F6E3AE' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center/70% no-repeat}
.gate-free{font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;color:var(--em-600);font-weight:500;margin-bottom:1rem}
.gate .frame{min-height:380px;border-radius:14px;overflow:hidden;background:var(--ivory);margin:0 -.6rem}
.gate iframe{display:block;width:100%;min-height:380px;border:0}
@media(max-width:420px){.gate{padding:1.4rem 1rem 1.2rem}.flow .col{padding:0 .7rem}}
.gate .fine{font-size:.76rem;color:var(--ink-3);margin:.9rem 0 0}
.gate .fine a{color:var(--em-600)}
.dob-step,.dob-done span{font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-deep);font-weight:500;margin:0 0 .3rem}
.dob-label{display:block;font:400 1.25rem var(--display);color:var(--ink);margin-bottom:.7rem}
.dob-row{display:grid;grid-template-columns:.8fr 1.4fr 1fr;gap:.5rem}
.dob select{width:100%;height:50px;border:1px solid #D9CBA6;border-radius:12px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239E7724' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right .6rem center/16px no-repeat;
  color:var(--ink);font:400 1rem var(--ui);padding:0 1.8rem 0 .8rem;-webkit-appearance:none;appearance:none;cursor:pointer}
.dob select:focus{outline:none;border-color:var(--gold)}
.dob-err{color:#A33A3A;font-size:.86rem;min-height:1.2em;margin:.5rem 0}
.dob-done{display:flex;justify-content:space-between;align-items:center;margin:0 0 .6rem}
.dob-done .link{color:var(--em-600);font-size:.86rem}
.preview-note{background:#FFF4D1;color:#5C4400;border:1px dashed #C9A227;border-radius:12px;padding:.7rem .9rem;font-size:.82rem;margin-bottom:1rem}

/* ---------- reading ---------- */
.welcome{display:flex;gap:.8rem;align-items:flex-start;margin:1.4rem 0 0;padding:1rem 1.15rem;border-radius:18px;background:linear-gradient(135deg,rgba(235,203,122,.16),rgba(47,122,96,.3));border:1px solid var(--line-2);animation:rise .7s var(--ease) both}
.welcome b{font:400 1.25rem var(--display);color:var(--gold-3)}
.welcome .ico{color:var(--gold-2);margin-top:.2rem;animation:spin 8s linear infinite}
.reading-head{display:grid;gap:1.5rem;align-items:center;padding:1.8rem 0 1.4rem;text-align:center}
@media(min-width:760px){.reading-head{grid-template-columns:260px 1fr;text-align:left}}
.reading-head .art{width:min(260px,66vw);margin:0 auto;border-radius:14px;box-shadow:var(--shadow);border:1px solid var(--line-2)}
.reading-head .art.rev{transform:rotate(180deg)}
.asked{font:italic 500 1.1rem/1.5 var(--voice);color:var(--text-2);margin:.8rem 0}
.core{font:italic 500 clamp(1.35rem,3.8vw,1.75rem)/1.38 var(--voice);color:var(--gold-3);margin:.9rem 0}
.source{display:inline-flex;align-items:center;gap:.4rem;font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-2);border:1px solid var(--line);border-radius:999px;padding:.3rem .75rem}
.source.app{color:var(--em-600);border-color:rgba(36,92,72,.35)}
.progress-bar{position:sticky;top:59px;z-index:20;height:3px;background:rgba(255,255,255,.08);margin:0 -1.15rem 1rem}
.progress-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--gold),var(--gold-3));transition:width .6s var(--ease)}
.steps-flow{display:grid;gap:1.1rem}
.paper{background:var(--ivory);color:var(--ink);border-radius:22px;padding:clamp(1.3rem,4.5vw,2.2rem);box-shadow:var(--shadow)}
.step{scroll-margin-top:80px;animation:rise .7s var(--ease) both}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.step-count{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-deep);margin:0 0 .35rem;font-weight:500}
.step h2{color:var(--ink);font-size:clamp(1.6rem,4.6vw,2.1rem);margin-bottom:.25rem}
.step-intro{font:italic 500 1.12rem/1.5 var(--voice);color:var(--ink-2);margin-bottom:1rem}
.body{color:#33433A;font-size:1.02rem}
.body p{margin:0 0 .9em}
.body strong{color:var(--ink);font-weight:600}
.body ul,.body ol{padding-left:1.2rem;margin:.2rem 0 1rem}
.body li{margin:.4rem 0}
.body li::marker{color:var(--gold-deep)}
.body .q{font:italic 500 1.3rem/1.42 var(--voice);color:var(--em-600);margin:.4rem 0 1rem}
.body .ritual{font-family:var(--display);color:var(--gold-deep);font-size:1.1rem}
.note{background:#EEF4EF;border-left:3px solid var(--em-500);padding:.85rem 1rem;border-radius:0;font-size:.93rem;color:#22433A;margin:0 0 1.1rem}
.note.gold{background:#FBF1D9;border-color:var(--gold);color:#5A4511}
.affirm{text-align:center;padding:1.2rem 1rem;margin-top:1.2rem;border-top:1px solid rgba(158,119,36,.25);border-bottom:1px solid rgba(158,119,36,.25)}
.affirm small{display:block;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:.4rem}
.affirm p{font:italic 500 1.35rem/1.4 var(--voice);color:var(--ink);margin:0}
.journal-box{margin-top:1.2rem}
.journal-box textarea{background:#fff;color:var(--ink);border-color:rgba(158,119,36,.4);font-size:1.05rem}
.journal-box textarea::placeholder{color:#9AA79F}
.saved-msg{font-size:.86rem;color:var(--em-600);margin-left:.6rem}
.saved-msg a{color:var(--em-600)}
.next-step{margin-top:1.5rem}
.acc{border-bottom:1px solid rgba(27,42,34,.12)}
.acc summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 0;font:400 1.25rem var(--display);color:var(--ink)}
.acc summary::-webkit-details-marker{display:none}
.acc summary:after{content:"+";font:300 1.6rem var(--ui);color:var(--gold-deep);transition:transform .25s}
.acc[open] summary:after{transform:rotate(45deg)}
.acc .body{padding-bottom:1rem}
.cta-pair{display:grid;gap:.8rem;margin-top:1.4rem}
@media(min-width:620px){.cta-pair{grid-template-columns:1fr 1fr}}
.cta-card{display:flex;flex-direction:column;gap:.35rem;padding:1.25rem;border-radius:16px;background:var(--em-850);color:var(--text);text-decoration:none;transition:transform .3s var(--ease),box-shadow .3s}
.cta-card:hover{transform:translateY(-3px);box-shadow:0 16px 34px rgba(11,35,28,.35)}
.cta-card b{font:400 1.3rem var(--display);color:var(--gold-3)}
.cta-card span{font-size:.9rem;color:var(--text-2)}
.cta-card em{font-style:normal;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-2);margin-top:.4rem}
.med-frame{border-radius:14px;overflow:hidden;background:#000}
.thumb{position:relative;aspect-ratio:16/9;width:100%;display:block;border:0;padding:0;cursor:pointer;background:#000}
.thumb img{width:100%;height:100%;object-fit:cover;opacity:.82;transition:opacity .3s}
.thumb:hover img{opacity:1}
.thumb span{position:absolute;inset:0;display:grid;place-items:center}
.thumb span:before{content:"";width:66px;height:66px;border-radius:50%;background:rgba(11,35,28,.78) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23EBCB7A'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E") 55% 50%/40% no-repeat;border:1px solid var(--gold-2)}
.med-frame iframe{display:block;width:100%;aspect-ratio:16/9;border:0}

/* ---------- pages ---------- */
.page{padding:2rem 0 3rem}
.page-head{text-align:center;margin-bottom:2rem}
.page-head h1{font-size:clamp(2rem,6vw,2.9rem)}
.panel{border:1px solid var(--line);border-radius:var(--r);background:rgba(255,255,255,.03);padding:1.4rem}
.grid{display:grid;gap:1rem}
@media(min-width:680px){.grid-2{grid-template-columns:1fr 1fr}}
.badge{display:inline-block;font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;padding:.3rem .7rem;border-radius:999px;background:rgba(235,203,122,.12);color:var(--gold-2);margin-bottom:.7rem}
.ticks{list-style:none;padding:0;margin:0 0 1.4rem}
.ticks li{position:relative;padding-left:1.5rem;margin:.45rem 0;color:var(--text-2)}
.ticks li:before{content:"✦";position:absolute;left:0;color:var(--gold);font-size:.8rem;top:.15rem}
.daily{display:grid;gap:1.6rem;align-items:center;text-align:center}
@media(min-width:760px){.daily{grid-template-columns:260px 1fr;text-align:left}}
.daily img{width:min(260px,64vw);margin:0 auto;border-radius:14px;box-shadow:var(--shadow);border:1px solid var(--line-2)}
.method{font-size:.86rem;color:var(--text-3);margin-top:1.4rem;text-align:center}
.ref{display:grid;grid-template-columns:64px 1fr;gap:1rem;align-items:start}
.ref img{width:64px;border-radius:8px}
.ref h3{margin:.15rem 0 .2rem}
.ref textarea{margin-top:.6rem;min-height:84px;font-size:1rem}
.ref .actions{display:flex;flex-wrap:wrap;gap:1rem;margin-top:.6rem;font-size:.88rem}
.empty{text-align:center;padding:2.4rem 1.2rem}
.split{display:grid;gap:2rem;align-items:center}
@media(min-width:820px){.split{grid-template-columns:1fr 1fr}}
.photo{width:min(330px,80vw);margin:0 auto;border-radius:20px;box-shadow:var(--shadow);border:1px solid var(--line)}
.prose p{color:var(--text-2)}
.prose h3{margin-top:1.6rem;color:var(--gold-3)}

/* ---------- spreads ---------- */
.spread-pick{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;margin:1.4rem 0 .6rem}
.pick{display:flex;flex-direction:column;align-items:center;gap:.25rem;padding:1rem .7rem;border-radius:18px;border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--text);cursor:pointer;font:inherit;transition:border-color .25s,background .25s,transform .25s var(--ease)}
.pick:hover{transform:translateY(-2px);border-color:var(--line-2)}
.pick[aria-checked="true"]{border-color:var(--gold-2);background:rgba(235,203,122,.1);box-shadow:0 0 0 1px rgba(235,203,122,.35) inset}
.pick:hover,.pick:focus-visible{border-color:var(--gold-2);background:rgba(235,203,122,.1)}
.pick:hover .pick-cards i,.pick:focus-visible .pick-cards i{border-color:var(--gold-2);background:linear-gradient(160deg,#4E9A7C,var(--em-600))}
#ready{animation:rise .6s var(--ease) both;margin-bottom:1rem}
.choose-line{font:400 1.45rem/1.25 var(--display);color:var(--text);margin:0}
.pick b{font:400 1.15rem var(--display)}
.pick small{font-size:.76rem;color:var(--text-3);text-align:center;line-height:1.35}
.pick-cards{display:flex;gap:4px;height:40px;align-items:flex-end;margin-bottom:.35rem}
.pick-cards i{width:26px;height:38px;border-radius:5px;border:1px solid var(--line-2);background:linear-gradient(160deg,var(--em-500),var(--em-700))}
.pick[aria-checked="true"] .pick-cards i{border-color:var(--gold-2);background:linear-gradient(160deg,#4E9A7C,var(--em-600))}
.slots{display:flex;justify-content:center;gap:.8rem;margin:1rem 0 .4rem}
.slot{display:flex;flex-direction:column;align-items:center;gap:.35rem}
.slot-card{width:clamp(54px,15vw,74px);aspect-ratio:479/686;border-radius:8px;border:1px dashed var(--line-2);background:rgba(255,255,255,.02);overflow:hidden}
.slot.filled .slot-card{border-style:solid;animation:rise .45s var(--ease) both}
.slot-card img{width:100%;height:100%;object-fit:cover}
.slot small{font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3)}
.slot.filled small{color:var(--gold-2)}
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem;max-width:520px;margin:.6rem auto 1.4rem}
.reveal.sm{width:100%;margin:0 0 .6rem}
.reveal.sm .flip img{border-radius:9px}
.trio-name{font:400 clamp(.9rem,3.4vw,1.1rem)/1.25 var(--display);color:#fff;margin:.15rem 0 0}
.trio-item .rev-badge{display:block;margin:.3rem auto 0;width:max-content}
.trio-head{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem;max-width:520px;margin:1.6rem auto 1rem;text-align:center}
.trio-head img{border-radius:10px;border:1px solid var(--line-2);box-shadow:var(--shadow);margin-bottom:.5rem}
.trio-head img.rev{transform:rotate(180deg)}
.mini{float:right;width:84px;margin:0 0 .6rem 1rem;border-radius:8px;box-shadow:0 8px 18px rgba(0,0,0,.18)}
.mini.rev{transform:rotate(180deg)}
.ref-thumbs{display:flex;gap:3px}
.ref-thumbs img{width:64px;border-radius:8px}
.ref-thumbs.three img{width:30px;border-radius:5px}
.ref{grid-template-columns:auto 1fr}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--line);margin-top:2rem;padding:2rem 0 2.4rem;background:rgba(5,18,14,.55)}
body.ritual .foot{display:none}
.foot-inner{max-width:1080px;margin:0 auto;padding:0 1.15rem}
.disclaimer{font-size:.84rem;color:var(--text-3);max-width:60em}
.disclaimer b{color:var(--text-2);font-weight:500}
.foot-links{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;margin:1rem 0}
.foot-links a{color:var(--text-2);font-size:.88rem}
.copy{font-size:.76rem;color:#6E8F81;margin:0}

@media (prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}