.moonshades-review {
  overflow: hidden;
}

.moonshades-review .moonshades-maze-section {
  position: relative;
  isolation: isolate;
}

.moonshades-review .moonshades-maze-line {
  position: absolute;
  z-index: -1;
  width: 22rem;
  max-width: 34vw;
  color: var(--color-bronze-oxidised);
  fill: none;
  opacity: 0.55;
  pointer-events: none;
}

.moonshades-review .moonshades-maze-line path {
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: square;
  stroke-linejoin: miter;
  stroke-dasharray: 720;
  stroke-dashoffset: 720;
  transition: stroke-dashoffset 900ms ease-out;
}

.moonshades-review .moonshades-maze-line circle {
  fill: var(--color-amber-candle);
  stroke: none;
  opacity: 0;
  transition: opacity 180ms ease-out 650ms;
}

.moonshades-review .moonshades-maze-section.is-revealed .moonshades-maze-line path {
  stroke-dashoffset: 0;
}

.moonshades-review .moonshades-maze-section.is-revealed .moonshades-maze-line circle {
  opacity: 1;
}

.moonshades-review .moonshades-play-badge {
  width: max-content;
  min-height: 2.75rem;
}

.moonshades-hero {
  display: grid;
  min-height: clamp(42.5rem, 53vw, 47.5rem);
  color: var(--color-parchment-light);
  background: var(--color-ink-deep);
}

.moonshades-hero > * {
  grid-area: 1 / 1;
  min-width: 0;
}

.moonshades-hero__image {
  width: 100%;
  height: 100%;
  min-height: 42.5rem;
  object-fit: cover;
  object-position: 60% center;
}

.moonshades-hero__shade {
  background: linear-gradient(90deg, rgb(23 24 23 / 92%) 0%, rgb(23 24 23 / 72%) 37%, rgb(23 24 23 / 14%) 70%, rgb(23 24 23 / 6%) 100%);
}

.moonshades-hero__content {
  align-self: center;
  width: min(100% - 4rem, 35.625rem);
  margin-left: max(2rem, calc((100vw - var(--container-wide)) / 2));
  padding-block: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.moonshades-hero__content > * {
  min-width: 0;
  margin: 0;
}

.moonshades-hero h1 {
  max-width: 35.625rem;
  font-size: clamp(2.75rem, 4.4vw, 3.5rem);
  color: var(--color-parchment-light);
}

.moonshades-hero__lead {
  max-width: 35.625rem;
  font-size: var(--text-lead);
  line-height: var(--leading-lead);
  color: var(--color-stone-light);
}

.moonshades-hero__note {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  width: min(100%, 32rem);
  gap: var(--space-2);
  margin-top: var(--space-2);
  padding: var(--space-3) 0 0 var(--space-4);
  border-left: 1px solid var(--color-border-bronze);
  color: var(--color-stone-light);
}

.moonshades-hero__note > * {
  min-width: 0;
  margin: 0;
}

.moonshades-hero__note-label {
  color: var(--color-parchment-light);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: var(--leading-label);
  text-transform: uppercase;
}

.moonshades-hero__note p,
.moonshades-hero__coordinates {
  font-size: var(--text-sm);
  line-height: var(--leading-small);
}

.moonshades-hero__coordinates {
  align-self: end;
  justify-self: end;
  margin: 0 max(2rem, calc((100vw - var(--container-wide)) / 2)) var(--space-5) 0;
  color: var(--color-stone-grey);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
}

.moonshades-hero__maze {
  align-self: end;
  justify-self: end;
  margin: 0 0 var(--space-8) 0;
  z-index: 2;
}

.moonshades-verdict {
  padding-block: var(--space-10);
}

.moonshades-verdict__thesis {
  width: min(100%, 43.75rem);
}

.moonshades-verdict__voices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-7);
  margin-top: var(--space-7);
}

.moonshades-verdict__voices > * {
  min-width: 0;
}

.moonshades-editorial-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  border-left: 2px solid var(--color-bronze-oxidised);
  background: rgb(233 225 204 / 48%);
}

.moonshades-editorial-card > * {
  min-width: 0;
  margin: 0;
}

.moonshades-editorial-card .eyebrow {
  color: #6c512d;
}

.moonshades-verdict__maze {
  right: 0;
  bottom: var(--space-5);
}

.moonshades-rhythm {
  padding-block: var(--space-10);
}

.moonshades-rhythm__layout {
  display: grid;
  grid-template-columns: minmax(30rem, 5fr) minmax(0, 7fr);
  align-items: start;
  gap: var(--space-7);
}

.moonshades-rhythm__layout > * {
  min-width: 0;
}

.moonshades-rhythm__copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  width: 100%;
}

.moonshades-rhythm__copy > * {
  min-width: 0;
  margin: 0;
}

