/* Moon calendar page — intro prose and dynamic moon-phase widgets */
.moon-intro { max-width: 760px; }
.moon-intro p + p { margin-top: 1.1rem; }
.moon-intro blockquote { margin: 1.75rem 0; padding-left: 1.5rem; border-left: 3px solid var(--wine); color: var(--ink-soft); font-style: italic; }
.moon-intro blockquote cite { display: block; margin-top: .75rem; color: var(--ink-soft); font-style: normal; font-size: .9rem; }

.moon-next-section .section-heading { margin-bottom: clamp(2rem, 4vw, 3rem); }
.moon-next { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: clamp(1.25rem, 3vw, 2rem); max-width: 720px; padding: clamp(2rem, 4vw, 3rem); border-radius: clamp(1.5rem, 3vw, 2.5rem); color: var(--white); background: var(--wine-dark); }
.moon-next__eyebrow { margin: 0 0 .4rem; font-size: .78rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.7); }
.moon-next__type { margin: 0 0 .6rem; font-family: var(--display); font-size: clamp(1.6rem, 3vw, 2.3rem); font-weight: 500; line-height: 1.1; }
.moon-next__type span { margin-left: .5rem; font-family: var(--sans); font-size: .55em; font-weight: 400; color: rgba(255,255,255,.65); }
.moon-next__date { margin: 0; color: rgba(255,255,255,.82); }
.moon-next__date--secondary { margin-top: .35rem; color: rgba(255,255,255,.6); font-size: .92rem; }
.moon-next__zone { font-weight: 600; color: rgba(255,255,255,.92); }
.moon-next__date .moon-event-tag { margin-left: .5rem; background: rgba(255,255,255,.16); color: var(--white); }

.moon-icon { flex-shrink: 0; width: clamp(3.25rem, 6vw, 4.25rem); height: clamp(3.25rem, 6vw, 4.25rem); border-radius: 50%; border: 2px solid currentColor; }
.moon-icon--full { background: currentColor; box-shadow: 0 0 26px rgba(255,255,255,.4); }

.moon-list__note { max-width: 680px; margin: 0 0 2.5rem; color: var(--ink-soft); font-size: .95rem; }
.moon-list__month { padding: 1.5rem 0; border-top: 1px solid var(--line); }
.moon-list__month:last-child { border-bottom: 1px solid var(--line); }
.moon-list__month h3 { margin: 0 0 1rem; font-family: var(--display); font-size: 1.3rem; font-weight: 500; }
.moon-list__items { display: grid; gap: .35rem; margin: 0; padding: 0; list-style: none; }
.moon-list__item { display: grid; grid-template-columns: 1.15rem auto minmax(0,1fr); align-items: center; gap: .85rem; padding: .6rem .75rem; border-radius: 12px; }
.moon-list__item--next { background: var(--warm); }
.moon-list__icon { width: 1rem; height: 1rem; border-radius: 50%; border: 1.5px solid var(--wine); }
.moon-list__item--full .moon-list__icon { background: var(--wine); }
.moon-list__type { font-weight: 600; color: var(--ink); }
.moon-list__next-badge { margin-left: .6rem; padding: .15rem .55rem; border-radius: 999px; background: var(--wine); color: var(--white); font-size: .65rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; vertical-align: middle; }
.moon-list__body { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.moon-list__datetime { color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.moon-list__datetime--secondary { font-size: .88rem; color: var(--ink-soft); opacity: .75; }
.moon-list__zone { font-weight: 600; color: var(--ink); }
.moon-list__datetime--secondary .moon-list__zone { color: var(--ink-soft); }

.moon-event-tag { display: inline-block; margin-left: .5rem; padding: .1rem .5rem; border-radius: 999px; background: var(--gold); color: var(--ink); font-size: .68rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; vertical-align: middle; }

@media (max-width: 640px) {
  .moon-next { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .moon-list__item { grid-template-columns: 1rem 1fr; row-gap: .2rem; }
  .moon-list__body { grid-column: 1 / -1; padding-left: 1.85rem; }
}