.lore-page {
  overflow: hidden;
}

.lore-page .artefact-panel::before {
  position: absolute;
  top: 0;
  right: 0;
  width: 22px;
  height: 22px;
  border-top: 1px solid var(--color-amber);
  border-right: 1px solid var(--color-amber);
  content: "";
  pointer-events: none;
}

.lore-vault {
  padding-top: var(--space-8);
  background: radial-gradient(circle at 80% 45%, rgb(89 71 122 / 0.22), transparent 31%), var(--color-abyss);
}

.lore-vault__grid,
.lore-investigation__feature,
.lore-shelf__grid,
.lore-paths__grid,
.lore-threads__grid,
.lore-method__grid,
.lore-archive__grid,
.lore-lantern__grid {
  display: grid;
  min-width: 0;
  gap: var(--space-5);
}

.lore-vault__grid > *,
.lore-investigation__feature > *,
.lore-shelf__grid > *,
.lore-paths__grid > *,
.lore-threads__grid > *,
.lore-method__grid > *,
.lore-archive__grid > *,
.lore-lantern__grid > * {
  min-width: 0;
}

.lore-vault__copy {
  display: flex;
  min-width: 0;
  align-items: center;
  padding: var(--space-6);
}

.lore-vault__copy-inner,
.lore-investigation__copy-inner,
.lore-next__panel > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-4);
}

.lore-vault__copy-inner > *,
.lore-investigation__copy-inner > *,
.lore-next__panel > div > * {
  margin: 0;
}

.lore-vault__copy h1 {
  max-width: 14ch;
}

.lore-vault__copy .lead {
  max-width: 62ch;
}

.lore-vault__image {
  width: 100%;
  min-width: 0;
  aspect-ratio: 16 / 9;
}

.lore-vault__image img {
  width: 100%;
  height: 100%;
  object-position: 58% center;
}

.lore-investigation__feature {
  align-items: center;
}

.lore-investigation__image {
  width: 100%;
  min-width: 0;
  aspect-ratio: 3 / 2;
}

.lore-investigation__image img {
  width: 100%;
  height: 100%;
  object-position: 30% center;
}

.lore-investigation__copy {
  z-index: 1;
  min-width: 0;
}

.lore-investigation__copy-inner {
  padding: var(--space-6);
}

.lore-investigation__copy h2 {
  max-width: 18ch;
}

.lore-investigation__summary {
  max-width: 66ch;
  color: var(--color-lilac-muted);
}

.lore-investigation__meta {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin: 0;
}

.lore-investigation__meta > div {
  display: flex;
  min-width: 0;
  gap: var(--space-1);
}

.lore-investigation__meta dt {
  color: var(--color-lilac);
  font-weight: 600;
}

.lore-investigation__meta dd {
  margin: 0;
}

.lore-investigation__lenses {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-width: 0;
  gap: var(--space-3);
  padding: var(--space-4);
  border: var(--border-frame);
}

.lore-investigation__lenses > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-1);
}

.lore-investigation__lenses span {
  color: var(--color-lilac-muted);
  font-size: var(--text-14);
  line-height: 1.43;
}

