html:has(body.reading-horoscope) { background: var(--content-horoscope); }
html:has(body.reading-tarot) { background: var(--content-tarot); }
html:has(body.reading-pair) { background: var(--content-pair); }
html:has(body.reading-moon) { background: var(--content-moon); }
/* One reading composition at every viewport; no overlapping panels. */
body.reading-horoscope { --reading-surface: var(--content-horoscope); --reading-art: var(--content-art-astrology); }
body.reading-tarot { --reading-surface: var(--content-tarot); --reading-art: var(--content-art-tarot); }
body.reading-pair { --reading-surface: var(--content-pair); --reading-art: var(--content-art-relationships); }
body.reading-moon { --reading-surface: var(--content-moon); --reading-art: var(--content-art-moon); }
body.app-surface.screen-reading { background: var(--reading-surface, var(--app-canvas)); }
.screen-reading .sky-map { display: none; }
.screen-reading .app-main { max-width: none; padding: 0; }
.forecast { position: relative; isolation: isolate; min-height: 100dvh; padding-bottom: 40px; }
.forecast::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; mix-blend-mode: luminosity; background: var(--reading-art) center top / cover no-repeat; opacity: .36; mask-image: linear-gradient(#000 0%, #0009 35%, transparent 85%); }
.forecast-toolbar { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; position: sticky; top: 0; z-index: 20; min-height: 72px; padding: 12px max(24px, calc((100% - 960px) / 2)); background: color-mix(in srgb, var(--reading-surface) 68%, transparent); backdrop-filter: blur(18px) saturate(115%); -webkit-backdrop-filter: blur(18px) saturate(115%); border-bottom: 1px solid #c4d1df24; color: var(--app-muted); text-align: center; font-size: 13px; }
.forecast-back { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; }
.forecast-back:hover { background: #f4eee610; }
.forecast-back .nav-svg { width: 22px; height: 22px; }
.forecast-layout { width: min(100%, 620px); margin: 0 auto; }
.forecast-cover { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; align-items: center; padding: 36px 24px 32px; text-align: center; }
.forecast-main-art { flex-shrink: 0; margin: 0 auto 24px; width: 132px; height: 132px; object-fit: contain; }
.forecast-sign img { width: 100%; height: 100%; object-fit: contain; }
.forecast-tarot { display: block; width: 132px; height: 198px; border-radius: 6px; }
.forecast-moon { display: block; }
.forecast-headline { width: 100%; max-width: 520px; }
.forecast-label { margin: 0 0 12px; font-size: 11px; line-height: 1.5; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--app-gold); }
.forecast-headline h1 { margin: 0; font: 400 clamp(32px, 6vw, 42px)/1.14 var(--font-display); text-wrap: balance; color: var(--app-text); }
.forecast-reading { margin: 0 24px; padding: 28px 0 0; border-top: 1px solid #c4d1df24; }
.forecast-reading.reading-sections { display: grid; gap: 28px; }
.forecast-chapter { margin: 0 0 28px; }
.forecast-chapter:last-child { margin-bottom: 0; }
.forecast-chapter p, .forecast .reading-sheet-copy > p, .forecast .reading-section p { margin: 0; font-size: var(--reading-body-size); line-height: 1.75; color: var(--app-secondary); }
.forecast-chapter h2, .forecast .reading-section h2 { margin: 0 0 12px; font: 400 var(--reading-section-size)/1.25 var(--font-display); color: var(--app-text); }
.forecast .reading-sheet-copy > p + h2 { margin-top: 28px; }
.forecast-quote { margin: 0 0 28px; padding: 0 0 0 20px; border-left: 2px solid var(--app-gold); font: 400 27px/1.35 var(--font-display); color: var(--app-gold); }
.forecast .reading-source { margin-top: 24px; font-size: 13px; line-height: 1.6; color: var(--app-muted); }
.forecast .field-help { padding-top: 20px; border-top: 1px solid #c4d1df24; }
.forecast .edition-reflection { margin-top: 28px; }
.forecast-actionbar { width: min(100%, 620px); margin: 0 auto; padding: 28px 24px 0; }
.forecast-share { width: 100%; box-shadow: none; text-decoration: none; }
.forecast-share .nav-svg { width: 20px; height: 20px; }
@media (min-width: 768px) {
  .forecast { padding-bottom: 64px; }
  .forecast-cover { padding-top: 48px; padding-bottom: 36px; }
  .forecast-reading { padding-top: 32px; }
}
@media (max-width: 360px) {
  .forecast-cover { padding-inline: 18px; }
  .forecast-reading { margin-inline: 18px; }
  .forecast-actionbar { padding-inline: 18px; }
}

@media (max-width: 767px) { .forecast-toolbar { min-height: 64px; padding: 10px 18px; } }
@media (prefers-reduced-transparency: reduce) { .forecast-toolbar { background: var(--reading-surface); backdrop-filter: none; } }

.reading-horoscope .forecast-layout { width: min(100% - 36px, 720px); }
.reading-horoscope .forecast-cover { margin: 24px 0 20px; border-radius: var(--app-radius); background: var(--content-horoscope); }
.reading-horoscope .forecast-reading { margin: 0; padding: 0; border: 0; }
.reading-horoscope .forecast-headline h1 { font: 500 24px/1.35 var(--font-body); }
.reading-horoscope .forecast-label { font: 400 14px/1.5 var(--font-body); letter-spacing: 0; text-transform: none; }
.reading-horoscope .forecast-main-art { width: 192px; height: 192px; }
.reading-horoscope .forecast-actionbar { width: min(100% - 36px, 720px); padding-inline: 0; }

html:has(body.reading-horoscope), body.app-surface.reading-horoscope { background: var(--app-canvas); }
.reading-horoscope .forecast::before { content: none; }
.reading-horoscope .forecast-toolbar { background: color-mix(in srgb, var(--app-canvas) 74%, transparent); border: 0; }

.reading-horoscope .forecast-cover {
  background: var(--reading-glass-light), color-mix(in srgb, var(--content-horoscope) var(--reading-glass-tint), transparent);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  box-shadow: var(--reading-glass-edge), 0 12px 32px #020b1714;
}
@media (prefers-reduced-transparency: reduce) {
  .reading-horoscope .forecast-cover { background: var(--content-horoscope); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* Large readable artwork, with shared illustrated chapters below. */
html:has(body.reading-tarot), body.app-surface.reading-tarot { background: var(--app-canvas); }
.reading-tarot .forecast::before { opacity: .24; mask-image: linear-gradient(#000, #000b); background-attachment: fixed; }
.reading-tarot .forecast-toolbar { background: color-mix(in srgb, var(--app-canvas) 74%, transparent); border: 0; }
.reading-tarot .forecast-layout, .reading-tarot .forecast-actionbar { width: min(100% - 36px, 720px); }
.reading-tarot .forecast-actionbar { padding-inline: 0; }
.reading-tarot .forecast-cover { margin: 24px 0; border-radius: var(--app-radius); background: var(--reading-glass-light), color-mix(in srgb, var(--content-tarot) var(--reading-glass-tint), transparent); box-shadow: var(--reading-glass-edge); }
.reading-tarot .forecast-reading { border: 0; margin: 0; padding: 0; }
.reading-tarot .forecast-headline h1 { font: 500 24px/1.35 var(--font-body); }
.reading-tarot .forecast-label { font: 400 14px/1.5 var(--font-body); letter-spacing: 0; text-transform: none; }
.forecast-card-meaning { margin: 20px 0 0; font: 400 16px/1.75 var(--font-body); color: var(--app-secondary); }
.reading-tarot .forecast-tarot { width: 280px; height: 420px; max-width: 100%; object-fit: contain; }
.reading-horoscope .forecast-main-art { width: 280px; height: 280px; max-width: 100%; }
.tarot-chapters .horoscope-chapter { --glass-color: var(--content-tarot); }
.horoscope-chapter-art { max-width: 280px; }
.reading-tarot .edition-reflection { border: 0; padding: 20px 24px; border-radius: var(--app-radius); background: color-mix(in srgb, var(--app-surface) 62%, transparent); }
@media (max-width: 600px) {
  .reading-tarot .forecast-tarot { width: 220px; height: 330px; }
  .reading-horoscope .forecast-main-art { width: 240px; height: 240px; }
  .horoscope-chapter-art { width: 224px; }
}
@media (prefers-reduced-transparency: reduce) { .reading-tarot .forecast-cover { background: var(--content-tarot); } }

/* The artwork leads the cover; reflection remains available throughout reading. */
.reading-tarot .forecast { padding-bottom: calc(112px + env(safe-area-inset-bottom)); }
.reading-tarot .forecast-cover { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 32px; padding: 32px; text-align: left; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
.reading-tarot .forecast-main-art { margin: 0; filter: drop-shadow(0 16px 24px #020b1740); }
.reading-tarot .forecast-floating-actions { position: fixed; z-index: 30; bottom: calc(16px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); width: min(100% - 36px, 420px); display: flex; gap: 6px; align-items: center; padding: 6px; border-radius: 999px; background: #102b43bf; backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); box-shadow: var(--reading-glass-edge), 0 8px 32px #020b1740; }
.forecast-note { flex: 1; min-height: 48px; gap: 10px; border-radius: 999px; }
.forecast-note .nav-svg { width: 20px; height: 20px; }
.forecast-share-compact { display: flex; align-items: center; justify-content: center; width: 54px; min-height: 48px; border-radius: 999px; color: var(--app-gold); }
.forecast-share-compact:hover { background: #ffffff0d; }
.forecast-share-compact span { display: none; }
.reading-note-dialog { width: min(480px, calc(100% - 32px)); max-height: calc(100dvh - 48px); margin: auto; padding: 24px; border: 1px solid #dbc39426; border-radius: 24px; background: var(--app-surface); color: var(--app-text); box-shadow: 0 24px 80px #020b1780; }
.reading-note-dialog::backdrop { background: #020b177a; backdrop-filter: blur(8px); }
.reading-note-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.reading-note-heading h2 { margin: 0; font: 500 20px/1.4 var(--font-body); }
.reading-note-heading button { width: 44px; height: 44px; border: 0; border-radius: 50%; background: #ffffff09; color: var(--app-secondary); font-size: 28px; cursor: pointer; }
.reading-note-context { margin: 4px 0 24px; font-size: 14px; color: var(--app-muted); }
.reading-note-dialog .reading-reflection { margin: 0; padding: 0; border: 0; }
.reading-note-dialog .reflection-question, .reading-note-dialog .reading-reflection h3 { font: 500 16px/1.6 var(--font-body); color: var(--app-text); }
.reading-note-dialog .reading-reflection textarea { font: 400 16px/1.6 var(--font-body); min-height: 144px; color: var(--app-text); }
.reading-note-dialog .reflection-privacy, .reading-note-dialog .reflection-status { font: 400 14px/1.6 var(--font-body); color: var(--app-muted); }
.reading-note-dialog .reflection-answer { font: 400 16px/1.7 var(--font-body); }
.reading-note-dialog .lux-btn { width: 100%; }
@media (max-width: 600px) {
  .reading-tarot .forecast-cover { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 28px 24px; text-align: center; }
  .reading-tarot .forecast-main-art { margin: 0 auto; }
}
@media (prefers-reduced-transparency: reduce) {
  .reading-tarot .forecast-cover { background: var(--content-tarot); backdrop-filter: none; }
  .reading-tarot .forecast-floating-actions { background: var(--app-surface); backdrop-filter: none; }
}

/* Immersive tarot: one illustrated world, continuous reading, no slideshow. */
body.app-surface.immersive-reader { background: #061a27; }
.immersive-reader .forecast::before { content: none; }
.reading-environment { position: fixed; inset: 0; z-index: -1; pointer-events: none; }
.reading-environment-image { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.immersive-reader .forecast-toolbar { background: #061a2733; backdrop-filter: blur(12px); padding-inline: max(28px, calc((100vw - 1320px) / 2)); }
.immersive-reader .forecast-layout { width: min(100% - 80px, 1280px); }
.immersive-reading { position: relative; }
.reading-art-stage { position: fixed; top: 88px; right: max(5vw, calc((100vw - 1320px) / 2)); width: min(43vw, calc((100svh - 128px) * .6667)); height: calc(100svh - 128px); display: flex; align-items: center; justify-content: center; pointer-events: none; }
.reading-artwork { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 20px 36px #0008); }
.reading-scroll { width: 44%; max-width: 540px; padding-bottom: 72px; }
.immersive-reader .reading-opening { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; min-height: calc(100svh - 100px); margin: 0; padding: 40px 0 56px; border-radius: 0; background: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; text-align: left; gap: 0; overflow: visible; }
.reading-eyebrow { font: 400 14px/1.5 var(--font-body); color: var(--app-gold); margin: 0 0 24px; }
.immersive-reader .reading-opening h1 { font: 400 clamp(48px, 6.4vw, 88px)/1.08 var(--font-display); margin: 0 0 28px; color: var(--app-text); overflow-wrap: anywhere; }
.reading-introduction { font: 400 21px/1.6 var(--font-body); color: var(--app-text); margin: 0 0 40px; text-wrap: pretty; }
.reading-meaning h2, .reading-passage h2 { font: 500 22px/1.4 var(--font-body); color: var(--app-text); margin: 0 0 18px; }
.reading-meaning p, .reading-passage p { font: 400 17px/1.85 var(--font-body); color: var(--app-secondary); margin: 0; text-wrap: pretty; }
.reading-continue { display: inline-flex; align-items: center; gap: 18px; min-height: 44px; color: var(--app-gold); font: 400 14px/1.5 var(--font-body); margin-top: 32px; text-decoration: none; }
.reading-continue:hover { color: var(--app-text); }
.reading-passage { min-height: 72svh; padding: 56px 0; scroll-margin-top: 88px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.reading-passage-art { width: min(230px, 60%); height: 230px; object-fit: contain; margin-bottom: 28px; }
.immersive-reader .forecast-floating-actions { width: auto; left: auto; right: max(24px, calc((100vw - 1320px) / 2)); transform: none; background: #081c28a6; padding: 5px; gap: 8px; }
.immersive-reader .forecast-note { background: #112c3699; color: var(--app-text); border: 1px solid #dbc39480; min-width: 178px; font-size: 14px; }
.immersive-reader .forecast-note:hover { background: #25424b; }
.immersive-reader .forecast-share-compact { color: var(--app-text); }
@media (prefers-reduced-motion: no-preference) {
  .reading-artwork { animation: reading-art-arrive 1100ms cubic-bezier(.2,.65,.2,1) both; }
  .reading-environment-image { animation: reading-world-arrive 1400ms ease-out both; }
  .reading-in-view > * { animation: reading-copy-arrive 850ms cubic-bezier(.2,.65,.2,1) both; }
  .reading-in-view > :nth-child(2) { animation-delay: 90ms; }
  .reading-in-view > :nth-child(3) { animation-delay: 160ms; }
  .reading-in-view > :nth-child(4) { animation-delay: 220ms; }
  .reading-continue { transition: color 180ms; }
  @keyframes reading-art-arrive { from { opacity: 0; transform: translateY(24px) scale(.97); } to { opacity: 1; transform: none; } }
  @keyframes reading-copy-arrive { from { opacity: .15; transform: translateY(18px); } to { opacity: 1; transform: none; } }
  @keyframes reading-world-arrive { from { opacity: .2; } to { opacity: 1; } }
}
@media (max-width: 700px) {
  .immersive-reader .forecast-layout { width: calc(100% - 48px); }
  .reading-art-stage { position: relative; inset: auto; width: 100%; height: min(52svh, 440px); margin: 24px auto 30px; }
  .reading-scroll { width: 100%; max-width: none; padding-bottom: 36px; }
  .immersive-reader .reading-opening { min-height: auto; padding: 8px 0 24px; }
  .immersive-reader .reading-opening h1 { font-size: clamp(42px, 12vw, 60px); margin-bottom: 22px; }
  .reading-eyebrow { margin-bottom: 14px; }
  .reading-introduction { font-size: 19px; margin-bottom: 32px; }
  .reading-meaning p, .reading-passage p { font-size: 16px; line-height: 1.8; }
  .reading-meaning h2, .reading-passage h2 { font-size: 20px; }
  .reading-passage { min-height: auto; padding: 48px 0; }
  .reading-passage-art { width: 210px; height: 210px; align-self: center; }
  .reading-environment-image { object-position: 35% center; }
  .immersive-reader .forecast-floating-actions { right: 18px; bottom: calc(14px + env(safe-area-inset-bottom)); }
}
/* Quiet the landscape behind the reading column without dimming the artwork. */
.reading-environment::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, #061a2770, #061a2770 34%, transparent 58%); }
@media (max-width: 700px) { .reading-environment::after { background: #061a27a8; } }
.immersive-reader .forecast-toolbar { grid-template-columns: 1fr auto 1fr; }
.immersive-reader .forecast-back { width: 44px; height: 44px; padding: 0; font: 400 14px/1.5 var(--font-body); }
.immersive-reader .forecast-toolbar-spacer { justify-self: end; color: var(--app-gold); font: 400 24px/1.2 var(--font-display); }
@media (max-width: 700px) {
  .immersive-reader .forecast-toolbar time { display: none; }
  .immersive-reader .forecast-toolbar { grid-template-columns: 1fr 1fr; }
}

/* The card responds to the pointer; the reading actions belong to its text. */
.reading-art-stage { pointer-events: auto; perspective: 1500px; }
.reading-card-tilt { width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 320ms cubic-bezier(.2,.65,.2,1); }
.reading-card-tilt .reading-artwork { display: block; }
.reading-inline-actions { display: flex; align-items: center; gap: 12px; margin-top: 28px; }
.reading-inline-actions .forecast-note { flex: none; min-height: 48px; padding-inline: 22px; }
.reading-inline-actions .forecast-share-compact { width: 48px; min-height: 48px; border: 1px solid #dbc39445; background: #112c3655; }
.immersive-reader .reading-continue { margin-top: 16px; }
.reading-no-reveal > * { animation: none !important; }
.reading-note-dialog { width: min(520px, calc(100% - 32px)); padding: 28px; background: #0c2531; border-color: #dbc39436; }
.reading-note-card { display: flex; align-items: center; gap: 16px; margin: 20px 0 28px; }
.reading-note-card img { width: 48px; height: 72px; object-fit: contain; border-radius: 3px; }
.reading-note-card strong { font: 500 17px/1.5 var(--font-body); color: var(--app-text); }
.reading-note-card p { margin: 4px 0 0; font: 400 14px/1.5 var(--font-body); color: var(--app-muted); }
.reading-note-dialog .reading-reflection textarea { min-height: 170px; padding: 16px; resize: vertical; background: #061a2770; border-color: #dbc39440; border-radius: 16px; }
.reading-note-dialog .reading-reflection textarea:focus { outline: 2px solid var(--app-gold); outline-offset: 3px; }
.reading-note-dialog .reflection-question { font-weight: 400; margin-bottom: 16px; }
.reading-note-cancel { display: block; min-height: 44px; padding: 8px 24px; margin: 12px auto 0; border: 0; border-radius: 999px; background: transparent; color: var(--app-muted); cursor: pointer; font: 400 14px/1.5 var(--font-body); }
.reading-note-cancel:hover { background: #ffffff08; color: var(--app-text); }
@media (prefers-reduced-motion: reduce) { .reading-card-tilt { transition: none; transform: none !important; } }
@media (max-width: 700px) { .reading-note-dialog { padding: 22px; } }
.immersive-reader .forecast-toolbar { padding-block: 6px; }
.immersive-reader .forecast-toolbar-spacer .brand-engraving { width: 168px; height: 56px; }
@media (max-width: 700px) { .immersive-reader .forecast-toolbar-spacer .brand-engraving { width: 144px; height: 48px; } }

/* Personal postcards: the illustration and the writer's words share one spread. */
.postcard-dialog.reading-note-dialog { width: min(940px, calc(100% - 48px)); padding: 22px; background: linear-gradient(90deg, #06192566, #061925f5 44%), var(--diary-scene, url("/artwork/reading-night-v1.webp")) center/cover; border: 1px solid #cbb48540; border-radius: 24px; max-height: calc(100dvh - 32px); overflow-y: auto; }
.postcard-dialog .reading-note-heading { padding: 0 4px 18px 12px; }
.postcard-dialog .reading-note-heading h2 { font: 400 17px/1.5 var(--font-body); color: #d9cba9; }
.postcard-dialog .reading-note-heading h2:focus { outline: none; }
.postcard-dialog .reading-note-heading button:focus-visible, .diary-navigation button:focus-visible { outline: 2px solid #dbc394; outline-offset: 3px; }
.diary-page { display: grid; grid-template-columns: 35% minmax(0, 1fr); min-height: 470px; border-radius: 0; overflow: hidden; box-shadow: none; }
.diary-page[hidden] { display: none; }
.diary-art { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 32px 24px; background: transparent; text-align: center; }
.diary-art img { width: min(100%, 240px); height: 360px; object-fit: contain; filter: drop-shadow(0 10px 16px #0005); }
.diary-art p { color: #decda8; font: 400 13px/1.5 var(--font-body); margin: 24px 0 6px; }
.diary-art h3 { color: #f2eadb; font: 400 28px/1.2 var(--font-display); margin: 0; }
.postcard-diary .diary-paper { background: transparent; color: #eee7db; padding: 38px 30px; margin: 0; border-radius: 0; }
.diary-eyebrow { font: 400 12px/1.5 var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: #bbaa88; margin: 0 0 24px; }
.postcard-diary .diary-paper .reflection-question, .postcard-diary .diary-paper h3 { display: block; font: 400 27px/1.3 var(--font-display); color: #eee7db; margin: 0 0 20px; }
.postcard-diary .diary-paper textarea { display: block; width: 100%; box-sizing: border-box; min-height: 180px; border: 0; border-bottom: 1px solid #8b795b45; border-radius: 0; background: transparent; padding: 8px 0 16px; color: #eee7db; font: 400 16px/1.8 var(--font-body); resize: vertical; box-shadow: none; }
.postcard-diary .diary-paper textarea::placeholder { color: #a6aaa5; opacity: 1; }
.postcard-diary .diary-paper textarea:focus { outline: 2px solid #9c8057; outline-offset: 6px; }
.postcard-diary .diary-paper .reflection-privacy, .postcard-diary .diary-paper .reflection-status { font: 400 12px/1.6 var(--font-body); color: #aba99e; margin: 20px 0; }
.postcard-diary .diary-paper .lux-btn { background: #d9c293; color: #0b2531; min-height: 48px; border: 0; font: 500 14px/1.4 var(--font-body); }
.diary-paper .reflection-answer { font: 400 19px/1.8 var(--font-body); white-space: pre-wrap; overflow-wrap: anywhere; margin: 0 0 32px; color: #eee7db; }
.diary-paper .reading-journal-link { color: #dac393; font: 400 14px/1.5 var(--font-body); }
.diary-navigation { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 16px; }
.diary-navigation button { min-height: 44px; border: 0; background: none; color: #dbc394; font: 400 13px/1.4 var(--font-body); cursor: pointer; }
.diary-navigation button:disabled { opacity: .3; cursor: default; }
.diary-navigation span { color: #c6bfae; font: 400 12px/1.4 var(--font-body); }
@media (prefers-reduced-motion: no-preference) { .diary-page:not([hidden]) { animation: postcard-open 260ms ease-out; } @keyframes postcard-open { from { opacity: .5; transform: translateY(6px); } to { opacity: 1; transform: none; } } }
@media (max-width: 650px) {
  .postcard-dialog.reading-note-dialog { width: calc(100% - 16px); padding: 12px; border-radius: 18px; max-height: calc(100dvh - 16px); }
  .postcard-dialog .reading-note-heading { padding: 0 0 10px 8px; }
  .diary-page { grid-template-columns: 1fr; min-height: auto; }
  .diary-art { display: grid; grid-template-columns: 72px 1fr; grid-template-rows: auto auto; gap: 4px 20px; padding: 18px 24px; text-align: left; justify-items: start; }
  .diary-art img { width: 72px; height: 108px; grid-row: 1 / 3; }
  .diary-art p { align-self: end; margin: 0; }
  .diary-art h3 { align-self: start; font-size: 26px; }
  .postcard-diary .diary-paper { padding: 26px 24px; }
  .postcard-diary .diary-paper .reflection-question { font-size: 25px; }
  .postcard-diary .diary-paper textarea { min-height: 144px; }
  .diary-navigation { gap: 6px; }
  .diary-navigation button { font-size: 12px; }
}
.diary-navigation[hidden] { display: none; }
.diary-first-note, .diary-previous-preview { font: 400 13px/1.5 var(--font-body); color: #c7bcaa; margin: 16px 8px 2px; }
.diary-previous-preview:empty { display: none; }
.journal-postcard { display: grid; grid-template-columns: 180px minmax(0, 1fr); border-radius: 18px; overflow: hidden; background: #0b2531; }
.journal-postcard .diary-art img { width: 100px; height: 150px; }
.journal-postcard-copy { padding: 30px; color: #eee7db; }
.journal-postcard-copy h2 { font: 400 28px/1.3 var(--font-display); color: #eee7db; margin: 0 0 20px; }
.journal-postcard-copy .reflection-answer { font: 400 16px/1.8 var(--font-body); white-space: pre-wrap; overflow-wrap: anywhere; }
.journal-postcard-copy a { color: #dac393; }
@media (max-width: 650px) { .journal-postcard { grid-template-columns: 1fr; } .journal-postcard .diary-art { display: flex; padding: 20px; } .journal-postcard-copy { padding: 24px; } }
.diary-note [hidden] { display: none; }
.diary-note-actions { display: flex; align-items: center; gap: 24px; margin-top: 36px; }
.diary-edit { border: 0; background: none; color: #dac393; min-height: 44px; font: 400 14px/1.4 var(--font-body); cursor: pointer; padding: 8px 0; }
.diary-edit span { margin-left: 16px; }
.diary-edit:focus-visible { outline: 2px solid #dac393; outline-offset: 4px; }
.diary-edit-actions { margin-top: 24px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.postcard-diary .diary-paper .reflection-answer { color: #eee7db; font: 400 20px/1.8 var(--font-body); }
.postcard-diary .diary-paper { display: flex; flex-direction: column; justify-content: center; }
.postcard-diary .diary-paper textarea { color: #eee7db; }
@media (max-width: 650px) {
  .postcard-dialog.reading-note-dialog { background-position: 25% center; }
  .postcard-diary .diary-paper .reflection-answer { font-size: 17px; }
  .diary-art { background: #06192555; }
}

/* Fullscreen postcard gallery — selected concept, September 2026. */
.diary-fullscreen.reading-note-dialog { inset: 0; width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; border-radius: 0; overflow-x: hidden; overflow-y: auto; background: #061722; background-image: linear-gradient(#06172255, #06172277), var(--diary-scene); background-size: cover; background-position: center; box-shadow: none; }
.diary-fullscreen::backdrop { background: #061722; backdrop-filter: none; }
.diary-gallery { min-height: 100dvh; color: #f0e8d9; padding: 0 0 32px; }
.diary-gallery-header { height: 112px; padding: 20px clamp(24px, 5vw, 80px); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; }
.diary-gallery-header button { display: flex; align-items: center; gap: 12px; width: fit-content; min-height: 44px; color: #e5cf9c; background: none; border: 0; cursor: pointer; font: 400 17px/1.5 var(--font-body); }
.diary-gallery-header button:last-child { justify-self: end; }
.diary-gallery-header button svg { width: 24px; height: 24px; }
.diary-brand { width: 180px; height: 60px; object-fit: contain; }
.diary-deck { position: relative; perspective: 1600px; width: min(980px, calc(100% - 300px)); height: max(580px, min(66vh, 720px)); margin: max(30px, 4vh) auto 36px; }
.diary-leaf { position: absolute; inset: 0; display: grid; grid-template-columns: 58% 42%; align-items: center; padding: 48px; border-radius: 16px; border: 1px solid #cbb48535; background: #071b28e8; box-shadow: 0 28px 65px #0004; transform-origin: center; opacity: 0; pointer-events: none; visibility: hidden; }
.diary-leaf[data-position="active"] { opacity: 1; z-index: 3; visibility: visible; transform: translateX(0) scale(1) rotate(0); pointer-events: auto; }
.diary-leaf[data-position="previous"] { opacity: .75; z-index: 2; visibility: visible; transform: translateX(-205px) scale(.81) rotate(-5deg); }
.diary-leaf[data-position="next"] { opacity: 0; z-index: 1; transform: translateX(180px) scale(.9) rotate(5deg); }
.diary-leaf[data-position="hidden"] { transform: translateX(-270px) scale(.7) rotate(-8deg); }
.diary-leaf-copy { min-width: 0; height: 100%; display: flex; flex-direction: column; align-items: stretch; padding-right: 28px; position: relative; z-index: 1; }
.diary-leaf-meta { margin: 0 0 22px; font: 400 16px/1.5 var(--font-body); color: #d9ccb3; }
.diary-gallery .diary-title { display: block; width: 100%; padding: 0; margin: 0 0 32px; color: #f5ecdb; background: none; border: 0; border-radius: 0; box-shadow: none; font: 400 clamp(30px, 3.1vw, 46px)/1.25 var(--font-display); text-overflow: ellipsis; }
.diary-gallery .diary-title::placeholder { color: #f5ecdb; opacity: 1; }
.diary-gallery .diary-writing { display: block; width: 100%; flex: 1; min-height: 160px; resize: none; overflow-y: auto; margin: 0; padding: 0 8px 8px 0; border: 0; border-radius: 0; outline: none; box-shadow: none; background: transparent; color: #eee9e0; font: 400 clamp(18px, 1.65vw, 24px)/1.65 var(--font-body); caret-color: #d9c293; scrollbar-width: thin; scrollbar-color: #dbc39444 transparent; }
.diary-gallery .diary-writing::placeholder { color: #b8b6ad; opacity: 1; }
.diary-gallery .diary-title:focus, .diary-gallery .diary-writing:focus { outline: none; box-shadow: none; }
.diary-gallery .diary-title:focus-visible { text-decoration: underline; text-decoration-color: #d9c29355; text-underline-offset: 8px; text-decoration-thickness: 1px; }
.diary-save-state { margin-top: 24px; min-height: 24px; display: flex; align-items: center; gap: 16px; font: 400 12px/1.5 var(--font-body); color: #9c9e96; }
.diary-save-state button { border: 0; padding: 4px 0; background: none; color: #ddc490; cursor: pointer; }
.save-error .diary-save-state { color: #f1c89f; }
.diary-leaf-art { position: relative; z-index: 2; width: 100%; height: calc(100% + 35px); max-height: 620px; object-fit: contain; transform: rotate(6deg); filter: drop-shadow(0 18px 24px #0008); pointer-events: none; }
.diary-leaf-open { display: none; position: absolute; inset: 0; z-index: 5; border: 0; background: none; border-radius: inherit; cursor: pointer; }
.diary-leaf[data-position="previous"] .diary-leaf-open { display: block; pointer-events: auto; }
.diary-leaf[data-position="previous"] .diary-leaf-copy { max-width: 150px; padding: 0; }
.diary-leaf[data-position="previous"] .diary-title { font-size: 25px; }
.diary-leaf[data-position="previous"] .diary-writing { font-size: 16px; }
.diary-gallery-nav { display: flex; align-items: center; justify-content: center; gap: 32px; }
.diary-gallery-nav span { min-width: 120px; text-align: center; font: 400 22px/1.4 var(--font-display); }
.diary-gallery-nav button { width: 48px; height: 48px; border-radius: 50%; border: 1px solid #ccb17b90; background: #06192580; color: #e4c78d; font: 300 34px/1 var(--font-body); cursor: pointer; }
.diary-gallery-nav button:disabled { opacity: .25; cursor: default; }
.diary-gallery button:focus-visible { outline: 2px solid #dbc394; outline-offset: 5px; }
@media (prefers-reduced-motion: no-preference) {
  .diary-fullscreen[open] { animation: diary-enter 450ms ease-out; }
  .diary-leaf { transition: transform 650ms cubic-bezier(.22,.7,.2,1), opacity 450ms ease, visibility 650ms; }
  .diary-leaf-art { transition: transform 650ms cubic-bezier(.22,.7,.2,1); }
  .diary-leaf[data-position="active"]:hover .diary-leaf-art { transform: rotate(4deg) translateY(-5px); }
  @keyframes diary-enter { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
}
@media (max-width: 1000px) {
  .diary-deck { width: calc(100% - 130px); }
  .diary-leaf { padding: 32px; }
  .diary-leaf[data-position="previous"] { transform: translateX(-105px) scale(.85) rotate(-4deg); }
}
@media (max-width: 650px) {
  .diary-gallery-header { height: 88px; padding: 12px 20px; grid-template-columns: 1fr auto; gap: 12px; }
  .diary-brand { display: none; }
  .diary-gallery-header button { font-size: 14px; gap: 6px; }
  .diary-deck { width: calc(100% - 48px); height: max(650px, calc(100svh - 185px)); margin: 22px 24px 26px; }
  .diary-leaf { display: flex; flex-direction: column; align-items: stretch; padding: 24px; }
  .diary-leaf-copy { order: 2; flex: 1; height: auto; padding-right: 0; min-height: 300px; }
  .diary-leaf-art { order: 1; align-self: center; width: 145px; height: 215px; margin: -12px 0 24px; flex: none; }
  .diary-leaf-meta { font-size: 13px; margin-bottom: 14px; }
  .diary-gallery .diary-title { font-size: 30px; margin-bottom: 20px; }
  .diary-gallery .diary-writing { font-size: 18px; min-height: 145px; }
  .diary-leaf[data-position="previous"] { transform: translateX(-27px) scale(.95) rotate(-4deg); opacity: .5; }
  .diary-leaf[data-position="previous"] .diary-leaf-copy { max-width: none; }
  .diary-leaf[data-position="next"] { transform: translateX(70px) scale(.92) rotate(4deg); }
  .diary-gallery-nav { gap: 22px; }
}
@media (min-width: 1001px) {
  .diary-leaf[data-position="previous"] { transform: translateX(-270px) scale(.81) rotate(-4deg); }
  .diary-leaf[data-position="previous"] .diary-leaf-art { position: absolute; left: 28px; top: 30px; width: 145px; height: 220px; transform: rotate(-2deg); }
  .diary-leaf[data-position="previous"] .diary-leaf-copy { padding-top: 230px; max-width: 155px; }
  .diary-leaf[data-position="previous"] .diary-leaf-meta { font-size: 12px; margin-bottom: 12px; }
  .diary-leaf[data-position="previous"] .diary-title { margin-bottom: 14px; }
}
.diary-gallery-nav button { display: grid; place-items: center; }
.diary-gallery-nav button svg { width: 24px; height: 24px; }
.diary-all-entries { color: #dfcca8; text-decoration: none; font: 400 16px/1.5 var(--font-body); padding: 12px 16px; }
.diary-all-entries:hover { color: #fff3dc; }
.diary-save-state:has([data-save-status]:empty):has([data-retry][hidden]) { visibility: hidden; }
/* Lock the underlying reading while the diary is open; preserve its scroll position. */
html:has(.diary-fullscreen[open]), body:has(.diary-fullscreen[open]) { overflow: hidden; overscroll-behavior: none; }
.diary-fullscreen.reading-note-dialog { overscroll-behavior: contain; }
html { scrollbar-gutter: stable; }
.diary-gallery-header .diary-close { justify-self: end; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: 50%; background: #ffffff08; }
.diary-close:hover { background: #ffffff12; }
.immersive-reader .reading-opening { min-height: calc(100svh - 280px); padding-bottom: 48px; }
.reading-passage#reading-life { justify-content: flex-start; padding-top: 24px; }
@media (prefers-reduced-motion: no-preference) {
  .diary-fullscreen[open] { animation: diary-fade-in 220ms ease-out; }
  @keyframes diary-fade-in { from { opacity: 0; } to { opacity: 1; } }
}
@media (max-width: 700px) { .immersive-reader .reading-opening { min-height: auto; padding-bottom: 24px; } }

/* Horoscope shares the reading world; its engraved sign remains the visual anchor. */
.immersive-reader.reading-horoscope .reading-opening h1 { font-size: clamp(40px, 4.4vw, 64px); text-wrap: balance; }
.horoscope-sign-tilt { width: 100%; height: auto; aspect-ratio: 1; }
.horoscope-sign-tilt .zodiac-art, .horoscope-sign-tilt .hint-art-svg { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 20px 50px #0006); }
.horoscope-reading-share { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; color: var(--app-gold); font: 400 14px/1.5 var(--font-body); text-decoration: none; }
.horoscope-reading-share .nav-svg { width: 20px; height: 20px; }
.horoscope-reading-share:hover { color: var(--app-text); }
.reading-horoscope .reading-passage:first-of-type { justify-content: flex-start; padding-top: 24px; }
@media (prefers-reduced-motion: no-preference) { .horoscope-sign-tilt .zodiac-art { animation: reading-art-arrive 1100ms ease-out both; } }
@media (max-width: 700px) {
  .horoscope-art-stage { height: min(36svh, 300px); margin: 16px auto 24px; }
  .horoscope-sign-tilt { width: auto; height: 100%; }
  .immersive-reader.reading-horoscope .reading-opening h1 { font-size: clamp(36px, 10vw, 48px); }
}

.tarot-selection-page .app-main { max-width: none; padding: 0 0 48px; }
.tarot-selection-page .ritual { max-width: 700px; margin: 0 auto; padding: 40px 24px; }
.tarot-selection-page .ritual-caption { color: var(--app-secondary); }
.horoscope-reading-share { width: auto; flex: 0 0 auto; white-space: nowrap; }

/* Compact reading navigation and a closer editorial rhythm. */
.immersive-reader .forecast-toolbar {
  width: min(calc(100% - 48px), 1280px);
  margin: 16px auto 0;
  top: 12px;
  min-height: 64px;
  padding: 4px 16px;
  border: 1px solid #dbc39424;
  border-radius: 20px;
  background: #061a2780;
}
.tarot-selection-page .ritual { max-width: 1000px; padding-top: 36px; }
.tarot-selection-page .ritual-deck {
  width: min(660px, calc((100svh - 250px) * 1.25), 100%);
  max-width: none;
  height: auto;
  aspect-ratio: 1.25;
  margin: 36px auto 0;
}
.tarot-selection-page .ritual-choice { width: 48%; left: 26%; }
.tarot-selection-page .ritual-choice:first-child { --shift: -24%; }
.tarot-selection-page .ritual-choice:last-child { --shift: 24%; }
.immersive-reader.reading-horoscope .reading-opening {
  min-height: auto;
  padding: 72px 0 24px;
}
.reading-horoscope .reading-passage { min-height: auto; padding: 32px 0; }
.reading-horoscope .reading-passage-art { margin-bottom: 20px; }
.reading-horoscope .reading-introduction { font-size: 19px; margin-bottom: 12px; }
@media (max-width: 700px) {
  .immersive-reader .forecast-toolbar { width: calc(100% - 24px); margin-top: 8px; top: 8px; padding: 2px 8px; min-height: 56px; border-radius: 18px; }
  .tarot-selection-page .ritual { padding: 28px 20px; }
  .tarot-selection-page .ritual-deck { width: 100%; margin-top: 28px; }
  .immersive-reader.reading-horoscope .reading-opening { padding: 8px 0 16px; }
  .reading-horoscope .reading-passage { padding: 24px 0; }
}

/* One navigation surface for root, detail, form and reading screens. */
body.app-surface .unified-topbar {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  position: sticky; top: 12px; z-index: 40;
  width: min(calc(100% - 48px), 1280px); min-height: 64px;
  margin: 16px auto 0; padding: 4px 16px;
  border: 1px solid #dbc39424; border-radius: 20px;
  background: #061a2780; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  color: var(--app-secondary); font: 400 14px/1.4 var(--font-body);
}
.unified-nav-start { justify-self: start; }
.unified-nav-center { min-width: 0; text-align: center; }
.unified-nav-center .person-nav-name { font: inherit; overflow-wrap: anywhere; }
.unified-nav-end { display: flex; align-items: center; justify-self: end; gap: 12px; }
.unified-topbar .brand-engraving { display: block; width: 168px; height: 56px; object-fit: contain; }
.unified-topbar .app-back { width: 44px; height: 44px; padding: 0; justify-content: center; }
.reading-horoscope .reading-inline-actions { margin-top: 8px; }
.reading-inline-actions .horoscope-reading-share { padding: 12px 20px; min-height: 48px; border: 1px solid #dbc39466; border-radius: 999px; background: #112c3680; color: var(--app-gold); }
.reading-inline-actions .horoscope-reading-share:hover { background: #25424b; color: var(--app-text); }
@media (max-width: 700px) {
  body.app-surface .unified-topbar { grid-template-columns: 44px minmax(0, 1fr) auto; width: calc(100% - 24px); margin-top: 8px; top: 8px; padding: 2px 8px; min-height: 56px; border-radius: 18px; gap: 4px; }
  .unified-topbar .brand-engraving { width: 120px; height: 48px; }
  .unified-topbar .unified-nav-center time { display: block; font-size: 12px; }
  .unified-nav-end { gap: 4px; }
}

/* Tarot and horoscope use the same reading rhythm. */
.immersive-reader .reading-opening { min-height: auto; padding: 72px 0 24px; }
.immersive-reader .reading-passage { min-height: auto; padding: 32px 0; justify-content: flex-start; }
.immersive-reader .reading-passage-art { margin-bottom: 20px; }
/* Animate the deck entrance separately from each card's hover transform. */
.tarot-selection-page .ritual-choice { animation: none; }
.tarot-selection-page .ritual-choice.is-chosen { transform: translateX(var(--shift)) translateY(-14px) rotate(var(--angle)); }
@media (prefers-reduced-motion: no-preference) {
  .tarot-selection-page .ritual-deck { animation: deck-arrive 400ms ease-out; }
  @keyframes deck-arrive { from { opacity: 0; translate: 0 12px; } to { opacity: 1; translate: 0 0; } }
}
@media (prefers-reduced-motion: reduce) { .ritual-choice { animation: none; transition: none; } }
@media (max-width: 700px) {
  .immersive-reader .reading-opening { padding: 8px 0 16px; }
  .immersive-reader .reading-passage { padding: 24px 0; }
}

body.app-surface .unified-topbar-root { grid-template-columns: minmax(44px, 1fr) auto minmax(44px, 1fr); }
.unified-topbar-root .unified-nav-center .brand-wordmark { display: flex; align-items: center; justify-content: center; }
.immersive-reader.reading-pair .reading-opening h1 { font-size: clamp(40px, 4.4vw, 64px); text-wrap: balance; }
.pair-art-stage { width: min(46vw, 620px); }
.pair-reading-people { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; width: 100%; align-items: start; text-align: center; }
.pair-reading-person { min-width: 0; }
.pair-reading-person .zodiac-art, .pair-reading-person .hint-art-svg { width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; }
.pair-reading-name { font: 500 22px/1.4 var(--font-body); overflow-wrap: anywhere; margin: 12px 0 6px; color: var(--app-text); }
.pair-reading-meta { font: 400 14px/1.5 var(--font-body); color: var(--app-gold); margin: 0; }
.pair-reading-connection { grid-column: 1 / -1; width: 60%; height: 150px; object-fit: contain; justify-self: center; }
@media (max-width: 700px) {
  .pair-art-stage { width: 100%; height: auto; margin: 28px auto; }
  .pair-reading-people { gap: 16px; }
  .pair-reading-name { font-size: 18px; }
  .pair-reading-meta { font-size: 12px; }
  .pair-reading-connection { height: 90px; }
  .immersive-reader.reading-pair .reading-opening h1 { font-size: 36px; }
}
.immersive-reader.reading-moon .reading-opening h1 { font-size: clamp(40px, 4.4vw, 64px); }
.moon-reading-question { margin: 24px 0 36px; font: 400 24px/1.5 var(--font-display); color: var(--app-gold); }
.today-page .day-person .brief-relationship-art { float: right; width: 36%; max-width: 220px; height: 200px; object-fit: contain; margin: 0 0 16px 24px; }
.today-page .day-person .brief-relationship-role { font: 400 14px/1.5 var(--font-body); color: var(--app-gold); margin: 6px 0 16px; }
.today-page .day-person .daily-card-link::after { content: ''; display: block; clear: both; }
@media (max-width: 520px) {
  .today-page .day-person .brief-relationship-art { width: 120px; height: 130px; margin-left: 14px; }
  .immersive-reader.reading-moon .reading-opening h1 { font-size: 36px; }
}
.today-page .day-person h2, .today-page .day-person .day-slide-body { padding-right: 0; }

/* Engravings float above a mount that dissolves into the reading background. */
.immersive-reader .reading-passage {
  position: relative; isolation: isolate; overflow: visible;
  padding: 28px; margin: 152px 0 24px; border: 0;
  border-radius: 24px; background: linear-gradient(180deg, #102936d9 0%, #0a202b99 45%, #071c2700 100%);
  box-shadow: none;
}
.immersive-reader .reading-passage .reading-passage-art {
  position: relative; z-index: 1;
  width: min(240px, 80%); height: 220px; align-self: center; margin: -156px auto 20px;
}
.immersive-reader .reading-passage::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  border: 1px solid #dbc39499; border-radius: inherit;
  mask-image: linear-gradient(to bottom, #000 0%, #0009 18%, transparent 55%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #0009 18%, transparent 55%);
}
.immersive-reader .reading-passage h2 { margin-bottom: 14px; }
body.app-surface .unified-topbar .unified-nav-center time { font-size: 18px; font-weight: 500; color: var(--app-text); }
/* Secondary actions share the design system's filled, borderless treatment. */
body.app-surface .lux-btn-ghost,
.reading-inline-actions .horoscope-reading-share,
.reading-inline-actions .forecast-share-compact {
  border-color: transparent; background: #dbc39418; color: var(--app-gold);
}
body.app-surface .lux-btn-ghost:hover,
.reading-inline-actions .horoscope-reading-share:hover,
.reading-inline-actions .forecast-share-compact:hover { background: #dbc3942b; color: var(--app-text); }
.today-page .today-people {
  display: flex; align-items: center; gap: 24px; padding: 24px;
  background: #0b23316b; border: 0; box-shadow: none;
}
.today-people-art { width: 140px; height: 160px; object-fit: contain; flex: 0 0 140px; }
.today-people-copy { min-width: 0; }
.today-page .today-people h2 { font: 500 18px/1.4 var(--font-body); margin: 0 0 8px; }
.today-people-copy > p { font: 400 15px/1.65 var(--font-body); color: var(--app-secondary); margin: 0; }
.today-page .today-people .card-actions { gap: 16px; margin-top: 18px; flex-wrap: wrap; }
@media (max-width: 700px) {
  .immersive-reader .reading-passage { padding: 24px; margin: 144px 0 20px; }
  .immersive-reader .reading-passage .reading-passage-art { margin-top: -148px; }
  body.app-surface .unified-topbar .unified-nav-center time { font-size: 16px; }
  .today-page .today-people { gap: 16px; padding: 20px; align-items: flex-start; }
  .today-people-art { width: 80px; height: 110px; flex-basis: 80px; }
}

/* All reading actions occupy the same flow and use the same soft gold surface. */
.reading-inline-actions { flex-wrap:wrap; }
.reading-inline-actions .bookmark-control { position:static;inset:auto;order:3;margin:0;flex:0 0 auto; }
.reading-inline-actions .bookmark-control form { margin:0; }
body.app-surface .reading-inline-actions :is(.forecast-note,.forecast-share-compact,.bookmark-button,.reading-action) { display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:48px;border:0;border-radius:999px;background:#dbc39418;color:var(--app-gold);backdrop-filter:blur(16px);font:400 16px/1.4 var(--font-body);text-decoration:none;box-shadow:none; }
body.app-surface .reading-inline-actions :is(.forecast-share-compact,.bookmark-button) { width:48px;height:48px;padding:12px;min-width:48px; }
body.app-surface .reading-inline-actions :is(.forecast-note,.reading-action) { padding:12px 22px;min-width:0; }
body.app-surface .reading-inline-actions .bookmark-button.is-saved { background:#dbc39433;color:#f1d395; }
.reading-inline-actions .nav-svg { width:22px;height:22px;flex-shrink:0; }
.immersive-reader .reading-passage .reading-passage-art { z-index:2; }
body.spread-reader { isolation:isolate; }
body.spread-reader .app-main { max-width:1320px;padding:32px 48px 72px; }
.spread-reader > .sky-map { display:none; }
.spread-reader .page-heading { max-width:760px;margin:24px 0 40px; }
.spread-reader .page-heading h1 { font:400 clamp(32px,4vw,54px)/1.15 var(--font-display); }
.spread-reader .page-heading p { color:var(--app-secondary);font:400 17px/1.7 var(--font-body);margin-top:20px; }
.spread-reading-scene { display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:72px;align-items:start;min-height:calc(100svh - 120px);padding:40px 0 72px; }
.spread-reading-art { grid-column:2;grid-row:1;position:sticky;top:110px;height:min(720px,calc(100svh - 150px));perspective:1500px; }
.spread-reading-copy { grid-column:1;grid-row:1;padding:48px 0; }
.spread-reading-copy > h2 { font:400 clamp(42px,5vw,72px)/1.1 var(--font-display);margin:0 0 32px; }
.spread-reading-copy .reading-meaning { margin:28px 0; }
.spread-reading-copy h3 { font:500 20px/1.4 var(--font-body);margin:0 0 12px; }
@media(max-width:700px) {
 body.spread-reader .app-main { padding:24px; }
 .spread-reader .page-heading { margin:8px 0 24px; }
 .spread-reading-scene { grid-template-columns:minmax(0,1fr);gap:24px;padding:16px 0 48px;min-height:0; }
 .spread-reading-art { grid-column:1;grid-row:1;position:relative;top:auto;height:420px;max-height:55svh; }
 .spread-reading-copy { grid-column:1;grid-row:2;padding:0; }
 .spread-reading-copy > h2 { font-size:40px; }
}

/* Text mounts share the dissolving material without crossing the adjacent artwork. */
.reading-text-mount { position:relative;isolation:isolate;border-radius:24px;background:linear-gradient(180deg,#102936e8,#0a202b99 55%,#071c2700); }
.reading-text-mount::before { content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;border:1px solid #dbc39466;border-radius:inherit;mask-image:linear-gradient(#000,transparent 70%);-webkit-mask-image:linear-gradient(#000,transparent 70%); }
.spread-reading-copy.reading-text-mount { padding:32px;margin-top:32px; }
.spread-reading-copy.reading-text-mount > h2 { font-size:clamp(40px,4.5vw,64px); }
.spread-awaiting .spread-unopened { gap:32px;max-width:1120px;margin:0 auto;padding:28px 0 36px; }
.spread-awaiting .spread-unopened img { width:min(30%,320px);max-height:58svh; }
.spread-awaiting .spread-draw-action .reading-action { display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:999px;padding:16px 28px;min-height:52px;background:#dbc39425;color:var(--app-gold);backdrop-filter:blur(16px);font:400 16px/1.4 var(--font-body);cursor:pointer; }
.share-action { display:inline-flex;align-items:center;justify-content:center;gap:12px; }
.share-action > .nav-svg { width:22px;height:22px;flex-shrink:0; }
@media(max-width:700px) {
 .spread-reading-copy.reading-text-mount { padding:24px;margin-top:0; }
 .spread-awaiting .spread-unopened { gap:10px;padding:24px 0; }
 .spread-awaiting .spread-unopened img { width:31%; }
}
@media(max-width:700px) {
 .spread-awaiting .spread-unopened { gap:0;padding:32px 0; }
 .spread-awaiting .spread-unopened img { width:46%;margin-inline:-7%; }
 .spread-awaiting .spread-unopened img:nth-child(2) { position:relative;z-index:1; }
}
/* The unopened ritual fits the viewport; reading pages remain scrollable. */
body.spread-awaiting { height:100dvh;overflow:hidden; }
body.spread-awaiting .app-main { position:fixed;inset:100px 0 0;width:100%;max-width:none;margin:0;padding:20px 40px calc(108px + env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:center;gap:20px;min-height:0; }
.spread-awaiting .page-heading { flex:0 0 auto;text-align:center;max-width:760px;margin:0; }
.spread-awaiting .page-heading h1 { font-size:clamp(30px,4vw,48px); }
.spread-awaiting .page-heading p { margin:14px 0 0; }
.spread-awaiting .spread-unopened { flex:1;min-height:0;width:min(100%,1100px);padding:20px 30px;margin:0;align-items:center;justify-content:center;gap:26px; }
.spread-awaiting .spread-unopened img { width:auto;height:100%;max-height:560px;max-width:30%;min-width:0;object-fit:contain;margin:0; }
.spread-awaiting .spread-draw-action { position:fixed;inset:auto 24px calc(24px + env(safe-area-inset-bottom));margin:0;z-index:10; }
.spread-awaiting .spread-draw-action .reading-action { min-width:280px;min-height:56px;background:var(--app-gold,#dbc394);color:#081e2c;font-weight:500;box-shadow:0 10px 32px #0004; }
.spread-awaiting .spread-draw-action .reading-action:hover { background:#eed9ad; }
@media(max-width:700px) {
 body.spread-awaiting .app-main { inset:76px 0 0;padding:16px 20px calc(100px + env(safe-area-inset-bottom));gap:12px; }
 .spread-awaiting .page-heading p { font-size:15px;line-height:1.6;margin-top:12px; }
 .spread-awaiting .spread-unopened { padding:20px 0;gap:0; }
 .spread-awaiting .spread-unopened img { width:44%;max-width:44%;height:auto;max-height:100%;margin-inline:-6%; }
 .spread-awaiting .spread-draw-action { bottom:calc(20px + env(safe-area-inset-bottom)); }
 .spread-awaiting .spread-draw-action form,.spread-awaiting .spread-draw-action .reading-action { width:100%; }
}
@media(max-height:520px) {
 body.spread-awaiting .app-main { inset:72px 0 0;padding-top:8px;padding-bottom:76px;gap:8px; }
 .spread-awaiting .page-heading h1 { font-size:26px; }
 .spread-awaiting .page-heading p { font-size:13px;margin-top:6px; }
 .spread-awaiting .spread-unopened { padding:8px 24px; }
 .spread-awaiting .spread-draw-action { bottom:12px; }
 .spread-awaiting .spread-draw-action .reading-action { min-height:48px; }
}
html:has(body.spread-awaiting) { height:100%;overflow:hidden; }
body.spread-awaiting { position:fixed;inset:0;margin:0;width:100%; }