/* The public Moon page: today's Moon over a large dimmed Moon, the lunar cycle's Moon with its line
   of time (lunar-cycle.css), the walk in scenes with a Moon of their own, the calendar and the
   questions. The Moons are drawn by one canvas fixed behind the page into their places
   (.moon-slot). Content is as wide as the header's; everything moving after the first draw moves by
   transform and opacity alone. */

.moon-page {
    --moon-gutter: var(--home-space-12);
    --moon-copper: #d4724c;
    --moon-ink: rgba(5, 6, 10, 0.84);
}
.moon-container { width: 100%; max-width: 87.5rem; margin-inline: auto; padding-inline: var(--moon-gutter); }
.moon-page > :not(.moon-views, .lunar-page__sky) { position: relative; z-index: 1; }

/* ── The Moons ────────────────────────────────────────────────────────────── */
.moon-views { position: fixed; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; }
.moon-slot { position: relative; aspect-ratio: 1; }
.moon-slot__fallback { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity 0.8s ease; }
.moon-page.is-3d .moon-slot__fallback { opacity: 0; }
.moon-slot__overlay { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.moon-span line { stroke: var(--home-amber); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.moon-span__line { stroke-dasharray: 1; stroke-dashoffset: 1; }
.moon-span__label, .moon-zodiac__sign {
    font: 400 15px var(--home-font);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    paint-order: stroke;
    stroke: rgba(5, 6, 10, 0.85);
    stroke-width: 5px;
    stroke-linejoin: round;
}
.moon-span__label { fill: var(--home-amber); font-size: 17px; }
.moon-zodiac__orbit { fill: none; stroke: color-mix(in srgb, var(--home-silver) 24%, transparent); stroke-width: 1; vector-effect: non-scaling-stroke; }
.moon-zodiac__ticks {
    fill: none;
    stroke: color-mix(in srgb, var(--home-silver) 55%, transparent);
    stroke-width: 16;
    /* Twelve marks round a circle of radius 360: one every 188.5 units. */
    stroke-dasharray: 1.4 187.1;
    transform: rotate(-90deg);
}
.moon-zodiac__sign { fill: var(--home-text-muted); font-size: 19px; transition: fill 0.4s ease; }
.moon-zodiac__sign.is-current { fill: var(--home-amber); }
.moon-zodiac__marker line { stroke: var(--home-amber); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.moon-zodiac__marker circle { fill: var(--home-amber); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--home-amber) 70%, transparent)); }

/* ── The first screen ─────────────────────────────────────────────────────── */
.moon-intro { display: flex; flex-direction: column; align-items: center; padding-block: clamp(5.5rem, 11svh, 7.5rem) var(--home-space-16); }
.moon-intro__orb { position: relative; display: grid; place-items: center; width: min(94vw, calc(100svh - 8.5rem), 52rem); aspect-ratio: 1; }
.moon-intro__slot { position: absolute; inset: 0; }
.moon-intro__head {
    position: relative;
    display: grid;
    justify-items: center;
    gap: var(--home-space-3);
    max-width: 72%;
    text-align: center;
    text-shadow: 0 0 1.4rem rgba(5, 6, 10, 0.95), 0 1px 3px rgba(5, 6, 10, 0.9);
}
.moon-intro__date { margin: 0; color: var(--home-text-soft); }
.moon-intro__title { margin: 0; font: 400 clamp(2.6rem, 6.2vw, 5.4rem)/0.92 var(--home-font); letter-spacing: -0.035em; text-wrap: balance; }
.moon-intro__title em { display: block; color: var(--home-silver-strong); font-style: italic; }
.moon-intro__phase { margin: var(--home-space-3) 0 0; color: var(--home-amber); font: italic 400 clamp(1.25rem, 2vw, 1.75rem)/1.15 var(--home-font); }
.moon-intro__facts {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0 var(--home-space-3);
    margin: 0;
    color: var(--home-text-soft);
    font-size: var(--home-type-caption);
    font-variant-numeric: lining-nums;
    letter-spacing: var(--home-track-label);
    text-transform: uppercase;
}
.moon-intro__facts span + span::before { margin-inline-end: var(--home-space-3); content: "·"; }
.moon-intro__body { display: grid; justify-items: center; gap: var(--home-space-6); margin-top: var(--home-space-8); text-align: center; }
.moon-intro__lead { max-width: 38rem; margin: 0; color: var(--home-text-soft); font: italic 400 clamp(1.125rem, 1.4vw, 1.3rem)/1.5 var(--home-font); text-wrap: pretty; }
.moon-intro__next { display: grid; grid-template-columns: repeat(2, minmax(0, 13rem)); gap: var(--home-space-6); margin: 0; padding: 0; list-style: none; }
.moon-intro__next li { display: grid; gap: var(--home-space-2); padding-top: var(--home-space-4); border-top: 1px solid var(--color-line); }
.moon-intro__next span { color: var(--home-text-muted); font-size: var(--home-type-caption); letter-spacing: var(--home-track-label); text-transform: uppercase; }
.moon-intro__next time { color: var(--home-text); font-size: 1.125rem; font-variant-numeric: lining-nums; }
.moon-intro__zone { margin: 0; color: var(--home-text-faint); font-size: var(--home-type-caption); }
.moon-intro__down { display: grid; justify-items: center; gap: var(--home-space-3); margin-top: var(--home-space-4); color: var(--home-text-muted); font-size: var(--home-type-label); text-decoration: none; }
.moon-intro__down:is(:hover, :focus-visible) { color: var(--home-text); }
.moon-intro__down i { position: relative; display: block; width: 1px; height: 3.5rem; overflow: hidden; background: color-mix(in srgb, var(--home-silver) 18%, transparent); }
.moon-intro__down i::after { position: absolute; inset: 0; background: linear-gradient(transparent, var(--home-amber), transparent); content: ""; animation: moon-fall 2.6s cubic-bezier(0.6, 0, 0.4, 1) infinite; }
@keyframes moon-fall {
    from { transform: translateY(-100%); }
    to { transform: translateY(100%); }
}

