/* Celestial World and Moon Testimony pages */
.celestial-page .site-atmosphere,
.moon-page .site-atmosphere { background: #030507; }

.celestial-hero {
    min-height: max(900px, 100svh);
    padding: calc(var(--header-height) + 3.5rem) 0 3rem;
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid var(--line);
    background:
        radial-gradient(circle at 50% 47%, rgba(65, 100, 117, .18), transparent 28rem),
        radial-gradient(circle at 28% 18%, rgba(94, 55, 132, .08), transparent 18rem),
        #030507;
}
.celestial-stars,
.moon-hero-stars {
    position: absolute;
    inset: 0;
    opacity: .74;
    background-image:
        radial-gradient(circle at 8% 22%, rgba(255,255,255,.85) 0 1px, transparent 1.7px),
        radial-gradient(circle at 31% 13%, rgba(170,208,230,.8) 0 1px, transparent 1.6px),
        radial-gradient(circle at 78% 18%, rgba(255,255,255,.65) 0 1px, transparent 1.5px),
        radial-gradient(circle at 68% 67%, rgba(213,191,133,.75) 0 1px, transparent 1.7px),
        radial-gradient(circle at 18% 76%, rgba(183,150,232,.75) 0 1px, transparent 1.8px),
        radial-gradient(circle at 90% 82%, rgba(255,255,255,.7) 0 1px, transparent 1.5px);
    background-size: 127px 127px, 173px 173px, 211px 211px, 241px 241px, 289px 289px, 337px 337px;
    filter: drop-shadow(0 0 5px rgba(255,255,255,.35));
    pointer-events: none;
}
.celestial-stars::after,
.moon-hero-stars::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, transparent 0 36%, rgba(3,5,7,.3) 72%, #030507 100%);
}
.celestial-heading { position: relative; z-index: 4; text-align: center; }
.celestial-heading h1 { margin: .1em 0 .08em; font-size: clamp(3.4rem, 8vw, 7.8rem); }
.celestial-heading .hero-lede { margin-inline: auto; max-width: 760px; }

.celestial-stage {
    position: relative;
    z-index: 2;
    height: clamp(480px, 62vw, 760px);
    max-width: 1180px;
    margin: -1rem auto 0;
    isolation: isolate;
}
.orbit-ring {
    position: absolute;
    left: 50%;
    top: 50%;
    translate: -50% -50%;
    border: 1px solid rgba(181,154,98,.18);
    border-radius: 50%;
    pointer-events: none;
    transform: rotate(-8deg);
}
.orbit-ring-one { width: 61%; height: 37%; }
.orbit-ring-two { width: 78%; height: 48%; border-color: rgba(99,142,157,.16); }
.orbit-ring-three { width: 90%; height: 58%; border-style: dashed; opacity: .7; }
.celestial-body {
    --x: 50%;
    --y: 50%;
    --depth: .5;
    position: absolute;
    left: 0;
    top: 0;
    translate: calc(var(--x) - 50%) calc(var(--y) - 50%);
    transform: scale(calc(.78 + var(--depth) * .32));
    transform-origin: center;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    background: none;
    color: var(--ivory);
    cursor: pointer;
    filter: brightness(calc(.72 + var(--depth) * .38));
    transition: filter 280ms ease, opacity 280ms ease, transform 280ms ease;
}
.celestial-body img { width: 100%; height: 100%; object-fit: contain; border-radius: 50%; pointer-events: none; }
.celestial-body-zenita { width: clamp(190px, 26vw, 360px); height: clamp(190px, 26vw, 360px); z-index: 22 !important; filter: drop-shadow(0 0 35px rgba(91,150,171,.25)); }
.celestial-body-mephador { width: clamp(64px, 8.5vw, 118px); height: clamp(64px, 8.5vw, 118px); }
.celestial-body-mephon { width: clamp(56px, 7.5vw, 104px); height: clamp(56px, 7.5vw, 104px); }
.celestial-body-zeladon { width: clamp(76px, 10vw, 142px); height: clamp(76px, 10vw, 142px); }
.celestial-halo {
    position: absolute;
    inset: -8%;
    border: 1px solid transparent;
    border-radius: 50%;
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--body-color), transparent 100%);
    transition: border-color 240ms ease, box-shadow 240ms ease, inset 240ms ease;
}
.celestial-label {
    position: absolute;
    top: calc(100% + .55rem);
    left: 50%;
    translate: -50% 0;
    color: var(--ivory-soft);
    font-family: Cinzel, Georgia, serif;
    font-size: clamp(.58rem, .9vw, .76rem);
    letter-spacing: .14em;
    text-transform: uppercase;
    white-space: nowrap;
    text-shadow: 0 2px 8px #000;
}
.celestial-body:hover .celestial-halo,
.celestial-body:focus-visible .celestial-halo,
.celestial-body.is-selected .celestial-halo {
    inset: -14%;
    border-color: var(--body-color);
    box-shadow: 0 0 32px color-mix(in srgb, var(--body-color), transparent 45%);
}
.celestial-body:hover,
.celestial-body:focus-visible,
.celestial-body.is-selected { filter: brightness(1.14); }
.celestial-hero.has-selection .celestial-body:not(.is-selected) { opacity: .28; }