.lore-investigation__action,
.lore-card__body > span,
.lore-path > span,
.thread-entry__copy > span,
.archive-row__action,
.lantern-card > span {
  color: var(--color-amber);
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.lore-shelf__heading {
  display: flex;
  min-width: 0;
  justify-content: space-between;
  gap: var(--space-5);
  margin-bottom: var(--space-6);
}

.lore-shelf__heading > div {
  min-width: 0;
}

.lore-shelf__heading h2 {
  max-width: 20ch;
}

.lore-shelf__heading p:not(.chamber-marker) {
  max-width: 64ch;
  color: var(--color-lilac-muted);
}

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

.lore-card {
  min-width: 0;
}

.lore-card__link {
  display: flex;
  min-width: 0;
  height: 100%;
  flex-direction: column;
  color: inherit;
  text-decoration: none;
}

.lore-card__link:hover .lore-card__body > span,
.lore-card__link:focus-visible .lore-card__body > span,
.lore-path:hover > span,
.lore-path:focus-visible > span,
.thread-entry__link:hover .thread-entry__copy > span,
.thread-entry__link:focus-visible .thread-entry__copy > span,
.archive-row__link:hover .archive-row__action,
.archive-row__link:focus-visible .archive-row__action,
.lantern-card:hover > span,
.lantern-card:focus-visible > span {
  color: var(--color-amber-bright);
}

.lore-card__link img {
  width: 100%;
  min-width: 0;
}

.lore-card__index {
  position: absolute;
  z-index: 1;
  top: var(--space-3);
  right: var(--space-3);
  padding: var(--space-1) var(--space-2);
  background: var(--color-abyss);
  color: var(--color-amber);
  font-family: var(--font-heading);
  font-size: var(--text-12);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.lore-card__body {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
}

.lore-card__body > * {
  margin: 0;
}

.lore-card__body h3 {
  font-size: var(--text-24);
}

.lore-card__body p:not(.eyebrow):not(.meta) {
  max-width: 42ch;
  color: var(--color-lilac-muted);
}

.lore-card__body > span {
  margin-top: auto;
}

.lore-paths__intro {
  min-width: 0;
}

.lore-paths__intro h2,
.lore-paths__intro p:not(.chamber-marker) {
  max-width: 64ch;
}

.lore-paths__intro p:not(.chamber-marker) {
  color: var(--color-lilac-muted);
}

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

.lore-path {
  display: flex;
  min-width: 0;
  min-height: 100%;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  color: inherit;
  text-decoration: none;
}

.lore-path > * {
  margin: 0;
}

.lore-path__mark {
  color: var(--color-amber);
  font-family: var(--font-heading);
  font-size: var(--text-32);
  line-height: 1;
}

.lore-path h3 {
  font-size: var(--text-24);
}

.lore-path p:not(.eyebrow) {
  color: var(--color-lilac-muted);
}

.lore-path > span:last-child {
  margin-top: auto;
}

.lore-path--amber {
  border-color: var(--color-amber);
}

.lore-threads__premise h2,
.lore-threads__premise p:not(.chamber-marker) {
  max-width: 62ch;
}

.lore-threads__premise p:not(.chamber-marker) {
  color: var(--color-lilac-muted);
}

.lore-threads__rail {
  display: grid;
  min-width: 0;
  gap: var(--space-4);
  padding-left: var(--space-5);
  border-left: 2px solid var(--color-amber);
}

.thread-entry__link {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  min-width: 0;
  gap: var(--space-3);
  padding: var(--space-4);
  color: inherit;
  text-decoration: none;
}

.thread-entry__marker {
  grid-column: 1;
  grid-row: 1;
  width: 44px;
  min-width: 44px;
  height: 44px;
  padding-top: 9px;
  border: 1px solid var(--color-amber);
  color: var(--color-amber);
  font-family: var(--font-heading);
  font-weight: 800;
  line-height: 1;
  text-align: center;
}

.thread-entry__link img {
  grid-column: 2;
  width: 100%;
  min-width: 0;
  aspect-ratio: 16 / 9;
}

.thread-entry__copy {
  display: flex;
  grid-column: 1 / -1;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-2);
}

.thread-entry__copy > * {
  margin: 0;
}

.thread-entry__copy p:not(.eyebrow):not(.meta) {
  color: var(--color-lilac-muted);
}

.lore-method__lead h2,
.lore-method__lead p:not(.chamber-marker) {
  max-width: 66ch;
}

.lore-method__lead p:not(.chamber-marker) {
  color: var(--color-lilac-muted);
}

.lore-method__panels {
  display: grid;
  min-width: 0;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

.lore-method__panels > * {
  min-width: 0;
}

.lore-method__panel {
  display: flex;
  min-width: 0;
}

.lore-method__panel > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
}

.lore-method__panel > div > * {
  margin: 0;
}

.lore-method__number {
  color: var(--color-amber);
  font-family: var(--font-heading);
  font-size: var(--text-24);
  font-weight: 800;
}

.lore-method__panel p {
  color: var(--color-lilac-muted);
}

.lore-archive__lead h2,
.lore-archive__lead p:not(.chamber-marker) {
  max-width: 64ch;
}

.lore-archive__lead p:not(.chamber-marker) {
  color: var(--color-lilac-muted);
}

.lore-archive__list {
  display: grid;
  min-width: 0;
  gap: var(--space-4);
}

.archive-row__link {
  display: grid;
  min-width: 0;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: var(--space-4);
  padding: var(--space-4);
  color: inherit;
  text-decoration: none;
}

.archive-row__thumb {
  display: grid;
  width: 96px;
  min-width: 0;
  min-height: 96px;
  place-items: center;
  border: var(--border-frame);
  color: var(--color-amber);
  font-family: var(--font-heading);
  font-weight: 800;
}

.archive-row__copy {
  min-width: 0;
}

.archive-row__copy h3 {
  margin-bottom: var(--space-2);
  font-size: var(--text-24);
}

.archive-row__copy p:not(.eyebrow):not(.meta) {
  max-width: 60ch;
  color: var(--color-lilac-muted);
}

.archive-row__action {
  grid-column: 1 / -1;
}

.lore-lantern__note {
  display: flex;
  min-width: 0;
  align-items: center;
  padding: var(--space-5);
}

.lore-lantern__note > div {
  min-width: 0;
}

.lore-lantern__note h2,
.lore-lantern__note p:not(.chamber-marker) {
  max-width: 58ch;
}

.lore-lantern__note p:not(.chamber-marker) {
  color: var(--color-lilac-muted);
}

.lore-lantern__recommendations {
  display: grid;
  min-width: 0;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

.lantern-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  color: inherit;
  text-decoration: none;
}

.lantern-card > * {
  margin: 0;
}

.lantern-card h3 {
  font-size: var(--text-24);
}

.lantern-card p:not(.eyebrow):not(.meta) {
  color: var(--color-lilac-muted);
}

.lantern-card > span {
  margin-top: auto;
}

.lore-next {
  padding-block: var(--space-9);
}

.lore-next__panel {
  max-width: 680px;
  margin-inline: auto;
  border-top: 2px solid var(--color-amber);
}

.lore-next__panel > div {
  align-items: center;
  padding: var(--space-7);
  text-align: center;
}

.lore-next__panel h2 {
  max-width: 16ch;
}

.lore-next__panel p:not(.chamber-marker) {
  max-width: 50ch;
  color: var(--color-lilac-muted);
}

@media (min-width: 40rem) {
  .lore-method__panels,
  .lore-lantern__recommendations {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lore-method__panel:last-child {
    grid-column: 1 / -1;
  }
}

@media (min-width: 56.25rem) {
  .lore-paths__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .lore-archive__grid,
  .lore-lantern__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  }

  .archive-row__link {
    grid-template-columns: 140px minmax(0, 1fr) max-content;
    align-items: center;
  }

  .archive-row__thumb {
    width: 140px;
    min-height: 100px;
  }

  .archive-row__action {
    grid-column: 3;
  }
}

@media (min-width: 58.75rem) {
  .lore-threads__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  }
}