/* ── The lunar cycle's Moon and the quiet pointer at its calendar ─────────── */
.moon-page .lunar-hero__inner { max-width: 87.5rem; padding-inline: var(--moon-gutter); }
.moon-hint {
    position: absolute;
    z-index: 3;
    top: calc(100% + 0.7rem);
    left: 50%;
    display: grid;
    justify-items: center;
    gap: var(--home-space-1);
    color: var(--home-amber);
    font-size: var(--home-type-micro);
    letter-spacing: var(--home-track-label);
    text-transform: uppercase;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    translate: -50% 0;
    transition: opacity 0.6s ease;
}
.moon-hint[hidden] { display: none; }
.moon-hint.is-shown { opacity: 1; }
/* The arrow over the word, pointing up at the button. */
.moon-hint i { position: relative; width: 1px; height: 0.9rem; background: linear-gradient(var(--home-amber), color-mix(in srgb, var(--home-amber) 0%, transparent)); }
.moon-hint i::after { position: absolute; top: 0; left: -2px; width: 5px; height: 5px; border-top: 1px solid var(--home-amber); border-left: 1px solid var(--home-amber); content: ""; transform: rotate(45deg); }
.moon-page .lunar-hero__link { position: relative; }
.moon-page .lunar-hero__link.is-hinted { color: var(--home-amber); }
.moon-page .lunar-hero__link.is-hinted::before {
    position: absolute;
    inset: -0.45rem -0.7rem;
    border: 1px solid color-mix(in srgb, var(--home-amber) 55%, transparent);
    border-radius: 999px;
    content: "";
    animation: moon-breathe 2.6s ease-in-out infinite;
    pointer-events: none;
}
@keyframes moon-breathe {
    0%, 100% { opacity: 0.35; transform: scale(0.96); }
    50% { opacity: 1; transform: scale(1.04); }
}