.moonshades-fact {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  border-left: 2px solid var(--color-moss-muted);
  background: color-mix(in srgb, var(--color-moss-muted) 34%, var(--color-charcoal-surface));
  color: var(--color-parchment-light);
}

.moonshades-fact > * {
  min-width: 0;
  margin: 0;
}

.moonshades-fact .eyebrow {
  color: var(--color-parchment-light);
}

.moonshades-fact--light {
  border-color: var(--color-moss-muted);
  background: var(--color-parchment-light);
  color: var(--color-ink-deep);
}

.moonshades-fact--light .eyebrow {
  color: var(--color-moss-muted);
}

.moonshades-rhythm__interpretation {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  border: 1px solid var(--color-border-bronze);
  background: var(--color-charcoal-surface);
}

.moonshades-rhythm__interpretation > * {
  min-width: 0;
  margin: 0;
}

.moonshades-rhythm__marginalia {
  width: min(100%, 13.75rem);
  margin-left: auto;
  padding-left: var(--space-4);
  border-left: 1px solid var(--color-border-bronze);
  color: var(--color-stone-light);
}

.moonshades-rhythm__marginalia > * {
  margin: 0;
}

.moonshades-rhythm__media {
  width: 100%;
  margin: 0;
}

.moonshades-rhythm__media img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: 65% center;
}

.moonshades-rhythm__maze {
  right: 4%;
  bottom: var(--space-6);
}

.moonshades-observation {
  padding-block: var(--space-10);
}

.moonshades-observation__banner {
  width: 100%;
  margin: 0 0 var(--space-6);
}

.moonshades-observation__banner img {
  width: 100%;
  height: 13rem;
  object-fit: cover;
  object-position: center;
}

.moonshades-observation__heading {
  width: min(100%, 48.75rem);
}

.moonshades-observation__cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
  margin-top: var(--space-6);
}

.moonshades-observation__cards > * {
  min-width: 0;
}

.moonshades-observation-card {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  gap: var(--space-3);
  border: 1px solid var(--color-border-light);
}

.moonshades-observation-card > * {
  min-width: 0;
  margin: 0;
}

.moonshades-observation-card--fact {
  padding: var(--space-5);
  background: var(--color-parchment);
}

.moonshades-observation-card--fact .eyebrow {
  color: var(--color-moss-muted);
}

.moonshades-observation-card--map {
  position: relative;
  padding: var(--space-5);
  border-color: var(--color-border-bronze);
  background: var(--color-charcoal-surface);
  color: var(--color-stone-light);
}

.moonshades-card-corner {
  display: block;
  width: 4rem;
  height: 2rem;
  margin-top: auto;
  border-top: 1px solid var(--color-bronze-oxidised);
  border-right: 1px solid var(--color-bronze-oxidised);
}

.moonshades-observation-card--secret {
  background: var(--color-parchment);
}

.moonshades-observation-card--secret img {
  width: 100%;
  height: 8rem;
  object-fit: cover;
  object-position: 65% center;
}

.moonshades-observation-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
}

.moonshades-observation-card__body > * {
  min-width: 0;
  margin: 0;
}

.moonshades-observation__maze {
  left: 9%;
  bottom: var(--space-4);
}

.moonshades-pve {
  padding-block: var(--space-10);
}

.moonshades-pve__media {
  width: 100%;
  margin: var(--space-5) 0 0;
}

.moonshades-pve__media img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center;
}

.moonshades-pve__caption-row {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(17rem, 5fr);
  align-items: start;
  gap: var(--space-6);
  margin-top: var(--space-4);
}

.moonshades-pve__caption-row > * {
  min-width: 0;
}

.moonshades-pve__caption {
  margin: 0;
  color: var(--color-stone-grey);
  font-size: var(--text-sm);
  line-height: var(--leading-small);
}

.moonshades-pve__analysis {
  display: flex;
  flex-direction: column;
  width: min(100%, 42.5rem);
  gap: var(--space-4);
  margin-top: var(--space-7);
  padding: var(--space-6);
}

.moonshades-pve__analysis > * {
  min-width: 0;
  margin: 0;
}

.moonshades-pve__analysis blockquote {
  padding: 0 0 0 var(--space-4);
}

.moonshades-pve__aside {
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border-light);
  color: #5b5d56;
}

.moonshades-loot {
  padding-block: var(--space-10);
}

.moonshades-loot__intro-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: var(--space-7);
}

.moonshades-loot__intro-layout > * {
  min-width: 0;
}

.moonshades-loot__intro {
  width: 100%;
}

.moonshades-loot__media {
  width: 100%;
  margin: 0;
}

.moonshades-loot__media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center;
}

.moonshades-loot__steps {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-6);
  margin-top: var(--space-8);
}

