.luna-guide {
  background: var(--color-parchment);
  color: var(--color-ink);
}

.luna-guide__hero {
  padding-block: var(--space-9);
  background-image: radial-gradient(circle at 78% 38%, rgba(198, 154, 83, 0.13), transparent 22rem), radial-gradient(circle at 18% 10%, rgba(166, 218, 221, 0.07), transparent 25rem);
}

.luna-guide__hero-layout,
.luna-guide__map-layout,
.luna-guide__story-layout,
.luna-guide__android-layout {
  display: grid;
  min-width: 0;
  align-items: center;
}

.luna-guide__hero-layout {
  grid-template-columns: minmax(26.25rem, 0.45fr) minmax(0, 0.55fr);
  gap: var(--space-7);
}

.luna-guide__hero-layout > *,
.luna-guide__map-layout > *,
.luna-guide__story-layout > *,
.luna-guide__android-layout > *,
.luna-guide__card-grid > * {
  min-width: 0;
}

.luna-guide__hero-copy {
  width: 100%;
  max-width: 37.5rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
}

.luna-guide__hero-copy h1,
.luna-guide__hero-copy p,
.luna-guide__hero-copy .actions {
  margin-block-end: 0;
}

.luna-guide__hero-copy h1 {
  font-size: clamp(2.5rem, 6vw, 5.25rem);
}

.luna-guide__hero-meta {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  min-width: 0;
  gap: var(--space-2) var(--space-3);
  color: var(--color-spirit-blue);
  font-size: var(--text-meta);
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: var(--leading-meta);
}

.luna-guide__hero-meta span {
  min-width: 0;
  padding-inline-end: var(--space-3);
  border-inline-end: 1px solid var(--color-border-dark);
}

.luna-guide__spoiler-note {
  display: flex;
  width: 100%;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  border: 1px solid var(--color-border-dark);
  border-radius: var(--radius-panel);
  background: rgba(166, 218, 221, 0.06);
}

.luna-guide__spoiler-note p {
  margin-block-end: 0;
}

.luna-guide__hero-actions {
  width: auto;
}

.luna-guide__hero-media {
  width: min(100%, 38.75rem);
  justify-self: end;
}

.luna-guide__hero-media img,
.luna-guide__map-media img,
.luna-guide__companions-media img,
.luna-guide__story-media img {
  width: 100%;
  object-fit: contain;
}

.luna-guide__hero-media figcaption {
  padding: 0 var(--space-3) var(--space-3);
}

.luna-guide__reading-head,
.luna-guide__section-head,
.luna-guide__stuck-copy {
  width: min(100%, 43.75rem);
  margin-inline: auto;
  text-align: left;
}

.luna-guide__reading-head {
  margin-block-end: var(--space-6);
}

.luna-guide__reading-head > :last-child,
.luna-guide__section-head > :last-child,
.luna-guide__stuck-copy > :last-child {
  margin-block-end: 0;
}

.luna-guide__numbered-advice,
.luna-guide__stuck-steps {
  display: grid;
  width: min(100%, 43.75rem);
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.luna-guide__numbered-advice {
  gap: var(--space-5);
}

.luna-guide__numbered-advice > li {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr);
  min-width: 0;
  gap: var(--space-4);
  padding-block-end: var(--space-5);
  border-block-end: 1px solid var(--color-border-light);
}

.luna-guide__numbered-advice > li:last-child {
  padding-block-end: 0;
  border-block-end: 0;
}

.luna-guide__number,
.luna-guide__stuck-steps > li > span {
  color: #8a6225;
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 600;
  line-height: 1;
}

.luna-guide__numbered-advice h3,
.luna-guide__numbered-advice p,
.luna-guide__stuck-steps h3,
.luna-guide__stuck-steps p {
  margin-block-end: 0;
}

.luna-guide__numbered-advice > li > div,
.luna-guide__stuck-steps > li > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-3);
}

.luna-guide__map-layout {
  grid-template-columns: minmax(0, 0.62fr) minmax(18rem, 0.38fr);
  gap: var(--space-7);
}

.luna-guide__map-copy {
  width: min(100%, 42.5rem);
  justify-self: start;
}

.luna-guide__map-copy > :last-child {
  margin-block-end: 0;
}

.luna-guide__map-media {
  width: min(100%, 26.25rem);
  justify-self: end;
}

.luna-guide__map-media figcaption,
.luna-guide__story-media figcaption,
.luna-guide__companions-media figcaption {
  padding: 0 var(--space-3) var(--space-3);
}

