.mutropolis-screens-page {
  position: relative;
}

.mutropolis-screens-page::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  opacity: .045;
  background-image: repeating-linear-gradient(0deg, transparent 0 5px, rgb(48 40 34 / 40%) 6px 7px);
  pointer-events: none;
  content: "";
}

.mutropolis-screens-page section { scroll-margin-top: 6rem; }
.mutropolis-screens-page .terrain-label { margin-block-end: 0; }
.msp-section-heading { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; margin-block-end: var(--space-6); }
.msp-section-heading > * { min-width: 0; }
.msp-section-heading h2 { margin: 0; }

.msp-hero__layout { display: grid; grid-template-columns: minmax(430px, 46fr) minmax(460px, 54fr); gap: var(--space-7); align-items: start; }
.msp-hero__copy { display: flex; flex-direction: column; min-width: 0; gap: var(--space-4); }
.msp-hero__copy > * { min-width: 0; margin: 0; }
.msp-hero__copy h1 { max-width: 37rem; }
.msp-hero__copy .lead { max-width: 36.875rem; }
.msp-hero__copy > p:not(.lead) { max-width: 35rem; }
.msp-hero__actions { display: flex; min-width: 0; width: 100%; }
.msp-hero__actions > * { min-width: 0; }
.msp-hero__figure { min-width: 0; width: 100%; margin: 0; }
.msp-hero__guide { display: flex; flex-direction: column; grid-column: 1; min-width: 0; max-width: 35rem; gap: var(--space-3); margin: 0; }
.msp-hero__guide > * { min-width: 0; margin: 0; }
.msp-hero__guide h2 { font-size: var(--text-h3); }

.msp-media-link { display: block; width: 100%; overflow: hidden; border: 1px solid var(--color-line-ochre); background: var(--color-parchment-deep); color: inherit; text-decoration: none; }
.msp-media-link:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
.msp-media-link img { width: 100%; max-width: 100%; height: auto; }

.msp-inventory__intro { display: flex; flex-direction: column; min-width: 0; max-width: 42.5rem; gap: var(--space-3); margin-inline: auto; text-align: center; }
.msp-inventory__intro > * { min-width: 0; margin: 0; }
.msp-inventory__intro .terrain-label { justify-content: center; }
.msp-inventory__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); margin-block: var(--space-6); }
.msp-inventory__cards > * { min-width: 0; width: 100%; }
.msp-inventory-card { display: flex; flex-direction: column; min-width: 0; min-height: 100%; gap: var(--space-3); padding: var(--space-5); border: 1px solid var(--color-border); background: var(--color-parchment-deep); color: var(--color-deep-brown); text-decoration: underline; }
.msp-inventory-card > * { min-width: 0; margin: 0; }
.msp-inventory-card span { color: var(--color-line-ochre); font-family: var(--font-heading); font-size: 1.75rem; font-weight: 700; line-height: 1; }
.msp-inventory-card strong { color: var(--color-dark-plum); font-family: var(--font-heading); font-size: var(--text-h3); line-height: var(--line-heading); }
.msp-spoiler-notice { display: flex; flex-direction: column; min-width: 0; gap: var(--space-3); padding: var(--space-5); border: 1px solid var(--color-ochre); color: var(--color-ink-light); }
.msp-spoiler-notice > * { min-width: 0; margin: 0; }
.msp-spoiler-notice__label { color: var(--color-ochre); font-family: var(--font-heading); font-size: var(--text-meta); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.msp-spoiler-notice p { max-width: 45rem; }

.msp-media-note { display: grid; grid-template-columns: minmax(520px, 60fr) minmax(330px, 40fr); gap: clamp(var(--space-5), 4vw, var(--space-7)); align-items: start; margin-block-end: var(--space-8); }
.msp-media-note > * { min-width: 0; width: 100%; }
.msp-media-note--reverse .msp-media-note__figure { grid-column: 2; }
.msp-media-note--reverse .msp-media-note__copy { grid-column: 1; grid-row: 1; }
.msp-media-note__figure { margin: 0; }
.msp-media-note__copy { display: flex; flex-direction: column; min-width: 0; max-width: 25.625rem; gap: var(--space-3); padding-block-start: var(--space-4); }
.msp-media-note__copy > * { min-width: 0; margin: 0; }
.msp-media-note__copy h3 { font-size: var(--text-h3); }

.msp-character-row { display: grid; grid-template-columns: minmax(460px, 55fr) minmax(340px, 45fr); gap: var(--space-6); align-items: start; margin-block-end: var(--space-8); }
.msp-character-row > * { min-width: 0; width: 100%; }
.msp-character-row--reverse .msp-character-row__figure { grid-column: 2; }
.msp-character-row--reverse .msp-character-row__note { grid-column: 1; grid-row: 1; }
.msp-character-row__figure { margin: 0; }
.msp-character-row__note { display: flex; flex-direction: column; min-width: 0; max-width: 33.75rem; gap: var(--space-3); padding-block-start: var(--space-4); }
.msp-character-row__note.panel { padding: var(--space-5); }
.msp-character-row__note > * { min-width: 0; margin: 0; }
.msp-character-row__note h3 { font-size: var(--text-h3); }

.msp-puzzle__layout { display: grid; grid-template-columns: minmax(540px, 62fr) minmax(330px, 38fr); gap: var(--space-6); align-items: start; }
.msp-puzzle__layout > * { min-width: 0; width: 100%; }
.msp-puzzle__figure { margin: 0; }
.msp-puzzle__panel { display: flex; flex-direction: column; min-width: 0; gap: var(--space-4); }
.msp-puzzle__panel > * { min-width: 0; margin: 0; }
.msp-tips { display: flex; flex-direction: column; min-width: 0; gap: var(--space-4); padding-inline-start: 1.5rem; }
.msp-tips li { min-width: 0; }
.msp-inline-link { display: inline-flex; align-items: center; min-height: 2.75rem; width: fit-content; max-width: 100%; }

.msp-visual__figure { width: 100%; margin: 0; }
.msp-visual__intro { max-width: 45rem; margin: var(--space-5) auto 0; text-align: center; }
.msp-visual__intro p { margin: 0; }
.msp-layers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); margin-block-start: var(--space-6); }
.msp-layers > * { min-width: 0; width: 100%; padding-block-start: var(--space-4); border-top: 1px solid var(--color-line-ochre); }
.msp-layers h3 { margin-block: 0 var(--space-3); }
.msp-layers p { margin: 0; }