/* ── The walk: a scene each ───────────────────────────────────────────────── */
.moon-scene { position: relative; }
.moon-scene__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: var(--home-space-12); padding-block: var(--home-space-24); }
.moon-scene--eclipse .moon-scene__text { order: 2; }
.moon-scene__text { max-width: 33rem; }
.moon-scene__visual { display: grid; place-items: center; }
.moon-scene__slot { width: min(100%, 80svh, 44rem); }
.moon-scene--zodiac .moon-scene__slot { width: min(100%, 86svh, 46rem); }
.moon-scene__label {
    display: flex;
    align-items: center;
    gap: var(--home-space-3);
    margin: 0 0 var(--home-space-5);
    color: var(--home-text-muted);
    font-size: var(--home-type-caption);
    letter-spacing: var(--home-track-label);
    text-transform: uppercase;
}
.moon-scene__label::before { width: 2.5rem; height: 1px; background: color-mix(in srgb, var(--home-amber) 55%, transparent); content: ""; }
.moon-scene__title { margin: 0 0 var(--home-space-6); font: 400 var(--home-type-section)/var(--home-line-section) var(--home-font); letter-spacing: -0.03em; }
.moon-scene__title em { display: block; color: var(--home-silver-strong); font-style: italic; }
.moon-scene__lead { margin: 0 0 var(--home-space-8); color: var(--home-text-soft); font-size: 1.0625rem; line-height: 1.65; }
.moon-step p { margin: 0 0 var(--home-space-4); color: var(--home-text-soft); font-size: 1.0625rem; line-height: 1.65; }
.moon-step__count { display: flex; flex-wrap: wrap; gap: 0 var(--home-space-3); margin-bottom: var(--home-space-3) !important; color: var(--home-text-muted) !important; font-size: var(--home-type-caption) !important; font-variant-numeric: lining-nums; letter-spacing: var(--home-track-label); text-transform: uppercase; }
.moon-step__count b { color: var(--home-amber); font-weight: 400; white-space: nowrap; }
.moon-step__name { margin: 0 0 var(--home-space-4); font: 400 clamp(2.4rem, 4.2vw, 4rem)/0.98 var(--home-font); letter-spacing: -0.035em; text-wrap: balance; }
.moon-step__aside { color: var(--home-text-muted) !important; font-size: 0.95rem !important; font-style: italic; }
.moon-step__now b { color: var(--home-amber); font-weight: 400; }
.moon-scene__progress { position: relative; height: 1px; margin-top: var(--home-space-8); overflow: hidden; background: var(--color-line); }
.moon-scene__progress span { position: absolute; inset: 0; background: var(--home-amber); transform: scaleX(0); transform-origin: left; }

.moon-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--home-space-6) var(--home-space-8); margin: var(--home-space-8) 0 0; }
.moon-stats div { padding-top: var(--home-space-3); border-top: 1px solid var(--color-line); }
.moon-stats dt { color: var(--home-text-muted); font-size: var(--home-type-caption); letter-spacing: var(--home-track-label); text-transform: uppercase; }
.moon-stats dd { margin: var(--home-space-2) 0 0; color: var(--home-text); font: 400 clamp(1.9rem, 3vw, 2.7rem)/1 var(--home-font); font-variant-numeric: lining-nums tabular-nums; letter-spacing: -0.02em; }
.moon-stats dd small { color: var(--home-text-muted); font-size: 0.42em; letter-spacing: 0.04em; }
.moon-stats dd sup { font-size: 0.5em; }
.moon-stats dd time { display: block; margin-top: var(--home-space-2); color: var(--home-amber); font-size: 0.95rem; letter-spacing: 0; }

/* A wide scene's heading on the left and its few lines on the right, over what it shows. */
.moon-scene__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; gap: var(--home-space-6) var(--home-space-12); margin-bottom: var(--home-space-10); }
.moon-scene__head .moon-scene__title { margin: 0; }
.moon-scene__head > p { max-width: 34rem; margin: 0; color: var(--home-text-soft); font-size: 1.0625rem; line-height: 1.65; text-wrap: pretty; }

/* The atlases: one large Moon with the names of its seas written on it and notes on both sides,
   each with a line in to its place. Without the drawn Moon there are no names and no lines. */
