.home-page {
  background: var(--color-ash-canvas);
  overflow: hidden;
}

.home-page :is(h1, h2, h3, p, span, a) {
  overflow-wrap: anywhere;
}

.home-hero {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 42.5rem;
  align-items: stretch;
  isolation: isolate;
  overflow: hidden;
  background: var(--color-ash-canvas);
}

.home-hero__image,
.home-hero__veil,
.home-hero__embers {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.home-hero__image {
  z-index: -3;
  object-fit: cover;
  object-position: center;
  filter: saturate(.7) brightness(.72);
}

.home-hero__veil {
  z-index: -2;
  background: linear-gradient(90deg, rgba(11, 12, 16, .25) 0%, rgba(11, 12, 16, .28) 42%, rgba(11, 12, 16, .78) 68%, rgba(11, 12, 16, .96) 100%), linear-gradient(0deg, rgba(11, 12, 16, .78), transparent 55%);
}

.home-hero__embers {
  z-index: -1;
  pointer-events: none;
}

.home-hero__embers > span {
  position: absolute;
  left: var(--ember-left);
  bottom: var(--ember-bottom);
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--color-ember-scarlet);
  box-shadow: 0 0 8px rgba(255, 42, 75, .55);
  opacity: var(--ember-opacity);
  animation: home-ember-rise var(--ember-duration) ease-in-out infinite alternate;
}

@keyframes home-ember-rise {
  to { transform: translateY(-22px); opacity: 0; }
}

.home-hero__container {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: end;
  padding-block: var(--space-8);
}

.home-hero__plaque {
  grid-column: 8 / 13;
  display: flex;
  min-width: 0;
  max-width: 34.375rem;
  flex-direction: column;
  gap: var(--space-5);
  justify-self: end;
  border: var(--border-default);
  border-top: 2px solid var(--color-ember-scarlet);
  padding: var(--space-6);
  background: rgba(34, 28, 43, .9);
  box-shadow: inset 0 1px 0 rgba(226, 217, 243, .08), var(--shadow-raised);
  backdrop-filter: blur(8px);
}

.home-hero__intro,
.home-hero__stores {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-3);
}

.home-hero__intro :is(h1, p),
.home-hero__stores p,
.home-hero__stores .tag {
  margin: 0;
}

.home-hero__intro h1 { max-width: 16ch; }
.home-hero__intro .lead { max-width: 52ch; }