.msp-locked__inner { display: flex; flex-direction: column; min-width: 0; max-width: 45rem; gap: var(--space-4); margin-inline: auto; }
.msp-locked__inner > * { min-width: 0; margin: 0; }
.msp-spoiler-details { margin: 0; border: 1px solid var(--color-ochre); background: var(--color-dark-plum); color: var(--color-ink-light); }
.msp-spoiler-details summary { min-height: 2.75rem; color: var(--color-ink-light); }
.msp-spoiler-details__content { display: flex; flex-direction: column; min-width: 0; max-width: 42.5rem; gap: var(--space-4); margin: 0 var(--space-4) var(--space-4); }
.msp-spoiler-details__content > * { min-width: 0; margin: 0; }
.msp-spoiler-details__content strong { color: var(--color-ochre); letter-spacing: .08em; }
.msp-spoiler-details a { color: var(--color-ink-light); }

.msp-editorial__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
.msp-editorial__cards > * { min-width: 0; width: 100%; }
.msp-editorial-card { display: flex; flex-direction: column; min-height: 100%; gap: var(--space-4); }
.msp-editorial-card > * { min-width: 0; margin: 0; }
.msp-editorial-card h3 { font-size: var(--text-h3); }

.msp-faq__inner { display: flex; flex-direction: column; min-width: 0; max-width: 51.25rem; gap: var(--space-4); margin-inline: auto; }
.msp-faq__inner > * { min-width: 0; margin: 0; }
.msp-faq__inner details { width: 100%; }
.msp-faq__inner summary { display: grid; grid-template-columns: 2rem minmax(0, 1fr); align-items: center; gap: var(--space-3); min-height: 3.25rem; }
.msp-faq__inner summary span { color: var(--color-line-ochre); font-family: var(--font-heading); font-size: var(--text-lead); }
.msp-faq__inner details > div { max-width: 42.5rem; }

