/* MOOD shared palette and responsive reading experiences. */
:root { --bg:#f6f7fb; --ink:#191b2b; --muted:#626779; --line:#e0e3ef; --accent:#6940e5; --accent-strong:#6033d4; --accent-ink:#5730bd; --accent-soft:#eee9ff; --accent-secondary:#818cf8; --accent-secondary-ink:#5140a5; --accent-secondary-soft:#eeebff; --accent-secondary-tint:#f7f5ff; --font-serif:var(--font-sans); --radius-card:24px; }
body { background:var(--bg); }
.theme-saju { --accent:#d33678; --accent-strong:#b72764; --accent-ink:#a32159; --accent-soft:#ffeaf3; }
.theme-stars { --accent:#4e5bdf; --accent-strong:#414bc4; --accent-ink:#3a42b3; --accent-soft:#eaedff; }
.theme-tarot { --accent:#7845db; --accent-strong:#6633c0; --accent-ink:#602daf; --accent-soft:#f0e8ff; }
.site-nav { display:flex; align-items:center; gap:8px; padding:18px 0; border-bottom:1px solid var(--line); margin:0 0 36px; }
.mood-brand { margin-right:auto; color:var(--ink); text-decoration:none; font-size:27px; font-weight:950; letter-spacing:-1.7px; white-space:nowrap; }
.mood-brand span { color:#7444e5; margin-left:5px; }
.site-nav-link { border:0; background:transparent; padding:8px 17px; font-size:14px; }
.site-nav-link[aria-current='page'] { color:var(--accent-ink); background:var(--accent-soft); }
.app { max-width:880px; padding-top:0; }
.page-title { font-size:clamp(28px,5vw,44px); letter-spacing:-1.8px; }
body .page-title::before,body .page-title::after { display:none; }
.page-intro { color:var(--muted); margin:-8px 0 28px; }
.disclaimer { background:#fff; border:1px solid var(--line); border-left:4px solid var(--accent); }
.reading-notice { font-size:13px; }
.reading-notice summary { cursor:pointer; color:var(--accent-ink); padding:8px 0; font-weight:700; }
.theme-tarot .tarot-picker { background:radial-gradient(ellipse at top,#4d307b,#19172e); border-color:#6f51a0; }
.theme-tarot .tarot-draw-secondary { color:#eee4ff; border-color:#b79be3; }
.theme-stars .zodiac-card { background:radial-gradient(ellipse at top right,#424eb1,#171c43); border-color:#626bc3; }
:focus-visible { outline:3px solid #6543de; outline-offset:5px; }
.landing-shell { max-width:1200px; margin:auto; padding:0 36px; }
.landing-shell .site-nav { margin-bottom:0; }
.mood-hero { min-height:510px; display:grid; grid-template-columns:1.1fr 1fr; align-items:center; gap:30px; padding:54px 0; }
.eyebrow { font-size:11px; font-weight:800; letter-spacing:2px; color:#626779; }
.hero-copy h1 { font-size:clamp(42px,5vw,65px); line-height:1.22; letter-spacing:-4px; margin:23px 0; font-weight:900; }
.hero-copy h1 em { font-style:normal; color:#7444e5; }
.hero-description { font-size:16px; color:var(--muted); line-height:1.9; }
.hero-cta { display:inline-flex; gap:36px; padding:15px 22px; margin-top:16px; border-radius:14px; color:white; background:#242237; text-decoration:none; font-weight:700; }
.hero-cta:hover { background:#6033d4; }
.hero-note { font-size:11px; color:var(--muted); margin-top:16px; }
.orbit-art { height:380px; position:relative; overflow:hidden; }
.planet { position:absolute; width:235px; height:235px; border-radius:50%; left:18%; top:18%; background:radial-gradient(circle at 30% 24%,#f8e7ff 0,#d9bcff 28%,#9c72df 65%,#663cb0 95%); box-shadow:inset -14px -18px 35px #6034a52e,0 25px 50px #634ba61a; }
.orbit { position:absolute; width:94%; height:43%; border:1px solid #b4aacb; border-radius:50%; top:29%; left:1%; transform:rotate(-28deg); z-index:2; }
.orbit-two { transform:rotate(40deg); opacity:.5; }
.floating-card { position:absolute; z-index:3; width:135px; height:185px; right:9%; top:33%; border:6px solid white; border-radius:16px; transform:rotate(16deg); background:#25203d; color:#e3c4ff; box-shadow:0 18px 35px #25203d26; text-align:center; display:flex; flex-direction:column; justify-content:space-around; }
.floating-card span,.floating-card small { font-size:8px; letter-spacing:1px; }
.floating-card b { font-size:67px; font-weight:400; }
.art-star { position:absolute; z-index:4; left:12%; top:8%; font-size:90px; color:#b8dc65; line-height:1; transform:rotate(15deg); }
.little-star { position:absolute; right:12%; top:6%; font-size:45px; color:#8557d2; }
.orbit-label { position:absolute; bottom:5%; left:20%; font-size:9px; letter-spacing:3px; color:#797188; }
.section-heading { display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; }
.section-heading h2 { font-size:22px; letter-spacing:-1px; margin:0; }
.section-heading>span { font-size:9px; letter-spacing:2px; color:var(--muted); }
.reading-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.reading-card { display:block; padding:23px; color:var(--ink); text-decoration:none; border:1px solid #00000008; border-radius:23px; transition:transform .2s,box-shadow .2s; }
.reading-card:hover { transform:translateY(-5px); box-shadow:0 12px 24px #29234112; }
.card-saju { background:#fce7ef; }.card-tarot { background:#eee7fc; }.card-stars { background:#e6ecff; }
.card-top { display:flex; justify-content:space-between; align-items:center; gap:8px; font-size:9px; font-weight:700; letter-spacing:.5px; }
.card-top>span:last-child { border:1px solid #00000015; border-radius:20px; padding:4px 9px; }
.card-art { height:140px; display:flex; align-items:center; justify-content:center; }
.saju-art i { width:48px; height:65px; border-radius:40px; background:#e577a2; transform:rotate(-25deg); margin-left:-10px; border:2px solid #fce7ef; }
.saju-art i:nth-child(2) { background:#f2a5c2; height:90px; }.saju-art i:nth-child(3) { background:#bd376f; height:110px; }.saju-art i:nth-child(4) { background:#fa86ae; height:90px; }.saju-art i:nth-child(5) { background:#e9bdd4; }
.mini-deck i { width:64px; height:95px; border:2px solid #b399dc; border-radius:9px; background:#30234f; color:#e5c8ff; text-align:center; line-height:90px; font-size:40px; font-style:normal; transform:rotate(-16deg); }
.mini-deck i:nth-child(2) { transform:translateY(-9px); z-index:1; margin:0 -25px; }.mini-deck i:last-child { transform:rotate(16deg); }
.constellation { font-size:65px; color:#6477d7; gap:20px; }.constellation span { font-size:90px; color:#354694; transform:translateY(-8px); }
.reading-card h3 { font-size:28px; letter-spacing:-1px; margin:5px 0 9px; display:flex; justify-content:space-between; }
.reading-card h3 span { font-size:24px; font-weight:400; }
.reading-card p { font-size:13px; color:#57566a; line-height:1.85; margin:0 0 25px; }
.card-bottom { display:flex; justify-content:space-between; gap:8px; padding-top:15px; border-top:1px solid #00000015; font-size:10px; color:#656073; }.card-bottom b { color:#302a43; }
.landing-note { text-align:center; font-size:12px; color:var(--muted); padding:29px 0; }
.mood-footer { display:flex; align-items:center; gap:20px; border-top:1px solid var(--line); padding:25px 0; font-size:11px; color:var(--muted); }.mood-footer>span:last-child { margin-left:auto; font-size:9px; letter-spacing:1px; }.footer-wordmark { font-size:20px; font-weight:900; letter-spacing:-1px; color:#555068; }
@media(max-width:700px) { .landing-shell { padding:0 20px; }.mood-hero { grid-template-columns:1fr; padding:32px 0; gap:0; }.hero-copy h1 { font-size:48px; letter-spacing:-3px; }.orbit-art { height:290px; max-width:420px; width:100%; margin:auto; }.planet { width:185px; height:185px; }.floating-card { width:110px; height:150px; }.art-star { font-size:70px; }.reading-grid { grid-template-columns:1fr; }.card-art { height:125px; }.section-heading>span { display:none; }.site-nav-link { padding:8px 10px; font-size:13px; }.mood-brand { font-size:24px; }.mood-footer { flex-wrap:wrap; gap:12px; }.mood-footer>span:last-child { display:none; }.page-title { letter-spacing:-1px; }.page-intro { font-size:14px; } }
@media(prefers-reduced-motion:reduce) { .reading-card { transition:none; } }