/* Mila Ellis — night sky, gold leaf, a plum velvet accent from her wardrobe */
:root{
  --night:#0f1533; --deep:#161d45; --rule:#2c3566;
  --gold:#c9a96a; --gold-hi:#e2c98f; --plum-deep:#3c2241;
  --moon:#efe9dc; --mist:#a6abc6;
  --serif:Domine,Georgia,serif; --sans:Jost,"Avenir Next",system-ui,sans-serif;
  --gut:clamp(20px,5vw,72px); --max:1320px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:76px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{background:var(--night);color:var(--moon);font:300 18px/1.65 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
h1,h2,h3{font-family:var(--serif);font-weight:500;line-height:1.12;letter-spacing:-.012em;text-wrap:balance}
p{text-wrap:pretty}
:focus-visible{outline:2px solid var(--gold-hi);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:-999px;top:8px;background:var(--gold);color:var(--night);padding:8px 14px;border-radius:6px;z-index:50}
.skip:focus{left:8px}
section{scroll-margin-top:64px}

/* header */
.top{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:32px;padding:14px var(--gut);background:rgba(15,21,51,.86);backdrop-filter:blur(12px);border-bottom:1px solid rgba(201,169,106,.16)}
.brand{display:flex;align-items:center;gap:10px;font:500 21px var(--serif);text-decoration:none;margin-right:auto}
.brand svg,.foot-brand svg{width:20px;height:20px;fill:var(--gold)}
.top nav{display:flex;gap:28px;font-size:16px}
.top nav a{text-decoration:none;color:var(--mist);transition:color .15s}
.top nav a:hover{color:var(--moon)}
.ig svg{width:22px;height:22px;fill:none;stroke:var(--mist);stroke-width:1.6}
.ig:hover svg{stroke:var(--gold)}
@media(max-width:820px){.top nav{display:none}}

/* buttons */
.btn{display:inline-block;background:var(--gold);color:var(--night);font:500 16px/1 var(--sans);padding:17px 30px;border-radius:999px;border:0;cursor:pointer;text-decoration:none;transition:background .15s}
.btn:hover{background:var(--gold-hi)}
.btn.ghost{background:none;color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold)}
.btn.ghost:hover{background:rgba(201,169,106,.1)}
.back{background:none;border:0;color:var(--mist);font:400 16px var(--sans);cursor:pointer;padding:12px 4px;text-decoration:underline;text-underline-offset:4px}
.back:hover{color:var(--moon)}

/* hero */
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,88px);align-items:center;padding:clamp(36px,6vw,84px) var(--gut) clamp(56px,7vw,96px);max-width:var(--max);margin:0 auto}
.hero h1{font-size:clamp(38px,4.8vw,64px);margin-bottom:20px}
.intro{color:var(--mist);max-width:30em;margin-bottom:30px}
.fine{font-size:14px;color:var(--mist);margin-top:14px}
.hero-wheel{position:relative;max-width:600px;justify-self:end;width:100%}
.hero-wheel figcaption{margin:22px auto 0;max-width:30em;text-align:center;font:400 17px/1.55 var(--serif);color:var(--gold-hi)}
.hero-wheel .today{display:block;font:400 14px var(--sans);color:var(--mist);margin-bottom:4px}
@media(max-width:940px){.hero{grid-template-columns:1fr}.hero-wheel{justify-self:center;max-width:520px}}

