.universe-premise-page > .universe-theme-atmosphere,
.universe-premise-page > .universe-scroll-ink,
.universe-premise-page > .universe-watercolor-field,
.universe-premise-page > .universe-theme-grid,
.universe-premise-page > .universe-theme-noise,
.universe-premise-page > .universe-cinematic-depth,
.universe-premise-page > .universe-cinematic-vignette,
.universe-premise-page > .universe-cinematic-letterbox {
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  min-height: 100%;
  contain: paint;
  transform: none;
  will-change: auto;
}

.universe-premise-copy > :not(.universe-premise-inline-visual) {
  content-visibility: visible;
  contain-intrinsic-size: none;
}

.universe-premise-banner img,
.universe-premise-inline-visual img,
.universe-premise-banner video,
.universe-premise-inline-visual video {
  contain: paint;
}

/*
  The cinematic layers used to stretch over the complete article (often more
  than 16,000px tall). Keeping the same layers viewport-sized preserves their
  appearance while preventing enormous repaints during scroll.
*/
html[data-codex-universe-route='true'][data-codex-universe-detail='true']
  .universe-premise-page::before,
html[data-codex-universe-route='true'][data-codex-universe-detail='true']
  .universe-premise-page::after,
html[data-codex-universe-route='true'][data-codex-universe-detail='true']
  .universe-premise-page > .universe-theme-atmosphere,
html[data-codex-universe-route='true'][data-codex-universe-detail='true']
  .universe-premise-page > .universe-theme-grid,
html[data-codex-universe-route='true'][data-codex-universe-detail='true']
  .universe-premise-page > .universe-theme-noise,
html[data-codex-universe-route='true'][data-codex-universe-detail='true']
  .universe-premise-page > .universe-cinematic-depth,
html[data-codex-universe-route='true'][data-codex-universe-detail='true']
  .universe-premise-page > .universe-cinematic-vignette,
html[data-codex-universe-route='true'][data-codex-universe-detail='true']
  .universe-premise-page > .universe-cinematic-letterbox {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  min-height: 0 !important;
  max-height: 100dvh !important;
  contain: strict !important;
  pointer-events: none !important;
}

/* Background-position animation repainted the full 16k article every frame. */
html[data-codex-universe-route='true'][data-codex-universe-detail='true'][data-codex-universe-motion='full']
  .universe-premise-page,
html[data-codex-universe-route='true'][data-codex-universe-detail='true'][data-codex-universe-motion='ambient']
  .universe-premise-page {
  animation: none !important;
  background-position: 50% 0%, 86% 18%, 14% 58%, 50% 50% !important;
}

/* Avoid reserving a GPU texture for every off-screen article image. */
html[data-codex-universe-route='true'][data-codex-universe-detail='true']
  .universe-premise-copy img,
html[data-codex-universe-route='true'][data-codex-universe-detail='true']
  .universe-premise-copy video {
  will-change: auto !important;
}