@media (min-width: 61.25rem) {
  .lore-vault__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    align-items: stretch;
  }

  .lore-vault__image {
    align-self: center;
  }

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

@media (min-width: 65.625rem) {
  .lore-investigation__feature {
    grid-template-columns: minmax(0, 7fr) minmax(360px, 5fr);
    gap: 0;
  }

  .lore-investigation__copy {
    margin-left: calc(var(--space-5) * -1);
  }
}

@media (min-width: 75rem) {
  .lore-vault__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--space-5);
  }

  .lore-vault__copy {
    grid-column: 1 / span 5;
  }

  .lore-vault__image {
    grid-column: 7 / span 6;
  }

  .lore-shelf__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--space-5);
  }

  .lore-card--wide {
    grid-column: span 4;
  }

  .lore-card--portrait {
    grid-column: span 2;
  }

  .lore-card--portrait .panel-image--portrait {
    aspect-ratio: 4 / 5;
  }

  .lore-method__grid {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  }

  .lore-method__panels {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .lore-method__panel:last-child {
    grid-column: auto;
  }

  .lore-lantern__recommendations {
    grid-template-columns: minmax(0, 5fr) minmax(0, 3fr);
  }
}

@media (max-width: 39.9375rem) {
  .lore-vault {
    padding-top: var(--space-6);
  }

  .lore-vault__copy,
  .lore-investigation__copy-inner,
  .lore-next__panel > div {
    padding: var(--space-5);
  }

  .lore-vault__copy h1,
  .lore-investigation__copy h2,
  .lore-next__panel h2 {
    font-size: var(--text-32);
    line-height: 1.125;
  }

  .lore-vault__copy .lead,
  .lore-investigation__summary {
    font-size: var(--text-16);
    line-height: var(--leading-body);
  }

  .lore-investigation__lenses {
    grid-template-columns: 1fr;
  }

  .lore-card__body,
  .lore-path,
  .lore-method__panel > div,
  .lore-lantern__note,
  .lantern-card {
    padding: var(--space-4);
  }

  .lore-card--portrait .panel-image--portrait {
    aspect-ratio: 4 / 5;
  }

  .lore-threads__rail {
    padding-left: var(--space-3);
  }

  .thread-entry__link {
    grid-template-columns: 44px minmax(0, 1fr);
  }

  .lore-next {
    padding-block: var(--space-7);
  }

  .lore-next__panel > div .button {
    width: 100%;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .lore-page a.artefact-panel,
  .lore-page .artefact-panel > a {
    transition: border-color var(--transition-fast), transform var(--transition-fast);
  }

  .lore-page .artefact-panel:has(> a:hover) {
    border-color: var(--color-amber-bright);
    transform: translateY(-2px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .lore-page .artefact-panel:has(> a:hover) {
    border-color: var(--color-amber-bright);
  }
}