/* step form */
.steps{background:var(--deep);border:1px solid var(--rule);border-radius:20px;padding:26px 28px 24px;max-width:520px}
.progress{display:flex;gap:6px;margin-bottom:20px}
.progress span{flex:1;height:3px;border-radius:2px;background:var(--rule);transition:background .3s}
.progress span.on{background:var(--gold)}
.step{border:0;display:flex;flex-direction:column;gap:14px}
.step[hidden]{display:none}
.step legend{font:500 23px/1.25 var(--serif);margin-bottom:16px;padding:0}
.step-nav{display:flex;justify-content:space-between;align-items:center;margin-top:6px}
.step-nav .btn:only-child{margin-left:auto}
input[type=date],input[type=time],input[type=text]{width:100%;background:var(--night);border:1px solid var(--rule);border-radius:12px;color:var(--moon);font:400 19px var(--sans);padding:15px 16px;color-scheme:dark;min-height:58px}
input:focus-visible{outline:2px solid var(--gold);outline-offset:0;border-color:transparent}
input:disabled{opacity:.4}
.check{display:flex;gap:10px;align-items:center;font-size:16px;color:var(--moon);cursor:pointer}
.check input{width:20px;height:20px;accent-color:var(--gold)}
.hint{font-size:14px;color:var(--mist)}
.city{position:relative}
.sugg{position:absolute;left:0;right:0;top:100%;margin-top:6px;background:#1f2757;border:1px solid var(--rule);border-radius:12px;overflow:hidden;z-index:5;box-shadow:0 18px 40px rgba(0,0,0,.35)}
.sugg[hidden]{display:none}
.sugg button{display:block;width:100%;text-align:left;background:none;border:0;border-bottom:1px solid var(--rule);color:var(--moon);font:400 16px var(--sans);padding:13px 16px;cursor:pointer}
.sugg button:last-child{border-bottom:0}
.sugg button:hover,.sugg button:focus-visible,.sugg button[aria-selected=true]{background:rgba(201,169,106,.16);outline:none}
.sugg small{color:var(--mist);margin-left:6px}
.err{color:#f0b4b4;font-size:15px;margin-top:12px}
.err:empty{display:none}

/* wheel */
.wheel{width:100%;height:auto;aspect-ratio:1;overflow:visible}
.w-ring{fill:rgba(201,169,106,.05);stroke:var(--gold);stroke-width:1.2}
.w-line{fill:none;stroke:var(--gold);stroke-width:.8;opacity:.75}
.w-line.faint{opacity:.3}
.w-tick{stroke:var(--gold);stroke-width:.7;opacity:.45}
.w-sign{fill:var(--gold);font-size:19px;text-anchor:middle;dominant-baseline:central;font-family:"Apple Symbols","Segoe UI Symbol","Noto Sans Symbols 2",serif}
.w-mark{stroke:var(--moon);stroke-width:2}
.w-lead{stroke:var(--moon);stroke-width:.5;opacity:.45}
.w-planet{fill:var(--moon);font-size:21px;text-anchor:middle;dominant-baseline:central;font-family:"Apple Symbols","Segoe UI Symbol","Noto Sans Symbols 2",serif}
.w-planet.small{font:500 13px var(--sans);letter-spacing:.04em}
.w-pt.key .w-planet,.w-pt.key .w-mark{fill:var(--gold-hi);stroke:var(--gold-hi)}
.w-pt.key .w-planet{font-size:26px}
.w-pt.moon .w-planet{fill:#d9c9f0}
.w-planets.anim .w-pt{animation:sweep 1.6s cubic-bezier(.2,.7,.2,1) both}
@keyframes sweep{from{transform:rotate(var(--from));opacity:0}30%{opacity:1}to{transform:rotate(0deg)}}
@media (prefers-reduced-motion:reduce){.w-planets.anim .w-pt{animation:none}}

/* result */
.result{background:var(--deep);border-block:1px solid rgba(201,169,106,.18);padding:clamp(48px,7vw,96px) var(--gut);display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,5vw,80px);align-items:center}
.result[hidden]{display:none}
.result .wheel{max-width:500px;justify-self:center}
.result-text h2{font-size:clamp(28px,3.2vw,42px);margin-bottom:28px}
.trio{display:grid;gap:22px;margin-bottom:30px}
.trio div{display:grid;grid-template-columns:52px 1fr;gap:4px 16px;align-items:baseline}
.trio .gl{grid-row:span 2;font:30px/1 "Apple Symbols","Segoe UI Symbol",serif;color:var(--gold)}
.trio dt{font:500 20px var(--serif)}
.trio dt span{font:300 15px var(--sans);color:var(--mist);margin-left:8px}
.trio dd{color:var(--mist)}
.trio em{display:block;font-style:normal;color:var(--gold-hi);margin-top:6px;font-size:16px}
.next-step{background:var(--night);border-radius:16px;padding:22px 24px;display:flex;flex-wrap:wrap;gap:16px 24px;align-items:center;justify-content:space-between}
.next-step p{max-width:24em}
.again{margin-top:18px}
@media(max-width:900px){.result{grid-template-columns:1fr}}

/* readings */
.readings{padding:clamp(64px,9vw,128px) var(--gut);max-width:var(--max);margin:0 auto}
.readings-head{max-width:42em;margin-bottom:clamp(32px,4vw,52px)}
.readings h2,.how h2,.story h2,.ritual h2,.soon h2,.faq h2{font-size:clamp(32px,3.8vw,50px);margin-bottom:18px}
.readings-head p{color:var(--mist)}
.pages{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,2vw,28px);margin-bottom:clamp(48px,6vw,80px)}
.pages figure:nth-child(even){margin-top:36px}
.pages img{border-radius:6px;box-shadow:0 24px 50px rgba(0,0,0,.45)}
.pages figcaption{margin-top:12px;font-size:15px;color:var(--mist)}
@media(max-width:760px){.pages{grid-template-columns:repeat(4,62%);overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:12px;margin-inline:calc(var(--gut) * -1);padding-inline:var(--gut)}.pages figure{scroll-snap-align:start}.pages figure:nth-child(even){margin-top:0}}
.pick{font-size:clamp(24px,2.6vw,32px);margin-bottom:18px}
.sign-list{list-style:none;columns:2;column-gap:clamp(24px,4vw,64px);border-top:1px solid var(--rule)}
.sign-list li{break-inside:avoid}
.sign-list a,.sign-list .row{display:grid;grid-template-columns:36px 1fr auto auto;gap:16px;align-items:center;padding:15px 4px;border-bottom:1px solid var(--rule);text-decoration:none;transition:background .15s,padding .15s}
.sign-list .g{font:24px/1 "Apple Symbols","Segoe UI Symbol",serif;color:var(--gold);text-align:center}
.sign-list .n{font:500 20px var(--serif)}
.sign-list .d{color:var(--mist);font-size:15px}
.sign-list .go{font-size:15px;color:var(--gold);min-width:7.2em;text-align:right}
.sign-list a:hover,.sign-list a:focus-visible{background:rgba(201,169,106,.07);padding-inline:12px 8px;outline:none}
.sign-list a:hover .go,.sign-list a:focus-visible .go{text-decoration:underline;text-underline-offset:4px}
.sign-list .row{opacity:.55}
.sign-list .row .go{color:var(--mist)}
@media(max-width:860px){.sign-list{columns:1}}
@media(max-width:520px){.sign-list a,.sign-list .row{grid-template-columns:30px 1fr auto;gap:12px}.sign-list .d{grid-column:2;grid-row:2;font-size:14px;margin-top:-6px}.sign-list .go{grid-row:1/3;grid-column:3;min-width:0}}

/* how */
.how{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,6vw,96px);align-items:center;padding:clamp(56px,8vw,112px) var(--gut);max-width:var(--max);margin:0 auto;border-top:1px solid var(--rule)}
.how img{border-radius:18px;aspect-ratio:4/5;object-fit:cover;width:100%;max-width:460px}
.how dl{display:grid;gap:26px;max-width:36em}
.how dt{font:500 21px var(--serif);margin-bottom:6px;color:var(--gold-hi)}
.how dd{color:var(--mist)}
@media(max-width:860px){.how{grid-template-columns:1fr}.how img{max-width:380px;order:2}}