.home-hero__actions {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.home-hero__actions > * { min-width: 0; }
.home-hero__store-note { color: var(--color-muted-text); font-size: var(--text-small); line-height: 1.45; }

.home-store-badges {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}

.home-store-badge {
  display: flex;
  min-width: 0;
  min-height: 2.75rem;
  flex-direction: column;
  justify-content: center;
  border: 1px solid #746c7a;
  border-radius: var(--radius-sm);
  padding: .35rem .65rem;
  background: #090a0d;
  color: #fff;
  line-height: 1.05;
  text-decoration: none;
}

.home-store-badge:visited { color: #fff; }
.home-store-badge:hover { border-color: var(--color-spell-cyan); color: #fff; text-decoration: none; }
.home-store-badge span { font-size: .55rem; letter-spacing: .06em; }
.home-store-badge strong { font-size: .9rem; font-weight: 700; }

.home-map { background: linear-gradient(180deg, var(--color-ash-canvas), var(--color-violet-ash)); }
.home-map__grid {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: var(--space-6);
}
.home-map__grid > * { min-width: 0; }
.home-map__intro { display: flex; min-width: 0; flex-direction: column; gap: var(--space-3); }
.home-map__intro :is(h2, p) { margin: 0; }
.home-map__intro .lead { max-width: 58ch; }
.home-map__routes { display: grid; min-width: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.home-map__routes > * { min-width: 0; }

.home-route,
.home-small-card,
.home-relic-card,
.home-mosaic-card {
  position: relative;
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-3);
  border: var(--border-default);
  padding: var(--space-5);
  background: var(--color-basalt-panel);
  box-shadow: inset 0 1px 0 rgba(226, 217, 243, .045);
}

.home-route { color: var(--color-arcane-text); text-decoration: none; }
.home-route:visited { color: var(--color-arcane-text); }
.home-route::before,
.home-small-card::before,
.home-relic-card::before,
.home-mosaic-card::before { position: absolute; top: 0; left: 0; width: 100%; height: 3px; content: ""; }
.home-route--ember::before,
.home-small-card--ember::before,
.home-mosaic-card--guides::before,
.home-mosaic-card--builds::before { background: var(--color-ember-scarlet); }
.home-route--cyan::before,
.home-mosaic-card--arcana::before,
.home-mosaic-card--news::before { background: var(--color-spell-cyan); }
.home-route--violet::before { background: var(--color-rune-outline); }
.home-route h3,
.home-route p,
.home-small-card :is(h3, p),
.home-relic-card :is(h3, p),
.home-mosaic-card :is(h3, p) { margin: 0; }
.home-route p { max-width: 46ch; }
.home-route__meta { color: var(--color-muted-text); font-size: var(--text-meta); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.home-route__link,
.home-card-link { margin-top: auto; color: var(--color-spell-cyan); font-size: var(--text-small); font-weight: 700; text-decoration: underline; text-decoration-color: rgba(0, 240, 255, .42); text-underline-offset: .18em; }
.home-route:hover { border-color: var(--color-spell-cyan); box-shadow: inset 0 1px 0 rgba(226,217,243,.08), var(--shadow-cyan); }
.home-route--ember:hover { border-color: var(--color-ember-scarlet); box-shadow: inset 0 1px 0 rgba(226,217,243,.08), var(--shadow-ember); }

.home-start { background: var(--color-ash-canvas); }
.home-start__grid {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
  gap: var(--space-6);
  align-items: stretch;
}
.home-start__grid > * { min-width: 0; }
.home-start__content { display: flex; min-width: 0; flex-direction: column; gap: var(--space-5); padding: var(--space-6); }
.home-start__content :is(h2, h3, p, ol) { margin: 0; }
.home-start__content > p { max-width: 64ch; }
.home-start__questions { display: flex; min-width: 0; flex-direction: column; gap: var(--space-3); border-top: 1px solid var(--color-rune-outline); padding-top: var(--space-5); }
.home-start__questions ol { display: grid; gap: var(--space-3); padding-inline-start: var(--space-5); }
.home-start__questions li { padding-inline-start: var(--space-2); }
.home-start__questions li::marker { color: var(--color-relic-gold); font-family: var(--font-heading); font-weight: 700; }
.home-start__content .button { align-self: flex-start; }
.home-start__visual { position: relative; display: flex; min-width: 0; min-height: 100%; overflow: hidden; border: var(--border-default); background: var(--color-basalt-panel); color: var(--color-arcane-text); text-decoration: none; }
.home-start__visual:visited { color: var(--color-arcane-text); }
.home-start__visual:hover { border-color: var(--color-spell-cyan); box-shadow: var(--shadow-cyan); text-decoration: none; }
.home-start__visual img { width: 100%; min-width: 0; height: 100%; min-height: 36rem; object-fit: cover; object-position: center; }
.home-start__visual-copy { position: absolute; right: 0; bottom: 0; left: 0; display: flex; min-width: 0; flex-direction: column; gap: var(--space-3); padding: var(--space-5); background: linear-gradient(0deg, rgba(11, 12, 16, .98), rgba(11, 12, 16, .72)); }
.home-start__visual-copy strong { max-width: 30ch; font-family: var(--font-heading); font-size: 1.15rem; line-height: 1.25; }
.home-start__visual-copy > span:last-child { color: var(--color-spell-cyan); font-size: var(--text-small); font-weight: 700; }

.home-lab { background: var(--color-violet-ash); }
.home-lab__header { display: flex; min-width: 0; max-width: 58ch; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-6); }
.home-lab__header :is(h2, p) { margin: 0; }
.home-lab__grid { display: grid; min-width: 0; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-6); align-items: stretch; }
.home-lab__grid > * { min-width: 0; }
.home-arcana-card { position: relative; display: flex; min-width: 0; overflow: hidden; border: var(--border-default); background: var(--color-basalt-panel); color: var(--color-arcane-text); text-decoration: none; }
.home-arcana-card:visited { color: var(--color-arcane-text); }
.home-arcana-card:hover { border-color: var(--color-spell-cyan); box-shadow: var(--shadow-cyan); text-decoration: none; }
.home-arcana-card img { width: 100%; min-width: 0; min-height: 30rem; object-fit: cover; object-position: center; filter: saturate(.72) brightness(.76); }
.home-arcana-card__content { position: absolute; right: 0; bottom: 0; left: 0; display: flex; min-width: 0; flex-direction: column; gap: var(--space-3); padding: var(--space-6); background: linear-gradient(0deg, rgba(11,12,16,.98), rgba(11,12,16,.62)); }
.home-arcana-card__content h3 { margin: 0; }
.home-arcana-card__content > span:not(.meta):not(.home-card-link) { max-width: 55ch; }
.home-lab__stack { display: flex; min-width: 0; flex-direction: column; gap: var(--space-6); }
.home-lab__stack > * { min-width: 0; flex: 1 1 0; }
.home-small-card--quote { border-left: 3px solid var(--color-spell-cyan); }

.home-journal { background: var(--color-ash-canvas); }
.home-journal__surface { display: flex; min-width: 0; flex-direction: column; gap: var(--space-6); padding: var(--space-6); }
.home-journal__header { display: grid; min-width: 0; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--space-5); align-items: end; }
.home-journal__header > * { min-width: 0; }
.home-journal__header > div { display: flex; min-width: 0; max-width: 54ch; flex-direction: column; gap: var(--space-3); }
.home-journal__header :is(h2, p) { margin: 0; }
.home-journal__header .button { justify-self: end; }
.home-journal__rows { display: flex; min-width: 0; flex-direction: column; border-top: 1px solid var(--color-rune-outline); }
.home-news-row { display: grid; min-width: 0; grid-template-columns: minmax(0, 2fr) minmax(0, 6fr) minmax(0, 4fr); gap: var(--space-4); align-items: center; border-bottom: 1px solid var(--color-rune-outline); padding: var(--space-5) 0; color: var(--color-arcane-text); text-decoration: none; }
.home-news-row > * { min-width: 0; }
.home-news-row:visited { color: var(--color-arcane-text); }
.home-news-row:hover { border-left: 3px solid var(--color-spell-cyan); padding-left: var(--space-3); color: var(--color-arcane-text); text-decoration: none; }
.home-news-row h3,
.home-news-row p { margin: 0; }
.home-news-row p { max-width: 60ch; }
.home-news-row .home-card-link { margin-top: 0; justify-self: end; }

.home-relics { background: linear-gradient(180deg, var(--color-violet-ash), var(--color-ash-canvas)); }
.home-relics__header { display: grid; min-width: 0; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-5); align-items: end; margin-bottom: var(--space-6); }
.home-relics__header > * { min-width: 0; }
.home-relics__header > div { display: flex; min-width: 0; max-width: 60ch; flex-direction: column; gap: var(--space-3); }
.home-relics__header :is(h2, p) { margin: 0; }
.home-relics__header .button { justify-self: end; }
.home-relics__grid { display: grid; min-width: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
.home-relics__grid > * { min-width: 0; }
.home-relic-card { min-height: 11.5rem; }
.home-relic-card::before { background: var(--color-relic-gold); }
.home-relic-card:hover { border-color: rgba(255,183,3,.72); box-shadow: 0 0 0.75rem rgba(255,183,3,.12); }

.home-boss-strip { border-block: 1px solid rgba(230,57,70,.46); background: var(--color-violet-ash); }
.home-boss-strip__grid { display: grid; min-width: 0; grid-template-columns: minmax(0, 8fr) minmax(16.25rem, 4fr); gap: var(--space-6); align-items: center; padding-block: var(--space-7); }
.home-boss-strip__grid > * { min-width: 0; }
.home-boss-strip__grid > div:first-child { display: flex; min-width: 0; max-width: 62ch; flex-direction: column; gap: var(--space-3); }
.home-boss-strip h2,
.home-boss-strip p { margin: 0; }
.home-boss-strip .eyebrow { color: var(--color-boss-red); }
.home-boss-strip__action { display: flex; min-width: 0; flex-direction: column; gap: var(--space-3); }

.home-mosaic { background: var(--color-ash-canvas); }
.home-mosaic__header { display: flex; min-width: 0; max-width: 58ch; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-6); }
.home-mosaic__header :is(h2, p) { margin: 0; }
.home-mosaic__note { color: var(--color-muted-text); font-size: var(--text-small); }
.home-mosaic__grid { display: grid; min-width: 0; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(13rem, auto)) minmax(10rem, auto); gap: var(--space-5); }
.home-mosaic__grid > * { min-width: 0; }
.home-mosaic-card { color: var(--color-arcane-text); text-decoration: none; }
.home-mosaic-card:visited { color: var(--color-arcane-text); }
.home-mosaic-card:hover { border-color: var(--color-spell-cyan); box-shadow: var(--shadow-cyan); color: var(--color-arcane-text); text-decoration: none; }
.home-mosaic-card--guides { grid-column: 1 / 7; grid-row: 1 / 3; }
.home-mosaic-card--arcana { position: relative; grid-column: 7 / 10; grid-row: 1 / 3; overflow: hidden; padding: 0; }
.home-mosaic-card--arcana img { width: 100%; height: 100%; min-height: 100%; object-fit: cover; filter: saturate(.68) brightness(.72); }
.home-mosaic-card__overlay { position: absolute; inset: auto 0 0; display: flex; min-width: 0; flex-direction: column; gap: var(--space-3); padding: var(--space-5); background: linear-gradient(0deg, rgba(11,12,16,.98), rgba(11,12,16,.58)); }
.home-mosaic-card__overlay h3 { margin: 0; }
.home-mosaic-card--builds { grid-column: 10 / 13; grid-row: 1 / 3; }
.home-mosaic-card--bosses { grid-column: 1 / 7; grid-row: 3; border-left: 3px solid var(--color-boss-red); }
.home-mosaic-card--news { grid-column: 7 / 13; grid-row: 3; }

