/* 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: a lunar study and calculated sky locator. */
[data-full-moon-calendar-page],
.moon-calendar-experience {
  /* Shared tokens for the almanac and public information sections. */
  --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);
}
.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);
}
.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-year-ledger {
  background: var(--moon-ink);
  color: #ffffff;
}

.moon-year-ledger__visual {
  position: relative;
  isolation: isolate;
  /* Keep the annual almanac visually separate from the interactive study. */
  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 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-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-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-knowledge-card__image img {
    transition: none;
  }

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

/* Moon Study: enlarged surface portrait, with position in a separate locator. */
.moon-study {
  display: flex;
  flex-direction: column;
  max-width: 1152px;
  margin: auto;
  padding: 48px var(--moon-gutter) 64px;
  color: #e9e7df;
}

.moon-study * {
  box-sizing: border-box;
}

.moon-study__header {
  border-bottom: 1px solid #ffffff18;
  padding-bottom: 24px;
}

.moon-study__eyebrow {
  margin: 0 0 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #b9b29c;
}

.moon-study h1 {
  margin: 0;
  line-height: 1.14;
  font-weight: 500;
  letter-spacing: -.035em;
}

.moon-study h1 span {
  display: block;
  font-size: clamp(12px,1.3vw,15px);
  letter-spacing: .01em;
  color: #b8c9bf;
  margin-bottom: 12px;
}

.moon-study h1 small {
  display: block;
  font-size: clamp(34px,5vw,58px);
  font-weight: 500;
}

.moon-study__intro {
  font-size: 14px;
  color: #aeb8b1;
  margin: 16px 0 24px;
}

.moon-study__context {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  font-size: 11px;
  color: #b5bdb6;
}

.moon-study__context strong {
  font-weight: 500;
  color: #e9e7df;
}

.moon-study__header {
  order: 0;
}

.moon-study__composition {
  display: contents;
}

.moon-study__portrait {
  order: 1;
}

.moon-study__time {
  order: 2;
}

.moon-study__observation {
  order: 3;
  margin-top: 32px;
}

.moon-study__utilities {
  order: 4;
}

.moon-study__status {
  order: 5;
}

.moon-study__next {
  order: 6;
}

.moon-study__portrait {
  margin: 0;
  min-width: 0;
}

.moon-study__stage {
  position: relative;
  isolation: isolate;
  height: clamp(300px,76vw,480px);
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 55%,rgba(111,111,103,.09),transparent 68%);
}

.moon-study__stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(ellipse at 50% 80%,rgba(88,119,137,.36),transparent 75%);
  opacity: var(--moon-daylight,0);
}

.moon-study__stage::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background: radial-gradient(ellipse at 50% 80%,rgba(142,91,64,.16),transparent 70%);
  opacity: var(--moon-twilight,0);
}

.moon-study__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.moon-study__portrait figcaption {
  text-align: center;
  font-size: 10px;
  color: #a8b0a9;
  line-height: 1.6;
}

.moon-study__phase {
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: center;
  margin: 24px 0 0;
}

.moon-study__phase strong {
  font-size: 24px;
  font-weight: 400;
  letter-spacing: -.02em;
}

.moon-study__phase > span {
  font-size: 12px;
  color: #b8bcb0;
}

.moon-study__observation {
  min-width: 0;
  padding-top: 12px;
}

.moon-study__answer {
  font-size: 20px;
  font-weight: 400;
  line-height: 1.5;
  margin: 0;
  letter-spacing: -.02em;
}

.moon-study__locator {
  width: 100%;
  max-width: 300px;
  aspect-ratio: 1;
  margin: 16px auto 0;
}

.moon-study__locator canvas {
  width: 100%;
  height: 100%;
  display: block;
  touch-action: pan-y;
}

.moon-study__locator-key {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 10px;
  color: #aeb8b1;
}

.moon-study button {
  min-height: 44px;
  border: 1px solid #ffffff28;
  border-radius: 0;
  padding: 10px 14px;
  background: transparent;
  color: #e1ddd0;
  font: inherit;
  cursor: pointer;
}