/*
  Stable rendering path for touch devices and narrower laptops/tablets.
  Colors, gradients, imagery and layout stay intact; only continuous motion,
  blend passes and pre-promoted off-screen layers are removed.
*/
@media (max-width: 1100px), (pointer: coarse), (prefers-reduced-motion: reduce) {
  /*
    The carousel used to interpolate CSS filters over all seven large cards
    for 850ms. The final brightness/saturation values are preserved, while
    the compositor now animates only geometry and opacity.
  */
  html[data-codex-universe-route='true']:not([data-codex-universe-detail='true'])
    .universe-card-stage > button:has(.universe-card-frame) {
    transition-property: transform, opacity !important;
    backface-visibility: hidden;
  }

  html[data-codex-universe-route='true']:not([data-codex-universe-detail='true'])
    .universe-card-frame {
    transition-property: none !important;
    backface-visibility: hidden;
  }

  html[data-codex-universe-route='true'][data-codex-universe-detail='true'] .universe-premise-page,
  html[data-codex-universe-route='true'][data-codex-universe-detail='true'] .universe-premise-page::before,
  html[data-codex-universe-route='true'][data-codex-universe-detail='true'] .universe-premise-page::after,
  html[data-codex-universe-route='true'][data-codex-universe-detail='true'] .universe-theme-atmosphere,
  html[data-codex-universe-route='true'][data-codex-universe-detail='true'] .universe-theme-atmosphere::before,
  html[data-codex-universe-route='true'][data-codex-universe-detail='true'] .universe-theme-grid,
  html[data-codex-universe-route='true'][data-codex-universe-detail='true'] .universe-theme-noise,
  html[data-codex-universe-route='true'][data-codex-universe-detail='true'] .universe-cinematic-depth,
  html[data-codex-universe-route='true'][data-codex-universe-detail='true'] .universe-cinematic-depth::before,
  html[data-codex-universe-route='true'][data-codex-universe-detail='true'] .universe-cinematic-depth::after,
  html[data-codex-universe-route='true'][data-codex-universe-detail='true'] .universe-cinematic-vignette,
  html[data-codex-universe-route='true'][data-codex-universe-detail='true'] .universe-cinematic-letterbox {
    animation: none !important;
    transition: none !important;
    transform: none !important;
    filter: none !important;
    mix-blend-mode: normal !important;
    will-change: auto !important;
  }

  html[data-codex-universe-route='true'][data-codex-universe-detail='true'] .universe-premise-banner img,
  html[data-codex-universe-route='true'][data-codex-universe-detail='true'] .universe-premise-banner video,
  html[data-codex-universe-route='true'][data-codex-universe-detail='true'] .universe-premise-inline-visual img,
  html[data-codex-universe-route='true'][data-codex-universe-detail='true'] .universe-premise-inline-visual video {
    animation: none !important;
    transition: none !important;
    transform: none !important;
    will-change: auto !important;
  }

  html[data-codex-universe-route='true'][data-codex-universe-detail='true'] .universe-premise-text-panel::after {
    animation: none !important;
    filter: none !important;
    will-change: auto !important;
  }

  html[data-codex-universe-route='true'][data-codex-universe-detail='true'] :is(
      .universe-theme-back,
      .universe-theme-secondary,
      .universe-theme-pill,
      .soundtrack-toggle-button,
      .soundtrack-control-drawer
    ) {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}

/*
  Hero seam fix (every theme page).
  The hero image fills its banner with a hard rectangular bottom edge, so it
  met the themed page background as a visible horizontal color seam right at
  the top of each theme page. Fade the bottom of the hero into the page's own
  theme background colour so the transition is seamless. The colour is taken
  from --theme-bg, so it stays correct for Echo Valley, Sala Branca, P.O.R.T.A.L,
  Eclipse, Vazio, O Abismo and Entidades without per-theme code.
*/
html[data-codex-universe-route='true'][data-codex-universe-detail='true']
  .universe-premise-banner {
  position: relative;
}

html[data-codex-universe-route='true'][data-codex-universe-detail='true']
  .universe-premise-banner::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 45%;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    color-mix(in srgb, var(--theme-bg, #050b08) 55%, transparent) 62%,
    var(--theme-bg, #050b08) 100%
  );
  pointer-events: none;
  z-index: 6;
}

/* Fallback for engines without color-mix(): a plain transparent->bg fade. */
@supports not (background: color-mix(in srgb, #000, #fff)) {
  html[data-codex-universe-route='true'][data-codex-universe-detail='true']
    .universe-premise-banner::after {
    background: linear-gradient(to bottom, transparent, var(--theme-bg, #050b08));
  }
}

/*
  Consistent hero contrast for all seven universe themes.
  The title vignette previously inherited the complete article height, which
  produced broad light/dark bands through long pages. Keep it inside the hero.
*/
html[data-codex-universe-route='true'][data-codex-universe-detail='true']
  .universe-premise-text-panel::after {
  top: 0 !important;
  right: auto !important;
  bottom: auto !important;
  left: 50% !important;
  width: min(100vw, 68rem) !important;
  height: clamp(40rem, 78svh, 58rem) !important;
  transform: translateX(-50%) !important;
  background: radial-gradient(
    ellipse at center,
    rgba(0, 0, 0, 0.56) 0%,
    rgba(0, 0, 0, 0.24) 43%,
    transparent 74%
  ) !important;
  opacity: 0.72 !important;
  pointer-events: none !important;
}

html[data-codex-universe-route='true'][data-codex-universe-detail='true']
  .universe-premise-banner :is(img, picture > img, video) {
  filter: saturate(0.9) contrast(1.05) brightness(0.84) !important;
}

html[data-codex-universe-route='true'][data-codex-universe-detail='true']
  .universe-premise-banner .universe-premise-media-vignette {
  background:
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.38) 0%,
      rgba(0, 0, 0, 0.08) 34%,
      rgba(0, 0, 0, 0.17) 68%,
      rgba(0, 0, 0, 0.58) 100%
    ),
    radial-gradient(
      ellipse at center,
      transparent 38%,
      rgba(0, 0, 0, 0.12) 68%,
      rgba(0, 0, 0, 0.42) 100%
    ) !important;
}

html[data-codex-universe-route='true'][data-codex-universe-detail='true']
  .universe-premise-banner::after {
  top: 0 !important;
  height: 100% !important;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.08) 0%,
    transparent 42%,
    color-mix(in srgb, var(--theme-bg, #050b08) 18%, transparent) 72%,
    var(--theme-bg, #050b08) 100%
  ) !important;
}

/* True 16:9 universe heroes on phones and tablets. */
@media (max-width: 1100px), (pointer: coarse) {
  html[data-codex-universe-route='true'][data-codex-universe-detail='true']
    .universe-premise-banner {
    width: 100vw !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: 16 / 9 !important;
  }

  html[data-codex-universe-route='true'][data-codex-universe-detail='true']
    .universe-premise-text-panel > div:first-child {
    width: 100vw !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: 16 / 9 !important;
    padding: clamp(5rem, 10vw, 7rem) clamp(1rem, 5vw, 3rem)
      clamp(1.5rem, 4vw, 2.5rem) !important;
  }

  html[data-codex-universe-route='true'][data-codex-universe-detail='true']
    .universe-premise-text-panel::after {
    width: 100vw !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
    filter: none !important;
  }
}

@media (max-width: 767px) {
  html[data-codex-universe-route='true'][data-codex-universe-detail='true']
    .universe-premise-page > header {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 0.55rem !important;
    padding: 0.65rem 0.7rem 2.4rem !important;
  }

  html[data-codex-universe-route='true'][data-codex-universe-detail='true']
    .universe-premise-page > header > div:first-child {
    min-width: 0 !important;
    gap: 0.55rem !important;
  }

  html[data-codex-universe-route='true'][data-codex-universe-detail='true']
    .universe-premise-page > header > div:last-child {
    flex: 0 0 auto !important;
  }

  html[data-codex-universe-route='true'][data-codex-universe-detail='true']
    .universe-premise-page > header .universe-theme-status {
    display: none !important;
  }

  html[data-codex-universe-route='true'][data-codex-universe-detail='true']
    .universe-premise-page > header .universe-theme-back {
    height: 2.25rem !important;
    padding: 0 0.65rem !important;
    gap: 0.4rem !important;
    font-size: 0.58rem !important;
  }

  html[data-codex-universe-route='true'][data-codex-universe-detail='true']
    .universe-premise-page > header .universe-theme-secondary {
    width: auto !important;
    max-width: 7.4rem !important;
    padding: 0.65rem 0.7rem !important;
    font-size: 0.52rem !important;
    line-height: 1.2 !important;
  }

  html[data-codex-universe-route='true'][data-codex-universe-detail='true']
    .universe-premise-page > header > div:first-child p:last-child {
    display: none !important;
  }

  html[data-codex-universe-route='true'][data-codex-universe-detail='true']
    .universe-premise-text-panel > div:first-child {
    padding: 3.8rem 0.85rem 0.8rem !important;
  }

  html[data-codex-universe-route='true'][data-codex-universe-detail='true']
    .universe-premise-page [data-admin-text-key^='universe-entry-title:'] {
    max-width: calc(100vw - 1.5rem) !important;
    font-size: clamp(2.15rem, 11vw, 3.75rem) !important;
    line-height: 0.9 !important;
  }

  html[data-codex-universe-route='true'][data-codex-universe-detail='true']
    .universe-premise-page [data-admin-text-key^='universe-entry-summary:'] {
    max-width: calc(100vw - 2rem) !important;
    margin-top: 0.65rem !important;
    font-size: 0.8rem !important;
    line-height: 1.35 !important;
  }

  html[data-codex-universe-route='true'][data-codex-universe-detail='true']
    .universe-premise-copy {
    margin-top: clamp(2.75rem, 9vw, 3.8rem) !important;
  }
}

/*
  React can swap a card page one frame before data-codex-universe-detail is
  refreshed. These structural selectors keep the same correction active in
  that frame and avoid a square flash or a mismatched title panel.
*/
html[data-codex-universe-route='true'] .universe-premise-page
  .universe-premise-text-panel::after {
  top: 0 !important;
  right: auto !important;
  bottom: auto !important;
  left: 50% !important;
  width: min(100vw, 68rem) !important;
  height: clamp(40rem, 78svh, 58rem) !important;
  transform: translateX(-50%) !important;
  background: radial-gradient(
    ellipse at center,
    rgba(0, 0, 0, 0.56) 0%,
    rgba(0, 0, 0, 0.24) 43%,
    transparent 74%
  ) !important;
  opacity: 0.72 !important;
  pointer-events: none !important;
}

html[data-codex-universe-route='true'] .universe-premise-page
  .universe-premise-banner :is(img, picture > img, video) {
  filter: saturate(0.9) contrast(1.05) brightness(0.84) !important;
}

html[data-codex-universe-route='true'] .universe-premise-page
  .universe-premise-banner .universe-premise-media-vignette {
  background:
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.38) 0%,
      rgba(0, 0, 0, 0.08) 34%,
      rgba(0, 0, 0, 0.17) 68%,
      rgba(0, 0, 0, 0.58) 100%
    ),
    radial-gradient(
      ellipse at center,
      transparent 38%,
      rgba(0, 0, 0, 0.12) 68%,
      rgba(0, 0, 0, 0.42) 100%
    ) !important;
}

html[data-codex-universe-route='true'] .universe-premise-page
  .universe-premise-banner::after {
  top: 0 !important;
  height: 100% !important;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.08) 0%,
    transparent 42%,
    color-mix(in srgb, var(--theme-bg, #050b08) 18%, transparent) 72%,
    var(--theme-bg, #050b08) 100%
  ) !important;
}

@media (max-width: 1100px), (pointer: coarse) {
  html[data-codex-universe-route='true'] .universe-premise-page
    .universe-premise-banner,
  html[data-codex-universe-route='true'] .universe-premise-page
    .universe-premise-text-panel > div:first-child,
  html[data-codex-universe-route='true'] .universe-premise-page
    .universe-premise-text-panel::after {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: 16 / 9 !important;
  }

  html[data-codex-universe-route='true'] .universe-premise-page
    .universe-premise-text-panel > div:first-child {
    width: 100% !important;
    max-width: none !important;
    padding: clamp(5rem, 10vw, 7rem) clamp(1rem, 5vw, 3rem)
      clamp(1.5rem, 4vw, 2.5rem) !important;
  }

  html[data-codex-universe-route='true'] .universe-premise-page
    .universe-premise-text-panel::after {
    width: 100% !important;
    filter: none !important;
  }
}

@media (max-width: 767px) {
  html[data-codex-universe-route='true'] .universe-premise-page > header {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 0.55rem !important;
    padding: 0.65rem 0.7rem 2.4rem !important;
  }

  html[data-codex-universe-route='true'] .universe-premise-page > header > div:first-child {
    min-width: 0 !important;
    width: auto !important;
    flex: 1 1 auto !important;
    gap: 0.55rem !important;
  }

  html[data-codex-universe-route='true'] .universe-premise-page > header > div:last-child {
    width: auto !important;
    max-width: 7.4rem !important;
    flex: 0 0 auto !important;
  }

  html[data-codex-universe-route='true'] .universe-premise-page > header
    .universe-theme-status {
    display: none !important;
  }

  html[data-codex-universe-route='true'] .universe-premise-page > header
    .universe-theme-back {
    height: 2.25rem !important;
    min-width: 5.25rem !important;
    padding: 0 0.65rem !important;
    gap: 0.4rem !important;
    font-size: 0.58rem !important;
    white-space: nowrap !important;
  }

  html[data-codex-universe-route='true'] .universe-premise-page > header
    .universe-theme-secondary {
    width: auto !important;
    max-width: 7.4rem !important;
    flex: 0 0 auto !important;
    padding: 0.65rem 0.7rem !important;
    font-size: 0.52rem !important;
    line-height: 1.2 !important;
  }

  html[data-codex-universe-route='true'] .universe-premise-page > header
    > div:first-child p:last-child {
    display: none !important;
  }

  html[data-codex-universe-route='true'] .universe-premise-page > header
    > div:first-child > div {
    display: none !important;
  }

  html[data-codex-universe-route='true'] .universe-premise-page
    .universe-premise-text-panel > div:first-child {
    padding: 3.8rem 0.85rem 0.8rem !important;
  }

  html[data-codex-universe-route='true'] .universe-premise-page
    [data-admin-text-key^='universe-entry-title:'] {
    max-width: calc(100% - 1.5rem) !important;
    font-size: clamp(2.15rem, 11vw, 3.75rem) !important;
    line-height: 0.9 !important;
  }

  html[data-codex-universe-route='true'] .universe-premise-page
    [data-admin-text-key^='universe-entry-summary:'] {
    max-width: calc(100% - 2rem) !important;
    margin-top: 0.65rem !important;
    font-size: 0.8rem !important;
    line-height: 1.35 !important;
  }

  html[data-codex-universe-route='true'] .universe-premise-page
    .universe-premise-copy {
    margin-top: clamp(2.75rem, 9vw, 3.8rem) !important;
  }
}

/*
  Final contrast continuity.
  This pseudo-element was a hero glow sized as a rectangle. During scroll its
  lower edge crossed the viewport and appeared as a hard colour band. The
  banner already has its own vignette, so the duplicate layer is removed.
*/
html[data-codex-universe-route='true'] .universe-premise-page
  .universe-premise-text-panel::after {
  display: none !important;
  content: none !important;
  background: none !important;
  box-shadow: none !important;
  filter: none !important;
}

/* Restore the original banner treatment used before the 16:9 experiment. */
html[data-codex-universe-route='true'] .universe-premise-page
  .universe-premise-banner :is(img, picture > img, video) {
  filter: saturate(0.88) contrast(1.05) brightness(0.78) !important;
}

html[data-codex-universe-route='true'] .universe-premise-page
  .universe-premise-banner .universe-premise-media-vignette {
  background:
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.3) 0%,
      rgba(0, 0, 0, 0.12) 30%,
      rgba(0, 0, 0, 0.24) 66%,
      rgba(0, 0, 0, 0.78) 100%
    ),
    radial-gradient(
      ellipse at center,
      rgba(0, 0, 0, 0.03) 0%,
      rgba(0, 0, 0, 0.12) 52%,
      rgba(0, 0, 0, 0.56) 100%
    ) !important;
  box-shadow:
    inset 0 -10rem 11rem rgba(0, 0, 0, 0.4),
    inset 0 7rem 8rem rgba(0, 0, 0, 0.28) !important;
}

html[data-codex-universe-route='true'] .universe-premise-page
  .universe-premise-banner::after {
  top: auto !important;
  bottom: 0 !important;
  height: 45% !important;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    color-mix(in srgb, var(--theme-bg, #050b08) 55%, transparent) 62%,
    var(--theme-bg, #050b08) 100%
  ) !important;
}

/* Original tall composition for tablets. */
@media (min-width: 768px) and (max-width: 1100px),
  (min-width: 768px) and (pointer: coarse) {
  html[data-codex-universe-route='true'] .universe-premise-page
    .universe-premise-banner {
    width: 100vw !important;
    height: clamp(40rem, 78svh, 58rem) !important;
    min-height: 40rem !important;
    max-height: none !important;
    aspect-ratio: auto !important;
  }

  html[data-codex-universe-route='true'] .universe-premise-page
    .universe-premise-text-panel > div:first-child {
    width: min(100%, 62rem) !important;
    max-width: 62rem !important;
    height: auto !important;
    min-height: clamp(40rem, 78svh, 58rem) !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    padding: clamp(7rem, 13vw, 10rem) clamp(1rem, 5vw, 5rem)
      clamp(4rem, 8vw, 6rem) !important;
  }
}

/* Original tall composition and controls for phones. */
@media (max-width: 767px) {
  html[data-codex-universe-route='true'] .universe-premise-page
    .universe-premise-banner {
    width: 100vw !important;
    height: clamp(34rem, 72svh, 44rem) !important;
    min-height: 34rem !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    border-radius: 0 !important;
  }

  html[data-codex-universe-route='true'] .universe-premise-page
    .universe-premise-text-panel > div:first-child {
    width: min(100%, 62rem) !important;
    max-width: 62rem !important;
    height: auto !important;
    min-height: clamp(34rem, 72svh, 44rem) !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    padding: clamp(8rem, 24vw, 10rem) 1rem 3.5rem !important;
  }

  html[data-codex-universe-route='true'] .universe-premise-page > header {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 0.75rem !important;
    padding: 0.9rem 0.8rem 4.4rem !important;
  }

  html[data-codex-universe-route='true'] .universe-premise-page > header > div:first-child {
    width: 100% !important;
    min-width: 0 !important;
    flex: 0 1 auto !important;
    gap: 1rem !important;
  }

  html[data-codex-universe-route='true'] .universe-premise-page > header
    > div:first-child > div {
    display: block !important;
  }

  html[data-codex-universe-route='true'] .universe-premise-page > header
    > div:first-child p:last-child {
    display: block !important;
  }

  html[data-codex-universe-route='true'] .universe-premise-page > header > div:last-child {
    width: 100% !important;
    max-width: none !important;
    flex: 0 1 auto !important;
  }

  html[data-codex-universe-route='true'] .universe-premise-page > header
    .universe-theme-back {
    width: auto !important;
    min-width: 0 !important;
    height: 2.5rem !important;
    padding: 0 0.75rem !important;
    gap: 0.75rem !important;
    font-size: 0.75rem !important;
    white-space: nowrap !important;
  }

  html[data-codex-universe-route='true'] .universe-premise-page > header
    .universe-theme-secondary {
    width: 100% !important;
    max-width: none !important;
    flex: 1 1 100% !important;
    padding: 0.75rem 1.25rem !important;
    font-size: 0.75rem !important;
    line-height: normal !important;
  }

  html[data-codex-universe-route='true'] .universe-premise-page
    [data-admin-text-key^='universe-entry-title:'] {
    max-width: calc(100vw - 1.6rem) !important;
    font-size: clamp(2.85rem, 14vw, 4.5rem) !important;
    line-height: 0.91 !important;
  }

  html[data-codex-universe-route='true'] .universe-premise-page
    [data-admin-text-key^='universe-entry-summary:'] {
    max-width: calc(100vw - 2.5rem) !important;
    margin-top: 1.35rem !important;
    font-size: 0.96rem !important;
    line-height: 1.62 !important;
  }

  html[data-codex-universe-route='true'] .universe-premise-page
    .universe-premise-copy {
    margin-top: 3.8rem !important;
  }
}

/* Match the higher-specificity rules from the temporary compact header. */
@media (max-width: 767px) {
  html[data-codex-universe-route='true'][data-codex-universe-detail='true']
    .universe-premise-page > header {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 0.75rem !important;
    padding: 0.9rem 0.8rem 4.4rem !important;
  }

  html[data-codex-universe-route='true'][data-codex-universe-detail='true']
    .universe-premise-page > header > div:first-child {
    position: static !important;
    width: 100% !important;
    min-width: 0 !important;
    flex: 0 1 auto !important;
    gap: 1rem !important;
  }

  html[data-codex-universe-route='true'][data-codex-universe-detail='true']
    .universe-premise-page > header > div:first-child > div,
  html[data-codex-universe-route='true'][data-codex-universe-detail='true']
    .universe-premise-page > header > div:first-child p:last-child {
    display: block !important;
  }

  html[data-codex-universe-route='true'][data-codex-universe-detail='true']
    .universe-premise-page > header > div:last-child {
    position: static !important;
    display: flex !important;
    width: 100% !important;
    max-width: none !important;
    flex: 0 1 auto !important;
  }

  html[data-codex-universe-route='true'][data-codex-universe-detail='true']
    .universe-premise-page > header .universe-theme-back {
    width: auto !important;
    min-width: 0 !important;
    height: 2.5rem !important;
    padding: 0 0.75rem !important;
    gap: 0.75rem !important;
    font-size: 0.75rem !important;
  }

  html[data-codex-universe-route='true'][data-codex-universe-detail='true']
    .universe-premise-page > header .universe-theme-secondary {
    width: 100% !important;
    max-width: none !important;
    flex: 1 1 100% !important;
    padding: 0.75rem 1.25rem !important;
    font-size: 0.75rem !important;
    line-height: normal !important;
  }

  html[data-codex-universe-route='true'][data-codex-universe-detail='true']
    .universe-premise-page [data-admin-text-key^='universe-entry-title:'] {
    max-width: calc(100vw - 1.6rem) !important;
    font-size: clamp(2.85rem, 14vw, 4.5rem) !important;
    line-height: 0.91 !important;
  }

  html[data-codex-universe-route='true'][data-codex-universe-detail='true']
    .universe-premise-page [data-admin-text-key^='universe-entry-summary:'] {
    max-width: calc(100vw - 2.5rem) !important;
    margin-top: 1.35rem !important;
    font-size: 0.96rem !important;
    line-height: 1.62 !important;
  }

  html[data-codex-universe-route='true'][data-codex-universe-detail='true']
    .universe-premise-page .universe-premise-copy {
    margin-top: 3.8rem !important;
  }
}

/*
  Banner vignette alignment.
  Some original theme frames left a border on the banner fade layer. On mobile,
  when the user scrolls a card detail, that border appeared as a loose horizontal
  moulding line through the hero image. Keep the fade inside the banner image,
  remove the frame edge, and delay the visible transition so it blends only near
  the lower part of the banner.
*/
html[data-codex-universe-route='true'] .universe-premise-page
  .universe-premise-banner {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
}

html[data-codex-universe-route='true'] .universe-premise-page
  .universe-premise-banner::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: auto !important;
  bottom: 0 !important;
  height: 45% !important;
  border: 0 !important;
  border-top: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  pointer-events: none !important;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    transparent 34%,
    color-mix(in srgb, var(--theme-bg, #050b08) 18%, transparent) 66%,
    color-mix(in srgb, var(--theme-bg, #050b08) 74%, transparent) 100%
  ) !important;
}

@media (max-width: 767px) {
  html[data-codex-universe-route='true'] .universe-premise-page
    .universe-premise-banner::after {
    height: 42% !important;
    background: linear-gradient(
      to bottom,
      transparent 0%,
      transparent 38%,
      color-mix(in srgb, var(--theme-bg, #050b08) 16%, transparent) 68%,
      color-mix(in srgb, var(--theme-bg, #050b08) 68%, transparent) 100%
    ) !important;
  }
}

/*
  Remove the false footer under Universe card banners.
  The previous fade reached a solid theme colour at the bottom, and the content
  wrapper added a large empty top gap. On light cards such as "Sala Branca" this
  looked like a detached grey block below the image. Keep only a subtle in-image
  vignette and bring the text block close enough that no empty strip remains.
*/
html[data-codex-universe-route='true'] .universe-premise-page
  .universe-premise-banner::after {
  height: clamp(7rem, 22vh, 12rem) !important;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0, 0, 0, 0.02) 42%,
    rgba(0, 0, 0, 0.08) 76%,
    rgba(0, 0, 0, 0.12) 100%
  ) !important;
}

html[data-codex-universe-route='true'] .universe-premise-page
  .universe-premise-layout {
  padding-top: clamp(1rem, 2.2vw, 1.6rem) !important;
}

html[data-codex-universe-route='true'] .universe-premise-page
  .universe-premise-copy {
  margin-top: 0 !important;
}

@media (max-width: 767px) {
  html[data-codex-universe-route='true'] .universe-premise-page
    .universe-premise-banner::after {
    height: clamp(5.5rem, 18svh, 8.5rem) !important;
  }

  html[data-codex-universe-route='true'] .universe-premise-page
    .universe-premise-layout {
    padding-top: 1rem !important;
  }
}

/*
  User request: remove the banner footer/fade layer entirely.
  This is the layer that could look like a detached strip below the hero image
  on light Universe cards. The banner keeps the actual media and internal image
  treatment, but no generated footer overlay remains.
*/
html[data-codex-universe-route='true'] .universe-premise-page
  .universe-premise-banner::after {
  display: none !important;
  content: none !important;
  width: 0 !important;
  height: 0 !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  opacity: 0 !important;
}

html[data-codex-universe-route='true'] .universe-premise-page
  .universe-premise-layout {
  padding-top: 0 !important;
}

/*
  Comfortable separation between each Universe banner and its article copy.
  The spacing belongs to the content area, so it cannot recreate the removed
  banner overlay or a detached strip over the image.
*/
@media (min-width: 768px) {
  html[data-codex-universe-route='true'][data-codex-universe-detail='true']
    .universe-premise-page .universe-premise-layout {
    padding-top: 0 !important;
  }

  html[data-codex-universe-route='true'][data-codex-universe-detail='true']
    .universe-premise-page .universe-premise-copy {
    margin-top: clamp(2.25rem, 4vw, 3.5rem) !important;
  }
}

/* Keep the removed footer layer disabled even against the runtime theme rules. */
html[data-codex-universe-route='true'][data-codex-universe-detail='true']
  .universe-premise-view .universe-premise-page
  .universe-premise-banner::after {
  display: none !important;
  content: none !important;
  width: 0 !important;
  height: 0 !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  opacity: 0 !important;
}

/* Mobile and tablet: keep the Universe intro followed directly by the cards. */
@media (max-width: 1024px), (hover: none) and (pointer: coarse) {
  html[data-codex-universe-route='true'] .universe-cards-view
    .universe-cards-focus {
    display: none !important;
  }
}