@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600&display=swap');
:root{--gold:#c5a874;--gold-bright:#f0dfba;--ink:#14101c;--panel:rgba(25,17,29,.97);--violet:#c0aab9;--ivory:#eee4d4;--muted:#cbbbaf}
body{color:var(--ivory);background:#100d18}
button,input,textarea{font:inherit}button{touch-action:manipulation}
button:focus-visible,a:focus-visible,summary:focus-visible,textarea:focus-visible{outline:2px solid #f0dfba;outline-offset:5px}
[hidden]{display:none!important}
.room-welcome{position:fixed;inset:0;z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:space-between;text-align:center;padding:100px 24px 48px;background:linear-gradient(180deg,#100d1870,transparent 38%,transparent 55%,#100d18d9);transition:opacity .85s,visibility .85s}
.room-welcome.hidden{opacity:0;visibility:hidden;pointer-events:none}
.welcome-title h1{font:500 clamp(48px,7vw,84px)/1 'Cormorant Garamond',Georgia,serif;letter-spacing:.16em;color:#f0dfba;margin:12px 0}
.welcome-title p{font:24px/1.3 'Cormorant Garamond',Georgia,serif;color:#e5d7c6;margin:10px 0}
.welcome-invitation p{font:22px/1.3 'Cormorant Garamond',Georgia,serif;color:#eee4d4;margin:0 0 20px;text-shadow:0 2px 16px #100d18}
.welcome-invitation span{display:block;color:#cbbbaf;font-size:11px;margin-top:16px}
@media(max-width:600px){.room-welcome{padding:115px 24px 60px}.welcome-title h1{font-size:60px}.welcome-title p{font-size:21px}.welcome-invitation p{font-size:20px}}
@media(max-height:680px){.room-welcome{padding:86px 24px 32px}.welcome-title h1{font-size:48px}.welcome-title p{font-size:19px}.welcome-invitation p{font-size:18px;margin-bottom:12px}.welcome-invitation span{margin-top:10px}}
.room-vignette{position:fixed;inset:0;pointer-events:none;z-index:2;background:radial-gradient(ellipse at 60% 50%,transparent 25%,#15102033 68%,#090711d9 100%)}
#back-to-site{position:fixed;top:20px;left:24px;z-index:32;display:inline-flex;align-items:center;min-height:44px;padding:10px 16px;border-radius:30px;background:#17111fc9;border:1px solid #c5a87445;color:#f0dfba;font:12px 'Cinzel',serif;letter-spacing:.04em;text-decoration:none;backdrop-filter:blur(8px)}
#sound-fab,#guide-fab{top:20px;width:44px;height:44px;background:#17111fc9;border-color:#c5a87445;z-index:32}
#sound-fab{right:24px}#guide-fab{left:auto;right:80px}
#sound-fab svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle}
#sound-fab.off svg{opacity:.5}#sound-fab.off::after{content:'';position:absolute;width:22px;height:1px;background:currentColor;transform:rotate(-45deg);left:10px;top:21px}
.overlay{background:linear-gradient(90deg,#100c1aeb, #140e1e9c 38%,#140e1e10 77%);justify-content:flex-start;padding:80px 6vw 55px;overflow-y:auto;align-items:center}
.intro-card{width:490px;max-width:47vw;text-align:left;padding:0;background:none;border:0;border-radius:0;box-shadow:none;backdrop-filter:none;transform:none!important;will-change:auto}
.eyebrow{font:10px 'Cinzel',serif;letter-spacing:.26em;text-transform:uppercase;color:#ccb797;margin-bottom:15px}
.intro-card h1{font-family:'Cormorant Garamond',Georgia,serif;font-size:clamp(56px,6.6vw,88px);letter-spacing:.15em;color:#f3e6cf;text-shadow:none;line-height:1}
.intro-card h1::before,.intro-card h1::after{content:none}
.intro-card .sub{font:400 clamp(24px,2.5vw,33px)/1.18 'Cormorant Garamond',Georgia,serif;color:#e2d6c8;letter-spacing:0;margin:22px 0 23px}
.rule{margin:0 0 22px;width:56px;background:#c5a8747a}
.question-label{display:flex;justify-content:space-between;font-size:12px;color:#dbcec0;margin-bottom:10px}.question-label span{font-size:10px;color:#b8aa9f}
#question{min-height:64px;height:64px;font-size:15px;line-height:1.5;background:#120e1c99;border:1px solid #c5a87443;border-radius:4px;padding:12px 14px}
#question::placeholder{color:#b8aaab}#question:focus{box-shadow:none}
.spreads{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:18px 0 0}
.spread-btn{border-radius:4px;padding:13px 7px;flex:1;min-width:0;background:#181222a6;display:flex;flex-direction:column;align-items:center;gap:6px;max-width:none;font-family:inherit;border-color:#c5a8743b}
.spread-btn.sel{background:#c5a87417;border-color:#d9bf90;box-shadow:inset 0 0 20px #c5a87408}
.spread-btn .spread-mark{font-family:'Cormorant Garamond',Georgia,serif;font-size:25px;line-height:1;color:#ddc596}
.spread-btn .t{font-size:10px;letter-spacing:.07em;text-transform:uppercase}.spread-btn .d{font-size:10px;line-height:1.4;opacity:.85;margin-top:0;font-style:normal}
.reversal-intro{font-size:12px;line-height:1.6;color:var(--muted);margin-top:14px;max-width:440px}.reversal-intro strong{font-weight:500;color:var(--ivory)}
.begin{font:11px 'Cinzel',serif;letter-spacing:.14em;padding:16px 28px;background:linear-gradient(130deg,#f0dfba,#c3a06b);box-shadow:0 5px 25px #0005;border-radius:4px;color:#251c20;min-height:48px;transition:box-shadow .25s,transform .25s}
.begin:hover{box-shadow:0 7px 28px #d2ad6a26;transform:translateY(-2px)}
#begin{width:100%;margin-top:20px}.ghost-btn{font-size:10px;letter-spacing:.09em;border-radius:4px;border-color:#c5a87450;box-shadow:none}
#open-guide{border:0;padding:12px 0;color:#c8b49a;margin-top:10px;text-transform:none;letter-spacing:.04em}#open-guide span{margin-left:18px}
.table-caption{position:absolute;left:61%;bottom:15%;color:#d9c9b5;text-align:center;pointer-events:none}.table-caption span{font:22px 'Cormorant Garamond',serif}.table-caption small{display:block;font:9px 'Cinzel',serif;letter-spacing:.18em;margin-top:10px;color:#b9a38c}
#hint{top:82px;font:12px 'Cinzel',serif;letter-spacing:.12em;text-shadow:0 2px 12px #000;background:none;padding:12px 15px;color:#eddfc6}
#question-echo{bottom:12px;font-size:12px;background:none;color:#cbbeb9;padding:10px 100px}
#disclaimer{font-size:10px;color:#baa99bcc;bottom:12px;left:24px}
#card-controls{position:fixed;z-index:17;bottom:40px;left:0;right:0;text-align:center;pointer-events:none}
#card-controls button{pointer-events:auto}
#card-controls.zoomed{pointer-events:auto}
#card-controls.zoomed::before{content:'';position:absolute;z-index:-1;inset:-28px 0 -60px;background:linear-gradient(transparent,#191220e8 27%,#191220f5 72%);pointer-events:none}
#selection-caption{font:italic 19px 'Cormorant Garamond',serif;color:#ece0d3;margin-bottom:10px}
#chosen-cards{display:flex;justify-content:center;gap:6px;min-height:24px}
.chosen-card{display:flex;align-items:center;justify-content:center;width:14px;height:23px;border:1px solid #c5a87445;border-radius:2px;color:#eed9b3;font-size:12px;transition:background .3s,border-color .3s}
.chosen-card.filled{background:#69516980;border-color:#d4b98c;box-shadow:0 0 12px #d9b88314}
#deck-zoom{padding:7px 16px;min-height:36px;margin-top:9px;font-size:9px;letter-spacing:.08em;background:#1b1424ed}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.card-actions{display:flex;justify-content:center;align-items:center;gap:16px}.card-actions .begin{margin:0;min-width:220px}
.round-control{width:46px;height:46px;border:1px solid #c5a87470;border-radius:50%;background:#1d1525e6;color:#f0dfba;cursor:pointer;font-size:18px}
#selection-progress{margin-top:8px;font:9px 'Cinzel',serif;letter-spacing:.1em;color:#d7c5ad}
#next-reveal{position:fixed;bottom:75px;left:50%;transform:translateX(-50%);z-index:17;margin:0;white-space:nowrap}
#panel{top:88px;right:24px;bottom:65px;width:min(355px,34vw);border:1px solid #c5a8744a;border-radius:7px;padding:32px 25px;background:linear-gradient(150deg,#251a2cf7,#15101df7);box-shadow:0 18px 65px #0006;transform:translateX(120%)}
#panel.open{transform:none}#panel h2{font:500 32px/1.1 'Cormorant Garamond',serif;color:#f0dfba;margin-top:12px}#panel .pos{font-size:9px;letter-spacing:.17em;color:#c8b49a;margin-top:8px}
#panel .keys{font-size:13px;color:#cdbbbf;margin:16px 0}#panel .body{font-size:15px;line-height:1.65;color:#eae0d3}
#panel .ori{font-size:9px;padding:5px 9px;letter-spacing:.08em;margin-top:12px}#panel .ori.up{background:#c5a87414;border-color:#c5a87440}
#panel .orientation-explainer{font-size:12px;line-height:1.55;color:#dac8d4;margin-top:10px}
#panel .card-context{font-size:13px;line-height:1.6;color:#d3bd99;margin:0 0 14px;padding-left:12px;border-left:1px solid #c5a8746b}
.card-reflection{margin-top:20px;padding-top:16px;border-top:1px solid #c5a87430}.card-reflection span{font:10px 'Cinzel',serif;color:#d3bd99;letter-spacing:.09em;text-transform:uppercase}.card-reflection p{font:italic 19px/1.45 'Cormorant Garamond',Georgia,serif;color:var(--ivory);margin-top:9px}
.rrow .reading-prompt{font-size:13px;line-height:1.6;color:#d3bd99;margin-top:10px}
.card-depth,.reading-details{border-top:1px solid #c5a87430;margin-top:22px;padding-top:16px}
summary{cursor:pointer;font:11px 'Cinzel',serif;color:#dfc59d;line-height:1.7;padding:6px 0;list-style-position:inside}
#panel .posmean,#panel .lesson{font-size:13px;line-height:1.6;padding:12px;margin-top:14px;border-color:#c5a87455;background:#c5a87407}#panel .lesson b{font-size:9px;color:#dfc59d}
#panel-next{width:100%;padding:14px 8px;margin-top:22px;font-size:10px}
.close-x{width:44px;height:44px;top:4px;right:8px;color:#c5b5b9;font-size:24px}
#reveal-btn{z-index:17;bottom:65px;padding:15px 24px;font-size:11px}body:has(#panel.open) #reveal-btn{display:none}
.reading-card{border-radius:6px;border-color:#c5a87455;box-shadow:0 24px 100px #0008;padding:28px 38px;max-height:84dvh}
.reading-card h2{font:500 37px 'Cormorant Garamond',serif;letter-spacing:.04em;text-shadow:none}.reading-card h2::before,.reading-card h2::after{content:none}
.reading-actions{display:flex;justify-content:space-between;gap:10px;margin-bottom:24px;flex-wrap:wrap}.reading-actions .ghost-btn{margin:0;padding:10px 12px;min-height:44px}
.reading-summary{color:#e6d9cb;line-height:1.7}.reading-summary h3{font:500 27px 'Cormorant Garamond',serif;color:#f0dfba;margin:10px 0}
/* Artwork textures use a power-of-two canvas; display at the card's 3:5 shape. */
.reading-thumb{width:55px;height:92px;object-fit:fill;flex-shrink:0;border:1px solid #c5a87466;border-radius:3px}.rrow{gap:18px;padding:20px 0}.rrow .rn{font:500 22px 'Cormorant Garamond',serif}.rrow .rp{font-size:9px}.rrow .rm{font-size:14px;line-height:1.6;margin-top:8px}
.reading-status{font-size:12px;color:#dfc59d;min-height:18px}.closing{font-size:15px;line-height:1.7;color:#d9c7b6}.story-h{font-size:10px;color:#c0a887}#r-story p,#r-story p.opening{font-size:15px;line-height:1.7}
#reading{z-index:40}#guide{z-index:45}.guide-card{border-color:#c5a87455;border-radius:6px;box-shadow:0 24px 100px #0008}.guide-head h2{font-family:'Cormorant Garamond',serif;font-size:28px;letter-spacing:.04em}
.capture{background:#c5a87408;border-color:#c5a87433}.capture .opt,.capture .csub{font-size:13px}.capture .fineprint{color:#bdaeaa}.gtab{min-height:36px}
/* Carry the room's ivory, plum and brass through the reading and guide states. */
#panel .ori.rev{background:#a3839c1c;color:#d9bfce;border-color:#a3839c66}
.reading-card .q,.capture .csub,.capture .opt,.guide-body em,.lib-detail .keys{color:var(--muted)}
.guide-body,.rrow .rm,.lib-card .n,.lore-row .lt{color:var(--ivory)}
.gtab,.lib-card{background:#1b1424b3;border-color:#c5a87438;color:#d8c5a6}
.gtab.sel{background:#c5a8741f;border-color:var(--gold);color:var(--gold-bright)}
.lib-detail .mrow.rev{border-left-color:#a3839c;background:#a3839c0f}
.guide-head,.guide-tabs,.lore-row,.rrow{border-color:#c5a87430}
#reading,#guide,#unlock{background:#0d0916d9}
.unlock-card{border-color:#c5a87455;box-shadow:0 24px 100px #0008}
.unlock-card p,.unlock-card .skip{color:var(--muted)}
.capture input[type=email]{color:var(--ivory);background:#120e1cbf;border-color:#c5a87459}
.capture .cbtn{background:linear-gradient(130deg,#f0dfba,#c3a06b)}
@media(min-width:1440px){.intro-card{width:540px}.overlay{padding-left:9vw}}
@media(max-width:760px){
 .overlay{padding:88px 25px 32px;align-items:center;background:linear-gradient(180deg,#100c1adc,#140e1ec9 70%,#140e1e80);justify-content:center}
 .intro-card{width:100%;max-width:440px}.intro-card h1{font-size:58px;letter-spacing:.12em}.intro-card .sub{font-size:27px;margin:18px 0}.eyebrow{font-size:9px;margin-bottom:12px}.rule{margin-bottom:18px}
 .table-caption{display:none}.spreads{grid-template-columns:repeat(2,minmax(0,1fr));margin:16px 0 0;gap:7px}.spread-btn{display:flex;flex-direction:column;align-items:center;gap:6px;flex:1;padding:10px 5px}.spread-btn .t{font-size:10px}.spread-btn .d{font-size:10px}.spread-btn .spread-mark{font-size:23px}
 #question{min-height:68px;height:68px;font-size:16px}.question-label{font-size:12px}#begin{margin-top:18px}.intro-card .ghost-btn{font-size:10px}
 #back-to-site{left:16px;top:16px;padding:10px 12px;font-size:10px}#sound-fab,#guide-fab{top:16px;width:44px;height:44px}#sound-fab{right:16px}#guide-fab{right:70px}
 #hint{top:80px;font-size:10px;line-height:1.6;padding:8px 24px;letter-spacing:.06em}#disclaimer{left:16px;font-size:9px;bottom:10px}
 #card-controls{bottom:44px}#selection-caption{font-size:17px;padding:0 18px}.card-actions{gap:12px}.card-actions .begin{min-width:180px;font-size:10px;padding:15px 16px}#selection-progress{font-size:8px}#deck-zoom{min-height:40px;margin-top:7px}
 #question-echo{font-size:11px;padding:10px 20px;bottom:24px}
 #panel{top:auto;left:12px;right:12px;bottom:28px;width:auto;max-height:43dvh;padding:24px 20px;border:1px solid #c5a87450;border-radius:10px;transform:translateY(120%)}
 #panel::before{display:none}#panel .pos{margin-top:0;font-size:9px}#panel h2{font-size:28px;margin-top:8px}#panel .keys{font-size:12px;margin:10px 0}#panel .body{font-size:14px;line-height:1.55}#panel-next{margin-top:15px;padding:12px 8px;min-height:44px}#panel .close-x{top:3px}.card-depth{margin-top:12px;padding-top:6px}
 #next-reveal{bottom:80px;font-size:10px}.reading-card{padding:22px 20px;max-height:87dvh;width:94%}.reading-card h2{font-size:32px}.reading-card .q{font-size:14px}.reading-actions .ghost-btn{font-size:9px;padding:10px}.reading-thumb{width:46px;height:77px}.rrow{gap:13px}.rrow .rn{font-size:21px}.rrow .rm{font-size:13px}
 .guide-card{height:100dvh;border-radius:0}.guide-head{padding-top:28px}.guide-body{font-size:15px}
}
@media(max-height:680px){.overlay{align-items:flex-start;padding-top:85px}.intro-card .sub{font-size:24px;margin:12px 0}.intro-card h1{font-size:52px}.eyebrow{margin-bottom:10px}.rule{margin-bottom:15px}#card-controls{bottom:40px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
.reading-thumb.reversed{transform:rotate(180deg)}
#r-narrative p{font-size:14px;line-height:1.75;margin:12px 0 20px;color:#e1d4cb}
#r-narrative h4{color:#e9d3af;font-family:'Cormorant Garamond',serif;font-size:22px}
.lib-card{color:#dfc59d}.lib-card .n{display:block}.lib-card .g{font:22px 'Cormorant Garamond',serif}

@media(min-width:761px) and (max-height:680px){#panel{top:85px;bottom:25px;max-height:70dvh}}