.moonshades-loot__steps > * {
  min-width: 0;
}

.moonshades-loot-step {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  gap: var(--space-4);
  width: 100%;
  max-width: 32.5rem;
  padding: var(--space-5);
  border-left: 1px solid var(--color-border-bronze);
  background: rgb(233 225 204 / 44%);
}

.moonshades-loot-step > * {
  min-width: 0;
}

.moonshades-loot-step > div {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.moonshades-loot-step > div > * {
  margin: 0;
}

.moonshades-loot-step--one {
  grid-column: 1 / span 5;
}

.moonshades-loot-step--two {
  grid-column: 5 / span 5;
  background: var(--color-charcoal-surface);
  color: var(--color-stone-light);
}

.moonshades-loot-step--three {
  grid-column: 2 / span 5;
}

.moonshades-step-number {
  color: var(--color-bronze-oxidised);
  font-family: var(--font-heading);
  font-size: var(--text-h3);
  line-height: 1;
}

.moonshades-loot__maze {
  right: 4%;
  bottom: var(--space-6);
  width: 16rem;
}

.moonshades-workshop {
  padding-block: var(--space-10);
}

.moonshades-workshop__media {
  width: 100%;
  margin: 0 0 var(--space-7);
}

.moonshades-workshop__media img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center;
}

.moonshades-workshop__intro {
  width: min(100%, 47.5rem);
}

.moonshades-workshop__columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
  margin-top: var(--space-7);
}

.moonshades-workshop__columns > * {
  min-width: 0;
}

.moonshades-workshop-card {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  gap: var(--space-3);
  padding: var(--space-5);
  border-top: 1px solid var(--color-border-bronze);
}

.moonshades-workshop-card > * {
  min-width: 0;
  margin: 0;
}

.moonshades-arcane {
  padding-block: var(--space-9);
}

.moonshades-arcane__layout {
  display: grid;
  grid-template-columns: minmax(22.5rem, 4fr) minmax(0, 8fr);
  align-items: start;
  gap: var(--space-7);
}

.moonshades-arcane__layout > * {
  min-width: 0;
}

.moonshades-arcane__copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.moonshades-arcane__copy > * {
  min-width: 0;
  margin: 0;
}

.moonshades-arcane__interpretation {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: min(100%, 30rem);
  padding-left: var(--space-4);
  border-left: 1px solid var(--color-bronze-oxidised);
}

.moonshades-arcane__interpretation > * {
  margin: 0;
}

.moonshades-arcane__media {
  width: 100%;
  margin: 0;
}

.moonshades-arcane__media img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: 65% center;
}

.moonshades-arcane__maze {
  right: 5%;
  bottom: var(--space-5);
}

.moonshades-offline {
  padding-bottom: var(--space-10);
}

.moonshades-offline__media {
  width: 100%;
  margin: 0;
}

.moonshades-offline__media img {
  width: 100%;
  height: 21rem;
  object-fit: cover;
  object-position: center;
}

.moonshades-offline__content {
  padding-top: var(--space-8);
}

.moonshades-offline__fact {
  width: min(100%, 42.5rem);
}

.moonshades-offline__effects {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6);
  margin-top: var(--space-7);
}

.moonshades-offline__effects > * {
  min-width: 0;
}

.moonshades-offline-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  border-left: 1px solid var(--color-bronze-oxidised);
  background: var(--color-charcoal-surface);
}

.moonshades-offline-card > * {
  min-width: 0;
  margin: 0;
}

.moonshades-final {
  padding-block: var(--space-10);
}

.moonshades-final__profiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
  margin-top: var(--space-6);
}

.moonshades-final__profiles > * {
  min-width: 0;
}

.moonshades-profile {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  gap: var(--space-3);
  padding: var(--space-5);
  border: 1px solid var(--color-border-light);
  background: var(--color-parchment-light);
}

.moonshades-profile > * {
  min-width: 0;
  margin: 0;
}

.moonshades-profile__dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--radius-round);
  background: var(--color-amber-candle);
}

.moonshades-final__verdict {
  display: flex;
  flex-direction: column;
  width: min(100%, 42.5rem);
  gap: var(--space-4);
  margin: var(--space-8) auto 0;
  padding: var(--space-6);
  background: var(--color-charcoal-surface);
  color: var(--color-stone-light);
}

.moonshades-final__verdict > * {
  min-width: 0;
  margin: 0;
}

.moonshades-final__maze {
  right: 3%;
  bottom: var(--space-5);
}

