/* A visual sanctuary and deeper editorial readings. */
.sanctuary-hero { height: 405px; position: relative; overflow: hidden; border-radius: 22px; isolation: isolate; background: #173b2d; margin-bottom: 23px; color: #fff8e5; }
.sanctuary-hero > img { height: 100%; width: 100%; object-fit: cover; object-position: center 57%; animation: sanctuary-breathe 24s ease-in-out infinite alternate; }
.sanctuary-hero:after { content: ''; position: absolute; inset: 0; z-index: 0; background: linear-gradient(90deg,#102b25e8,#102b25a6 35%,#142a2110 75%),linear-gradient(0deg,#102b2599,transparent 35%); }
.sanctuary-mist { position: absolute; inset: -35%; background: linear-gradient(115deg,transparent 40%,#ffffce18 50%,transparent 60%); z-index: 1; pointer-events: none; animation: light-drift 22s ease-in-out infinite; }
.sanctuary-copy { position: absolute; z-index: 2; top: 46px; left: 47px; max-width: 465px; }
.sanctuary-copy > .eyebrow { font-size: 8px; letter-spacing: 2px; color: #e0cf99; }
.sanctuary-copy h3 { font: 500 43px/1.1 var(--sans); letter-spacing: -1.6px; margin-top: 19px; }
.sanctuary-copy h3 em { font-family: Georgia,serif; font-weight: 400; color: #e4d2a5; }
.sanctuary-copy > p:not(.eyebrow) { font-size: 13px; line-height: 1.9; color: #e2e5cf; margin-top: 20px; max-width: 340px; }
.sanctuary-caption { position: absolute; z-index: 2; right: 25px; bottom: 23px; font-size: 6px; letter-spacing: 1.8px; color: #e9e3cd; writing-mode: vertical-rl; }
.sanctuary-invitation { display: flex; justify-content: space-between; align-items: center; gap: 22px; padding: 9px 5px 30px; margin-bottom: 10px; }
.sanctuary-invitation p { font-size: 11px; line-height: 1.8; color: #7d8569; }
.sanctuary-invitation p > span { display: block; font-size: 7px; letter-spacing: 1.6px; color: #a08d57; margin-bottom: 4px; }
.sanctuary-invitation > b { font-size: 23px; font-weight: 400; color: #b5a66e; }
.experience-tab-art { height: 145px; }
.quiz-tab-art > img { object-position: center 45%; }
.nawal-tab-art { isolation: isolate; }
.nawal-tab-art > img { position: absolute; inset: 0; height: 100%; width: 100%; object-fit: cover; object-position: 50% 38%; filter: brightness(.65); z-index: -1; }
.nawal-mini-sun { color: #f1dda4; }
.nawal-mini-orbit { border-color: #e3cd8a66; }
.nawal-mini-orbit:before, .nawal-mini-orbit:after { border-color: #e3cd8a66; }
.ritual-opening { margin: 24px 0 0; border-left: 2px solid #c6b476; padding: 2px 0 2px 17px; font: italic 19px/1.65 Georgia,serif; color: #799062; }
.ritual-opening cite { display: block; font: 8px/1.6 var(--sans); letter-spacing: 1px; margin-top: 9px; color: #99a082; }
.quiz-intention { margin-top: 24px; border: 1px solid #d9dfca; background: #eff0e3; border-radius: 13px; overflow: hidden; display: grid; grid-template-columns: .45fr 1fr; }
.quiz-intention > img { height: 100%; min-height: 100%; width: 100%; object-fit: cover; object-position: center; }
.quiz-intention > div { padding: 25px; }
.quiz-intention .eyebrow { font-size: 7px; letter-spacing: 1.1px; color: #8d926b; }
.quiz-intention h5 { font: 400 27px/1.2 Georgia,serif; letter-spacing: -.6px; margin: 12px 0 0; }
.quiz-intention p:not(.eyebrow) { font-size: 12px; line-height: 1.85; color: #788365; margin-top: 13px; }
.quiz-intention blockquote { font: italic 18px/1.6 Georgia,serif; color: #8a8257; margin: 20px 0; }
.ritual-steps-title { display: block; font-size: 10px; font-weight: 500; color: #6c8158; }
.quiz-intention ol { padding-left: 17px; margin: 10px 0 0; font-size: 11px; color: #7c866d; line-height: 1.85; }
.quiz-intention li + li { margin-top: 6px; }
.nawal-reveal { position: relative; }
.nawal-reveal-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; opacity: .34; }
.nawal-reveal:after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(0deg,#102e27eb,#102e2777 80%); }
.nawal-reveal-actions { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.nawal-reveal-actions .text-link { min-height: 35px; margin-top: 12px; }
.nawal-story { display: grid; grid-template-columns: .72fr 1fr; background: #f2f0e4; border-top: 1px solid #d9dcc6; }
.nawal-story > figure { position: relative; overflow: hidden; min-height: 550px; background: #183b2b; }
.nawal-story > figure > img { position: absolute; width: 100%; height: 100%; object-fit: cover; }
.nawal-story figcaption { position: absolute; bottom: 23px; left: 25px; right: 25px; font-size: 6px; letter-spacing: 1.3px; color: #f1e5be; text-shadow: 0 1px 8px #000b; }
.nawal-story-copy { padding: 41px; }
.nawal-story-copy > .eyebrow { font-size: 8px; color: #998a58; }
.nawal-story-copy > h4 { font: 500 34px/1.17 var(--sans); letter-spacing: -1.3px; margin: 18px 0 0; }
.nawal-story-copy > h4 em { font-family: Georgia,serif; font-weight: 400; color: #8d8051; }
.nawal-portrait { font-size: 14px; line-height: 1.95; color: #6d7d62; margin-top: 21px; }
.nawal-story-prompts { display: grid; gap: 17px; margin-top: 24px; }
.nawal-story-prompts article { padding-left: 16px; border-left: 1px solid #c5b476; }
.nawal-story-prompts span { font-size: 7px; letter-spacing: 1.3px; color: #a08f5d; }
.nawal-story-prompts p { font-size: 13px; line-height: 1.85; color: #748065; margin-top: 7px; }
.nawal-story-copy blockquote { font: italic 24px/1.5 Georgia,serif; color: #7b8255; margin: 27px 0 21px; }
.nawal-story-note { font-size: 10px; line-height: 1.9; color: #8a9076; }
.nawal-story-copy > .text-link { font-size: 11px; margin-top: 17px; }
.nawal-directory-note { font-size: 11px; line-height: 1.85; color: #8b8d70; margin-top: 16px; max-width: 760px; }
.nawal-directory-grid { grid-template-columns: repeat(4,minmax(0,1fr)); align-items: start; gap: 11px; }
.nawal-directory-item { background: #fffefa; border: 1px solid #e1e3d0; border-radius: 9px; overflow: hidden; }
.nawal-directory-item > summary { display: block; padding: 15px; cursor: pointer; position: relative; min-height: 76px; }
.nawal-directory-item > summary:after { content: '+'; position: absolute; top: 18px; right: 14px; color: #a69b6b; font-size: 16px; }
.nawal-directory-item[open] > summary:after { content: '−'; }
.nawal-directory-item > summary > strong { font-size: 15px; font-weight: 500; display: block; padding-right: 15px; }
.nawal-directory-item > summary > span { font-size: 11px; color: #8c9272; margin-top: 4px; display: block; }
.nawal-directory-item > p { margin: 0; padding: 0 15px 13px; font-size: 11px; line-height: 1.85; color: #7c876a; }
.nawal-directory-item > blockquote { margin: 0; padding: 12px 15px 16px; font: italic 16px/1.6 Georgia,serif; color: #9a8957; background: #f4f1e5; }
.oracle-ritual { display: grid; grid-template-columns: .45fr 1fr; gap: 34px; align-items: center; max-width: 810px; margin: 34px auto 0; border-block: 1px solid #c2ba7d2b; padding-block: 29px; }
.oracle-ritual > figure { height: 260px; overflow: hidden; border-radius: 110px 110px 10px 10px; border: 1px solid #a89a5d66; }
.oracle-ritual > figure > img { width: 100%; height: 100%; object-fit: cover; }
.oracle-ritual > div > .eyebrow { font-size: 7px; letter-spacing: 1.7px; color: #b6a66c; }
.oracle-ritual h4 { font: 400 32px/1.2 var(--sans); letter-spacing: -.8px; margin: 14px 0 0; }
.oracle-ritual h4 em { font-family: Georgia,serif; color: #d6c18b; }
.oracle-ritual p:not(.eyebrow) { font-size: 12px; line-height: 1.95; color: #bcc9ac; margin-top: 16px; }
.oracle-ritual p.oracle-ritual-poem { font: italic 20px/1.5 Georgia,serif; color: #dcc896; }
.oracle-ritual .text-link { font-size: 10px; color: #ddca91; border-color: #b0a56b66; margin-top: 15px; }
.oracle-card-front { isolation: isolate; background: #19392b; justify-content: flex-end; padding-bottom: 14px; }
.oracle-card-front > img { position: absolute; width: 100%; height: 100%; inset: 0; object-fit: cover; z-index: -2; }
.oracle-card-front:after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg,#0d2b24 0%,#102f2766 45%,#102f2700 72%); z-index: -1; }
.oracle-card-front > small { position: absolute; top: 12px; z-index: 1; text-shadow: 0 1px 8px #000b; }
.oracle-card-front > .oracle-symbol { max-width: 30px; margin-bottom: 6px; stroke-width: 1.8; filter: drop-shadow(0 1px 4px #0007); }
.oracle-card-front > strong { position: relative; z-index: 1; font-size: 14px; text-shadow: 0 2px 10px #0009; }
.oracle-card-front > span { position: relative; z-index: 1; margin-top: 4px; }
.oracle-reading-heading > .oracle-intention-poem { max-width: 650px; font: italic 21px/1.65 Georgia,serif; margin: 20px auto 0; color: #d2d5b5; }
.reading-art { position: relative; height: 230px; isolation: isolate; justify-content: flex-end; padding-bottom: 14px; }
.reading-art > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.reading-art:after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg,#102e2799,transparent 65%); z-index: -1; }
.reading-art > span.reading-art-seal { position: absolute; top: 12px; right: 12px; height: 33px; width: 33px; padding: 2px; background: #102e2799; border-radius: 50%; border: 1px solid #c8b67d66; display: grid; place-items: center; }
.reading-art-seal .oracle-symbol { width: 26px; height: 26px; stroke-width: 1.8; }
.reading-art > span:not(.reading-art-seal) { position: relative; z-index: 1; font-size: 10px; text-shadow: 0 1px 6px #000b; }
.reading-affirmation { font: italic 21px/1.5 Georgia,serif; color: #8e8759; margin: 21px 0 17px; }
.reading-deep { padding-block: 14px; border-block: 1px solid #dfe1ce; margin-bottom: 2px; }
.reading-deep summary { font-size: 10px; cursor: pointer; color: #8e885b; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.reading-deep summary span { font-size: 16px; }
.reading-deep p { font-size: 12px; line-height: 1.9; color: #778369; margin-top: 15px; }
.reading-deep > strong { display: block; font-size: 10px; color: #8c895d; font-weight: 500; margin-top: 17px; }
.reading-deep .reading-ingredient-story { font-size: 11px; color: #8c9072; border-top: 1px solid #e0e2cd; padding-top: 13px; }
.oracle-integration { display: flex; align-items: flex-start; gap: 25px; max-width: 800px; padding: 29px 28px; border: 1px solid #b8b07b33; background: #d7dcb107; border-radius: 12px; margin: 27px auto 0; }
.oracle-integration > span { font-size: 45px; line-height: 1; color: #c5b67d; }
.oracle-integration .eyebrow { font-size: 7px; color: #c1af75; letter-spacing: 1.8px; }
.oracle-integration h5 { font: 400 27px/1.2 Georgia,serif; margin: 12px 0 0; color: #e2d4ae; }
.oracle-integration p:not(.eyebrow) { font-size: 12px; line-height: 1.9; color: #aebf9e; margin-top: 13px; }
.oracle-integration strong { display: block; font-size: 10px; font-weight: 400; color: #cab77a; letter-spacing: 1.2px; margin-top: 16px; }
@keyframes sanctuary-breathe { from { transform: scale(1.01); } to { transform: scale(1.07) translateY(-5px); } }

@media (max-width: 1150px) {
  .sanctuary-hero { height: 390px; }
  .sanctuary-copy { left: 36px; top: 40px; }
  .sanctuary-copy h3 { font-size: 39px; }
  .sanctuary-invitation { gap: 18px; }
  .sanctuary-invitation p { font-size: 10px; }
  .quiz-intention { grid-template-columns: .35fr 1fr; }
  .quiz-intention > div { padding: 22px; }
  .quiz-intention h5 { font-size: 25px; }
  .nawal-story-copy { padding: 32px; }
  .nawal-story-copy > h4 { font-size: 30px; }
  .nawal-story > figure { min-height: 600px; }
  .nawal-directory-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .oracle-card-front > strong { font-size: 12px; }
  .reading-art { height: 200px; }
}
@media (max-width: 950px) {
  .sanctuary-copy { max-width: 390px; }
  .sanctuary-invitation { gap: 15px; padding-bottom: 24px; }
  .sanctuary-invitation p { max-width: 180px; }
  .experience-tab-art { height: 120px; }
  .quiz-intention { grid-template-columns: .46fr 1fr; }
  .nawal-story { grid-template-columns: .65fr 1fr; }
  .nawal-story-copy { padding: 29px; }
  .nawal-story-copy > h4 { font-size: 28px; }
  .nawal-portrait { font-size: 13px; }
  .nawal-story-prompts p { font-size: 12px; }
  .nawal-story-copy blockquote { font-size: 22px; }
  .nawal-directory-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .oracle-ritual { grid-template-columns: .5fr 1fr; gap: 26px; }
  .oracle-ritual h4 { font-size: 29px; }
  .oracle-ritual > figure { height: 280px; }
  .oracle-card-front > strong { font-size: 16px; }
  .reading-art { height: 180px; }
  .reading-affirmation { font-size: 19px; }
  .reading-deep summary { font-size: 9px; }
}
@media (max-width: 650px) {
  .sanctuary-hero { height: 430px; border-radius: 16px; margin-bottom: 20px; }
  .sanctuary-hero > img { object-position: 61% center; }
  .sanctuary-hero:after { background: linear-gradient(0deg,#0c2b24ed,#0e2d2599 57%,#102e2722); }
  .sanctuary-copy { top: auto; bottom: 35px; left: 25px; right: 25px; max-width: none; }
  .sanctuary-copy > .eyebrow { font-size: 7px; letter-spacing: 1.7px; }
  .sanctuary-copy h3 { font-size: 35px; letter-spacing: -1.1px; margin-top: 17px; }
  .sanctuary-copy > p:not(.eyebrow) { font-size: 13px; max-width: 320px; margin-top: 17px; }
  .sanctuary-caption { right: 10px; bottom: 22px; font-size: 5px; letter-spacing: 1px; }
  .sanctuary-invitation { display: grid; grid-template-columns: 1fr; gap: 14px; padding: 0 4px 20px; margin-bottom: 8px; }
  .sanctuary-invitation p { font-size: 12px; max-width: none; padding-left: 15px; border-left: 1px solid #c5b575; }
  .sanctuary-invitation p > span { font-size: 7px; margin-bottom: 2px; }
  .sanctuary-invitation > b { display: none; }
  .experience-tab-art { height: 78px; }
  .nawal-tab-art > img { object-position: 50% 37%; }
  .ritual-opening { font-size: 18px; line-height: 1.6; margin-top: 22px; padding-left: 14px; }
  .ritual-opening cite { font-size: 7px; }
  .quiz-intention { grid-template-columns: 1fr; }
  .quiz-intention > img { height: 200px; min-height: 0; object-position: center 40%; }
  .quiz-intention > div { padding: 22px; }
  .quiz-intention h5 { font-size: 29px; }
  .quiz-intention p:not(.eyebrow) { font-size: 13px; }
  .quiz-intention blockquote { font-size: 20px; }
  .ritual-steps-title { font-size: 11px; }
  .quiz-intention ol { font-size: 12px; }
  .nawal-story { grid-template-columns: 1fr; }
  .nawal-story > figure { min-height: 0; height: 360px; }
  .nawal-story > figure > img { object-position: center 40%; }
  .nawal-story figcaption { font-size: 5px; left: 21px; bottom: 20px; letter-spacing: .9px; }
  .nawal-story-copy { padding: 30px 23px; }
  .nawal-story-copy > .eyebrow { font-size: 7px; }
  .nawal-story-copy > h4 { font-size: 32px; line-height: 1.2; }
  .nawal-portrait { font-size: 14px; }
  .nawal-story-prompts span { font-size: 7px; }
  .nawal-story-prompts p { font-size: 14px; }
  .nawal-story-copy blockquote { font-size: 26px; }
  .nawal-story-note { font-size: 11px; }
  .nawal-story-copy > .text-link { font-size: 12px; }
  .nawal-directory-note { font-size: 11px; }
  .nawal-directory-grid { gap: 9px; }
  .nawal-directory-item > summary { padding: 13px; }
  .nawal-directory-item > summary > strong { font-size: 15px; }
  .nawal-directory-item > summary > span { font-size: 11px; }
  .nawal-directory-item > p { padding-inline: 13px; font-size: 11px; }
  .nawal-directory-item > blockquote { font-size: 17px; padding-inline: 13px; }
  .oracle-ritual { grid-template-columns: 1fr; gap: 24px; padding-block: 24px; margin-top: 25px; }
  .oracle-ritual > figure { height: 210px; border-radius: 100px 100px 10px 10px; }
  .oracle-ritual > figure > img { object-position: center 40%; }
  .oracle-ritual h4 { font-size: 31px; }
  .oracle-ritual p:not(.eyebrow) { font-size: 13px; }
  .oracle-ritual p.oracle-ritual-poem { font-size: 22px; }
  .oracle-ritual .text-link { font-size: 12px; }
  .oracle-card-front > strong { font-size: 14px; }
  .oracle-card-front > .oracle-symbol { max-width: 28px; }
  .oracle-reading-heading > .oracle-intention-poem { font-size: 20px; line-height: 1.6; }
  .reading-art { height: 310px; border-radius: 110px 110px 10px 10px; }
  .reading-art > img { object-position: center 40%; }
  .reading-affirmation { font-size: 24px; line-height: 1.5; }
  .reading-deep summary { font-size: 12px; }
  .reading-deep p { font-size: 13px; line-height: 1.9; }
  .reading-deep > strong { font-size: 11px; }
  .reading-deep .reading-ingredient-story { font-size: 12px; }
  .oracle-integration { padding: 23px 20px; gap: 14px; }
  .oracle-integration > span { font-size: 31px; }
  .oracle-integration h5 { font-size: 26px; }
  .oracle-integration p:not(.eyebrow) { font-size: 13px; }
  .oracle-integration .eyebrow { font-size: 6px; letter-spacing: 1px; }
  .oracle-integration strong { font-size: 10px; letter-spacing: .7px; }
  .toast { bottom: calc(157px + env(safe-area-inset-bottom)); }
}
@media (max-width: 370px) {
  .sanctuary-copy { left: 21px; right: 21px; }
  .sanctuary-copy h3 { font-size: 31px; }
  .sanctuary-copy > p:not(.eyebrow) { font-size: 12px; }
  .quiz-intention > div { padding-inline: 19px; }
  .nawal-story-copy { padding-inline: 21px; }
  .nawal-story-copy > h4 { font-size: 29px; }
  .oracle-card-front > strong { font-size: 12px; }
  .reading-art { height: 270px; }
}