.home-status { background: var(--color-ash-canvas); }
.home-status__note { position: relative; display: flex; min-width: 0; max-width: 47.5rem; flex-direction: column; gap: var(--space-4); margin-inline: auto; padding: var(--space-6); }
.home-status__note :is(h2, p) { margin: 0; }
.home-status__note p { max-width: 66ch; }
.home-status__note::after { position: absolute; top: var(--space-3); right: var(--space-3); width: 1.5rem; height: 1.5rem; border-top: 1px solid var(--color-rune-outline); border-right: 1px solid var(--color-rune-outline); content: ""; }

@media (max-width: 61.25rem) {
  .home-hero__plaque { grid-column: 5 / 13; }
  .home-hero__veil { background: linear-gradient(90deg, rgba(11,12,16,.42), rgba(11,12,16,.76) 55%, rgba(11,12,16,.96)), linear-gradient(0deg, rgba(11,12,16,.8), transparent 60%); }
  .home-map__grid { grid-template-columns: 1fr; }
  .home-map__routes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .home-start__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .home-lab__grid { grid-template-columns: 1fr; }
  .home-lab__stack { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-arcana-card img { min-height: 25rem; }
  .home-mosaic__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; }
  .home-mosaic-card--guides,
  .home-mosaic-card--arcana,
  .home-mosaic-card--builds,
  .home-mosaic-card--bosses,
  .home-mosaic-card--news { grid-column: auto; grid-row: auto; min-height: 17rem; }
}

