/* The astronomy page is an immersive tool; keep floating contact controls from
   covering the live map or date controls. Event pages retain them. */
body:has([data-full-moon-calendar-page]) .sr-floating-contact-actions,
body:has([data-full-moon-calendar-page]) .sr-public-chatbot {
  display: none;
}
/* Full Moon Calendar: image-led live sky. Generated raster imagery supplies
   atmosphere; all calculated geometry is drawn on the transparent canvas. */
[data-full-moon-calendar-page],
.moon-calendar-experience {
  /* Every value here is the site's own: sr-950, sr-900, sr-300, emerald-300,
     and the namespaced signal colours from the Tailwind theme. Nothing on this
     page invents a colour. */
  --moon-ink: var(--color-sr-950, #0b1110);
  --moon-panel: var(--color-sr-900, #17211d);
  --moon-ivory: #ffffff;
  --moon-muted: var(--color-sr-300, #b8c9bf);
  --moon-mint: var(--color-signal-rise, #6ee7b7);
  --moon-brass: var(--color-signal-peak, #facc15);
  --moon-coral: var(--color-signal-set, #f97316);

  /* max-w-6xl and the py-16 / sm:py-20 step — the shell and cadence every other
     public section uses. */
  --moon-shell: 1152px;
  --moon-section-y: clamp(64px, 6vw, 80px);
  --moon-gutter: clamp(20px, 4vw, 48px);
}

.moon-calendar-experience {
  min-width: 0;
  overflow: hidden;
  background: var(--moon-ink);
  color: var(--moon-ivory);
}

/* These shells use a viewport-capped width plus horizontal gutters. Include
   the gutters in that cap so narrow screens never crop the calendar surface. */
.moon-live-sky__hero-inner,
.moon-live-console,
.moon-year-ledger__heading,
.moon-year-ledger__inner,
.moon-knowledge__inner,
.moon-event-bridge,
.moon-faq-night__inner {
  box-sizing: border-box;
}

/* The public header is sticky, so every in-page anchor target has to reserve
   its height or the heading lands behind the bar. */
[data-full-moon-calendar-page] [id] {
  scroll-margin-top: calc(var(--sr-public-header-height, 5rem) + 16px);
}

/* One eyebrow, the site's own: text-xs / font-semibold / tracking-[0.24em].
   These five had drifted to five different near-misses. */
.moon-live-sky__eyebrow,
.moon-year-ledger__heading p,
.moon-knowledge-card__copy > p:first-child,
.moon-event-bridge__copy > p:first-child,
.moon-faq-night__heading p {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.24em;
}

.moon-live-sky {
  background: var(--moon-ink);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: var(--moon-section-y);
}

/* Compact hero row. The copy used to sit on top of the map, which forced the
   plot into a side column and left the controls overhanging the curve. Lifting
   it out lets the panel below own its full width. */
.moon-live-sky__hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--moon-ink);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.moon-live-sky__hero-picture,
.moon-live-sky__hero-picture img,
.moon-live-sky__hero-veil {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.moon-live-sky__hero-picture {
  z-index: 0;
}

/* The star field above the horizon glow. The instrument below is cropped on the
   skyline itself, so the two share a photograph without reading as the same
   picture twice. */
.moon-live-sky__hero-picture img {
  display: block;
  object-fit: cover;
  object-position: 50% 38%;
}

.moon-live-sky__hero-veil {
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(4, 10, 12, 0.42) 0%, rgba(6, 13, 14, 0.58) 58%, var(--moon-ink) 100%),
    linear-gradient(90deg, rgba(4, 10, 12, 0.62), rgba(4, 10, 12, 0.12) 62%, transparent 88%);
  pointer-events: none;
}

.moon-live-sky__hero-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: end;
  width: min(100%, var(--moon-shell, 1152px));
  margin-inline: auto;
  padding: clamp(28px, 3.4vw, 46px) var(--moon-gutter) clamp(26px, 3vw, 38px);
}

.moon-live-sky__answer {
  min-width: 0;
}

.moon-live-sky__eyebrow {
  margin: 0 0 12px;
  color: var(--moon-mint);
  text-transform: uppercase;
}

.moon-live-sky__answer h1 {
  margin: 0;
  color: var(--moon-ivory);
  font-family: inherit;
  font-size: clamp(2.4rem, 4vw, 4.5rem);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.03em;
}

.moon-live-sky__answer h1 small {
  display: block;
  margin-top: 12px;
  color: rgba(239, 246, 242, 0.72);
  font-family: inherit;
  font-size: clamp(0.95rem, 1.3vw, 1.2rem);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.02em;
}

.moon-live-sky__aside {
  display: grid;
  gap: 14px;
  justify-items: start;
  min-width: 0;
}

.moon-live-sky__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  color: rgba(236, 249, 243, 0.86);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.moon-live-sky__meta time {
  color: rgba(213, 226, 221, 0.6);
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: none;
}

.moon-live-sky__signal {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--moon-mint);
  box-shadow: 0 0 0 5px rgba(110, 231, 183, 0.11), 0 0 18px rgba(110, 231, 183, 0.7);
}

.moon-live-sky__summary {
  margin: 0;
  max-width: 40ch;
  color: #ffffff;
  font-size: clamp(1rem, 1.35vw, 1.15rem);
  font-weight: 600;
  line-height: 1.5;
}

.moon-live-sky__next {
  display: grid;
  gap: 4px;
  width: max-content;
  max-width: 100%;
  padding-block: 10px;
  border-block: 1px solid rgba(250, 204, 21, 0.34);
}

.moon-live-sky__next span {
  color: var(--moon-brass);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.moon-live-sky__next time {
  color: #ffffff;
  font-size: 0.95rem;
  font-weight: 650;
}

/* ---- The instrument panel: one border, one width, one surface ---- */

.moon-live-console {
  width: min(100%, var(--moon-shell, 1152px));
  margin: clamp(24px, 3vw, 40px) auto 0;
  padding-inline: var(--moon-gutter);
}

.moon-live-console__inner {
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: var(--moon-panel);
  overflow: hidden;
}

/* Panel header: date, scrub bar and the live legend on one line. */
.moon-live-console__timeline {
  display: grid;
  grid-template-columns: minmax(150px, 0.22fr) minmax(0, 1fr) auto;
  gap: clamp(16px, 2vw, 28px);
  align-items: center;
  padding: 16px clamp(14px, 1.8vw, 22px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.moon-live-console__date,
.moon-live-console__time {
  min-width: 0;
}

.moon-live-console__date > span,
.moon-live-console__time label {
  color: rgba(222, 235, 230, 0.66);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.moon-live-console__date input {
  display: block;
  width: 100%;
  min-height: 46px;
  margin-top: 6px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 0;
  background: rgba(255, 255, 255, 0.035);
  color: #fff;
  color-scheme: dark;
  font-size: 0.95rem;
}

.moon-live-console__time > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
}

.moon-live-console__time output {
  color: var(--moon-mint);
  font-size: 0.95rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.moon-live-console__time input[type="range"] {
  width: 100%;
  min-height: 44px;
  margin-top: 2px;
  accent-color: var(--moon-brass);
}

/* Was a floating pill over the photograph, duplicating the time above it. */
.moon-live-sky__readout {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 13px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 0;
  background: rgba(11, 17, 16, 0.9);
  color: rgba(235, 245, 241, 0.74);
  font-size: 0.72rem;
  white-space: nowrap;
}

.moon-live-sky__readout > span:first-child {
  color: var(--moon-mint);
  font-weight: 700;
}

.moon-live-sky__readout strong {
  color: #fff;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

/* ---- Sky region: a section of the panel, not a separate surface ---- */

.moon-live-sky__stage {
  --moon-plot-gutter: clamp(14px, 2.6%, 40px);
  --moon-plot-zenith: 11%;
  --moon-compass-offset: 20px;
  position: relative;
  isolation: isolate;
  /* Tall enough that the arc reads as an arc: the cropped azimuth axis gives
     roughly one pixel per degree in both directions, so a short frame would
     flatten it. */
  height: clamp(340px, 38vw, 600px);
  min-width: 0;
  overflow: hidden;
  background: #061015;
}

.moon-live-sky__picture,
.moon-live-sky__picture img,
.moon-live-sky__veil,
.moon-live-sky__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.moon-live-sky__picture {
  z-index: 0;
}

.moon-live-sky__picture img {
  display: block;
  object-fit: cover;
  object-position: 50% 72%;
}

.moon-live-sky__veil {
  z-index: 1;
  background: linear-gradient(180deg, rgba(1, 5, 7, 0.62) 0%, rgba(1, 5, 7, 0.24) 38%, rgba(1, 5, 7, 0.08) 62%, rgba(1, 5, 7, 0.34) 100%);
  pointer-events: none;
}

/* Empty box the canvas projects into. CSS owns its geometry; moon_sky_map.js
   only measures it. With the copy lifted into the hero row it can now use the
   panel's full width. */
.moon-live-sky__plot {
  position: absolute;
  z-index: 1;
  top: var(--moon-plot-zenith);
  right: var(--moon-plot-gutter);
  bottom: 20%;
  left: var(--moon-plot-gutter);
  pointer-events: none;
}

.moon-live-sky__canvas {
  z-index: 2;
  display: block;
  opacity: 0;
  cursor: default;
  touch-action: pan-y;
  transition: opacity 260ms ease;
}

/* The canvas covers the whole stage, but only the plot is draggable — say so. */
.moon-live-sky__canvas[data-moon-pointer-in-plot] {
  cursor: crosshair;
}

.moon-live-sky__canvas[data-moon-canvas-ready="true"] {
  opacity: 1;
}

.moon-live-sky__canvas[data-moon-canvas-ready="true"][data-moon-path-transitioning="true"] {
  opacity: 0.28;
}

.moon-live-sky__canvas:focus-visible {
  outline: 2px solid var(--moon-mint);
  outline-offset: -4px;
}

.moon-live-sky__noscript {
  position: absolute;
  z-index: 4;
  right: 18px;
  bottom: 18px;
  max-width: 28rem;
  padding: 10px 14px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(3, 10, 12, 0.8);
  color: #e7eeeb;
  font-size: 0.8rem;
}

/* ---- Jump row: segmented, fused to the sky above it ---- */

.moon-live-console__quick {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.moon-live-console__action {
  display: grid;
  gap: 4px;
  align-content: center;
  min-height: 72px;
  padding: 10px 8px;
  border: 0;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0;
  background: transparent;
  color: var(--moon-ivory);
  text-align: center;
  transition: background 160ms ease, color 160ms ease;
}

.moon-live-console__action:last-child {
  border-right: 0;
}

.moon-live-console__action:hover {
  background: rgba(250, 204, 21, 0.08);
}

.moon-live-console__action span {
  font-size: 0.88rem;
  font-weight: 750;
}

.moon-live-console__action small {
  color: rgba(226, 235, 231, 0.62);
  font-size: 0.73rem;
  font-variant-numeric: tabular-nums;
}

/* Exactly one of these is pressed at a time, and none are while you scrub
   between markers — the row reports where you are in the pass. */
.moon-live-console__action[aria-pressed="true"] {
  background: linear-gradient(to bottom, #facc15 0%, #f97316 100%);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.45);
  color: #111827;
}

.moon-live-console__action[aria-pressed="true"] small {
  color: rgba(17, 24, 39, 0.7);
}

.moon-live-console__hint {
  margin: 0;
  padding: 11px clamp(14px, 1.8vw, 22px);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(193, 208, 202, 0.6);
  font-size: 0.74rem;
  line-height: 1.5;
}

/* ---- Facts and utilities: further sections of the same panel ---- */

.moon-live-console__facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.moon-live-console__facts > div {
  min-width: 0;
  min-height: 104px;
  padding: 16px clamp(14px, 1.8vw, 20px);
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.moon-live-console__facts > div:last-child {
  border-right: 0;
}

/* Direct children only — the inner spans carry the numbers and must stay inline,
   or "58.7" and "%" land on separate lines. */
.moon-live-console__facts > div > span,
.moon-live-console__facts > div > strong,
.moon-live-console__facts > div > small {
  display: block;
}

.moon-live-console__facts > div > span {
  color: rgba(183, 202, 194, 0.62);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.moon-live-console__facts strong {
  margin-top: 6px;
  overflow-wrap: break-word;
  color: #fff;
  font-size: clamp(0.95rem, 1.5vw, 1.15rem);
  font-weight: 650;
}

.moon-live-console__facts small {
  margin-top: 3px;
  color: rgba(191, 207, 200, 0.6);
  font-size: 0.71rem;
  line-height: 1.4;
}

.moon-live-console__secondary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 14px clamp(14px, 1.8vw, 22px);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.moon-live-console__utility {
  min-height: 44px;
  padding: 8px 15px;
  border-radius: 0;
  font-size: 0.8rem;
  font-weight: 650;
}

.moon-live-console__utility:disabled {
  opacity: 0.42;
}

.moon-live-console__status {
  min-height: 22px;
  margin: 0;
  padding: 0 clamp(14px, 1.8vw, 22px) 14px;
  color: rgba(205, 219, 213, 0.7);
  font-size: 0.77rem;
  line-height: 1.5;
}

.moon-live-console__note {
  margin: 0;
  padding: 0 clamp(14px, 1.8vw, 22px) 16px;
  color: rgba(188, 204, 197, 0.55);
  font-size: 0.71rem;
  line-height: 1.5;
}

.moon-year-ledger {
  background: var(--moon-ink);
  color: #ffffff;
}

.moon-year-ledger__visual {
  position: relative;
  isolation: isolate;
  /* Section header, not a second hero — the live sky above is the page's one
     full-height image. */
  min-height: clamp(340px, 32vw, 460px);
  overflow: hidden;
  background: #061015;
}

.moon-year-ledger__visual > img,
.moon-year-ledger__visual-veil {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.moon-year-ledger__visual > img {
  z-index: 0;
  display: block;
  object-fit: cover;
  object-position: center;
}

.moon-year-ledger__visual-veil {
  z-index: 1;
  background: linear-gradient(90deg, rgba(2, 7, 10, 0.9) 0%, rgba(2, 7, 10, 0.62) 36%, rgba(2, 7, 10, 0.08) 68%), linear-gradient(180deg, rgba(2, 7, 10, 0.12), rgba(2, 7, 10, 0.48));
}

.moon-year-ledger__heading {
  position: relative;
  z-index: 2;
  display: grid;
  align-content: center;
  width: min(100%, var(--moon-shell, 1152px));
  min-height: inherit;
  margin-inline: auto;
  padding: 56px var(--moon-gutter);
  color: #ffffff;
}

.moon-year-ledger__heading p {
  margin: 0 0 13px;
  color: var(--moon-mint);
  text-transform: uppercase;
}

.moon-year-ledger__heading h2 {
  margin: 0;
  max-width: 11ch;
  font-family: inherit;
  font-size: clamp(3rem, 5vw, 4.5rem);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.03em;
  text-shadow: 0 3px 32px rgba(0, 0, 0, 0.76);
}

.moon-year-ledger__heading span {
  display: block;
  max-width: 38ch;
  margin-top: 20px;
  color: rgba(239, 246, 242, 0.74);
  font-size: 0.95rem;
  line-height: 1.55;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.8);
}

.moon-image-note {
  position: absolute;
  z-index: 2;
  right: var(--moon-gutter);
  bottom: 22px;
  margin: 0;
  color: rgba(236, 244, 240, 0.55);
  font-size: 0.64rem;
  letter-spacing: 0.04em;
}

.moon-year-ledger__inner {
  width: min(100%, var(--moon-shell, 1152px));
  margin-inline: auto;
  padding: var(--moon-section-y) var(--moon-gutter);
}

.moon-year-ledger__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}

.moon-year-ledger__toolbar p {
  margin: 0;
  max-width: 52ch;
  color: var(--moon-muted);
  font-size: 0.9rem;
  line-height: 1.55;
}

.moon-year-ledger__toolbar p strong {
  color: #ffffff;
}

.moon-year-ledger__toolbar form {
  display: flex;
  gap: 8px;
  flex: none;
}

.moon-year-ledger__toolbar select,
.moon-year-ledger__toolbar input {
  min-height: 48px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.045);
  color: #ffffff;
  font-weight: 650;
}

.moon-year-ledger__toolbar select {
  padding-inline: 12px;
  color-scheme: dark;
}

.moon-year-ledger__toolbar input {
  padding-inline: 18px;
  border-color: rgba(194, 65, 12, 0.5);
  background: linear-gradient(to bottom, #facc15 0%, #f97316 100%);
  color: #111827;
}

.moon-year-ledger__list {
  margin: 42px 0 0;
  padding: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  list-style: none;
}

.moon-year-ledger__list li {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  gap: 24px;
  align-items: center;
  min-width: 0;
  padding: 17px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

/* box-shadow instead of a negative margin: the highlight bleeds outward
   without dragging this row's borders past its neighbours'. */
.moon-year-ledger__list li.is-next {
  background: rgba(250, 204, 21, 0.08);
  box-shadow: 16px 0 0 rgba(250, 204, 21, 0.08), -16px 0 0 rgba(250, 204, 21, 0.08);
}

.moon-year-ledger__date {
  display: grid;
  place-content: center;
  width: 64px;
  height: 64px;
  border: 1px solid rgba(110, 231, 183, 0.36);
  text-align: center;
}

.moon-year-ledger__date span {
  color: var(--moon-mint);
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.moon-year-ledger__date strong {
  font-family: inherit;
  font-size: 1.65rem;
  font-weight: 600;
  line-height: 1;
}

.moon-year-ledger__copy {
  min-width: 0;
}

.moon-year-ledger__copy time {
  display: block;
  font-family: inherit;
  font-size: 1.25rem;
  font-weight: 600;
}

.moon-year-ledger__copy p {
  margin: 4px 0 0;
  color: var(--moon-muted);
  font-size: 0.8rem;
}

.moon-year-ledger__next {
  display: inline-block;
  margin-bottom: 5px;
  color: var(--moon-brass);
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.moon-year-ledger__list button {
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.035);
  color: #ffffff;
  font-size: 0.78rem;
  font-weight: 700;
}

.moon-knowledge {
  background: var(--moon-ink);
  color: #ffffff;
}

.moon-knowledge__inner {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  width: min(100%, var(--moon-shell, 1152px));
  margin-inline: auto;
  padding: var(--moon-section-y) var(--moon-gutter);
  background: transparent;
}

.moon-knowledge-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.025);
}

.moon-knowledge-card__image {
  position: relative;
  aspect-ratio: 4 / 3;
  margin: 0;
  overflow: hidden;
  background: #030709;
}

.moon-knowledge-card__image::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 58%, rgba(4, 9, 11, 0.76));
  content: "";
  pointer-events: none;
}

.moon-knowledge-card__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.moon-knowledge-card:hover .moon-knowledge-card__image img {
  transform: scale(1.025);
}

.moon-knowledge-card__image figcaption {
  position: absolute;
  z-index: 1;
  right: 18px;
  bottom: 14px;
  left: 18px;
  color: rgba(242, 247, 244, 0.62);
  font-size: 0.64rem;
  letter-spacing: 0.04em;
}

.moon-knowledge-card__copy {
  padding: clamp(24px, 4vw, 46px);
}

.moon-knowledge-card__copy > p:first-child {
  margin: 0 0 12px;
  color: var(--moon-mint);
  text-transform: uppercase;
}

.moon-knowledge-card__copy h2 {
  margin: 0;
  max-width: 18ch;
  font-family: inherit;
  font-size: clamp(2rem, 3vw, 3rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.moon-knowledge-card__copy > p:not(:first-child),
.moon-knowledge-card__copy li {
  color: var(--moon-muted);
  font-size: 0.88rem;
  line-height: 1.75;
}

.moon-knowledge-card__copy > p:not(:first-child) {
  margin: 18px 0 0;
}

.moon-knowledge-card__copy ul {
  display: grid;
  gap: 12px;
  margin: 20px 0 0;
  padding-left: 1.2rem;
}

.moon-knowledge-card__copy > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  margin-top: 24px;
  padding: 10px 18px;
  border: 1px solid rgba(110, 231, 183, 0.5);
  color: #eafff5;
  font-size: 0.8rem;
  font-weight: 700;
}

.moon-event-bridge {
  display: grid;
  grid-template-columns: minmax(0, 1.14fr) minmax(380px, 0.86fr);
  gap: clamp(36px, 5vw, 72px);
  width: min(100%, var(--moon-shell, 1152px));
  min-height: 0;
  margin-inline: auto;
  padding: var(--moon-section-y) var(--moon-gutter);
  border-block: 1px solid rgba(255, 255, 255, 0.1);
  background: var(--moon-ink);
  color: #ffffff;
}

.moon-event-bridge__image {
  position: relative;
  min-width: 0;
  min-height: 520px;
  margin: 0;
  overflow: hidden;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.035);
}

.moon-event-bridge__image::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 62%, rgba(20, 23, 20, 0.32));
  content: "";
}

.moon-event-bridge__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.moon-event-bridge__image figcaption {
  position: absolute;
  z-index: 1;
  bottom: 32px;
  left: 34px;
  padding: 8px 11px;
  background: rgba(5, 10, 8, 0.72);
  color: rgba(245, 249, 246, 0.76);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.moon-event-bridge__copy {
  display: grid;
  align-content: center;
  padding: 0;
}

.moon-event-bridge__copy > p:first-child {
  margin: 0 0 14px;
  color: var(--moon-mint);
  text-transform: uppercase;
}

.moon-event-bridge__copy h2 {
  margin: 0;
  max-width: 12ch;
  font-family: inherit;
  font-size: clamp(2.75rem, 4vw, 4rem);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.03em;
}

.moon-event-bridge__copy > p:not(:first-child) {
  margin: 24px 0 0;
  color: var(--moon-muted);
  font-size: 0.9rem;
  line-height: 1.75;
}

.moon-event-bridge__actions {
  display: grid;
  gap: 9px;
  margin-top: 28px;
}

.moon-event-bridge__actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 10px 18px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #ffffff;
  font-size: 0.82rem;
  font-weight: 750;
  text-align: center;
}

.moon-event-bridge__actions .moon-event-bridge__primary {
  border-color: rgba(194, 65, 12, 0.5);
  background: linear-gradient(to bottom, #facc15 0%, #f97316 100%);
  color: #111827;
}

.moon-faq-night {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #03080b;
  color: #ffffff;
}

.moon-faq-night__image,
.moon-faq-night__image img,
.moon-faq-night__veil {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
}

.moon-faq-night__image {
  z-index: 0;
}

.moon-faq-night__image img {
  display: block;
  object-fit: cover;
  object-position: center;
}

.moon-faq-night__veil {
  z-index: 1;
  background: linear-gradient(90deg, rgba(2, 7, 10, 0.96) 0%, rgba(2, 7, 10, 0.78) 44%, rgba(2, 7, 10, 0.22) 78%), linear-gradient(180deg, rgba(2, 7, 10, 0.18), rgba(2, 7, 10, 0.72));
}

.moon-faq-night__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(260px, 0.72fr) minmax(420px, 1.28fr);
  gap: clamp(42px, 7vw, 100px);
  align-items: start;
  width: min(100%, var(--moon-shell, 1152px));
  margin-inline: auto;
  padding: var(--moon-section-y) var(--moon-gutter);
}

.moon-faq-night__heading {
  position: sticky;
  top: 96px;
}

.moon-faq-night__heading p {
  margin: 0 0 13px;
  color: var(--moon-mint);
  text-transform: uppercase;
}

.moon-faq-night__heading h2 {
  margin: 0;
  max-width: 9ch;
  font-family: inherit;
  font-size: clamp(3rem, 4vw, 4rem);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.03em;
}

.moon-faq-night__heading span {
  display: block;
  max-width: 32ch;
  margin-top: 22px;
  color: rgba(218, 231, 225, 0.68);
  font-size: 0.86rem;
  line-height: 1.7;
}

.moon-faq-night__list {
  min-width: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.moon-faq-night__list details {
  min-width: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

.moon-faq-night__list summary {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 76px;
  padding: 16px 48px 16px 0;
  color: #ffffff;
  font-family: inherit;
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  font-weight: 600;
  line-height: 1.25;
  cursor: pointer;
  list-style: none;
}

.moon-faq-night__list summary::-webkit-details-marker {
  display: none;
}

.moon-faq-night__list summary::after {
  position: absolute;
  right: 3px;
  color: var(--moon-mint);
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 1.4rem;
  font-weight: 300;
  content: "+";
}

.moon-faq-night__list details[open] summary::after {
  content: "−";
}

.moon-faq-night__list details p {
  margin: 0;
  padding: 0 48px 24px 0;
  color: rgba(214, 228, 222, 0.72);
  font-size: 0.88rem;
  line-height: 1.75;
}

/* The hero row and the panel stack once there is no room for two columns. */
@media (max-width: 1023px) {
  .moon-live-sky__hero-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
    align-items: start;
  }

  .moon-live-console__timeline {
    grid-template-columns: minmax(140px, 0.3fr) minmax(0, 1fr);
    row-gap: 14px;
  }

  .moon-live-sky__readout {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .moon-live-sky__stage {
    height: clamp(300px, 44vw, 460px);
  }
}

/* The lower sections lose their second column earlier than the hero does: at
   1024 the event photo was being cropped to a 383px-wide portrait against a
   520px min-height, and the FAQ's two minmax() floors left no slack at all. */
@media (max-width: 1100px) {
  .moon-live-console__quick,
  .moon-live-console__facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .moon-live-console__facts > div:nth-child(2n) {
    border-right: 0;
  }

  .moon-live-console__facts > div:nth-child(-n + 2) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  .moon-knowledge__inner,
  .moon-event-bridge,
  .moon-faq-night__inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .moon-event-bridge__image {
    min-height: 420px;
  }

  .moon-faq-night__inner {
    gap: clamp(32px, 5vw, 48px);
  }

  .moon-faq-night__heading {
    position: static;
  }
}

@media (max-width: 767px) {
  .moon-live-sky__hero-inner {
    padding: 24px 18px 22px;
    gap: 18px;
  }

  .moon-live-sky__eyebrow {
    font-size: 0.64rem;
  }

  .moon-live-sky__answer h1 {
    font-size: clamp(2.3rem, 10vw, 3rem);
    line-height: 1;
  }

  .moon-live-sky__answer h1 small {
    margin-top: 10px;
    font-size: 0.92rem;
  }

  .moon-live-sky__meta {
    gap: 8px;
    font-size: 0.61rem;
    letter-spacing: 0.09em;
  }

  .moon-live-sky__meta time {
    display: none;
  }

  .moon-live-sky__summary {
    max-width: 100%;
    font-size: 0.95rem;
  }

  .moon-live-sky__next time {
    font-size: 0.86rem;
  }

  .moon-live-console {
    padding-inline: 16px;
  }

  .moon-live-console__timeline {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    padding: 14px;
  }

  .moon-live-sky__readout {
    grid-column: 1;
    justify-self: start;
    font-size: 0.68rem;
  }

  .moon-live-sky__stage {
    height: clamp(300px, 74vw, 420px);
    /* Compass labels sit above the horizon on a short plot so they clear the
       skyline band at the bottom of the frame. */
    --moon-compass-offset: -12px;
  }

  .moon-live-sky__picture img {
    object-position: 50% 73%;
  }

  .moon-live-console__quick {
    grid-template-columns: 1fr 1fr;
  }

  .moon-live-console__action {
    min-height: 66px;
    padding: 8px 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  .moon-live-console__action:nth-child(2n) {
    border-right: 0;
  }

  .moon-live-console__action:nth-last-child(-n + 2) {
    border-bottom: 0;
  }

  .moon-live-console__action span {
    font-size: 0.8rem;
  }

  .moon-live-console__action small {
    font-size: 0.66rem;
  }

  .moon-live-console__secondary {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 14px;
  }

  .moon-live-console__secondary button:first-child {
    grid-column: 1 / -1;
  }

  .moon-live-console__facts {
    grid-template-columns: 1fr 1fr;
  }

  .moon-live-console__facts > div {
    padding: 14px;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  .moon-live-console__facts > div:nth-child(2n) {
    border-right: 0;
  }

  .moon-live-console__facts > div:nth-last-child(-n + 2) {
    border-bottom: 0;
  }

  .moon-live-console__hint,
  .moon-live-console__status,
  .moon-live-console__note {
    padding-inline: 14px;
  }

  .moon-year-ledger__inner {
    padding: 48px 18px 58px;
  }

  .moon-year-ledger__visual {
    min-height: 520px;
  }

  .moon-year-ledger__visual > img {
    object-position: 64% center;
  }

  .moon-year-ledger__visual-veil {
    background: linear-gradient(180deg, rgba(2, 7, 10, 0.76) 0%, rgba(2, 7, 10, 0.38) 58%, rgba(2, 7, 10, 0.7) 100%), linear-gradient(90deg, rgba(2, 7, 10, 0.72), transparent 88%);
  }

  .moon-year-ledger__heading {
    align-content: start;
    padding: 52px 18px 84px;
  }

  .moon-year-ledger__heading h2 {
    max-width: 11ch;
    font-size: clamp(2.65rem, 11.5vw, 3.5rem);
  }

  .moon-image-note {
    right: 18px;
    bottom: 18px;
    left: 18px;
  }

  .moon-year-ledger__toolbar {
    display: grid;
    align-items: start;
  }

  .moon-year-ledger__toolbar form {
    width: 100%;
  }

  .moon-year-ledger__toolbar select {
    min-width: 0;
    flex: 1;
  }

  .moon-year-ledger__list {
    margin-top: 30px;
  }

  .moon-year-ledger__list li {
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 14px;
    padding: 15px 0;
  }

  .moon-year-ledger__date {
    width: 54px;
    height: 54px;
  }

  .moon-year-ledger__copy time {
    font-size: 1.15rem;
  }

  .moon-year-ledger__list button {
    grid-column: 1 / -1;
    width: 100%;
  }

  .moon-knowledge__inner {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 48px 16px;
    background: transparent;
  }

  .moon-knowledge-card__copy {
    padding: 25px 20px 30px;
  }

  .moon-knowledge-card__copy h2 {
    font-size: clamp(2rem, 8.5vw, 2.6rem);
  }

  .moon-knowledge-card__image figcaption {
    right: 12px;
    bottom: 11px;
    left: 12px;
    font-size: 0.58rem;
  }

  .moon-event-bridge {
    grid-template-columns: 1fr;
    gap: 30px;
    min-height: 0;
    padding: 48px 16px 56px;
  }

  .moon-event-bridge__image {
    min-height: 380px;
  }

  .moon-event-bridge__image::after {
    background: linear-gradient(180deg, transparent 62%, rgba(20, 23, 20, 0.32));
  }

  .moon-event-bridge__copy {
    padding: 0;
  }

  .moon-event-bridge__copy h2 {
    font-size: clamp(2.5rem, 10.5vw, 3.25rem);
  }

  /* The photo becomes a bounded band that the heading sits inside, and the
     question list starts exactly where the band ends. One shared token drives
     both, which retires the 240px spacer that used to fake the same effect. */
  .moon-faq-night {
    --moon-faq-band: clamp(240px, 62vw, 340px);
  }

  .moon-faq-night__image,
  .moon-faq-night__veil {
    height: var(--moon-faq-band);
  }

  .moon-faq-night__image img {
    object-position: 68% center;
  }

  .moon-faq-night__veil {
    background: linear-gradient(180deg, rgba(2, 7, 10, 0.64) 0%, rgba(2, 7, 10, 0.34) 54%, #03080b 100%);
  }

  .moon-faq-night__inner {
    grid-template-columns: 1fr;
    grid-template-rows: var(--moon-faq-band) auto;
    gap: 0;
    padding: 0 18px 70px;
  }

  .moon-faq-night__heading {
    position: static;
    grid-row: 1;
    align-self: start;
    padding-top: 48px;
  }

  .moon-faq-night__list {
    grid-row: 2;
  }

  .moon-faq-night__heading h2 {
    font-size: clamp(2.5rem, 11vw, 3.5rem);
  }

  .moon-faq-night__list summary {
    min-height: 70px;
    padding-right: 36px;
  }

  .moon-faq-night__list details p {
    padding-right: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .moon-live-sky__canvas,
  .moon-live-console__action,
  .moon-knowledge-card__image img {
    transition: none;
  }

  .moon-live-console__action:hover {
    transform: none;
  }

  .moon-knowledge-card:hover .moon-knowledge-card__image img {
    transform: none;
  }
}