.moon-map { padding-block: var(--home-space-24) var(--home-space-16); }
.moon-map__stage { display: grid; grid-template-columns: minmax(0, 1fr) min(52%, 78svh, 44rem) minmax(0, 1fr); gap: var(--home-space-6); }
.moon-map__visual { display: grid; place-items: center; order: 1; }
.moon-map__notes--right { order: 2; }
.moon-map__slot { width: 100%; container-type: inline-size; }
.moon-map__notes { display: flex; flex-direction: column; justify-content: space-around; gap: var(--home-space-6); margin: 0; padding: 12% 0; list-style: none; }
.moon-map__notes--left { align-items: flex-end; text-align: right; }
.moon-map__notes--right { align-items: flex-start; }
.moon-note { display: grid; gap: var(--home-space-1); max-width: 15.5rem; }
.moon-note__name { color: var(--home-text); font: 400 clamp(1.2rem, 1.5vw, 1.45rem)/1.15 var(--home-font); letter-spacing: -0.01em; }
.moon-note__text { color: var(--home-text-muted); font-size: 0.875rem; line-height: 1.45; text-wrap: balance; }
.moon-note__number { display: none; }
.moon-map__names { position: absolute; inset: 0; pointer-events: none; }
.moon-map__name {
    position: absolute;
    top: 0;
    left: 0;
    color: #fbf8f2;
    font: 700 clamp(9px, 1.95cqi, 13px)/1.2 var(--home-font);
    letter-spacing: 0.12em;
    text-align: center;
    /* A close dark edge and a wider soft halo keep the letters clear where the Moon is bright. */
    text-shadow: 0 0 1px rgba(5, 6, 10, 0.95), 0 0 3px rgba(5, 6, 10, 0.9), 0 0 7px rgba(5, 6, 10, 0.8), 0 0 14px rgba(5, 6, 10, 0.55);
    text-transform: uppercase;
    white-space: pre;
    opacity: 0;
}
.moon-map__name::before { position: absolute; z-index: -1; inset: -0.6em -0.9em; border-radius: 50%; background: radial-gradient(closest-side, rgba(5, 6, 10, 0.42), transparent); content: ""; }
.moon-map__lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.moon-page:not(.is-3d) :is(.moon-map__names, .moon-map__lines) { display: none; }
.moon-map__line { fill: none; stroke: color-mix(in srgb, var(--home-amber) 72%, transparent); stroke-width: 1; stroke-dasharray: 1; stroke-dashoffset: 1; stroke-linejoin: round; }
.moon-map__pin { opacity: 0; transition: opacity 0.35s ease; }
.moon-map__pin.is-on { opacity: 1; }
.moon-map__ring { fill: none; stroke: var(--home-amber); stroke-width: 1; }
.moon-map__dot { fill: var(--home-amber); filter: drop-shadow(0 0 5px color-mix(in srgb, var(--home-amber) 80%, transparent)); }
.moon-map__badge, .moon-map__number { display: none; }
/* Set by the script at the height of their places. */
.moon-map__stage.is-placed .moon-map__notes { position: relative; display: block; padding: 0; }
.moon-map__stage.is-placed .moon-note { position: absolute; width: max-content; max-width: min(15.5rem, 100%); }
.moon-map__stage.is-placed .moon-map__notes--left .moon-note { right: 0; }
.moon-map__stage.is-placed .moon-map__notes--right .moon-note { left: 0; }
.moon-map__badge { fill: var(--home-amber); }
.moon-map__number { fill: #10141c; font: 600 11px var(--home-font); }

/* Apogee and perigee: two Moons side by side in the true ratio of their distances. */
.moon-pair { padding-block: var(--home-space-24) var(--home-space-16); }
.moon-pair__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--home-space-8); max-width: 66rem; margin-inline: auto; }
.moon-pair__item { display: grid; justify-items: center; align-content: start; gap: var(--home-space-5); margin: 0; text-align: center; }
.moon-pair__slot { width: min(100%, 62svh, 31rem); }
.moon-pair__item figcaption { display: grid; justify-items: center; gap: var(--home-space-2); }
.moon-pair__label { color: var(--home-text-muted); font-size: var(--home-type-caption); letter-spacing: var(--home-track-label); text-transform: uppercase; }
.moon-pair__km { color: var(--home-text); font: 400 clamp(1.7rem, 3vw, 2.6rem)/1 var(--home-font); font-variant-numeric: lining-nums tabular-nums; letter-spacing: -0.02em; }
.moon-pair__km small { color: var(--home-text-muted); font-size: 0.45em; letter-spacing: 0.04em; }
.moon-pair__date { color: var(--home-amber); font-size: 0.95rem; }
.moon-pair__super { max-width: 40rem; margin: var(--home-space-12) auto 0; color: var(--home-text-soft); font-size: 1.0625rem; line-height: 1.6; text-align: center; }
.moon-pair__super time, .moon-pair__super span { color: var(--home-text); white-space: nowrap; }
.moon-pair__ring circle { fill: none; stroke: var(--home-amber); stroke-width: 1.5; stroke-dasharray: 5 6; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 2px rgba(5, 6, 10, 0.9)); opacity: 0; }
.moon-pair__note { color: var(--home-text-faint); font-size: var(--home-type-caption); }
.moon-pair__note::before { display: inline-block; width: 1.4rem; margin-inline-end: var(--home-space-2); border-top: 1.5px dashed var(--home-amber); vertical-align: middle; content: ""; }
.moon-page:not(.is-3d) :is(.moon-pair__ring, .moon-pair__note) { display: none; }