.luna-guide__observation,
.luna-guide__music-note {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-2);
}

.luna-guide__observation {
  width: min(100%, 37.5rem);
  margin-block-start: var(--space-5);
  padding: var(--space-4);
  border: 1px solid rgba(104, 119, 108, 0.45);
  border-radius: var(--radius-panel);
  background: var(--color-parchment-deep);
}

.luna-guide__observation .eyebrow,
.luna-guide__music-note .eyebrow {
  color: #3c6c70;
}

.luna-guide__observation p,
.luna-guide__music-note p {
  margin-block-end: 0;
}

.luna-guide__section-head {
  margin-block-end: var(--space-6);
}

.luna-guide__companions-media {
  width: min(100%, 45rem);
  margin-block-end: var(--space-6);
}

.luna-guide__card-grid {
  display: grid;
  width: 100%;
  gap: var(--space-5);
}

.luna-guide__card-grid--companions,
.luna-guide__card-grid--puzzles,
.luna-guide__card-grid--next {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.luna-guide__advice-card,
.luna-guide__lens-card,
.luna-guide__next-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-5);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-card);
  background: var(--color-parchment);
}

.luna-guide__advice-card > *,
.luna-guide__lens-card > *,
.luna-guide__next-card > * {
  margin-block-end: 0;
}

.luna-guide__advice-card--blue {
  border-top-color: rgba(166, 218, 221, 0.95);
}

.luna-guide__advice-card--deep {
  background: var(--color-parchment-deep);
}

.luna-guide__text-link {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-night-teal);
  font-weight: 700;
}

.luna-guide__lens-card {
  min-height: 100%;
}

.luna-guide__lens-card--amber h3::before {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  margin-inline-end: var(--space-2);
  border-radius: 50%;
  background: var(--color-amber);
  content: "";
  vertical-align: middle;
}

.luna-guide__stuck-steps {
  gap: var(--space-5);
}

.luna-guide__stuck-steps > li {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  min-width: 0;
  gap: var(--space-3);
}

.luna-guide__editorial {
  display: flex;
  width: min(100%, 37.5rem);
  min-width: 0;
  margin: var(--space-6) 0 0 auto;
  flex-direction: column;
  gap: var(--space-3);
}

.luna-guide__editorial > * {
  margin-block-end: 0;
}

.luna-guide__story-layout {
  grid-template-columns: minmax(0, 0.58fr) minmax(18rem, 0.42fr);
  gap: var(--space-7);
}

.luna-guide__story-copy {
  width: min(100%, 40rem);
  justify-self: start;
}

.luna-guide__story-copy > :last-child {
  margin-block-end: 0;
}

.luna-guide__story-media {
  width: min(100%, 28.75rem);
  justify-self: end;
}

.luna-guide__music-note {
  width: min(100%, 35rem);
  margin-block: var(--space-5);
  padding: var(--space-4);
  border: 1px solid rgba(166, 218, 221, 0.85);
  border-radius: var(--radius-panel);
}

.luna-guide__editorial--story {
  width: min(100%, 37.5rem);
  margin-inline: 0;
}

.luna-guide__android-layout {
  grid-template-columns: minmax(0, 0.6fr) minmax(20rem, 0.4fr);
  gap: var(--space-5);
  align-items: stretch;
}

.luna-guide__facts,
.luna-guide__play-panel {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
}

.luna-guide__facts > *,
.luna-guide__play-panel > * {
  margin-block-end: 0;
}

.luna-guide__facts-list {
  display: grid;
  width: 100%;
  margin: 0;
}

.luna-guide__facts-list > div {
  display: grid;
  grid-template-columns: minmax(8rem, 0.32fr) minmax(0, 0.68fr);
  min-width: 0;
  gap: var(--space-4);
  padding-block: var(--space-3);
  border-block-end: 1px solid var(--color-border-light);
}

.luna-guide__facts-list > div:first-child {
  border-block-start: 1px solid var(--color-border-light);
}

.luna-guide__facts-list dd {
  margin: 0;
}

.luna-guide__play-panel .button {
  margin-block-start: auto;
}

.luna-guide__next-card {
  min-height: 100%;
  justify-content: space-between;
}

.luna-guide__closing {
  padding-block: var(--space-8);
  background-image: radial-gradient(circle at 86% 50%, rgba(198, 154, 83, 0.14), transparent 18rem);
}