@media (max-width: 56.25rem) {
  .home-hero { min-height: 39rem; }
  .home-hero__container { align-items: end; }
  .home-hero__plaque { grid-column: 1 / 13; justify-self: stretch; max-width: none; }
  .home-start__grid { grid-template-columns: 1fr; }
  .home-start__visual { min-height: 17.5rem; }
  .home-start__visual img { min-height: 17.5rem; height: 17.5rem; aspect-ratio: 3 / 2; }
  .home-journal__header,
  .home-relics__header { grid-template-columns: 1fr; }
  .home-journal__header .button,
  .home-relics__header .button { justify-self: start; }
  .home-news-row { grid-template-columns: minmax(0, 2fr) minmax(0, 7fr) minmax(0, 3fr); }
  .home-relics__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-relics__grid > :last-child { grid-column: 1 / 3; }
  .home-boss-strip__grid { grid-template-columns: 1fr; }
  .home-boss-strip__action { max-width: 22rem; }
}

@media (max-width: 45rem) {
  .home-hero { min-height: 38.75rem; }
  .home-hero__image { object-position: 42% center; }
  .home-hero__veil { background: linear-gradient(0deg, rgba(11,12,16,.98) 0%, rgba(11,12,16,.85) 45%, rgba(11,12,16,.35) 100%); }
  .home-hero__container { padding-block: var(--space-6); }
  .home-hero__plaque { gap: var(--space-4); padding: var(--space-5); }
  .home-hero__intro h1 { max-width: 17ch; font-size: clamp(2.25rem, 10vw, 2.65rem); }
  .home-hero__actions,
  .home-store-badges { grid-template-columns: 1fr; }
  .home-map__routes,
  .home-lab__stack,
  .home-relics__grid,
  .home-mosaic__grid { grid-template-columns: 1fr; }
  .home-map__routes > *,
  .home-lab__stack > *,
  .home-relics__grid > :last-child,
  .home-mosaic-card--guides,
  .home-mosaic-card--arcana,
  .home-mosaic-card--builds,
  .home-mosaic-card--bosses,
  .home-mosaic-card--news { grid-column: auto; }
  .home-map__grid,
  .home-start__grid,
  .home-lab__grid { gap: var(--space-4); }
  .home-start__content,
  .home-journal__surface,
  .home-status__note { padding: var(--space-5); }
  .home-start__content .button { width: 100%; }
  .home-journal__header { gap: var(--space-4); }
  .home-news-row { grid-template-columns: 1fr; gap: var(--space-3); padding: var(--space-5) 0; }
  .home-news-row .home-card-link { justify-self: start; }
  .home-news-row:hover { padding-left: var(--space-3); }
  .home-relics__header { gap: var(--space-4); }
  .home-relics__header .button,
  .home-boss-strip__action .button { width: 100%; }
  .home-boss-strip__grid { gap: var(--space-5); padding-block: var(--space-6); }
  .home-mosaic-card--arcana { min-height: 21rem; }
  .home-mosaic-card--arcana img { min-height: 21rem; }
}

@media (prefers-reduced-motion: reduce) {
  .home-hero__embers { display: none; }
}