/* The phases hold a wide screen while they change in one place, the way the home page's depth slides its cards. */
.moon-scene.is-held .moon-scene__inner { height: 100svh; padding-block: var(--home-space-16) var(--home-space-8); }
.moon-scene.is-held .moon-scene__steps { display: grid; }
.moon-scene.is-held .moon-step { grid-area: 1 / 1; transition: opacity 0.55s ease, translate 0.55s cubic-bezier(0.2, 0.7, 0.2, 1); }
.moon-scene.is-held .moon-step.is-past { opacity: 0; translate: -2.5rem 0; pointer-events: none; }
.moon-scene.is-held .moon-step.is-next { opacity: 0; translate: 2.5rem 0; pointer-events: none; }

/* ── The calendar ─────────────────────────────────────────────────────────── */
.moon-calendar { padding-block: var(--home-space-24) var(--home-space-16); }
.moon-calendar__head { display: grid; gap: var(--home-space-4); max-width: 44rem; margin-bottom: var(--home-space-12); }
.moon-calendar__head h2, .moon-calendar__subtitle { margin: 0; font-family: var(--home-font); font-weight: 400; letter-spacing: -0.03em; }
.moon-calendar__head h2 { font-size: var(--home-type-section); line-height: var(--home-line-section); }
.moon-calendar__subtitle { margin-bottom: var(--home-space-8); font-size: clamp(1.9rem, 2.6vw, 2.6rem); line-height: 1; }
.moon-calendar :is(h2, .moon-calendar__subtitle) em { color: var(--home-silver-strong); }
.moon-calendar__head p:not(.home-overline) { margin: 0; color: var(--home-text-soft); line-height: 1.65; }
.moon-month { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--home-space-6); margin: 0 0 var(--home-space-24); padding: 0; list-style: none; }
/* The four phases sit on one line, the way the month runs. */
.moon-month::before { position: absolute; left: 12.5%; right: 12.5%; top: 2.75rem; height: 1px; background: linear-gradient(90deg, transparent, var(--color-line) 12%, var(--color-line) 88%, transparent); content: ""; }
.moon-month__item { position: relative; display: grid; justify-items: center; gap: var(--home-space-2); text-align: center; }
.moon-month__item.is-past { opacity: 0.5; }
.moon-month__moon { width: 5.5rem; height: 5.5rem; margin-bottom: var(--home-space-3); border-radius: 50%; background: var(--home-canvas-deep); box-shadow: 0 0 0 1px rgba(197, 207, 219, 0.2), 0 0 2.5rem rgba(197, 207, 219, 0.07); }
.moon-month__item b { color: var(--home-text-muted); font-size: var(--home-type-caption); font-weight: 400; letter-spacing: var(--home-track-label); text-transform: uppercase; }
.moon-month__item time { color: var(--home-text); font-size: 1.1rem; font-variant-numeric: lining-nums; }
/* The year month by month: solid cards in clear white, each new and full Moon beside its drawing.
   The months gone are marked and quiet, and so is every new or full Moon already passed; the current
   month is lit, the ones to come are plain. */
