/* The reading room: tactile cards, spacious editorial copy, one scene per ritual. */
.page-ritual { --ritual-accent: #d4af6a; }
.ritual-shell { width: min(1120px, calc(100% - 2 * var(--gutter))); margin-inline:auto; padding-block: clamp(32px,5vw,64px) 72px; }
.ritual-back { display:inline-flex; gap:8px; align-items:center; color:var(--ink-2); min-height:44px; font-size:14px; margin-bottom:20px; }
.ritual-back:hover { color:var(--gold-2); }
.ritual-heading { font:400 clamp(38px,4.7vw,66px)/1.07 var(--font-display); letter-spacing:-.035em; max-width:780px; }
.ritual-deck { color:var(--ink-2); font-size:clamp(16px,1.8vw,19px); max-width:590px; margin-top:22px; line-height:1.65; }
.ritual-kicker { display:flex; align-items:center; gap:9px; font-size:14px; color:var(--gold-2); margin-bottom:18px; }
.ritual-kicker svg { flex:none; }
.ritual-hero { display:grid; grid-template-columns:1fr 1.05fr; align-items:center; gap:50px; min-height:540px; }
.ritual-scene { position:relative; min-width:0; min-height:470px; display:grid; place-items:center; isolation:isolate; perspective:1200px; }
.ritual-scene:before { content:''; position:absolute; inset:-5%; z-index:-2; background:radial-gradient(ellipse,rgba(98,55,124,.23),transparent 66%); }
.ritual-scene:after { content:''; position:absolute; width:88%; aspect-ratio:1; border:1px solid rgba(212,175,106,.18); border-radius:50%; box-shadow:0 0 0 22px rgba(212,175,106,.025),0 0 0 23px rgba(212,175,106,.07); z-index:-1; }
.ritual-scene .tcard { --w:clamp(130px,13vw,170px); }
.ritual-form { margin-top:28px; display:grid; gap:16px; max-width:520px; }
.ritual-form label { display:block; font-size:14px; color:var(--ink-2); margin-bottom:8px; }
.ritual-form .input { width:100%; min-height:50px; color-scheme:dark; }
.ritual-form .btn { min-height:52px; }
.ritual-form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.ritual-check { display:flex!important; align-items:flex-start; gap:10px; margin:0!important; cursor:pointer; font-size:14px; }
.ritual-check input { margin-top:4px; accent-color:var(--gold); min-width:18px; height:18px; }
.ritual-hint { color:var(--ink-3); font-size:13px; }
.ritual-error { color:#ffb8b8; min-height:1.6em; font-size:14px; }
.ritual-result { margin-top:48px; }
.ritual-result:focus { outline:none; }
.ritual-result__heading { text-align:center; margin-bottom:34px; }
.ritual-result h2,.ritual-section-title { font:400 clamp(27px,3.3vw,40px)/1.17 var(--font-display); letter-spacing:-.025em; }
.ritual-result__heading p { color:var(--ink-2); margin-top:12px; }
.ritual-cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; }
.ritual-card-slot { text-align:center; display:flex; flex-direction:column; align-items:center; gap:14px; min-width:0; }
.ritual-card-slot .tcard { --w:clamp(100px,17vw,200px); }
.ritual-card-slot__label { font-size:14px; color:var(--gold-2); min-height:44px; display:grid; align-items:center; }
.ritual-card-slot h3 { font:400 clamp(17px,2vw,23px)/1.25 var(--font-display); }
.ritual-card-slot p { font-size:14px; color:var(--ink-2); }
.ritual-calculation { display:block; color:var(--ink-2); padding:10px 12px; background:rgba(255,255,255,.035); border-radius:9px; font-size:13px; }
.ritual-reading { margin-top:42px; padding:clamp(22px,4vw,44px); background:rgba(31,22,47,.72); border:1px solid var(--line-2); border-radius:22px; }
.ritual-reading h3 { font:400 25px/1.3 var(--font-display); margin-bottom:14px; }
.ritual-reading p { color:var(--ink-2); line-height:1.8; max-width:76ch; }
.ritual-reading p+p { margin-top:18px; }
.ritual-reading__grid { display:grid; grid-template-columns:1fr 1fr; gap:26px 40px; }
.ritual-reading__grid h4 { font-size:16px; color:var(--gold-2); font-weight:500; margin-bottom:8px; }
.ritual-reading__grid>div { min-width:0; }
.ritual-actions { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-block:24px; }
.ritual-actions .btn { min-height:46px; }
.ritual-trust { margin-block:30px; border-block:1px solid var(--line-2); padding-block:4px; }
.ritual-trust summary { min-height:64px; display:flex; align-items:center; gap:12px; cursor:pointer; list-style:none; font-size:15px; color:var(--gold-2); }
.ritual-trust summary::-webkit-details-marker { display:none; }
.ritual-trust summary svg:last-child { margin-left:auto; flex:none; transition:transform .2s; }
.ritual-trust[open] summary svg:last-child { transform:rotate(180deg); }
.ritual-trust p { color:var(--ink-2); font-size:15px; line-height:1.8; max-width:82ch; padding:0 0 24px 30px; }
.ritual-explore { display:flex; flex-wrap:wrap; gap:10px; padding-block:25px; margin-top:24px; border-top:1px solid var(--line); }
.ritual-explore a { border:1px solid var(--line-2); border-radius:999px; min-height:44px; padding:10px 17px; color:var(--ink-2); font-size:14px; }
.ritual-explore a:hover { border-color:var(--gold); color:var(--gold-2); }
.ritual-tabs { display:flex; gap:8px; flex-wrap:wrap; margin-block:28px; }
.ritual-tabs a,.ritual-tabs button { padding:10px 18px; border-radius:999px; border:1px solid var(--line-2); min-height:44px; color:var(--ink-2); }
.ritual-tabs [aria-current],.ritual-tabs [aria-pressed=true] { background:var(--gold); color:var(--night-1); border-color:var(--gold); }
/* Birth: a constellation of three personal archetypes. */
.birth-scene .tcard { position:absolute; box-shadow:0 24px 60px #0007; }
.birth-scene .tcard:nth-of-type(1) { transform:translate(-95px,40px) rotate(-15deg); z-index:1; }
.birth-scene .tcard:nth-of-type(2) { transform:translate(95px,35px) rotate(15deg); z-index:1; }
.birth-scene .tcard:nth-of-type(3) { transform:translateY(-35px); z-index:2; }
.birth-stars { position:absolute; inset:5%; width:90%; height:90%; color:var(--gold); z-index:-1; opacity:.6; }
.birth-seal { position:absolute; bottom:4px; z-index:3; background:var(--night-2); border:1px solid var(--line-gold); border-radius:999px; padding:8px 20px; color:var(--gold-2); font-size:13px; }
.birth-family { display:flex; flex-wrap:wrap; gap:20px; margin-top:24px; }
.birth-family a { display:grid; justify-items:center; gap:12px; text-align:center; font-size:13px; width:130px; }
.birth-family .tcard { --w:100px; }
.birth-compare { margin-top:30px; border-top:1px solid var(--line-2); padding-top:30px; }
.birth-compare summary { cursor:pointer; min-height:44px; font:400 25px var(--font-display); }
.birth-compare__cards { display:grid; grid-template-columns:1fr 1fr; gap:28px; margin-block:24px; }
.birth-compare__cards>div { display:grid; justify-items:center; text-align:center; gap:12px; }
.birth-compare__cards .tcard { --w:150px; }
/* Love: a fan that becomes the actual three-card reading. */
.page-question { --ritual-accent:#ee7f9c; }
.heart-fan { min-height:430px; }
.heart-fan .fan-card { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) rotate(var(--angle)) translateY(-35px); transform-origin:50% 135%; transition:transform .35s var(--ease),filter .35s,opacity .35s; border-radius:10px; padding:0; }
.heart-fan .fan-card .tcard { --w:clamp(100px,11vw,145px); }
.heart-fan .fan-card:hover,.heart-fan .fan-card:focus-visible { transform:translate(-50%,-56%) rotate(var(--angle)) translateY(-54px); filter:brightness(1.15); z-index:3; }
.heart-fan .fan-card.is-picked { transform:translate(-50%,-75%) rotate(var(--angle)) translateY(-75px); filter:drop-shadow(0 0 12px #ee7f9c77); }
.heart-fan .fan-card:disabled { cursor:default; }
.heart-fan.is-done .fan-card { opacity:.22; }
.heart-fan__caption { position:absolute; bottom:-16px; text-align:center; color:var(--ink-2); font-size:14px; }
.heart-orbit { position:absolute; width:88%; aspect-ratio:1; opacity:.45; color:var(--rose); z-index:-1; }
.heart-tendency { display:inline-block; padding:10px 22px; margin-top:18px; color:var(--gold-2); border:1px solid var(--line-gold); border-radius:999px; }
.question-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; margin-block:32px; }
.question-link { padding:26px; border:1px solid var(--line-2); border-radius:16px; background:rgba(47,26,55,.48); display:flex; align-items:center; gap:18px; transition:border-color .2s,background .2s; min-height:110px; }
.question-link:hover { background:rgba(73,34,62,.6); border-color:rgba(238,127,156,.5); }
.question-link .ico { color:var(--rose); flex:none; }
.question-link h2 { font:400 clamp(21px,2.3vw,28px)/1.25 var(--font-display); }
.question-link p { color:var(--ink-2); font-size:14px; margin-top:8px; }
.question-link svg:last-child { margin-left:auto; }
.question-notice { color:#e6cbd4; font-size:14px; padding:16px 20px; border-left:2px solid var(--rose); background:rgba(238,127,156,.06); margin-top:22px; }
/* A period reading is laid out like three windows on one horizon. */
.period-signs { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:12px; margin-block:32px; }
.period-signs a { display:flex; flex-direction:column; align-items:center; gap:10px; padding:22px 10px; border:1px solid var(--line-2); border-radius:16px; background:rgba(255,255,255,.02); transition:border-color .2s; }
.period-signs a:hover,.period-signs a[aria-current] { border-color:var(--gold); background:rgba(212,175,106,.07); }
.period-signs b { font-size:33px; color:var(--gold-2); font-weight:400; }
.period-signs span { font-size:14px; }
.period-triptych { position:relative; margin-block:40px; padding:45px 32px; border:1px solid var(--line-gold); border-radius:24px; background:radial-gradient(ellipse at 50% 10%,#3b26574d,transparent 65%),#100c1a; }
.period-triptych:before { content:''; position:absolute; inset:16px; border:1px solid rgba(212,175,106,.09); border-radius:13px; pointer-events:none; }
.period-reveal { display:block; margin:20px auto 0; }
.period-events { display:flex; gap:16px; align-items:flex-start; color:var(--ink-2); font-size:15px; padding:22px; border:1px solid var(--line); border-radius:14px; margin-top:24px; }
.period-events .ico { color:var(--gold); flex:none; margin-top:3px; }
.ritual-reminder { display:flex; gap:12px; align-items:end; flex-wrap:wrap; padding-block:16px; }
.ritual-reminder label { display:grid; gap:8px; font-size:14px; color:var(--ink-2); }
.ritual-reminder .input { width:130px; }
/* The entrance: distinct little stage sets rather than a grid of identical cards. */
.experiences-heading { text-align:center; max-width:750px; margin:auto; }
.experiences-heading .ritual-deck { margin-inline:auto; }
.experiences-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:22px; margin-block:48px; }
.experience { grid-column:span 2; position:relative; overflow:hidden; border:1px solid var(--line-2); border-radius:22px; background:#171122; display:flex; flex-direction:column; min-width:0; }
.experience:nth-child(-n+2) { grid-column:span 3; }
.experience:hover { border-color:var(--line-gold); }
.experience__art { height:230px; position:relative; display:flex; align-items:center; justify-content:center; isolation:isolate; background:radial-gradient(ellipse at bottom,#3c2456,transparent 70%); }
.experience__art .tcard { --w:100px; position:absolute; box-shadow:0 15px 30px #0008; }
.experience__art .tcard:nth-child(1) { transform:translateX(-65px) rotate(-17deg); }
.experience__art .tcard:nth-child(2) { transform:translateY(-15px); z-index:1; }
.experience__art .tcard:nth-child(3) { transform:translateX(65px) rotate(17deg); }
.experience__body { padding:24px 28px 28px; }
.experience h2 { font:400 27px/1.17 var(--font-display); }
.experience p { color:var(--ink-2); margin-top:12px; font-size:15px; }
.experience__go { color:var(--gold-2); margin-top:20px; display:flex; align-items:center; gap:10px; font-size:14px; }
.experience__orbit { width:180px; height:180px; border:1px solid var(--line-gold); border-radius:50%; box-shadow:0 0 0 30px #d4af6a08,0 0 0 31px #d4af6a25; position:relative; }
.experience__orbit:before { content:''; position:absolute; width:68px; height:68px; border-radius:50%; top:56px; left:56px; background:radial-gradient(circle at 35% 30%,#dfc7a2,#886f71 40%,#2b203c 75%); box-shadow:0 0 45px #d4af6a25; }
.experience__orbit:after { content:''; width:14px; height:14px; border-radius:50%; background:var(--gold-2); position:absolute; left:5px; top:40px; box-shadow:0 0 18px #d4af6a; }
.ritual-mini { display:flex; flex-wrap:wrap; gap:12px; margin-block:20px; }
.ritual-mini .tcard { --w:65px; }
.ritual-account-readings { margin-block:30px; padding:26px; border:1px solid var(--line-gold); border-radius:20px; }
.ritual-account-readings h2 { font:400 28px var(--font-display); margin-bottom:18px; }
.ritual-account-readings article+article { border-top:1px solid var(--line); padding-top:20px; margin-top:20px; }
.ritual-account-readings p { color:var(--ink-2); }
@media(max-width:900px) { .ritual-hero { gap:20px; }.ritual-scene{min-height:400px}.birth-scene .tcard:nth-of-type(1){transform:translate(-65px,40px) rotate(-15deg)}.birth-scene .tcard:nth-of-type(2){transform:translate(65px,35px) rotate(15deg)}.period-signs{grid-template-columns:repeat(4,minmax(0,1fr))}.experience{grid-column:span 3}.experience:last-child{grid-column:span 6} }
@media(max-width:640px) { .ritual-shell{padding-top:20px}.ritual-hero{grid-template-columns:1fr;gap:8px;min-height:auto}.ritual-heading{font-size:clamp(34px,9vw,48px)}.ritual-scene{min-height:360px;order:2;margin-top:12px}.ritual-hero__copy{order:1}.ritual-scene .tcard{--w:130px}.birth-scene .tcard:nth-of-type(1){transform:translate(-78px,25px) rotate(-15deg)}.birth-scene .tcard:nth-of-type(2){transform:translate(78px,25px) rotate(15deg)}.birth-scene .tcard:nth-of-type(3){transform:translateY(-25px)}.birth-seal{bottom:-5px}.ritual-deck{margin-top:18px}.ritual-form{margin-top:24px;max-width:none}.ritual-cards{gap:10px}.ritual-card-slot .tcard{--w:clamp(80px,25vw,145px)}.ritual-card-slot__label{font-size:12px;line-height:1.4}.ritual-card-slot h3{font-size:16px}.ritual-card-slot p{font-size:12px}.ritual-calculation{font-size:11px;padding:8px;overflow-wrap:anywhere}.ritual-reading__grid{grid-template-columns:1fr;gap:25px}.ritual-reading{margin-top:28px;padding:24px 20px}.ritual-trust summary{font-size:14px}.ritual-trust p{padding-left:0}.question-grid{grid-template-columns:1fr;gap:12px}.question-link{padding:22px}.heart-fan{min-height:325px}.heart-fan .fan-card .tcard{--w:110px}.heart-fan__caption{bottom:-4px}.period-signs{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.period-signs a{padding:16px 8px}.period-triptych{padding:25px 12px}.period-triptych:before{inset:8px}.experiences-grid{grid-template-columns:1fr;gap:18px;margin-top:30px}.experience,.experience:nth-child(-n+2),.experience:last-child{grid-column:auto}.experience__art{height:210px}.experience__body{padding:22px}.ritual-actions .btn{flex:1 0 auto}.birth-compare__cards .tcard{--w:115px}.ritual-form-row{gap:10px} }
@media(prefers-reduced-motion:reduce) { .page-ritual *, .page-ritual *:before,.page-ritual *:after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }
.heart-fan { background:linear-gradient(#0d0a1860,#0d0a1840),url('../img/rituals/reading-table.webp') center/cover; border-radius:50%; box-shadow:0 0 55px 24px #0d0a18 inset; }
.period-triptych { background:linear-gradient(#0d0a1899,#0d0a18b8),url('../img/rituals/reading-table.webp') center/cover; }
.heart-fan .fan-card.is-picked { pointer-events:none; }
.ritual-tabs .ritual-check { min-height:44px; align-items:center; padding-inline:10px; }
.ritual-tabs .ritual-check input { margin-top:0; }
.ritual-back>.ico { transform:rotate(180deg); }
@media(max-width:640px) { .heart-fan .fan-card .tcard { --w:clamp(78px,24vw,100px); } }
.heart-fan { overflow:clip; }
.heart-fan__caption { bottom:12px; }