.luna-guide__closing-panel {
  display: flex;
  width: min(100%, 38.75rem);
  margin-inline: auto;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  text-align: left;
}

.luna-guide__closing-panel > * {
  margin-block-end: 0;
}

@media (max-width: 67.5rem) {
  .luna-guide__hero-layout {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .luna-guide__hero-media {
    width: 100%;
    max-width: none;
    grid-row: 1;
    justify-self: stretch;
  }

  .luna-guide__hero-copy {
    max-width: 40rem;
  }

  .luna-guide__map-layout,
  .luna-guide__story-layout {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .luna-guide__map-media,
  .luna-guide__story-media {
    width: min(100%, 42.5rem);
    justify-self: start;
  }

  .luna-guide__card-grid--companions,
  .luna-guide__card-grid--next {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 62.5rem) {
  .luna-guide__card-grid--puzzles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .luna-guide__card-grid--puzzles > :last-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 56.25rem) {
  .luna-guide__android-layout {
    grid-template-columns: 1fr;
  }

  .luna-guide__facts,
  .luna-guide__play-panel {
    width: 100%;
  }
}

@media (max-width: 47.9375rem) {
  .luna-guide__hero {
    padding-block: var(--space-6);
  }

  .luna-guide__hero-layout {
    gap: var(--space-5);
  }

  .luna-guide__hero-copy {
    gap: var(--space-3);
  }

  .luna-guide__hero-copy h1 {
    font-size: clamp(2.5rem, 12vw, 3.5rem);
  }

  .luna-guide__hero-copy .lead {
    font-size: 1rem;
    line-height: var(--leading-body);
  }

  .luna-guide__hero-meta {
    flex-direction: column;
    align-items: flex-start;
  }

  .luna-guide__hero-meta span {
    padding-inline-end: 0;
    border-inline-end: 0;
  }

  .luna-guide__hero-actions,
  .luna-guide__hero-actions .button,
  .luna-guide__play-panel .button,
  .luna-guide__closing-panel .button {
    width: 100%;
  }

  .luna-guide__hero-media {
    aspect-ratio: 16 / 10;
  }

  .luna-guide__hero-media img,
  .luna-guide__companions-media img {
    height: 100%;
    object-fit: contain;
  }

  .luna-guide__numbered-advice > li,
  .luna-guide__stuck-steps > li {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }

  .luna-guide__numbered-advice,
  .luna-guide__stuck-steps {
    gap: var(--space-5);
  }

  .luna-guide__numbered-advice > li {
    padding-block-end: var(--space-5);
  }

  .luna-guide__number,
  .luna-guide__stuck-steps > li > span {
    font-size: 1.5rem;
  }

  .luna-guide__map-layout,
  .luna-guide__story-layout {
    gap: var(--space-5);
  }

  .luna-guide__map-media,
  .luna-guide__story-media {
    width: 100%;
  }

  .luna-guide__map-media {
    aspect-ratio: 4 / 3;
  }

  .luna-guide__story-media {
    aspect-ratio: 4 / 3;
    grid-row: 1;
  }

  .luna-guide__map-media img,
  .luna-guide__story-media img {
    height: 100%;
    object-fit: contain;
  }

  .luna-guide__observation,
  .luna-guide__music-note {
    padding: var(--space-4);
  }

  .luna-guide__companions-media {
    width: 100%;
    aspect-ratio: 16 / 10;
  }

  .luna-guide__card-grid--companions,
  .luna-guide__card-grid--puzzles,
  .luna-guide__card-grid--next {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }

  .luna-guide__card-grid--puzzles > :last-child {
    grid-column: auto;
  }

  .luna-guide__advice-card,
  .luna-guide__lens-card,
  .luna-guide__next-card {
    padding: var(--space-4);
  }

  .luna-guide__editorial {
    width: 100%;
    margin-inline: 0;
    padding: var(--space-4);
  }

  .luna-guide__facts-list > div {
    grid-template-columns: 1fr;
    gap: var(--space-1);
  }

  .luna-guide__closing {
    padding-block: var(--space-6);
    background-image: radial-gradient(circle at 90% 12%, rgba(198, 154, 83, 0.08), transparent 12rem);
  }

  .luna-guide__closing-panel {
    gap: var(--space-3);
  }
}

@media (prefers-reduced-motion: reduce) {
  .luna-guide *,
  .luna-guide *::before,
  .luna-guide *::after {
    transition: none !important;
    animation: none !important;
  }
}