@font-face{font-family:Montserrat;src:url('assets/montserrat.ttf') format('truetype');font-weight:100 900;font-display:swap}
:root{color-scheme:dark;--bg:#080909;--paper:#E8E8E8;--gold:#E8E8E8;--heading:#787878;--muted:#B8B8B8;--line:#303030;--top-space:24px;--button-radius:999px;--button-line:#ffffff26;--button-fill:linear-gradient(135deg,#ffffff18,#ffffff08);--button-hover:linear-gradient(135deg,#ffffff24,#ffffff12)}
*{box-sizing:border-box}html{scroll-behavior:smooth;overflow-x:clip}body{margin:0;background:var(--bg);color:var(--paper);font-family:Montserrat,Arial,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:clip}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}a{color:inherit}[hidden]{display:none!important}button:focus-visible,a:focus-visible{outline:2px solid var(--gold);outline-offset:6px}
.page{width:100%;max-width:1200px;padding:var(--top-space) clamp(18px,3.5vw,42px) 0;margin:auto}.hero{height:calc(100svh - var(--top-space));min-height:450px;display:flex;flex-direction:column}.header{container-type:inline-size;width:100%;flex-shrink:0}.wordmark{display:flex;width:100%;align-items:center;justify-content:space-between;font-size:clamp(24px,8.2cqw,88px);font-weight:400;letter-spacing:0;line-height:1.2;gap:.15em;text-decoration:none;white-space:nowrap}.wordmark span{white-space:nowrap}main{container-type:inline-size;display:flex;flex-direction:column;flex:1;min-height:0}.meta-row{display:flex;justify-content:space-between;gap:12px;flex-shrink:0;margin-top:12px;color:var(--muted);font-size:clamp(11px,2.96cqw,19px);font-weight:400;line-height:1.3}.stage{display:flex;flex-direction:column;align-items:center;flex:1;min-height:0;padding-top:clamp(18px,3svh,28px)}
.card-scene{position:relative;isolation:isolate;container-type:size;display:flex;align-items:center;justify-content:center;flex:1;min-height:0;width:100%}.card-scene:before{content:'';position:absolute;z-index:-1;width:135%;max-width:850px;height:110%;background:radial-gradient(ellipse,rgba(230,230,230,.16) 0%,rgba(230,230,230,.10) 25%,rgba(230,230,230,.045) 48%,rgba(230,230,230,0) 72%);filter:blur(30px);pointer-events:none}.card-stack{width:min(80cqw,56cqh);aspect-ratio:825/1429;position:relative;perspective:1400px;flex-shrink:0}.stack-layer{display:none}.card-flipper{width:100%;height:100%;position:relative;transform-style:preserve-3d;transition:transform 1s cubic-bezier(.25,.75,.25,1)}.card-flipper.revealed{transform:rotateY(180deg)}.card-back,.card-front{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:10px;overflow:hidden;box-shadow:none}.card-front{transform:rotateY(180deg);background:#cbb992}.card-front img{display:block;width:100%;height:100%;object-fit:contain}.card-back{container-type:size;background:#1C1C1C;padding:13px;border:0}.back-inner{height:100%;padding:20px;border:0;display:flex;flex-direction:column;justify-content:space-between;color:var(--gold)}.back-top,.back-bottom{font-size:8px;letter-spacing:.7px}.back-type{font-size:clamp(16px,10cqh,54px);font-weight:500;line-height:1.12;letter-spacing:-1px}.under-card{display:none}
.introduction{width:100%;flex-shrink:0;text-align:center;margin:22px 0 24px}.introduction h1{font-size:17px;font-weight:400;color:var(--gold);margin:0 0 16px}.draw-button{background:var(--button-fill);border:1px solid var(--button-line);color:var(--paper);border-radius:var(--button-radius);padding:16px 32px;font-size:12px;letter-spacing:1px;text-transform:uppercase;min-width:235px;transition:background .2s}.draw-button:hover{background:var(--button-hover)}.draw-button:disabled{opacity:.6;cursor:wait}.draw-note{font-size:11px;color:var(--muted);margin:13px 0 0}
.reading{width:100%;flex-shrink:0;margin-top:22px}.tiny-label{color:var(--gold);font-size:clamp(12px,3.3cqw,22px);font-weight:400;letter-spacing:.06em;line-height:1.3;margin:0 0 8px}.reading h1{font-size:clamp(24px,8.2cqw,70px);font-weight:400;line-height:1.15;letter-spacing:0;text-transform:uppercase;outline:none;margin:0 0 9px;overflow-wrap:break-word}.keywords{color:var(--gold);font-size:clamp(11px,2.96cqw,19px);letter-spacing:.035em;line-height:1.4;margin:0}.scroll-cue{display:flex;align-items:center;justify-content:center;width:52px;height:40px;margin:14px auto 12px;text-decoration:none}.scroll-cue:hover{color:var(--gold)}
.interpretation{container-type:inline-size;max-width:850px;margin:20px auto 0;scroll-margin-top:30px;padding-bottom:45px}.reflection,.question-block{padding:27px 0;border-top:1px solid #212121}.section-label{font-size:clamp(12px,2.96cqw,17px);color:var(--gold);letter-spacing:1px;margin:0 0 15px;font-weight:500;line-height:1.7}.section-label span{display:none}.reflection>p:last-child,.question-block>p:last-child{font-size:clamp(15px,3.3cqw,19px);line-height:1.55;font-weight:400;color:#D0D0D0;margin:0}.saved-note{font-size:12px;line-height:1.8;color:var(--muted);margin-top:28px}.saved-note p{margin:0}.image-fallback{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:#1C1C1C;padding:25px}.image-fallback p{font-size:25px}.image-fallback a{font-size:12px;color:var(--gold)}.status{color:var(--gold);text-align:center;font-size:12px;line-height:1.7}.about-button,.dialog-close{background:var(--button-fill);border:1px solid var(--button-line);border-radius:var(--button-radius);color:var(--paper);font-size:10px;text-transform:uppercase;letter-spacing:1px;padding:11px 16px;transition:background .2s,color .2s}.about-button:hover{background:var(--button-hover)}footer{border-top:1px solid #212121;padding:24px 0 30px;display:flex;align-items:center;justify-content:space-between;gap:18px;color:var(--muted);font-size:9px}footer p{margin:0}footer p:first-of-type{display:none}.footer-dot{margin:0 5px}dialog{border:1px solid #303030;background:#151515;color:var(--paper);width:min(550px,calc(100% - 32px));max-height:85svh;padding:64px 30px 30px;border-radius:24px;box-shadow:0 24px 90px #0007;overscroll-behavior:contain}dialog::backdrop{background:#000b;backdrop-filter:blur(5px)}.dialog-close{position:absolute;right:16px;top:16px;display:grid;place-items:center;width:40px;height:40px;padding:0;border:1px solid var(--button-line);border-radius:var(--button-radius);background:var(--button-fill);color:var(--paper);transition:background .2s,color .2s}.dialog-close:hover{background:var(--button-hover);color:var(--paper)}.dialog-close:focus{outline:none}.dialog-close:focus-visible{outline:none;background:var(--button-hover);box-shadow:inset 0 0 0 2px #ffffff65}dialog h2{font-size:28px;font-weight:500;line-height:1.15;margin:0 0 25px}dialog>p:not(.tiny-label),.credits{font-size:13px;line-height:1.55;color:#BBBBBB}.credits{border-top:1px solid #212121;margin-top:25px;padding-top:20px}.credits a{color:inherit}
.draw-button,.about-button,.dialog-close{-webkit-backdrop-filter:blur(14px) saturate(125%);backdrop-filter:blur(14px) saturate(125%);box-shadow:inset 0 1px 0 #ffffff16,0 4px 18px #0003}.draw-button:active,.about-button:active,.dialog-close:active{background:var(--button-hover)}
.header,.meta-row{width:100%;box-sizing:border-box}.meta-row{padding-inline:.25cqw}.meta-row>*{display:block;white-space:nowrap}
.card-pick{appearance:none;-webkit-appearance:none;margin:0;display:flex;align-items:center;justify-content:center;background-color:#2A2A2A;background-image:linear-gradient(145deg,#ffffff08,transparent 55%,#00000010);padding:24px;border:0;color:var(--gold);font:inherit;cursor:pointer;box-shadow:inset 0 1px 0 #ffffff0b;transition:background-color .2s,box-shadow .2s}
.card-pick .back-type{display:block;max-width:100%;font-size:clamp(18px,10cqh,44px);font-weight:500;line-height:1.16;letter-spacing:-.02em;text-align:center;overflow-wrap:normal}
.card-pick:hover{background-color:#333333;box-shadow:inset 0 1px 0 #ffffff12}.card-pick:focus-visible{outline:1px solid var(--gold);outline-offset:5px}.card-pick:disabled{cursor:default}
@media(max-width:600px){:root{--top-space:20px}.card-front,.card-back{border-radius:10px}.card-scene:before{filter:blur(23px)}.back-inner{padding:16px}.back-top,.back-bottom{font-size:6px;letter-spacing:.5px}.card-back{padding:10px}.reading{margin-top:19px}.interpretation{padding-bottom:35px}footer{font-size:8px}}
@media(max-height:650px){:root{--top-space:12px}.stage{padding-top:12px}.meta-row{margin-top:8px}.reading{margin-top:12px}.scroll-cue{height:34px;margin:8px auto}.introduction{margin:15px 0}.introduction h1{margin-bottom:12px}}
/* Reserve the same summary space before and after reveal to keep card dimensions stable. */
.stage{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) calc(clamp(24px,8.2cqw,70px)*1.15 + clamp(12px,2.96cqw,17px)*1.7 + clamp(11px,2.96cqw,19px)*2.8 + 105px)}
.card-scene{grid-column:1;grid-row:1;height:100%}
.introduction,.reading{grid-column:1;grid-row:2;align-self:start}
.reading .tiny-label{font-size:clamp(12px,2.96cqw,17px);font-weight:500;letter-spacing:1px;line-height:1.7}
.wordmark,.reading h1,.introduction h1,dialog h2,.tiny-label,.section-label{color:var(--heading)}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}}

.wordmark,.reading h1,#about-dialog > .tiny-label{color:#FFFFFF}

.saved-note{color:#2C2A25}

.scroll-cue svg{animation:scroll-cue-fade 2.4s ease-in-out -.6s infinite}
.scroll-cue:hover svg,.scroll-cue:focus-visible svg{animation:none;opacity:1}
@keyframes scroll-cue-fade{0%,100%{opacity:.2}50%{opacity:1}}
@media(prefers-reduced-motion:reduce){.scroll-cue svg{animation:none;opacity:1}}

.meta-row,.reading .tiny-label,.section-label{font-size:clamp(12px,2.96cqw,17px);font-weight:500;letter-spacing:1px;line-height:1.7}

.reveal-text{opacity:0;transform:translateY(18px);transition:opacity .75s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
.reveal-text.is-visible{opacity:1;transform:translateY(0)}
@media(prefers-reduced-motion:reduce){.reveal-text{opacity:1;transform:none}}

@media(max-width:600px){
 .hero{height:auto;min-height:calc(100svh - var(--top-space))}
 .stage{--mobile-card-width:min(80cqw,33svh);grid-template-rows:minmax(calc(var(--mobile-card-width)*1429/825 + 48px),1fr) 166px;padding-top:18px}
 .card-stack{width:var(--mobile-card-width)}
 .card-scene{padding-block:24px}
 .reading{margin-top:12px}
 .introduction{margin-top:12px}
}

.introduction h1{color:var(--muted)}

/* The pick screen is one viewport; the reading keeps its natural document flow. */
.page.home{position:relative;height:100dvh;overflow:hidden;padding-bottom:max(16px,env(safe-area-inset-bottom))}
.home .hero{height:100%;min-height:0}
.home .stage{grid-template-rows:minmax(0,1fr) 104px;min-height:0;padding-top:18px}
.home .card-scene{min-height:0;padding-block:0}
.home .card-stack{width:min(80cqw,56cqh)}
.home .introduction{margin:12px 0 0}
.home #status:not([hidden]){position:absolute;bottom:8px;left:18px;right:18px;background:var(--bg);padding:8px;margin:0}
@media(max-width:600px){.home .card-stack{width:min(80cqw,56cqh,33svh)}}

#about-dialog{max-height:calc(100dvh - 32px);padding:60px 30px 24px}
#about-dialog h2{margin-bottom:20px}
#about-dialog>p:not(.tiny-label){margin-block:14px}
#about-dialog .credits{margin-top:20px;padding-top:16px}
#about-dialog .credits p{margin-block:12px}
#about-dialog .credits .section-label{margin-top:0;margin-bottom:14px}
@media(max-width:600px){
 #about-dialog{max-height:calc(100dvh - 24px);padding:56px 24px 20px}
 #about-dialog h2{font-size:25px;margin-bottom:18px}
 #about-dialog>p:not(.tiny-label),#about-dialog .credits{font-size:13px;line-height:1.5}
}

.draw-note{color:var(--heading)}

.reflection-toggle{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;min-height:44px;padding:0;background:transparent;border:0;border-radius:0;text-align:left;font-family:inherit;color:var(--heading);margin:0 0 15px}
.reflection-toggle:after{content:'−';font-size:20px;font-weight:400;flex-shrink:0}
.reflection-toggle[aria-expanded="false"]{margin-bottom:0}
.reflection-toggle[aria-expanded="false"]:after{content:'+'}
.reflection-toggle:hover{color:var(--paper)}
.reflection-toggle:focus-visible{outline:1px solid var(--heading);outline-offset:4px}

@media(max-width:600px){
 :root{--top-space:max(20px,calc(env(safe-area-inset-top) + 12px))}
 html,body,.page{overflow-anchor:none}
 .scroll-cue{display:none}
 .hero{height:calc(100svh - var(--top-space));min-height:0}
 .stage{grid-template-rows:minmax(0,1fr) 120px}
 .card-scene{padding-block:12px}
 .card-stack{width:min(80cqw,56cqh,33svh)}
}

.footer-credits{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:12px 20px;text-align:right}
.footer-credits>span,.footer-credits>a{white-space:nowrap}
.footer-credits a{color:inherit;text-decoration:none;text-underline-offset:3px}
.footer-credits a:hover{text-decoration:underline;color:var(--paper)}
@media(max-width:600px){.footer-credits{flex-direction:column;align-items:flex-end;gap:8px}}

.meta-row,.footer-credits,.footer-credits a,.footer-credits a:hover{color:var(--heading)}

.footer-credits{font-weight:500;letter-spacing:1px}

.card-pick .back-type{font-weight:400}
.footer-credits{row-gap:4px}
.footer-credits a,.footer-credits a:hover{text-decoration:none}
.studio-link-name{text-decoration-line:underline;text-decoration-thickness:.5px;text-underline-offset:.12em;text-decoration-skip-ink:auto}
@media(max-width:600px){.footer-credits{gap:4px}}

/* Give the card the main share of the desktop hero, with a compact centered caption. */
@media(min-width:601px){
 .stage{grid-template-rows:minmax(0,1fr) 196px;padding-top:20px}
 .card-stack{width:min(48cqw,56cqh)}
 .reading{text-align:center;margin-top:16px}
 .reading h1{font-size:clamp(28px,4.3cqw,48px);margin-bottom:8px}
 .reading .tiny-label{margin-bottom:6px}
 .scroll-cue{margin:10px auto 0}
}

/* Keep the card keywords readable on phones without changing desktop typography. */
@media(max-width:600px){
 .reading .keywords{font-size:clamp(14px,3.3cqw,17px)}
}

.footer-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
#yesterday-dialog{max-height:calc(100dvh - 32px);padding:64px 30px 30px}
.yesterday-image{display:block;width:min(65%,240px);height:auto;border-radius:10px;margin:24px auto 30px}
#yesterday-dialog h2{color:var(--paper);font-weight:400;text-transform:uppercase;margin-bottom:10px}
#yesterday-dialog .tiny-label{font-size:12px;font-weight:500;letter-spacing:1px;color:var(--heading)}
#yesterday-dialog details{border-top:1px solid #212121;padding-block:20px}
#yesterday-dialog .keywords{margin-bottom:28px;font-size:14px}
#yesterday-dialog summary{cursor:pointer;margin:0;font-size:12px;color:var(--heading)}
#yesterday-dialog details p{color:#D0D0D0;font-size:15px;line-height:1.55;margin:16px 0 0}
@media(max-width:600px){footer{flex-wrap:wrap}.footer-actions{gap:8px}#yesterday-dialog{padding:60px 24px 24px;max-height:calc(100dvh - 24px)}}

/* Match the main reading accordion controls, including Safari's marker override. */
#yesterday-dialog summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:44px;list-style:none;text-align:left}
#yesterday-dialog summary::-webkit-details-marker{display:none}
#yesterday-dialog summary::marker{content:''}
#yesterday-dialog summary:after{content:'+';font-size:20px;font-weight:400;flex-shrink:0}
#yesterday-dialog details[open]>summary:after{content:'−'}
#yesterday-dialog summary:hover{color:var(--paper)}
#yesterday-dialog summary:focus-visible{outline:1px solid var(--heading);outline-offset:4px}

/* Keep the sole footer credit aligned to the left on every screen. */
#site-footer{flex-direction:column;align-items:flex-start;gap:16px}
#site-footer .footer-credits{justify-content:flex-start;align-items:flex-start;text-align:left;letter-spacing:normal}

#yesterday-title:focus{outline:none}

/* Keep footer actions and the studio credit on one line. */
#site-footer{flex-direction:row;align-items:center;justify-content:space-between;flex-wrap:nowrap;gap:12px}
#site-footer .footer-actions{flex-wrap:nowrap;gap:8px;flex-shrink:0}
#site-footer .footer-credits{letter-spacing:.4px;flex-shrink:0}
@media(max-width:600px){#site-footer .about-button{padding:11px 10px;font-size:9px;letter-spacing:.7px}#site-footer{gap:8px}}
@media(max-width:380px){#site-footer .about-button{padding:11px 8px;font-size:8px;letter-spacing:.5px}#site-footer .footer-credits{font-size:7px;letter-spacing:.3px}#site-footer .footer-actions{gap:6px}}

/* Phone reading text shares one visible left edge, regardless of initial letter. */
@media(max-width:600px){
 .reading{text-align:left}
 #card-name,#card-category,#card-keywords,#meaning-toggle,#advice-toggle,#question-toggle{position:relative;left:var(--ink-offset,0px);text-align:left;padding-inline:0}
}