/* An editorial layer: luminous surfaces, sculpted shadows and interactive stories. */
body { --shadow-soft: 0 2px 3px #47322c05, 0 12px 24px -12px #47322c20, 0 38px 65px -35px #47322c30; }
.hero { isolation: isolate; }
.hero::before { content: ''; position: absolute; width: 260px; height: 260px; top: 15%; left: 2%; background: #e7c99a24; filter: blur(70px); z-index: -1; pointer-events: none; }
.hero-art { filter: drop-shadow(0 30px 30px #6b4b4420); }
.art-arch { box-shadow: inset 0 0 45px #fff8e0b0, 0 5px 10px -5px #694d3b25, 0 45px 65px -30px #76573b45; }
.art-arch::after { background: linear-gradient(115deg, transparent 15%, #fffaf04f 45%, transparent 72%); }
.tarot-card { box-shadow: 0 3px 5px #44352e15, 0 17px 22px -10px #49372550, 0 40px 40px -20px #49372560, inset 0 0 0 3px #fff8e8a0; }
.reading-card { box-shadow: var(--shadow-soft); }
.reading-card:hover, .reading-card:focus-within { box-shadow: 0 3px 6px #47322c08, 0 20px 30px -13px #47322c35, 0 48px 65px -30px #47322c40; }
.reading-visual { box-shadow: inset 0 1px 0 #fff8, inset 0 -18px 28px -22px #806a4540; }
.reading-visual::after { content: ''; position: absolute; inset: 0; background: linear-gradient(125deg,#fff6,transparent 45%); pointer-events: none; }
.reading-link { position: relative; z-index: 3; }
.button { box-shadow: 0 2px 3px #392d3a15, 0 10px 16px -8px #49374c60, 0 25px 35px -23px #49374c80, inset 0 1px 0 #fff3; }
.reading-finder { display: grid; grid-template-columns: 1fr 1.35fr; gap: 90px; padding-block: 45px 100px; align-items: center; }
.finder-intro { position: relative; padding-bottom: 35px; }
.finder-intro h2 { font-size: clamp(48px,4.5vw,68px); margin-bottom: 25px; }
.finder-intro>p:not(.eyebrow) { font-size: 12px; }
.finder-flower { display: block; color: #b39a73; font-size: 80px; line-height: 1; margin: 30px 0 0 5px; }
.finder-panel { position: relative; padding: 36px; background: linear-gradient(130deg,#fffdf8,#f4eee5); border: 1px solid #dacbb7; border-radius: 16px; box-shadow: var(--shadow-soft); }
.finder-panel::before { content: ''; position: absolute; inset: 7px; border: 1px solid #e4dacb; border-radius: 11px; pointer-events: none; }
.finder-label { color: #887354; font-size: 8px; letter-spacing: 1.6px; margin-bottom: 20px; }
.finder-options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.finder-options button { display: flex; align-items: center; gap: 9px; text-align: left; padding: 13px 10px; border: 1px solid #ded5c8; background: #fffaf4; border-radius: 5px; color: #61515f; font-size: 10px; transition: background .25s, box-shadow .25s, transform .25s, border-color .25s; }
.finder-options button>span { font-size: 23px; line-height: 1; color: #a78858; }
.finder-options button i { margin-left: auto; font-size: 8px; font-style: normal; color: #a59580; }
.finder-options button[aria-pressed="true"] { background: #48384e; border-color: #48384e; color: #fff6e5; box-shadow: 0 6px 12px -6px #48384e80; }
.finder-options button[aria-pressed="true"]>span,.finder-options button[aria-pressed="true"] i { color: #ddc397; }
.finder-options button:hover { transform: translateY(-2px); border-color: #b7986d; }
.finder-result { margin: 25px 0 21px; min-height: 123px; padding: 22px 0 0; border-top: 1px solid #dfd4c4; }
.finder-result-label { display: block; color: #9b7d52; letter-spacing: 2px; font-size: 7px; margin-bottom: 9px; }
.finder-result h3 { font-size: 31px; margin-bottom: 9px; }
.finder-result p { font-size: 11px; margin-bottom: 0; max-width: 360px; }
.finder-footnote { font-size: 8px; margin: 16px 0 0; }
.reading-experience { position: relative; isolation: isolate; overflow: hidden; background: #302735; color: #fff4de; border-block: 1px solid #a3845f60; }
.reading-experience::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at 85% 60%, #94785c35, transparent 52%), radial-gradient(ellipse at 15% 0%,#81627e40,transparent 55%); }
.experience-inner { max-width: 1250px; padding: 95px 5%; margin: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.experience-copy>.eyebrow { color: #cfb688; }
.experience-copy h2 { font-size: clamp(42px,3.8vw,59px); margin-bottom: 25px; }
.experience-copy h2 em { background-image: linear-gradient(120deg,#c5a776,#f4dfb5,#bb965c); }
.experience-copy>p:not(.eyebrow) { color: #c3b6c4; font-size: 12px; max-width: 380px; }
.experience-steps { margin-top: 30px; }
.experience-steps button { display: flex; align-items: center; gap: 19px; width: 100%; padding: 17px 10px; color: #bcaebd; background: transparent; border: 0; border-top: 1px solid #d6be9e25; text-align: left; font-size: 12px; transition: color .25s, background .25s, padding .25s; }
.experience-steps button:last-child { border-bottom: 1px solid #d6be9e25; }
.experience-steps button>span { font-family: var(--serif); font-size: 22px; color: #b29870; }
.experience-steps button i { font-style: normal; margin-left: auto; color: #bda276; }
.experience-steps button[aria-pressed="true"] { color: #fff2da; background: linear-gradient(90deg,#d7bb9020,transparent); padding-left: 19px; }
.experience-steps button:hover { color: #fff2da; }
.experience-copy>.experience-note { font-size: 9px !important; margin-top: 17px; color: #aa9bab !important; }
.experience-stage { position: relative; min-height: 470px; display: grid; place-items: center; perspective: 1000px; }
.celestial-dial { position: absolute; width: min(100%,440px); aspect-ratio: 1; pointer-events: none; }
.dial-ring { position: absolute; border: 1px solid #bf9d6640; border-radius: 50%; }
.ring-outer { inset: 0; box-shadow: 0 0 0 15px #cfad6e05,0 0 0 16px #bf9d661a; }
.ring-inner { inset: 35px; border-style: dashed; border-color: #c3a16b35; }
.dial-axis { position: absolute; height: 1px; top: 50%; left: -5%; width: 110%; background: #d4af731c; }
.axis-one { transform: rotate(35deg); }.axis-two { transform: rotate(-35deg); }
.dial-star { position: absolute; right: 4%; top: 8%; font-size: 48px; color: #b79865; }.dial-small-star { position: absolute; left: 0; bottom: 16%; font-size: 25px; color: #b79865; }
.position-card { position: relative; width: 285px; min-height: 385px; background: linear-gradient(145deg,#fff7e8,#e7d7bc); border: 1px solid #c0a06d; border-radius: 140px 140px 7px 7px; padding: 34px 27px 30px; text-align: center; color: #463948; box-shadow: 0 2px 4px #0003,0 20px 35px #120d1b55,0 50px 70px -25px #120d1b90; transform: rotate(-5deg); }
.position-card::before { content: ''; position: absolute; inset: 9px; border: 1px solid #b3996b; border-radius: 130px 130px 2px 2px; pointer-events: none; }
.position-number { font-family: var(--serif); font-size: 16px; color: #9d7b47; }
.position-symbol { display: block; font-family: Georgia,serif; font-size: 97px; line-height: 1.25; color: #a68245; margin: 0 0 8px; }
.position-copy .eyebrow { font-size: 6px; letter-spacing: 1.5px; margin-bottom: 10px; }.position-copy h3 { font-size: 26px; margin-bottom: 13px; }.position-copy>p:last-child { font-size: 10px; color: #7b6c69; line-height: 1.8; margin-bottom: 20px; }
.position-card-bottom { display: block; font-size: 5px; letter-spacing: 1.4px; color: #9c8057; padding-top: 12px; border-top: 1px solid #b3996b60; }
.stage-note { position: absolute; bottom: -4px; font-size: 8px; letter-spacing: .5px; color: #baa9b6; text-align: center; }
.steps article { border: 1px solid #e2d6c5; border-radius: 10px; padding: 25px; background: linear-gradient(140deg,#fffaf5,#f1eade60); box-shadow: var(--shadow-soft); transition: transform .35s,box-shadow .35s; }
.steps article:hover { transform: translateY(-6px); box-shadow: 0 20px 40px -22px #61483340; }
.steps { gap: 24px; }.step-number { margin-bottom: 20px; }
.closing { box-shadow: inset 0 12px 45px #1e122d25; }.philosophy-art { box-shadow: 0 3px 4px #69503b15, 0 22px 35px -14px #69503b30, 0 45px 65px -35px #69503b40; }
@keyframes dial-turn { to { rotate: 360deg; } }
@keyframes light-drift { 0%,100% { translate: -12px 0; opacity: .6; } 50% { translate: 20px 15px; opacity: 1; } }
@media (prefers-reduced-motion:no-preference) {
  .hero::before { animation: light-drift 12s ease-in-out infinite; }
  .reading-experience.is-in-view .ring-inner { animation: dial-turn 80s linear infinite; }
  .reading-experience.is-in-view .position-card { animation: celestial-float 8s ease-in-out infinite; }
}
@media(max-width:1000px) { .reading-finder { gap: 45px; }.experience-inner { gap: 35px; }.position-card { width: 260px; }.experience-stage { min-height: 450px; }.finder-panel { padding: 27px; }.finder-options { grid-template-columns: 1fr; }.finder-options button { padding: 11px 12px; }.finder-result { min-height: 135px; } }
@media(max-width:700px) {
  .reading-finder { grid-template-columns: 1fr; gap: 20px; padding-block: 15px 60px; }.finder-intro { padding-bottom: 0; }.finder-intro h2 { font-size: 48px; }.finder-flower { position: absolute; right: 10px; top: 60px; font-size: 65px; opacity: .4; }.finder-panel { padding: 28px; }.finder-options { grid-template-columns: 1fr 1fr; }.finder-options button { font-size: 9px; padding: 12px 9px; gap: 7px; }.finder-options button i { display: none; }.finder-result { min-height: 120px; }
  .experience-inner { grid-template-columns: 1fr; gap: 25px; padding: 60px 7%; }.experience-copy>p:not(.eyebrow) { max-width: none; }.experience-stage { min-height: 465px; }.celestial-dial { max-width: 375px; }.position-card { width: 275px; }.experience-copy h2 { font-size: 45px; }.steps { gap: 20px; }
}
@media(max-width:360px) { .finder-options { grid-template-columns: 1fr; }.finder-panel { padding: 23px; }.position-card { width: 245px; }.experience-copy h2 { font-size: 39px; } }
@media(prefers-reduced-motion:reduce) {
  .position-card { transform: none; }.steps article:hover,.finder-options button:hover { transform: none; }
}