/* story */
.story{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);grid-template-rows:auto auto;gap:clamp(28px,5vw,72px) clamp(32px,6vw,96px);align-items:start;padding:clamp(64px,9vw,128px) var(--gut);max-width:var(--max);margin:0 auto}
.story-photo{grid-row:1/3}
.story-photo img{border-radius:6px;width:100%;box-shadow:0 30px 60px rgba(0,0,0,.5);transform:rotate(-1.2deg);border:10px solid #f3eee2;border-bottom-width:42px}
.story-photo figcaption{margin-top:14px;font:400 16px var(--serif);color:var(--mist);text-align:center}
.story-text{max-width:34em;padding-top:clamp(0px,3vw,40px)}
.story-text>p{color:var(--mist);margin-bottom:18px}
.story blockquote{margin:34px 0}
.story blockquote p{font:400 clamp(23px,2.5vw,31px)/1.38 var(--serif);color:var(--moon)}
.story blockquote footer{margin-top:12px;color:var(--gold);font-size:16px}
.story-still{border-radius:14px;max-width:360px;aspect-ratio:1;object-fit:cover;width:100%}
@media(max-width:900px){.story{grid-template-columns:1fr}.story-photo{grid-row:auto;max-width:440px}.story-still{max-width:300px}}

/* ritual */
.ritual{background:linear-gradient(180deg,var(--plum-deep),#2a1a33);padding:clamp(64px,9vw,120px) var(--gut)}
.ritual-inner{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(32px,6vw,90px);align-items:center}
.ritual-sub{color:#d6c3d6;margin-bottom:30px}
.ritual ol{list-style:none;counter-reset:r}
.ritual li{counter-increment:r;position:relative;padding:20px 0 20px 60px;border-top:1px solid rgba(230,200,230,.18);color:#e6dbe6}
.ritual li:last-child{border-bottom:1px solid rgba(230,200,230,.18)}
.ritual li::before{content:counter(r);position:absolute;left:4px;top:18px;font:400 34px/1 var(--serif);color:var(--gold)}
.ritual strong{font-weight:500;color:var(--moon)}
.ritual img{border-radius:220px 220px 16px 16px;aspect-ratio:4/5;object-fit:cover;width:100%}
@media(max-width:860px){.ritual-inner{grid-template-columns:1fr}.ritual img{max-width:360px}}

/* soon */
.soon{padding:clamp(64px,9vw,128px) var(--gut)}
.soon-inner{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:clamp(32px,6vw,90px);align-items:center}
.soon img{border-radius:18px;aspect-ratio:4/5;object-fit:cover;width:100%;max-width:440px}
.soon-inner>div>p{color:var(--mist)}
.offers{list-style:none;margin:30px 0 36px;border-top:1px solid var(--rule)}
.offers li{display:flex;justify-content:space-between;align-items:baseline;gap:24px;padding:24px 0;border-bottom:1px solid var(--rule)}
.offers h3{font-size:21px;margin-bottom:6px}
.offers p{color:var(--mist);max-width:34em;font-size:17px}
.price{font:500 19px var(--serif);color:var(--gold);white-space:nowrap}
@media(max-width:860px){.soon-inner{grid-template-columns:1fr}.soon img{max-width:360px}}
@media(max-width:600px){.offers li{flex-direction:column;gap:8px}}

/* faq */
.faq{max-width:860px;margin:0 auto;padding:clamp(56px,8vw,112px) var(--gut);border-top:1px solid var(--rule)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{list-style:none;cursor:pointer;padding:22px 40px 22px 0;font:500 20px/1.35 var(--serif);position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:6px;top:30px;width:10px;height:10px;border-right:1.5px solid var(--gold);border-bottom:1.5px solid var(--gold);transform:rotate(45deg);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(-135deg);top:34px}
.faq details p{color:var(--mist);padding:0 0 22px;max-width:40em}

/* footer */
.foot{border-top:1px solid var(--rule);padding:44px var(--gut) 64px;display:grid;grid-template-columns:auto auto 1fr;gap:20px 48px;align-items:start;color:var(--mist);font-size:15px}
.foot-brand{display:flex;align-items:center;gap:10px;font:500 19px var(--serif);color:var(--moon)}
.foot a{color:var(--gold);text-decoration:none;margin-right:20px}
.foot a:hover{text-decoration:underline}
.disc{max-width:44em;justify-self:end;font-size:14px}
@media(max-width:800px){.foot{grid-template-columns:1fr}.disc{justify-self:start}}
.quiet{color:var(--mist);font-size:16px;text-underline-offset:4px}
.quiet:hover{color:var(--moon)}

.selects{display:grid;gap:10px}
.selects.three{grid-template-columns:1fr 1.4fr 1.1fr}
.selects.two{grid-template-columns:1.4fr 1fr}
select{-webkit-appearance:none;appearance:none;width:100%;min-width:0;background:var(--night) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23c9a96a' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 14px center/12px 8px;border:1px solid var(--rule);border-radius:12px;color:var(--moon);font:400 18px var(--sans);padding:15px 36px 15px 14px;min-height:58px;color-scheme:dark;cursor:pointer}
select:invalid,select option[value=""]{color:var(--mist)}
select:focus-visible{outline:2px solid var(--gold);outline-offset:0;border-color:transparent}
select:disabled{opacity:.4;cursor:default}
@media(max-width:420px){.selects.three{grid-template-columns:1fr 1.35fr 1.1fr;gap:8px}select{font-size:17px;padding:14px 30px 14px 12px;background-position:right 10px center}}

.story{grid-template-rows:auto}