.celestial-panel {
    --panel-color: var(--gold);
    position: absolute;
    z-index: 50;
    right: max(24px, calc((100vw - var(--max)) / 2));
    bottom: 4.8rem;
    width: min(410px, calc(100% - 48px));
    padding: 2rem;
    border: 1px solid color-mix(in srgb, var(--panel-color), transparent 48%);
    background: rgba(5,8,10,.93);
    box-shadow: 0 30px 80px rgba(0,0,0,.55);
    backdrop-filter: blur(18px);
    opacity: 0;
    translate: 0 1rem;
    pointer-events: none;
    transition: opacity 260ms ease, translate 260ms ease;
}
.celestial-panel.is-open { opacity: 1; translate: 0; pointer-events: auto; }
.celestial-panel h2 { margin: .45rem 0 .8rem; font-size: 3rem; }
.celestial-panel > p:not(.eyebrow) { color: var(--muted); }
.celestial-panel-close { position: absolute; right: 1rem; top: .8rem; width: 36px; height: 36px; border: 0; background: none; color: var(--muted); font-size: 1.6rem; cursor: pointer; }
.celestial-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 1.5rem 0; }
.celestial-facts div { padding-top: .8rem; border-top: 1px solid var(--line); }
.celestial-facts dt { color: var(--gold-bright); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; }
.celestial-facts dd { margin: .35rem 0 0; color: var(--ivory-soft); font-size: .78rem; line-height: 1.5; }
.celestial-controls { position: absolute; z-index: 55; left: 50%; bottom: 2.2rem; translate: -50% 0; display: flex; gap: .55rem; }
.celestial-controls button { min-height: 42px; padding: .65rem 1rem; border: 1px solid var(--line); background: rgba(5,8,10,.8); color: var(--ivory-soft); font: 600 .64rem/1 Inter, sans-serif; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.celestial-controls button:hover { border-color: var(--gold); color: var(--ivory); }
.celestial-instruction { position: absolute; z-index: 5; left: 50%; bottom: .25rem; translate: -50% 0; width: 100%; text-align: center; color: #778185; font-size: .66rem; letter-spacing: .1em; }

.astronomical-section { padding: clamp(5rem, 9vw, 9rem) 0; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, #070b0f, #080b0e); }
.astronomical-section[hidden] { display: none; }
.astronomical-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.scale-figure { margin: 0; padding: 1rem; border: 1px solid var(--line); background: #030507; }
.scale-figure img { width: 100%; }
.scale-figure figcaption { padding: .9rem .5rem 0; color: var(--muted); font-size: .7rem; }
.scale-table { width: 100%; border-collapse: collapse; }
.scale-table th, .scale-table td { padding: 1rem .75rem; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.scale-table thead th { color: var(--gold-bright); font: 500 .62rem/1.4 Cinzel, serif; letter-spacing: .12em; text-transform: uppercase; }
.scale-table tbody th { color: var(--ivory); font-family: "Cormorant Garamond", serif; font-size: 1.35rem; font-weight: 500; }
.scale-table td { color: var(--muted); font-size: .82rem; }
.scale-note { margin-top: 1.4rem; color: var(--muted); font-size: .78rem; }
.scale-note code, .moon-narrator code, .atlas-editing-guide code, .map-edit-note code { color: var(--gold-bright); }

.moon-thresholds { background: radial-gradient(circle at 50% 0%, rgba(58,92,105,.13), transparent 34rem); }
.moon-card-grid { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); }
.moon-card { min-height: 480px; display: flex; flex-direction: column; padding: 2.6rem; position: relative; overflow: hidden; background: rgba(10,14,17,.72); }
.moon-card + .moon-card { border-left: 1px solid var(--line); }
.moon-card::before { content: ""; position: absolute; inset: 0; opacity: .16; background: radial-gradient(circle at 50% 18%, var(--moon-color), transparent 38%); }
.moon-card > * { position: relative; z-index: 1; }
.moon-card-image { width: 150px; aspect-ratio: 1; margin: 0 auto 2rem; filter: drop-shadow(0 0 25px color-mix(in srgb, var(--moon-color), transparent 58%)); }
.moon-card-image img { width: 100%; height: 100%; object-fit: contain; }
.moon-card h3 { margin: .45rem 0 .8rem; }
.moon-card p:not(.eyebrow) { color: var(--muted); }
.moon-card .text-link { margin-top: auto; padding-top: 1.5rem; }
.world-to-atlas { padding: clamp(7rem, 13vw, 13rem) 0; border-top: 1px solid var(--line); background: radial-gradient(circle at 50% 45%, rgba(38,80,96,.2), transparent 35rem); }
.world-to-atlas h2 { margin-bottom: 1rem; }
.world-to-atlas p:not(.eyebrow) { margin-inline: auto; color: var(--muted); }

/* Moon pages */
.moon-hero { min-height: 96svh; display: grid; align-items: center; padding: calc(var(--header-height) + 5rem) 0 6rem; position: relative; overflow: hidden; border-bottom: 1px solid var(--line); background: radial-gradient(circle at 72% 45%, color-mix(in srgb, var(--moon-color), transparent 78%), transparent 31rem), #030507; }
.moon-hero-grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(3rem, 8vw, 8rem); align-items: center; }
.moon-hero h1 { margin: .12em 0 .04em; font-size: clamp(5rem, 11vw, 10rem); }
.moon-story-title { color: var(--moon-color); font-family: "Cormorant Garamond", serif; font-size: clamp(1.4rem, 2.8vw, 2.3rem); font-style: italic; }
.moon-portrait { margin: 0; display: grid; justify-items: center; position: relative; }
.moon-portrait img { width: min(88%, 470px); filter: drop-shadow(0 0 55px color-mix(in srgb, var(--moon-color), transparent 55%)); }
.moon-portrait figcaption { margin-top: 1.2rem; color: var(--muted); font-size: .7rem; letter-spacing: .08em; text-align: center; }
.moon-orbit-line { position: absolute; inset: 7%; border: 1px solid color-mix(in srgb, var(--moon-color), transparent 60%); border-radius: 50%; }
.moon-reading-grid { display: grid; grid-template-columns: .65fr 1.35fr; gap: clamp(3rem, 8vw, 8rem); align-items: start; }
.moon-narrator { position: sticky; top: calc(var(--header-height) + 2rem); padding: 2rem; border: 1px solid var(--line); background: rgba(12,17,20,.7); }
.moon-narrator h2 { font-size: 2.5rem; }
.moon-narrator p:not(.eyebrow) { color: var(--muted); font-size: .84rem; }
.moon-prose { max-width: 760px; }
.moon-prose h2 { margin-bottom: 1rem; }
.moon-prose > p:not(.eyebrow) { color: var(--ivory-soft); font-family: "Cormorant Garamond", serif; font-size: clamp(1.28rem, 2vw, 1.55rem); line-height: 1.72; }
.moon-prose .moon-intro { color: var(--moon-color); font-style: italic; font-size: clamp(1.45rem, 2.4vw, 1.85rem); }
.editable-marker { margin-top: 3rem; padding: 1.5rem; border: 1px dashed color-mix(in srgb, var(--moon-color), transparent 40%); }
.editable-marker span { color: var(--moon-color); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; }
.editable-marker p { color: var(--muted); margin: .5rem 0 0; font-size: .82rem; }
.moon-belief-section { border-block: 1px solid var(--line); background: rgba(12,17,20,.65); }
.belief-grid { display: grid; grid-template-columns: 1fr 1fr; }
.belief-panel { min-height: 420px; padding: clamp(2.5rem, 6vw, 5rem); }
.belief-panel + .belief-panel { border-left: 1px solid var(--line); }
.belief-panel h2 { font-size: clamp(2.4rem, 4vw, 4rem); }
.belief-panel ul { margin: 2rem 0 0; padding: 0; list-style: none; }
.belief-panel li { padding: .75rem 0; border-bottom: 1px solid var(--line); color: var(--ivory-soft); }
.belief-panel.opposition { background: linear-gradient(135deg, rgba(87,47,38,.15), transparent); }
.belief-panel.opposition p:not(.eyebrow) { color: var(--muted); font-family: "Cormorant Garamond", serif; font-size: 1.35rem; }
.moon-navigation { padding: 6rem 0; }
.moon-nav-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 2rem; }
.moon-nav-card { min-height: 150px; display: flex; align-items: center; gap: 1.3rem; padding: 1.4rem; border: 1px solid var(--line); background: rgba(11,15,18,.7); transition: border-color 220ms ease, background 220ms ease; }
.moon-nav-card:hover { border-color: var(--moon-color, var(--gold)); background: rgba(20,27,31,.8); }
.moon-nav-card img { width: 86px; aspect-ratio: 1; object-fit: contain; }
.moon-nav-card small { display: block; color: var(--moon-color, var(--gold-bright)); font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; }
.moon-nav-card strong { display: block; color: var(--ivory); font-family: "Cormorant Garamond", serif; font-size: 1.5rem; font-weight: 500; }
.atlas-nav-card { justify-content: center; text-align: center; }

@media (max-width: 900px) {
    .celestial-hero { min-height: 900px; }
    .celestial-stage { height: 590px; }
    .celestial-panel { left: 50%; right: auto; bottom: 5.4rem; translate: -50% 1rem; }
    .celestial-panel.is-open { translate: -50% 0; }
    .astronomical-grid, .moon-hero-grid, .moon-reading-grid { grid-template-columns: 1fr; }
    .moon-card-grid, .moon-nav-grid { grid-template-columns: 1fr; }
    .moon-card + .moon-card { border-left: 0; border-top: 1px solid var(--line); }
    .moon-narrator { position: static; }
    .belief-grid { grid-template-columns: 1fr; }
    .belief-panel + .belief-panel { border-left: 0; border-top: 1px solid var(--line); }
}

@media (max-width: 620px) {
    .celestial-hero { min-height: 820px; padding-top: calc(var(--header-height) + 2rem); }
    .celestial-heading h1 { font-size: 3.5rem; }
    .celestial-stage { height: 490px; margin-top: 0; }
    .orbit-ring-one { width: 72%; height: 34%; }
    .orbit-ring-two { width: 92%; height: 48%; }
    .orbit-ring-three { width: 108%; height: 61%; }
    .celestial-body-zenita { width: 170px; height: 170px; }
    .celestial-body-mephador { width: 68px; height: 68px; }
    .celestial-body-mephon { width: 58px; height: 58px; }
    .celestial-body-zeladon { width: 80px; height: 80px; }
    .celestial-label { font-size: .52rem; }
    .celestial-panel { width: calc(100% - 28px); padding: 1.35rem; bottom: 5.8rem; }
    .celestial-panel h2 { font-size: 2.25rem; }
    .celestial-facts { grid-template-columns: 1fr; }
    .celestial-controls { bottom: 2.5rem; width: calc(100% - 28px); justify-content: center; }
    .celestial-controls button { flex: 1; padding-inline: .5rem; }
    .celestial-instruction { display: none; }
    .scale-table-wrap { overflow-x: auto; }
    .scale-table { min-width: 620px; }
    .moon-hero { min-height: auto; }
    .moon-portrait { order: -1; }
    .moon-portrait img { width: 230px; }
}

@media (prefers-reduced-motion: reduce) {
    .celestial-body { transition: none; }
}