.msp-next__panel { display: grid; grid-template-columns: minmax(460px, 68fr) minmax(250px, 32fr); gap: var(--space-6); align-items: center; padding: clamp(var(--space-5), 4vw, var(--space-7)); }
.msp-next__panel > * { min-width: 0; width: 100%; }
.msp-next__copy, .msp-next__cta { display: flex; flex-direction: column; min-width: 0; gap: var(--space-4); }
.msp-next__copy > *, .msp-next__cta > * { min-width: 0; margin: 0; }
.msp-next__copy > p { max-width: 34.375rem; }
.msp-next__links { display: flex; flex-wrap: wrap; min-width: 0; gap: var(--space-3); }
.msp-next__links > * { min-width: 0; }
.msp-next__cta { max-width: 17.5rem; justify-self: end; }
.msp-next__cta p { font-size: var(--text-small); line-height: var(--line-small); }
.msp-next__cta .button { width: 100%; min-height: 3rem; }
.msp-link-status { min-height: 1.4em; }

.msp-modal { width: min(100% - 2rem, 72rem); max-height: calc(100dvh - 2rem); padding: 0; border: 1px solid var(--color-ochre); background: var(--color-dark-plum); color: var(--color-ink-light); }
.msp-modal::backdrop { background: rgb(48 40 34 / 78%); }
.msp-modal__box { display: flex; flex-direction: column; min-width: 0; gap: var(--space-4); max-height: calc(100dvh - 2rem); padding: var(--space-4); overflow: auto; }
.msp-modal__toolbar, .msp-modal__controls { display: flex; flex-wrap: wrap; min-width: 0; gap: var(--space-3); align-items: center; justify-content: space-between; }
.msp-modal__toolbar > *, .msp-modal__controls > * { min-width: 0; }
.msp-modal__toolbar p, .msp-modal__caption { margin: 0; }
.msp-modal__image { width: 100%; max-height: 70dvh; object-fit: contain; }
.msp-modal__caption { max-width: 45rem; }
.msp-modal__close { min-height: 2.75rem; }

@media (max-width: 63.99rem) {
  .msp-inventory__cards, .msp-editorial__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .msp-inventory__cards > :last-child, .msp-editorial__cards > :last-child { grid-column: 1 / -1; }
}

@media (max-width: 59.99rem) {
  .msp-hero__layout, .msp-media-note, .msp-character-row, .msp-puzzle__layout { grid-template-columns: minmax(0, 1fr); }
  .msp-hero__figure, .msp-hero__guide, .msp-media-note--reverse .msp-media-note__figure, .msp-media-note--reverse .msp-media-note__copy, .msp-character-row--reverse .msp-character-row__figure, .msp-character-row--reverse .msp-character-row__note { grid-column: auto; grid-row: auto; }
  .msp-hero__guide { max-width: 100%; }
  .msp-media-note__copy, .msp-character-row__note { max-width: 38.75rem; padding-block-start: 0; }
  .msp-media-note--reverse .msp-media-note__figure, .msp-character-row--reverse .msp-character-row__figure { order: 0; }
  .msp-media-note--reverse .msp-media-note__copy, .msp-character-row--reverse .msp-character-row__note { order: 1; }
  .msp-next__panel { grid-template-columns: minmax(0, 1fr); }
  .msp-next__cta { justify-self: start; max-width: 100%; }
}

@media (max-width: 56.24rem) {
  .msp-layers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .msp-layers > :last-child { grid-column: 1 / -1; }
}

@media (max-width: 43.74rem) {
  .msp-inventory__cards, .msp-editorial__cards, .msp-layers { grid-template-columns: minmax(0, 1fr); }
  .msp-inventory__cards > :last-child, .msp-editorial__cards > :last-child, .msp-layers > :last-child { grid-column: auto; }
  .msp-inventory__intro, .msp-visual__intro { margin-inline: 0; text-align: left; }
  .msp-inventory__intro .terrain-label { justify-content: flex-start; }
}

@media (max-width: 47.99rem) {
  .msp-hero__layout { gap: var(--space-5); }
  .msp-hero__copy h1 { font-size: clamp(2.25rem, 9vw, 2.625rem); }
  .msp-hero__actions .button { min-height: 2.75rem; }
  .msp-hero__guide { padding: var(--space-4); }
  .msp-media-note, .msp-character-row { gap: var(--space-4); margin-block-end: var(--space-7); }
  .msp-character-row__note.panel { padding: var(--space-4); }
  .msp-puzzle__panel { padding: var(--space-4); }
  .msp-visual__intro { margin-block-start: var(--space-4); }
  .msp-next__panel { padding: var(--space-5); }
  .msp-next__cta .button { min-height: 3rem; }
}

@media (prefers-reduced-motion: reduce) {
  .msp-modal, .msp-spoiler-details { transition-duration: 0ms; }
}