@media (max-width: 62.5rem) {
  .moonshades-hero {
    min-height: 40rem;
  }

  .moonshades-hero__content {
    width: min(100% - 4rem, 35.625rem);
    margin-left: 2rem;
  }

  .moonshades-rhythm__layout,
  .moonshades-loot__intro-layout,
  .moonshades-arcane__layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .moonshades-rhythm__media {
    order: 2;
  }

  .moonshades-rhythm__copy {
    order: 1;
    width: min(100%, 43.75rem);
  }

  .moonshades-rhythm__marginalia {
    width: 100%;
    margin-left: 0;
  }

  .moonshades-observation__cards,
  .moonshades-workshop__columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .moonshades-observation-card--secret,
  .moonshades-workshop-card:nth-child(3) {
    grid-column: 1 / -1;
  }

  .moonshades-loot__intro {
    width: min(100%, 43.75rem);
  }

  .moonshades-loot__media {
    width: min(100%, 31rem);
  }

  .moonshades-loot__steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .moonshades-loot-step--one,
  .moonshades-loot-step--two,
  .moonshades-loot-step--three {
    grid-column: auto;
  }

  .moonshades-loot-step--three {
    grid-column: 1 / -1;
  }

  .moonshades-final__profiles {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 56.25rem) {
  .moonshades-verdict__voices,
  .moonshades-offline__effects,
  .moonshades-pve__caption-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .moonshades-pve__fact {
    width: min(100%, 30rem);
  }
}

@media (max-width: 51.25rem) {
  .moonshades-arcane__copy {
    width: min(100%, 35rem);
  }

  .moonshades-arcane__media {
    order: 2;
  }
}

@media (max-width: 47.5rem) {
  .moonshades-review .moonshades-maze-line {
    width: 11rem;
    max-width: 48vw;
    opacity: 0.42;
  }

  .moonshades-hero {
    min-height: 32.5rem;
  }

  .moonshades-hero__image {
    min-height: 32.5rem;
    object-position: 65% center;
  }

  .moonshades-hero__shade {
    background: linear-gradient(0deg, rgb(23 24 23 / 96%) 0%, rgb(23 24 23 / 78%) 54%, rgb(23 24 23 / 16%) 100%);
  }

  .moonshades-hero__content {
    align-self: end;
    width: calc(100% - 2.5rem);
    margin-left: 1.25rem;
    padding-block: var(--space-5) var(--space-6);
    gap: var(--space-3);
  }

  .moonshades-hero h1 {
    font-size: clamp(2.375rem, 10vw, 2.75rem);
  }

  .moonshades-hero__lead {
    font-size: var(--text-base);
    line-height: var(--leading-body);
  }

  .moonshades-hero__note {
    display: none;
  }

  .moonshades-hero__coordinates {
    align-self: start;
    justify-self: end;
    margin: var(--space-3) 1.25rem 0 0;
  }

  .moonshades-hero__maze {
    margin-bottom: 2rem;
  }

  .moonshades-verdict,
  .moonshades-rhythm,
  .moonshades-observation,
  .moonshades-pve,
  .moonshades-loot,
  .moonshades-workshop,
  .moonshades-final {
    padding-block: var(--space-8);
  }

  .moonshades-verdict__voices,
  .moonshades-observation__cards,
  .moonshades-workshop__columns,
  .moonshades-loot__intro-layout,
  .moonshades-loot__steps,
  .moonshades-offline__effects {
    grid-template-columns: minmax(0, 1fr);
  }

  .moonshades-observation-card--secret,
  .moonshades-workshop-card:nth-child(3),
  .moonshades-loot-step--three {
    grid-column: auto;
  }

  .moonshades-observation__banner img {
    height: 11rem;
  }

  .moonshades-observation-card--fact,
  .moonshades-observation-card--map,
  .moonshades-observation-card__body,
  .moonshades-editorial-card,
  .moonshades-workshop-card,
  .moonshades-offline-card,
  .moonshades-profile,
  .moonshades-loot-step {
    padding: var(--space-4);
  }

  .moonshades-pve__analysis,
  .moonshades-final__verdict {
    padding: var(--space-4);
  }

  .moonshades-loot__media {
    width: 100%;
  }

  .moonshades-loot-step {
    max-width: none;
  }

  .moonshades-workshop__media {
    margin-bottom: var(--space-6);
  }

  .moonshades-arcane {
    padding-block: var(--space-8);
  }

  .moonshades-offline {
    padding-bottom: var(--space-8);
  }

  .moonshades-offline__media img {
    height: 14rem;
  }

  .moonshades-final__verdict {
    width: 100%;
    margin-top: var(--space-7);
  }
}

@media (max-width: 28rem) {
  .moonshades-review .moonshades-play-badge {
    width: 100%;
  }

  .moonshades-hero__coordinates {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .moonshades-review .moonshades-maze-line path {
    stroke-dashoffset: 0;
    transition: none;
  }

  .moonshades-review .moonshades-maze-line circle {
    opacity: 1;
    transition: none;
  }
}