.moon-study__locator-key button {
  border: 0;
  padding: 8px;
  font-size: 11px;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.moon-study button:hover {
  background: #ffffff08;
}

.moon-study button:disabled {
  opacity: .45;
  cursor: default;
}

.moon-study :is(button,
input,
summary,
canvas):focus-visible {
  outline: 2px solid #e2c77d;
  outline-offset: 4px;
}

.moon-study__position {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  border-top: 1px solid #ffffff18;
  padding-top: 20px;
  margin: 12px 0;
}

.moon-study__position strong {
  font-size: 14px;
  font-weight: 500;
}

.moon-study__position small {
  color: #aeb8b1;
  font-size: 11px;
}

.moon-study__explanation {
  font-size: 12px;
  line-height: 1.7;
  color: #b8bcb0;
}

.moon-study__explanation summary {
  cursor: pointer;
  min-height: 44px;
  padding: 10px 0;
  color: #dfdacb;
}

.moon-study__time {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid #ffffff28;
}

.moon-study__date-row {
  display: flex;
  gap: 8px;
  align-items: end;
}

.moon-study__date-row label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 10px;
  color: #b8bcb0;
  min-width: 0;
}

.moon-study__date-row input {
  background: transparent;
  border: 1px solid #ffffff28;
  border-radius: 0;
  padding: 10px;
  min-height: 44px;
  width: 100%;
  color: #e9e7df;
  color-scheme: dark;
  font: inherit;
  font-size: 13px;
}

.moon-study__date-row button {
  padding: 10px;
  min-width: 44px;
}

.moon-study__date-row output {
  margin-left: auto;
  padding-bottom: 12px;
  white-space: nowrap;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.moon-study [type=range] {
  display: block;
  width: 100%;
  margin: 16px 0 0;
  min-height: 44px;
  accent-color: #d5c08c;
  background: transparent;
}

.moon-study__time-scale {
  display: flex;
  justify-content: space-between;
  font-size: 9px;
  color: #a4afa7;
  font-variant-numeric: tabular-nums;
}

.moon-study__events {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 6px;
  margin-top: 24px;
}

.moon-study__events button {
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 8px;
  padding: 12px 8px;
  font-size: 12px;
}

.moon-study__events small {
  font-size: 10px;
  line-height: 1.5;
  color: #b5bbae;
}

.moon-study__events button[aria-pressed=true] {
  border-color: #c8ad6f;
  background: #c8ad6f12;
  color: #ead8ab;
}

.moon-study__hint,
.moon-study__status {
  font-size: 11px;
  line-height: 1.7;
  color: #b3bcb4;
}

.moon-study__utilities {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
  font-size: 12px;
}

.moon-study__utilities [data-moon-play] {
  border-color: #b9a477;
}

.moon-study__next {
  margin: 32px 0 0;
  padding-top: 24px;
  border-top: 1px solid #ffffff18;
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: #aeb8b1;
  font-size: 11px;
}

.moon-study__next time {
  font-size: 16px;
  color: #e2ddca;
}

.moon-study__next small {
  font-size: 11px;
}

@media (min-width:800px) {
  .moon-study {
    padding-top: 64px;
  }

  .moon-study__composition {
    display: grid;
    order: 1;
    grid-template-columns: minmax(0,1.5fr) minmax(0,1fr);
    gap: 64px;
    padding-top: 32px;
  }

  .moon-study__stage {
    height: 440px;
  }

  .moon-study__observation {
    padding-top: 24px;
    margin-top: 0;
  }

  .moon-study__time {
    margin-top: 48px;
  }

  .moon-study__events button {
    padding: 16px 20px;
    font-size: 14px;
  }

  .moon-study__events small {
    font-size: 12px;
  }

}

@media (max-width:359px) {
  .moon-study__date-row {
    flex-wrap: wrap;
  }

  .moon-study__date-row output {
    width: 100%;
    text-align: right;
    padding: 8px 0 0;
  }

}

@media (prefers-reduced-motion:reduce) {
  .moon-study * {
    scroll-behavior: auto;
    transition: none;
    animation: none;
  }

}

.moon-study__atmosphere-note {
  margin: 8px 0;
  text-align: center;
  color: #a8b0a9;
  font-size: 10px;
}

.moon-study__portrait .moon-study__answer {
  margin: 24px auto 0;
  text-align: center;
  max-width: 30em;
  font-size: 16px;
}

.moon-study__scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

@media (min-width:800px) {
  .moon-study__observation {
    order: 2;
  }

  .moon-study__time {
    order: 3;
    grid-column: 1 / -1;
  }

}

@media (max-width: 799px) {
  .moon-study {
    padding-top: 32px;
  }

  .moon-study__header {
    padding-bottom: 16px;
  }

  .moon-study__intro {
    margin-bottom: 16px;
  }

  .moon-study__stage {
    height: clamp(280px, 70vw, 330px);
  }

  .moon-study__phase {
    margin-top: 16px;
  }

  .moon-study__portrait .moon-study__answer {
    margin-top: 16px;
  }
}