/* Observatory experience: additive visual layer. No chart transforms or content changes.
   Art is supplied by the helper as --ae-exp-art-image; never interpreted as chart data. */
body.obs.ae-exp {
  --ae-exp-panel: var(--o-night-2);
  --ae-exp-edge: var(--o-line-2);
  --ae-exp-shadow: 0 24px 64px -36px rgba(0, 0, 0, .65);
  position: relative;
  isolation: isolate;
}
body.obs.ae-exp[data-ae-exp-art="horizon"] { --ae-exp-art-image: url("/static/observatory-experience/arrival-1536.webp"); }
body.obs.ae-exp[data-ae-exp-art="lunar"] { --ae-exp-art-image: url("/static/observatory-experience/lunar-1536.webp"); }
body.obs.ae-exp[data-ae-exp-art="comparison"] { --ae-exp-art-image: url("/static/observatory-experience/comparison-1536.webp"); }
body.obs.ae-exp .ae-exp-atmosphere {
  position: absolute;
  inset: 0 0 auto;
  height: min(870px, 100svh);
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  background-image: linear-gradient(180deg, rgba(6,10,18,.08), var(--o-night) 98%), var(--ae-exp-art-image, none);
  background-repeat: no-repeat;
  background-position: center, right top;
  background-size: cover, cover;
  opacity: .72;
}
body.obs.ae-exp[data-ae-exp-art="none"] .ae-exp-atmosphere { background-image: linear-gradient(150deg, var(--o-night-3), var(--o-night) 72%); }
body.obs.ae-exp[data-ae-exp-family="home"] #hero { background: transparent; }
body.obs.ae-exp[data-ae-exp-family="home"] :is(#features, #how-it-works, #explore, #cosmic-timing, #faq) {
  position: relative;
  max-width: 1200px;
  margin-inline: auto;
  padding: clamp(40px, 6vw, 80px) clamp(20px, 4vw, 48px);
  box-sizing: border-box;
}
body.obs.ae-exp[data-ae-exp-family="home"] #features {
  border-top: 1px solid var(--o-line-2);
  background: linear-gradient(180deg, var(--o-night-2), var(--o-night));
  border-radius: 22px 22px 0 0;
}
body.obs.ae-exp[data-ae-exp-family="home"] .feature-card {
  background: var(--ae-exp-panel);
  border: 1px solid var(--o-line);
  border-radius: 12px;
  box-shadow: 0 1px 0 color-mix(in srgb, var(--o-ink) 5%, transparent) inset;
  padding: clamp(22px, 2.7vw, 32px);
  min-width: 0;
  transition: border-color .18s ease, background-color .18s ease;
}
body.obs.ae-exp[data-ae-exp-family="home"] .feature-card:hover { border-color: var(--o-control); background-color: var(--o-night-3); }
body.obs.ae-exp[data-ae-exp-family="home"] .feature-card p { color: var(--o-muted); line-height: 1.7; }
body.obs.ae-exp[data-ae-exp-family="home"] .feature-card h3 { font-size: clamp(1.65rem, 2.4vw, 2rem); line-height: 1.12; }
body.obs.ae-exp[data-ae-exp-family="home"] #how-it-works { border-block: 1px solid var(--o-line); }
body.obs.ae-exp[data-ae-exp-family="home"] .how-step { text-align: start; padding: 18px 24px; border-inline-start: 1px solid var(--o-line-2); }
body.obs.ae-exp[data-ae-exp-family="home"] .how-number { font-family: var(--o-serif); color: var(--o-lamp); }
body.obs.ae-exp[data-ae-exp-family="home"] :is(#explore, #cosmic-timing) { border-bottom: 1px solid var(--o-line); }
body.obs.ae-exp[data-ae-exp-family="home"] :is(.section-heading, #faq h2) { max-width: 22ch; margin-inline: auto; text-wrap: balance; }
/* Existing tool panels retain their grid/layout and all hidden/error states. */
body.obs.ae-exp:is([data-ae-exp-family="chart"], [data-ae-exp-family="sky"], [data-ae-exp-family="compatibility"]) :is(.card-glass, .form-section, .result-card, .status-card, .answer-block, .person-block, .interpretation, .syn-score-card, [data-ae-exp-panel]) {
  border: 1px solid var(--ae-exp-edge);
  border-radius: 14px;
  background: var(--ae-exp-panel);
  box-shadow: var(--ae-exp-shadow);
}
body.obs.ae-exp:is([data-ae-exp-family="chart"], [data-ae-exp-family="compatibility"]) main.container { position: relative; }
body.obs.ae-exp[data-ae-exp-family="sky"] :is(.explainer, .about-section, .calendar-guide) { border-top: 1px solid var(--o-line-2); margin-top: 36px; padding-top: 28px; }
body.obs.ae-exp [data-ae-exp-panel] { padding: clamp(20px, 3vw, 36px); }
body.obs.ae-exp [data-ae-exp-panel] > :first-child { margin-top: 0; }
body.obs.ae-exp [data-ae-exp-panel] > :last-child { margin-bottom: 0; }
/* Paper is an intentional quiet room. Keep the existing paper ink/link palette. */
body.obs.ae-exp[data-ae-exp-family="learning"] .article-content {
  border: 1px solid var(--o-paper-rule);
  box-shadow: var(--ae-exp-shadow);
  padding: clamp(24px, 4.5vw, 64px);
  border-radius: 4px;
}
body.obs.ae-exp[data-ae-exp-family="learning"] .article-content :is(p, li) { line-height: 1.78; }
body.obs.ae-exp[data-ae-exp-family="learning"] .article-content h2 { margin-top: 2.1em; scroll-margin-top: 110px; }
body.obs.ae-exp[data-ae-exp-family="learning"] .article-content > :first-child { margin-top: 0; }
body.obs.ae-exp[data-ae-exp-family="learning"] .article-content :is(img, video) { max-width: 100%; height: auto; }
/* Explicit digital-reading hook. Pages stay flat and readable, without hardcover illusion. */
body.obs.ae-exp [data-ae-exp-book] {
  border-block: 1px solid var(--o-line-2);
  padding-block: clamp(32px, 5vw, 64px);
  margin-block: 32px;
}
body.obs.ae-exp [data-ae-exp-book] :is(figure, .ae-exp-book-page) { margin: 0; min-width: 0; }
body.obs.ae-exp [data-ae-exp-book] img { display: block; max-width: 100%; height: auto; border: 1px solid var(--o-paper-rule); box-shadow: var(--ae-exp-shadow); }
body.obs.ae-exp [data-ae-exp-book] figcaption { margin-top: 12px; color: var(--o-muted); font: .875rem/1.6 var(--o-sans); }
body.obs.ae-exp [data-ae-exp-book] .ae-exp-book-passage { background: var(--o-paper); color: var(--o-paper-ink); padding: clamp(24px, 4vw, 48px); font: 1.125rem/1.8 var(--o-sans); border-inline-start: 2px solid var(--o-paper-rule); }
body.obs.ae-exp :is([data-ae-exp-panel], [data-ae-exp-book]) :focus-visible { outline: 2px solid var(--o-ice); outline-offset: 4px; }
html[data-theme="light"] body.obs.ae-exp { --ae-exp-shadow: 0 20px 56px -36px rgba(30, 45, 64, .28); }
html[data-theme="light"] body.obs.ae-exp .ae-exp-atmosphere { opacity: .15; background-image: linear-gradient(180deg, rgba(238,242,247,.25), var(--o-night) 98%), var(--ae-exp-art-image, none); }
@media (max-width: 760px) {
  body.obs.ae-exp[data-ae-exp-art="horizon"] { --ae-exp-art-image: url("/static/observatory-experience/arrival-960.webp"); }
  body.obs.ae-exp[data-ae-exp-art="lunar"] { --ae-exp-art-image: url("/static/observatory-experience/lunar-960.webp"); }
  body.obs.ae-exp[data-ae-exp-art="comparison"] { --ae-exp-art-image: url("/static/observatory-experience/comparison-960.webp"); }
  body.obs.ae-exp .ae-exp-atmosphere { height: 660px; background-position: center, 68% top; opacity: .4; }
  body.obs.ae-exp[data-ae-exp-family="home"] .features-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  body.obs.ae-exp[data-ae-exp-family="home"] .how-step { padding-inline: 20px; }
  body.obs.ae-exp[data-ae-exp-family="learning"] .article-content { padding: 24px 20px; }
}
@media (max-width: 480px) {
  body.obs.ae-exp[data-ae-exp-family="home"] .features-grid { grid-template-columns: minmax(0, 1fr) !important; }
  body.obs.ae-exp[data-ae-exp-family="home"] #features { border-radius: 14px 14px 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  body.obs.ae-exp[data-ae-exp-family="home"] .feature-card { transition: none; }
}
@media print {
  body.obs.ae-exp .ae-exp-atmosphere { display: none; }
  body.obs.ae-exp :is([data-ae-exp-panel], [data-ae-exp-book], .article-content) { box-shadow: none; }
}
/* Existing illustrative reading text gains the approved paper/ink hierarchy;
   its wording, product identity, open state and purchase controls are unchanged. */
body.obs.ae-exp[data-ae-exp-family="reading"] #long-reading-preview,
body.obs.ae-exp [data-ae-exp-panel="reading"] {
  --gold:var(--o-paper-accent);--text:var(--o-paper-ink);--text-dim:var(--o-paper-muted);
  background:var(--o-paper);color:var(--o-paper-ink);
  border:1px solid var(--o-paper-rule)!important;border-radius:4px!important;
  padding:24px!important;box-shadow:var(--ae-exp-shadow);font-family:var(--o-sans);
}
body.obs.ae-exp[data-ae-exp-family="reading"] #long-reading-preview p {font-size:1rem!important;line-height:1.78!important;color:var(--o-paper-ink)}
body.obs.ae-exp[data-ae-exp-family="reading"] #long-reading-preview summary {color:var(--o-paper-accent)!important;min-height:44px;font-family:var(--o-sans)}
body.obs.ae-exp[data-ae-exp-family="reading"] #long-reading-preview :focus-visible {outline:2px solid var(--o-paper-accent);outline-offset:3px}
/* The released homepage's visible tool/sky/FAQ rooms; dormant marketing sections stay hidden. */
body.obs.ae-exp[data-ae-exp-family="home"] #dashboard .card {background:var(--ae-exp-panel);border:1px solid var(--ae-exp-edge);box-shadow:var(--ae-exp-shadow)}
body.obs.ae-exp[data-ae-exp-family="home"] #cosmic-timing {background:linear-gradient(180deg,var(--o-night-2),var(--o-night));border:1px solid var(--o-line-2);border-radius:14px}
body.obs.ae-exp[data-ae-exp-family="home"] #faq {border-top:1px solid var(--o-line-2)}
body.obs.ae-exp[data-ae-exp-family="home"] #star-canvas {display:none!important}
/* Existing delayed CTA entry styles must not hide useful links below the fold. */
body.obs.ae-exp[data-ae-exp-family="home"] #cosmic-timing .hero-cta {opacity:1!important;transform:none!important;animation:none!important}
@media(prefers-reduced-motion:reduce){body.obs.ae-exp :is(.reveal-on-scroll,.card-reveal){opacity:1!important;transform:none!important;animation:none!important;transition:none!important}}