.moon-year { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--home-space-4); margin: 0; padding: 0; list-style: none; }
.moon-year__month {
    position: relative;
    display: grid;
    align-content: start;
    gap: var(--home-space-5);
    padding: var(--home-space-5) var(--home-space-5) var(--home-space-6);
    border: 1px solid rgba(197, 207, 219, 0.14);
    border-radius: var(--home-radius-surface);
    background: #0d121b;
}
.moon-year__month h3 { display: flex; align-items: baseline; justify-content: space-between; gap: var(--home-space-3); margin: 0; color: var(--home-text); font: 400 1.4rem/1 var(--home-font); }
.moon-year__month.is-past h3::after { color: var(--home-text-muted); font: 400 var(--home-type-micro)/1 var(--home-font); letter-spacing: var(--home-track-label); text-transform: uppercase; content: "прошёл"; }
.moon-year__month.is-current h3::after { padding: 0.3rem 0.55rem; border: 1px solid color-mix(in srgb, var(--home-amber) 60%, transparent); border-radius: 999px; color: var(--home-amber); font: 400 var(--home-type-micro)/1 var(--home-font); letter-spacing: var(--home-track-label); text-transform: uppercase; content: "сейчас"; }
.moon-year__month.is-past { border-color: rgba(197, 207, 219, 0.07); background: #0a0e15; }
.moon-year__month.is-past h3, .moon-year__event.is-past time { color: var(--home-text-muted); }
.moon-year__event.is-past span { color: var(--home-text-faint); }
.moon-year__event.is-past .moon-year__moon { opacity: 0.45; }
.moon-year__month.is-current { border-color: color-mix(in srgb, var(--home-amber) 60%, transparent); background: #11161f; box-shadow: 0 0 3rem color-mix(in srgb, var(--home-amber) 10%, transparent); }
.moon-year__events { display: grid; gap: var(--home-space-4); margin: 0; padding: 0; list-style: none; }
.moon-year__event { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); column-gap: var(--home-space-4); align-items: center; }
.moon-year__moon { grid-row: span 2; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--home-canvas-deep); box-shadow: 0 0 0 1px rgba(197, 207, 219, 0.22); }
.moon-year__event span { color: var(--home-text-soft); font-size: var(--home-type-caption); letter-spacing: var(--home-track-label); text-transform: uppercase; }
.moon-year__event time { color: var(--home-text); font-size: 1.15rem; font-variant-numeric: lining-nums; }
.moon-calendar__eclipses { margin-top: var(--home-space-24); }
.moon-eclipses { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--home-space-8) var(--home-space-12); margin: 0; padding: 0; list-style: none; }
.moon-eclipses__item { display: grid; gap: var(--home-space-2); padding-top: var(--home-space-5); border-top: 1px solid var(--color-line); }
.moon-eclipses__item time { display: flex; align-items: center; gap: var(--home-space-3); font: 400 clamp(1.5rem, 2.2vw, 2rem)/1.1 var(--home-font); font-variant-numeric: lining-nums; }
.moon-eclipses__item time::before { width: 0.85rem; height: 0.85rem; flex: none; border-radius: 50%; content: ""; }
.moon-eclipses__item--lunar time::before { background: radial-gradient(circle at 40% 40%, #e0956f, var(--moon-copper) 60%, #6e2c1c); box-shadow: 0 0 0.8rem color-mix(in srgb, var(--moon-copper) 50%, transparent); }
.moon-eclipses__item--solar time::before { border: 2px solid var(--home-amber); background: var(--home-canvas-deep); box-shadow: 0 0 0.8rem color-mix(in srgb, var(--home-amber) 45%, transparent); }
.moon-eclipses__item b { color: var(--home-text); font-weight: 400; }
.moon-eclipses__item span { color: var(--home-text-muted); font-size: 0.92rem; line-height: 1.55; }

.moon-page__nook { padding-block: var(--home-space-8); }
.moon-page__seo { padding-block: var(--home-space-12) var(--home-space-24); }
.moon-page__seo .lunar-cycle__sources { margin-top: var(--home-space-12); color: var(--home-text-faint); font-size: var(--home-type-caption); }
.moon-page__seo .lunar-cycle__sources a { color: var(--home-text-muted); }

@media (max-width: 79.9375rem) {
    .moon-year { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ── Narrow screens: a scene's Moon stays at its top, the steps go under it ── */
@media (max-width: 63.9375rem) {
    .moon-scene__inner { grid-template-columns: minmax(0, 1fr); gap: 0; min-height: 0; padding-block: var(--home-space-16) var(--home-space-12); }
    .moon-scene__visual { order: 1; }
    .moon-scene--phases .moon-scene__visual { position: sticky; z-index: 0; top: 4.5rem; }
    .moon-scene__slot { width: min(100%, 42svh, 26rem); }
    /* The words go under the Moon on the stars themselves, each step on a stretch of its own, so the
       Moon stays in sight while a step is read; a soft shadow keeps them legible where they pass it. */
    .moon-scene__text, .moon-scene--eclipse .moon-scene__text {
        position: relative;
        z-index: 1;
        order: 2;
        max-width: 36rem;
        margin: var(--home-space-6) auto 0;
        text-shadow: 0 0 1.2rem rgba(5, 6, 10, 0.95), 0 1px 3px rgba(5, 6, 10, 0.9);
    }
    .moon-scene--phases .moon-step { padding-block: var(--home-space-6) 28svh; }
    .moon-scene--phases .moon-step:last-child { padding-bottom: var(--home-space-8); }
    .moon-step__name { font-size: clamp(2rem, 8vw, 2.6rem); }
    .moon-month { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--home-space-10); }
    .moon-month::before { content: none; }
    .moon-year { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .moon-scene__head { grid-template-columns: minmax(0, 1fr); align-items: start; margin-bottom: var(--home-space-6); }
    /* An atlas on a narrow screen: the Moon, its places numbered on it, the notes as a key under it. */
    .moon-map { padding-block: var(--home-space-16) var(--home-space-12); }
    .moon-map__stage { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--home-space-6) var(--home-space-5); }
    .moon-map__visual { grid-column: 1 / -1; order: 0; }
    .moon-map__slot { width: min(100%, 34rem); }
    .moon-map__notes, .moon-map__notes--left { justify-content: flex-start; align-items: stretch; gap: var(--home-space-4); padding: 0; text-align: left; }
    .moon-map__notes--left { order: 1; }
    .moon-note { max-width: none; }
    .moon-note__name { display: flex; align-items: baseline; gap: var(--home-space-2); font-size: 1.1rem; }
    .moon-note__number { display: inline-grid; flex: none; place-items: center; width: 1.15rem; height: 1.15rem; border-radius: 50%; background: var(--home-amber); color: #10141c; font: 600 0.7rem/1 var(--home-font); translate: 0 -0.1em; }
    .moon-note__text { font-size: 0.8125rem; }
    .moon-map__line, .moon-map__ring, .moon-map__dot, .moon-map__name--minor { display: none; }
    .moon-map__badge, .moon-map__number { display: block; }
    .moon-pair { padding-block: var(--home-space-16) var(--home-space-12); }
    .moon-pair__row { gap: var(--home-space-4); }
}
@media (max-width: 61.9375rem) {
    .moon-page { --moon-gutter: var(--home-space-10); }
}
@media (max-width: 47.9375rem) {
    .moon-page { --moon-gutter: 1.5625rem; }
    .moon-intro__orb { width: min(96vw, 30rem); }
    .moon-intro__head { max-width: 80%; gap: var(--home-space-2); }
    .moon-intro__facts { flex-direction: column; gap: var(--home-space-1); }
    .moon-intro__facts span + span::before { content: none; }
    .moon-intro__next { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--home-space-4); width: 100%; }
    .moon-stats { gap: var(--home-space-5); }
    .moon-eclipses { grid-template-columns: minmax(0, 1fr); }
    .moon-calendar { padding-top: var(--home-space-16); }
    /* A phone reads the year as a list: the month on the left, its new and full Moons beside it. */
    .moon-year { grid-template-columns: minmax(0, 1fr); gap: var(--home-space-3); }
    .moon-year__month { grid-template-columns: 5.5rem minmax(0, 1fr); align-items: start; gap: var(--home-space-4); padding: var(--home-space-4); }
    .moon-year__month h3 { flex-direction: column; align-items: flex-start; gap: var(--home-space-2); font-size: 1.3rem; }
    .moon-year__events { gap: var(--home-space-3); }
    .moon-year__event { grid-template-columns: 2rem minmax(0, 1fr); column-gap: var(--home-space-3); }
    .moon-year__moon { width: 2rem; height: 2rem; }
    .moon-year__event time { font-size: 1.05rem; }
    /* The scenes' words over their Moons are drawn in units of the Moon's frame: larger units keep them readable. */
    .moon-zodiac__sign { font-size: 34px; letter-spacing: 0.04em; }
    .moon-span__label { font-size: 30px; letter-spacing: 0.06em; }
    .moon-pair__super { margin-top: var(--home-space-8); font-size: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
    .moon-intro__down i::after, .moon-page .lunar-hero__link.is-hinted::before { animation: none; }
    .moon-scene.is-held .moon-step, .moon-slot__fallback, .moon-hint, .moon-map__pin { transition: none !important; }
}